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

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

@@ -3,228 +3,228 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const eventListeners = require('./event-listeners-4a8d66d5.js');
+const eventListeners = require('./event-listeners-74715e62.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) {
-    index.registerInstance(this, hostRef);
-    this.sixSubmit = index.createEvent(this, "six-form-submit", 7);
-    this.sixChange = index.createEvent(this, "six-form-change", 7);
-    this.sixReset = index.createEvent(this, "six-form-reset", 7);
-    this.eventListeners = new eventListeners.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 (index.h("div", { ref: (el) => (this.form = el), part: "base", class: "form", role: "form", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("slot", null)));
-  }
-};
+let SixForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixSubmit = index.createEvent(this, "six-form-submit", 7);
+    this.sixChange = index.createEvent(this, "six-form-change", 7);
+    this.sixReset = index.createEvent(this, "six-form-reset", 7);
+    this.eventListeners = new eventListeners.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 (index.h("div", { ref: (el) => (this.form = el), part: "base", class: "form", role: "form", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("slot", null)));
+  }
+};
 SixForm.style = sixFormCss;
 
 exports.six_form = SixForm;

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

@@ -3,55 +3,55 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-341df120.js');
-const formControl = require('./form-control-9e4dffd1.js');
-const slot = require('./slot-8abe833c.js');
+const formControl = require('./form-control-866bbece.js');
+const slot = require('./slot-ad537f24.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) {
-    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;
-    /** 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 = 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"]
-  }; }
-};
+let id = 0;
+let 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;
+    /** 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 = 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"]
+  }; }
+};
 SixGroupLabel.style = sixGroupLabelCss;
 
 exports.six_group_label = SixGroupLabel;