npm - @anglr/datetime - Versions diffs - 5.0.0-beta.20221020045240 → 5.0.0-beta.20221020124055 - Mend

@anglr/datetime 5.0.0-beta.20221020045240 → 5.0.0-beta.20221020124055

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/es2015/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js CHANGED Viewed

@@ -4,10 +4,13 @@ import { extend, isBlank, nameof } from '@jscrpt/common';
 import { Subscription } from 'rxjs';
 import { DATE_TIME_PICKER_OPTIONS } from '../../misc/tokens';
 import { DayPickerSAComponent } from '../dayPicker/dayPicker.component';
+import { MonthPickerSAComponent } from '../monthPicker/monthPicker.component';
 import { formatDateTime, parseDateTime } from '../../../../misc/utils';
-import { DateTimeValueFormat } from '../../../../misc/enums';
 import { DateTimeDirective } from '../../../dateTime/directives';
+import { DateValueProvider } from '../../../../services';
 import * as i0 from "@angular/core";
+import * as i1 from "../../../../services";
+//TODO: use mixin for set internal
 /**
  * Text to be displayed when configuration, options are corrupted
  */
@@ -19,6 +22,7 @@ const defaultOptions = {
     defaultPeriod: 'day',
     periodsDefinition: {
         'day': DayPickerSAComponent,
+        'month': MonthPickerSAComponent,
     },
 };
 /**
@@ -26,9 +30,10 @@ const defaultOptions = {
  */
 export class DateTimePickerComponent extends DateTimeDirective {
     //######################### constructor #########################
-    constructor(position, options) {
+    constructor(position, valueProvider, options) {
         super();
         this.position = position;
+        this.valueProvider = valueProvider;
         //######################### public properties - outputs #########################
         /**
          * @inheritdoc
@@ -44,6 +49,18 @@ export class DateTimePickerComponent extends DateTimeDirective {
             throw new Error(CORRUPTED_CONFIG_TEXT);
         }
     }
+    //######################### public properties - inputs #########################
+    /**
+     * @inheritdoc
+     */
+    get value() {
+        return this.ɵValue;
+    }
+    set value(value) {
+        //accepts all available formats
+        this.setInternalValue(value);
+        this.ɵValue = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);
+    }
     /**
      * Options for date time picker
      */
@@ -56,18 +73,49 @@ export class DateTimePickerComponent extends DateTimeDirective {
             this.ɵOptions.periodsDefinition = value.periodsDefinition;
         }
     }
+    //######################### public methods - implementation of OnInit #########################
+    /**
+     * Initialize component
+     */
+    ngOnInit() {
+        var _a;
+        //empty value show now
+        if (isBlank(this.value)) {
+            const now = this.dateApi.now();
+            this.showPicker(this.displayedPeriodType, now.value);
+        }
+        else {
+            const val = (_a = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue)) !== null && _a !== void 0 ? _a : this.dateApi.now();
+            this.showPicker(this.displayedPeriodType, val.value);
+        }
+    }
     //######################### public methods - implementation of OnChanges #########################
     /**
      * Called when input value changes
      */
     ngOnChanges(changes) {
+        var _a;
+        if (!this.component) {
+            return;
+        }
+        const component = this.component.instance;
+        let invalidate = false;
+        if (nameof('maxDateTime') in changes) {
+            component.maxDate = this.maxDateTime;
+            invalidate = true;
+        }
+        if (nameof('minDateTime') in changes) {
+            component.minDate = this.minDateTime;
+            invalidate = true;
+        }
         if (nameof('value') in changes) {
-            //empty value show now
-            if (isBlank(this.value)) {
-                const now = this.dateApi.now();
-                this.showPicker(this.displayedPeriodType, now.value);
-                return;
-            }
+            const val = (_a = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue)) !== null && _a !== void 0 ? _a : this.dateApi.now();
+            component.display = val.isValid() ? val.value : this.dateApi.now().value;
+            component.value = this.internalValue;
+            invalidate = true;
+        }
+        if (this.component && invalidate) {
+            this.component.instance.invalidateVisuals();
         }
     }
     //######################### public methods - implementation of OnDestroy #########################
@@ -83,6 +131,38 @@ export class DateTimePickerComponent extends DateTimeDirective {
         this.periodChangesSubscription = null;
     }
     //######################### protected methods #########################
