@anglr/datetime 3.0.0-beta.20220315103241 → 3.0.0-beta.20220328062817

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

@@ -1 +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}"]}
+{"version":3,"file":"pickerBase.component.js","sourceRoot":"","sources":["../../../../src/picker/components/pickerBase.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectorRef, Directive, Inject} from '@angular/core';\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';\nimport {PickerImplBaseComponent} from './pickerImplBase.component';\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> extends PickerImplBaseComponent<TDate, TCssClasses> implements DateTimePicker<TDate, TCssClasses>\n{\n    //######################### protected fields #########################\n\n    /**\n     * Value of originaly set hour\n     */\n    protected _originalHour: number = 0;\n\n    /**\n     * Value of originaly set minute\n     */\n    protected _originalMinute: number = 0;\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of period data to be displayed\n     * @internal\n     */\n    public periodData: TDateData[] = [];\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n                changeDetector: ChangeDetectorRef)\n    {\n        super(dateApi, changeDetector);\n    }\n\n    //######################### public methods - template bindings #########################\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>): void\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 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        if(this._value)\n        {\n            this._originalHour = this._dateApi.getValue(this._value.from).hour();\n            this._originalMinute = this._dateApi.getValue(this._value.from).minute();\n        }\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    //######################### 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>): void\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(): void\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}"]}

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

