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

package/README.md

@@ -1,3 +1,3 @@
-# Date Time Fields
-
+# Date Time Fields
+
 A set of date-time related fields.

package/dist/FieldDate.js

@@ -6,11 +6,11 @@ import { FieldDateBase } from './FieldDateBase.js';
 class DateCalendarSelectionAdapter extends CalendarSelectionAdapter {
     getDayTemplate(day, classInfo) {
         var _a, _b;
-        return html `
-			<mo-flex
-				class=${classMap(Object.assign(Object.assign({}, classInfo), { selected: (_b = (_a = this.calendar.value) === null || _a === void 0 ? void 0 : _a.equals(day)) !== null && _b !== void 0 ? _b : false }))}
-				@click=${() => this.select(day)}
-			>${day.format({ day: 'numeric' })}</mo-flex>
+        return html `
+			<mo-flex
+				class=${classMap(Object.assign(Object.assign({}, classInfo), { selected: (_b = (_a = this.calendar.value) === null || _a === void 0 ? void 0 : _a.equals(day)) !== null && _b !== void 0 ? _b : false }))}
+				@click=${() => this.select(day)}
+			>${day.format({ day: 'numeric' })}</mo-flex>
 		`;
     }
     getNavigatingDate(value) {

package/dist/FieldDateBase.js

@@ -22,70 +22,70 @@ export class FieldDateBase extends InputFieldComponent {
         return super.isActive || this.open;
     }
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-popover {
-				background: var(--mo-color-background);
-				box-shadow: var(--mo-shadow);
-				border-radius: var(--mo-border-radius);
-				color: var(--mo-color-foreground);
-				padding: 10px 4px;
-			}
+        return css `
+			${super.styles}
+
+			mo-popover {
+				background: var(--mo-color-background);
+				box-shadow: var(--mo-shadow);
+				border-radius: var(--mo-border-radius);
+				color: var(--mo-color-foreground);
+				padding: 10px 4px;
+			}
 		`;
     }
     get template() {
-        return html `
-			${super.template}
-			${this.popoverTemplate}
+        return html `
+			${super.template}
+			${this.popoverTemplate}
 		`;
     }
     get endSlotTemplate() {
-        return html `
-			${super.endSlotTemplate}
-			${this.calendarIconButtonTemplate}
+        return html `
+			${super.endSlotTemplate}
+			${this.calendarIconButtonTemplate}
 		`;
     }
     get inputTemplate() {
-        return html `
-			<input
-				part='input'
-				?readonly=${this.readonly}
-				?required=${this.required}
-				?disabled=${this.disabled}
-				.value=${live(this.inputStringValue || '')}
-				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
-				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
-			>
+        return html `
+			<input
+				part='input'
+				?readonly=${this.readonly}
+				?required=${this.required}
+				?disabled=${this.disabled}
+				.value=${live(this.inputStringValue || '')}
+				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
+				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
+			>
 		`;
     }
     get calendarIconButtonTemplate() {
-        return this.hideDatePicker ? nothing : html `
-			<mo-icon-button tabindex='-1' dense slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-				@click=${() => this.open = !this.open}>
-			</mo-icon-button>
+        return this.hideDatePicker ? nothing : html `
+			<mo-icon-button tabindex='-1' dense slot='end'
+				icon=${this.calendarIconButtonIcon}
+				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+				@click=${() => this.open = !this.open}>
+			</mo-icon-button>
 		`;
     }
     get popoverTemplate() {
-        return this.hideDatePicker ? nothing : html `
-			<mo-popover tabindex='-1' openOnFocus
-				.anchor=${this}
-				?open=${this.open}
-				@openChange=${(e) => this.open = e.detail}
-			>
-				${this.calendarTemplate}
-			</mo-popover>
+        return this.hideDatePicker ? nothing : html `
+			<mo-popover tabindex='-1' openOnFocus
+				.anchor=${this}
+				?open=${this.open}
+				@openChange=${(e) => this.open = e.detail}
+			>
+				${this.calendarTemplate}
+			</mo-popover>
 		`;
     }
     get calendarTemplate() {
-        return html `
-			<mo-selectable-calendar
-				.selectionAdapterConstructor=${this.calendarSelectionAdapterConstructor}
-				.value=${this.value}
-				@change=${(e) => this.handleCalendarChange(e.detail)}
-			></mo-selectable-calendar>
+        return html `
+			<mo-selectable-calendar
+				.selectionAdapterConstructor=${this.calendarSelectionAdapterConstructor}
+				.value=${this.value}
+				@change=${(e) => this.handleCalendarChange(e.detail)}
+			></mo-selectable-calendar>
 		`;
     }
     handleCalendarChange(value) {

package/dist/FieldDateRange.js

@@ -9,26 +9,26 @@ class DateRangeCalendarSelectionAdapter extends CalendarSelectionAdapter {
         this.currentSelection = 0 /* DateRangeCalendarSelectionAdapterCurrentSelection.StartDate */;
     }
     get styles() {
-        return css `
-			.day.inSelectionRange:not(.selected) {
-				background: var(--mo-color-accent-transparent);
-			}
-
-			.day.inSelectionRange {
-				border-radius: 0px;
-			}
-
-			.day.selected.first {
-				border-radius: 100px 0 0 100px;
-			}
-
-			.day.selected.last {
-				border-radius: 0 100px 100px 0;
-			}
-
-			.day.selected.first.last {
-				border-radius: 100px;
-			}
+        return css `
+			.day.inSelectionRange:not(.selected) {
+				background: var(--mo-color-accent-transparent);
+			}
+
+			.day.inSelectionRange {
+				border-radius: 0px;
+			}
+
+			.day.selected.first {
+				border-radius: 100px 0 0 100px;
+			}
+
+			.day.selected.last {
+				border-radius: 0 100px 100px 0;
+			}
+
+			.day.selected.first.last {
+				border-radius: 100px;
+			}
 		`;
     }
     getDayTemplate(day, classInfo) {
@@ -36,11 +36,11 @@ class DateRangeCalendarSelectionAdapter extends CalendarSelectionAdapter {
         const firstEquals = !(dateRange === null || dateRange === void 0 ? void 0 : dateRange.start) ? false : day.equals(dateRange.start);
         const lastEquals = !(dateRange === null || dateRange === void 0 ? void 0 : dateRange.end) ? false : day.equals(dateRange.end);
         const classes = Object.assign(Object.assign({}, classInfo), { inSelectionRange: !dateRange ? false : dateRange.includes(day), selected: firstEquals || lastEquals, first: firstEquals, last: lastEquals });
-        return html `
-			<mo-flex
-				class=${classMap(classes)}
-				@click=${() => this.handleClick(day)}
-			>${day.format({ day: 'numeric' })}</mo-flex>
+        return html `
+			<mo-flex
+				class=${classMap(classes)}
+				@click=${() => this.handleClick(day)}
+			>${day.format({ day: 'numeric' })}</mo-flex>
 		`;
     }
     getNavigatingDate(value) {
@@ -84,23 +84,23 @@ let FieldDateRange = class FieldDateRange extends FieldDateBase {
     }
     get calendarTemplate() {
         var _a, _b;
-        return html `
-			<mo-flex>
-				<mo-flex direction='horizontal' alignItems='center' ${style({ textAlign: 'center', height: '30px' })}>
-						<div ${style({ width: '*', fontWeight: '500', cursor: 'pointer' })}
-							${style({ color: this.currentSelection === 0 /* DateRangeCalendarSelectionAdapterCurrentSelection.StartDate */ ? 'var(--mo-color-accent)' : 'unset' })}
-							@click=${() => this.currentSelection = 0 /* DateRangeCalendarSelectionAdapterCurrentSelection.StartDate */}
-						>${!((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) ? 'Start' : this.value.start.formatAsDate()}</div>
-
-						<div ${style({ color: 'var(--mo-color-gray)' })}>bis</div>
-
-						<div ${style({ width: '*', fontWeight: '500', cursor: 'pointer' })}
-							${style({ color: this.currentSelection === 1 /* DateRangeCalendarSelectionAdapterCurrentSelection.EndDate */ ? 'var(--mo-color-accent)' : 'unset' })}
-							@click=${() => this.currentSelection = 1 /* DateRangeCalendarSelectionAdapterCurrentSelection.EndDate */}
-						>${!((_b = this.value) === null || _b === void 0 ? void 0 : _b.end) ? 'Ende' : this.value.end.formatAsDate()}</div>
-				</mo-flex>
-				${super.calendarTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex>
+				<mo-flex direction='horizontal' alignItems='center' ${style({ textAlign: 'center', height: '30px' })}>
+						<div ${style({ width: '*', fontWeight: '500', cursor: 'pointer' })}
+							${style({ color: this.currentSelection === 0 /* DateRangeCalendarSelectionAdapterCurrentSelection.StartDate */ ? 'var(--mo-color-accent)' : 'unset' })}
+							@click=${() => this.currentSelection = 0 /* DateRangeCalendarSelectionAdapterCurrentSelection.StartDate */}
+						>${!((_a = this.value) === null || _a === void 0 ? void 0 : _a.start) ? 'Start' : this.value.start.formatAsDate()}</div>
+
+						<div ${style({ color: 'var(--mo-color-gray)' })}>bis</div>
+
+						<div ${style({ width: '*', fontWeight: '500', cursor: 'pointer' })}
+							${style({ color: this.currentSelection === 1 /* DateRangeCalendarSelectionAdapterCurrentSelection.EndDate */ ? 'var(--mo-color-accent)' : 'unset' })}
+							@click=${() => this.currentSelection = 1 /* DateRangeCalendarSelectionAdapterCurrentSelection.EndDate */}
+						>${!((_b = this.value) === null || _b === void 0 ? void 0 : _b.end) ? 'Ende' : this.value.end.formatAsDate()}</div>
+				</mo-flex>
+				${super.calendarTemplate}
+			</mo-flex>
 		`;
     }
     valueToInputValue(value) {

package/dist/FieldTime.js

@@ -7,9 +7,9 @@ let FieldTime = class FieldTime extends FieldText {
         this.inputType = 'time';
     }
     get startSlotTemplate() {
-        return html `
-			<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
-			${super.startSlotTemplate}
+        return html `
+			<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
+			${super.startSlotTemplate}
 		`;
     }
 };

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: large;
+				transition: 250ms;
+			}
+
+			.navigatingYear:hover {
+				color: var(--mo-color-accent);
+				cursor: pointer;
+			}
+
+			.day, .year {
+				text-align: center;
+				border-radius: 100px;
+				cursor: pointer;
+				transition: 250ms;
+				font-weight: 500;
+				user-select: none;
+				font-size: medium;
+				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) {