@lion/ui 0.3.2 → 0.3.4

package/components/calendar/src/LionCalendar.js

@@ -15,6 +15,7 @@ import { dayTemplate } from './utils/dayTemplate.js';
 import { getFirstDayNextMonth } from './utils/getFirstDayNextMonth.js';
 import { getLastDayPreviousMonth } from './utils/getLastDayPreviousMonth.js';
 import { isSameDate } from './utils/isSameDate.js';
+import { getDayMonthYear } from './utils/getDayMonthYear.js';
 
 /**
  * @typedef {import('../types/day.js').Day} Day
@@ -22,6 +23,17 @@ import { isSameDate } from './utils/isSameDate.js';
  * @typedef {import('../types/day.js').Month} Month
  */
 
+const isDayButton = /** @param {HTMLElement} el */ el =>
+  el.classList.contains('calendar__day-button');
+
+/**
+ * @param {HTMLElement} el
+ * @returns {boolean}
+ */
+function isDisabledDayButton(el) {
+  return el.getAttribute('aria-disabled') === 'true';
+}
+
 /**
  * @customElement lion-calendar
  */
@@ -213,19 +225,19 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   goToNextMonth() {
-    this.__modifyDate(1, { dateType: 'centralDate', type: 'Month', mode: 'both' });
+    this.__modifyDate(1, { dateType: 'centralDate', type: 'Month' });
   }
 
   goToPreviousMonth() {
-    this.__modifyDate(-1, { dateType: 'centralDate', type: 'Month', mode: 'both' });
+    this.__modifyDate(-1, { dateType: 'centralDate', type: 'Month' });
   }
 
   goToNextYear() {
-    this.__modifyDate(1, { dateType: 'centralDate', type: 'FullYear', mode: 'both' });
+    this.__modifyDate(1, { dateType: 'centralDate', type: 'FullYear' });
   }
 
   goToPreviousYear() {
-    this.__modifyDate(-1, { dateType: 'centralDate', type: 'FullYear', mode: 'both' });
+    this.__modifyDate(-1, { dateType: 'centralDate', type: 'FullYear' });
   }
 
   /**
@@ -238,9 +250,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   focusCentralDate() {
-    const button = /** @type {HTMLElement} */ (
-      this.shadowRoot?.querySelector('button[tabindex="0"]')
-    );
+    const button = /** @type {HTMLElement} */ (this.shadowRoot?.querySelector('[tabindex="0"]'));
     button.focus();
     this.__focusedDate = this.centralDate;
   }
@@ -328,13 +338,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       return;
     }
 
