@anglr/datetime 5.0.0 → 6.0.0-beta.20221223060503

package/es2020/src/legacy/selector/components/simpleInputDateTime/simpleInputDateTime.component.js

@@ -1,322 +1,367 @@
-import { Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
-import { isPresent } from '@jscrpt/common';
-import { Subject } from 'rxjs';
-import { DATE_API } from '../../../../misc/tokens';
-import { DateValueProvider } from '../../../../services';
-import * as i0 from "@angular/core";
-import * as i1 from "../../../../services";
-/**
- * Component used as datetime selector with simple input
- */
-export class SimpleInputDateTimeSelectorComponent {
-    //######################### constructor #########################
-    constructor(_dateApi, _valueProvider, _changeDetector) {
-        this._dateApi = _dateApi;
-        this._valueProvider = _valueProvider;
-        this._changeDetector = _changeDetector;
-        //######################### protected fields #########################
-        /**
-         * Occurs when value changes
-         */
-        this._valueChange = new Subject();
-        /**
-         * Occurs when selector is touched by user
-         */
-        this._touched = new Subject();
-        /**
-         * Occurs when selector requires picker to be displayed or hidden
-         */
-        this._pickerRequest = new Subject();
-        /**
-         * Currently used format for displaying data
-         */
-        this._format = '';
-        /**
-         * Current value representation as date api wrapper
-         */
-        this._dateApiValue = null;
-        /**
-         * Indication whether is current value valid value
-         */
-        this._isValid = true;
-        /**
-         * Minimal possible value that can be picked
-         */
-        this._minValue = null;
-        /**
-         * Maximal possible value that can be picked
-         */
-        this._maxValue = null;
-        /**
-         * Gets or sets placeholder that is displayed when there is no value selected
-         */
-        this.placeholder = null;
-        //######################### public properties - template bindings #########################
-        /**
-         * Indication whether is input disabled
-         * @internal
-         */
-        this.disabled = false;
-    }
-    //######################### public properties - implementation of DateTimeSelector #########################
-    /**
-     * Gets or sets currently used format for displaying data
-     */
-    get format() {
-        return this._format;
-    }
-    set format(value) {
-        if (isPresent(value)) {
-            value = this._dateApi.getFormat(value);
-        }
-        this._format = value;
-    }
-    /**
-     * Gets current value of datetime
-     */
-    get value() {
-        if (!this._dateApiValue || !this._isValid) {
-            return null;
-        }
-        return this._valueProvider.getValue(this._dateApiValue.value, this._format);
-    }
-    /**
-     * Gets formatted value
-     */
-    get formattedValue() {
-        if (!this._isValid) {
-            return null;
-        }
-        return this.currentValue;
-    }
-    /**
-     * Gets indication whether is current value valid
-     */
-    get valid() {
-        return this._isValid;
-    }
-    /**
-     * Occurs when value changes
-     */
-    get valueChange() {
-        return this._valueChange.asObservable();
-    }
-    /**
-     * Occurs when selector is touched by user
-     */
-    get touched() {
-        return this._touched.asObservable();
-    }
-    /**
-     * Occurs when selector requires picker to be displayed
-     */
-    get pickerRequest() {
-        return this._pickerRequest.asObservable();
-    }
-    //######################### protected properties #########################
-    /**
-     * Gets or sets string representation current of value
-     */
-    get currentValue() {
-        return this.input.value || null;
-    }
-    set currentValue(value) {
-        if (this.input) {
-            this.input.value = value ?? '';
-        }
-    }
-    /**
-     * Gets input element used for handling date time value
-     */
-    get input() {
-        return this.inputElement.nativeElement;
-    }
-    //######################### public methods - implementation of DateTimeSelector #########################
-    /**
-     * Sets minimal possible value for picker, that can be picked
-     * @param value - Minimal possible value that can be picked
-     */
-    setMinValue(value) {
-        this._minValue = value;
-    }
-    /**
-     * Sets maximal possible value for picker, that can be picked
-     * @param value - Maximal possible value that can be picked
-     */
-    setMaxValue(value) {
-        this._maxValue = value;
-    }
-    /**
-     * Sets value of datetime selector
-     * @param value - Value to be set to this selector
-     */
-    setValue(value) {
-        if (value?.from) {
-            this._dateApiValue = this._dateApi.getValue(value?.from, this._format);
-            this._isValid = this._dateApiValue.isValid();
-            this._show();
-        }
-        else {
-            this._clearValue();
-        }
-    }
-    /**
-     * Sets as 'control' disabled
-     * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true
-     */
-    setDisabled(disabled = true) {
-        this.disabled = disabled;
-    }
-    /**
-     * Explicitly runs invalidation of content (change detection)
-     */
-    invalidateVisuals() {
-        this._changeDetector.detectChanges();
-    }
-    //######################### public methods - template bindings #########################
-    /**
-     * Handles gaining of focus
-     * @internal
-     */
-    handleFocus() {
-        this._pickerRequest.next(true);
-        //no value
-        if (!this._dateApiValue) {
-            this._dateApiValue = this._dateApi.now();
-            this._isValid = this._dateApiValue.isValid();
-            if (this._minMaxConstraintTest()) {
-                this._clearValue();
-            }
-            else {
-                this._valueChange.next();
-            }
-        }
-        if (!this._isValid) {
-            return;
-        }
-        this._show();
-    }
-    /**
-     * Handles blur on input
-     * @internal
-     */
-    handleBlur() {
-        this._pickerRequest.next(false);
-    }
-    /**
-     * Handles user input
-     * @internal
-     */
-    handleInput() {
-        //empty value
-        if (!this.currentValue) {
-            this._clearValue();
-            this._valueChange.next();
-            return;
-        }
-        this._dateApiValue = this._dateApi.getValue(this.currentValue, this._format);
-        this._isValid = this._dateApiValue.isValid();
-        this._valueChange.next();
-    }
-    /**
-     * Handles click event inside of input
-     * @internal
-     */
-    handleClick() {
-        this._pickerRequest.next(true);
-    }
-    /**
-     * Handles keyboard events
-     * @param event - Keyboard event that occured
-     * @param input - Html input element that holds current value and selection
-     * @internal
-     */
-    handleKeyboard(event) {
-        if (!this._dateApiValue?.isValid()) {
-            return;
-        }
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowLeft':
-                {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this._withMinMaxConstraint(() => event.key == 'ArrowLeft' ? this._dateApiValue.subtractDays(1) : this._dateApiValue.addDays(1));
-                    this._show();
-                    break;
-                }
-            case 'ArrowUp':
-            case 'ArrowDown':
-                {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this._withMinMaxConstraint(() => event.key == 'ArrowUp' ? this._dateApiValue.subtractWeeks(1) : this._dateApiValue.addWeeks(1));
-                    this._show();
-                    break;
-                }
-            case 'Escape':
-                {
-                    this._pickerRequest.next(false);
-                    break;
-                }
-            case ' ':
-                {
-                    if (event.ctrlKey) {
-                        this._pickerRequest.next(true);
-                    }
-                    break;
-                }
-        }
-    }
-    //######################### protected methods #########################
-    /**
-     * Clears current value
-     */
-    _clearValue() {
-        this._dateApiValue = null;
-        this._isValid = true;
-        this.currentValue = null;
-    }
-    /**
-     * Tests whether are min or max constraint broken, returns true if constraint is broken
-     */
-    _minMaxConstraintTest() {
-        return (!!this._minValue && this._dateApiValue.isBefore(this._minValue)) ||
-            (!!this._maxValue && this._dateApiValue.isAfter(this._maxValue));
-    }
-    /**
-     * Runs code with check whether min max constrains was broken
-     * @param code - Code that should be executed which can change current value
-     */
-    _withMinMaxConstraint(code) {
-        this._dateApiValue.updateOriginal();
-        code();
-        //min value constraint failure
-        if (this._minMaxConstraintTest()) {
-            this._dateApiValue?.resetOriginal();
-            return;
-        }
-        this._valueChange.next();
-    }
-    /**
-     * Shows current value in input
-     */
-    _show() {
-        if (this._isValid) {
-            this.currentValue = this._dateApiValue?.format(this._format) ?? null;
-        }
-    }
-}
-SimpleInputDateTimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SimpleInputDateTimeSelectorComponent, deps: [{ token: DATE_API }, { token: i1.DateValueProvider }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SimpleInputDateTimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: SimpleInputDateTimeSelectorComponent, selector: "simple-input-date-time-selector", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<input type=\"text\"\r\n       #input\r\n       (focus)=\"handleFocus()\"\r\n       (blur)=\"handleBlur()\"\r\n       (input)=\"handleInput()\"\r\n       (click)=\"handleClick()\"\r\n       (keydown)=\"handleKeyboard($any($event))\"\r\n       [disabled]=\"disabled\"\r\n       [placeholder]=\"placeholder ?? ''\">", styles: [":host\r\n{\r\n    display: block;\r\n}\r\n\r\ninput\r\n{\r\n    width: 100%;\r\n}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: SimpleInputDateTimeSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simple-input-date-time-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input type=\"text\"\r\n       #input\r\n       (focus)=\"handleFocus()\"\r\n       (blur)=\"handleBlur()\"\r\n       (input)=\"handleInput()\"\r\n       (click)=\"handleClick()\"\r\n       (keydown)=\"handleKeyboard($any($event))\"\r\n       [disabled]=\"disabled\"\r\n       [placeholder]=\"placeholder ?? ''\">", styles: [":host\r\n{\r\n    display: block;\r\n}\r\n\r\ninput\r\n{\r\n    width: 100%;\r\n}"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_API]
-                }] }, { type: i1.DateValueProvider }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputElement: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
+"use strict";
+// import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef, ElementRef, ViewChild} from '@angular/core';
+// import {isPresent} from '@jscrpt/common';
+// import {Observable, Subject} from 'rxjs';
+// import {DateTimeValue} from '../../../../interfaces/dateTime/datetime.interface';
+// import {DATE_API} from '../../../../misc/tokens';
+// import {DateApi, DateApiObject, DateValueProvider} from '../../../../services';
+// import {DateTimeSelector} from '../../misc/datetimeSelector.interface';
+// /**
+//  * Component used as datetime selector with simple input
+//  */
+// @Component(
+// {
+//     selector: 'simple-input-date-time-selector',
+//     templateUrl: 'simpleInputDateTime.component.html',
+//     styleUrls: ['simpleInputDateTime.component.css'],
+//     changeDetection: ChangeDetectionStrategy.OnPush
+// })
+// export class SimpleInputDateTimeSelectorComponent<TDate = any> implements DateTimeSelector<TDate>
+// {
+//     //######################### protected fields #########################
+//     /**
+//      * Occurs when value changes
+//      */
+//     protected _valueChange: Subject<void> = new Subject<void>();
+//     /**
+//      * Occurs when selector is touched by user
+//      */
+//     protected _touched: Subject<void> = new Subject<void>();
+//     /**
+//      * Occurs when selector requires picker to be displayed or hidden
+//      */
+//     protected _pickerRequest: Subject<boolean> = new Subject<boolean>();
+//     /**
+//      * Currently used format for displaying data
+//      */
+//     protected _format: string = '';
+//     /**
+//      * Current value representation as date api wrapper
+//      */
+//     protected _dateApiValue: null|DateApiObject<TDate> = null;
+//     /**
+//      * Indication whether is current value valid value
+//      */
+//     protected _isValid: boolean = true;
+//     /**
+//      * Minimal possible value that can be picked
+//      */
+//     protected _minValue: TDate|null = null;
+//     /**
+//      * Maximal possible value that can be picked
+//      */
+//     protected _maxValue: TDate|null = null;
+//     //######################### public properties - implementation of DateTimeSelector #########################
+//     /**
+//      * Gets or sets currently used format for displaying data
+//      */
+//     public get format(): string
+//     {
+//         return this._format;
+//     }
+//     public set format(value: string)
+//     {
+//         if(isPresent(value))
+//         {
+//             value = this._dateApi.getFormat(value);
+//         }
+//         this._format = value;
+//     }
+//     /**
+//      * Gets or sets placeholder that is displayed when there is no value selected
+//      */
+//     public placeholder: string|null = null;
+//     /**
+//      * Gets current value of datetime
+//      */
+//     public get value(): DateTimeValue<TDate>|null
+//     {
+//         if(!this._dateApiValue || !this._isValid)
+//         {
+//             return null;
+//         }
+//         return this._valueProvider.getValue(this._dateApiValue.value, this._format);
+//     }
+//     /**
+//      * Gets formatted value
+//      */
+//     public get formattedValue(): string|null
+//     {
+//         if(!this._isValid)
+//         {
+//             return null;
+//         }
+//         return this.currentValue;
+//     }
+//     /**
+//      * Gets indication whether is current value valid
+//      */
+//     public get valid(): boolean
+//     {
+//         return this._isValid;
+//     }
+//     /**
+//      * Occurs when value changes
+//      */
+//     public get valueChange(): Observable<void>
+//     {
+//         return this._valueChange.asObservable();
+//     }
+//     /**
+//      * Occurs when selector is touched by user
+//      */
+//     public get touched(): Observable<void>
+//     {
+//         return this._touched.asObservable();
+//     }
+//     /**
+//      * Occurs when selector requires picker to be displayed
+//      */
+//     public get pickerRequest(): Observable<boolean>
+//     {
+//         return this._pickerRequest.asObservable();
+//     }
+//     //######################### public properties - template bindings #########################
+//     /**
+//      * Indication whether is input disabled
+//      * @internal
+//      */
+//     public disabled: boolean = false;
+//     //######################### public properties - children #########################
+//     /**
+//      * Instance of html input element
+//      * @internal
+//      */
+//     @ViewChild('input', {static: true})
+//     public inputElement?: ElementRef<HTMLInputElement>;
+//     //######################### protected properties #########################
+//     /**
+//      * Gets or sets string representation current of value
+//      */
+//     protected get currentValue(): string|null
+//     {
+//         return this.input.value || null;
+//     }
+//     protected set currentValue(value: string|null)
+//     {
+//         if(this.input)
+//         {
+//             this.input.value = value ?? '';
+//         }
+//     }
+//     /**
+//      * Gets input element used for handling date time value
+//      */
+//     protected get input(): HTMLInputElement
+//     {
+//         return this.inputElement!.nativeElement;
+//     }
+//     //######################### constructor #########################
+//     constructor(@Inject(DATE_API) protected _dateApi: DateApi<TDate>,
+//                 protected _valueProvider: DateValueProvider<TDate>,
+//                 protected _changeDetector: ChangeDetectorRef)
+//     {
+//     }
+//     //######################### public methods - implementation of DateTimeSelector #########################
+//     /**
+//      * Sets minimal possible value for picker, that can be picked
+//      * @param value - Minimal possible value that can be picked
+//      */
+//     public setMinValue(value: TDate|null): void
+//     {
+//         this._minValue = value;
+//     }
+//     /**
+//      * Sets maximal possible value for picker, that can be picked
+//      * @param value - Maximal possible value that can be picked
+//      */
+//     public setMaxValue(value: TDate|null): void
+//     {
+//         this._maxValue = value;
+//     }
+//     /**
+//      * Sets value of datetime selector
+//      * @param value - Value to be set to this selector
+//      */
+//     public setValue(value: DateTimeValue<TDate>|null): void
+//     {
+//         if(value?.from)
+//         {
+//             this._dateApiValue = this._dateApi.getValue(value?.from, this._format);
+//             this._isValid = this._dateApiValue.isValid();
+//             this._show();
+//         }
+//         else
+//         {
+//             this._clearValue();
+//         }
+//     }
+//     /**
+//      * Sets as 'control' disabled
+//      * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true
+//      */
+//     public setDisabled(disabled: boolean = true): void
+//     {
+//         this.disabled = disabled;
+//     }
+//     /**
+//      * Explicitly runs invalidation of content (change detection)
+//      */
+//     public invalidateVisuals(): void
+//     {
+//         this._changeDetector.detectChanges();
+//     }
+//     //######################### public methods - template bindings #########################
+//     /**
+//      * Handles gaining of focus
+//      * @internal
+//      */
+//     public handleFocus(): void
+//     {
+//         this._pickerRequest.next(true);
+//         //no value
+//         if(!this._dateApiValue)
+//         {
+//             this._dateApiValue = this._dateApi.now();
+//             this._isValid = this._dateApiValue.isValid();
+//             if(this._minMaxConstraintTest())
+//             {
+//                 this._clearValue();
+//             }
+//             else
+//             {
+//                 this._valueChange.next();
+//             }
+//         }
+//         if(!this._isValid)
+//         {
+//             return;
+//         }
+//         this._show();
+//     }
+//     /**
+//      * Handles blur on input
+//      * @internal
+//      */
+//     public handleBlur(): void
+//     {
+//         this._pickerRequest.next(false);
+//     }
+//     /**
+//      * Handles user input
+//      * @internal
+//      */
+//     public handleInput(): void
+//     {
+//         //empty value
+//         if(!this.currentValue)
+//         {
+//             this._clearValue();
+//             this._valueChange.next();
+//             return;
+//         }
+//         this._dateApiValue = this._dateApi.getValue(this.currentValue, this._format);
+//         this._isValid = this._dateApiValue.isValid();
+//         this._valueChange.next();
+//     }
+//     /**
+//      * Handles click event inside of input
+//      * @internal
+//      */
+//     public handleClick(): void
+//     {
+//         this._pickerRequest.next(true);
+//     }
+//     /**
+//      * Handles keyboard events
+//      * @param event - Keyboard event that occured
+//      * @param input - Html input element that holds current value and selection
+//      * @internal
+//      */
+//     public handleKeyboard(event: KeyboardEvent): void
+//     {
+//         if(!this._dateApiValue?.isValid())
+//         {
+//             return;
+//         }
+//         switch(event.key)
+//         {
+//             case 'ArrowRight':
+//             case 'ArrowLeft':
+//             {
+//                 event.preventDefault();
+//                 event.stopPropagation();
+//                 this._withMinMaxConstraint(() => event.key == 'ArrowLeft' ? this._dateApiValue!.subtractDays(1) : this._dateApiValue!.addDays(1));
+//                 this._show();
+//                 break;
+//             }
+//             case 'ArrowUp':
+//             case 'ArrowDown':
+//             {
+//                 event.preventDefault();
+//                 event.stopPropagation();
+//                 this._withMinMaxConstraint(() => event.key == 'ArrowUp' ? this._dateApiValue!.subtractWeeks(1) : this._dateApiValue!.addWeeks(1));
+//                 this._show();
+//                 break;
+//             }
+//             case 'Escape':
+//             {
+//                 this._pickerRequest.next(false);
+//                 break;
+//             }
+//             case ' ':
+//             {
+//                 if(event.ctrlKey)
+//                 {
+//                     this._pickerRequest.next(true);
+//                 }
+//                 break;
+//             }
+//         }
+//     }
+//     //######################### protected methods #########################
+//     /**
+//      * Clears current value
+//      */
+//     protected _clearValue(): void
+//     {
+//         this._dateApiValue = null;
+//         this._isValid = true;
+//         this.currentValue = null;
+//     }
+//     /**
+//      * Tests whether are min or max constraint broken, returns true if constraint is broken
+//      */
+//     protected _minMaxConstraintTest(): boolean
+//     {
+//         return (!!this._minValue && this._dateApiValue!.isBefore(this._minValue)) ||
+//                (!!this._maxValue && this._dateApiValue!.isAfter(this._maxValue));
+//     }
+//     /**
+//      * Runs code with check whether min max constrains was broken
+//      * @param code - Code that should be executed which can change current value
+//      */
+//     protected _withMinMaxConstraint(code: () => void): void
+//     {
+//         this._dateApiValue!.updateOriginal();
+//         code();
+//         //min value constraint failure
+//         if(this._minMaxConstraintTest())
+//         {
+//             this._dateApiValue?.resetOriginal();
+//             return;
+//         }
+//         this._valueChange.next();
+//     }
+//     /**
+//      * Shows current value in input
+//      */
+//     protected _show(): void
+//     {
+//         if(this._isValid)
+//         {
+//             this.currentValue = this._dateApiValue?.format(this._format) ?? null;
+//         }
+//     }
+// }
 //# sourceMappingURL=simpleInputDateTime.component.js.map