datetime-slot-picker - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/cjs/datetime-slot-picker.cjs.entry.js

@@ -45,3 +45,3 @@ 'use strict';
     if (slot.date && slot.date.substring(5) && slot.date.substring(5).split(' ').length === 3 &&
-      monthIndex[slot.date.substring(5).split(' ')[1]] && parseInt(slot.date.substring(5).split(' ')[2])
+      monthIndex[slot.date.substring(5).split(' ')[1]] > -1 && parseInt(slot.date.substring(5).split(' ')[2])
       && parseInt(slot.date.substring(5).split(' ')[0])) {
@@ -107,3 +107,3 @@ let parsedDate = new Date(parseInt(slot.date.substring(5).split(' ')[2]), monthIndex[slot.date.substring(5).split(' ')[1]], parseInt(slot.date.substring(5).split(' ')[0]));
 
-function generateTimeGrid(slot) {
+function generateTimeGrid(slot, noOfRows) {
   let timeGrids = [];
@@ -121,3 +121,3 @@ let times = slot.timeSlots.filter(ts => {
     let noOfColumns = times[0].length <= 8 ? 4 : 2;
-    let noOfCells = noOfColumns * 7;
+    let noOfCells = noOfColumns * noOfRows;
     let noOfGrids = Math.ceil(times.length / noOfCells);
@@ -129,3 +129,3 @@ for (let gridCounter = 1; gridCounter <= noOfGrids; gridCounter++) {
       };
-      for (let rowCounter = 1; rowCounter <= 7; rowCounter++) {
+      for (let rowCounter = 1; rowCounter <= noOfRows; rowCounter++) {
         let row = { times: [] };
@@ -144,3 +144,3 @@ for (let columnCounter = 1; columnCounter <= noOfColumns; columnCounter++) {
 
-const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right}.neo-left-end{text-align:left}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}.neo-cell-enabled:hover{color:white;background-color:black}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
+const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right;width:15%}.neo-left-end{text-align:left;width:15%}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}@media only screen and (min-width: 768px){.neo-cell-enabled:hover{color:white;background-color:black}}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
 
@@ -158,2 +158,3 @@ const DatetimeSlotPicker = class {
     this.amPmDisabled = false;
+    this.datesHiddenWhenTimesShown = false;
   }
@@ -194,4 +195,6 @@ componentWillLoad() {
       if (this.slots.length && this.slots[0].timeSlots) {
+        //resetSlot until time is also chosen
+        this.resetSlot();
         let slot = this.slots.find(s => s.date === this.selectedDate);
-        this.timeGrids = generateTimeGrid(slot);
+        this.timeGrids = generateTimeGrid(slot, this.datesHiddenWhenTimesShown ? 7 : 4);
         this.selectedTime = undefined;
@@ -233,2 +236,11 @@ if (this.timeGrids && this.timeGrids.length)
   }
+  resetSlot() {
+    this.displayText = undefined;
+    this.slotUpdate.emit({
+      date: null,
+      timeSlot: null,
+      translatedDate: null,
+      translatedTimeSlot: null
+    });
+  }
   closeGrid() {
@@ -308,3 +320,3 @@ this.isPopped = false;
     return index.h("span", { class: "neo-slot-picker" }, index.h("input", { class: "neo-input", type: "text", readonly: true, placeholder: this.placeholder, value: this.displayText, onClick: () => this.togglePopup(), ref: (el) => this.neoInput = el }), this.isPopped &&
-      index.h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, !this.isTimeSlotGridVisible && this.dateGrids && this.dateGrids.length > 0 &&
+      index.h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && this.dateGrids.length > 0 &&
         index.h("table", { class: "neo-grid neo-date-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }), index.h("th", { colSpan: 5, class: "neo-center" }, this.activeDateGridPage > 0
@@ -320,9 +332,13 @@ ? index.h("span", { class: "neo-paginate", onClick: () => this.prevDateGrid() }, "<")
           }));
-        })), !this.isTimeSlotGridVisible && this.dateGrids && !this.dateGrids.length &&
-        index.h("table", { class: "neo-grid neo-empty-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }), index.h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), index.h("th", { class: "neo-right-end" }, index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0"))), this.isTimeSlotGridVisible && this.timeGrids && this.timeGrids.length > 0 &&
-        index.h("table", { class: "neo-grid neo-time-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }, index.h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), index.h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
+        })), (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && !this.dateGrids.length &&
+        index.h("table", { class: "neo-grid neo-empty-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }), index.h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), index.h("th", { class: "neo-right-end" }, index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0"))), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && this.timeGrids.length > 0 &&
+        index.h("table", { class: "neo-grid neo-time-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? index.h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : index.h("span", null, "\u00A0")), index.h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
           ? index.h("span", { class: "neo-paginate", onClick: () => this.prevTimeGrid() }, "<")
           : index.h("span", { class: "neo-paginate-hidden" }, "\u00A0"), this.timeSlotsText, this.activeTimeGridPage < (this.timeGrids.length - 1)
           ? index.h("span", { class: "neo-paginate", onClick: () => this.nextTimeGrid() }, ">")
-          : index.h("span", { class: "neo-paginate-hidden" }, "\u00A0")), index.h("th", { class: "neo-right-end" }, index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
+          : index.h("span", { class: "neo-paginate-hidden" }, "\u00A0")), index.h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : index.h("span", null, "\u00A0"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
           return index.h("tr", { class: "neo-equal-width" }, row.times.map(time => {
@@ -339,4 +355,11 @@ let translatedTimeText;
           }));
-        })), this.isTimeSlotGridVisible && this.timeGrids && !this.timeGrids.length &&
-        index.h("table", { class: "neo-grid neo-empty-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }, index.h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), index.h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), index.h("th", { class: "neo-right-end" }, index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")))));
+        })), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && !this.timeGrids.length &&
+        index.h("table", { class: "neo-grid neo-empty-grid" }, index.h("tr", null, index.h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? index.h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : index.h("span", null, "\u00A0")), index.h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), index.h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? index.h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : index.h("span", null, "\u00A0"))), this.datesHiddenWhenTimesShown &&
+          index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          index.h("tr", null, index.h("td", { colSpan: 7 }, "\u00A0")))));
   }