+    /**
+     * Sets internal value and fix lowest time difference
+     * @param value - Value to be set
+     */
+    setInternalValue(value) {
+        this.internalValue = parseDateTime(value, this.dateApi, null, this.customFormat);
+        if (isBlank(this.internalValue)) {
+            return;
+        }
+        //ranged value
+        if (Array.isArray(this.internalValue)) {
+            const [from, to] = this.internalValue;
+            if (from) {
+                const val = this.valueProvider.getValue(from.value, this.customFormat).from;
+                if (val) {
+                    this.internalValue[0] = this.dateApi.getValue(val, this.customFormat);
+                }
+            }
+            if (to) {
+                const val = this.valueProvider.getValue(to.value, this.customFormat).to;
+                if (val) {
+                    this.internalValue[1] = this.dateApi.getValue(val, this.customFormat);
+                }
+            }
+        }
+        else {
+            const val = this.valueProvider.getValue(this.internalValue.value, this.customFormat).from;
+            if (val) {
+                this.internalValue = this.dateApi.getValue(val, this.customFormat);
+            }
+        }
+    }
     /**
      * Shows picker
      * @param type - Type of period that should be displayed
@@ -95,29 +175,70 @@ export class DateTimePickerComponent extends DateTimeDirective {
         }
         //create new component and destroy previous one
         if (!this.component || (this.component && type != this.displayedPeriodType)) {
+            this.displayedPeriodType = type;
             (_a = this.periodChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
             this.periodChangesSubscription = new Subscription();
             (_b = this.component) === null || _b === void 0 ? void 0 : _b.destroy();
             this.component = this.pickerContainer.createComponent(type);
             this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() => {
-                var _a;
+                var _a, _b;
                 const component = (_a = this.component) === null || _a === void 0 ? void 0 : _a.instance;
                 if (!component) {
                     return;
                 }
-                this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);
+                if (!Array.isArray(component.value)) {
+                    this.setInternalValue((_b = component.value) === null || _b === void 0 ? void 0 : _b.value);
+                }
+                else {
+                    //TODO: handle ranges
+                }
+                this.value = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);
                 this.valueChange.emit();
             }));
             this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));
             this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));
         }
         const component = this.component.instance;
-        component.canScaleDown = false,
-            component.canScaleUp = false;
+        component.canScaleDown = this.canScaleDown(),
+            component.canScaleUp = this.canScaleUp();
         component.display = displayDate;
         // component.options
-        //TODO: maybe add support for format!
-        component.value = parseDateTime(this.value, this.dateApi, null, null);
+        component.maxDate = this.maxDateTime;
+        component.minDate = this.minDateTime;
+        component.value = this.internalValue;
+        component.invalidateVisuals();
+    }
+    /**
+     * Gets indication whether current period can be scaled down
+     * @param periods - Array of defined period names
+     * @param index - Index of displayed period
+     */
+    canScaleDown(periods, index) {
+        periods !== null && periods !== void 0 ? periods : (periods = Object.keys(this.ɵOptions.periodsDefinition));
+        index !== null && index !== void 0 ? index : (index = periods.indexOf(this.displayedPeriodName));
+        if (index < 0) {
+            throw new Error(CORRUPTED_CONFIG_TEXT);
+        }
+        if (index <= 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Gets indication whether current period can be scaled up
+     * @param periods - Array of defined period names
+     * @param index - Index of displayed period
+     */
+    canScaleUp(periods, index) {
+        periods !== null && periods !== void 0 ? periods : (periods = Object.keys(this.ɵOptions.periodsDefinition));
+        index !== null && index !== void 0 ? index : (index = periods.indexOf(this.displayedPeriodName));
+        if (index < 0) {
+            throw new Error(CORRUPTED_CONFIG_TEXT);
+        }
+        if (index + 1 >= periods.length) {
+            return false;
+        }
+        return true;
     }
     /**
      * Gets type that is above current period picker
@@ -125,15 +246,11 @@ export class DateTimePickerComponent extends DateTimeDirective {
     getUpperType() {
         const periods = Object.keys(this.ɵOptions.periodsDefinition);
         const index = periods.indexOf(this.displayedPeriodName);
-        if (index < 0) {
-            throw new Error(CORRUPTED_CONFIG_TEXT);
-        }
-        if (index >= periods.length) {
+        if (!this.canScaleUp(periods, index)) {
             return this.displayedPeriodType;
         }
         this.displayedPeriodName = periods[index + 1];
-        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];
-        return this.displayedPeriodType;
+        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];
     }
     /**
      * Gets type that is below current period picker
@@ -141,18 +258,14 @@ export class DateTimePickerComponent extends DateTimeDirective {
     getLowerType() {
         const periods = Object.keys(this.ɵOptions.periodsDefinition);
         const index = periods.indexOf(this.displayedPeriodName);
-        if (index < 0) {
-            throw new Error(CORRUPTED_CONFIG_TEXT);
-        }
-        if (index <= 0) {
+        if (!this.canScaleDown(periods, index)) {
             return this.displayedPeriodType;
         }
         this.displayedPeriodName = periods[index - 1];
-        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];
-        return this.displayedPeriodType;
+        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: i1.DateValueProvider }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -160,7 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POSITION]
-                }] }, { type: undefined, decorators: [{
+                }] }, { type: i1.DateValueProvider }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_PICKER_OPTIONS]
                 }, {

package/es2015/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../../interfaces';\nimport {DateTimeInputOutputValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\nimport {DateTimeDirective} from '../../../dateTime/directives';\n\n/*\n Text to be displayed when configuration, options are corrupted\n /\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/\n Default options for date time picker\n /\nconst defaultOptions: DateTimePickerOptions = \n{\n defaultPeriod: 'day',\n periodsDefinition:\n {\n 'day': DayPickerSAComponent,\n },\n};\n\n/\n Component used for displaying date time picker\n /\n@Component(\n{\n selector: 'date-time-picker',\n templateUrl: 'dateTimePicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> extends DateTimeDirective<TDate> implements DateTimeInputValue<TDate>, OnChanges, OnDestroy\n{\n //######################### protected properties #########################\n \n /\n Subscription for changes in date time period picker\n /\n protected periodChangesSubscription: Subscription\|undefined\|null;\n\n /\n Options for date time picker\n /\n protected ɵOptions: DateTimePickerOptions<TDate>;\n\n /\n Currently displayed period type\n /\n protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n /\n Name of period which is currently displayed\n /\n protected displayedPeriodName: string;\n\n /\n Instance of created date time period picker\n /\n protected component: ComponentRef<DateTimePicker<TDate>>\|undefined\|null;\n \n //######################### protected properties - children #########################\n\n /\n Container used for displaying pickers for specific date time part\n /\n @ViewChild('container', {read: ViewContainerRef, static: true})\n protected pickerContainer: ViewContainerRef\|undefined\|null;\n\n //######################### public properties - inputs #########################\n\n /\n @inheritdoc\n /\n @Input()\n public value: DateTimeInputOutputValue<TDate>\|undefined\|null;\n\n /\n Options for date time picker\n /\n @Input()\n public get options(): Partial<DateTimePickerOptions<TDate>>\n {\n return this.ɵOptions;\n }\n public set options(value: Partial<DateTimePickerOptions<TDate>>)\n {\n this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n if(value?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = value.periodsDefinition;\n }\n }\n\n //######################### public properties - outputs #########################\n\n /\n @inheritdoc\n /\n @Output()\n public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### constructor #########################\n constructor(@Inject(POSITION) protected position: Position,\n @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n {\n super();\n\n this.ɵOptions = extend(true, {}, defaultOptions, options);\n \n if(options?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = options.periodsDefinition;\n }\n\n this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n if(!this.displayedPeriodType)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /\n Called when input value changes\n /\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<DateTimePickerComponent>('value') in changes)\n {\n //empty value show now\n if(isBlank(this.value))\n {\n const now = this.dateApi.now();\n\n this.showPicker(this.displayedPeriodType, now.value);\n\n return;\n }\n\n }\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /\n Called when component is destroyed\n /\n public override ngOnDestroy(): void\n {\n super.ngOnDestroy();\n\n this.component?.destroy();\n this.component = null;\n\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = null;\n }\n\n //######################### protected methods #########################\n\n /\n Shows picker\n * @param type - Type of period that should be displayed\n * @param displayDate - Display date to be shown\n /\n protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n {\n if(!this.pickerContainer)\n {\n return;\n }\n\n //create new component and destroy previous one\n if(!this.component \|\| (this.component && type != this.displayedPeriodType))\n {\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = new Subscription();\n this.component?.destroy();\n this.component = this.pickerContainer.createComponent(type);\n\n this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n {\n const component = this.component?.instance;\n\n if(!component)\n {\n return;\n }\n\n this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);\n this.valueChange.emit();\n }));\n\n this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n }\n\n const component = this.component.instance;\n\n component.canScaleDown = false,\n component.canScaleUp = false;\n component.display = displayDate;\n // component.options\n //TODO: maybe add support for format!\n component.value = parseDateTime(this.value, this.dateApi, null, null);\n }\n\n /\n Gets type that is above current period picker\n /\n protected getUpperType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index >= periods.length)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index + 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n\n /\n Gets type that is below current period picker\n */\n protected getLowerType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index <= 0)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index - 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n}","<ng-container #container></ng-container>"]}
1	+ {"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef, OnInit} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../../interfaces';\nimport {DateTimeInputOutputValue, DateTimeObjectValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {MonthPickerSAComponent} from '../monthPicker/monthPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeDirective} from '../../../dateTime/directives';\nimport {DateValueProvider} from '../../../../services';\n\n//TODO: use mixin for set internal\n\n/*\n Text to be displayed when configuration, options are corrupted\n /\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/\n Default options for date time picker\n /\nconst defaultOptions: DateTimePickerOptions = \n{\n defaultPeriod: 'day',\n periodsDefinition:\n {\n 'day': DayPickerSAComponent,\n 'month': MonthPickerSAComponent,\n },\n};\n\n/\n Component used for displaying date time picker\n /\n@Component(\n{\n selector: 'date-time-picker',\n templateUrl: 'dateTimePicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> extends DateTimeDirective<TDate> implements DateTimeInputValue<TDate>, OnInit, OnChanges, OnDestroy\n{\n //######################### protected properties #########################\n\n /\n Current value of date time, could be string, unix timestamp, Date, TDate object, or ranged DateTimeValue\n /\n protected ɵValue: DateTimeInputOutputValue<TDate>\|undefined\|null;\n\n /\n Internal representation of current date time value\n /\n protected internalValue: DateTimeObjectValue<TDate>\|undefined\|null;\n \n /\n Subscription for changes in date time period picker\n /\n protected periodChangesSubscription: Subscription\|undefined\|null;\n\n /\n Options for date time picker\n /\n protected ɵOptions: DateTimePickerOptions<TDate>;\n\n /\n Currently displayed period type\n /\n protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n /\n Name of period which is currently displayed\n /\n protected displayedPeriodName: string;\n\n /\n Instance of created date time period picker\n /\n protected component: ComponentRef<DateTimePicker<TDate>>\|undefined\|null;\n \n //######################### protected properties - children #########################\n\n /\n Container used for displaying pickers for specific date time part\n /\n @ViewChild('container', {read: ViewContainerRef, static: true})\n protected pickerContainer: ViewContainerRef\|undefined\|null;\n\n //######################### public properties - inputs #########################\n\n /\n @inheritdoc\n /\n @Input()\n public get value(): DateTimeInputOutputValue<TDate>\|undefined\|null\n {\n return this.ɵValue;\n }\n public set value(value: DateTimeInputOutputValue<TDate>\|undefined\|null)\n {\n //accepts all available formats\n this.setInternalValue(value);\n this.ɵValue = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);\n }\n\n /\n Options for date time picker\n /\n @Input()\n public get options(): Partial<DateTimePickerOptions<TDate>>\n {\n return this.ɵOptions;\n }\n public set options(value: Partial<DateTimePickerOptions<TDate>>)\n {\n this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n if(value?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = value.periodsDefinition;\n }\n }\n\n //######################### public properties - outputs #########################\n\n /\n @inheritdoc\n /\n @Output()\n public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### constructor #########################\n constructor(@Inject(POSITION) protected position: Position,\n protected valueProvider: DateValueProvider<TDate>,\n @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n {\n super();\n\n this.ɵOptions = extend(true, {}, defaultOptions, options);\n \n if(options?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = options.periodsDefinition;\n }\n\n this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n if(!this.displayedPeriodType)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /\n Initialize component\n /\n public ngOnInit(): void\n {\n //empty value show now\n if(isBlank(this.value))\n {\n const now = this.dateApi.now();\n\n this.showPicker(this.displayedPeriodType, now.value);\n }\n else\n {\n const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();\n\n this.showPicker(this.displayedPeriodType, val.value);\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /\n Called when input value changes\n /\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(!this.component)\n {\n return;\n }\n\n const component = this.component.instance;\n let invalidate: boolean = false;\n\n if(nameof<DateTimePickerComponent>('maxDateTime') in changes)\n {\n component.maxDate = this.maxDateTime;\n invalidate = true;\n }\n\n if(nameof<DateTimePickerComponent>('minDateTime') in changes)\n {\n component.minDate = this.minDateTime;\n invalidate = true;\n }\n\n if(nameof<DateTimePickerComponent>('value') in changes)\n {\n const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();\n\n component.display = val.isValid() ? val.value : this.dateApi.now().value;\n component.value = this.internalValue;\n invalidate = true;\n }\n\n if(this.component && invalidate)\n {\n this.component.instance.invalidateVisuals();\n }\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /\n Called when component is destroyed\n /\n public override ngOnDestroy(): void\n {\n super.ngOnDestroy();\n\n this.component?.destroy();\n this.component = null;\n\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = null;\n }\n\n //######################### protected methods #########################\n\n /\n Sets internal value and fix lowest time difference\n * @param value - Value to be set\n /\n protected setInternalValue(value: DateTimeInputOutputValue<TDate>\|undefined\|null): void\n {\n this.internalValue = parseDateTime(value, this.dateApi, null, this.customFormat);\n\n if(isBlank(this.internalValue))\n {\n return;\n }\n\n //ranged value\n if(Array.isArray(this.internalValue))\n {\n const [from, to] = this.internalValue;\n\n if(from)\n {\n const val = this.valueProvider.getValue(from.value, this.customFormat).from;\n\n if(val)\n {\n this.internalValue[0] = this.dateApi.getValue(val, this.customFormat);\n }\n }\n\n if(to)\n {\n const val = this.valueProvider.getValue(to.value, this.customFormat).to;\n\n if(val)\n {\n this.internalValue[1] = this.dateApi.getValue(val, this.customFormat);\n }\n }\n }\n else\n {\n const val = this.valueProvider.getValue(this.internalValue.value, this.customFormat).from;\n\n if(val)\n {\n this.internalValue = this.dateApi.getValue(val, this.customFormat);\n }\n }\n }\n\n /\n Shows picker\n * @param type - Type of period that should be displayed\n * @param displayDate - Display date to be shown\n /\n protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n {\n if(!this.pickerContainer)\n {\n return;\n }\n\n //create new component and destroy previous one\n if(!this.component \|\| (this.component && type != this.displayedPeriodType))\n {\n this.displayedPeriodType = type;\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = new Subscription();\n this.component?.destroy();\n this.component = this.pickerContainer.createComponent(type);\n\n this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n {\n const component = this.component?.instance;\n\n if(!component)\n {\n return;\n }\n\n if(!Array.isArray(component.value))\n {\n this.setInternalValue(component.value?.value);\n }\n else\n {\n //TODO: handle ranges\n }\n\n this.value = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);\n this.valueChange.emit();\n }));\n\n this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n }\n\n const component = this.component.instance;\n\n component.canScaleDown = this.canScaleDown(),\n component.canScaleUp = this.canScaleUp();\n component.display = displayDate;\n // component.options\n component.maxDate = this.maxDateTime;\n component.minDate = this.minDateTime;\n component.value = this.internalValue;\n component.invalidateVisuals();\n }\n\n /\n Gets indication whether current period can be scaled down\n * @param periods - Array of defined period names\n * @param index - Index of displayed period\n /\n protected canScaleDown(periods?: string[], index?: number): boolean\n {\n periods ??= Object.keys(this.ɵOptions.periodsDefinition);\n index ??= periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index <= 0)\n {\n return false;\n }\n\n return true;\n }\n\n /\n Gets indication whether current period can be scaled up\n * @param periods - Array of defined period names\n * @param index - Index of displayed period\n /\n protected canScaleUp(periods?: string[], index?: number): boolean\n {\n periods ??= Object.keys(this.ɵOptions.periodsDefinition);\n index ??= periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index + 1 >= periods.length)\n {\n return false;\n }\n\n return true;\n }\n\n /\n Gets type that is above current period picker\n /\n protected getUpperType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(!this.canScaleUp(periods, index))\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index + 1];\n\n return this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n }\n\n /\n Gets type that is below current period picker\n */\n protected getLowerType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(!this.canScaleDown(periods, index))\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index - 1];\n\n return this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n }\n}","<ng-container #container></ng-container>"]}