-    const map = {
-      disableDates: () => this.__disableDatesChanged(),
-      centralDate: () => this.__centralDateChanged(),
-      __focusedDate: () => this.__focusedDateChanged(),
-    };
-    if (map[name]) {
-      map[name]();
+    if (name === '__focusedDate') {
+      this.__focusedDateChanged();
     }
 
     const updateDataOn = ['centralDate', 'minDate', 'maxDate', 'selectedDate', 'disableDates'];
@@ -362,10 +367,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    */
   __calculateInitialCentralDate() {
     if (this.centralDate === this.__today && this.selectedDate) {
-      // initialised with selectedDate only if user didn't provide another one
+      // initialized with selectedDate only if user didn't provide another one
       this.centralDate = this.selectedDate;
-    } else {
-      this.__ensureValidCentralDate();
     }
     /** @type {Date} */
     this.__initialCentralDate = this.centralDate;
@@ -581,6 +584,35 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     return `${this.msgLit(`lion-calendar:${mode}${type}`)}, ${month} ${year}`;
   }
 
+  /**
+   *
+   * @private
+   */
+  __getSelectableDateRange() {
+    const newMinDate = createDay(new Date(this.minDate));
+    const newMaxDate = createDay(new Date(this.maxDate));
+
+    const getSelectableDate = (/** @type {import("../types/day.js").Day} */ date) => {
+      const { dayNumber, monthName, year } = getDayMonthYear(
+        date,
+        getWeekdayNames({
+          locale: this.__getLocale(),
+          style: 'long',
+          firstDayOfWeek: this.firstDayOfWeek,
+        }),
+      );
+      return `${dayNumber} ${monthName} ${year}`;
+    };
+
+    const earliestSelectableDate = getSelectableDate(newMinDate);
+    const latestSelectableDate = getSelectableDate(newMaxDate);
+
+    return {
+      earliestSelectableDate,
+      latestSelectableDate,
+    };
+  }
+
   /**
    *
    * @param {Day} _day
@@ -605,13 +637,27 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.tabindex = day.central ? '0' : '-1';
     day.ariaPressed = day.selected ? 'true' : 'false';
     day.ariaCurrent = day.today ? 'date' : undefined;
+    day.disabledInfo = '';
 
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
+      // TODO: turn this into a translated string
+      day.disabledInfo = `This date is unavailable. Earliest date to select is ${
+        this.__getSelectableDateRange().earliestSelectableDate
+      }. Please select another date.`;
     }
 
     if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
+      // TODO: turn this into a translated string
+      day.disabledInfo = `This date is unavailable. Latest date to select is ${
+        this.__getSelectableDateRange().latestSelectableDate
+      }. Please select another date.`;
+    }
+
+    if (day.disabled) {
+      // TODO: turn this into a translated string
+      day.disabledInfo = `This date is unavailable. Please select another date`;
     }
 
     return this.dayPreprocessor(day);
@@ -641,15 +687,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     return data;
   }
 
-  /**
-   * @private
-   */
-  __disableDatesChanged() {
-    if (this.__connectedCallbackDone) {
-      this.__ensureValidCentralDate();
-    }
-  }
-
   /**
    * @param {Date} selectedDate
    * @private
@@ -669,28 +706,37 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   /**
    * @private
    */
-  __centralDateChanged() {
-    if (this.__connectedCallbackDone) {
-      this.__ensureValidCentralDate();
+  __focusedDateChanged() {
+    if (this.__focusedDate) {
+      this.centralDate = this.__focusedDate;
     }
   }
 
   /**
-   * @private
+   * @param {Date} [date]
+   * @returns
    */
-  __focusedDateChanged() {
-    if (this.__focusedDate) {
-      this.centralDate = this.__focusedDate;
-    }
+  findNextEnabledDate(date) {
+    const _date = date || this.centralDate;
+    return this.__findBestEnabledDateFor(_date, { mode: 'future' });
   }
 
   /**
-   * @private
+   * @param {Date} [date]
+   * @returns
    */
-  __ensureValidCentralDate() {
-    if (!this.__isEnabledDate(this.centralDate)) {
-      this.centralDate = this.__findBestEnabledDateFor(this.centralDate);
-    }
+  findPreviousEnabledDate(date) {
+    const _date = date || this.centralDate;
+    return this.__findBestEnabledDateFor(_date, { mode: 'past' });
+  }
+
+  /**
+   * @param {Date} [date]
+   * @returns
+   */
+  findNearestEnabledDate(date) {
+    const _date = date || this.centralDate;
+    return this.__findBestEnabledDateFor(_date, { mode: 'both' });
   }
 
   /**
@@ -750,11 +796,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __clickDateDelegation(ev) {
-    const isDayButton = /** @param {HTMLElement} el */ el =>
-      el.classList.contains('calendar__day-button');
-
-    const el = /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]);
-    if (isDayButton(el)) {
+    const el = /** @type {HTMLElement & { date: Date }} */ (ev.target);
+    if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
   }
@@ -763,9 +806,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __focusDateDelegation() {
-    const isDayButton = /** @param {HTMLElement} el */ el =>
-      el.classList.contains('calendar__day-button');
-
     if (
       !this.__focusedDate &&
       isDayButton(/** @type {HTMLElement} el */ (this.shadowRoot?.activeElement))
@@ -780,9 +820,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __blurDateDelegation() {
-    const isDayButton = /** @param {HTMLElement} el */ el =>
-      el.classList.contains('calendar__day-button');
-
     setTimeout(() => {
       if (
         this.shadowRoot?.activeElement &&
@@ -793,42 +830,65 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }, 1);
   }
 
+  /**
+   * @param {HTMLElement & { date: Date }} el
+   * @private
+   */
+  __dayButtonSelection(el) {
+    if (isDayButton(el)) {
+      this.__dateSelectedByUser(el.date);
+    }
+  }
+
   /**
    * @param {KeyboardEvent} ev
    * @private
    */
   __keyboardNavigationEvent(ev) {
-    const preventedKeys = ['ArrowUp', 'ArrowDown', 'PageDown', 'PageUp'];
+    const preventedKeys = [
+      'ArrowLeft',
+      'ArrowUp',
+      'ArrowRight',
+      'ArrowDown',
+      'PageDown',
+      'PageUp',
+      ' ',
+      'Enter',
+    ];
 
     if (preventedKeys.includes(ev.key)) {
       ev.preventDefault();
     }
 
     switch (ev.key) {
+      case ' ':
+      case 'Enter':
+        this.__dayButtonSelection(/** @type {HTMLElement & { date: Date }} */ (ev.target));
+        break;
       case 'ArrowUp':
-        this.__modifyDate(-7, { dateType: '__focusedDate', type: 'Date', mode: 'past' });
+        this.__modifyDate(-7, { dateType: '__focusedDate', type: 'Date' });
         break;
       case 'ArrowDown':
-        this.__modifyDate(7, { dateType: '__focusedDate', type: 'Date', mode: 'future' });
+        this.__modifyDate(7, { dateType: '__focusedDate', type: 'Date' });
         break;
       case 'ArrowLeft':
-        this.__modifyDate(-1, { dateType: '__focusedDate', type: 'Date', mode: 'past' });
+        this.__modifyDate(-1, { dateType: '__focusedDate', type: 'Date' });
         break;
       case 'ArrowRight':
-        this.__modifyDate(1, { dateType: '__focusedDate', type: 'Date', mode: 'future' });
+        this.__modifyDate(1, { dateType: '__focusedDate', type: 'Date' });
         break;
       case 'PageDown':
         if (ev.altKey === true) {
-          this.__modifyDate(1, { dateType: '__focusedDate', type: 'FullYear', mode: 'future' });
+          this.__modifyDate(1, { dateType: '__focusedDate', type: 'FullYear' });
         } else {
-          this.__modifyDate(1, { dateType: '__focusedDate', type: 'Month', mode: 'future' });
+          this.__modifyDate(1, { dateType: '__focusedDate', type: 'Month' });
         }
         break;
       case 'PageUp':
         if (ev.altKey === true) {
-          this.__modifyDate(-1, { dateType: '__focusedDate', type: 'FullYear', mode: 'past' });
+          this.__modifyDate(-1, { dateType: '__focusedDate', type: 'FullYear' });
         } else {
-          this.__modifyDate(-1, { dateType: '__focusedDate', type: 'Month', mode: 'past' });
+          this.__modifyDate(-1, { dateType: '__focusedDate', type: 'Month' });
         }
         break;
       case 'Tab':
@@ -844,11 +904,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @param {Object} opts
    * @param {string} opts.dateType
    * @param {string} opts.type
-   * @param {string} opts.mode
    * @private
    */
-  __modifyDate(modify, { dateType, type, mode }) {
-    let tmpDate = new Date(this.centralDate);
+  __modifyDate(modify, { dateType, type }) {
+    const tmpDate = new Date(this.centralDate);
     // if we're not working with days, reset
     // day count to first day of the month
     if (type !== 'Date') {
@@ -861,9 +920,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
-    if (!this.__isEnabledDate(tmpDate)) {
-      tmpDate = this.__findBestEnabledDateFor(tmpDate, { mode });
-    }
     this[dateType] = tmpDate;
   }
 

package/components/calendar/src/calendarStyle.js

@@ -54,6 +54,16 @@ export const calendarStyle = css`
     padding: 0;
     min-width: 40px;
     min-height: 40px;
+    /** give div[role=button][aria-disabled] same display type as native btn */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .calendar__day-button:focus {
+    border: 1px solid blue;
+    outline: none;
   }
 
   .calendar__day-button__text {
@@ -77,9 +87,23 @@ export const calendarStyle = css`
     border: 1px solid green;
   }
 
-  .calendar__day-button[disabled] {
+  .calendar__day-button[aria-disabled='true'] {
     background-color: #fff;
     color: #eee;
     outline: none;
   }
+
+  .u-sr-only {
+    position: absolute;
+    top: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
 `;

package/components/calendar/src/utils/createDay.js

@@ -16,6 +16,7 @@ export function createDay(
     today = false,
     future = false,
     disabled = false,
+    disabledInfo = '',
   } = {},
 ) {
   return {
@@ -34,5 +35,6 @@ export function createDay(
     tabindex: '-1',
     ariaPressed: 'false',
     ariaCurrent: undefined,
+    disabledInfo,
   };
 }

package/components/calendar/src/utils/dayTemplate.js

@@ -1,20 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { defaultMonthLabels, getDayMonthYear } from './getDayMonthYear.js';
 
-const defaultMonthLabels = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
 const firstWeekDays = [1, 2, 3, 4, 5, 6, 7];
 const lastDaysOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
@@ -24,10 +11,15 @@ const lastDaysOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  * @param {{ weekdays: string[], monthsLabels?: string[] }} opts
  */
 export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }) {
-  const dayNumber = day.date.getDate();
-  const monthName = monthsLabels[day.date.getMonth()];
-  const year = day.date.getFullYear();
-  const weekdayName = day.weekOrder ? weekdays[day.weekOrder] : weekdays[0];
+  const { dayNumber, monthName, year, weekdayName } = getDayMonthYear(day, weekdays, monthsLabels);
+
+  function __getFullDate() {
+    return `${monthName} ${year} ${weekdayName}`;
+  }
+
+  function __getAccessibleMessage() {
+    return `${day.disabledInfo}`;
+  }
 
   const firstDay = dayNumber === 1;
   const endOfFirstWeek = day.weekOrder === 6 && firstWeekDays.includes(dayNumber);
@@ -57,20 +49,14 @@ export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }
       ?start-of-last-week=${startOfLastWeek}
       ?last-day=${lastDay}
     >
-      <button
+      <div
+        role="button"
         .date=${day.date}
         class="calendar__day-button"
-        tabindex=${ifDefined(Number(day.tabindex))}
-        aria-label=${`${dayNumber} ${monthName} ${year} ${weekdayName}`}
-        aria-pressed=${
-          /** @type {'true'|'false'|'mixed'|'undefined'} */ (ifDefined(day.ariaPressed))
-        }
-        aria-current=${
-          /** @type {'page'|'step'|'location'|'date'|'time'|'true'|'false'} */ (
-            ifDefined(day.ariaCurrent)
-          )
-        }
-        ?disabled=${day.disabled}
+        tabindex=${ifDefined(day.tabindex)}
+        aria-pressed=${ifDefined(day.ariaPressed)}
+        aria-current=${ifDefined(day.ariaCurrent)}
+        aria-disabled=${day.disabled ? 'true' : 'false'}
         ?selected=${day.selected}
         ?past=${day.past}
         ?today=${day.today}
@@ -79,8 +65,9 @@ export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }
         ?current-month=${day.currentMonth}
         ?next-month=${day.nextMonth}
       >
-        <span class="calendar__day-button__text"> ${day.date.getDate()} </span>
-      </button>
+        <span class="calendar__day-button__text">${dayNumber}</span>
+        <span class="u-sr-only">${__getFullDate()} ${__getAccessibleMessage()}</span>
+      </div>
     </td>
   `;
 }

package/components/calendar/src/utils/getDayMonthYear.js

@@ -0,0 +1,28 @@
+export const defaultMonthLabels = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/**
+ * @param {import('../../types/day.js').Day} day
+ * @param {string[]} weekdays
+ * @param {string[] } monthsLabels
+ */
+export function getDayMonthYear(day, weekdays, monthsLabels = defaultMonthLabels) {
+  const dayNumber = day.date.getDate();
+  const monthName = monthsLabels[day.date.getMonth()];
+  const year = day.date.getFullYear();
+  const weekdayName = day.weekOrder ? weekdays[day.weekOrder] : weekdays[0];
+
+  return { dayNumber, monthName, year, weekdayName };
+}