@@ -343,0 +366,0 @@ static get watchers() { return {

dist/cjs/datetime-slot-picker.cjs.js

@@ -82,3 +82,3 @@ 'use strict';
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["datetime-slot-picker.cjs",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
+  return index.bootstrapLazy([["datetime-slot-picker.cjs",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"datesHiddenWhenTimesShown":[4,"dates-hidden-when-times-shown"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -31,3 +31,3 @@ 'use strict';
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["datetime-slot-picker.cjs",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
+  return index.bootstrapLazy([["datetime-slot-picker.cjs",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"datesHiddenWhenTimesShown":[4,"dates-hidden-when-times-shown"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
   });
@@ -34,0 +34,0 @@ };

dist/collection/components/datetime-slot-picker/datetime-slot-picker.js

@@ -14,2 +14,3 @@ import { Component, Prop, h, State, Event, Watch } from '@stencil/core';
     this.amPmDisabled = false;
+    this.datesHiddenWhenTimesShown = false;
   }
@@ -50,4 +51,6 @@ componentWillLoad() {
       if (this.slots.length && this.slots[0].timeSlots) {
+        //resetSlot until time is also chosen
+        this.resetSlot();
         let slot = this.slots.find(s => s.date === this.selectedDate);
-        this.timeGrids = generateTimeGrid(slot);
+        this.timeGrids = generateTimeGrid(slot, this.datesHiddenWhenTimesShown ? 7 : 4);
         this.selectedTime = undefined;
@@ -89,2 +92,11 @@ if (this.timeGrids && this.timeGrids.length)
   }
+  resetSlot() {
+    this.displayText = undefined;
+    this.slotUpdate.emit({
+      date: null,
+      timeSlot: null,
+      translatedDate: null,
+      translatedTimeSlot: null
+    });
+  }
   closeGrid() {
@@ -167,3 +179,3 @@ this.isPopped = false;
         h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' },
-          !this.isTimeSlotGridVisible && this.dateGrids && this.dateGrids.length > 0 &&
+          (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && this.dateGrids.length > 0 &&
             h("table", { class: "neo-grid neo-date-grid" },
@@ -205,3 +217,3 @@ h("tr", null,
               })),
-          !this.isTimeSlotGridVisible && this.dateGrids && !this.dateGrids.length &&
+          (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && !this.dateGrids.length &&
             h("table", { class: "neo-grid neo-empty-grid" },
@@ -227,7 +239,8 @@ h("tr", null,
                 h("td", { colSpan: 7 }, "\u00A0"))),
-          this.isTimeSlotGridVisible && this.timeGrids && this.timeGrids.length > 0 &&
+          (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && this.timeGrids.length > 0 &&
             h("table", { class: "neo-grid neo-time-grid" },
               h("tr", null,
-                h("th", { class: "neo-left-end" },
-                  h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")),
+                h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+                  ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+                  : h("span", null, "\u00A0")),
                 h("th", { class: "neo-center", colSpan: 6 },
@@ -241,4 +254,5 @@ this.activeTimeGridPage > 0
                     : h("span", { class: "neo-paginate-hidden" }, "\u00A0")),
-                h("th", { class: "neo-right-end" },
-                  h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))),
+                h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+                  ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+                  : h("span", null, "\u00A0"))),
               this.timeGrids[this.activeTimeGridPage].rows.map(row => {
@@ -258,15 +272,18 @@ return h("tr", { class: "neo-equal-width" }, row.times.map(time => {
               })),
-          this.isTimeSlotGridVisible && this.timeGrids && !this.timeGrids.length &&
+          (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && !this.timeGrids.length &&
             h("table", { class: "neo-grid neo-empty-grid" },
               h("tr", null,
-                h("th", { class: "neo-left-end" },
-                  h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")),
+                h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+                  ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+                  : h("span", null, "\u00A0")),
                 h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"),
-                h("th", { class: "neo-right-end" },
-                  h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))),
+                h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+                  ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+                  : h("span", null, "\u00A0"))),
+              this.datesHiddenWhenTimesShown &&
+                h("tr", null,
+                  h("td", { colSpan: 7 }, "\u00A0")),
               h("tr", null,
                 h("td", { colSpan: 7 }, "\u00A0")),
               h("tr", null,
-                h("td", { colSpan: 7 }, "\u00A0")),
-              h("tr", null,
                 h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)),
@@ -277,6 +294,8 @@ h("tr", null,
                 h("td", { colSpan: 7 }, "\u00A0")),
-              h("tr", null,
-                h("td", { colSpan: 7 }, "\u00A0")),
-              h("tr", null,
-                h("td", { colSpan: 7 }, "\u00A0")))));
+              this.datesHiddenWhenTimesShown &&
+                h("tr", null,
+                  h("td", { colSpan: 7 }, "\u00A0")),
+              this.datesHiddenWhenTimesShown &&
+                h("tr", null,
+                  h("td", { colSpan: 7 }, "\u00A0")))));
   }
@@ -422,2 +441,20 @@ static get is() { return "datetime-slot-picker"; }
       "defaultValue": "false"
+    },
+    "datesHiddenWhenTimesShown": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dates-hidden-when-times-shown",
+      "reflect": false,
+      "defaultValue": "false"
     }
@@ -424,0 +461,0 @@ }; }

dist/collection/utils/generate-date-grid.js

