@universal-material/web 3.7.2 → 3.9.0

package/calendar/calendar-base.js

@@ -4,38 +4,87 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './calendar-base.styles.js';
 import { DefaultCalendarAdapter } from './default-calendar-adapter.js';
-export class UmCalendarBase extends LitElement {
+export class CalendarBase extends LitElement {
     static { this.styles = [styles]; }
     get year() {
         return this._displayingMonthDate.getFullYear();
     }
     set year(year) {
-        this._displayingMonthDate.setFullYear(year);
-        this._displayingMonthDate = new Date(this._displayingMonthDate);
+        this._displayingMonthDate = new Date(year, this._displayingMonthDate.getMonth(), 1);
     }
     get month() {
         return this._displayingMonthDate.getMonth();
     }
     set month(month) {
-        this._displayingMonthDate.setMonth(month);
-        this._displayingMonthDate = new Date(this._displayingMonthDate);
+        this._displayingMonthDate = new Date(this._displayingMonthDate.getFullYear(), month, 1);
     }
     #currentDate;
     constructor() {
         super();
         this.weekDays = [];
+        this._firstDayOfWeek = 0;
         this.dateRenderer = null;
+        /**
+         * Whether to render dates from the previous and next months that
+         * fall inside the displayed weeks
+         */
         this.dateOutsideMonth = false;
+        /**
+         * Number of years displayed per page in the year picker view.
+         */
+        this.yearRange = 24;
         this.#currentDate = new Date();
+        this.view = 'day';
+        this._yearPageStart = 0;
+        /**
+         * The BCP 47 locale tag used to format month names and weekdays.
+         * When `null`, falls back to the browser's `navigator.language`.
+         */
         this.locale = null;
         this._innerLocale = navigator.language;
         this.adapter = new DefaultCalendarAdapter();
+        this.#toggleYearView = () => {
+            if (this.view === 'day') {
+                this._yearPageStart = this.#computeYearPageStart(this.year);
+                this.view = 'year';
+                return;
+            }
+            if (this.view === 'month') {
+                this._yearPageStart = this.#computeYearPageStart(this.year);
+                this.view = 'year';
+                return;
+            }
+            this.view = 'day';
+        };
+        this.#handlePrevClick = () => {
+            if (this.view === 'year') {
+                this._yearPageStart -= this.yearRange;
+                return;
+            }
+            if (this.view === 'month') {
+                this.year -= 1;
+                return;
+            }
+            this.#addMonth(-1);
+        };
+        this.#handleNextClick = () => {
+            if (this.view === 'year') {
+                this._yearPageStart += this.yearRange;
+                return;
+            }
+            if (this.view === 'month') {
+                this.year += 1;
+                return;
+            }
+            this.#addMonth(1);
+        };
         this.#currentDate.setHours(0);
         this.#currentDate.setMinutes(0);
         this.#currentDate.setSeconds(0);
         this.#currentDate.setMilliseconds(0);
         this._displayingMonthDate = new Date(this.#currentDate);
         this._displayingMonthDate.setDate(1);
+        this._yearPageStart = this.#computeYearPageStart(this.year);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -48,14 +97,29 @@ export class UmCalendarBase extends LitElement {
             this.#setLocaleDependantProperties();
         });
     }
+    willUpdate(changed) {
+        if (changed.has('locale')) {
+            this._innerLocale = this.locale ?? navigator.language;
+            this.#setLocaleDependantProperties();
+        }
+    }
     render() {
         return html `
       <div>
         <u-button-set>
-          <u-button class="month-button" type="button" variant="text">
-            ${this.adapter.getMonth(this.#getDisplayingMonthDate())}
+          <u-button class="month-button" type="button" variant="text" @click=${this.#toggleYearView}>
+            ${this.#getHeaderLabel()}
+            <svg
+              class="month-button-icon ${this.view !== 'day' ? 'open' : ''}"
+              xmlns="http://www.w3.org/2000/svg"
+              height="1.5em"
+              viewBox="0 -960 960 960"
+              width="1.5em"
+              fill="currentColor">
+              <path d="M480-360 280-560h400L480-360Z" />
+            </svg>
           </u-button>
-          <u-icon-button class="previous-month-button" @click=${() => this.#addMonth(-1)}>
+          <u-icon-button class="previous-month-button" @click=${this.#handlePrevClick}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               height="1em"
@@ -65,7 +129,7 @@ export class UmCalendarBase extends LitElement {
               <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
             </svg>
           </u-icon-button>
-          <u-icon-button @click=${() => this.#addMonth(1)}>
+          <u-icon-button @click=${this.#handleNextClick}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               height="1em"
@@ -77,9 +141,26 @@ export class UmCalendarBase extends LitElement {
           </u-icon-button>
         </u-button-set>
       </div>
+      ${this.#renderBody()}
+    `;
+    }
+    #renderBody() {
+        if (this.view === 'year') {
+            return html `<div class="year-grid">${this.#renderYears()}</div>`;
+        }
+        if (this.view === 'month') {
+            return html `<div class="month-grid">${this.#renderMonths()}</div>`;
+        }
+        return html `
       <div class="calendar ${this._getCalendarClassMap()}">${this.#renderWeekDays()}${this.#renderDays()}</div>
     `;
     }
+    #getHeaderLabel() {
+        if (this.view === 'month') {
+            return this.adapter.getYear(this.#getDisplayingMonthDate());
+        }
+        return this.adapter.getMonth(this.#getDisplayingMonthDate());
+    }
     #renderWeekDays() {
         return this.weekDays.map(weekDay => html `
           <div class="calendar-item">
@@ -88,15 +169,16 @@ export class UmCalendarBase extends LitElement {
         `);
     }
     #getDisplayingMonthDate() {
