@3mo/date-time-fields 0.0.7 → 0.0.8

package/dist/calendar/Calendar.js

@@ -12,92 +12,92 @@ let Calendar = Calendar_1 = class Calendar extends Component {
         this.years = new Array(200).fill(undefined).map((_n, i) => Calendar_1.startingYearDate.addYears(i));
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-calendar-max-width: 325px;
-				--mo-calendar-min-height: 230px;
-				--mo-calendar-day-size: 36px;
-				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
-			}
-
-			.monthHeader, .week {
-				color: var(--mo-color-gray);
-			}
-
-			.monthHeader {
-				align-items: center;
-			}
-
-			.navigatingMonth, .navigatingYear {
-				font-size: var(--mo-font-size-l);
-				transition: var(--mo-duration-quick);
-			}
-
-			.navigatingYear:hover {
-				color: var(--mo-color-accent);
-				cursor: pointer;
-			}
-
-			.day, .year {
-				text-align: center;
-				border-radius: 100px;
-				cursor: pointer;
-				transition: var(--mo-duration-quick);
-				font-weight: 500;
-				user-select: none;
-				font-size: var(--mo-font-size-m);
-				width: var(--mo-calendar-day-size);
-				-webkit-user-select: none;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.year {
-				width: 100%;
-				justify-content: center;
-				align-items: center;
-			}
-
-			.selected {
-				background: var(--mo-color-accent);
-				color: var(--mo-color-accessible) !important;
-			}
-
-			.day {
-				height: var(--mo-calendar-day-size);
-			}
-
-			.day:hover, .year:hover {
-				background: var(--mo-color-transparent-gray-3);
-			}
-
-			.day:not(.isInMonth) {
-				color: var(--mo-color-gray);
-			}
-
-			.day.today {
-				color: var(--mo-color-accent);
-			}
+        return css `
+			:host {
+				--mo-calendar-max-width: 325px;
+				--mo-calendar-min-height: 230px;
+				--mo-calendar-day-size: 36px;
+				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
+			}
+
+			.monthHeader, .week {
+				color: var(--mo-color-gray);
+			}
+
+			.monthHeader {
+				align-items: center;
+			}
+
+			.navigatingMonth, .navigatingYear {
+				font-size: var(--mo-font-size-l);
+				transition: var(--mo-duration-quick);
+			}
+
+			.navigatingYear:hover {
+				color: var(--mo-color-accent);
+				cursor: pointer;
+			}
+
+			.day, .year {
+				text-align: center;
+				border-radius: 100px;
+				cursor: pointer;
+				transition: var(--mo-duration-quick);
+				font-weight: 500;
+				user-select: none;
+				font-size: var(--mo-font-size-m);
+				width: var(--mo-calendar-day-size);
+				-webkit-user-select: none;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.year {
+				width: 100%;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.selected {
+				background: var(--mo-color-accent);
+				color: var(--mo-color-accessible) !important;
+			}
+
+			.day {
+				height: var(--mo-calendar-day-size);
+			}
+
+			.day:hover, .year:hover {
+				background: var(--mo-color-transparent-gray-3);
+			}
+
+			.day:not(.isInMonth) {
+				color: var(--mo-color-gray);
+			}
+
+			.day.today {
+				color: var(--mo-color-accent);
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-flex alignItems='center' justifyContent='center' ${style({ width: 'var(--mo-calendar-max-width)', minHeight: 'var(--mo-calendar-min-height)' })}>
-				<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' ${style({ width: '100%' })}>
-					<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
-						@click=${() => this.navigatingDate = this.navigatingDate.addMonths(-1)}
-					></mo-icon-button>
-					<div>
-						<a class='navigatingMonth'>${this.navigatingDate.monthName}</a>
-						<a class='navigatingYear' @click=${() => this.toggleYearSelection()}>${this.navigatingDate.yearName}</a>
-					</div>
-					<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-						@click=${() => this.navigatingDate = this.navigatingDate.addMonths(+1)}
-					></mo-icon-button>
-				</mo-flex>
-
-				${this.yearSelection ? this.yearSelectionTemplate : this.daySelectionTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex alignItems='center' justifyContent='center' ${style({ width: 'var(--mo-calendar-max-width)', minHeight: 'var(--mo-calendar-min-height)' })}>
+				<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' ${style({ width: '100%' })}>
+					<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
+						@click=${() => this.navigatingDate = this.navigatingDate.addMonths(-1)}
+					></mo-icon-button>
+					<div>
+						<a class='navigatingMonth'>${this.navigatingDate.monthName}</a>
+						<a class='navigatingYear' @click=${() => this.toggleYearSelection()}>${this.navigatingDate.yearName}</a>
+					</div>
+					<mo-icon-button icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+						@click=${() => this.navigatingDate = this.navigatingDate.addMonths(+1)}
+					></mo-icon-button>
+				</mo-flex>
+
+				${this.yearSelection ? this.yearSelectionTemplate : this.daySelectionTemplate}
+			</mo-flex>
 		`;
     }
     get daySelectionTemplate() {
@@ -107,35 +107,35 @@ let Calendar = Calendar_1 = class Calendar extends Component {
         const range = this.rangeOf(start, end);
         const weekDaysInMonth = [...range.groupToMap(d => String(d.weekOfYear))]
             .sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
-        return html `
-			<mo-grid class='month'
-				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
-				columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
-				${style({ alignItems: 'center', justifyItems: 'center' })}
-			>
-				${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
-
-				${DateTime.getWeekDayNames().map(dayName => html `
-					<div class='monthHeader'>
-						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
-					</div>
-				`)}
-
-				${weekDaysInMonth.map(([weekNumber, days]) => html `
-					${this.includeWeekNumbers === false ? nothing : html `
-						<div class='week'>
-							${weekNumber}
-						</div>
-					`}
-
-					${days.map(day => this.getDayTemplate(day))}
-				`)}
-			</mo-grid>
+        return html `
+			<mo-grid class='month'
+				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
+				columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
+				${style({ alignItems: 'center', justifyItems: 'center' })}
+			>
+				${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
+
+				${DateTime.getWeekDayNames().map(dayName => html `
+					<div class='monthHeader'>
+						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
+					</div>
+				`)}
+
+				${weekDaysInMonth.map(([weekNumber, days]) => html `
+					${this.includeWeekNumbers === false ? nothing : html `
+						<div class='week'>
+							${weekNumber}
+						</div>
+					`}
+
+					${days.map(day => this.getDayTemplate(day))}
+				`)}
+			</mo-grid>
 		`;
     }
     getDayTemplate(day) {
-        return html `
-			<mo-flex class=${classMap(this.getDefaultDayElementClasses(day))}>${day.format({ day: 'numeric' })}</mo-flex>
+        return html `
+			<mo-flex class=${classMap(this.getDefaultDayElementClasses(day))}>${day.format({ day: 'numeric' })}</mo-flex>
 		`;
     }
     getDefaultDayElementClasses(day) {
@@ -150,16 +150,16 @@ let Calendar = Calendar_1 = class Calendar extends Component {
         };
     }
     get yearSelectionTemplate() {
-        return html `
-			<mo-scroller ${style({ height: '*' })}>
-				<mo-grid rows='repeat(50, var(--mo-calendar-day-size))' columns='repeat(4, 1fr)'>
-					${this.years.map(year => html `
-						<mo-flex class=${classMap({ year: true, selected: this.navigatingDate.year === year.year })} @click=${() => this.selectYear(year.year)}>
-							${year.yearName}
-						</mo-flex>
-					`)}
-				</mo-grid>
-			</mo-scroller>
+        return html `
+			<mo-scroller ${style({ height: '*' })}>
+				<mo-grid rows='repeat(50, var(--mo-calendar-day-size))' columns='repeat(4, 1fr)'>
+					${this.years.map(year => html `
+						<mo-flex class=${classMap({ year: true, selected: this.navigatingDate.year === year.year })} @click=${() => this.selectYear(year.year)}>
+							${year.yearName}
+						</mo-flex>
+					`)}
+				</mo-grid>
+			</mo-scroller>
 		`;
     }
     selectYear(year) {