@anglr/datetime 2.0.0-beta.20220221103100 → 2.0.1

package/es2020/src/picker/components/picker/picker.component.js

@@ -0,0 +1,236 @@
+import { Component, ChangeDetectionStrategy, Optional, Inject, Input, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
+import { extend } from '@jscrpt/common';
+import { Subscription } from 'rxjs';
+import { DATE_API } from '../../../misc/tokens';
+import { DATE_TIME_PICKER_CONFIGURATION } from '../../misc/tokens';
+import { DateTimeDayPickerComponent } from '../dayPicker/dayPicker.component';
+import { DateTimeMonthPickerComponent } from '../monthPicker/monthPicker.component';
+import { DateTimeYearPickerComponent } from '../yearPicker/yearPicker.component';
+import { scaleUpDownTrigger } from './picker.component.animations';
+import * as i0 from "@angular/core";
+import * as i1 from "@anglr/common";
+//TODO - merge options
+/**
+ * Default configuration for picker
+ */
+const defaultConfiguration = {
+    defaultPeriod: 'day',
+    pickerPeriodsDefinition: {
+        'day': DateTimeDayPickerComponent,
+        'month': DateTimeMonthPickerComponent,
+        'year': DateTimeYearPickerComponent
+    },
+    cssClasses: {}
+};
+/**
+ * Component used for displaying date time picker
+ */
+export class DateTimePickerComponent {
+    //######################### constructor #########################
+    constructor(configuration, _dateApi, _changeDetector) {
+        this._dateApi = _dateApi;
+        this._changeDetector = _changeDetector;
+        /**
+         * Array of available picker names
+         */
+        this._pickerNames = [];
+        /**
+         * Current selected value
+         */
+        this._value = null;
+        /**
+         * All subscriptions for active picker
+         */
+        this._activePickerSubscriptions = new Subscription();
+        /**
+         * Minimal possible value that can be picked
+         */
+        this._minValue = null;
+        /**
+         * Maximal possible value that can be picked
+         */
+        this._maxValue = null;
+        /**
+         * Active picker index
+         * @internal
+         */
+        this.activePickerIndex = 0;
+        //######################### public properties - outputs #########################
+        /**
+         * Occurs when value changes
+         */
+        this.valueChange = new EventEmitter();
+        this._options = extend(true, {}, defaultConfiguration, configuration);
+        // without deep-copy for this attribute
+        if (configuration?.pickerPeriodsDefinition) {
+            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;
+        }
+    }
+    //######################### public properties - inputs #########################
+    /**
+     * Current options used by picker
+     */
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = extend(true, this._options, value);
+        // without deep-copy for this attribute
+        if (value?.pickerPeriodsDefinition) {
+            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;
+        }
+    }
+    /**
+     * Current selected value
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this._activePicker?.setValue(value);
+        this._activePicker?.invalidateVisuals();
+    }
+    /**
+     * Gets or sets minimal possible value for picker, that can be picked
+     */
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(value) {
+        this._minValue = value;
+        this._activePicker?.setMinValue(this._minValue);
+    }
+    /**
+     * Gets or sets maximal possible value for picker, that can be picked
+     */
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(value) {
+        this._maxValue = value;
+        this._activePicker?.setMaxValue(this._maxValue);
+    }
+    //######################### public methods - implementation of OnInit #########################
+    /**
+     * Initialize component
+     */
+    ngOnInit() {
+        if (this._options.pickerPeriodsOrder) {
+            if (Array.isArray(this._options.pickerPeriodsOrder)) {
+                this._pickerNames = this._options.pickerPeriodsOrder;
+            }
+            else {
+                this._pickerNames = this._options.pickerPeriodsOrder.split(',')
+                    .map(x => x.trim())
+                    .filter(x => x);
+            }
+        }
+        if (this._pickerNames && this._pickerNames.length > 0) {
+            this._pickerNames.forEach(x => {
+                if (!this._options.pickerPeriodsDefinition[x]) {
+                    throw new Error(`There is no period '${x}' in picker options`);
+                }
+            });
+        }
+        else {
+            this._pickerNames = Object.keys(this._options.pickerPeriodsDefinition);
+        }
+        if (this._pickerNames.findIndex(x => x == this._options.defaultPeriod) < 0) {
+            throw new Error(`There is no period '${this._options.defaultPeriod}' in picker options`);
+        }
+        this.activePickerComponent = this._options.pickerPeriodsDefinition[this._options.defaultPeriod];
+        this._activePickerName = this._options.defaultPeriod;
+        this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        this._display = undefined;
+        this._activePickerSubscriptions.unsubscribe();
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Handles created or destroyed date time picker instance
+     * @param picker - Instance of picker or null
+     * @internal
+     */
+    pickerCreated(picker) {
+        if (picker == this._activePicker) {
+            return;
+        }
+        this._activePicker = picker;
+        this._activePickerSubscriptions.unsubscribe();
+        this._activePickerSubscriptions = new Subscription();
+        if (!this._activePicker) {
+            return;
+        }
+        this._activePickerSubscriptions.add(picker.valueChange.subscribe(() => {
+            this._value = picker.value;
+            this.valueChange.emit(this._value);
+        }));
+        this._activePickerSubscriptions.add(picker.scaleUp.subscribe(display => {
+            this._display = display;
+            const index = this._pickerNames.indexOf(this._activePickerName) + 1;
+            this._activePickerName = this._pickerNames[index];
+            this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);
+            this.activePickerComponent = this._options.pickerPeriodsDefinition[this._activePickerName];
+        }));
+        this._activePickerSubscriptions.add(picker.scaleDown.subscribe(display => {
+            this._display = display;
+            const index = this._pickerNames.indexOf(this._activePickerName) - 1;
+            this._activePickerName = this._pickerNames[index];
+            this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);
+            this.activePickerComponent = this._options.pickerPeriodsDefinition[this._activePickerName];
+        }));
+        picker.setCanGoDown(this._pickerNames.indexOf(this._activePickerName) > 0);
+        picker.setCanGoUp(this._pickerNames.indexOf(this._activePickerName) < this._pickerNames.length - 1);
+        this._setPickerCssClasses();
+        picker.setValue(this._value);
+        picker.setMinValue(this._minValue);
+        picker.setMaxValue(this._maxValue);
+        picker.display(this._display ? this._dateApi.getValue(this._display) : this._dateApi.getValue(this._value?.from ?? this._dateApi.now().value));
+        picker.invalidateVisuals();
+    }
+    //######################### protected methods #########################
+    /**
+     * Sets picker css classes
+     */
+    _setPickerCssClasses() {
+        if (!this._activePicker) {
+            return;
+        }
+        //sets shared css
+        this._activePicker.setCssClasses(this._options?.cssClasses?.pickerShared ?? {});
+        if (this._options?.cssClasses?.pickerCustom && this._options?.cssClasses?.pickerCustom[this._activePickerName]) {
+            this._activePicker.setCssClasses(this._options?.cssClasses?.pickerCustom[this._activePickerName]);
+        }
+    }
+}
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: DATE_TIME_PICKER_CONFIGURATION, optional: true }, { token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { options: "options", value: "value", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [@scaleUpDown]=\"activePickerIndex\">\r\n    <ng-template [ngComponentOutletEx]=\"activePickerComponent\" (ngComponentOutletExCreated)=\"pickerCreated($event)\"></ng-template>\r\n</div>", directives: [{ type: i1.NgComponentOutletEx, selector: "[ngComponentOutletEx]", inputs: ["ngComponentOutletEx", "ngComponentOutletExInjector", "ngComponentOutletExContent"], outputs: ["ngComponentOutletExCreated"], exportAs: ["ngComponentOutletEx"] }], animations: [scaleUpDownTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-picker', animations: [scaleUpDownTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [@scaleUpDown]=\"activePickerIndex\">\r\n    <ng-template [ngComponentOutletEx]=\"activePickerComponent\" (ngComponentOutletExCreated)=\"pickerCreated($event)\"></ng-template>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DATE_TIME_PICKER_CONFIGURATION]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=picker.component.js.map

package/es2020/src/picker/components/picker/picker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/picker/picker.component.ts","../../../../../src/picker/components/picker/picker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Optional, Inject, Input, Type, OnInit, EventEmitter, Output, ChangeDetectorRef, OnDestroy} from '@angular/core';\nimport {extend} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DATE_API} from '../../../misc/tokens';\nimport {DateApi} from '../../../services';\nimport {DateTimePicker, DateTimePickerOptions} from '../../misc/datetimePicker.interface';\nimport {DATE_TIME_PICKER_CONFIGURATION} from '../../misc/tokens';\nimport {DateTimeDayPickerComponent} from '../dayPicker/dayPicker.component';\nimport {DateTimeMonthPickerComponent} from '../monthPicker/monthPicker.component';\nimport {DateTimeYearPickerComponent} from '../yearPicker/yearPicker.component';\nimport {scaleUpDownTrigger} from './picker.component.animations';\n\n//TODO - merge options\n\n/**\n * Default configuration for picker\n */\nconst defaultConfiguration: DateTimePickerOptions<DateTimePicker> =\n{\n    defaultPeriod: 'day',\n    pickerPeriodsDefinition:\n    {\n        'day': DateTimeDayPickerComponent,\n        'month': DateTimeMonthPickerComponent,\n        'year': DateTimeYearPickerComponent\n    },\n    cssClasses:\n    {\n    }\n};\n\n/**\n * Component used for displaying date time picker\n */\n@Component(\n{\n    selector: 'date-time-picker',\n    templateUrl: 'picker.component.html',\n    // styleUrls: ['picker.component.scss'],\n    animations: [scaleUpDownTrigger],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = any> implements OnInit, OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Instance of active date time picker\n     */\n    protected _activePicker?: DateTimePicker<TDate>;\n\n    /**\n     * Name, id of displayed picker\n     */\n    protected _activePickerName!: string;\n\n    /**\n     * Array of available picker names\n     */\n    protected _pickerNames: string[] = [];\n\n    /**\n     * Current selected value\n     */\n    protected _value: DateTimeValue<TDate>|null = null;\n\n    /**\n     * All subscriptions for active picker\n     */\n    protected _activePickerSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Date that should be displayed in picker, used when moving up or down in periods\n     */\n    protected _display?: TDate;\n\n    /**\n     * Minimal possible value that can be picked\n     */\n    protected _minValue: TDate|null = null;\n\n    /**\n     * Maximal possible value that can be picked\n     */\n    protected _maxValue: TDate|null = null;\n\n    /**\n     * Current options used by picker\n     */\n    protected _options: DateTimePickerOptions<DateTimePicker<TDate>>;\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Currently active date time picker component type\n     * @internal\n     */\n    public activePickerComponent?: Type<DateTimePicker<TDate>>;\n\n    /**\n     * Active picker index\n     * @internal\n     */\n    public activePickerIndex: number = 0;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Current options used by picker\n     */\n    @Input()\n    public get options(): DateTimePickerOptions<DateTimePicker<TDate>>\n    {\n        return this._options;\n    }\n    public set options(value: DateTimePickerOptions<DateTimePicker<TDate>>)\n    {\n        this._options = extend(true, this._options, value);\n\n        // without deep-copy for this attribute\n        if (value?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;\n        }\n    }\n\n    /**\n     * Current selected value\n     */\n    @Input()\n    public get value(): DateTimeValue<TDate>|null\n    {\n        return this._value;\n    }\n    public set value(value: DateTimeValue<TDate>|null)\n    {\n        this._value = value;\n\n        this._activePicker?.setValue(value);\n        this._activePicker?.invalidateVisuals();\n    }\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    @Input()\n    public get minValue(): TDate|null\n    {\n        return this._minValue;\n    }\n    public set minValue(value: TDate|null)\n    {\n        this._minValue = value;\n        this._activePicker?.setMinValue(this._minValue);\n    }\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    @Input()\n    public get maxValue(): TDate|null\n    {\n        return this._maxValue;\n    }\n    public set maxValue(value: TDate|null)\n    {\n        this._maxValue = value;\n        this._activePicker?.setMaxValue(this._maxValue);\n    }\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * Occurs when value changes\n     */\n    @Output()\n    public valueChange: EventEmitter<DateTimeValue<TDate>> = new EventEmitter<DateTimeValue<TDate>>();\n\n    //######################### constructor #########################\n    constructor(@Optional() @Inject(DATE_TIME_PICKER_CONFIGURATION) configuration: DateTimePickerOptions<DateTimePicker<TDate>>,\n                @Inject(DATE_API) protected _dateApi: DateApi<TDate>,\n                protected _changeDetector: ChangeDetectorRef)\n    {\n        this._options = extend(true, {}, defaultConfiguration, configuration);\n        // without deep-copy for this attribute\n        if (configuration?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;\n        }\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public ngOnInit()\n    {\n        if (this._options.pickerPeriodsOrder)\n        {\n            if (Array.isArray(this._options.pickerPeriodsOrder))\n            {\n                this._pickerNames = this._options.pickerPeriodsOrder;\n            }\n            else\n            {\n                this._pickerNames = this._options.pickerPeriodsOrder.split(',')\n                                    .map(x => x.trim())\n                                    .filter(x => x);\n            }\n        }\n        if (this._pickerNames && this._pickerNames.length > 0)\n        {\n            this._pickerNames.forEach(x => \n            {\n                if(!this._options.pickerPeriodsDefinition![x!])\n                {\n                    throw new Error(`There is no period '${x}' in picker options`);\n                }\n            });\n        }\n        else\n        {\n            this._pickerNames = Object.keys(this._options.pickerPeriodsDefinition!);\n        }\n\n        if(this._pickerNames.findIndex(x => x == this._options.defaultPeriod) < 0)\n        {\n            throw new Error(`There is no period '${this._options.defaultPeriod}' in picker options`);\n        }\n\n        this.activePickerComponent = this._options.pickerPeriodsDefinition![this._options.defaultPeriod!];\n        this._activePickerName = this._options.defaultPeriod!;\n        this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy()\n    {\n        this._display = undefined;\n        this._activePickerSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Handles created or destroyed date time picker instance\n     * @param picker - Instance of picker or null\n     * @internal\n     */\n    public pickerCreated(picker: DateTimePicker<TDate>)\n    {\n        if(picker == this._activePicker)\n        {\n            return;\n        }\n\n        this._activePicker = picker;\n\n        this._activePickerSubscriptions.unsubscribe();\n        this._activePickerSubscriptions = new Subscription();\n\n        if(!this._activePicker)\n        {\n            return;\n        }\n\n        this._activePickerSubscriptions.add(picker.valueChange.subscribe(() =>\n        {\n            this._value = picker.value;\n            this.valueChange.emit(this._value!);\n        }));\n\n        this._activePickerSubscriptions.add(picker.scaleUp.subscribe(display =>\n        {\n            this._display = display;\n            const index = this._pickerNames.indexOf(this._activePickerName) + 1;\n            this._activePickerName = this._pickerNames[index];\n            this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);\n            this.activePickerComponent = this._options.pickerPeriodsDefinition![this._activePickerName];\n        }));\n\n        this._activePickerSubscriptions.add(picker.scaleDown.subscribe(display =>\n        {\n            this._display = display;\n            const index = this._pickerNames.indexOf(this._activePickerName) - 1;\n            this._activePickerName = this._pickerNames[index];\n            this.activePickerIndex = this._pickerNames.indexOf(this._activePickerName);\n            this.activePickerComponent = this._options.pickerPeriodsDefinition![this._activePickerName];\n        }));\n\n        picker.setCanGoDown(this._pickerNames.indexOf(this._activePickerName) > 0);\n        picker.setCanGoUp(this._pickerNames.indexOf(this._activePickerName) < this._pickerNames.length - 1);\n\n        this._setPickerCssClasses();\n        picker.setValue(this._value);\n        picker.setMinValue(this._minValue);\n        picker.setMaxValue(this._maxValue);\n        picker.display(this._display ? this._dateApi.getValue(this._display) : this._dateApi.getValue(this._value?.from ?? this._dateApi.now().value));\n\n        picker.invalidateVisuals();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets picker css classes\n     */\n    protected _setPickerCssClasses()\n    {\n        if(!this._activePicker)\n        {\n            return;\n        }\n\n        //sets shared css\n        this._activePicker.setCssClasses(this._options?.cssClasses?.pickerShared ?? {});\n\n        if(this._options?.cssClasses?.pickerCustom && this._options?.cssClasses?.pickerCustom[this._activePickerName])\n        {\n            this._activePicker.setCssClasses(this._options?.cssClasses?.pickerCustom[this._activePickerName]);\n        }\n    }\n}\n","<div [@scaleUpDown]=\"activePickerIndex\">\r\n    <ng-template [ngComponentOutletEx]=\"activePickerComponent\" (ngComponentOutletExCreated)=\"pickerCreated($event)\"></ng-template>\r\n</div>"]}

package/es2020/src/picker/components/pickerBase.component.js

@@ -0,0 +1,243 @@
+import { ChangeDetectorRef, Directive, HostListener, Inject } from '@angular/core';
+import { extend } from '@jscrpt/common';
+import { Subject } from 'rxjs';
+import { DATE_API } from '../../misc/tokens';
+import * as i0 from "@angular/core";
+/**
+ * Base class used as base for picker
+ */
+export class PickerBaseComponent {
+    //######################### constructor #########################
+    constructor(_dateApi, _changeDetector) {
+        this._dateApi = _dateApi;
+        this._changeDetector = _changeDetector;
+        //######################### protected fields #########################
+        /**
+         * Current value of datetime
+         */
+        this._value = null;
+        /**
+         * Occurs when value changes
+         */
+        this._valueChange = new Subject();
+        /**
+         * Occurs when user scales up
+         */
+        this._scaleUp = new Subject();
+        /**
+         * Occurs when user scales down
+         */
+        this._scaleDown = new Subject();
+        /**
+         * Minimal possible value that can be picked
+         */
+        this._minValue = null;
+        /**
+         * Maximal possible value that can be picked
+         */
+        this._maxValue = null;
+        //######################### public properties - template bindings #########################
+        /**
+         * Date api instance for displayed date
+         * @internal
+         */
+        this.displayDate = null;
+        /**
+         * Indication whether can go up in period
+         * @internal
+         */
+        this.canGoUp = false;
+        /**
+         * Indication whether can go down in period
+         * @internal
+         */
+        this.canGoDown = false;
+        /**
+         * Array of period data to be displayed
+         * @internal
+         */
+        this.periodData = [];
+    }
+    //######################### public properties - implementation of DateTimePicker #########################
+    /**
+     * Gets current value of datetime
+     */
+    get value() {
+        return this._value;
+    }
+    /**
+     * Occurs when value changes
+     */
+    get valueChange() {
+        return this._valueChange.asObservable();
+    }
+    /**
+     * Occurs when user scales up
+     */
+    get scaleUp() {
+        return this._scaleUp.asObservable();
+    }
+    /**
+     * Occurs when user scales down
+     */
+    get scaleDown() {
+        return this._scaleDown.asObservable();
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Changes displayed period to "higher" period
+     * @param event - Event that occured
+     * @internal
+     */
+    goUp(event) {
+        event.preventDefault();
+        if (!this.canGoUp) {
+            return;
+        }
+        this._scaleUp.next(this.displayDate.value);
+    }
+    /**
+     * Selects period
+     * @param event - Event that occured
+     * @param period - Selected period
+     * @internal
+     */
+    select(event, period) {
+        event.preventDefault();
+        if (period.disabled) {
+            return;
+        }
+        //handle selection of value
+        if (!this.canGoDown) {
+            this._setPeriod(period);
+            this._value =
+                {
+                    from: period.date,
+                    to: this._endOfPeriod(period)
+                };
+            this._valueChange.next();
+            return;
+        }
+        this._scaleDown.next(period.date);
+    }
+    //######################### public methods - implementation of DateTimePicker #########################
+    /**
+     * Sets css classes for picker, allowing to override defaults
+     * @param cssClasses - Css classes to be set for picker
+     */
+    setCssClasses(cssClasses) {
+        this.cssClasses = extend(true, {}, this.cssClasses, cssClasses);
+    }
+    /**
+     * Sets minimal possible value for picker, that can be picked
+     * @param value - Minimal possible value that can be picked
+     */
+    setMinValue(value) {
+        this._minValue = value;
+        this._updateMinMax();
+    }
+    /**
+     * Sets maximal possible value for picker, that can be picked
+     * @param value - Maximal possible value that can be picked
+     */
+    setMaxValue(value) {
+        this._maxValue = value;
+        this._updateMinMax();
+    }
+    /**
+     * Sets value of datetime picker
+     * @param value - Value to be set to this picker
+     */
+    setValue(value) {
+        this._value = value;
+        //value is present
+        if (this._value && this.displayDate) {
+            const val = this._dateApi.getValue(this._value.from);
+            //change picker to value
+            if (!this._isSamePeriodAsDisplayed(val)) {
+                this.display(val);
+                return;
+            }
+            const period = this._getPeriodData(val);
+            //was initialized
+            if (period) {
+                this._setPeriod(period);
+            }
+        }
+    }
+    /**
+     * Sets indication whether can go down
+     * @param value - Indication whether can go down in period
+     */
+    setCanGoDown(value) {
+        this.canGoDown = value;
+    }
+    /**
+     * Sets indication whether can go up
+     * @param value - Indication whether can go up in period
+     */
+    setCanGoUp(value) {
+        this.canGoUp = value;
+    }
+    /**
+     * Explicitly runs invalidation of content (change detection)
+     */
+    invalidateVisuals() {
+        this._changeDetector.detectChanges();
+    }
+    //######################### public methods - host #########################
+    /**
+     * Handles click anyway in picker, that blocks blur
+     * @param event - Event that occured
+     * @internal
+     */
+    handleClick(event) {
+        event.preventDefault();
+    }
+    //######################### protected methods #########################
+    /**
+     * Sets period as active
+     * @param period - Period to be set as active
+     */
+    _setPeriod(period) {
+        this.periodData.forEach(itm => itm.active = false);
+        period.active = true;
+    }
+    /**
+     * Updates minimal and maximal value for picker
+     */
+    _updateMinMax() {
+        if (!this.periodData.length) {
+            return;
+        }
+        //no min, no max
+        if (!this._minValue && !this._maxValue) {
+            this.periodData.forEach(itm => itm.disabled = false);
+            return;
+        }
+        const minDateApi = this._minValue ? this._dateApi.getValue(this._minValue) : null;
+        const maxDateApi = this._maxValue ? this._dateApi.getValue(this._maxValue) : null;
+        let restAfter = false;
+        this.periodData.forEach(period => {
+            if (!!minDateApi && minDateApi.isAfter(period.date) && !this._isSamePeriod(minDateApi, period.date)) {
+                period.disabled = true;
+            }
+            if (restAfter || (!!maxDateApi && maxDateApi.isBefore(period.date) && !this._isSamePeriod(maxDateApi, period.date))) {
+                restAfter = true;
+                period.disabled = true;
+            }
+        });
+    }
+}
+PickerBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PickerBaseComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PickerBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PickerBaseComponent, host: { listeners: { "mousedown": "handleClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PickerBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { handleClick: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+//# sourceMappingURL=pickerBase.component.js.map

package/es2020/src/picker/components/pickerBase.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickerBase.component.js","sourceRoot":"","sources":["../../../../src/picker/components/pickerBase.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectorRef, Directive, HostListener, Inject} from '@angular/core';\nimport {extend} from '@jscrpt/common';\nimport {Observable, Subject} from 'rxjs';\n\nimport {DateTimeValue} from '../../misc/datetime.interface';\nimport {DATE_API} from '../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../services/dateApi.interface';\nimport {DateTimePicker, PeriodData} from '../misc/datetimePicker.interface';\n\n/**\n * Base class used as base for picker\n */\n@Directive()\nexport abstract class PickerBaseComponent<TDate = any, TDateData extends PeriodData<TDate> = any, TCssClasses = object> implements DateTimePicker<TDate, TCssClasses>\n{\n    //######################### protected fields #########################\n\n    /**\n     * Current value of datetime\n     */\n    protected _value: DateTimeValue<TDate>|null = null;\n\n    /**\n     * Occurs when value changes\n     */\n    protected _valueChange: Subject<void> = new Subject<void>();\n    \n    /**\n     * Occurs when user scales up\n     */\n    protected _scaleUp: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Occurs when user scales down\n     */\n    protected _scaleDown: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Minimal possible value that can be picked\n     */\n    protected _minValue: TDate|null = null;\n\n    /**\n     * Maximal possible value that can be picked\n     */\n    protected _maxValue: TDate|null = null;\n\n    //######################### public properties - implementation of DateTimePicker #########################\n\n    /**\n     * Gets current value of datetime\n     */\n    public get value(): DateTimeValue<TDate>|null\n    {\n        return this._value;\n    }\n\n    /**\n     * Occurs when value changes\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this._valueChange.asObservable();\n    }\n\n    /**\n     * Occurs when user scales up\n     */\n    public get scaleUp(): Observable<TDate>\n    {\n        return this._scaleUp.asObservable();\n    }\n\n    /**\n     * Occurs when user scales down\n     */\n    public get scaleDown(): Observable<TDate>\n    {\n        return this._scaleDown.asObservable();\n    }\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Date api instance for displayed date\n     * @internal\n     */\n    public displayDate: DateApiObject<TDate>|null = null;\n\n    /**\n     * Indication whether can go up in period\n     * @internal\n     */\n    public canGoUp: boolean = false;\n\n    /**\n     * Indication whether can go down in period\n     * @internal\n     */\n    public canGoDown: boolean = false;\n\n    /**\n     * Array of period data to be displayed\n     * @internal\n     */\n    public periodData: TDateData[] = [];\n\n    /**\n     * Css classes that are used within picker\n     * @internal\n     */\n    public cssClasses!: TCssClasses;\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) protected _dateApi: DateApi<TDate>,\n                protected _changeDetector: ChangeDetectorRef)\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed period to \"higher\" period\n     * @param event - Event that occured\n     * @internal\n     */\n    public goUp(event: Event)\n    {\n        event.preventDefault();\n\n        if(!this.canGoUp)\n        {\n            return;\n        }\n\n        this._scaleUp.next(this.displayDate!.value);\n    }\n\n    /**\n     * Selects period\n     * @param event - Event that occured\n     * @param period - Selected period\n     * @internal\n     */\n    public select(event: Event, period: PeriodData<TDate>)\n    {\n        event.preventDefault();\n\n        if(period.disabled)\n        {\n            return;\n        }\n\n        //handle selection of value\n        if(!this.canGoDown)\n        {\n            this._setPeriod(period);\n\n            this._value =\n            {\n                from: period.date,\n                to: this._endOfPeriod(period)\n            };\n\n            this._valueChange.next();\n\n            return;\n        }\n\n        this._scaleDown.next(period.date);\n    }\n\n    //######################### public methods - implementation of DateTimePicker #########################\n\n    /**\n     * Sets css classes for picker, allowing to override defaults\n     * @param cssClasses - Css classes to be set for picker\n     */\n    public setCssClasses(cssClasses: TCssClasses): void\n    {\n        this.cssClasses = extend(true, {}, this.cssClasses, cssClasses);\n    }\n\n    /**\n     * Sets minimal possible value for picker, that can be picked\n     * @param value - Minimal possible value that can be picked\n     */\n    public setMinValue(value: TDate|null): void\n    {\n        this._minValue = value;\n        this._updateMinMax();\n    }\n\n    /**\n     * Sets maximal possible value for picker, that can be picked\n     * @param value - Maximal possible value that can be picked\n     */\n    public setMaxValue(value: TDate|null): void\n    {\n        this._maxValue = value;\n        this._updateMinMax();\n    }\n\n    /**\n     * Sets value of datetime picker\n     * @param value - Value to be set to this picker\n     */\n    public setValue(value: DateTimeValue<TDate>|null): void\n    {\n        this._value = value;\n\n        //value is present\n        if(this._value && this.displayDate)\n        {\n            const val = this._dateApi.getValue(this._value.from);\n\n            //change picker to value\n            if(!this._isSamePeriodAsDisplayed(val))\n            {\n                this.display(val);\n\n                return;\n            }\n\n            const period = this._getPeriodData(val);\n\n            //was initialized\n            if(period)\n            {\n                this._setPeriod(period);\n            }\n        }\n    }\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    public abstract display(value: DateApiObject<TDate>): void;\n\n    /**\n     * Sets indication whether can go down\n     * @param value - Indication whether can go down in period\n     */\n    public setCanGoDown(value: boolean): void\n    {\n        this.canGoDown = value;\n    }\n\n    /**\n     * Sets indication whether can go up\n     * @param value - Indication whether can go up in period\n     */\n    public setCanGoUp(value: boolean): void\n    {\n        this.canGoUp = value;\n    }\n\n    /**\n     * Explicitly runs invalidation of content (change detection)\n     */\n    public invalidateVisuals(): void\n    {\n        this._changeDetector.detectChanges();\n    }\n\n    //######################### public methods - host #########################\n\n    /**\n     * Handles click anyway in picker, that blocks blur\n     * @param event - Event that occured\n     * @internal\n     */\n    @HostListener('mousedown', ['$event'])\n    public handleClick(event: Event)\n    {\n        event.preventDefault();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets period as active\n     * @param period - Period to be set as active\n     */\n    protected _setPeriod(period: PeriodData<TDate>)\n    {\n        this.periodData.forEach(itm => itm.active = false);\n\n        period.active = true;\n    }\n\n    /**\n     * Updates minimal and maximal value for picker\n     */\n    protected _updateMinMax()\n    {\n        if(!this.periodData.length)\n        {\n            return;\n        }\n\n        //no min, no max\n        if(!this._minValue && !this._maxValue)\n        {\n            this.periodData.forEach(itm => itm.disabled = false);\n\n            return;\n        }\n\n        const minDateApi = this._minValue ? this._dateApi.getValue(this._minValue) : null;\n        const maxDateApi = this._maxValue ? this._dateApi.getValue(this._maxValue) : null;\n        let restAfter = false;\n\n        this.periodData.forEach(period =>\n        {\n            if(!!minDateApi && minDateApi.isAfter(period.date) && !this._isSamePeriod(minDateApi, period.date))\n            {\n                period.disabled = true;\n            }\n\n            if(restAfter || (!!maxDateApi && maxDateApi.isBefore(period.date) && !this._isSamePeriod(maxDateApi, period.date)))\n            {\n                restAfter = true;\n                period.disabled = true;\n            }\n        });\n    }\n\n    /**\n     * Obtains end of period\n     * @param period - Period for which should be end obtained\n     */\n    protected abstract _endOfPeriod(period: PeriodData<TDate>): TDate;\n\n    /**\n     * Tests whether provided value is in same period as displayed picker\n     * @param val - Tested value for same period as displayed picker\n     */\n    protected abstract _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean;\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 abstract _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean;\n\n    /**\n     * Gets period data for specified value\n     * @param val - Value for which is period data obtained\n     */\n    protected abstract _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>;\n}"]}