-        return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);
+        return new Date(this.year, this.month, 1);
     }
     #renderDays() {
-        const date = new Date(this._displayingMonthDate);
-        date.setDate(date.getDate() - date.getDay());
-        const month = this.month;
         const year = this.year;
+        const month = this.month;
+        const firstOfMonth = new Date(year, month, 1);
+        const diffToFirstDayOfWeek = (firstOfMonth.getDay() - this._firstDayOfWeek + 7) % 7;
+        const date = new Date(year, month, 1 - diffToFirstDayOfWeek);
         const daysTemplates = [];
-        do {
+        for (let row = 0; row < 6; row++) {
             for (let i = 0; i < 7; i++) {
                 const dateOutsideMonth = date.getMonth() !== month;
                 const dateClasses = this._getSelectedDateClasses(date);
@@ -107,31 +189,98 @@ export class UmCalendarBase extends LitElement {
                     dateClasses['date-outside-month'] = true;
                 }
                 const classes = classMap(dateClasses);
-                const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth
-                    ? null
-                    : html `
+                const renderDate = !dateOutsideMonth || this.dateOutsideMonth;
+                const dateTemplate = renderDate
+                    ? html `
               <u-ripple></u-ripple>
               <span class="date">
                 ${this.dateRenderer
                         ? this.dateRenderer(new Date(date), this.adapter.getDay(date))
                         : this.adapter.getDay(date)}
               </span>
-            `;
+            `
+                    : null;
+                const click = renderDate ? this.#handleDateClick(new Date(date)) : null;
                 daysTemplates.push(html `
           <div
             class="calendar-item ${classes}"
-            @click=${this.#handleDateClick(new Date(date))}>
+            @click=${click}>
             ${dateTemplate}
           </div>
         `);
                 date.setDate(date.getDate() + 1);
             }
-        } while (date.getMonth() <= month && date.getFullYear() <= year);
+        }
         return daysTemplates;
     }
+    #renderYears() {
+        const templates = [];
+        const currentYear = this.#currentDate.getFullYear();
+        const selectedYear = this.year;
+        for (let i = 0; i < this.yearRange; i++) {
+            const year = this._yearPageStart + i;
+            const classes = classMap({
+                'year-cell': true,
+                'current-year': year === currentYear && year !== selectedYear,
+                'selected-year': year === selectedYear,
+            });
+            templates.push(html `
+        <div class=${classes} @click=${this.#handleYearClick(year)}>
+          <span class="year-label">
+            <u-ripple></u-ripple>
+            ${year}
+          </span>
+        </div>
+      `);
+        }
+        return templates;
+    }
+    #renderMonths() {
+        const templates = [];
+        const currentYear = this.#currentDate.getFullYear();
+        const currentMonth = this.#currentDate.getMonth();
+        const selectedMonth = this.month;
+        const displayedYear = this.year;
+        for (let month = 0; month < 12; month++) {
+            const isCurrent = displayedYear === currentYear && month === currentMonth;
+            const isSelected = month === selectedMonth;
+            const classes = classMap({
+                'month-cell': true,
+                'current-month': isCurrent && !isSelected,
+                'selected-month': isSelected,
+            });
+            templates.push(html `
+        <div class=${classes} @click=${this.#handleMonthClick(month)}>
+          <span class="month-label">
+            <u-ripple></u-ripple>
+            ${this.adapter.getMonthShort(month, this._innerLocale)}
+          </span>
+        </div>
+      `);
+        }
+        return templates;
+    }
     #handleDateClick(date) {
         return () => this._selectDate(date);
     }
+    #handleYearClick(year) {
+        return () => {
+            this.year = year;
+            this.view = 'month';
+        };
+    }
+    #handleMonthClick(month) {
+        return () => {
+            this.month = month;
+            this.view = 'day';
+        };
+    }
+    #toggleYearView;
+    #handlePrevClick;
+    #handleNextClick;
+    #computeYearPageStart(year) {
+        return year - Math.floor(this.yearRange / 2);
+    }
     _getCalendarClassMap() {
         return null;
     }
@@ -167,22 +316,36 @@ export class UmCalendarBase extends LitElement {
         this.month += value;
     }
     #setLocaleDependantProperties() {
+        this.adapter.locale = this._innerLocale;
         this.weekDays = this.adapter.getWeekDays(this._innerLocale);
+        this._firstDayOfWeek = this.adapter.getFirstDayOfWeek(this._innerLocale);
     }
 }
 __decorate([
     state()
-], UmCalendarBase.prototype, "weekDays", void 0);
+], CalendarBase.prototype, "weekDays", void 0);
+__decorate([
+    state()
+], CalendarBase.prototype, "_firstDayOfWeek", void 0);
 __decorate([
     state()
-], UmCalendarBase.prototype, "dateRenderer", void 0);
+], CalendarBase.prototype, "dateRenderer", void 0);
 __decorate([
     property({ type: Boolean })
-], UmCalendarBase.prototype, "dateOutsideMonth", void 0);
+], CalendarBase.prototype, "dateOutsideMonth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'year-range' })
+], CalendarBase.prototype, "yearRange", void 0);
+__decorate([
+    state()
+], CalendarBase.prototype, "_displayingMonthDate", void 0);
+__decorate([
+    state()
+], CalendarBase.prototype, "view", void 0);
 __decorate([
     state()
-], UmCalendarBase.prototype, "_displayingMonthDate", void 0);
+], CalendarBase.prototype, "_yearPageStart", void 0);
 __decorate([
     property()
-], UmCalendarBase.prototype, "locale", void 0);
+], CalendarBase.prototype, "locale", void 0);
 //# sourceMappingURL=calendar-base.js.map