package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js CHANGED Viewed

@@ -1,8 +1,7 @@
-import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DateTimePeriodPickerBase } from '../dateTimePeriodPickerBase';
 import { DatePipesModule } from '../../../datePipes.module';
-import { DATE_API } from '../../../../misc/tokens';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "../../../../pipes/dateFormat.pipe";
@@ -11,58 +10,136 @@ import * as i2 from "../../../../pipes/dateFormat.pipe";
  */
 export class DayPickerSAComponent extends DateTimePeriodPickerBase {
     //######################### constructor #########################
-    constructor(dateApi) {
+    constructor() {
         super();
-        this.dateApi = dateApi;
+        //######################### protected properties #########################
+        /**
+         * Stored this picker month data
+         */
+        this.thisMonthData = [];
         //######################### protected properties - template bindings #########################
         /**
          * Names of days
          */
         this.weekdays = [];
-        /**
-         * Array of period data to be displayed
-         * @internal
-         */
-        this.periodData = [];
+        this.weekdays = this.dateApi.weekdaysShort();
     }
     //######################### protected methods - template bindings #########################
+    /**
+     * Selects day as value of date time picker
+     * @param dayData - Day data that were selected
+     */
     selectDay(dayData) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        if (dayData.disabled) {
+            return;
+        }
+        //no value selected yet
         if (!this.value) {
             this.value = (_b = (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : this.dateApi.getValue((_c = this.display) !== null && _c !== void 0 ? _c : new Date());
         }
         //single value
         if (!Array.isArray(this.value)) {
+            this.value.year(dayData.dateObj.year());
+            this.value.month(dayData.dateObj.month());
             this.value.dayOfMonth(dayData.day);
+            //other month was selected
+            if (dayData.otherMonth) {
+                this.value.month(dayData.dateObj.month());
+                (_d = this.displayDate) === null || _d === void 0 ? void 0 : _d.month(dayData.dateObj.month());
+            }
             this.value.updateOriginal();
             this.valueChangeSubject.next();
         }
+        else {
+            //TODO: range
+        }
+        this.render();
+        this.changeDetector.detectChanges();
     }
     /**
      * Changes displayed month to next month
-     * @param event - Event that occured
      */
-    nextMonth(event) {
+    nextMonth() {
         var _a;
-        event.preventDefault();
-        event.stopPropagation();
-        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.addMonths(1);
-        // this.display(this.displayDate);
+        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.addMonths(1).updateOriginal();
+        this.render();
     }
     /**
      * Changes displayed month to previous month
-     * @param event - Event that occured
      */
-    previousMonth(event) {
+    previousMonth() {
         var _a;
-        event.preventDefault();
-        event.stopPropagation();
-        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.subtractMonths(1);
-        // this.display(this.displayDate!);
+        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.subtractMonths(1).updateOriginal();
+        this.render();
+    }
+    //######################### protected methods #########################
+    /**
+     * Renders current day picker data
+     */
+    render() {
+        var _a, _b;
+        //same month only data change
+        if (this.displayedDate && ((_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.isSameMonth(this.displayedDate))) {
+            this.setActive();
+            this.updateMinMax();
+            return;
+        }
+        this.displayedDate = (_b = this.displayDate) === null || _b === void 0 ? void 0 : _b.value;
+        this.periodData = [];
+        this.thisMonthData = [];
+        if (!this.displayDate) {
+            return;
+        }
+        const currentMonthDate = this.displayDate.value;
+        const today = this.dateApi.now().value;
+        this.displayDate
+            .startOfMonth()
+            .updateOriginal()
+            .startOfWeek();
+        do {
+            for (let x = 0; x < 7; x++) {
+                const day = this.displayDate.dayOfMonth();
+                const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);
+                const data = {
+                    active: false,
+                    disabled: false,
+                    date: this.displayDate.value,
+                    otherMonth: otherMonth,
+                    today: this.displayDate.isSameDay(today),
+                    weekend: this.displayDate.isWeekend(),
+                    day: day,
+                    dateObj: this.displayDate.clone(),
+                };
+                this.periodData.push(data);
+                if (!otherMonth) {
+                    this.thisMonthData.push(data);
+                }
+                this.displayDate.addDays(1);
+            }
+        } while (this.displayDate.isSameMonth(currentMonthDate));
+        this.displayDate.resetOriginal();
+        this.setActive();
+        this.updateMinMax();
+    }
+    //######################### protected methods - overrides #########################
+    /**
+     * @inheritdoc
+     */
+    onRender() {
+        this.render();
+    }
+    /**
+     * Tests whether provided value is in same period target value
+     * @param val - Tested value
+     * @param target - Target value to be tested against
+     */
+    isSamePeriod(val, target) {
+        return val.isSameDay(target);
     }
 }
-DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [{ token: DATE_API }], target: i0.ɵɵFactoryTarget.Component });
-DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DatePipesModule }, { kind: "pipe", type: i2.DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth()\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DatePipesModule }, { kind: "pipe", type: i2.DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'day-picker', host: {
@@ -70,9 +147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                     }, standalone: true, imports: [
                         CommonModule,
                         DatePipesModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_API]
-                }] }]; } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth()\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>" }]
+        }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=dayPicker.component.js.map

