@watermarkinsights/ripple 5.3.0-1 → 5.3.0-3

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.css

@@ -35,6 +35,22 @@
   --wmcolor-calendar-range-background: var(--wmcolor-interactive-background-hover);
   --wmcolor-datepicker-range-background-hover: var(--wmcolor-datepicker-day-background-hover);
   --wmcolor-datepicker-range-background-selected: var(--wmcolor-background-selected);
+  --range-start-svg: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z" fill="%23575195"/></svg>');
+  --range-end-svg: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 6C44 2.68629 41.3137 0 38 0H15.1543C12.9223 0 10.8749 1.23886 9.83926 3.21596L1.45831 19.216C0.544956 20.9596 0.54496 23.0404 1.45831 24.784L9.83926 40.784C10.8749 42.7611 12.9223 44 15.1542 44H38C41.3137 44 44 41.3137 44 38V6Z" fill="%23575195"/></svg>');
+  --range-background-selected: linear-gradient(
+    transparent,
+    transparent 5px,
+    var(--wmcolor-datepicker-range-background-selected) 5px,
+    var(--wmcolor-datepicker-range-background-selected) 39px,
+    transparent 39px
+  );
+  --range-background-hover: linear-gradient(
+    transparent,
+    transparent 5px,
+    var(--wmcolor-datepicker-range-background-hover) 5px,
+    var(--wmcolor-datepicker-range-background-hover) 39px,
+    transparent 39px
+  );
 }
 :host priv-calendar + priv-calendar {
   border-inline-start: 1px solid var(--wmcolor-calendar-border);
@@ -264,7 +280,7 @@
   font-weight: 500;
   position: relative;
   display: flex;
-  flex: 1 1 2.75rem;
+  flex: 1 0 2.75rem;
   align-items: center;
   justify-content: center;
 }