package/calendar/calendar-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-base.js","sourceRoot":"","sources":["../../src/calendar/calendar-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { DirectiveResult } from 'lit-html/directive.js';\nimport { ClassMapDirective } from 'lit-html/directives/class-map';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './calendar-base.styles.js';\nimport { DefaultCalendarAdapter } from './default-calendar-adapter.js';\n\nexport abstract class UmCalendarBase extends LitElement {\n  static override styles: CSSResultGroup = [styles];\n\n  @state() weekDays: string[] = [];\n  @state() dateRenderer: ((date: Date, day: string) => HTMLElement) | null = null;\n  @property({ type: Boolean }) dateOutsideMonth = false;\n\n  get year(): number {\n    return this._displayingMonthDate.getFullYear();\n  }\n\n  set year(year: number) {\n    this._displayingMonthDate.setFullYear(year);\n    this._displayingMonthDate = new Date(this._displayingMonthDate);\n  }\n\n  get month(): number {\n    return this._displayingMonthDate.getMonth();\n  }\n\n  set month(month: number) {\n    this._displayingMonthDate.setMonth(month);\n    this._displayingMonthDate = new Date(this._displayingMonthDate);\n  }\n\n  readonly #currentDate = new Date();\n  @state() _displayingMonthDate: Date;\n\n  @property() locale: string | null = null;\n  _innerLocale: string = navigator.language;\n  adapter = new DefaultCalendarAdapter();\n\n  protected constructor() {\n    super();\n\n    this.#currentDate.setHours(0);\n    this.#currentDate.setMinutes(0);\n    this.#currentDate.setSeconds(0);\n    this.#currentDate.setMilliseconds(0);\n    this._displayingMonthDate = new Date(this.#currentDate);\n    this._displayingMonthDate.setDate(1);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#setLocaleDependantProperties();\n\n    window.addEventListener('languagechange', () => {\n      if (this.locale !== null) {\n        return;\n      }\n\n      this._innerLocale = navigator.language;\n      this.#setLocaleDependantProperties();\n    });\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div>\n        <u-button-set>\n          <u-button class=\"month-button\" type=\"button\" variant=\"text\">\n            ${this.adapter.getMonth(this.#getDisplayingMonthDate())}\n          </u-button>\n          <u-icon-button class=\"previous-month-button\" @click=${() => this.#addMonth(-1)}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n            </svg>\n          </u-icon-button>\n          <u-icon-button @click=${() => this.#addMonth(1)}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n            </svg>\n          </u-icon-button>\n        </u-button-set>\n      </div>\n      <div class=\"calendar ${this._getCalendarClassMap()}\">${this.#renderWeekDays()}${this.#renderDays()}</div>\n    `;\n  }\n\n  #renderWeekDays(): HTMLTemplateResult[] {\n    return this.weekDays.map(\n      weekDay =>\n        html`\n          <div class=\"calendar-item\">\n            <span class=\"week-day\">${weekDay}</span>\n          </div>\n        `,\n    );\n  }\n\n  #getDisplayingMonthDate(): Date {\n    return this._getDateFromIsoDate(`${this.year}-${this.month + 1}-1`);\n  }\n\n  #renderDays(): HTMLTemplateResult[] {\n    const date = new Date(this._displayingMonthDate);\n\n    date.setDate(date.getDate() - date.getDay());\n\n    const month = this.month;\n    const year = this.year;\n\n    const daysTemplates: HTMLTemplateResult[] = [];\n\n    do {\n      for (let i = 0; i < 7; i++) {\n        const dateOutsideMonth = date.getMonth() !== month;\n\n        const dateClasses = this._getSelectedDateClasses(date);\n\n        if (!Object.keys(dateClasses).length && this.#currentDate.getTime() === date.getTime()) {\n          dateClasses['current-date'] = true;\n        }\n\n        if (dateOutsideMonth) {\n          dateClasses['date-outside-month'] = true;\n        }\n\n        const classes = classMap(dateClasses);\n\n        const dateTemplate = dateOutsideMonth && !this.dateOutsideMonth\n          ? null\n          : html`\n              <u-ripple></u-ripple>\n              <span class=\"date\">\n                ${this.dateRenderer\n                  ? this.dateRenderer(new Date(date), this.adapter.getDay(date))\n                  : this.adapter.getDay(date)}\n              </span>\n            `;\n\n        daysTemplates.push(html`\n          <div\n            class=\"calendar-item ${classes}\"\n            @click=${this.#handleDateClick(new Date(date))}>\n            ${dateTemplate}\n          </div>\n        `);\n\n        date.setDate(date.getDate() + 1);\n      }\n    } while (date.getMonth() <= month && date.getFullYear() <= year);\n\n    return daysTemplates;\n  }\n\n  #handleDateClick(date: Date): () => void {\n    return () => this._selectDate(date);\n  }\n\n  protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {\n    return null;\n  }\n\n  protected abstract _selectDate(date: Date): void;\n  protected abstract _getSelectedDateClasses(date: Date): Record<string, boolean>;\n\n  protected _getDateFromIsoDate(isoDate: string): Date {\n    const date = new Date(isoDate);\n    const offsetMs = date.getTimezoneOffset() * 60 * 1000;\n    date.setTime(date.getTime() + offsetMs);\n\n    return date;\n  }\n\n  protected _getDateString(date: Date | null): string {\n\n    if (!date) {\n      return '';\n    }\n\n    return Intl\n      .DateTimeFormat('en-CA', {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n      })\n      .format(date);\n  }\n\n  protected _getDateFromString(dateString: string): Date | null {\n    if (!dateString) {\n      return null;\n    }\n\n    const dateTime = Date.parse(dateString);\n\n    if (!dateTime && dateTime !== 0) {\n      return null;\n    }\n\n    return this._getDateFromIsoDate(dateString);\n  }\n\n  #addMonth(value: number): void {\n    this.month += value;\n  }\n\n  #setLocaleDependantProperties(): void {\n    this.weekDays = this.adapter.getWeekDays(this._innerLocale);\n  }\n}\n"]}
+{"version":3,"file":"calendar-base.js","sourceRoot":"","sources":["../../src/calendar/calendar-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { DirectiveResult } from 'lit-html/directive.js';\nimport { ClassMapDirective } from 'lit-html/directives/class-map';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './calendar-base.styles.js';\nimport { DefaultCalendarAdapter } from './default-calendar-adapter.js';\n\nexport type CalendarView = 'day' | 'month' | 'year';\n\nexport abstract class CalendarBase extends LitElement {\n  static override styles: CSSResultGroup = [styles];\n\n  @state() weekDays: string[] = [];\n  @state() private _firstDayOfWeek = 0;\n  @state() dateRenderer: ((date: Date, day: string) => HTMLElement) | null = null;\n  /**\n   * Whether to render dates from the previous and next months that\n   * fall inside the displayed weeks\n   */\n  @property({ type: Boolean }) dateOutsideMonth = false;\n\n  /**\n   * Number of years displayed per page in the year picker view.\n   */\n  @property({ type: Number, attribute: 'year-range' }) yearRange = 24;\n\n  get year(): number {\n    return this._displayingMonthDate.getFullYear();\n  }\n\n  set year(year: number) {\n    this._displayingMonthDate = new Date(year, this._displayingMonthDate.getMonth(), 1);\n  }\n\n  get month(): number {\n    return this._displayingMonthDate.getMonth();\n  }\n\n  set month(month: number) {\n    this._displayingMonthDate = new Date(this._displayingMonthDate.getFullYear(), month, 1);\n  }\n\n  readonly #currentDate = new Date();\n  @state() _displayingMonthDate: Date;\n  @state() view: CalendarView = 'day';\n  @state() _yearPageStart = 0;\n\n  /**\n   * The BCP 47 locale tag used to format month names and weekdays.\n   * When `null`, falls back to the browser's `navigator.language`.\n   */\n  @property() locale: string | null = null;\n  _innerLocale: string = navigator.language;\n  adapter = new DefaultCalendarAdapter();\n\n  protected constructor() {\n    super();\n\n    this.#currentDate.setHours(0);\n    this.#currentDate.setMinutes(0);\n    this.#currentDate.setSeconds(0);\n    this.#currentDate.setMilliseconds(0);\n    this._displayingMonthDate = new Date(this.#currentDate);\n    this._displayingMonthDate.setDate(1);\n    this._yearPageStart = this.#computeYearPageStart(this.year);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#setLocaleDependantProperties();\n\n    window.addEventListener('languagechange', () => {\n      if (this.locale !== null) {\n        return;\n      }\n\n      this._innerLocale = navigator.language;\n      this.#setLocaleDependantProperties();\n    });\n  }\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('locale')) {\n      this._innerLocale = this.locale ?? navigator.language;\n      this.#setLocaleDependantProperties();\n    }\n  }\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div>\n        <u-button-set>\n          <u-button class=\"month-button\" type=\"button\" variant=\"text\" @click=${this.#toggleYearView}>\n            ${this.#getHeaderLabel()}\n            <svg\n              class=\"month-button-icon ${this.view !== 'day' ? 'open' : ''}\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1.5em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1.5em\"\n              fill=\"currentColor\">\n              <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n          </u-button>\n          <u-icon-button class=\"previous-month-button\" @click=${this.#handlePrevClick}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n            </svg>\n          </u-icon-button>\n          <u-icon-button @click=${this.#handleNextClick}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n            </svg>\n          </u-icon-button>\n        </u-button-set>\n      </div>\n      ${this.#renderBody()}\n    `;\n  }\n\n  #renderBody(): HTMLTemplateResult {\n    if (this.view === 'year') {\n      return html`<div class=\"year-grid\">${this.#renderYears()}</div>`;\n    }\n\n    if (this.view === 'month') {\n      return html`<div class=\"month-grid\">${this.#renderMonths()}</div>`;\n    }\n\n    return html`\n      <div class=\"calendar ${this._getCalendarClassMap()}\">${this.#renderWeekDays()}${this.#renderDays()}</div>\n    `;\n  }\n\n  #getHeaderLabel(): string {\n    if (this.view === 'month') {\n      return this.adapter.getYear(this.#getDisplayingMonthDate());\n    }\n\n    return this.adapter.getMonth(this.#getDisplayingMonthDate());\n  }\n\n  #renderWeekDays(): HTMLTemplateResult[] {\n    return this.weekDays.map(\n      weekDay =>\n        html`\n          <div class=\"calendar-item\">\n            <span class=\"week-day\">${weekDay}</span>\n          </div>\n        `,\n    );\n  }\n\n  #getDisplayingMonthDate(): Date {\n    return new Date(this.year, this.month, 1);\n  }\n\n  #renderDays(): HTMLTemplateResult[] {\n    const year = this.year;\n    const month = this.month;\n    const firstOfMonth = new Date(year, month, 1);\n    const diffToFirstDayOfWeek = (firstOfMonth.getDay() - this._firstDayOfWeek + 7) % 7;\n    const date = new Date(year, month, 1 - diffToFirstDayOfWeek);\n\n    const daysTemplates: HTMLTemplateResult[] = [];\n\n    for (let row = 0; row < 6; row++) {\n      for (let i = 0; i < 7; i++) {\n        const dateOutsideMonth = date.getMonth() !== month;\n\n        const dateClasses = this._getSelectedDateClasses(date);\n\n        if (!Object.keys(dateClasses).length && this.#currentDate.getTime() === date.getTime()) {\n          dateClasses['current-date'] = true;\n        }\n\n        if (dateOutsideMonth) {\n          dateClasses['date-outside-month'] = true;\n        }\n\n        const classes = classMap(dateClasses);\n\n        const renderDate = !dateOutsideMonth || this.dateOutsideMonth;\n        const dateTemplate = renderDate\n          ? html`\n              <u-ripple></u-ripple>\n              <span class=\"date\">\n                ${this.dateRenderer\n                  ? this.dateRenderer(new Date(date), this.adapter.getDay(date))\n                  : this.adapter.getDay(date)}\n              </span>\n            `\n          : null;\n\n        const click = renderDate ? this.#handleDateClick(new Date(date)) : null;\n\n        daysTemplates.push(html`\n          <div\n            class=\"calendar-item ${classes}\"\n            @click=${click}>\n            ${dateTemplate}\n          </div>\n        `);\n\n        date.setDate(date.getDate() + 1);\n      }\n    }\n\n    return daysTemplates;\n  }\n\n  #renderYears(): HTMLTemplateResult[] {\n    const templates: HTMLTemplateResult[] = [];\n    const currentYear = this.#currentDate.getFullYear();\n    const selectedYear = this.year;\n\n    for (let i = 0; i < this.yearRange; i++) {\n      const year = this._yearPageStart + i;\n      const classes = classMap({\n        'year-cell': true,\n        'current-year': year === currentYear && year !== selectedYear,\n        'selected-year': year === selectedYear,\n      });\n\n      templates.push(html`\n        <div class=${classes} @click=${this.#handleYearClick(year)}>\n          <span class=\"year-label\">\n            <u-ripple></u-ripple>\n            ${year}\n          </span>\n        </div>\n      `);\n    }\n\n    return templates;\n  }\n\n  #renderMonths(): HTMLTemplateResult[] {\n    const templates: HTMLTemplateResult[] = [];\n    const currentYear = this.#currentDate.getFullYear();\n    const currentMonth = this.#currentDate.getMonth();\n    const selectedMonth = this.month;\n    const displayedYear = this.year;\n\n    for (let month = 0; month < 12; month++) {\n      const isCurrent = displayedYear === currentYear && month === currentMonth;\n      const isSelected = month === selectedMonth;\n\n      const classes = classMap({\n        'month-cell': true,\n        'current-month': isCurrent && !isSelected,\n        'selected-month': isSelected,\n      });\n\n      templates.push(html`\n        <div class=${classes} @click=${this.#handleMonthClick(month)}>\n          <span class=\"month-label\">\n            <u-ripple></u-ripple>\n            ${this.adapter.getMonthShort(month, this._innerLocale)}\n          </span>\n        </div>\n      `);\n    }\n\n    return templates;\n  }\n\n  #handleDateClick(date: Date): () => void {\n    return () => this._selectDate(date);\n  }\n\n  #handleYearClick(year: number): () => void {\n    return () => {\n      this.year = year;\n      this.view = 'month';\n    };\n  }\n\n  #handleMonthClick(month: number): () => void {\n    return () => {\n      this.month = month;\n      this.view = 'day';\n    };\n  }\n\n  #toggleYearView = (): void => {\n    if (this.view === 'day') {\n      this._yearPageStart = this.#computeYearPageStart(this.year);\n      this.view = 'year';\n      return;\n    }\n\n    if (this.view === 'month') {\n      this._yearPageStart = this.#computeYearPageStart(this.year);\n      this.view = 'year';\n      return;\n    }\n\n    this.view = 'day';\n  };\n\n  #handlePrevClick = (): void => {\n    if (this.view === 'year') {\n      this._yearPageStart -= this.yearRange;\n      return;\n    }\n\n    if (this.view === 'month') {\n      this.year -= 1;\n      return;\n    }\n\n    this.#addMonth(-1);\n  };\n\n  #handleNextClick = (): void => {\n    if (this.view === 'year') {\n      this._yearPageStart += this.yearRange;\n      return;\n    }\n\n    if (this.view === 'month') {\n      this.year += 1;\n      return;\n    }\n\n    this.#addMonth(1);\n  };\n\n  #computeYearPageStart(year: number): number {\n    return year - Math.floor(this.yearRange / 2);\n  }\n\n  protected _getCalendarClassMap(): DirectiveResult<typeof ClassMapDirective> | null {\n    return null;\n  }\n\n  protected abstract _selectDate(date: Date): void;\n  protected abstract _getSelectedDateClasses(date: Date): Record<string, boolean>;\n\n  protected _getDateFromIsoDate(isoDate: string): Date {\n    const date = new Date(isoDate);\n    const offsetMs = date.getTimezoneOffset() * 60 * 1000;\n    date.setTime(date.getTime() + offsetMs);\n\n    return date;\n  }\n\n  protected _getDateString(date: Date | null): string {\n\n    if (!date) {\n      return '';\n    }\n\n    return Intl\n      .DateTimeFormat('en-CA', {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n      })\n      .format(date);\n  }\n\n  protected _getDateFromString(dateString: string): Date | null {\n    if (!dateString) {\n      return null;\n    }\n\n    const dateTime = Date.parse(dateString);\n\n    if (!dateTime && dateTime !== 0) {\n      return null;\n    }\n\n    return this._getDateFromIsoDate(dateString);\n  }\n\n  #addMonth(value: number): void {\n    this.month += value;\n  }\n\n  #setLocaleDependantProperties(): void {\n    this.adapter.locale = this._innerLocale;\n    this.weekDays = this.adapter.getWeekDays(this._innerLocale);\n    this._firstDayOfWeek = this.adapter.getFirstDayOfWeek(this._innerLocale);\n  }\n}\n"]}

package/calendar/calendar.d.ts

@@ -1,8 +1,12 @@
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
-import { UmCalendarBase } from './calendar-base.js';
-export declare class UmCalendar extends UmCalendarBase {
+import { CalendarBase } from './calendar-base.js';
+export declare class Calendar extends CalendarBase {
     static styles: CSSResultGroup;
     dateValue: Date | null;
+    /**
+     * The selected date as an ISO date string (`YYYY-MM-DD`), or an empty
+     * string when no date is selected
+     */
     get value(): string;
     set value(value: string);
     protected _selectDate(date: Date): void;

package/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,qBACa,UAAW,SAAQ,cAAc;IAC5C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEhE,SAAS,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEvC,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;cAEkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAe7B,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAMhF"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,qBACa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAE9D,SAAS,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEvC;;;OAGG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;cAEkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAe7B,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAMhF"}

package/calendar/calendar.js

@@ -1,13 +1,17 @@
 import { __decorate } from "tslib";
 import { customElement, property, state } from 'lit/decorators.js';
-import { UmCalendarBase } from './calendar-base.js';
+import { CalendarBase } from './calendar-base.js';
 import { styles } from './calendar.styles.js';
-let UmCalendar = class UmCalendar extends UmCalendarBase {
+let Calendar = class Calendar extends CalendarBase {
     constructor() {
         super(...arguments);
         this.dateValue = null;
     }
-    static { this.styles = [styles, UmCalendarBase.styles]; }
+    static { this.styles = [styles, CalendarBase.styles]; }
+    /**
+     * The selected date as an ISO date string (`YYYY-MM-DD`), or an empty
+     * string when no date is selected
+     */
     get value() {
         return this._getDateString(this.dateValue);
     }
@@ -32,12 +36,12 @@ let UmCalendar = class UmCalendar extends UmCalendarBase {
 };
 __decorate([
     state()
-], UmCalendar.prototype, "dateValue", void 0);
+], Calendar.prototype, "dateValue", void 0);
 __decorate([
     property()
-], UmCalendar.prototype, "value", null);
-UmCalendar = __decorate([
+], Calendar.prototype, "value", null);
+Calendar = __decorate([
     customElement('u-calendar')
-], UmCalendar);
-export { UmCalendar };
+], Calendar);
+export { Calendar };
 //# sourceMappingURL=calendar.js.map

