@haiilo/catalyst 5.2.3 → 5.4.0

package/dist/collection/components/cat-timepicker/cat-timepicker.js

@@ -0,0 +1,668 @@
+import { h, Host } from '@stencil/core';
+// import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+import { of } from 'rxjs';
+/**
+ * Inputs are used to allow users to provide text input when the expected input
+ * is short. As well as plain text, Input supports various types of text,
+ * including passwords and numbers.
+ *
+ * @slot hint - Optional hint element to be displayed with the input.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
+ * @part label - The label content.
+ * @part prefix - The text prefix.
+ * @part suffix - The text suffix.
+ */
+export class CatTimepicker {
+  constructor() {
+    this.state = undefined;
+    this.hasSlottedLabel = false;
+    this.hasSlottedHint = false;
+    this.errorMap = undefined;
+    this.requiredMarker = 'optional';
+    this.horizontal = false;
+    this.multiple = false;
+    this.placement = 'bottom-start';
+    this.value = undefined;
+    this.disabled = false;
+    this.placeholder = undefined;
+    this.hint = undefined;
+    this.identifier = undefined;
+    this.label = '';
+    this.name = undefined;
+    this.labelHidden = false;
+    this.required = false;
+    this.clearable = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.noItems = undefined;
+    this.errors = undefined;
+    this.errorUpdate = 0;
+    this.nativeAttributes = undefined;
+    this.minutesStep = 30;
+    this.hourShort = this.isBrowserHour12();
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+  }
+  componentDidLoad() {
+    var _a;
+    (_a = this.timeSelect) === null || _a === void 0 ? void 0 : _a.connect(this.timeConnector);
+    // IMask spike
+    // const input = this.hostElement.shadowRoot?.querySelector('cat-select')?.shadowRoot?.querySelector('input');
+    // if (input) {
+    //   this.timeMask = this.getTimeMask(input);
+    // }
+  }
+  render() {
+    return (h(Host, null, h("cat-select", { requiredMarker: this.requiredMarker, horizontal: this.horizontal, clearable: this.clearable, disabled: this.disabled, hint: this.hint, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, multiple: this.multiple, placeholder: this.placeholder, placement: this.placement, required: this.required, noItems: this.noItems, ref: el => (this.timeSelect = el), value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: event => this.onCatChange(event), onCatOpen: this.onCatOpen.bind(this), onCatClose: this.onCatClose.bind(this), onCatBlur: this.onCatBlur.bind(this) }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" }))))));
+  }
+  get timeConnector() {
+    return {
+      resolve: (times) => {
+        return of(times.map(t => this.timeArray.find(time => time.hour === this.getHour(t) && time.minutes === this.getMinutes(t))));
+      },
+      retrieve: (term) => {
+        const filteredTimeArray = this.timeArray.filter(t => {
+          if (!term)
+            return true;
+          const formatedTime = this.hourShort ? this.formatAMPM(t.hour, t.minutes) : this.formatTime(t.hour, t.minutes);
+          return formatedTime.toUpperCase().includes(term.toUpperCase());
+        });
+        return of({
+          last: true,
+          totalElements: filteredTimeArray.length,
+          content: filteredTimeArray
+        });
+      },
+      render: ({ hour, minutes }) => ({
+        label: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes)
+      })
+    };
+  }
+  get timeArray() {
+    const times = [];
+    for (let hour = 0; hour < 24; hour++) {
+      for (let minutes = 0; minutes < 60; minutes += this.minutesStep) {
+        if (this.isHigherThanMinValue(hour, minutes) && this.isLowerThanMaxValue(hour, minutes)) {
+          times.push({
+            id: this.hourShort ? this.formatAMPM(hour, minutes) : this.formatTime(hour, minutes),
+            hour,
+            minutes
+          });
+        }
+      }
+    }
+    return times;
+  }
+  isBrowserHour12() {
+    var _a, _b;
+    const browserLanguage = (_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.language) !== null && _b !== void 0 ? _b : 'en';
+    const hour = new Intl.DateTimeFormat(browserLanguage, { hour: 'numeric' }).format(new Date().setHours(16));
+    return hour.toLowerCase().includes('pm' || 'am');
+  }
+  getHour(time) {
+    let hour = Number(time.split(':')[0]);
+    if (time.toLowerCase().includes('pm') && hour < 12)
+      hour = hour + 12;
+    if (time.toLowerCase().includes('am') && hour == 12)
+      hour = hour - 12;
+    return hour;
+  }
+  getMinutes(time) {
+    const minutes = time.match(/:(\d+)/);
+    return Number(minutes ? minutes[1] : 0);
+  }
+  isHigherThanMinValue(hour, minutes) {
+    if (this.min) {
+      const minHour = this.getHour(this.min);
+      const minMinutes = this.getMinutes(this.min);
+      return hour > minHour || (hour === minHour && minutes >= minMinutes);
+    }
+    return true;
+  }
+  isLowerThanMaxValue(hour, minutes) {
+    if (this.max) {
+      const maxHour = this.getHour(this.max);
+      const maxMinutes = this.getMinutes(this.max);
+      return hour < maxHour || (hour === maxHour && minutes <= maxMinutes);
+    }
+    return true;
+  }
+  formatAMPM(hour, minutes) {
+    if (hour === 0) {
+      return `12:${minutes < 10 ? `0${minutes}` : minutes} AM`;
+    }
+    else if (hour < 12) {
+      return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes} AM`;
+    }
+    else {
+      return `${hour % 12 < 10 ? `0${hour % 12}` : hour % 12}:${minutes < 10 ? `0${minutes}` : minutes} PM`;
+    }
+  }
+  formatTime(hour, minutes) {
+    return `${hour < 10 ? `0${hour}` : hour}:${minutes < 10 ? `0${minutes}` : minutes}`;
+  }
+  onCatChange(event) {
+    var _a;
+    event.stopPropagation();
+    this.value = (_a = this.timeSelect) === null || _a === void 0 ? void 0 : _a.value;
+    this.catChange.emit(event);
+  }
+  onCatOpen(event) {
+    event.stopPropagation();
+    this.catOpen.emit(event);
+  }
+  onCatClose(event) {
+    event.stopPropagation();
+    this.catClose.emit(event);
+  }
+  onCatBlur(event) {
+    event.stopPropagation();
+    this.catBlur.emit(event);
+  }
+  static get is() { return "cat-timepicker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-timepicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-timepicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "requiredMarker": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label need a marker to shown if the input is required or optional."
+        },
+        "attribute": "required-marker",
+        "reflect": false,
+        "defaultValue": "'optional'"
+      },
+      "horizontal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the label is on top or left."
+        },
+        "attribute": "horizontal",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable multiple selection."
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the select."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
+          "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
+          "references": {
+            "CatSelectTaggingValue": {
+              "location": "import",
+              "path": "../cat-select/cat-select"
+            },
+            "CatSelectMultipleTaggingValue": {
+              "location": "import",
+              "path": "../cat-select/cat-select"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the select. <br />\n<br />\nThe value of the select depends on whether it is allowed to choose a single item or several items. <br />\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />\n<br />\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the input is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder text to display within the select."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[] | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional hint text(s) to be displayed with the input."
+        },
+        "attribute": "hint",
+        "reflect": false
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A unique identifier for the input."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the input."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A value is required or must be checked for the form to be submittable."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the select should show a clear button."
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A maximum value for date, time and numeric values."
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A minimum value for date, time and numeric values."
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "noItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The text to display in the dropdown if no results are found."
+        },
+        "attribute": "no-items",
+        "reflect": false
+      },
+      "errors": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | string[] | ErrorMap",
+          "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+          "references": {
+            "ErrorMap": {
+              "location": "import",
+              "path": "../cat-form-hint/cat-form-hint"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+        },
+        "attribute": "errors",
+        "reflect": false
+      },
+      "errorUpdate": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | number",
+          "resolved": "boolean | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+        },
+        "attribute": "error-update",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "nativeAttributes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key: string]: string }",
+          "resolved": "undefined | { [key: string]: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Attributes that will be added to the native HTML input element."
+        }
+      },
+      "minutesStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Attributes that will be added to the native HTML input element."
+        },
+        "attribute": "minutes-step",
+        "reflect": false,
+        "defaultValue": "30"
+      },
+      "hourShort": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Attributes that will be added to the native HTML input element."
+        },
+        "attribute": "hour-short",
+        "reflect": false,
+        "defaultValue": "this.isBrowserHour12()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "state": {},
+      "hasSlottedLabel": {},
+      "hasSlottedHint": {},
+      "errorMap": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "catOpen",
+        "name": "catOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select dropdown is opened."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "catClose",
+        "name": "catClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select dropdown is closed."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "catChange",
+        "name": "catChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value is changed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "catBlur",
+        "name": "catBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select loses the focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=cat-timepicker.js.map