@@ -0,0 +1,145 @@
+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 as base implementation of DateTimePicker interface
+ */
+export class PickerImplBaseComponent {
+    //######################### 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;
+    }
+    //######################### 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;
+        }
+        if (this.displayDate) {
+            this._scaleUp.next(this.displayDate.value);
+        }
+    }
+    //######################### 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 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();
+    }
+}
+PickerImplBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PickerImplBaseComponent, deps: [{ token: DATE_API }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PickerImplBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PickerImplBaseComponent, host: { listeners: { "mousedown": "handleClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PickerImplBaseComponent, 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=pickerImplBase.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pickerImplBase.component.js","sourceRoot":"","sources":["../../../../src/picker/components/pickerImplBase.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACjF,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAa,OAAO,EAAC,MAAM,MAAM,CAAC;AAGzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;;AAI3C;;GAEG;AAEH,MAAM,OAAgB,uBAAuB;IA8FzC,iEAAiE;IACjE,YAAwC,QAAwB,EAC1C,eAAkC;QADhB,aAAQ,GAAR,QAAQ,CAAgB;QAC1C,oBAAe,GAAf,eAAe,CAAmB;QA9FxD,sEAAsE;QAEtE;;WAEG;QACO,WAAM,GAA8B,IAAI,CAAC;QAEnD;;WAEG;QACO,iBAAY,GAAkB,IAAI,OAAO,EAAQ,CAAC;QAE5D;;WAEG;QACO,aAAQ,GAAmB,IAAI,OAAO,EAAS,CAAC;QAE1D;;WAEG;QACO,eAAU,GAAmB,IAAI,OAAO,EAAS,CAAC;QAE5D;;WAEG;QACO,cAAS,GAAe,IAAI,CAAC;QAEvC;;WAEG;QACO,cAAS,GAAe,IAAI,CAAC;QAoCvC,2FAA2F;QAE3F;;;WAGG;QACI,gBAAW,GAA8B,IAAI,CAAC;QAErD;;;WAGG;QACI,YAAO,GAAY,KAAK,CAAC;QAEhC;;;WAGG;QACI,cAAS,GAAY,KAAK,CAAC;IAYlC,CAAC;IAhED,0GAA0G;IAE1G;;OAEG;IACH,IAAW,KAAK;QAEZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,IAAW,WAAW;QAElB,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IAC5C,CAAC;IAED;;OAEG;IACH,IAAW,OAAO;QAEd,OAAO,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;IACxC,CAAC;IAED;;OAEG;IACH,IAAW,SAAS;QAEhB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,CAAC;IAC1C,CAAC;IAkCD,wFAAwF;IAExF;;;;OAIG;IACI,IAAI,CAAC,KAAY;QAEpB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAG,CAAC,IAAI,CAAC,OAAO,EAChB;YACI,OAAO;SACV;QAED,IAAG,IAAI,CAAC,WAAW,EACnB;YACI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC9C;IACL,CAAC;IAED,uGAAuG;IAEvG;;;OAGG;IACI,aAAa,CAAC,UAAuB;QAExC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IACpE,CAAC;IA0BD;;;OAGG;IACI,YAAY,CAAC,KAAc;QAE9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACI,UAAU,CAAC,KAAc;QAE5B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;OAEG;IACI,iBAAiB;QAEpB,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,2EAA2E;IAE3E;;;;OAIG;IAEI,WAAW,CAAC,KAAY;QAE3B,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;;oHAlMiB,uBAAuB,kBA+FrB,QAAQ;wGA/FV,uBAAuB;2FAAvB,uBAAuB;kBAD5C,SAAS;;0BAgGO,MAAM;2BAAC,QAAQ;4EAgGrB,WAAW;sBADjB,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC","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} from '../misc/datetimePicker.interface';\n\n/**\n * Base class used as base for picker as base implementation of DateTimePicker interface\n */\n@Directive()\nexport abstract class PickerImplBaseComponent<TDate = any, TCssClasses = any> 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     * 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): void\n    {\n        event.preventDefault();\n\n        if(!this.canGoUp)\n        {\n            return;\n        }\n\n        if(this.displayDate)\n        {\n            this._scaleUp.next(this.displayDate.value);\n        }\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 abstract setMinValue(value: TDate|null): void;\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 abstract setMaxValue(value: TDate|null): void;\n\n    /**\n     * Sets value of datetime picker\n     * @param value - Value to be set to this picker\n     */\n    public abstract setValue(value: DateTimeValue<TDate>|null): void;\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): void\n    {\n        event.preventDefault();\n    }\n}"]}

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

@@ -0,0 +1,138 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PickerImplBaseComponent } from '../pickerImplBase.component';
+import { hours, minutes } from './rollerTimePicker.data';
+import * as i0 from "@angular/core";
+import * as i1 from "@anglr/common";
+import * as i2 from "../../directives/loopScroll/loopScroll.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "../../directives/loopScrollData/loopScrollData.directive";
+import * as i5 from "../../../pipes/dateFormat.pipe";
+/**
+ * Component used for rendering roller time picker
+ */
+export class DateTimeRollerTimePickerComponent extends PickerImplBaseComponent {
+    constructor() {
+        super(...arguments);
+        //######################### public properties - template bindings #########################
+        /**
+         * Array of available hours
+         */
+        this.hours = hours;
+        /**
+         * Array of available minutes
+         */
+        this.minutes = minutes;
+        /**
+         * Indication whether are minutes open
+         */
+        this.minutesOpen = false;
+        /**
+         * Indication whether are hours open
+         */
+        this.hoursOpen = false;
+    }
+    /**
+     * Current value of hour
+     */
+    get hour() {
+        return this.displayDate?.hour() ?? 0;
+    }
+    set hour(value) {
+        this.displayDate?.hour(value);
+    }
+    /**
+     * Current value of minute
+     */
+    get minute() {
+        return this.displayDate?.minute() ?? 0;
+    }
+    set minute(value) {
+        this.displayDate?.minute(value);
+    }
+    //######################### public methods - implementation of PickerBaseComponent #########################
+    /**
+     * @inheritdoc
+     */
+    display(value) {
+        this.displayDate = value;
+    }
+    /**
+     * @inheritdoc
+     */
+    setMinValue(_value) {
+    }
+    /**
+     * @inheritdoc
+     */
+    setMaxValue(_value) {
+    }
+    /**
+     * @inheritdoc
+     */
+    setValue(_value) {
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Sets hour
+     * @param event - Mouse event that was triggered
+     * @param value - Value to be set as hour
+     * @returns
+     */
+    setHour(event, value) {
+        if (!this.hoursOpen && event) {
+            return;
+        }
+        event?.stopPropagation();
+        event?.preventDefault();
+        if (this.hour == value) {
+            return;
+        }
+        this.hour = value;
+        if (event) {
+            this.hoursOpen = false;
+        }
+        if (this.displayDate) {
+            this._value =
+                {
+                    from: this.displayDate?.value,
+                    to: this.displayDate?.value
+                };
+            this._valueChange.next();
+        }
+    }
+    /**
+     * Sets minute
+     * @param event - Mouse event that was triggered
+     * @param value - Value to be set as minute
+     * @returns
+     */
+    setMinute(event, value) {
+        if (!this.minutesOpen && event) {
+            return;
+        }
+        event?.stopPropagation();
+        event?.preventDefault();
+        if (this.minute == value) {
+            return;
+        }
+        this.minute = value;
+        if (event) {
+            this.minutesOpen = false;
+        }
+        if (this.displayDate) {
+            this._value =
+                {
+                    from: this.displayDate?.value,
+                    to: this.displayDate?.value
+                };
+            this._valueChange.next();
+        }
+    }
+}
+DateTimeRollerTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateTimeRollerTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeRollerTimePickerComponent, selector: "date-time-roller-time-picker", usesInheritance: true, ngImport: i0, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"], directives: [{ type: i1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "clickOutsideElement"], outputs: ["clickOutsideChange"] }, { type: i2.LoopScrollDirective, selector: "[loopScroll]", inputs: ["loopScroll", "open"], outputs: ["loopScrollChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.LoopScrollDataDirective, selector: "[loopScrollData]", inputs: ["loopScrollData"] }], pipes: { "dateFormat": i5.DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeRollerTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-roller-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n", styles: [".time-area\n{\n    display: flex;\n    flex-direction: row;\n    padding: 48px 64px;\n    font-size: 32px;\n}\n\n.value-container\n{\n    position: relative;\n    height: 1em;\n    width: 2ch;\n}\n\n.roller-scroll\n{\n    position: absolute;\n    line-height: 1em;\n    max-height: 1em;\n    overflow: scroll;\n    scrollbar-width: none;\n    top: 0;\n    background-color: #666666;\n    transition: all 250ms;\n    border-radius: 4px;\n}\n\n.roller-scroll.open\n{\n    max-height: 5em;\n    top: -2em;\n}\n\n.minute-second-separator\n{\n    margin-left: 12px;\n    margin-right: 12px;\n    line-height: 1em;\n}\n"] }]
+        }] });
+//# sourceMappingURL=rollerTimePicker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rollerTimePicker.component.js","sourceRoot":"","sources":["../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.ts","../../../../../src/picker/components/rollerTimePicker/rollerTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DateApiObject} from '../../../services';\nimport {LoopScrollData} from '../../directives';\nimport {DateTimePicker} from '../../interfaces';\nimport {PickerImplBaseComponent} from '../pickerImplBase.component';\nimport {hours, minutes} from './rollerTimePicker.data';\nimport {RollerTimePickerCssClasses} from './rollerTimePicker.interface';\n\n/**\n * Component used for rendering roller time picker\n */\n@Component(\n{\n    selector: 'date-time-roller-time-picker',\n    templateUrl: 'rollerTimePicker.component.html',\n    styleUrls: ['rollerTimePicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeRollerTimePickerComponent<TDate = any> extends PickerImplBaseComponent<TDate, RollerTimePickerCssClasses> implements DateTimePicker<TDate, RollerTimePickerCssClasses>\n{\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Array of available hours\n     */\n    public hours: LoopScrollData[] = hours;\n\n    /**\n     * Array of available minutes\n     */\n    public minutes: LoopScrollData[] = minutes;\n\n    /**\n     * Indication whether are minutes open\n     */\n    public minutesOpen: boolean = false;\n\n    /**\n     * Indication whether are hours open\n     */\n    public hoursOpen: boolean = false;\n\n    /**\n     * Current value of hour\n     */\n    public get hour(): number\n    {\n        return this.displayDate?.hour() ?? 0;\n    }\n    public set hour(value: number)\n    {\n        this.displayDate?.hour(value);\n    }\n\n    /**\n     * Current value of minute\n     */\n    public get minute(): number\n    {\n        return this.displayDate?.minute() ?? 0;\n    }\n    public set minute(value: number)\n    {\n        this.displayDate?.minute(value);\n    }\n\n    //######################### public methods - implementation of PickerBaseComponent #########################\n    \n    /**\n     * @inheritdoc\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMinValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setMaxValue(_value: TDate | null): void\n    {\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public setValue(_value: DateTimeValue<TDate> | null): void\n    {\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Sets hour\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as hour\n     * @returns \n     */\n    public setHour<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.hoursOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.hour == value as unknown as number)\n        {\n            return;\n        }\n\n        this.hour = value as unknown as number;\n        \n        if(event)\n        {\n            this.hoursOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n\n    /**\n     * Sets minute\n     * @param event - Mouse event that was triggered\n     * @param value - Value to be set as minute\n     * @returns \n     */\n    public setMinute<TData = any>(event: MouseEvent|null, value: TData): void\n    {\n        if(!this.minutesOpen && event)\n        {\n            return;\n        }\n\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if(this.minute == value as unknown as number)\n        {\n            return;\n        }\n\n        this.minute = value as unknown as number;\n        \n        if(event)\n        {\n            this.minutesOpen = false;\n        }\n\n        if(this.displayDate)\n        {\n            this._value =\n            {\n                from: this.displayDate?.value,\n                to: this.displayDate?.value\n            };\n\n            this._valueChange.next();\n        }\n    }\n}","<div class=\"flex-row\" style=\"justify-content: center;\">\n     <div [class.clickable]=\"canGoUp\" (mousedown)=\"goUp($event)\">{{displayDate?.value | dateFormat: 'date'}}</div>\n</div>\n\n<div class=\"time-area\">\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"hoursOpen = false\"\n         [clickOutsideElement]=\"hoursScroll\">\n        <div #hoursScroll\n             class=\"roller-scroll\"\n             [class.open]=\"hoursOpen\"\n             [loopScroll]=\"hour\"\n             [open]=\"hoursOpen\"\n             (loopScrollChange)=\"setHour(null, $event)\"\n             (click)=\"hoursOpen = !hoursOpen\" >\n            <div *ngFor=\"let hour of hours\"\n                 [loopScrollData]=\"hour?.data\"\n                 (click)=\"setHour($event, hour?.data)\">{{hour?.displayText}}</div>\n        </div>\n    </div>\n\n    <div class=\"minute-second-separator\">:</div>\n\n    <div class=\"value-container\"\n         [clickOutside]=\"true\"\n         (clickOutsideChange)=\"minutesOpen = false\"\n         [clickOutsideElement]=\"minutesScroll\">\n        <div #minutesScroll\n             class=\"roller-scroll\"\n             [class.open]=\"minutesOpen\"\n             [loopScroll]=\"minute\"\n             [open]=\"minutesOpen\"\n             (loopScrollChange)=\"setMinute(null, $event)\"\n             (click)=\"minutesOpen = !minutesOpen\">\n            <div *ngFor=\"let minute of minutes\"\n                 [loopScrollData]=\"minute?.data\"\n                 (click)=\"setMinute($event, minute?.data)\">{{minute?.displayText}}</div>\n        </div>\n    </div>\n</div>\n"]}