package/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,cAAc;IAAvC;;QAGI,cAAS,GAAgB,IAAI,CAAC;IAgCzC,CAAC;aAlCiB,WAAM,GAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,AAAlD,CAAmD;IAKzE,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEkB,WAAW,CAAC,IAAU;QACvC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvE,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAEjC,CAAC;IAEkB,uBAAuB,CAAC,IAAU;QACnD,OAAO,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YACjD,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE;YAC3B,CAAC,CAAC,EAAE,CAAC;IAET,CAAC;;AA/BQ;IAAR,KAAK,EAAE;6CAA+B;AAGvC;IADC,QAAQ,EAAE;uCAGV;AARU,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CAmCtB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmCalendarBase } from './calendar-base.js';\nimport { styles } from './calendar.styles.js';\n\n@customElement('u-calendar')\nexport class UmCalendar extends UmCalendarBase {\n  static override styles: CSSResultGroup = [styles, UmCalendarBase.styles];\n\n  @state() dateValue: Date | null = null;\n\n  @property()\n  get value(): string {\n    return this._getDateString(this.dateValue);\n  }\n\n  set value(value: string) {\n    this.dateValue = this._getDateFromString(value);\n  }\n\n  protected override _selectDate(date: Date): void {\n    this.dateValue = date;\n\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n\n    if (this.month === date.getMonth() && this.year === date.getFullYear()) {\n      return;\n    }\n\n    this.month = date.getMonth();\n    this.year = date.getFullYear();\n\n  }\n\n  protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {\n    return this.dateValue?.getTime() === date.getTime()\n      ? { 'selected-date': true }\n      : {};\n\n  }\n}\n"]}
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../src/calendar/calendar.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGI,cAAS,GAAgB,IAAI,CAAC;IAoCzC,CAAC;aAtCiB,WAAM,GAAmB,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,AAAhD,CAAiD;IAIvE;;;OAGG;IAEH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEkB,WAAW,CAAC,IAAU;QACvC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvE,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAEjC,CAAC;IAEkB,uBAAuB,CAAC,IAAU;QACnD,OAAO,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YACjD,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE;YAC3B,CAAC,CAAC,EAAE,CAAC;IAET,CAAC;;AAnCQ;IAAR,KAAK,EAAE;2CAA+B;AAOvC;IADC,QAAQ,EAAE;qCAGV;AAZU,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAuCpB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CalendarBase } from './calendar-base.js';\nimport { styles } from './calendar.styles.js';\n\n@customElement('u-calendar')\nexport class Calendar extends CalendarBase {\n  static override styles: CSSResultGroup = [styles, CalendarBase.styles];\n\n  @state() dateValue: Date | null = null;\n\n  /**\n   * The selected date as an ISO date string (`YYYY-MM-DD`), or an empty\n   * string when no date is selected\n   */\n  @property()\n  get value(): string {\n    return this._getDateString(this.dateValue);\n  }\n\n  set value(value: string) {\n    this.dateValue = this._getDateFromString(value);\n  }\n\n  protected override _selectDate(date: Date): void {\n    this.dateValue = date;\n\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n\n    if (this.month === date.getMonth() && this.year === date.getFullYear()) {\n      return;\n    }\n\n    this.month = date.getMonth();\n    this.year = date.getFullYear();\n\n  }\n\n  protected override _getSelectedDateClasses(date: Date): Record<string, boolean> {\n    return this.dateValue?.getTime() === date.getTime()\n      ? { 'selected-date': true }\n      : {};\n\n  }\n}\n"]}

