@siemens/ix 1.0.0 → 1.1.0-beta.0

package/dist/collection/components/date-picker/date-picker.js

@@ -6,38 +6,118 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Event, Fragment, h, Host, Prop, State } from '@stencil/core';
+import { Component, Event, Fragment, h, Host, Method, Prop, State, } from '@stencil/core';
 import { DateTime, Info } from 'luxon';
 export class DatePicker {
   constructor() {
+    this.daysInWeek = 7;
+    this.dayNames = Info.weekdays();
+    this.monthNames = Info.months();
     /**
-     * output date format
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
      */
     this.format = 'yyyy/LL/dd';
     /**
-     * Set range size
+     * If true a range of dates can be selected.
      */
     this.range = true;
     /**
-     * set styles
+     * @deprecated - will get removed with next major release
      */
     this.individual = true;
     /**
-     * Set corners style
+     * Corner style
      */
     this.corners = 'rounded';
-    this.daysInWeek = 7;
-    this.dayNames = Info.weekdays();
-    this.monthNames = Info.months();
-    this.year = DateTime.now().year;
-    this.month = DateTime.now().month;
-    this.calendar = [];
+    /**
+     * Picker date. If the picker is in range mode this property is the start date.
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.from = DateTime.now().toFormat(this.format);
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.to = null;
+    /**
+     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+     * This combination can be configured over the delimiter
+     *
+     * @since 1.1.0
+     */
+    this.eventDelimiter = ' - ';
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectDate = 'Done';
+    this.yearValue = this.year;
     this.today = DateTime.now();
-    this.years = [...Array(10).keys()].map((year) => year + DateTime.now().year - 5);
-    this.tempYear = this.year;
-    this.tempMonth = this.month;
-    this.start = null;
-    this.end = null;
+    this.monthValue = this.month;
+    this.calendar = [];
+    this.years = [...Array(10).keys()].map((year) => year + this.year - 5);
+    this.tempYear = this.yearValue;
+    this.tempMonth = this.monthValue;
+    this.start = DateTime.fromObject({
+      year: this.year,
+      month: this.month,
+      day: this.day,
+    });
+    this.end = this.to
+      ? DateTime.fromFormat(this.to, this.format)
+      : null;
+  }
+  get year() {
+    return DateTime.fromFormat(this.from, this.format).year;
+  }
+  get day() {
+    return DateTime.fromFormat(this.from, this.format).day;
+  }
+  get month() {
+    return DateTime.fromFormat(this.from, this.format).month;
+  }
+  onDone() {
+    var _a;
+    this.done.emit(this.getOutputFormat());
+    this.dateSelect.emit({
+      from: this.start.toFormat(this.format),
+      to: (_a = this.end) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+    });
+  }
+  onDateChange() {
+    var _a, _b, _c, _d;
+    if (this.eventDelimiter) {
+      this.dateChange.emit(this.getOutputFormat());
+    }
+    else {
+      this.dateChange.emit({
+        from: (_a = this.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.format),
+        to: (_b = this.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.format),
+      });
+    }
+    if (this.range) {
+      this.dateRangeChange.emit({
+        from: (_c = this.start) === null || _c === void 0 ? void 0 : _c.toFormat(this.format),
+        to: (_d = this.end) === null || _d === void 0 ? void 0 : _d.toFormat(this.format),
+      });
+    }
+  }
+  selectionProps() {
+    if (this.year !== null) {
+      this.yearValue = this.year;
+    }
+    if (this.month !== null) {
+      this.monthValue = this.month;
+    }
   }
   getStartOfMonth(year = DateTime.local().get('year'), month = DateTime.local().get('month')) {
     return DateTime.local(year, month).startOf('month');
@@ -49,8 +129,9 @@ export class DatePicker {
     return Math.ceil(end.diff(start, 'days').days);
   }
   calculateCalendar() {
-    const start = this.getStartOfMonth(this.year, this.month);
-    const end = this.getEndOfMonth(this.year, this.month);
+    this.selectionProps();
+    const start = this.getStartOfMonth(this.yearValue, this.monthValue);
+    const end = this.getEndOfMonth(this.yearValue, this.monthValue);
     const totalDays = this.getDaysInMonth(start, end);
     const totalWeeks = 6;
     const totalDaysInWeeks = totalWeeks * this.daysInWeek;
@@ -78,30 +159,29 @@ export class DatePicker {
       const week = weekdays[index - 1];
       const firstWeekDay = week.find((day) => day !== undefined);
       const weekNumber = firstWeekDay
-        ? DateTime.local(this.year, this.month, weekdays[index - 1][0])
-          .weekNumber
+        ? DateTime.local(this.yearValue, this.monthValue, weekdays[index - 1][0]).weekNumber
         : undefined;
       calendar.push([weekNumber, week]);
     }
     this.calendar = calendar;
   }
   changeMonth(number) {
-    if (this.month + number < 1) {
-      this.year--;
-      this.month = 12;
+    if (this.monthValue + number < 1) {
+      this.yearValue--;
+      this.monthValue = 12;
     }
-    else if (this.month + number > 12) {
-      this.year++;
-      this.month = 1;
+    else if (this.monthValue + number > 12) {
+      this.yearValue++;
+      this.monthValue = 1;
     }
     else {
-      this.month += number;
+      this.monthValue += number;
     }
     this.calculateCalendar();
   }
   selectMonth(month) {
-    this.month = month;
-    this.year = this.tempYear;
+    this.monthValue = month;
+    this.yearValue = this.tempYear;
     this.tempMonth = month;
   }
   infiniteScrollYears() {
@@ -134,7 +214,7 @@ export class DatePicker {
   }
   todayClass(day) {
     const today = DateTime.local();
-    const daaay = DateTime.local(this.year, this.month, day);
+    const daaay = DateTime.local(this.yearValue, this.monthValue, day);
     const isToday = Math.ceil(daaay.diff(today, 'days').days) === 0;
     return {
       'calendar-item': true,
@@ -146,14 +226,15 @@ export class DatePicker {
         this.end &&
         daaay.toISO() > this.start.toISO() &&
         daaay.toISO() < this.end.toISO(),
-      disabled: this.start &&
-        daaay.toISO() < this.start.toISO() &&
-        this.end === null &&
-        this.range,
+      disabled: !this.isWithinMinMax(daaay) ||
+        (this.start &&
+          daaay.toISO() < this.start.toISO() &&
+          this.end === null &&
+          this.range),
     };
   }
   selectDay(day) {
-    const date = DateTime.local(this.year, this.month, day);
+    const date = DateTime.local(this.yearValue, this.monthValue, day);
     const isNotDay = day === undefined;
     const isFirstDay = this.start === null;
     const isLastDay = this.end === null;
@@ -164,7 +245,7 @@ export class DatePicker {
       return;
     if (isSameDay) {
       this.start = null;
-      this.dateChange.emit(this.getOutputFormat());
+      this.onDateChange();
       return;
     }
     if (!this.range) {
@@ -180,16 +261,43 @@ export class DatePicker {
       this.start = date;
       this.end = null;
     }
-    this.dateChange.emit(this.getOutputFormat());
+    this.onDateChange();
   }
   getOutputFormat() {
-    if (!this.end)
+    if (!this.start) {
+      return null;
+    }
+    if (!this.end) {
       return this.start.toFormat(this.format);
-    return (this.start.toFormat(this.format) + ' - ' + this.end.toFormat(this.format));
+    }
+    return [
+      this.start.toFormat(this.format),
+      this.end.toFormat(this.format),
+    ].join(this.eventDelimiter);
+  }
+  isWithinMinMax(date) {
+    const dateIso = date.toISO();
+    const _minDate = this.minDate
+      ? DateTime.fromFormat(this.minDate, this.format)
+      : null;
+    const _maxDate = this.maxDate
+      ? DateTime.fromFormat(this.maxDate, this.format)
+      : null;
+    return ((!_minDate || _minDate.toISO() <= dateIso) &&
+      (!_maxDate || _maxDate.toISO() >= dateIso));
   }
   componentWillRender() {
     this.calculateCalendar();
   }
+  /**
+   * Get the current DateTime
+   */
+  async getCurrentDate() {
+    return {
+      start: this.start,
+      end: this.end,
+    };
+  }
   render() {
     return (h(Host, null,
       h("ix-date-time-card", { individual: this.individual, corners: this.corners },
@@ -198,9 +306,9 @@ export class DatePicker {
           h("div", { class: "selector" },
             h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) },
               h("span", { class: "fontSize capitalize" },
-                this.monthNames[this.month - 1],
+                this.monthNames[this.monthValue - 1],
                 " ",
-                this.year)),
+                this.yearValue)),
             h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" },
               h("div", { class: "wrapper" },
                 h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) },
@@ -229,7 +337,7 @@ export class DatePicker {
               week[1].map((day) => (h("div", { class: this.todayClass(day), onClick: () => this.selectDay(day) }, day)))));
           })),
         h("div", { class: { button: true, hidden: !this.individual } },
-          h("ix-button", { onClick: () => this.done.emit(this.getOutputFormat()) }, "Done")))));
+          h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
   static get is() { return "ix-date-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -252,7 +360,7 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "output date format"
+        "text": "Date format string.\nSee {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens."
       },
       "attribute": "format",
       "reflect": false,
@@ -270,7 +378,7 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set range size"
+        "text": "If true a range of dates can be selected."
       },
       "attribute": "range",
       "reflect": false,
