@oiz/stzh-components 0.0.0-pretest

package/dist/collection/components/stzh-appointments/stzh-appointments.js

@@ -0,0 +1,515 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations, tc } from "../../utils/translation-utils";
+import { printISODate, parseISODate } from "../../utils/date-utils";
+import { createGlobalAdapter } from "../../utils/date-adapter";
+/**
+ * @slot - Slot for any content
+ */
+export class StzhAppointments {
+  constructor() {
+    /** Sort by */
+    this.sortBy = "start";
+    /** Initial selected values */
+    this.appointments = [];
+    /* Selected appointment by value */
+    this.value = "";
+    /* Name of radiogroup form element */
+    this.name = "appointment";
+    /** Nr of items shown */
+    this.showItems = 5;
+    /** Nr of items shown when more link is clicked */
+    this.stepItems = 5;
+    /** Overwrite default calendar title */
+    this.calendarTitle = "";
+    /** Overwrite default appointments title */
+    this.appointmentsTitle = "";
+    this.showMoreLink = false;
+    this.moreItemsLeft = 0;
+    this.showCalendar = false;
+    this.showSort = false;
+    this.showSortStart = false;
+    this.showSortPlace = false;
+    this.showAppointmentsTitle = false;
+    this.allAppointsmentOnSameDay = true;
+    this.sortOptions = [];
+    this.isDateDisabled = (date) => {
+      const dateHasAppointment = !!this._appointments.find(appointment => {
+        return appointment.start.getFullYear() === date.getFullYear()
+          && appointment.start.getMonth() === date.getMonth()
+          && appointment.start.getDate() === date.getDate();
+      });
+      return !dateHasAppointment;
+    };
+    this.onNextActiveDateClick = async () => {
+      if (this.nextDate) {
+        this.currentDate = this.nextDate;
+        const popover = await this.datepickerElement.getPopover();
+        if (popover) {
+          popover.hide();
+        }
+      }
+    };
+    this.onMoreClick = () => {
+      this.showItems = this.stepItems + this.showItems;
+      // return focus to radiogroup
+      const radio = this.inputElement.querySelector('stzh-radio');
+      radio.setFocus();
+    };
+    this.onDropdownChange = async (event) => {
+      const target = event.target;
+      const sortBy = await target.getValue();
+      if (sortBy) {
+        this.sortBy = sortBy;
+      }
+    };
+    this.onDatepickerChange = (event) => {
+      if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {
+        return;
+      }
+      this.currentDate = event.detail.valueAsDate;
+      // reset number of items that should be shown
+      this.showItems = this.stepItems;
+    };
+    this.onRadioChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-appointments",
+        value: this.value
+      });
+    };
+  }
+  currentDateWatcher(newValue) {
+    if (!newValue) {
+      this._currentDate = this.dateByValue || this.earliestDate;
+      if (!this.dateByValue) {
+        this.setValueToFirstAppointmentOfCurrentDate();
+      }
+    }
+    else if (typeof newValue === "string") {
+      this._currentDate = parseISODate(newValue);
+      this.setValueToFirstAppointmentOfCurrentDate();
+    }
+    else {
+      this._currentDate = newValue;
+      this.setValueToFirstAppointmentOfCurrentDate();
+    }
+  }
+  sortByWatcher() {
+    this.setValueToFirstAppointmentOfCurrentDate();
+  }
+  valueWatcher() {
+    this.updateDateByValue();
+    // update current date if user has not choosen one
+    this.currentDateWatcher(this.currentDate);
+  }
+  appointmentsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._appointments = JSON.parse(newValue);
+    }
+    else {
+      this._appointments = newValue;
+    }
+    // convert start and end field to date
+    this._appointments.forEach(appointment => {
+      appointment.start = new Date(appointment.start);
+      appointment.end = new Date(appointment.end);
+    });
+    if (this._appointments.length > 0) {
+      // sort with start field and find earliest and latest date
+      this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);
+      this.earliestDate = this._appointments[0].start;
+      this.latestDate = this._appointments[this._appointments.length - 1].start;
+      this.updateDateByValue();
+    }
+    // determine whether all appointments are from the same day
+    if (this._appointments.length > 1) {
+      const firstDate = this._appointments[0].start;
+      this.allAppointsmentOnSameDay = this._appointments
+        .map(appointment => appointment.start)
+        .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
+        === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);
+    }
+    // update flags
+    this.showCalendar = !this.allAppointsmentOnSameDay;
+    this.showAppointmentsTitle = this._appointments.length > 1;
+    // update current date if user has not choosen one
+    this.currentDateWatcher(this.currentDate);
+  }
+  updateDateByValue() {
+    this.dateByValue = this.value
+      && this._appointments
+        .find(appointment => appointment.value === this.value)
+        .start;
+  }
+  getCurrentDateAppointments() {
+    let indexOfLastCurrentDayDate = 0;
+    // filter to current date appointments that can be shown
+    const appointmentsCurrentDate = this._appointments
+      .filter((appointment, index) => {
+      const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()
+        && appointment.start.getMonth() === this._currentDate.getMonth()
+        && appointment.start.getDate() === this._currentDate.getDate();
+      if (dateIsInCurrentDay) {
+        indexOfLastCurrentDayDate = index;
+      }
+      return dateIsInCurrentDay;
+    });
+    // find next day with dates or set to null
+    if (this._appointments[indexOfLastCurrentDayDate + 1]) {
+      this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;
+    }
+    else {
+      this.nextDate = null;
+    }
+    // sort
+    appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);
+    return appointmentsCurrentDate;
+  }
+  setValueToFirstAppointmentOfCurrentDate() {
+    // choose the first available appointment from current date
+    const appointments = this.getCurrentDateAppointments()
+      .filter(appointment => !appointment.disabled);
+    if (appointments.length > 0) {
+      this.value = appointments[0].value;
+      this.stzhChange.emit({
+        component: "stzh-appointments",
+        value: this.value
+      });
+    }
+  }
+  async componentWillLoad() {
+    this.appointmentsWatcher(this.appointments);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'appointments');
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  componentWillRender() {
+    const appointments = this.getCurrentDateAppointments();
+    // slice to max that should be visible
+    this.appointmentsShown = appointments.slice(0, this.showItems);
+    // set flags
+    this.showMoreLink = this.showItems < appointments.length;
+    this.moreItemsLeft = appointments.length - this.showItems;
+    // don't show time sort when only one time in the current day
+    this.showSortStart = appointments
+      .map(appointment => {
+      return this.dateAdapter.format(appointment.start, "time");
+    }).filter((item, pos, self) => {
+      return self.indexOf(item) == pos;
+    }).length > 1;
+    // don't show place sort when only one place in the current day
+    this.showSortPlace = appointments
+      .map(appointment => {
+      return appointment.place;
+    }).filter((item, pos, self) => {
+      return self.indexOf(item) == pos;
+    }).length > 1;
+    this.sortOptions = [];
+    if (this.showSortStart) {
+      this.sortOptions.push({
+        text: this.localization.sortByTime,
+        value: "start"
+      });
+    }
+    if (this.showSortPlace) {
+      this.sortOptions.push({
+        text: this.localization.sortByPlace,
+        value: "place"
+      });
+    }
+    this.showSort = this.appointmentsShown.length > 1;
+    // determine sort (force alternative sorting if it makes sense)
+    this._sortBy =
+      (this.showSortStart && !this.showSortPlace && "start")
+        || (!this.showSortStart && this.showSortPlace && "place")
+        || this.sortBy;
+  }
+  componentDidRender() {
+    // set datepickers values to current date
+    if (this.datepickerElement) {
+      this.datepickerElement.setDate(this._currentDate);
+    }
+    if (this.datepickerElementMedium) {
+      this.datepickerElementMedium.setDate(this._currentDate);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-appointments": true,
+      "stzh-appointments--has-calendar": this.showCalendar,
+      "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
+      "stzh-appointments--has-sort": this.showSort
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
+      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("stzh-text", { font: "heavy" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
+        h("stzh-link", { slot: "action", onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments))))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
+      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("stzh-text", { font: "heavy" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
+        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "milli" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start), ",\u00A0"), this.dateAdapter.format(appointment.start, "time"), h("span", { innerHTML: this.localization.$formats.timeRange }), this.dateAdapter.format(appointment.end, "time"), h("span", { innerHTML: this.localization.$formats.timePostfix })), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
+      h("stzh-link", { class: "stzh-appointments__more-link", onClick: this.onMoreClick }, h("stzh-text", { size: "milli" }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
+        ? this.stepItems
+        : this.moreItemsLeft)))))))));
+  }
+  static get is() { return "stzh-appointments"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-appointments.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-appointments.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhAppointmentsLocalizedText",
+          "resolved": "StzhLocaleComponent & { moreTextItems: string; calendarTitle: string; appointmentsTitle: string; inputLegend: string; datepickerLabel: string; sortByTime: string; sortByPlace: string; nextDayWithAppointments: string; }",
+          "references": {
+            "StzhAppointmentsLocalizedText": {
+              "location": "import",
+              "path": "./stzh-appointments.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "sortBy": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"start\" | \"place\"",
+          "resolved": "\"place\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sort by"
+        },
+        "attribute": "sort-by",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
+      "appointments": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Initial selected values"
+        },
+        "attribute": "appointments",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "currentDate": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value)"
+        },
+        "attribute": "current-date",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"appointment\""
+      },
+      "showItems": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nr of items shown"
+        },
+        "attribute": "show-items",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "stepItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nr of items shown when more link is clicked"
+        },
+        "attribute": "step-items",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "calendarTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Overwrite default calendar title"
+        },
+        "attribute": "calendar-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "appointmentsTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Overwrite default appointments title"
+        },
+        "attribute": "appointments-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "dateAdapter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleAdapter",
+          "resolved": "StzhLocaleAdapter",
+          "references": {
+            "StzhLocaleAdapter": {
+              "location": "import",
+              "path": "../../utils/date-adapter"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date adapter, for custom parsing/formatting.\r\nMust be object with a `parse` function which accepts a `string` and returns a `Date`,\r\nand a `format` function which accepts a `Date` and returns a `string`."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Appointments change event"
+        },
+        "complexType": {
+          "original": "StzhAppointmentsChangeEvent",
+          "resolved": "{ component: \"stzh-appointments\"; value: string; }",
+          "references": {
+            "StzhAppointmentsChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "currentDate",
+        "methodName": "currentDateWatcher"
+      }, {
+        "propName": "sortBy",
+        "methodName": "sortByWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "appointments",
+        "methodName": "appointmentsWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-appointments/stzh-appointments.localization.js

@@ -0,0 +1 @@
+export {};