package/calendar/default-calendar-adapter.d.ts

@@ -4,7 +4,10 @@ export declare class DefaultCalendarAdapter implements CalendarAdapter {
     weekDayFormat: 'long' | 'short' | 'narrow';
     locale: string;
     getWeekDays(locale: string): string[];
+    getFirstDayOfWeek(locale: string): number;
     getDay(date: Date): string;
     getMonth(date: Date): string;
+    getYear(date: Date): string;
+    getMonthShort(month: number, locale: string): string;
 }
 //# sourceMappingURL=default-calendar-adapter.d.ts.map

package/calendar/default-calendar-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-calendar-adapter.d.ts","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,qBAAa,sBAAuB,YAAW,eAAe;;IAC5D,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAY;IACtD,MAAM,SAAW;IAEjB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;IAuBrC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAI1B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;CAM7B"}
+{"version":3,"file":"default-calendar-adapter.d.ts","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,qBAAa,sBAAuB,YAAW,eAAe;;IAC5D,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAY;IACtD,MAAM,SAAW;IAEjB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;IAerC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAazC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAI1B,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAO5B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAI3B,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM;CAIrD"}

package/calendar/default-calendar-adapter.js

@@ -5,9 +5,8 @@ export class DefaultCalendarAdapter {
     }
     getWeekDays(locale) {
         const date = new Date();
-        const intlLocale = new Intl.Locale(locale);
-        const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : intlLocale.weekinfo;
-        this.#setDateToFirstDayOfWeek(date, weekInfo.firstDay);
+        const firstDay = this.getFirstDayOfWeek(locale);
+        this.#setDateToFirstDayOfWeek(date, firstDay);
         const weekDays = [];
         for (let i = 0; i < 7; i++) {
             weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));