package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;;;;AAGjD;;GAEG;AAiBH,MAAM,OAAO,oBAAsC,SAAQ,wBAA+B;IAetF,iEAAiE;IACjE,YAAwC,OAAuB;QAE3D,KAAK,EAAE,CAAC;QAF4B,YAAO,GAAP,OAAO,CAAgB;QAd/D,8FAA8F;QAE9F;;WAEG;QACO,aAAQ,GAAa,EAAE,CAAC;QAElC;;;WAGG;QACI,eAAU,GAAqB,EAAE,CAAC;IAMzC,CAAC;IAED,2FAA2F;IAEjF,SAAS,CAAC,OAAgB;;QAEhC,IAAG,CAAC,IAAI,CAAC,KAAK,EACd;YACI,IAAI,CAAC,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,mCAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SAC/F;QAED,cAAc;QACd,IAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B;YACI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAE5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAClC;IACL,CAAC;IAED;;;OAGG;IACO,SAAS,CAAC,KAAY;;QAE5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,CAAC,CAAC,CAAC,CAAC;QAE/B,kCAAkC;IACtC,CAAC;IAED;;;OAGG;IACO,aAAa,CAAC,KAAY;;QAEhC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,cAAc,CAAC,CAAC,CAAC,CAAC;QAEpC,mCAAmC;IACvC,CAAC;;iHAhEQ,oBAAoB,kBAgBT,QAAQ;qGAhBnB,oBAAoB,yJC7BjC,65CAoBM,2CDIE,YAAY,+PACZ,eAAe;2FAIV,oBAAoB;kBAhBhC,SAAS;+BAEI,YAAY,QAGtB;wBACI,0BAA0B,EAAE,MAAM;qBACrC,cACW,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;qBAClB,mBACgB,uBAAuB,CAAC,MAAM;;0BAkBlC,MAAM;2BAAC,QAAQ","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {DateTimePicker} from '../../interfaces';\nimport {DateTimePeriodPickerBase} from '../dateTimePeriodPickerBase';\nimport {DatePipesModule} from '../../../datePipes.module';\nimport {DayData} from '../../../../legacy/picker/interfaces';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\n\n/*\n Component used for displaying day picker\n /\n@Component(\n{\n selector: 'day-picker',\n templateUrl: 'dayPicker.component.html',\n host:\n {\n '[class.date-time-period]': 'true',\n },\n standalone: true,\n imports:\n [\n CommonModule,\n DatePipesModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DayPickerSAComponent<TDate = unknown> extends DateTimePeriodPickerBase<TDate> implements DateTimePicker<TDate>\n{\n //######################### protected properties - template bindings #########################\n\n /\n Names of days\n /\n protected weekdays: string[] = [];\n\n /\n Array of period data to be displayed\n * @internal\n /\n public periodData: DayData<TDate>[] = [];\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,)\n {\n super();\n }\n\n //######################### protected methods - template bindings #########################\n\n protected selectDay(dayData: DayData): void\n {\n if(!this.value)\n {\n this.value = this.displayDate?.clone() ?? this.dateApi.getValue(this.display ?? new Date());\n }\n\n //single value\n if(!Array.isArray(this.value))\n {\n this.value.dayOfMonth(dayData.day);\n this.value.updateOriginal();\n\n this.valueChangeSubject.next();\n }\n }\n\n /\n Changes displayed month to next month\n * @param event - Event that occured\n /\n protected nextMonth(event: Event): void\n {\n event.preventDefault();\n event.stopPropagation();\n this.displayDate?.addMonths(1);\n\n // this.display(this.displayDate);\n }\n\n /\n Changes displayed month to previous month\n * @param event - Event that occured\n /\n protected previousMonth(event: Event): void\n {\n event.preventDefault();\n event.stopPropagation();\n this.displayDate?.subtractMonths(1);\n\n // this.display(this.displayDate!);\n }\n}","<div class=\"period\">\r\n <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value \| dateFormat: 'monthName'}} {{displayDate?.value \| dateFormat: 'year'}}</div>\r\n <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n <div class=\"weekday\" ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div ngFor=\"let day of periodData\"\r\n class=\"period-datum clickable\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" ngIf=\"canScaleDown\">\r\n <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from \| dateFormat: 'time'}}</div> -->\r\n</div>"]}
1	+ {"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {DateTimePicker} from '../../interfaces';\nimport {DateTimePeriodPickerBase} from '../dateTimePeriodPickerBase';\nimport {DatePipesModule} from '../../../datePipes.module';\nimport {DayData} from '../../../../legacy/picker/interfaces';\nimport {DateApiObject} from '../../../../services';\n\n/*\n Component used for displaying day picker\n /\n@Component(\n{\n selector: 'day-picker',\n templateUrl: 'dayPicker.component.html',\n host:\n {\n '[class.date-time-period]': 'true',\n },\n standalone: true,\n imports:\n [\n CommonModule,\n DatePipesModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DayPickerSAComponent<TDate = unknown> extends DateTimePeriodPickerBase<DayData<TDate>, TDate> implements DateTimePicker<TDate>\n{\n //######################### protected properties #########################\n\n /\n Stored this picker month data\n /\n protected thisMonthData: DayData<TDate>[] = [];\n\n //######################### protected properties - template bindings #########################\n\n /\n Names of days\n /\n protected weekdays: string[] = [];\n\n //######################### constructor #########################\n constructor()\n {\n super();\n\n this.weekdays = this.dateApi.weekdaysShort();\n }\n\n //######################### protected methods - template bindings #########################\n\n /\n Selects day as value of date time picker\n * @param dayData - Day data that were selected\n /\n protected selectDay(dayData: DayData<TDate>): void\n {\n if(dayData.disabled)\n {\n return;\n }\n\n //no value selected yet\n if(!this.value)\n {\n this.value = this.displayDate?.clone() ?? this.dateApi.getValue(this.display ?? new Date());\n }\n\n //single value\n if(!Array.isArray(this.value))\n {\n this.value.year(dayData.dateObj.year());\n this.value.month(dayData.dateObj.month());\n this.value.dayOfMonth(dayData.day);\n\n //other month was selected\n if(dayData.otherMonth)\n {\n this.value.month(dayData.dateObj.month());\n this.displayDate?.month(dayData.dateObj.month());\n }\n\n this.value.updateOriginal();\n\n this.valueChangeSubject.next();\n }\n else\n {\n //TODO: range\n }\n\n this.render();\n this.changeDetector.detectChanges();\n }\n\n /\n Changes displayed month to next month\n /\n protected nextMonth(): void\n {\n this.displayDate?.addMonths(1).updateOriginal();\n\n this.render();\n }\n\n /\n Changes displayed month to previous month\n /\n protected previousMonth(): void\n {\n this.displayDate?.subtractMonths(1).updateOriginal();\n\n this.render();\n }\n\n //######################### protected methods #########################\n\n /\n Renders current day picker data\n /\n protected render(): void\n {\n //same month only data change\n if(this.displayedDate && this.displayDate?.isSameMonth(this.displayedDate))\n {\n this.setActive();\n this.updateMinMax();\n\n return;\n }\n\n this.displayedDate = this.displayDate?.value;\n this.periodData = [];\n this.thisMonthData = [];\n\n if(!this.displayDate)\n {\n return;\n }\n\n const currentMonthDate = this.displayDate.value;\n const today = this.dateApi.now().value;\n\n this.displayDate\n .startOfMonth()\n .updateOriginal()\n .startOfWeek();\n\n do\n {\n for(let x = 0; x < 7; x++)\n {\n const day = this.displayDate.dayOfMonth();\n const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n\n const data: DayData<TDate> = \n {\n active: false,\n disabled: false,\n date: this.displayDate.value,\n otherMonth: otherMonth,\n today: this.displayDate.isSameDay(today),\n weekend: this.displayDate.isWeekend(),\n day: day,\n dateObj: this.displayDate.clone(),\n };\n\n this.periodData.push(data);\n\n if(!otherMonth)\n {\n this.thisMonthData.push(data);\n }\n\n this.displayDate.addDays(1);\n }\n }\n while(this.displayDate.isSameMonth(currentMonthDate));\n\n this.displayDate.resetOriginal();\n\n this.setActive();\n this.updateMinMax();\n }\n\n //######################### protected methods - overrides #########################\n\n /\n @inheritdoc\n /\n protected onRender(): void\n {\n this.render();\n }\n\n /\n Tests whether provided value is in same period target value\n * @param val - Tested value\n * @param target - Target value to be tested against\n /\n protected isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n {\n return val.isSameDay(target);\n }\n}","<div class=\"period\">\r\n <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value \| dateFormat: 'monthName'}} {{displayDate?.value \| dateFormat: 'year'}}</div>\r\n <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth()\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n <div class=\"weekday\" ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div ngFor=\"let day of periodData\"\r\n class=\"period-datum clickable\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" ngIf=\"canScaleDown\">\r\n <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from \| dateFormat: 'time'}}</div> -->\r\n</div>"]}

package/es2015/src/modules/dateTimePicker/components/index.js CHANGED Viewed

@@ -2,4 +2,5 @@ export * from './dateTimePeriodPickerBase';
 export * from './dateTimePicker/dateTimePicker.component';
 export * from './dateTimePicker/dateTimePicker.interface';
 export * from './dayPicker/dayPicker.component';
+export * from './monthPicker/monthPicker.component';
 //# sourceMappingURL=index.js.map

package/es2015/src/modules/dateTimePicker/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './dateTimePeriodPickerBase';\nexport * from './dateTimePicker/dateTimePicker.component';\nexport * from './dateTimePicker/dateTimePicker.interface';\nexport * from './dayPicker/dayPicker.component';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC","sourcesContent":["export * from './dateTimePeriodPickerBase';\nexport * from './dateTimePicker/dateTimePicker.component';\nexport * from './dateTimePicker/dateTimePicker.interface';\nexport * from './dayPicker/dayPicker.component';\nexport * from './monthPicker/monthPicker.component';\n"]}