@m3e/web 2.5.12 → 2.5.13

package/dist/calendar.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
-import { css, LitElement, html, nothing, unsafeCSS } from 'lit';
+import { css, LitElement, nothing, html, unsafeCSS } from 'lit';
 import { query, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -94,6 +94,8 @@ const MONTHS_PER_ROW = 4;
 class CalendarViewElementBase extends LitElement {
   constructor() {
     super(...arguments);
+    /** Whether the view is active. */
+    this.active = false;
     /** Today's date. */
     this.today = new Date();
     /** The selected date. */
@@ -134,6 +136,9 @@ class CalendarViewElementBase extends LitElement {
 /** The styles of the element. */
 CalendarViewElementBase.styles = css`:host { display: inline-block; user-select: none; vertical-align: top; } .visually-hidden { position: absolute; appearance: none; visibility: hidden; border: none; outline: none; overflow: hidden; left: 0; height: 1px; width: 1px; margin: -1px; padding: 0; white-space: nowrap; } table { border-collapse: collapse; border-spacing: 0; width: calc(3rem * 7); } td, th { font: inherit; text-align: center; padding: unset; } td { box-sizing: border-box; height: 3rem; padding: 0.25rem; position: relative; color: var(--m3e-calendar-item-color, ${DesignToken.color.onSurface}); } .item, .item > span { position: relative; } .item { display: flex; align-items: center; justify-content: center; border-radius: inherit; outline: none; width: 100%; height: 100%; border-radius: ${DesignToken.shape.corner.full}; } .item:not([aria-disabled]) { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } td:not(:has(.item[aria-disabled])).selected { color: var(--m3e-calendar-item-selected-color, ${DesignToken.color.onPrimary}); --m3e-ripple-color: var(--m3e-calendar-item-selected-ripple-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-hover-color: var(--m3e-calendar-item-selected-hover-color, ${DesignToken.color.onPrimary}); --m3e-state-layer-focus-color: var(--m3e-calendar-item-selected-focus-color, ${DesignToken.color.onPrimary}); } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: var(--m3e-calendar-item-selected-container-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { outline-style: solid; outline-offset: -1px; outline-width: var(--m3e-calendar-item-current-outline-thickness, 1px); outline-color: var(--m3e-calendar-item-current-outline-color, ${DesignToken.color.primary}); } td:has(.item[aria-disabled]) { color: color-mix( in srgb, var(--m3e-calendar-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-calendar-item-disabled-color-opacity, 38%), transparent ); } @media (forced-colors: active) { td:not(:has(.item[aria-disabled])).selected { forced-color-adjust: none; color: ButtonFace; } td:not(:has(.item[aria-disabled])).selected .state-layer { background-color: ButtonText; } td:has(.item[aria-disabled]) { color: GrayText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) { color: ButtonText; } td.current:not(.selected):not(.special):not(.range-start):not(.range-end) .state-layer { border-color: ButtonText; } }`;
 __decorate([query(".active > .item")], CalendarViewElementBase.prototype, "_activeItem", void 0);
+__decorate([property({
+  type: Boolean
+})], CalendarViewElementBase.prototype, "active", void 0);
 __decorate([property({
   converter: dateConverter
 })], CalendarViewElementBase.prototype, "today", void 0);
@@ -218,7 +223,7 @@ let M3eMonthViewElement = class M3eMonthViewElement extends CalendarViewElementB
       dayOfWeek = (dayOfWeek + 1) % 7;
     }
     weeks = weeks.filter(x => !!x.length);
-    return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div><m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip></th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
+    return html`<table role="grid"><thead><tr>${weekdays.map(x => html`<th scope="col"><span class="visually-hidden">${x.long}</span><div id="weekday-${x.id}-month-${month}" aria-hidden="true">${x.narrow}</div>${this.active ? html`<m3e-tooltip for="weekday-${x.id}-month-${month}">${x.long}</m3e-tooltip>` : nothing}</th>`)}</tr></thead><tbody>${weeks.map((row, i) => html`<tr role="row">${i === 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing} ${row.map(y => __classPrivateFieldGet(this, _M3eMonthViewElement_instances, "m", _M3eMonthViewElement_renderItem).call(this, new Date(year, month, y)))} ${i > 0 && row.length < 7 ? html`<td colspan="${7 - row.length}"></td>` : nothing}</tr>`)}</tbody></table>`;
   }
 };
 _M3eMonthViewElement_instances = new WeakSet();
@@ -253,6 +258,18 @@ _M3eMonthViewElement_renderItem = function _M3eMonthViewElement_renderItem(value
       }
     }
   }
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active,
+      special,
+      range,
+      "range-start": rangeStart,
+      "range-start-range": rangeStartRange,
+      "range-end": rangeEnd
+    })}"><div id="${id}" role="button" class="item" data-value="${value.toISOString()}" tabindex="${active ? "0" : "-1"}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected || rangeStart || rangeEnd}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span aria-hidden="true">${value.getDate()}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -418,6 +435,13 @@ _M3eMultiYearViewElement_renderItem = function _M3eMultiYearViewElement_renderIt
   const current = this.today.getFullYear() === year;
   const disabled = this.minDate && year < this.minDate.getFullYear() || this.maxDate && year > this.maxDate.getFullYear();
   const id = `year-${year}`;
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active
+    })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${year}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span>${yearFormat.format(new Date(year, 0, 1))}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -530,6 +554,13 @@ _M3eYearViewElement_renderItem = function _M3eYearViewElement_renderItem(month)
   const current = this.today.getFullYear() === month.date.getFullYear() && this.today.getMonth() === month.date.getMonth();
   const disabled = this.minDate && (month.date.getFullYear() < this.minDate.getFullYear() || month.date.getFullYear() === this.minDate.getFullYear() && month.date.getMonth() < this.minDate.getMonth()) || this.maxDate && (month.date.getFullYear() > this.maxDate.getFullYear() || month.date.getFullYear() === this.maxDate.getFullYear() && month.date.getMonth() > this.maxDate.getMonth());
   const id = `month-${month.date.getMonth()}`;