@@ -274,75 +290,96 @@
 .popup-wrapper .day-view .date-grid .date-cell:hover {
   background-color: var(--wmcolor-datepicker-day-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell:hover:not(.preview, .range-start, .range-end) {
-  margin: 1px;
-  flex: 1 0 42px;
-}
 .popup-wrapper .day-view .date-grid .date-cell[aria-selected=true] {
   background-color: var(--wmcolor-datepicker-day-background-selected);
   color: var(--wmcolor-datepicker-day-text-selected);
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range {
-  background: var(--wmcolor-datepicker-range-background-selected);
-  margin-inline: 0;
+  background: var(--range-background-selected);
   border-radius: 0;
-  flex-shrink: 0;
-  margin-top: 5px;
-  margin-bottom: 5px;
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:not(.preview):hover {
-  border-top-left-radius: 22px;
-  border-bottom-left-radius: 22px;
+  background-repeat: no-repeat;
+  background-position: center, center left 17px;
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:not(.preview):hover {
-  border-top-right-radius: 22px;
-  border-bottom-right-radius: 22px;
+  background-position: center, center right 17px;
+  background-repeat: no-repeat;
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range:not(.preview):hover {
-  background-image: radial-gradient(#dbd9ef 20px, transparent 21px), linear-gradient(transparent, transparent 5px, var(--wmcolor-datepicker-range-background-selected) 5px, var(--wmcolor-datepicker-range-background-selected) 39px, transparent 39px);
-  margin: 0;
-  flex: 1 0 44px;
-  background-color: transparent;
+  background-image: radial-gradient(#dbd9ef 20px, transparent 21px), var(--range-background-selected);
   color: var(--wmcolor-datepicker-day-text);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:not(.range-start):not(.range-end) {
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview {
   position: relative;
-  background-color: var(--wmcolor-datepicker-range-background-hover);
+  background-image: var(--range-background-hover);
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:first-child, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end.first-of-month, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:first-child, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start.first-of-month {
-  border-top-left-radius: 22px;
-  border-bottom-left-radius: 22px;
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+  background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), var(--range-background-hover);
+  background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:hover:before, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:hover:before {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  outline: 3px solid var(--wmcolor-calendar-day-border-hover);
-  height: 34px;
-  width: 34px;
-  pointer-events: none;
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+  background-position: center left -5px, center left 17px;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
+  background-position: center right -5px, center right 17px;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start, .preview-end) {
+  background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), linear-gradient(transparent, transparent 15px, var(--wmcolor-datepicker-range-background-hover) 15px, var(--wmcolor-datepicker-range-background-hover) 29px, transparent 29px);
+  background-position: center left -5px, center right -5px, center;
+  background-size: auto, auto, 9px;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:last-child, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:first-child {
+  background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px);
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
-  border-top-left-radius: 22px;
-  border-bottom-left-radius: 22px;
+  background-position: center, center left 17px;
+  background-repeat: no-repeat;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start:first-child {
+  background-position: center, center left 17px;
+  background-repeat: no-repeat;
 }
 .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end {
-  border-top-right-radius: 22px;
-  border-bottom-right-radius: 22px;
+  background-position: center, center right 17px;
+  background-repeat: no-repeat;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end:last-child {
+  background-position: center, center right 17px;
+  background-repeat: no-repeat;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .day-view .date-grid .date-cell.in-range.preview-start {
+  background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover);
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end) {
+  background-image: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
+  background-position: -5px center, center left 17px;
+  background-repeat: no-repeat;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover {
+  background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
+  background-position: center, -5px center, center left 17px;
+  background-repeat: no-repeat;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:first-of-type:not(.range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:first-child:not(.range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.first-of-month:not(.range-start, .range-end) {
-  border-top-left-radius: 22px;
-  border-bottom-left-radius: 22px;
+.popup-wrapper .day-view .date-grid .date-cell.in-range.range-start:last-child:hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.range-end:first-child:hover {
+  background: radial-gradient(#dbd9ef 20px, transparent 21px);
+  background-position: center;
 }
-.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end), .popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end) {
-  border-top-right-radius: 22px;
-  border-bottom-right-radius: 22px;
+.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview), .popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview), .popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview) {
+  background: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
+  background-position: 5px center, center right 17px;
+  background-repeat: no-repeat;
+}
+.popup-wrapper .day-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .day-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview-start, .preview-end):hover {
+  background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
+  background-position: center, 5px center, center right 17px;
+  background-repeat: no-repeat;
 }
 .popup-wrapper .day-view .date-grid .date-cell.today:after {
   content: "";
   display: block;
   position: absolute;
-  inset: auto 0 2px 0;
+  inset: auto 0 6px 0;
   width: 6px;
   aspect-ratio: 1;
   border-radius: 50%;
@@ -355,28 +392,30 @@
   outline: none;
   font-weight: 600;
   color: var(--wmcolor-datepicker-day-text-selected);
-  flex-shrink: 0;
 }
 .popup-wrapper .day-view .date-grid .date-cell.range-start {
-  background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z" fill="%23575195"/></svg>');
+  background-image: var(--range-start-svg);
   padding-inline-end: 2px;
   background-color: transparent;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range {
-  background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z" fill="%23575195"/></svg>'), linear-gradient(transparent, transparent 5px, var(--wmcolor-datepicker-range-background-selected) 5px, var(--wmcolor-datepicker-range-background-selected) 39px, transparent 39px);
+.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range:not(:last-of-type, :last-child) {
+  background-image: var(--range-start-svg), var(--range-background-selected);
   border-radius: 0;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range.preview {
-  background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 6C0 2.68629 2.68629 0 6 0H28.8457C31.0777 0 33.1251 1.23886 34.1607 3.21596L42.5417 19.216C43.455 20.9596 43.455 23.0404 42.5417 24.784L34.1607 40.784C33.1251 42.7611 31.0777 44 28.8458 44H6C2.68629 44 0 41.3137 0 38V6Z" fill="%23575195"/></svg>'), linear-gradient(transparent, transparent 5px, var(--wmcolor-datepicker-range-background-hover) 5px, var(--wmcolor-datepicker-range-background-hover) 39px, transparent 39px);
+.popup-wrapper .day-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type, :last-child) {
+  background-image: var(--range-start-svg), var(--range-background-hover);
 }
 .popup-wrapper .day-view .date-grid .date-cell.range-end {
-  background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 6C44 2.68629 41.3137 0 38 0H15.1543C12.9223 0 10.8749 1.23886 9.83926 3.21596L1.45831 19.216C0.544956 20.9596 0.54496 23.0404 1.45831 24.784L9.83926 40.784C10.8749 42.7611 12.9223 44 15.1542 44H38C41.3137 44 44 41.3137 44 38V6Z" fill="%23575195"/></svg>'), linear-gradient(transparent, transparent 5px, var(--wmcolor-datepicker-range-background-selected) 5px, var(--wmcolor-datepicker-range-background-selected) 39px, transparent 39px);
+  background-image: var(--range-end-svg);
   padding-inline-start: 2px;
   background-color: transparent;
+}
+.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range:not(:first-of-type, :first-child) {
+  background-image: var(--range-end-svg), var(--range-background-selected);
   border-radius: 0;
 }
-.popup-wrapper .day-view .date-grid .date-cell.range-end.preview {
-  background-image: url('data:image/svg+xml,<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 6C44 2.68629 41.3137 0 38 0H15.1543C12.9223 0 10.8749 1.23886 9.83926 3.21596L1.45831 19.216C0.544956 20.9596 0.54496 23.0404 1.45831 24.784L9.83926 40.784C10.8749 42.7611 12.9223 44 15.1542 44H38C41.3137 44 44 41.3137 44 38V6Z" fill="%23575195"/></svg>'), linear-gradient(transparent, transparent 5px, var(--wmcolor-datepicker-range-background-hover) 5px, var(--wmcolor-datepicker-range-background-hover) 39px, transparent 39px);
+.popup-wrapper .day-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type, :first-child) {
+  background-image: var(--range-end-svg), var(--range-background-hover);
 }
 .popup-wrapper .day-view .date-grid .date-cell.range-start.range-end {
   background: var(--wmcolor-datepicker-day-background-selected);
@@ -385,10 +424,6 @@
   margin: 1px;
   flex-basis: 42px;
 }
-.popup-wrapper .day-view .date-grid .date-cell:active {
-  background-color: var(--wmcolor-datepicker-day-background-selected);
-  color: var(--wmcolor-datepicker-day-text-selected);
-}
 .popup-wrapper .month-view .months {
   border-top: 2px solid;
   border-top-color: var(--wmcolor-datepicker-month-border);

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -3,6 +3,12 @@ import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays } fr
 export class PrivCalendar {
     constructor() {
         this.today = this.dateToISO(new Date());
+        this.calType = "single";
+        this.calName = "";
+        this.calInstructions = intl.formatMessage({
+            id: "date.instructions",
+            defaultMessage: "Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.",
+        });
         this._focus = {
             year: {
                 asString: () => dateFind.year.asString(this.focusDate),
@@ -105,45 +111,49 @@ export class PrivCalendar {
             const monthOfDate = dateFind.month.asInt(date);
             const dayOfDate = dateFind.day.asInt(date);
             const yearOfDate = dateFind.year.asInt(date);
-            const isToday = date === this.today;
             const isStartDate = this.startDate && this.startDate === date;
-            const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
-            const isFirstOfMonth = dayOfDate === 1;
-            const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
-            const isInRange = this.isInRange(date);
-            const isInRangePreview = this.isInRangePreview(date);
-            const isPreviewStartOrEnd = !eitherEnd && eitherStart && this.hoverDate && date === this.hoverDate;
-            const isPreviewStart = isPreviewStartOrEnd && this.hoverDate < eitherStart;
-            const isPreviewEnd = isPreviewStartOrEnd && this.hoverDate > eitherStart;
-            const isFocused = date === this.focusDate;
+            let selected = isStartDate ? "true" : "false";
             const classesArr = ["date-cell"];
+            const isFocused = date === this.focusDate;
+            const isToday = date === this.today;
             if (isToday)
                 classesArr.push("today");
-            if (isFirstOfMonth)
-                classesArr.push("first-of-month");
-            if (isLastOfMonth)
-                classesArr.push("last-of-month");
-            if (isStartDate) {
-                if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
-                    // invert the arrow direction if user mouses over a prior date
-                    classesArr.push("range-end");
-                }
-                else {
-                    classesArr.push("range-start");
+            if (this.calType === "range") {
+                const isEndDate = eitherStart && this.endDate && this.endDate === date && eitherStart < this.endDate;
+                selected = isEndDate ? "true" : selected;
+                const isFirstOfMonth = dayOfDate === 1;
+                const isLastOfMonth = dayOfDate === getMonthLength(monthOfDate, yearOfDate);
+                const isInRange = this.isInRange(date);
+                const isInRangePreview = this.isInRangePreview(date);
+                const isPreviewStartOrEnd = !eitherEnd && eitherStart && this.hoverDate && date === this.hoverDate;
+                const isPreviewStart = isPreviewStartOrEnd && this.hoverDate < eitherStart;
+                const isPreviewEnd = isPreviewStartOrEnd && this.hoverDate > eitherStart;
+                if (isFirstOfMonth)
+                    classesArr.push("first-of-month");
+                if (isLastOfMonth)
+                    classesArr.push("last-of-month");
+                if (isStartDate) {
+                    if (isInRangePreview && !isEndDate && this.hoverDate && this.hoverDate < this.startDate) {
+                        // invert the arrow direction if user mouses over a prior date
+                        classesArr.push("range-end");
+                    }
+                    else {
+                        classesArr.push("range-start");
+                    }
                 }
+                if (isEndDate)
+                    classesArr.push("range-end");
+                if (isInRange)
+                    classesArr.push("in-range");
+                if (isInRangePreview)
+                    classesArr.push("in-range preview");
+                if (isPreviewStart)
+                    classesArr.push("preview-start");
+                if (isPreviewEnd)
+                    classesArr.push("preview-end");
             }
-            if (isEndDate)
-                classesArr.push("range-end");
-            if (isInRange)
-                classesArr.push("in-range");
-            if (isInRangePreview)
-                classesArr.push("in-range preview");
-            if (isPreviewStart)
-                classesArr.push("preview-start");
-            if (isPreviewEnd)
-                classesArr.push("preview-end");
             const classes = classesArr.join(" ");
-            return (h("div", { role: "gridcell", id: `cell-${date}`, class: classes, "aria-selected": isStartDate || isEndDate ? "true" : "false", "aria-label": `${isToday
+            return (h("div", { role: "gridcell", id: `cell-${date}`, class: classes, "aria-selected": selected, "aria-label": `${isToday
                     ? `${intl.formatMessage({
                         id: "date.today",
                         defaultMessage: "today",
@@ -160,18 +170,18 @@ export class PrivCalendar {
         this.endDate = undefined;
         this.hoverDate = undefined;
     }
-    get calName() {
-        const bothCals = this.el.parentElement.querySelectorAll("priv-calendar");
+    setCalName() {
+        const cals = this.el.parentElement.querySelectorAll("priv-calendar");
         let calname;
         // if the parent el only contains one calendar
-        if (bothCals.length === 1) {
+        if (cals.length === 1) {
             calname = intl.formatMessage({
                 id: "date.calName",
                 defaultMessage: "Calendar. ",
             });
             // if this calendar is the first of the two
         }
-        else if (bothCals[0] === this.el) {
+        else if (cals[0] === this.el) {
             calname = intl.formatMessage({
                 id: "date.firstCalName",
                 defaultMessage: "First calendar. ",
@@ -183,7 +193,16 @@ export class PrivCalendar {
                 defaultMessage: "Second calendar. ",
             });
         }
-        return calname;
+        this.calName = calname;
+    }
+    setCalType() {
+        const cals = this.el.parentElement.querySelectorAll("priv-calendar");
+        // if the parent el only contains one calendar
+        this.calType = cals.length === 1 ? "single" : "range";
+    }
+    componentWillLoad() {
+        this.setCalName();
+        this.setCalType();
     }
     handleFocusDate(newVal, oldVal) {
         if (this.view === "day") {
@@ -359,21 +378,21 @@ export class PrivCalendar {
                 return false;
             if (_startDate && this.hoverDate) {
                 // if only startDate exists, the hovered date functions as the other end of the range
-                if (_startDate < this.hoverDate) {
+                if (this.hoverDate > _startDate) {
                     return _startDate <= date && date <= this.hoverDate;
                 }
-                else {
+                else if (this.hoverDate < _startDate) {
                     // user is mousing over a date prior to the start date
                     // start date considered as end of range
                     return this.hoverDate <= date && date <= _startDate;
-                }
+                } // if neither < or > then it's the same date and should return false
             }
             else if (_endDate && this.hoverDate) {
                 // if only endDate exists, the hovered date functions as the other end of the range
                 if (this.hoverDate < _endDate) {
                     return this.hoverDate <= date && date <= _endDate;
                 }
-                else {
+                else if (this.hoverDate > _endDate) {
                     // user is mousing over a date later than the end date
                     // end date considered as beggining of range
                     return _endDate <= date && date <= this.hoverDate;
@@ -521,14 +540,11 @@ export class PrivCalendar {
             }), class: "header-btn arw-btn" }, h("span", { class: "mdi" }, "\uF142"))), h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { onMouseOut: (ev) => {
+        return (h(Host, { key: 'e1269b7069d6b870cd9e873a046b24ddff6ac6cb', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { id: "application", class: "sr-only" }, this.calName, intl.formatMessage({
-            id: "date.instructions",
-            defaultMessage: "Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.",
-        }))));
+            }, role: "application", "aria-describedby": "application" }, this.view === "day" ? this.renderDayView() : this.renderMonthView(), h("div", { key: '3cf3a1b225b865ae1f02367ac318fb29b70a3acd', id: "application", class: "sr-only" }, this.calName, this.calInstructions)));
     }
     static get is() { return "priv-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/datepickers/wm-date-range.js

@@ -1,8 +1,9 @@
-import { h, Host } from "@stencil/core";
-import { intl, dateFind, toBool, handleDisabledAttribute, hasRoomRight, dateToISO, shouldOpenUp, calendar_months, } from "../../global/functions";
+import { h, Host, Fragment, } from "@stencil/core";
+import { intl, dateFind, toBool, handleDisabledAttribute, getContextMeasurements, findParentWithHiddenOverflow, dateToISO, shouldOpenUp, calendar_months, } from "../../global/functions";
 export class DateRange {
     constructor() {
         this.openUp = false;
+        this.calWidth = 673;
         this.popupClicked = false;
         this.toggleButtonClicked = false;
         this.formats = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
@@ -11,12 +12,13 @@ export class DateRange {
         this.errorMessage = undefined;
         this.invalidStart = false;
         this.invalidEnd = false;
-        this.label = "";
-        this.labelPosition = "top";
+        this.labelStart = "";
+        this.labelEnd = "";
         this.preselected = undefined;
         this.requiredField = false;
         this.valueStart = "";
         this.valueEnd = "";
+        this.availSpace = 0;
         this.isExpanded = false;
     }
     get _disabled() {
@@ -134,15 +136,21 @@ export class DateRange {
     }
     openPopup() {
         // display stuff
-        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
-        if (hasRoomRight(this.el, 336)) {
+        this.openUp = shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelEl.clientHeight);
+        const { spaceLeft, spaceRight } = getContextMeasurements(this.el);
+        if (spaceRight >= this.popupEl.clientWidth - this.el.clientWidth) {
             this.popupEl.style.left = "0";
             this.popupEl.style.right = "auto";
         }
-        else {
+        else if (spaceLeft >= this.popupEl.clientWidth - this.el.clientWidth) {
             this.popupEl.style.right = "0";
             this.popupEl.style.left = "auto";
         }
+        else {
+            const offset = (this.availSpace - this.calWidth) / 2 - spaceLeft;
+            this.popupEl.style.left = `${offset}px`;
+            this.popupEl.style.right = "auto";
+        }
         this.popupEl.style.visibility = "visible";
         window.requestAnimationFrame(() => {
             this.popupEl.classList.add("open");
@@ -392,11 +400,22 @@ export class DateRange {
             return day > 0 && day <= monthLength[month - 1];
         }
     }
+    setAvailSpace() {
+        this.availSpace = (this.hiddenOverflowParent || document.body).clientWidth;
+    }
     componentWillLoad() {
-        if (this.label === "") {
-            console.error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
+        if (this.labelStart === "" || this.labelEnd === "") {
+            console.error("For accessibility reasons you must specify labels for the date range inputs.");
         }
         handleDisabledAttribute(this.el, this._disabled);
+        this.hiddenOverflowParent = findParentWithHiddenOverflow(this.el);
+        if (this.hiddenOverflowParent) {
+            const resizeObserver = new ResizeObserver(() => {
+                this.availSpace = this.hiddenOverflowParent.clientWidth;
+            });
+            resizeObserver.observe(this.hiddenOverflowParent);
+        }
+        this.setAvailSpace();
     }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
@@ -405,20 +424,25 @@ export class DateRange {
         }
         this.liveRegionEl.textContent = message;
     }
+    renderCalendars() {
+        if (this.calWidth <= this.availSpace) {
+            return (h(Fragment, null, h("div", { class: `popup-wrapper ${this.startCalEl && this.startCalEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), style: { display: "flex" } }, h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.startCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { ref: (el) => (this.endCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))));
+        }
+    }
     render() {
-        return (h(Host, { "aria-busy": "false" }, h("div", { ref: (d) => (this.wrapperEl = d), class: `wrapper label-${this.labelPosition}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "dateRangeLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "range-wrapper" }, h("input", { disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), "\u00A0-\u00A0", h("input", { disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
+        return (h(Host, { key: '3029fd07d8d0db78965fc09e6948170446b2b7ef', "aria-busy": "false" }, h("div", { key: '7d1d4ae772a40fe93751d97ffc27f915871088ee', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, h("div", { key: '6e9af16b3828e73106d3308f2e6d6b8eac465003', class: `range-wrapper ${this.calWidth <= this.availSpace ? "cal" : ""}` }, h("div", { key: '4bc7f4cd69203a85fc2a571b6ac1a876ab616e57', class: "label-wrapper", id: "start-label-wrapper" }, h("label", { key: 'd31245f3cf3a4201f256f038e6ab7b2da2e2d1bf', ref: (e) => (this.labelEl = e), id: "startlabel", htmlFor: "start-date-input", class: "label", title: `${this.labelStart} (${this.dateFormat})` }, this.labelStart, this.requiredField && (h("span", { key: '238a8a8e9d941337d6d70a06b8ebda10eef2151e', "aria-hidden": "true", class: "required" }, "*")))), h("div", { key: '33fc696ffb32b9998071a31f675f32850eb95f64', class: "label-wrapper", id: "end-label-wrapper" }, h("label", { key: '6ecf380855ba33ba5dbfb3a8314e00cde2e88213', id: "endlabel", htmlFor: "end-date-input", class: "label", title: `${this.labelEnd} (${this.dateFormat})` }, this.labelEnd, this.requiredField && (h("span", { key: '21092080beefb1dba4cc5bd5d7beda5ab09345c2', "aria-hidden": "true", class: "required" }, "*")))), h("input", { key: '3bec94e356b2df9964f18c63d5ffc8e2605f0fb4', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'eedf6637a367a9061fe118669d3837710210e224', id: "hyphen" }, "\u00A0-\u00A0"), h("input", { key: '825273cd7267f2b1e65c77033f6e1e0247839348', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'aa64030e2c73c4008f95682f57afaac514230818', class: "toggle-wrapper", id: "toggle-wrapper" }, this.calWidth <= this.availSpace && (h("button", { key: 'ea5697c01c48dfe5f04a64410d29ee97da6f5100', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'd7025653af3c9f06173ce0cade3ee4b6750e0fc8', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { class: `popup-wrapper ${this.startCalEl && this.startCalEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), style: { display: "flex" } }, h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.startCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("priv-calendar", { ref: (el) => (this.endCalEl = el), onClick: () => (this.popupClicked = true), onDateFocus: (ev) => this.handleDateFocus(ev) }), h("div", { class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })))), this.renderCalendars()), h("div", { key: '726317359bc8126913ecd328bfa4b4aeb5ae7a3e' }, h("div", { key: '49f564c8416034d568f71b5b46cb39fc0cb805ad', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: 'a9a4f88a5d276ed5fae916353f772275351f893e', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '3cbbdddbc3260c14e9fb2688b351f9af9318cc14', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        }))), h("div", { key: '2e4e09a62616dc611b744a412a0fe3a04e67e8f8', id: "error", class: "error" }, this.errorMessage), h("div", { key: '77d200c672686371c2e5fe082857d1721bebe3aa', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
     }
     static get is() { return "wm-date-range"; }
     static get encapsulation() { return "shadow"; }
@@ -524,7 +548,7 @@ export class DateRange {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "label": {
+            "labelStart": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -538,16 +562,16 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "attribute": "label-start",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "labelPosition": {
+            "labelEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"top\" | \"left\" | \"none\"",
-                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -556,9 +580,9 @@ export class DateRange {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "attribute": "label-end",
                 "reflect": false,
-                "defaultValue": "\"top\""
+                "defaultValue": "\"\""
             },
             "preselected": {
                 "type": "string",
@@ -635,6 +659,7 @@ export class DateRange {
     }
     static get states() {
         return {
+            "availSpace": {},
             "isExpanded": {}
         };
     }
@@ -692,14 +717,17 @@ export class DateRange {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -718,8 +746,9 @@ export class DateRange {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -795,6 +824,12 @@ export class DateRange {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "resize",
+                "method": "setAvailSpace",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }