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

package/dist/esm/six-error-page.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixErrorPageCss = ".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";
+
+var ERROR_CODE;
+(function (ERROR_CODE) {
+  ERROR_CODE[ERROR_CODE["FORBIDDEN"] = 403] = "FORBIDDEN";
+  ERROR_CODE[ERROR_CODE["NOT_FOUND"] = 404] = "NOT_FOUND";
+  ERROR_CODE[ERROR_CODE["INTERNAL_SERVER_ERROR"] = 500] = "INTERNAL_SERVER_ERROR";
+})(ERROR_CODE || (ERROR_CODE = {}));
+const TITLE_PER_ERROR_CODE = {
+  [ERROR_CODE.FORBIDDEN]: {
+    en: 'Access Denied',
+    de: 'Kein Zugriff',
+  },
+  [ERROR_CODE.NOT_FOUND]: {
+    en: 'Not Found',
+    de: 'Seite nicht gefunden',
+  },
+  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {
+    en: 'Ooops!',
+    de: 'Ups!',
+  },
+};
+const DESCRIPTION_PER_ERROR_CODE = {
+  [ERROR_CODE.FORBIDDEN]: {
+    en: [
+      'You don’t have permission to access this page. ',
+      'Please contact an administrator or click the SIX logo on top left.',
+    ],
+    de: [
+      'Sie haben keine Zugriffsberechtigung auf diese Seite.',
+      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',
+    ],
+  },
+  [ERROR_CODE.NOT_FOUND]: {
+    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],
+    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],
+  },
+  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {
+    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],
+    de: [
+      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',
+      'Bitte klicken Sie auf das SIX-Logo oben links.',
+    ],
+  },
+};
+let SixErrorPage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Defines language and thus displays the proper error page in the selected language.
+     */
+    this.language = 'en';
+  }
+  getIconName() {
+    if (this.customIcon !== undefined) {
+      return this.customIcon;
+    }
+    if (this.errorCode === undefined) {
+      return;
+    }
+    if (this.errorCode === ERROR_CODE.FORBIDDEN) {
+      return 'lock';
+    }
+    if (this.errorCode === ERROR_CODE.NOT_FOUND) {
+      return 'find-in-page';
+    }
+    if (this.errorCode === ERROR_CODE.INTERNAL_SERVER_ERROR) {
+      return 'sentiment-dissatisfied';
+    }
+  }
+  getErrorTitle() {
+    if (this.customTitle !== undefined) {
+      return this.customTitle;
+    }
+    if (this.errorCode === undefined) {
+      return;
+    }
+    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];
+  }
+  getErrorDescription() {
+    if (this.errorCode === undefined && this.customDescription === undefined) {
+      return;
+    }
+    const descriptions = this.getDescriptions();
+    return descriptions.map((errorMessage) => h("div", null, errorMessage));
+  }
+  getDescriptions() {
+    if (this.customDescription !== undefined) {
+      return this.customDescription;
+    }
+    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
+  }
+  render() {
+    return (h("div", { part: "container" }, h("div", { class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+  }
+};
+SixErrorPage.style = sixErrorPageCss;
+
+export { SixErrorPage as six_error_page };

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2605a62.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)}";
+
+let SixFileListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.downloadEvent = createEvent(this, "six-file-list-item-download", 7);
+    this.removeEvent = createEvent(this, "six-file-list-item-remove", 7);
+    /** An id to clearly identify the file */
+    this.identifier = '';
+    /** The filename */
+    this.name = '';
+    /** The date when the file was uploaded */
+    this.date = '';
+    /** Set to true if you don't want to allow to download this file */
+    this.nodownload = false;
+    /** Set to true if you don't want to allow to delete this file */
+    this.nodelete = false;
+    this.downloadFile = () => {
+      if (this.nodownload) {
+        return;
+      }
+      this.downloadEvent.emit({ fileId: this.identifier, name: this.name });
+    };
+    this.removeFile = () => {
+      if (this.nodelete) {
+        return;
+      }
+      this.removeEvent.emit({ fileId: this.identifier, name: this.name });
+    };
+  }
+  render() {
+    return (h("div", { class: "six-files-list-item" }, h("span", { class: {
+        'six-files-list-item__name': true,
+        'six-files-list-item__name--disabled': this.nodownload,
+      }, onClick: this.downloadFile }, this.name), h("span", { class: "six-files-list-item__date" }, this.date), this.size !== undefined && h("span", { class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { class: {
+        'six-files-list-item__icon': true,
+        'six-files-list-item__icon--disabled': this.nodelete,
+      }, size: "small", onClick: this.removeFile }, "delete")));
+  }
+};
+SixFileListItem.style = sixFileListItemCss;
+
+export { SixFileListItem as six_file_list_item };

package/dist/esm/six-file-list.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
+
+let SixFileList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "six-files-list__container" }, h("slot", null)));
+  }
+};
+SixFileList.style = sixFileListCss;
+
+export { SixFileList as six_file_list };