@@ -13,3 +13,3 @@ const monthIndex = { Jan: 0, Feb: 1, Mar: 2, Apr: 3, May: 4, Jun: 5, Jul: 6, Aug: 7, Sep: 8, Oct: 9, Nov: 10, Dec: 11 };
     if (slot.date && slot.date.substring(5) && slot.date.substring(5).split(' ').length === 3 &&
-      monthIndex[slot.date.substring(5).split(' ')[1]] && parseInt(slot.date.substring(5).split(' ')[2])
+      monthIndex[slot.date.substring(5).split(' ')[1]] > -1 && parseInt(slot.date.substring(5).split(' ')[2])
       && parseInt(slot.date.substring(5).split(' ')[0])) {
@@ -16,0 +16,0 @@ let parsedDate = new Date(parseInt(slot.date.substring(5).split(' ')[2]), monthIndex[slot.date.substring(5).split(' ')[1]], parseInt(slot.date.substring(5).split(' ')[0]));

dist/collection/utils/generate-time-grid.js

@@ -1,2 +0,2 @@
-export function generateTimeGrid(slot) {
+export function generateTimeGrid(slot, noOfRows) {
   let timeGrids = [];
@@ -14,3 +14,3 @@ let times = slot.timeSlots.filter(ts => {
     let noOfColumns = times[0].length <= 8 ? 4 : 2;
-    let noOfCells = noOfColumns * 7;
+    let noOfCells = noOfColumns * noOfRows;
     let noOfGrids = Math.ceil(times.length / noOfCells);
@@ -22,3 +22,3 @@ for (let gridCounter = 1; gridCounter <= noOfGrids; gridCounter++) {
       };
-      for (let rowCounter = 1; rowCounter <= 7; rowCounter++) {
+      for (let rowCounter = 1; rowCounter <= noOfRows; rowCounter++) {
         let row = { times: [] };
@@ -25,0 +25,0 @@ for (let columnCounter = 1; columnCounter <= noOfColumns; columnCounter++) {

dist/custom-elements/index.js

@@ -42,3 +42,3 @@ import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
     if (slot.date && slot.date.substring(5) && slot.date.substring(5).split(' ').length === 3 &&
-      monthIndex[slot.date.substring(5).split(' ')[1]] && parseInt(slot.date.substring(5).split(' ')[2])
+      monthIndex[slot.date.substring(5).split(' ')[1]] > -1 && parseInt(slot.date.substring(5).split(' ')[2])
       && parseInt(slot.date.substring(5).split(' ')[0])) {
@@ -104,3 +104,3 @@ let parsedDate = new Date(parseInt(slot.date.substring(5).split(' ')[2]), monthIndex[slot.date.substring(5).split(' ')[1]], parseInt(slot.date.substring(5).split(' ')[0]));
 
-function generateTimeGrid(slot) {
+function generateTimeGrid(slot, noOfRows) {
   let timeGrids = [];
@@ -118,3 +118,3 @@ let times = slot.timeSlots.filter(ts => {
     let noOfColumns = times[0].length <= 8 ? 4 : 2;
-    let noOfCells = noOfColumns * 7;
+    let noOfCells = noOfColumns * noOfRows;
     let noOfGrids = Math.ceil(times.length / noOfCells);
@@ -126,3 +126,3 @@ for (let gridCounter = 1; gridCounter <= noOfGrids; gridCounter++) {
       };
-      for (let rowCounter = 1; rowCounter <= 7; rowCounter++) {
+      for (let rowCounter = 1; rowCounter <= noOfRows; rowCounter++) {
         let row = { times: [] };
@@ -141,3 +141,3 @@ for (let columnCounter = 1; columnCounter <= noOfColumns; columnCounter++) {
 
-const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right}.neo-left-end{text-align:left}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}.neo-cell-enabled:hover{color:white;background-color:black}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
+const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right;width:15%}.neo-left-end{text-align:left;width:15%}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}@media only screen and (min-width: 768px){.neo-cell-enabled:hover{color:white;background-color:black}}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
 
@@ -156,2 +156,3 @@ const DatetimeSlotPicker = class extends HTMLElement {
     this.amPmDisabled = false;
+    this.datesHiddenWhenTimesShown = false;
   }
@@ -192,4 +193,6 @@ componentWillLoad() {
       if (this.slots.length && this.slots[0].timeSlots) {
+        //resetSlot until time is also chosen
+        this.resetSlot();
         let slot = this.slots.find(s => s.date === this.selectedDate);
-        this.timeGrids = generateTimeGrid(slot);
+        this.timeGrids = generateTimeGrid(slot, this.datesHiddenWhenTimesShown ? 7 : 4);
         this.selectedTime = undefined;
@@ -231,2 +234,11 @@ if (this.timeGrids && this.timeGrids.length)
   }
+  resetSlot() {
+    this.displayText = undefined;
+    this.slotUpdate.emit({
+      date: null,
+      timeSlot: null,
+      translatedDate: null,
+      translatedTimeSlot: null
+    });
+  }
   closeGrid() {
@@ -306,3 +318,3 @@ this.isPopped = false;
     return h("span", { class: "neo-slot-picker" }, h("input", { class: "neo-input", type: "text", readonly: true, placeholder: this.placeholder, value: this.displayText, onClick: () => this.togglePopup(), ref: (el) => this.neoInput = el }), this.isPopped &&
-      h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, !this.isTimeSlotGridVisible && this.dateGrids && this.dateGrids.length > 0 &&
+      h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && this.dateGrids.length > 0 &&
         h("table", { class: "neo-grid neo-date-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, this.activeDateGridPage > 0
@@ -318,9 +330,13 @@ ? h("span", { class: "neo-paginate", onClick: () => this.prevDateGrid() }, "<")
           }));
-        })), !this.isTimeSlotGridVisible && this.dateGrids && !this.dateGrids.length &&
-        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0"))), this.isTimeSlotGridVisible && this.timeGrids && this.timeGrids.length > 0 &&
-        h("table", { class: "neo-grid neo-time-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
+        })), (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && !this.dateGrids.length &&
+        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0"))), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && this.timeGrids.length > 0 &&
+        h("table", { class: "neo-grid neo-time-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : h("span", null, "\u00A0")), h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
           ? h("span", { class: "neo-paginate", onClick: () => this.prevTimeGrid() }, "<")
           : h("span", { class: "neo-paginate-hidden" }, "\u00A0"), this.timeSlotsText, this.activeTimeGridPage < (this.timeGrids.length - 1)
           ? h("span", { class: "neo-paginate", onClick: () => this.nextTimeGrid() }, ">")
-          : h("span", { class: "neo-paginate-hidden" }, "\u00A0")), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
+          : h("span", { class: "neo-paginate-hidden" }, "\u00A0")), h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : h("span", null, "\u00A0"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
           return h("tr", { class: "neo-equal-width" }, row.times.map(time => {
@@ -337,4 +353,11 @@ let translatedTimeText;
           }));
-        })), this.isTimeSlotGridVisible && this.timeGrids && !this.timeGrids.length &&
-        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")))));
+        })), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && !this.timeGrids.length &&
+        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : h("span", null, "\u00A0")), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : h("span", null, "\u00A0"))), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")))));
   }
@@ -347,3 +370,3 @@ static get watchers() { return {
 
-const DatetimeSlotPicker$1 = /*@__PURE__*/proxyCustomElement(DatetimeSlotPicker, [0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]);
+const DatetimeSlotPicker$1 = /*@__PURE__*/proxyCustomElement(DatetimeSlotPicker, [0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"datesHiddenWhenTimesShown":[4,"dates-hidden-when-times-shown"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]);
 const defineCustomElements = (opts) => {
@@ -350,0 +373,0 @@ if (typeof customElements !== 'undefined') {

dist/datetime-slot-picker/datetime-slot-picker.esm.js

@@ -1,1 +0,1 @@
-import{p as e,w as t,d as s,N as i,a,b as o}from"./p-e1d7db57.js";(()=>{e.t=t.__cssshim;const o=Array.from(s.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)),n=o["data-opts"]||{};return"onbeforeload"in o&&!history.scrollRestoration?{then(){}}:(n.resourcesUrl=new URL(".",new URL(o.getAttribute("data-resources-url")||o.src,t.location.href)).href,((e,a)=>{const o="__sc_import_"+i.replace(/\s|-/g,"_");try{t[o]=new Function("w","return import(w);//"+Math.random())}catch(n){const i=new Map;t[o]=n=>{const r=new URL(n,e).href;let p=i.get(r);if(!p){const e=s.createElement("script");e.type="module",e.crossOrigin=a.crossOrigin,e.src=URL.createObjectURL(new Blob([`import * as m from '${r}'; window.${o}.m = m;`],{type:"application/javascript"})),p=new Promise((s=>{e.onload=()=>{s(t[o].m),e.remove()}})),i.set(r,p),s.head.appendChild(e)}return p}}})(n.resourcesUrl,o),t.customElements?a(n):__sc_import_datetime_slot_picker("./p-b4e039be.js").then((()=>n)))})().then((e=>o([["p-12053c5b",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)));
+import{p as e,w as t,d as s,N as i,a,b as o}from"./p-e1d7db57.js";(()=>{e.t=t.__cssshim;const o=Array.from(s.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)),n=o["data-opts"]||{};return"onbeforeload"in o&&!history.scrollRestoration?{then(){}}:(n.resourcesUrl=new URL(".",new URL(o.getAttribute("data-resources-url")||o.src,t.location.href)).href,((e,a)=>{const o="__sc_import_"+i.replace(/\s|-/g,"_");try{t[o]=new Function("w","return import(w);//"+Math.random())}catch(n){const i=new Map;t[o]=n=>{const r=new URL(n,e).href;let d=i.get(r);if(!d){const e=s.createElement("script");e.type="module",e.crossOrigin=a.crossOrigin,e.src=URL.createObjectURL(new Blob([`import * as m from '${r}'; window.${o}.m = m;`],{type:"application/javascript"})),d=new Promise((s=>{e.onload=()=>{s(t[o].m),e.remove()}})),i.set(r,d),s.head.appendChild(e)}return d}}})(n.resourcesUrl,o),t.customElements?a(n):__sc_import_datetime_slot_picker("./p-b4e039be.js").then((()=>n)))})().then((e=>o([["p-54f2e484",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],datesHiddenWhenTimesShown:[4,"dates-hidden-when-times-shown"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)));

dist/datetime-slot-picker/p-fb5bc46d.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-72edf5ff.system.js"],(function(e,t){"use strict";var r,n,s,i,o,a;return{setters:[function(e){r=e.p;n=e.w;s=e.d;i=e.N;o=e.a;a=e.b}],execute:function(){var e=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var c=function(){{r.$cssShim$=n.__cssshim}var e=Array.from(s.querySelectorAll("script")).find((function(e){return new RegExp("/"+i+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===i}));var a=e["data-opts"]||{};if("onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}{a.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,n.location.href)).href;{u(a.resourcesUrl,e)}if(!n.customElements){return t.import("./p-6be85f10.system.js").then((function(){return a}))}}return o(a)};var u=function(t,r){var o=e(i);try{n[o]=new Function("w","return import(w);//"+Math.random())}catch(c){var a=new Map;n[o]=function(e){var i=new URL(e,t).href;var c=a.get(i);if(!c){var u=s.createElement("script");u.type="module";u.crossOrigin=r.crossOrigin;u.src=URL.createObjectURL(new Blob(["import * as m from '"+i+"'; window."+o+".m = m;"],{type:"application/javascript"}));c=new Promise((function(e){u.onload=function(){e(n[o].m);u.remove()}}));a.set(i,c);s.head.appendChild(u)}return c}}};c().then((function(e){return a([["p-e1ab126e.system",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)}))}}}));
+System.register(["./p-72edf5ff.system.js"],(function(e,t){"use strict";var r,n,s,i,o,a;return{setters:[function(e){r=e.p;n=e.w;s=e.d;i=e.N;o=e.a;a=e.b}],execute:function(){var e=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var c=function(){{r.$cssShim$=n.__cssshim}var e=Array.from(s.querySelectorAll("script")).find((function(e){return new RegExp("/"+i+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===i}));var a=e["data-opts"]||{};if("onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}{a.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,n.location.href)).href;{u(a.resourcesUrl,e)}if(!n.customElements){return t.import("./p-6be85f10.system.js").then((function(){return a}))}}return o(a)};var u=function(t,r){var o=e(i);try{n[o]=new Function("w","return import(w);//"+Math.random())}catch(c){var a=new Map;n[o]=function(e){var i=new URL(e,t).href;var c=a.get(i);if(!c){var u=s.createElement("script");u.type="module";u.crossOrigin=r.crossOrigin;u.src=URL.createObjectURL(new Blob(["import * as m from '"+i+"'; window."+o+".m = m;"],{type:"application/javascript"}));c=new Promise((function(e){u.onload=function(){e(n[o].m);u.remove()}}));a.set(i,c);s.head.appendChild(u)}return c}}};c().then((function(e){return a([["p-7b5c17f5.system",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],datesHiddenWhenTimesShown:[4,"dates-hidden-when-times-shown"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)}))}}}));

dist/esm-es5/datetime-slot-picker.entry.js

@@ -1,1 +0,1 @@
-import{r as registerInstance,c as createEvent,h}from"./index-dc459d91.js";var builtInTranslations={en:{Mon:"Mon",Tue:"Tue",Wed:"Wed",Thu:"Thu",Fri:"Fri",Sat:"Sat",Sun:"Sun",AM:"AM",PM:"PM",Jan:"Jan",Feb:"Feb",Mar:"Mar",Apr:"Apr",May:"May",Jun:"Jun",Jul:"Jul",Aug:"Aug",Sep:"Sep",Oct:"Oct",Nov:"Nov",Dec:"Dec"}};var monthIndex={Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};var months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function generateDateGrid(e){var t=[];var i=true;var n,s;for(var a=0,l=e;a<l.length;a++){var o=l[a];if(o.date&&o.date.substring(5)&&o.date.substring(5).split(" ").length===3&&monthIndex[o.date.substring(5).split(" ")[1]]&&parseInt(o.date.substring(5).split(" ")[2])&&parseInt(o.date.substring(5).split(" ")[0])){var r=new Date(parseInt(o.date.substring(5).split(" ")[2]),monthIndex[o.date.substring(5).split(" ")[1]],parseInt(o.date.substring(5).split(" ")[0]));if(!n||n>r)n=r;if(!s||s<r)s=r}else{i=false;break}}if(i&&n&&s){var d={m1:n.getMonth(),y1:n.getFullYear()},h=d.m1,c=d.y1;var p={m2:s.getMonth(),y2:s.getFullYear()},u=p.m2,g=p.y2;do{var f={monthYear:months[h]+" "+c,weeks:[]};var m=[];var v=new Date(c,h,1);var b=new Date(c,h+1,0);for(var T=1;T<=v.getDay();T++){m.push(null)}var S=function(t){var i=new Date(c,h,t);var n=days[i.getDay()]+", "+t+" "+months[h]+" "+c;var s=e.find((function(e){return e.date===n}));m.push({dayOfMonth:t,isEnabled:s?true:false,dateText:n})};for(var G=1;G<=b.getDate();G++){S(G)}for(var x=m.length+1;x<=42;x++){m.push(null)}for(var y=1;y<=6;y++){var w={days:[]};for(var k=1;k<=7;k++){w.days.push(m.shift())}f.weeks.push(w)}t.push(f);if(h===11){h=0;c++}else{h++}}while(c<g||c===g&&h<=u)}return t}function generateTimeGrid(e){var t=[];var i=e.timeSlots.filter((function(e){var t=true;if(!e)t=false;return t}));if(i.length){var n=i[0].length<=8?4:2;var s=n*7;var a=Math.ceil(i.length/s);for(var l=1;l<=a;l++){var o={dateText:e.date.substring(5),rows:[]};for(var r=1;r<=7;r++){var d={times:[]};for(var h=1;h<=n;h++){var c=i.shift();d.times.push(c?{timeText:c}:null)}o.rows.push(d)}t.push(o)}}return t}var datetimeSlotPickerCss=":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right}.neo-left-end{text-align:left}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}.neo-cell-enabled:hover{color:white;background-color:black}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";var DatetimeSlotPicker=function(){function e(e){registerInstance(this,e);this.slotUpdate=createEvent(this,"slotUpdate",7);this.placeholder="Pick a time slot";this.timeSlotsText="Time";this.noSlotsText="No slots are available";this.slots=[];this.language="en";this.translations=builtInTranslations;this.amPmDisabled=false}e.prototype.componentWillLoad=function(){this.processSlots(this.slots)};e.prototype.processSlots=function(e){if(this.slots){this.isTimeSlotGridVisible=false;this.selectedDate=undefined;this.selectedTime=undefined;this.displayText=undefined;this.dateGrids=generateDateGrid(e);if(this.dateGrids&&this.dateGrids.length)this.activeDateGridPage=0}};e.prototype.togglePopup=function(){if(this.slots){if(this.neoInput.getBoundingClientRect().top<window.innerHeight/2)this.isNeoInputAboveFold=true;else this.isNeoInputAboveFold=false;if(this.neoInput.getBoundingClientRect().left<window.innerWidth/2)this.isNeoInputLeftSide=true;else this.isNeoInputLeftSide=false;this.neoInputHeight=this.neoInput.getBoundingClientRect().bottom-this.neoInput.getBoundingClientRect().top;this.isPopped=!this.isPopped;this.isTimeSlotGridVisible=false}};e.prototype.setSelectedDate=function(e){var t=this;if(e){this.selectedDate=e;if(this.slots.length&&this.slots[0].timeSlots){var i=this.slots.find((function(e){return e.date===t.selectedDate}));this.timeGrids=generateTimeGrid(i);this.selectedTime=undefined;if(this.timeGrids&&this.timeGrids.length)this.activeTimeGridPage=0;this.isTimeSlotGridVisible=true}else this.setSlot()}};e.prototype.setSelectedTime=function(e){if(e){this.selectedTime=e;this.setSlot()}};e.prototype.setSlot=function(){var e,t;var i=this.selectedDate.split(" ");console.log(i);e=this.getTranslation(i[0].substring(0,i[0].length-1))+", "+i[1]+" "+this.getTranslation(i[2])+" "+i[3];if(this.selectedTime){t=this.formatTimeSlot(this.selectedTime);t=t.replace(/AM/g,this.getTranslation("AM"));t=t.replace(/PM/g,this.getTranslation("PM"))}this.displayText=e+(this.selectedTime?", "+t:"");this.slotUpdate.emit({date:this.selectedDate,timeSlot:this.selectedTime,translatedDate:e,translatedTimeSlot:t});this.isPopped=false;this.isTimeSlotGridVisible=false};e.prototype.closeGrid=function(){this.isPopped=false;this.isTimeSlotGridVisible=false};e.prototype.goBack=function(){this.isTimeSlotGridVisible=false};e.prototype.prevDateGrid=function(){if(this.activeDateGridPage>0)this.activeDateGridPage--};e.prototype.nextDateGrid=function(){if(this.activeDateGridPage<this.dateGrids.length-1)this.activeDateGridPage++};e.prototype.prevTimeGrid=function(){if(this.activeTimeGridPage>0)this.activeTimeGridPage--};e.prototype.nextTimeGrid=function(){if(this.activeTimeGridPage<this.timeGrids.length-1)this.activeTimeGridPage++};e.prototype.getTranslation=function(e){if(this.translations[this.language])return this.translations[this.language][e];else return builtInTranslations["en"][e]};e.prototype.formatTimeSlot=function(e){var t=function(e){var t=e.replace(/ AM/g,"");t=t.replace(/ PM/g,"");if(e.indexOf("AM")>-1){var i=t.split(":")[0].trim();if(i.length===1)i="0"+i;if(i.indexOf("12")===0)i="00";return i+":"+(t.split(":")[1]?t.split(":")[1].trim():"00")}else if(e.indexOf("PM")>-1){var i=t.split(":")[0].trim();if(i.indexOf("12")!==0)i=(parseInt(i)+12).toString();return i+":"+(t.split(":")[1]?t.split(":")[1].trim():"00")}};var i=e;if(this.amPmDisabled){if(e.indexOf("-")>-1){var n=void 0;n=e.split("-");n=n.map((function(e){return t(e)}));i=n[0]+" - "+n[1]}else{i=t(e)}}return i};e.prototype.render=function(){var e=this;var t={bottom:!this.isNeoInputAboveFold?this.neoInputHeight+"px":undefined,left:this.isNeoInputLeftSide?"0px":undefined,right:!this.isNeoInputLeftSide?"0px":undefined};var i;if(this.dateGrids&&this.dateGrids.length>0)i=this.dateGrids[this.activeDateGridPage].monthYear.split(" ");return h("span",{class:"neo-slot-picker"},h("input",{class:"neo-input",type:"text",readonly:true,placeholder:this.placeholder,value:this.displayText,onClick:function(){return e.togglePopup()},ref:function(t){return e.neoInput=t}}),this.isPopped&&h("div",{style:t,class:this.isNeoInputAboveFold?"neo-popup neo-popup-below":"neo-popup neo-popup-above"},!this.isTimeSlotGridVisible&&this.dateGrids&&this.dateGrids.length>0&&h("table",{class:"neo-grid neo-date-grid"},h("tr",null,h("th",{class:"neo-left-end"}),h("th",{colSpan:5,class:"neo-center"},this.activeDateGridPage>0?h("span",{class:"neo-paginate",onClick:function(){return e.prevDateGrid()}},"<"):h("span",{class:"neo-paginate-hidden"}," "),this.getTranslation(i[0])+" "+i[1],this.activeDateGridPage<this.dateGrids.length-1?h("span",{class:"neo-paginate",onClick:function(){return e.nextDateGrid()}},">"):h("span",{class:"neo-paginate-hidden"}," ")),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),h("tr",{class:"neo-equal-width"},h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Sun"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Mon"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Tue"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Wed"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Thu"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Fri"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Sat")))),this.dateGrids[this.activeDateGridPage].weeks.map((function(t){return h("tr",{class:"neo-equal-width"},t.days.map((function(t){return t?h("td",{class:!t.isEnabled?"neo-cell neo-cell-disabled":t.dateText==e.selectedDate?"neo-cell neo-cell-selected":"neo-cell neo-cell-enabled",onClick:function(){return e.setSelectedDate(t.isEnabled?t.dateText:undefined)}},h("span",{class:!t.isEnabled?"neo-day neo-day-disabled":t.dateText==e.selectedDate?"neo-day neo-day-selected":"neo-day neo-day-enabled"},t.dayOfMonth)):h("td",null," ")})))}))),!this.isTimeSlotGridVisible&&this.dateGrids&&!this.dateGrids.length&&h("table",{class:"neo-grid neo-empty-grid"},h("tr",null,h("th",{class:"neo-left-end"}),h("th",{colSpan:5,class:"neo-center"}," "),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7,class:"neo-no-slots-text"},this.noSlotsText)),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," "))),this.isTimeSlotGridVisible&&this.timeGrids&&this.timeGrids.length>0&&h("table",{class:"neo-grid neo-time-grid"},h("tr",null,h("th",{class:"neo-left-end"},h("span",{class:"neo-back",onClick:function(){return e.goBack()}},"←")),h("th",{class:"neo-center",colSpan:6},this.activeTimeGridPage>0?h("span",{class:"neo-paginate",onClick:function(){return e.prevTimeGrid()}},"<"):h("span",{class:"neo-paginate-hidden"}," "),this.timeSlotsText,this.activeTimeGridPage<this.timeGrids.length-1?h("span",{class:"neo-paginate",onClick:function(){return e.nextTimeGrid()}},">"):h("span",{class:"neo-paginate-hidden"}," ")),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),this.timeGrids[this.activeTimeGridPage].rows.map((function(t){return h("tr",{class:"neo-equal-width"},t.times.map((function(i){var n;if(i){n=e.formatTimeSlot(i.timeText);n=n.replace(/AM/g,e.getTranslation("AM"));n=n.replace(/PM/g,e.getTranslation("PM"))}return i?h("td",{colSpan:t.times.length===2?4:2,class:i.timeText==e.selectedTime?"neo-cell neo-cell-selected":"neo-cell neo-cell-enabled",onClick:function(){return e.setSelectedTime(i.timeText)}},h("span",{class:i.timeText==e.selectedTime?"neo-time neo-time-selected":"neo-time neo-time-enabled"},n)):h("td",{colSpan:t.times.length===2?4:2}," ")})))}))),this.isTimeSlotGridVisible&&this.timeGrids&&!this.timeGrids.length&&h("table",{class:"neo-grid neo-empty-grid"},h("tr",null,h("th",{class:"neo-left-end"},h("span",{class:"neo-back",onClick:function(){return e.goBack()}},"←")),h("th",{colSpan:5,class:"neo-center"}," "),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7,class:"neo-no-slots-text"},this.noSlotsText)),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")))))};Object.defineProperty(e,"watchers",{get:function(){return{slots:["processSlots"]}},enumerable:false,configurable:true});return e}();DatetimeSlotPicker.style=datetimeSlotPickerCss;export{DatetimeSlotPicker as datetime_slot_picker};
+import{r as registerInstance,c as createEvent,h}from"./index-dc459d91.js";var builtInTranslations={en:{Mon:"Mon",Tue:"Tue",Wed:"Wed",Thu:"Thu",Fri:"Fri",Sat:"Sat",Sun:"Sun",AM:"AM",PM:"PM",Jan:"Jan",Feb:"Feb",Mar:"Mar",Apr:"Apr",May:"May",Jun:"Jun",Jul:"Jul",Aug:"Aug",Sep:"Sep",Oct:"Oct",Nov:"Nov",Dec:"Dec"}};var monthIndex={Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};var months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function generateDateGrid(e){var t=[];var i=true;var n,s;for(var a=0,l=e;a<l.length;a++){var o=l[a];if(o.date&&o.date.substring(5)&&o.date.substring(5).split(" ").length===3&&monthIndex[o.date.substring(5).split(" ")[1]]>-1&&parseInt(o.date.substring(5).split(" ")[2])&&parseInt(o.date.substring(5).split(" ")[0])){var r=new Date(parseInt(o.date.substring(5).split(" ")[2]),monthIndex[o.date.substring(5).split(" ")[1]],parseInt(o.date.substring(5).split(" ")[0]));if(!n||n>r)n=r;if(!s||s<r)s=r}else{i=false;break}}if(i&&n&&s){var d={m1:n.getMonth(),y1:n.getFullYear()},h=d.m1,c=d.y1;var p={m2:s.getMonth(),y2:s.getFullYear()},u=p.m2,g=p.y2;do{var f={monthYear:months[h]+" "+c,weeks:[]};var m=[];var T=new Date(c,h,1);var v=new Date(c,h+1,0);for(var S=1;S<=T.getDay();S++){m.push(null)}var b=function(t){var i=new Date(c,h,t);var n=days[i.getDay()]+", "+t+" "+months[h]+" "+c;var s=e.find((function(e){return e.date===n}));m.push({dayOfMonth:t,isEnabled:s?true:false,dateText:n})};for(var w=1;w<=v.getDate();w++){b(w)}for(var x=m.length+1;x<=42;x++){m.push(null)}for(var G=1;G<=6;G++){var y={days:[]};for(var D=1;D<=7;D++){y.days.push(m.shift())}f.weeks.push(y)}t.push(f);if(h===11){h=0;c++}else{h++}}while(c<g||c===g&&h<=u)}return t}function generateTimeGrid(e,t){var i=[];var n=e.timeSlots.filter((function(e){var t=true;if(!e)t=false;return t}));if(n.length){var s=n[0].length<=8?4:2;var a=s*t;var l=Math.ceil(n.length/a);for(var o=1;o<=l;o++){var r={dateText:e.date.substring(5),rows:[]};for(var d=1;d<=t;d++){var h={times:[]};for(var c=1;c<=s;c++){var p=n.shift();h.times.push(p?{timeText:p}:null)}r.rows.push(h)}i.push(r)}}return i}var datetimeSlotPickerCss=":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right;width:15%}.neo-left-end{text-align:left;width:15%}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}@media only screen and (min-width: 768px){.neo-cell-enabled:hover{color:white;background-color:black}}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";var DatetimeSlotPicker=function(){function e(e){registerInstance(this,e);this.slotUpdate=createEvent(this,"slotUpdate",7);this.placeholder="Pick a time slot";this.timeSlotsText="Time";this.noSlotsText="No slots are available";this.slots=[];this.language="en";this.translations=builtInTranslations;this.amPmDisabled=false;this.datesHiddenWhenTimesShown=false}e.prototype.componentWillLoad=function(){this.processSlots(this.slots)};e.prototype.processSlots=function(e){if(this.slots){this.isTimeSlotGridVisible=false;this.selectedDate=undefined;this.selectedTime=undefined;this.displayText=undefined;this.dateGrids=generateDateGrid(e);if(this.dateGrids&&this.dateGrids.length)this.activeDateGridPage=0}};e.prototype.togglePopup=function(){if(this.slots){if(this.neoInput.getBoundingClientRect().top<window.innerHeight/2)this.isNeoInputAboveFold=true;else this.isNeoInputAboveFold=false;if(this.neoInput.getBoundingClientRect().left<window.innerWidth/2)this.isNeoInputLeftSide=true;else this.isNeoInputLeftSide=false;this.neoInputHeight=this.neoInput.getBoundingClientRect().bottom-this.neoInput.getBoundingClientRect().top;this.isPopped=!this.isPopped;this.isTimeSlotGridVisible=false}};e.prototype.setSelectedDate=function(e){var t=this;if(e){this.selectedDate=e;if(this.slots.length&&this.slots[0].timeSlots){this.resetSlot();var i=this.slots.find((function(e){return e.date===t.selectedDate}));this.timeGrids=generateTimeGrid(i,this.datesHiddenWhenTimesShown?7:4);this.selectedTime=undefined;if(this.timeGrids&&this.timeGrids.length)this.activeTimeGridPage=0;this.isTimeSlotGridVisible=true}else this.setSlot()}};e.prototype.setSelectedTime=function(e){if(e){this.selectedTime=e;this.setSlot()}};e.prototype.setSlot=function(){var e,t;var i=this.selectedDate.split(" ");console.log(i);e=this.getTranslation(i[0].substring(0,i[0].length-1))+", "+i[1]+" "+this.getTranslation(i[2])+" "+i[3];if(this.selectedTime){t=this.formatTimeSlot(this.selectedTime);t=t.replace(/AM/g,this.getTranslation("AM"));t=t.replace(/PM/g,this.getTranslation("PM"))}this.displayText=e+(this.selectedTime?", "+t:"");this.slotUpdate.emit({date:this.selectedDate,timeSlot:this.selectedTime,translatedDate:e,translatedTimeSlot:t});this.isPopped=false;this.isTimeSlotGridVisible=false};e.prototype.resetSlot=function(){this.displayText=undefined;this.slotUpdate.emit({date:null,timeSlot:null,translatedDate:null,translatedTimeSlot:null})};e.prototype.closeGrid=function(){this.isPopped=false;this.isTimeSlotGridVisible=false};e.prototype.goBack=function(){this.isTimeSlotGridVisible=false};e.prototype.prevDateGrid=function(){if(this.activeDateGridPage>0)this.activeDateGridPage--};e.prototype.nextDateGrid=function(){if(this.activeDateGridPage<this.dateGrids.length-1)this.activeDateGridPage++};e.prototype.prevTimeGrid=function(){if(this.activeTimeGridPage>0)this.activeTimeGridPage--};e.prototype.nextTimeGrid=function(){if(this.activeTimeGridPage<this.timeGrids.length-1)this.activeTimeGridPage++};e.prototype.getTranslation=function(e){if(this.translations[this.language])return this.translations[this.language][e];else return builtInTranslations["en"][e]};e.prototype.formatTimeSlot=function(e){var t=function(e){var t=e.replace(/ AM/g,"");t=t.replace(/ PM/g,"");if(e.indexOf("AM")>-1){var i=t.split(":")[0].trim();if(i.length===1)i="0"+i;if(i.indexOf("12")===0)i="00";return i+":"+(t.split(":")[1]?t.split(":")[1].trim():"00")}else if(e.indexOf("PM")>-1){var i=t.split(":")[0].trim();if(i.indexOf("12")!==0)i=(parseInt(i)+12).toString();return i+":"+(t.split(":")[1]?t.split(":")[1].trim():"00")}};var i=e;if(this.amPmDisabled){if(e.indexOf("-")>-1){var n=void 0;n=e.split("-");n=n.map((function(e){return t(e)}));i=n[0]+" - "+n[1]}else{i=t(e)}}return i};e.prototype.render=function(){var e=this;var t={bottom:!this.isNeoInputAboveFold?this.neoInputHeight+"px":undefined,left:this.isNeoInputLeftSide?"0px":undefined,right:!this.isNeoInputLeftSide?"0px":undefined};var i;if(this.dateGrids&&this.dateGrids.length>0)i=this.dateGrids[this.activeDateGridPage].monthYear.split(" ");return h("span",{class:"neo-slot-picker"},h("input",{class:"neo-input",type:"text",readonly:true,placeholder:this.placeholder,value:this.displayText,onClick:function(){return e.togglePopup()},ref:function(t){return e.neoInput=t}}),this.isPopped&&h("div",{style:t,class:this.isNeoInputAboveFold?"neo-popup neo-popup-below":"neo-popup neo-popup-above"},(!this.isTimeSlotGridVisible||!this.datesHiddenWhenTimesShown)&&this.dateGrids&&this.dateGrids.length>0&&h("table",{class:"neo-grid neo-date-grid"},h("tr",null,h("th",{class:"neo-left-end"}),h("th",{colSpan:5,class:"neo-center"},this.activeDateGridPage>0?h("span",{class:"neo-paginate",onClick:function(){return e.prevDateGrid()}},"<"):h("span",{class:"neo-paginate-hidden"}," "),this.getTranslation(i[0])+" "+i[1],this.activeDateGridPage<this.dateGrids.length-1?h("span",{class:"neo-paginate",onClick:function(){return e.nextDateGrid()}},">"):h("span",{class:"neo-paginate-hidden"}," ")),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),h("tr",{class:"neo-equal-width"},h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Sun"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Mon"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Tue"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Wed"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Thu"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Fri"))),h("td",null,h("span",{class:"neo-dow"},this.getTranslation("Sat")))),this.dateGrids[this.activeDateGridPage].weeks.map((function(t){return h("tr",{class:"neo-equal-width"},t.days.map((function(t){return t?h("td",{class:!t.isEnabled?"neo-cell neo-cell-disabled":t.dateText==e.selectedDate?"neo-cell neo-cell-selected":"neo-cell neo-cell-enabled",onClick:function(){return e.setSelectedDate(t.isEnabled?t.dateText:undefined)}},h("span",{class:!t.isEnabled?"neo-day neo-day-disabled":t.dateText==e.selectedDate?"neo-day neo-day-selected":"neo-day neo-day-enabled"},t.dayOfMonth)):h("td",null," ")})))}))),(!this.isTimeSlotGridVisible||!this.datesHiddenWhenTimesShown)&&this.dateGrids&&!this.dateGrids.length&&h("table",{class:"neo-grid neo-empty-grid"},h("tr",null,h("th",{class:"neo-left-end"}),h("th",{colSpan:5,class:"neo-center"}," "),h("th",{class:"neo-right-end"},h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"))),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7,class:"neo-no-slots-text"},this.noSlotsText)),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," "))),(this.isTimeSlotGridVisible||!this.datesHiddenWhenTimesShown&&this.selectedDate)&&this.timeGrids&&this.timeGrids.length>0&&h("table",{class:"neo-grid neo-time-grid"},h("tr",null,h("th",{class:"neo-left-end"},this.datesHiddenWhenTimesShown?h("span",{class:"neo-back",onClick:function(){return e.goBack()}},"←"):h("span",null," ")),h("th",{class:"neo-center",colSpan:6},this.activeTimeGridPage>0?h("span",{class:"neo-paginate",onClick:function(){return e.prevTimeGrid()}},"<"):h("span",{class:"neo-paginate-hidden"}," "),this.timeSlotsText,this.activeTimeGridPage<this.timeGrids.length-1?h("span",{class:"neo-paginate",onClick:function(){return e.nextTimeGrid()}},">"):h("span",{class:"neo-paginate-hidden"}," ")),h("th",{class:"neo-right-end"},this.datesHiddenWhenTimesShown?h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"):h("span",null," "))),this.timeGrids[this.activeTimeGridPage].rows.map((function(t){return h("tr",{class:"neo-equal-width"},t.times.map((function(i){var n;if(i){n=e.formatTimeSlot(i.timeText);n=n.replace(/AM/g,e.getTranslation("AM"));n=n.replace(/PM/g,e.getTranslation("PM"))}return i?h("td",{colSpan:t.times.length===2?4:2,class:i.timeText==e.selectedTime?"neo-cell neo-cell-selected":"neo-cell neo-cell-enabled",onClick:function(){return e.setSelectedTime(i.timeText)}},h("span",{class:i.timeText==e.selectedTime?"neo-time neo-time-selected":"neo-time neo-time-enabled"},n)):h("td",{colSpan:t.times.length===2?4:2}," ")})))}))),(this.isTimeSlotGridVisible||!this.datesHiddenWhenTimesShown&&this.selectedDate)&&this.timeGrids&&!this.timeGrids.length&&h("table",{class:"neo-grid neo-empty-grid"},h("tr",null,h("th",{class:"neo-left-end"},this.datesHiddenWhenTimesShown?h("span",{class:"neo-back",onClick:function(){return e.goBack()}},"←"):h("span",null," ")),h("th",{colSpan:5,class:"neo-center"}," "),h("th",{class:"neo-right-end"},this.datesHiddenWhenTimesShown?h("span",{class:"neo-close",onClick:function(){return e.closeGrid()}},"×"):h("span",null," "))),this.datesHiddenWhenTimesShown&&h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7,class:"neo-no-slots-text"},this.noSlotsText)),h("tr",null,h("td",{colSpan:7}," ")),h("tr",null,h("td",{colSpan:7}," ")),this.datesHiddenWhenTimesShown&&h("tr",null,h("td",{colSpan:7}," ")),this.datesHiddenWhenTimesShown&&h("tr",null,h("td",{colSpan:7}," ")))))};Object.defineProperty(e,"watchers",{get:function(){return{slots:["processSlots"]}},enumerable:false,configurable:true});return e}();DatetimeSlotPicker.style=datetimeSlotPickerCss;export{DatetimeSlotPicker as datetime_slot_picker};

dist/esm-es5/datetime-slot-picker.js

@@ -1,1 +0,1 @@
-import{p as plt,w as win,d as doc,N as NAMESPACE,a as promiseResolve,b as bootstrapLazy}from"./index-dc459d91.js";var getDynamicImportFunction=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var patchBrowser=function(){{plt.$cssShim$=win.__cssshim}var e=Array.from(doc.querySelectorAll("script")).find((function(e){return new RegExp("/"+NAMESPACE+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===NAMESPACE}));var t=e["data-opts"]||{};if("onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}{t.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,win.location.href)).href;{patchDynamicImport(t.resourcesUrl,e)}if(!win.customElements){return import("./dom-424264d0.js").then((function(){return t}))}}return promiseResolve(t)};var patchDynamicImport=function(e,t){var r=getDynamicImportFunction(NAMESPACE);try{win[r]=new Function("w","return import(w);//"+Math.random())}catch(o){var i=new Map;win[r]=function(o){var n=new URL(o,e).href;var s=i.get(n);if(!s){var a=doc.createElement("script");a.type="module";a.crossOrigin=t.crossOrigin;a.src=URL.createObjectURL(new Blob(["import * as m from '"+n+"'; window."+r+".m = m;"],{type:"application/javascript"}));s=new Promise((function(e){a.onload=function(){e(win[r].m);a.remove()}}));i.set(n,s);doc.head.appendChild(a)}return s}}};patchBrowser().then((function(e){return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)}));
+import{p as plt,w as win,d as doc,N as NAMESPACE,a as promiseResolve,b as bootstrapLazy}from"./index-dc459d91.js";var getDynamicImportFunction=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var patchBrowser=function(){{plt.$cssShim$=win.__cssshim}var e=Array.from(doc.querySelectorAll("script")).find((function(e){return new RegExp("/"+NAMESPACE+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===NAMESPACE}));var t=e["data-opts"]||{};if("onbeforeload"in e&&!history.scrollRestoration){return{then:function(){}}}{t.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,win.location.href)).href;{patchDynamicImport(t.resourcesUrl,e)}if(!win.customElements){return import("./dom-424264d0.js").then((function(){return t}))}}return promiseResolve(t)};var patchDynamicImport=function(e,t){var r=getDynamicImportFunction(NAMESPACE);try{win[r]=new Function("w","return import(w);//"+Math.random())}catch(n){var i=new Map;win[r]=function(n){var o=new URL(n,e).href;var s=i.get(o);if(!s){var a=doc.createElement("script");a.type="module";a.crossOrigin=t.crossOrigin;a.src=URL.createObjectURL(new Blob(["import * as m from '"+o+"'; window."+r+".m = m;"],{type:"application/javascript"}));s=new Promise((function(e){a.onload=function(){e(win[r].m);a.remove()}}));i.set(o,s);doc.head.appendChild(a)}return s}}};patchBrowser().then((function(e){return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],datesHiddenWhenTimesShown:[4,"dates-hidden-when-times-shown"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],e)}));

dist/esm-es5/loader.js

@@ -1,1 +0,1 @@
-import{C as CSS,p as plt,w as win,a as promiseResolve,b as bootstrapLazy}from"./index-dc459d91.js";var patchEsm=function(){if(!(CSS&&CSS.supports&&CSS.supports("color","var(--c)"))){return import("./css-shim-8de9f2ac.js").then((function(){if(plt.$cssShim$=win.__cssshim){return plt.$cssShim$.i()}else{return 0}}))}return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],t)}))};export{defineCustomElements};
+import{C as CSS,p as plt,w as win,a as promiseResolve,b as bootstrapLazy}from"./index-dc459d91.js";var patchEsm=function(){if(!(CSS&&CSS.supports&&CSS.supports("color","var(--c)"))){return import("./css-shim-8de9f2ac.js").then((function(){if(plt.$cssShim$=win.__cssshim){return plt.$cssShim$.i()}else{return 0}}))}return promiseResolve()};var defineCustomElements=function(e,t){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{placeholder:[1],timeSlotsText:[1,"time-slots-text"],noSlotsText:[1,"no-slots-text"],slots:[16],language:[1],translations:[16],amPmDisabled:[4,"am-pm-disabled"],datesHiddenWhenTimesShown:[4,"dates-hidden-when-times-shown"],isPopped:[32],isNeoInputAboveFold:[32],isNeoInputLeftSide:[32],neoInputHeight:[32],isTimeSlotGridVisible:[32],activeDateGridPage:[32],dateGrids:[32],selectedDate:[32],activeTimeGridPage:[32],timeGrids:[32],selectedTime:[32],displayText:[32]}]]]],t)}))};export{defineCustomElements};