@@ -15,8 +14,14 @@ export class DefaultCalendarAdapter {
         }
         return weekDays;
     }
-    #setDateToFirstDayOfWeek(date, firstDayOfWeek) {
-        const diffToFirstDayOfWeek = (firstDayOfWeek - date.getDay() + 7) % 7;
+    getFirstDayOfWeek(locale) {
+        const intlLocale = new Intl.Locale(locale);
+        const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : intlLocale.weekinfo;
+        // CLDR convention (1=Mon..7=Sun) → JS Date convention (0=Sun..6=Sat)
+        return weekInfo.firstDay % 7;
+    }
+    #setDateToFirstDayOfWeek(date, jsFirstDayOfWeek) {
+        const diffToFirstDayOfWeek = (jsFirstDayOfWeek - date.getDay() + 7) % 7;
         date.setDate(date.getDate() + diffToFirstDayOfWeek);
     }
     getDay(date) {
@@ -28,5 +33,12 @@ export class DefaultCalendarAdapter {
             year: 'numeric',
         });
     }
+    getYear(date) {
+        return date.toLocaleDateString(this.locale, { year: 'numeric' });
+    }
+    getMonthShort(month, locale) {
+        const date = new Date(2000, month, 1);
+        return date.toLocaleDateString(locale, { month: 'short' });
+    }
 }
 //# sourceMappingURL=default-calendar-adapter.js.map

