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

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

@@ -0,0 +1,550 @@
+import { Component, Event, Method, Prop, State, Watch, h, Element } from '@stencil/core';
+import FormControl from '../../functional-components/form-control/form-control';
+import { hasSlot } from '../../utils/slot';
+import { EventListeners } from '../../utils/event-listeners';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The checkbox label.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part control - The checkbox control.
+ * @part checked-icon - The container the wraps the checked icon.
+ * @part indeterminate-icon - The container that wraps the indeterminate icon.
+ * @part text - The checkbox text rendered to the right.
+ */
+export class SixCheckbox {
+  constructor() {
+    this.inputId = `checkbox-${++id}`;
+    this.labelId = `checkbox-label-${id}`;
+    this.textId = `checkbox-text-${id}`;
+    this.errorTextId = `input-error-text-${id}`;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new EventListeners();
+    this.hasFocus = false;
+    this.hasLabelSlot = false;
+    this.hasErrorTextSlot = false;
+    /** Set to true to disable the checkbox. */
+    this.disabled = false;
+    /** Set to true to make the checkbox a required field. */
+    this.required = false;
+    /** The checkbox label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The checkbox's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** Set to true to draw the checkbox in a checked state. */
+    this.checked = false;
+    /** Set to true to draw the checkbox in an indeterminate state. */
+    this.indeterminate = false;
+    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+    this.invalid = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
+  }
+  handleCheckedChange() {
+    if (!this.input) {
+      return;
+    }
+    this.input.checked = this.checked;
+    this.input.indeterminate = this.indeterminate;
+    this.invalid = !this.input.checkValidity();
+    this.sixChange.emit();
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleInvalid = this.handleInvalid.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  componentWillLoad() {
+    this.defaultState = this.checked;
+    this.handleSlotChange();
+  }
+  componentDidLoad() {
+    this.input.indeterminate = this.indeterminate;
+    this.eventListeners.add(this.input, 'invalid', (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = this.input.validationMessage;
+      }
+      event.preventDefault();
+    });
+  }
+  /** Sets focus on the checkbox. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.customErrorText = '';
+    this.customValidation = message !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.checked = this.defaultState;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleChange() {
+    this.checked = this.input.checked;
+    this.indeterminate = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  handleInvalid() {
+    this.invalid = true;
+  }
+  handleSlotChange() {
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  render() {
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() },
+      h("label", { part: "base", class: {
+          checkbox: true,
+          'checkbox--checked': this.checked,
+          'checkbox--disabled': this.disabled,
+          'checkbox--focused': this.hasFocus,
+          'checkbox--invalid': this.invalid,
+          'checkbox--indeterminate': this.indeterminate,
+        }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown },
+        h("span", { part: "control", class: "checkbox__control" },
+          this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" },
+            h("svg", { viewBox: "0 0 16 16" },
+              h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" },
+                h("g", { stroke: "currentColor", "stroke-width": "2" },
+                  h("g", { transform: "translate(3.428571, 3.428571)" },
+                    h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }),
+                    h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))),
+          !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" },
+            h("svg", { viewBox: "0 0 16 16" },
+              h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" },
+                h("g", { stroke: "currentColor", "stroke-width": "2" },
+                  h("g", { transform: "translate(2.285714, 6.857143)" },
+                    h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))),
+          h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })),
+        h("span", { part: "text", id: this.textId, class: "checkbox__text" },
+          h("slot", null)))));
+  }
+  static get is() { return "six-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The checkbox's name attribute."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The checkbox's value attribute."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to disable the checkbox."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to make the checkbox a required field."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The checkbox label. Alternatively, you can use the label slot."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "errorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The checkbox's error text. Alternatively, you can use the error-text slot."
+      },
+      "attribute": "error-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the checkbox in a checked state."
+      },
+      "attribute": "checked",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the checkbox in an indeterminate state."
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+      },
+      "attribute": "invalid",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "errorOnBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to display the error text on blur and not when typing"
+      },
+      "attribute": "error-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {},
+    "hasLabelSlot": {},
+    "hasErrorTextSlot": {}
+  }; }
+  static get events() { return [{
+      "method": "sixBlur",
+      "name": "six-checkbox-blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control loses focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixChange",
+      "name": "six-checkbox-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control's checked state changes."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixFocus",
+      "name": "six-checkbox-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control gains focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the checkbox.",
+        "tags": []
+      }
+    },
+    "removeFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Removes focus from the checkbox.",
+        "tags": []
+      }
+    },
+    "reportValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+        "tags": []
+      }
+    },
+    "checkValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity.",
+        "tags": []
+      }
+    },
+    "setCustomValidity": {
+      "complexType": {
+        "signature": "(message: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+        "tags": []
+      }
+    },
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the formcontrol",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "handleCheckedChange"
+    }, {
+      "propName": "indeterminate",
+      "methodName": "handleCheckedChange"
+    }, {
+      "propName": "errorText",
+      "methodName": "handleLabelChange"
+    }, {
+      "propName": "label",
+      "methodName": "handleLabelChange"
+    }]; }
+}

package/dist/collection/components/six-datepicker/components/day-selection.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
+  return (h("table", { class: "datepicker-table", part: "day-selection" },
+    h("thead", { part: "weekday-header" }, locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))),
+    h("tbody", null, calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => onClickDateCell(cell), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': cell.isToday,
+        'datepicker-table__cell--is-selected': cell.isSelected,
+        'datepicker-table__cell--is-outdated': cell.isOutdated,
+        'datepicker-table__cell--is-disabled': cell.isDisabled,
+        'datepicker-table__cell--is-selectable': !cell.isDisabled,
+      } }, cell.label)))))))));
+};

package/dist/collection/components/six-datepicker/components/month-selection.js

@@ -0,0 +1,12 @@
+import { h } from '@stencil/core';
+import { now } from '../../../utils/date-util';
+export const MonthSelection = ({ locale, selectedDate, onClickMonthCell }) => {
+  const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
+  const isSelectedMonth = (value) => (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) === locale.monthsShort.findIndex((m) => m === value);
+  return (h("table", { class: "datepicker-table", part: "month-selection" },
+    h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => onClickMonthCell(month), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': isToday(month),
+        'datepicker-table__cell--is-selected': isSelectedMonth(month),
+      } }, month)))))))));
+};

package/dist/collection/components/six-datepicker/components/year-selection.js

@@ -0,0 +1,10 @@
+import { now } from '../../../utils/date-util';
+import { h } from '@stencil/core';
+export const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {
+  return (h("table", { class: "datepicker-table", part: "year-selection" },
+    h("tbody", null, yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => (h("td", { onClick: () => onClickYearCell(year), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': now().getFullYear() === year,
+        'datepicker-table__cell--is-selected': (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === year,
+      } }, year)))))))));
+};

package/dist/collection/components/six-datepicker/six-date-formats.js

@@ -0,0 +1,23 @@
+export var SixDateFormats;
+(function (SixDateFormats) {
+  SixDateFormats["DDMMYYY_DOT"] = "dd.mm.yyyy";
+  SixDateFormats["YYYYMMDD_DASH"] = "yyyy-mm-dd";
+  SixDateFormats["DDMMYYYY_DASH"] = "dd-mm-yyyy";
+  SixDateFormats["DDMMYYYY_SLASH"] = "dd/mm/yyyy";
+  SixDateFormats["YYYYMMDD_SLASH"] = "yyyy/mm/dd";
+  SixDateFormats["DDMMYY_DOT"] = "dd.mm.yy";
+  SixDateFormats["YYMMDD_DASH"] = "yy-mm-dd";
+  SixDateFormats["DDMMYY_DASH"] = "dd-mm-yy";
+  SixDateFormats["DDMMYY_SLASH"] = "dd/mm/yy";
+  SixDateFormats["YYMMDD_SLASH"] = "yy/mm/dd";
+  SixDateFormats["DDMMYYY_DOT_TIME"] = "dd.mm.yyyy hh:MM:ss";
+  SixDateFormats["YYYYMMDD_DASH_TIME"] = "yyyy-mm-dd hh:MM:ss";
+  SixDateFormats["DDMMYYYY_DASH_TIME"] = "dd-mm-yyyy hh:MM:ss";
+  SixDateFormats["DDMMYYYY_SLASH_TIME"] = "dd/mm/yyyy hh:MM:ss";
+  SixDateFormats["YYYYMMDD_SLASH_TIME"] = "yyyy/mm/dd hh:MM:ss";
+  SixDateFormats["DDMMYY_DOT_TIME"] = "dd.mm.yy hh:MM:ss";
+  SixDateFormats["YYMMDD_DASH_TIME"] = "yy-mm-dd hh:MM:ss";
+  SixDateFormats["DDMMYY_DASH_TIME"] = "dd-mm-yy hh:MM:ss";
+  SixDateFormats["DDMMYY_SLASH_TIME"] = "dd/mm/yy hh:MM:ss";
+  SixDateFormats["YYMMDD_SLASH_TIME"] = "yy/mm/dd hh:MM:ss";
+})(SixDateFormats || (SixDateFormats = {}));