dist/esm/datetime-slot-picker.entry.js

@@ -41,3 +41,3 @@ import { r as registerInstance, c as createEvent, h } from './index-dc459d91.js';
     if (slot.date && slot.date.substring(5) && slot.date.substring(5).split(' ').length === 3 &&
-      monthIndex[slot.date.substring(5).split(' ')[1]] && parseInt(slot.date.substring(5).split(' ')[2])
+      monthIndex[slot.date.substring(5).split(' ')[1]] > -1 && parseInt(slot.date.substring(5).split(' ')[2])
       && parseInt(slot.date.substring(5).split(' ')[0])) {
@@ -103,3 +103,3 @@ let parsedDate = new Date(parseInt(slot.date.substring(5).split(' ')[2]), monthIndex[slot.date.substring(5).split(' ')[1]], parseInt(slot.date.substring(5).split(' ')[0]));
 
-function generateTimeGrid(slot) {
+function generateTimeGrid(slot, noOfRows) {
   let timeGrids = [];
@@ -117,3 +117,3 @@ let times = slot.timeSlots.filter(ts => {
     let noOfColumns = times[0].length <= 8 ? 4 : 2;
-    let noOfCells = noOfColumns * 7;
+    let noOfCells = noOfColumns * noOfRows;
     let noOfGrids = Math.ceil(times.length / noOfCells);
@@ -125,3 +125,3 @@ for (let gridCounter = 1; gridCounter <= noOfGrids; gridCounter++) {
       };
-      for (let rowCounter = 1; rowCounter <= 7; rowCounter++) {
+      for (let rowCounter = 1; rowCounter <= noOfRows; rowCounter++) {
         let row = { times: [] };
@@ -140,3 +140,3 @@ for (let columnCounter = 1; columnCounter <= noOfColumns; columnCounter++) {
 
-const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right}.neo-left-end{text-align:left}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}.neo-cell-enabled:hover{color:white;background-color:black}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
+const datetimeSlotPickerCss = ":host{display:block}.neo-slot-picker{position:relative}.neo-popup{position:absolute;z-index:999;background-color:white;padding:2px;margin:3px 0px;-webkit-box-shadow:0 0 10px lightgray;box-shadow:0 0 10px lightgray;border:1px solid whitesmoke}.neo-input{min-width:275px;cursor:pointer}.neo-paginate,.neo-close,.neo-back{padding:2px 10px;cursor:pointer}.neo-paginate-hidden{padding:2px 10px}table{table-layout:fixed;width:100%}tr.neo-equal-width>*:nth-last-child(2)~*{width:50%}tr.neo-equal-width>*:nth-last-child(3)~*{width:33.3%}tr.neo-equal-width>*:nth-last-child(4)~*{width:25%}tr.neo-equal-width>*:nth-last-child(5)~*{width:20%}tr.neo-equal-width>*:nth-last-child(6)~*{width:16.7%}tr.neo-equal-width>*:nth-last-child(7)~*{width:14.3%}table,th,td{border:1px solid whitesmoke;border-collapse:collapse}th,td{padding:3px}td{text-align:center}.neo-right-end{text-align:right;width:15%}.neo-left-end{text-align:left;width:15%}.neo-grid{font-size:small;min-width:275px}.neo-day,.neo-time{padding:2px}.neo-cell-enabled{color:black}@media only screen and (min-width: 768px){.neo-cell-enabled:hover{color:white;background-color:black}}.neo-cell-selected{color:white;background-color:black}.neo-day-enabled,.neo-day-selected,.neo-time-enabled,.neo-time-selected{cursor:pointer}.neo-day-disabled{color:lightgray;cursor:not-allowed}.neo-center{border-right:0px;border-left:0px}.neo-left-end{border-right:0px}.neo-right-end{border-left:0px}.neo-empty-grid th,.neo-empty-grid td{border:1px solid white}.neo-no-slots-text{color:gray}";
 
@@ -154,2 +154,3 @@ const DatetimeSlotPicker = class {
     this.amPmDisabled = false;
+    this.datesHiddenWhenTimesShown = false;
   }
@@ -190,4 +191,6 @@ componentWillLoad() {
       if (this.slots.length && this.slots[0].timeSlots) {
+        //resetSlot until time is also chosen
+        this.resetSlot();
         let slot = this.slots.find(s => s.date === this.selectedDate);
-        this.timeGrids = generateTimeGrid(slot);
+        this.timeGrids = generateTimeGrid(slot, this.datesHiddenWhenTimesShown ? 7 : 4);
         this.selectedTime = undefined;
@@ -229,2 +232,11 @@ if (this.timeGrids && this.timeGrids.length)
   }
+  resetSlot() {
+    this.displayText = undefined;
+    this.slotUpdate.emit({
+      date: null,
+      timeSlot: null,
+      translatedDate: null,
+      translatedTimeSlot: null
+    });
+  }
   closeGrid() {
@@ -304,3 +316,3 @@ this.isPopped = false;
     return h("span", { class: "neo-slot-picker" }, h("input", { class: "neo-input", type: "text", readonly: true, placeholder: this.placeholder, value: this.displayText, onClick: () => this.togglePopup(), ref: (el) => this.neoInput = el }), this.isPopped &&
-      h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, !this.isTimeSlotGridVisible && this.dateGrids && this.dateGrids.length > 0 &&
+      h("div", { style: popupStyle, class: this.isNeoInputAboveFold ? 'neo-popup neo-popup-below' : 'neo-popup neo-popup-above' }, (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && this.dateGrids.length > 0 &&
         h("table", { class: "neo-grid neo-date-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, this.activeDateGridPage > 0
@@ -316,9 +328,13 @@ ? h("span", { class: "neo-paginate", onClick: () => this.prevDateGrid() }, "<")
           }));
-        })), !this.isTimeSlotGridVisible && this.dateGrids && !this.dateGrids.length &&
-        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0"))), this.isTimeSlotGridVisible && this.timeGrids && this.timeGrids.length > 0 &&
-        h("table", { class: "neo-grid neo-time-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
+        })), (!this.isTimeSlotGridVisible || !this.datesHiddenWhenTimesShown) && this.dateGrids && !this.dateGrids.length &&
+        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0"))), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && this.timeGrids.length > 0 &&
+        h("table", { class: "neo-grid neo-time-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : h("span", null, "\u00A0")), h("th", { class: "neo-center", colSpan: 6 }, this.activeTimeGridPage > 0
           ? h("span", { class: "neo-paginate", onClick: () => this.prevTimeGrid() }, "<")
           : h("span", { class: "neo-paginate-hidden" }, "\u00A0"), this.timeSlotsText, this.activeTimeGridPage < (this.timeGrids.length - 1)
           ? h("span", { class: "neo-paginate", onClick: () => this.nextTimeGrid() }, ">")
-          : h("span", { class: "neo-paginate-hidden" }, "\u00A0")), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
+          : h("span", { class: "neo-paginate-hidden" }, "\u00A0")), h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : h("span", null, "\u00A0"))), this.timeGrids[this.activeTimeGridPage].rows.map(row => {
           return h("tr", { class: "neo-equal-width" }, row.times.map(time => {
@@ -335,4 +351,11 @@ let translatedTimeText;
           }));
-        })), this.isTimeSlotGridVisible && this.timeGrids && !this.timeGrids.length &&
-        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7"))), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")))));
+        })), (this.isTimeSlotGridVisible || (!this.datesHiddenWhenTimesShown && this.selectedDate)) && this.timeGrids && !this.timeGrids.length &&
+        h("table", { class: "neo-grid neo-empty-grid" }, h("tr", null, h("th", { class: "neo-left-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-back", onClick: () => this.goBack() }, "\u2190")
+          : h("span", null, "\u00A0")), h("th", { colSpan: 5, class: "neo-center" }, "\u00A0"), h("th", { class: "neo-right-end" }, this.datesHiddenWhenTimesShown
+          ? h("span", { class: "neo-close", onClick: () => this.closeGrid() }, "\u00D7")
+          : h("span", null, "\u00A0"))), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7, class: "neo-no-slots-text" }, this.noSlotsText)), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")), this.datesHiddenWhenTimesShown &&
+          h("tr", null, h("td", { colSpan: 7 }, "\u00A0")))));
   }
