@3mo/date-time-fields 0.5.11 → 0.5.12-preview.0

package/dist/FieldDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDate.d.ts","sourceRoot":"","sources":["../FieldDate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAO/D;;;;GAIG;AACH,qBACa,SAAU,SAAQ,aAAa;IACtB,SAAS,yBAA6B;IACtC,KAAK,SAAY;CACtC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,aAAa,CAAA;KAC9B;CACD"}
+{"version":3,"file":"FieldDate.d.ts","sourceRoot":"","sources":["../FieldDate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAM/D;;;;GAIG;AACH,qBACa,SAAU,SAAQ,aAAa;IACtB,SAAS,yBAA6B;IACtC,KAAK,SAAY;CACtC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,aAAa,CAAA;KAC9B;CACD"}

package/dist/FieldDate.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { component, property } from '@a11d/lit';
+import { Localizer } from '@3mo/localization';
 import { FieldDateTime } from './FieldDateTime.js';
 import { FieldDateTimePrecision } from './FieldDateTimeBase.js';
-import { Localizer } from '@3mo/localization';
 Localizer.dictionaries.add('de', {
     'Date': 'Datum',
 });

package/dist/FieldDateTimeBase.d.ts

@@ -20,6 +20,7 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     pickerHidden: boolean;
     shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
     precision: FieldDateTimePrecision;
+    private readonly smQuery;
     private lastValue?;
     protected readonly calendarIconButtonIcon: MaterialIcon;
     protected abstract get navigatingDate(): DateTime;
@@ -39,6 +40,7 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected get calendarIconButtonTemplate(): HTMLTemplateResult;
     protected get popoverTemplate(): HTMLTemplateResult;
     protected get popoverContentTemplate(): HTMLTemplateResult;
+    protected get compactPopoverContentTemplate(): HTMLTemplateResult;
     protected get dateTemplate(): HTMLTemplateResult;
     private get yearListTemplate();
     private get monthListTemplate();

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiD,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,oBAAY,sBAAsB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CACjB;AAcD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAWrE,IAAI,UAAQ;IACc,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,OAAO,CAAC,SAAS,CAAC,CAAG;IAErB,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,cAAc,IAAI,QAAQ,CAAA;IAEjD,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAYxD;IAED,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAWzC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ;cAWrB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAwCzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAKrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAKpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiD,MAAM,WAAW,CAAA;AAElG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,oBAAY,sBAAsB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CACjB;AAcD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAWrE,IAAI,UAAQ;IACc,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuD;IAE/E,OAAO,CAAC,SAAS,CAAC,CAAG;IAErB,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,cAAc,IAAI,QAAQ,CAAA;IAEjD,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAYxD;IAED,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAWzC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ;cAWrB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAwCzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAKrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,6BAA6B,uBAU1C;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAqB3B;IAED,OAAO,KAAK,iBAAiB,GA0B5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAKpF"}

package/dist/FieldDateTimeBase.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { cache, css, html, live, property, style, bind } from '@a11d/lit';
+import { MediaQueryController } from '@3mo/media-query-observer';
 import { InputFieldComponent } from '@3mo/field';
 export var FieldDateTimePrecision;
 (function (FieldDateTimePrecision) {
@@ -34,6 +35,7 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.pickerHidden = false;
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
+        this.smQuery = new MediaQueryController(this, '(max-width: 576px)');
         this.calendarIconButtonIcon = 'today';
     }
     get formatOptions() {
@@ -162,13 +164,24 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get popoverContentTemplate() {
-        return html `
+        return this.smQuery.matches ? this.compactPopoverContentTemplate : html `
 			<mo-flex id='selector' direction='horizontal' style='height: 100%'>
 				${this.dateTemplate}
 				${this.timeTemplate}
 			</mo-flex>
 		`;
     }
+    get compactPopoverContentTemplate() {
+        return html `
+			<mo-flex alignItems='center' ${style({ paddingBlock: '10px' })}>
+				<mo-flex direction='horizontal' gap='8px' ${style({ width: 'calc(100% - 20px)' })}>
+					${this.monthListTemplate}
+					${this.yearListTemplate}
+				</mo-flex>
+				${this.dayTemplate}
+			</mo-flex>
+		`;
+    }
     get dateTemplate() {
         return html `
 			${this.yearListTemplate}
@@ -177,6 +190,18 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get yearListTemplate() {
+        if (this.smQuery.matches) {
+            return html `
+				<mo-field-year ${style({ width: '80px' })}
+					.value=${this.selectedDate?.getFullYear()}
+					@change=${(e) => {
+                const currentDate = this.selectedDate ?? new DateTime();
+                currentDate.setFullYear(e.detail);
+                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Year);
+            }}
+				></mo-field-year>
+			`;
+        }
         return html `
 			<mo-year-list
 				.navigatingValue=${this.navigatingDate}
@@ -186,7 +211,23 @@ export class FieldDateTimeBase extends InputFieldComponent {
 		`;
     }
     get monthListTemplate() {
-        return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
+        if ([FieldDateTimePrecision.Year].includes(this.precision)) {
+            return html.nothing;
+        }
+        if (this.smQuery.matches) {
+            return html `
+				<mo-field-month ${style({ flexGrow: '1' })}
+					.navigatingDate=${this.navigatingDate}
+					.value=${this.selectedDate?.getMonth()}
+					@change=${(e) => {
+                const currentDate = this.selectedDate ?? new DateTime();
+                currentDate.setMonth(e.detail);
+                this.handleSelectedDateChange(currentDate, FieldDateTimePrecision.Month);
+            }}
+				></mo-field-month>
+			`;
+        }
+        return html `
 			<mo-month-list
 				.navigatingValue=${this.navigatingDate}
 				.value=${this.selectedDate}