+  if (!this.active) {
+    return html`<td role="gridcell" class="${classMap({
+      current,
+      selected,
+      active
+    })}"><div id="${id}" class="item" role="button" tabindex="${active ? "0" : "-1"}" data-value="${month.date.toISOString()}" aria-disabled="${ifDefined(disabled || undefined)}" aria-current="${ifDefined(current ? "date" : undefined)}" aria-pressed="${selected}"><m3e-state-layer class="state-layer" disabled="disabled" disable-hover></m3e-state-layer><span aria-hidden="true">${month.narrow}</span></div></td>`;
+  }
   return html`<td role="gridcell" class="${classMap({
     current,
     selected,
@@ -817,6 +848,10 @@ let M3eCalendarElement = class M3eCalendarElement extends LitElement {
   updateTodayDate() {
     this._today = new Date();
   }
+  /** Resets the active view. */
+  resetActiveView() {
+    this._activeView = this.startView;
+  }
   /**
    * Moves the calendar to the previous period.
    * @returns {Promise<void>} A promise that resolves when the operation is complete.
@@ -914,7 +949,7 @@ let M3eCalendarElement = class M3eCalendarElement extends LitElement {
       }
     }
     if (changedProperties.has("startView")) {
-      this._activeView = this.startView;
+      this.resetActiveView();
     }
   }
   /** @inheritdoc */
@@ -942,26 +977,27 @@ _M3eCalendarElement_renderHeader = function _M3eCalendarElement_renderHeader() {
   })}" slot="trailing-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></m3e-button><div class="spacer"></div><m3e-icon-button ?disabled="${!this.canMovePreviousPeriod}" @click="${this.movePreviousPeriod}" aria-label="${this._activeView === "month" ? this.previousMonthLabel : this._activeView === "year" ? this.previousYearLabel : this.previousMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`}</m3e-icon-button><m3e-icon-button ?disabled="${!this.canMoveNextPeriod}" @click="${this.moveNextPeriod}" aria-label="${this._activeView === "month" ? this.nextMonthLabel : this._activeView === "year" ? this.nextYearLabel : this.nextMultiYearLabel}">${M3eDirectionality.current === "ltr" ? html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>` : html`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`}</m3e-icon-button></div>`;
 };
 _M3eCalendarElement_renderView = function _M3eCalendarElement_renderView(view, offset) {
+  const active = view === this._activeView && offset === 0;
   const activeDate = offset < 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getPreviousPeriod).call(this, view) : offset > 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_getNextPeriod).call(this, view) : new Date(this._activeDate);
   switch (view) {
     case "month":
       return html`<m3e-month-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" range-start="${ifDefined(this.rangeStart?.toISOString())}" range-end="${ifDefined(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" range-start="${ifDefined(this.rangeStart?.toISOString())}" range-end="${ifDefined(this.rangeEnd?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleDateChange) : undefined}"></m3e-month-view>`;
     case "year":
       return html`<m3e-year-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleMonthChange) : undefined}"></m3e-year-view>`;
     case "multi-year":
       return html`<m3e-multi-year-view class="view ${classMap({
         before: offset < 0,
         after: offset > 0,
-        active: view === this._activeView && offset === 0
-      })}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
+        active
+      })}" ?active="${active}" ?inert="${offset !== 0}" today="${this._today.toISOString()}" date="${ifDefined(this.date?.toISOString())}" active-date="${activeDate.toISOString()}" min-date="${ifDefined(this.minDate?.toISOString())}" max-date="${ifDefined(this.maxDate?.toISOString())}" @active-change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleActiveChange) : undefined}" @change="${offset === 0 ? __classPrivateFieldGet(this, _M3eCalendarElement_instances, "m", _M3eCalendarElement_handleYearChange) : undefined}"></m3e-multi-year-view>`;
   }
 };
 _M3eCalendarElement_handleDateChange = function _M3eCalendarElement_handleDateChange(e) {