package/dist/esm/six-file-upload.entry.js

@@ -0,0 +1,103 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.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}";
+
+let SixFileUpload = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fileUploadSuccessEvent = createEvent(this, "six-file-upload-success", 7);
+    this.fileUploadFailureEvent = createEvent(this, "six-file-upload-failure", 7);
+    this.isOver = false;
+    /** Set to true if file control should be small. */
+    this.compact = false;
+    /** Set when button is disabled. */
+    this.disabled = false;
+    /** Allowed max file size in bytes. */
+    this.maxFileSize = undefined;
+    this.handleFiles = (files) => {
+      if (this.disabled) {
+        return;
+      }
+      const file = files.item(0);
+      if (!file) {
+        return;
+      }
+      if (this.accept && this.accept !== file.type) {
+        return this.fileUploadFailureEvent.emit({ reason: 'File has invalid MIME type.' });
+      }
+      if (this.maxFileSize && file.size > this.maxFileSize) {
+        return this.fileUploadFailureEvent.emit({ reason: 'File is too big.' });
+      }
+      this.fileUploadSuccessEvent.emit({ file });
+    };
+    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 = '';
+      }
+    };
+  }
+  dragenterHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragoverHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragleaveHandler() {
+    if (!this.disabled) {
+      this.isOver = false;
+    }
+  }
+  dropHandler({ dataTransfer }) {
+    if (!this.disabled) {
+      this.isOver = false;
+      if (dataTransfer) {
+        this.handleFiles(dataTransfer.files);
+      }
+    }
+  }
+  componentDidLoad() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.addEventListener(eventName, this.preventDefaults, false);
+      document.body.addEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  disconnectedCallback() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.removeEventListener(eventName, this.preventDefaults, false);
+      document.body.removeEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  renderLabel() {
+    return (this.label ||
+      (this.compact ? ('Upload') : (h("span", null, "Drop files to upload, or ", h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
+  }
+  render() {
+    const Container = this.compact ? 'six-button' : 'six-card';
+    return (h("div", { class: {
+        'six-file-upload': true,
+        'six-file-upload--disabled': this.disabled,
+      } }, h(Container, { class: {
+        'six-file-upload__container--compact': this.compact,
+        'six-file-upload__container--full': !this.compact,
+      } }, this.compact && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { class: {
+        'six-file-upload__drop-zone': true,
+        'six-file-upload__drop-zone--hover': this.isOver,
+        'six-file-upload__drop-zone--compact': this.compact,
+      } }, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, onChange: this.onChange, ref: (el) => (this.fileInput = el) })))));
+  }
+  get host() { return getElement(this); }
+};
+SixFileUpload.style = sixFileUploadCss;
+
+export { SixFileUpload as six_file_upload };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2605a62.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)}";
+
+let SixFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("footer", { class: "six-footer" }, h("slot", null)));
+  }
+};
+SixFooter.style = sixFooterCss;
+
+export { SixFooter as six_footer };

package/dist/esm/six-form.entry.js