@@ -287,8 +395,11 @@ export class DatePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "set styles"
+        "tags": [{
+            "name": "deprecated",
+            "text": "- will get removed with next major release"
+          }],
+        "text": ""
       },
       "attribute": "individual",
       "reflect": false,
@@ -311,18 +422,142 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set corners style"
+        "text": "Corner style"
       },
       "attribute": "corners",
       "reflect": false,
       "defaultValue": "'rounded'"
+    },
+    "from": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Picker date. If the picker is in range mode this property is the start date.\n\nFormat is based on `format`"
+      },
+      "attribute": "from",
+      "reflect": false,
+      "defaultValue": "DateTime.now().toFormat(this.format)"
+    },
+    "to": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`"
+      },
+      "attribute": "to",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "minDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction."
+      },
+      "attribute": "min-date",
+      "reflect": false
+    },
+    "maxDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction."
+      },
+      "attribute": "max-date",
+      "reflect": false
+    },
+    "eventDelimiter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter"
+      },
+      "attribute": "event-delimiter",
+      "reflect": false,
+      "defaultValue": "' - '"
+    },
+    "textSelectDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Text of date select button"
+      },
+      "attribute": "text-select-date",
+      "reflect": false,
+      "defaultValue": "'Done'"
     }
   }; }
   static get states() { return {
-    "year": {},
-    "month": {},
-    "calendar": {},
+    "yearValue": {},
     "today": {},
+    "monthValue": {},
+    "calendar": {},
     "years": {},
     "tempYear": {},
     "tempMonth": {},
@@ -338,13 +573,44 @@ export class DatePicker {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Time change event"
+        "tags": [{
+            "name": "depracted",
+            "text": "String output will be removed. Set \u00B4doneEventDelimiter\u00B4 to undefined or null to get date change object instead of a string"
+          }],
+        "text": "Date change event\n\nIf datepicker is in range mode the event detail will be sperated with a `-` e.g.\n`2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`."
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "LegacyDateChangeEvent",
+        "resolved": "DateChangeEvent | string",
+        "references": {
+          "LegacyDateChangeEvent": {
+            "location": "import",
+            "path": "./events"
+          }
+        }
+      }
+    }, {
+      "method": "dateRangeChange",
+      "name": "dateRangeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Date range change.\nOnly triggered if datepicker is in range mode"
+      },
+      "complexType": {
+        "original": "DateChangeEvent",
+        "resolved": "DateChangeEvent",
+        "references": {
+          "DateChangeEvent": {
+            "location": "import",
+            "path": "./events"
+          }
+        }
       }
     }, {
       "method": "done",
@@ -353,13 +619,61 @@ export class DatePicker {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "done event"
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `dateSelect`"
+          }],
+        "text": "Date selection confirmed via button action"
       },
       "complexType": {
         "original": "string",
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "dateSelect",
+      "name": "dateSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Date selection confirmed via button action"
+      },
+      "complexType": {
+        "original": "DateChangeEvent",
+        "resolved": "DateChangeEvent",
+        "references": {
+          "DateChangeEvent": {
+            "location": "import",
+            "path": "./events"
+          }
+        }
+      }
     }]; }
+  static get methods() { return {
+    "getCurrentDate": {
+      "complexType": {
+        "signature": "() => Promise<{ start: DateTime; end: DateTime; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DateTime": {
+            "location": "import",
+            "path": "luxon"
+          }
+        },
+        "return": "Promise<{ start: DateTime; end: DateTime; }>"
+      },
+      "docs": {
+        "text": "Get the current DateTime",
+        "tags": []
+      }
+    }
+  }; }
 }

package/dist/collection/components/date-picker/events.js

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

package/dist/collection/components/date-time-card/date-time-card.css

@@ -26,15 +26,17 @@
   border-radius: unset;
 }
 .card.individual {
-  box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--theme-menu--border-color);
   border-radius: 4px;
 }
 .card.left {
   border-radius: 4px 0 0 4px;
+  height: 100%;
 }
 .card.right {
   border-radius: 0 4px 4px 0;
+  height: 100%;
 }
 .card .header {
   padding: 1rem;

package/dist/collection/components/datetime-picker/datetime-picker.css

@@ -19,17 +19,26 @@
 /* Line heights */
 /* Animation timings */
 :host {
+  display: block;
   background-color: var(--theme-menu--background);
-  box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
   border-radius: 4px;
 }
 
 .flex {
   display: flex;
+  justify-content: center;
 }
 
 .done {
-  display: flex;
+  display: inline-flex;
   justify-content: flex-end;
-  margin: 0 1rem 1rem 0;
+  padding: 1rem;
+  width: 100%;
+}
+
+.separator {
+  border: 1px solid var(--theme-datepicker-separator--background);
+  width: 100%;
+  margin-top: 72px;
+  height: 1px;
 }