@@ -339,0 +362,0 @@ static get watchers() { return {

dist/esm/datetime-slot-picker.js

@@ -80,3 +80,3 @@ import { p as plt, w as win, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-dc459d91.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
+  return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"datesHiddenWhenTimesShown":[4,"dates-hidden-when-times-shown"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -27,3 +27,3 @@ import { C as CSS, p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-dc459d91.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
+  return bootstrapLazy([["datetime-slot-picker",[[0,"datetime-slot-picker",{"placeholder":[1],"timeSlotsText":[1,"time-slots-text"],"noSlotsText":[1,"no-slots-text"],"slots":[16],"language":[1],"translations":[16],"amPmDisabled":[4,"am-pm-disabled"],"datesHiddenWhenTimesShown":[4,"dates-hidden-when-times-shown"],"isPopped":[32],"isNeoInputAboveFold":[32],"isNeoInputLeftSide":[32],"neoInputHeight":[32],"isTimeSlotGridVisible":[32],"activeDateGridPage":[32],"dateGrids":[32],"selectedDate":[32],"activeTimeGridPage":[32],"timeGrids":[32],"selectedTime":[32],"displayText":[32]}]]]], options);
   });
@@ -30,0 +30,0 @@ };

dist/types/components.d.ts

@@ -13,2 +13,3 @@ /* eslint-disable */
         "amPmDisabled": boolean;
+        "datesHiddenWhenTimesShown": boolean;
         "language": string;
@@ -36,2 +37,3 @@ "noSlotsText": string;
         "amPmDisabled"?: boolean;
+        "datesHiddenWhenTimesShown"?: boolean;
         "language"?: string;
@@ -38,0 +40,0 @@ "noSlotsText"?: string;

dist/types/components/datetime-slot-picker/datetime-slot-picker.d.ts

@@ -14,2 +14,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   amPmDisabled: boolean;
+  datesHiddenWhenTimesShown: boolean;
   isPopped: boolean;
@@ -35,2 +36,3 @@ isNeoInputAboveFold: boolean;
   private setSlot;
+  private resetSlot;
   private closeGrid;
@@ -37,0 +39,0 @@ private goBack;

dist/types/utils/generate-time-grid.d.ts

 import { Slot } from '../models/slot';
 import { TimeGrid } from '../models/time-grid';
-export declare function generateTimeGrid(slot: Slot): TimeGrid[];
+export declare function generateTimeGrid(slot: Slot, noOfRows: number): TimeGrid[];

package.json

 {
   "name": "datetime-slot-picker",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A webcomponent for date and time slot picker",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

readme.md

 # Datetime Slot Picker
 
-This is a Web Component for Date and Time Slot Picker. This project is a standalone Web Component using Stencil.
+This is a Web Component for Date and Time Slot Picker. This project is a standalone Web Component built using StencilJS.
 
@@ -33,3 +33,3 @@ You have to pass in dates and time slots that you want to display.
 
-To display time slots in HH:mm format, pass the am-pm-disabled property
+To display time slots in HH:mm format, pass the "am-pm-disabled" property. The "dates-hidden-when-times-shown" property can be used if you would like to make the popup more compact, when time slots are shown the date calendar will be hidden.
 
@@ -42,2 +42,3 @@ ```
       am-pm-disabled
+      dates-hidden-when-times-shown
       >
@@ -47,14 +48,2 @@ </datetime-slot-picker>
 
-If you are passing translations (using Javascript as shown in the later section), you can set the language code
-
-```
-<datetime-slot-picker 
-      placeholder="Pick a time slot" 
-      time-slots-text="Time"
-      no-slots-text="No slots are available" 
-      language="en"
-      >
-</datetime-slot-picker>
-```
-
 ## Initializing slots & listening to slot changes in Javascript
@@ -98,2 +87,14 @@
 
+If you are passing translations (using Javascript as shown below), you can set the language code
+
+```
+<datetime-slot-picker 
+      placeholder="Pick a time slot" 
+      time-slots-text="Time"
+      no-slots-text="No slots are available" 
+      language="en"
+      >
+</datetime-slot-picker>
+```
+
 To pass translations, also set the translations property as shown below. You can have multiple langage codes like "en".
@@ -100,0 +101,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

744869

increased by1.1%

Lines of code

7823

increased by1.45%

Number of lines in readme file

197

increased by0.51%

No dependency changes