@@ -0,0 +1,226 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
+import { E as EventListeners } from './event-listeners-570a24ea.js';
+
+const sixFormCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}";
+
+let SixForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixSubmit = createEvent(this, "six-form-submit", 7);
+    this.sixChange = createEvent(this, "six-form-change", 7);
+    this.sixReset = createEvent(this, "six-form-reset", 7);
+    this.eventListeners = new EventListeners();
+    /** Prevent the form from validating inputs before submitting. */
+    this.novalidate = false;
+  }
+  connectedCallback() {
+    this.formControls = [
+      {
+        tag: 'six-button',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        click: (event) => {
+          const target = event.target;
+          if (target.submit) {
+            this.submit();
+          }
+          if (target.reset) {
+            this.reset();
+          }
+        },
+      },
+      {
+        tag: 'six-checkbox',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-checkbox-change',
+      },
+      {
+        tag: 'six-color-picker',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+      },
+      {
+        tag: 'six-input',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-input-change',
+      },
+      {
+        tag: 'six-datepicker',
+        serialize: (el, formData) => { var _a; return el.name && !el.disabled ? formData.append(el.name, (_a = el.value) === null || _a === void 0 ? void 0 : _a.toISOString()) : null; },
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-datepicker-select',
+      },
+      {
+        tag: 'six-radio',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-radio-change',
+      },
+      {
+        tag: 'six-range',
+        serialize: (el, formData) => {
+          if (el.name && !el.disabled) {
+            formData.append(el.name, el.value + '');
+          }
+        },
+        changeEventName: 'six-range-change',
+      },
+      {
+        tag: 'six-select',
+        serialize: (el, formData) => {
+          if (el.name && !el.disabled) {
+            if (el.multiple) {
+              const selectedOptions = [...el.value];
+              if (selectedOptions.length) {
+                selectedOptions.map((value) => formData.append(el.name, value));
+              }
+              else {
+                formData.append(el.name, '');
+              }
+            }
+            else {
+              formData.append(el.name, el.value + '');
+            }
+          }
+        },
+        changeEventName: 'six-select-change',
+      },
+      {
+        tag: 'six-switch',
+        serialize: (el, formData) => el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-switch-change',
+      },
+      {
+        tag: 'six-textarea',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        changeEventName: 'six-textarea-change',
+      },
+      {
+        tag: 'six-timepicker',
+        serialize: (el, formData) => el.name && !el.disabled ? formData.append(el.name, el.value) : null,
+        keyDown: (event) => {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
+            this.submit();
+          }
+        },
+        changeEventName: 'six-timepicker-change',
+      },
+    ];
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  componentDidLoad() {
+    this.getFormControls().then((controls) => controls.forEach((control) => this.appendChangeListener(control)));
+  }
+  appendChangeListener(el) {
+    const tag = el.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.changeEventName) {
+        this.eventListeners.add(el, formControl.changeEventName, () => this.handleChange(el));
+      }
+    }
+  }
+  /** Serializes all form controls elements and returns a `FormData` object. */
+  async getFormData() {
+    const formData = new FormData();
+    const formControls = await this.getFormControls();
+    formControls.map((el) => this.serializeElement(el, formData));
+    return formData;
+  }
+  /** Gets all form control elements (native and custom). */
+  async getFormControls() {
+    const slot = this.form.querySelector('slot');
+    const tags = this.formControls.map((control) => control.tag);
+    return slot
+      .assignedElements({ flatten: true })
+      .reduce((all, el) => all.concat(el, [...el.querySelectorAll('*')]), [])
+      .filter((el) => tags.includes(el.tagName.toLowerCase()));
+  }
+  /**
+   * Submits the form. If all controls are valid, the `six-form-submit` event will be emitted and the promise will resolve
+   * with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.
+   */
+  async submit() {
+    const formData = await this.getFormData();
+    const formControls = await this.getFormControls();
+    const formControlsThatReport = formControls.filter((el) => typeof el.reportValidity === 'function');
+    if (!this.novalidate) {
+      let isValid = true;
+      for (const el of formControlsThatReport) {
+        if (!(await el.reportValidity())) {
+          isValid = false;
+        }
+      }
+      if (!isValid) {
+        return false;
+      }
+    }
+    this.sixSubmit.emit({ formData, formControls });
+    return true;
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    const formControls = await this.getFormControls();
+    const validationTasks = formControls
+      .filter((el) => typeof el.checkValidity === 'function')
+      .map((el) => el.checkValidity());
+    const invalidControls = await Promise.all(validationTasks).then((results) => results.filter((valid) => valid === false));
+    return invalidControls.length == 0;
+  }
+  /** Resets the form and resets the value of all descendants*/
+  async reset() {
+    const formControls = await this.getFormControls();
+    formControls
+      .filter((control) => (control === null || control === void 0 ? void 0 : control.reset) && typeof (control === null || control === void 0 ? void 0 : control.reset) === 'function')
+      .forEach((formControl) => formControl.reset());
+    this.sixReset.emit();
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tag = target.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.click) {
+        formControl.click(event);
+      }
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tag = target.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag && formControl.keyDown) {
+        formControl.keyDown(event);
+      }
+    }
+  }
+  handleChange(el) {
+    this.checkValidity().then((isValid) => this.sixChange.emit({
+      valid: isValid,
+      formControl: el,
+    }));
+  }
+  serializeElement(el, formData) {
+    const tag = el.tagName.toLowerCase();
+    for (const formControl of this.formControls) {
+      if (formControl.tag === tag) {
+        return formControl.serialize(el, formData);
+      }
+    }
+    return null;
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.form = el), part: "base", class: "form", role: "form", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", null)));
+  }
+};
+SixForm.style = sixFormCss;
+
+export { SixForm as six_form };

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, g as getElement } from './index-a2605a62.js';
+import { F as FormControl } from './form-control-24f446af.js';
+import { h as hasSlot } from './slot-6f3984c7.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}";
+
+let id = 0;
+let SixGroupLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wrapperLabelId = `label-${++id}`;
+    this.labelId = `label-label-${id}`;
+    this.helpTextId = `label-help-text-${id}`;
+    this.hasHelpTextSlot = false;
+    this.hasLabelSlot = false;
+    /** The label's size. */
+    this.size = 'medium';
+    /** The wrapper label's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The wrapper label's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** Set to true to disable the label. */
+    this.disabled = false;
+  }
+  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 = hasSlot(this.host, 'label');
+    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+  }
+  render() {
+    return (h(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 }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "helpText": ["handleLabelChange"],
+    "label": ["handleLabelChange"]
+  }; }
+};
+SixGroupLabel.style = sixGroupLabelCss;
+
+export { SixGroupLabel as six_group_label };