package/calendar/default-calendar-adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-calendar-adapter.js","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,sBAAsB;IAAnC;QACE,kBAAa,GAAgC,QAAQ,CAAC;QACtD,WAAM,GAAG,OAAO,CAAC;IAmCnB,CAAC;IAjCC,WAAW,CAAC,MAAc;QACxB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAExB,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAE,UAAkB,CAAC,QAAQ,CAAC;QAElG,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACvD,MAAM,QAAQ,GAAa,EAAE,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YAChF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,wBAAwB,CAAC,IAAU,EAAE,cAAsB;QACzD,MAAM,oBAAoB,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAEtE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,oBAAoB,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,CAAC,IAAU;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC1C,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { CalendarAdapter } from './calendar-adapter.js';\n\nexport class DefaultCalendarAdapter implements CalendarAdapter {\n  weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';\n  locale = 'pt-br';\n\n  getWeekDays(locale: string): string[] {\n    const date = new Date();\n\n    const intlLocale = new Intl.Locale(locale);\n    const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : (intlLocale as any).weekinfo;\n\n    this.#setDateToFirstDayOfWeek(date, weekInfo.firstDay);\n    const weekDays: string[] = [];\n\n    for (let i = 0; i < 7; i++) {\n      weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));\n      date.setDate(date.getDate() + 1);\n    }\n\n    return weekDays;\n  }\n\n  #setDateToFirstDayOfWeek(date: Date, firstDayOfWeek: number): void {\n    const diffToFirstDayOfWeek = (firstDayOfWeek - date.getDay() + 7) % 7;\n\n    date.setDate(date.getDate() + diffToFirstDayOfWeek);\n  }\n\n  getDay(date: Date): string {\n    return date.toLocaleDateString(this.locale, { day: 'numeric' });\n  }\n\n  getMonth(date: Date): string {\n    return date.toLocaleDateString(this.locale, {\n      month: 'long',\n      year: 'numeric',\n    });\n  }\n}\n"]}
+{"version":3,"file":"default-calendar-adapter.js","sourceRoot":"","sources":["../../src/calendar/default-calendar-adapter.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,sBAAsB;IAAnC;QACE,kBAAa,GAAgC,QAAQ,CAAC;QACtD,WAAM,GAAG,OAAO,CAAC;IAiDnB,CAAC;IA/CC,WAAW,CAAC,MAAc;QACxB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAEhD,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC9C,MAAM,QAAQ,GAAa,EAAE,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YAChF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,iBAAiB,CAAC,MAAc;QAC9B,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAE,UAAkB,CAAC,QAAQ,CAAC;QAClG,qEAAqE;QACrE,OAAO,QAAQ,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC/B,CAAC;IAED,wBAAwB,CAAC,IAAU,EAAE,gBAAwB;QAC3D,MAAM,oBAAoB,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAExE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,oBAAoB,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,CAAC,IAAU;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC1C,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,IAAU;QAChB,OAAO,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,aAAa,CAAC,KAAa,EAAE,MAAc;QACzC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7D,CAAC;CACF","sourcesContent":["import { CalendarAdapter } from './calendar-adapter.js';\n\nexport class DefaultCalendarAdapter implements CalendarAdapter {\n  weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';\n  locale = 'pt-br';\n\n  getWeekDays(locale: string): string[] {\n    const date = new Date();\n    const firstDay = this.getFirstDayOfWeek(locale);\n\n    this.#setDateToFirstDayOfWeek(date, firstDay);\n    const weekDays: string[] = [];\n\n    for (let i = 0; i < 7; i++) {\n      weekDays.push(date.toLocaleDateString(locale, { weekday: this.weekDayFormat }));\n      date.setDate(date.getDate() + 1);\n    }\n\n    return weekDays;\n  }\n\n  getFirstDayOfWeek(locale: string): number {\n    const intlLocale = new Intl.Locale(locale);\n    const weekInfo = intlLocale.getWeekInfo ? intlLocale.getWeekInfo() : (intlLocale as any).weekinfo;\n    // CLDR convention (1=Mon..7=Sun) → JS Date convention (0=Sun..6=Sat)\n    return weekInfo.firstDay % 7;\n  }\n\n  #setDateToFirstDayOfWeek(date: Date, jsFirstDayOfWeek: number): void {\n    const diffToFirstDayOfWeek = (jsFirstDayOfWeek - date.getDay() + 7) % 7;\n\n    date.setDate(date.getDate() + diffToFirstDayOfWeek);\n  }\n\n  getDay(date: Date): string {\n    return date.toLocaleDateString(this.locale, { day: 'numeric' });\n  }\n\n  getMonth(date: Date): string {\n    return date.toLocaleDateString(this.locale, {\n      month: 'long',\n      year: 'numeric',\n    });\n  }\n\n  getYear(date: Date): string {\n    return date.toLocaleDateString(this.locale, { year: 'numeric' });\n  }\n\n  getMonthShort(month: number, locale: string): string {\n    const date = new Date(2000, month, 1);\n    return date.toLocaleDateString(locale, { month: 'short' });\n  }\n}\n"]}

package/calendar/range-calendar.d.ts

@@ -1,8 +1,8 @@
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
 import { DirectiveResult } from 'lit-html/directive.js';
 import { ClassMapDirective } from 'lit-html/directives/class-map.js';
-import { UmCalendarBase } from './calendar-base.js';
-export declare class UmRangeCalendar extends UmCalendarBase {
+import { CalendarBase } from './calendar-base.js';
+export declare class RangeCalendar extends CalendarBase {
     #private;
     static styles: CSSResultGroup;
     startDateValue: Date | null;

package/calendar/range-calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/range-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,qBACa,eAAgB,SAAQ,cAAc;;IACjD,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEhE,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE1C,IACI,KAAK,IAAI,MAAM,GAAG,IAAI,CAMzB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAoBtB;cAUkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAc7B,oBAAoB,IAAI,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG,IAAI;cAgDxE,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAgBhF"}
+{"version":3,"file":"range-calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/range-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,qBACa,aAAc,SAAQ,YAAY;;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAE9D,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;IACnC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE1C,IACI,KAAK,IAAI,MAAM,GAAG,IAAI,CAMzB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAoBtB;cAUkB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;cAc7B,oBAAoB,IAAI,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG,IAAI;cAgDxE,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAgBhF"}

package/calendar/range-calendar.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { UmCalendarBase } from './calendar-base.js';
+import { CalendarBase } from './calendar-base.js';
 import { styles } from './range-calendar.styles.js';
-let UmRangeCalendar = class UmRangeCalendar extends UmCalendarBase {
+let RangeCalendar = class RangeCalendar extends CalendarBase {
     constructor() {
         super(...arguments);
         this.startDateValue = null;
         this.endDateValue = null;
     }
-    static { this.styles = [styles, UmCalendarBase.styles]; }
+    static { this.styles = [styles, CalendarBase.styles]; }
     get value() {
         if (!this.startDateValue && !this.endDateValue) {
             return '';
@@ -99,15 +99,15 @@ let UmRangeCalendar = class UmRangeCalendar extends UmCalendarBase {
 };
 __decorate([
     state()
-], UmRangeCalendar.prototype, "startDateValue", void 0);
+], RangeCalendar.prototype, "startDateValue", void 0);
 __decorate([
     state()
-], UmRangeCalendar.prototype, "endDateValue", void 0);
+], RangeCalendar.prototype, "endDateValue", void 0);
 __decorate([
     property()
-], UmRangeCalendar.prototype, "value", null);
-UmRangeCalendar = __decorate([
+], RangeCalendar.prototype, "value", null);
+RangeCalendar = __decorate([
     customElement('u-range-calendar')
-], UmRangeCalendar);
-export { UmRangeCalendar };
+], RangeCalendar);
+export { RangeCalendar };
 //# sourceMappingURL=range-calendar.js.map