npm - @anglr/datetime - Versions diffs - 5.0.0-beta.20221019093146 → 5.0.0-beta.20221020044622 - Mend

@anglr/datetime 5.0.0-beta.20221019093146 → 5.0.0-beta.20221020044622

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

Files changed (100) hide show

package/changelog.md CHANGED Viewed

@@ -19,6 +19,7 @@
         - `element` html element that represents input itself
 - new `DateTimeModule` module for basic date time directives, components, pipes
     - **exports**
+        - `DateTimeDirective,`
         - `DateTimeControlValueAccessorDirective`
         - `DateTimeInputDirective`
         - `DateTimeMaxValidatorDirective`
@@ -28,17 +29,7 @@
 - new `DateTimeBase` class, that is base class for date time directives, contains basic shared data
     - **implements**
         - `DateTimeInputValue`
-    - **inputs**
-        - `valueFormat` gets or sets date time value format which is being worked with in this date time
-        - `format` gets or sets format of string representation of date
-        - `customFormat` custom format string representation of date
-- new `DateTimeRestrictedBase` class, that is base class for date time directives with value restrictions
-    - **extends** `DateTimeBase`
-    - **implements**
         - `OnDestroy`
-    - **inputs**
-        - `maxDateTime` gets or sets max allowed date for date time
-        - `minDateTime` gets or sets min allowed date for date time
 - new `DateTimeInputDirective` directive, that is used for setting up date time input
     - **extends** `DateTimeBase`
     - **implements**
@@ -60,14 +51,14 @@
     - **provides**
         - `NG_VALIDATORS` providing self
 - new `DateTimeMaxValidatorDirective` directive, that applies validator for date time max value
-    - **extends** `DateTimeRestrictedBase`
+    - **extends** `DateTimeBase`
     - **implements**
         - `Validator`
         - `OnInit`
     - **provides**
         - `NG_VALIDATORS` providing self
 - new `DateTimeMinValidatorDirective` directive, that applies validator for date time min value
-    - **extends** `DateTimeRestrictedBase`
+    - **extends** `DateTimeBase`
     - **implements**
         - `Validator`
         - `OnInit`
@@ -109,6 +100,7 @@
         - `showPicker` hides date time picker
         - `hidePicker` shows date time picker
 - new `DateTimePickerComponent` directive, which is component used for displaying date time picker
+    - **extends** `DateTimeDirective`
     - **implements**
         - `DateTimeInputValue`
         - `OnChanges`
@@ -123,11 +115,13 @@
         - `value` value of date time picker
         - `options` options for date time picker period
         - `display` date that describes which date should be displayed
-        - `canGoUp` indication whether picker can display lower granularity picker
-        - `canGoDown` indication whether picker can display higher granularity picker
+        - `maxDate` max allowed date
+        - `minDate` min allowed date to be selected
+        - `canScaleUp` indication whether picker can display scale date time period up
+        - `canScaleDown` indication whether picker can display scale date time period down
         - `valueChange` occurs when date time picker value changes
-        - `goUp` occurs when period with lower granularity should be displayed
-        - `goDown` occurs when period with higher granularity should be displayed
+        - `scaleUp` occurs when period should be scaled up
+        - `scaleDown` occurs when period should be scaled down
 - new `DateTimePickerDirectiveOptions` directive, which is defintion of date time picker directive options
     - **properties**
         - `closeOnValueSelect` indication whether close picker on value selection
@@ -145,8 +139,22 @@
     - **properties**
         - `periodsDefinition` definition of types for each period type for picker
         - `defaultPeriod` name of default period for picker that is displayed after opening
+- new `DateTimeDirective` directive, that holds shared data for date time, like formats, restrictions
+    - **implements**
+        - `OnDestroy`
+    - **properties**
+        - `maxDateTimeChanges` occurs when there are changes in max date time value
+        - `minDateTimeChanges` occurs when there are changes in min date time value
+    - **inputs**
+        - `valueFormat` gets or sets date time value format which is being worked with in this date time
+        - `format` gets or sets format of string representation of date
+        - `customFormat` custom format string representation of date
+        - `maxDateTime` gets or sets max allowed date for date time
+        - `minDateTime` gets or sets min allowed date for date time
 - updated `DateApiObject` interface
     - new `unixTimestamp` method, that gets value of date time as unix timestamp
+- updated `DateFormatPipe`
+    - improved typings for `transform`
 - *subpackage* `@anglr/datetime/moment`
     - updated `MomentDateApi`
         - now implements also new `unixTimestamp`
@@ -175,6 +183,8 @@
 - updated `DateTimePickerComponent` renamed to `DateTimePickerLegacyComponent`
 - updated `DateTimePicker` renamed to `DateTimeLegacyPicker`
 - updated `DateTimePickerOptions` renamed to `DateTimePickerLegacyOptions`
+- updated `DateFormatPipe`
+    - typings that allows custom format must use `customFormat` new parameter
 ## Version 4.0.0 (2022-10-14)

package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js CHANGED Viewed

@@ -144,7 +144,6 @@ export class DateTimeDayPickerComponent extends PickerBaseComponent {
                 const data = {
                     active: false,
                     disabled: false,
-                    betweenActive: false,
                     date: this.displayDate.value,
                     otherMonth: otherMonth,
                     today: this.displayDate.isSameDay(today),

package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.ts","../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DateTimeValue} from '../../../../interfaces/dateTime/datetime.interface';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../../services/dateApi/dateApi.interface';\nimport {DateTimeLegacyPicker, DayData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {DayPickerCssClasses} from './dayPicker.interfaces';\n\n/*\n Default styles for picker\n /\nconst defaultStyles: DayPickerCssClasses =\n{\n periodSelection: 'period',\n previousPeriod: 'fas fa-angle-left clickable',\n nextPeriod: 'fas fa-angle-right clickable',\n periodValue: 'period-value',\n periodData: 'period-data',\n periodDatum: 'period-datum clickable',\n weekdayName: 'weekday',\n clickable: 'clickable'\n};\n\n/\n Component used for displaying day picker\n /\n@Component(\n{\n selector: 'date-time-day-picker',\n templateUrl: 'dayPicker.component.html',\n styleUrls: ['dayPicker.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeDayPickerComponent<TDate = any> extends PickerBaseComponent<TDate, DayData<TDate>, DayPickerCssClasses> implements DateTimeLegacyPicker<TDate, DayPickerCssClasses>\n{\n //######################### protected fields #########################\n\n /\n Stored this picker month data\n /\n protected _thisMonthData: DayData<TDate>[] = [];\n\n //######################### public properties - template bindings #########################\n\n /\n Names of days\n * @internal\n /\n public weekdays: string[] = [];\n\n /\n Value used for displaying time\n /\n public get timeValue(): DateTimeValue<TDate> \| null\n {\n return this._value;\n }\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n changeDetector: ChangeDetectorRef)\n {\n super(dateApi, changeDetector);\n\n this.cssClasses = extend(true, {}, defaultStyles);\n this.weekdays = this._dateApi.weekdaysShort();\n }\n\n //######################### public methods - template bindings #########################\n\n /\n Changes displayed period to \"lower\" period\n * @param event - Event that occured\n * @internal\n /\n public goDown(event: Event): void\n {\n event.preventDefault();\n\n if(!this.canGoDown)\n {\n return;\n }\n\n if(this.displayDate)\n {\n this._scaleDown.next(this.displayDate.value);\n }\n }\n\n /\n Changes displayed month to next month\n * @param event - Event that occured\n * @internal\n /\n public nextMonth(event: Event): void\n {\n event.preventDefault();\n this.displayDate!.addMonths(1);\n\n this.display(this.displayDate!);\n }\n\n /\n Changes displayed month to previous month\n * @param event - Event that occured\n * @internal\n /\n public previousMonth(event: Event): void\n {\n event.preventDefault();\n this.displayDate!.subtractMonths(1);\n\n this.display(this.displayDate!);\n }\n\n /\n Selects day\n * @param event - Event that occured\n * @param day - Selects day \n * @internal\n /\n public override select(event: Event, day: DayData<TDate>): void\n {\n event.preventDefault();\n\n if(day.disabled)\n {\n return;\n }\n\n this._setPeriod(day);\n\n //when time picker is enabled\n if(this.canGoDown)\n {\n const from = this._dateApi\n .getValue(day.date)\n .hour(this._originalHour)\n .minute(this._originalMinute);\n\n const to = this._dateApi\n .getValue(this._endOfPeriod(day))\n .hour(this._originalHour)\n .minute(this._originalMinute);\n\n this._value =\n {\n from: from.value,\n to: to.value\n };\n }\n //no time picker\n else\n {\n this._value =\n {\n from: day.date,\n to: this._endOfPeriod(day)\n };\n }\n \n this._valueChange.next();\n\n if(day.otherMonth)\n {\n this.display(this._dateApi.getValue(day.date));\n }\n }\n\n //######################### public methods - implementation of DateTimePicker #########################\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 display(value: DateApiObject<TDate>): void\n {\n this.displayDate = value;\n this.periodData = [];\n this._thisMonthData = [];\n const currentMonthDate = this.displayDate.value;\n const today = this._dateApi.now().value;\n\n this.displayDate\n .startOfMonth()\n .updateOriginal()\n .startOfWeek();\n\n do\n {\n for(let x = 0; x < 7; x++)\n {\n const day = this.displayDate.dayOfMonth();\n const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n const data = \n {\n active: false,\n disabled: false,\n betweenActive: false,\n date: this.displayDate.value,\n otherMonth: otherMonth,\n today: this.displayDate.isSameDay(today),\n weekend: this.displayDate.isWeekend(),\n day: day\n };\n\n this.periodData.push(data);\n\n if(!otherMonth)\n {\n this._thisMonthData.push(data);\n }\n\n this.displayDate.addDays(1);\n }\n }\n while(this.displayDate.isSameMonth(currentMonthDate));\n\n this.displayDate.resetOriginal();\n\n //can go down set minutes and hours\n if(this.canGoDown)\n {\n this.displayDate\n .minute(this._originalMinute)\n .hour(this._originalHour);\n }\n\n this._updateMinMax();\n\n //set value if exists\n if(this._value && (this.displayDate.isSameMonth(this._value.from!) \|\| this.displayDate.isSameMonth(this._value.to!)))\n {\n this.setValue(this._value);\n }\n }\n\n //######################### protected methods #########################\n\n /\n Obtains end of period\n * @param period - Period for which should be end obtained\n /\n protected _endOfPeriod(period: PeriodData<TDate>): TDate\n {\n return this._dateApi.getValue(period.date).endOfDay().value;\n }\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 _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n {\n return val.isSameMonth(this.displayDate!.value);\n }\n\n /\n Tests whether provided value is in same period target value\n * @param val - Tested value\n * @param target - Target value to be tested against\n /\n protected _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n {\n return val.isSameDay(target);\n }\n\n /\n Gets period data for specified value\n * @param val - Value for which is period data obtained\n /\n protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n {\n return this._thisMonthData[val.dayOfMonth() - 1];\n }\n}","<div [ngClass]=\"cssClasses.periodSelection \| asRequired\">\r\n <div [ngClass]=\"cssClasses.previousPeriod \| asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div [ngClass]=\"cssClasses.periodValue \| asRequired \| mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n <div [ngClass]=\"cssClasses.nextPeriod \| asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData \| asRequired\">\r\n <div [ngClass]=\"cssClasses.weekdayName \| asRequired\" ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div ngFor=\"let day of periodData\"\r\n [ngClass]=\"cssClasses.periodDatum \| asRequired\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" ngIf=\"canGoDown\">\r\n <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from \| dateFormat: 'time'}}</div>\r\n</div>"]}
1	+ {"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.ts","../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DateTimeValue} from '../../../../interfaces/dateTime/datetime.interface';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../../services/dateApi/dateApi.interface';\nimport {DateTimeLegacyPicker, DayData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {DayPickerCssClasses} from './dayPicker.interfaces';\n\n/*\n Default styles for picker\n /\nconst defaultStyles: DayPickerCssClasses =\n{\n periodSelection: 'period',\n previousPeriod: 'fas fa-angle-left clickable',\n nextPeriod: 'fas fa-angle-right clickable',\n periodValue: 'period-value',\n periodData: 'period-data',\n periodDatum: 'period-datum clickable',\n weekdayName: 'weekday',\n clickable: 'clickable'\n};\n\n/\n Component used for displaying day picker\n /\n@Component(\n{\n selector: 'date-time-day-picker',\n templateUrl: 'dayPicker.component.html',\n styleUrls: ['dayPicker.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeDayPickerComponent<TDate = any> extends PickerBaseComponent<TDate, DayData<TDate>, DayPickerCssClasses> implements DateTimeLegacyPicker<TDate, DayPickerCssClasses>\n{\n //######################### protected fields #########################\n\n /\n Stored this picker month data\n /\n protected _thisMonthData: DayData<TDate>[] = [];\n\n //######################### public properties - template bindings #########################\n\n /\n Names of days\n * @internal\n /\n public weekdays: string[] = [];\n\n /\n Value used for displaying time\n /\n public get timeValue(): DateTimeValue<TDate> \| null\n {\n return this._value;\n }\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n changeDetector: ChangeDetectorRef)\n {\n super(dateApi, changeDetector);\n\n this.cssClasses = extend(true, {}, defaultStyles);\n this.weekdays = this._dateApi.weekdaysShort();\n }\n\n //######################### public methods - template bindings #########################\n\n /\n Changes displayed period to \"lower\" period\n * @param event - Event that occured\n * @internal\n /\n public goDown(event: Event): void\n {\n event.preventDefault();\n\n if(!this.canGoDown)\n {\n return;\n }\n\n if(this.displayDate)\n {\n this._scaleDown.next(this.displayDate.value);\n }\n }\n\n /\n Changes displayed month to next month\n * @param event - Event that occured\n * @internal\n /\n public nextMonth(event: Event): void\n {\n event.preventDefault();\n this.displayDate!.addMonths(1);\n\n this.display(this.displayDate!);\n }\n\n /\n Changes displayed month to previous month\n * @param event - Event that occured\n * @internal\n /\n public previousMonth(event: Event): void\n {\n event.preventDefault();\n this.displayDate!.subtractMonths(1);\n\n this.display(this.displayDate!);\n }\n\n /\n Selects day\n * @param event - Event that occured\n * @param day - Selects day \n * @internal\n /\n public override select(event: Event, day: DayData<TDate>): void\n {\n event.preventDefault();\n\n if(day.disabled)\n {\n return;\n }\n\n this._setPeriod(day);\n\n //when time picker is enabled\n if(this.canGoDown)\n {\n const from = this._dateApi\n .getValue(day.date)\n .hour(this._originalHour)\n .minute(this._originalMinute);\n\n const to = this._dateApi\n .getValue(this._endOfPeriod(day))\n .hour(this._originalHour)\n .minute(this._originalMinute);\n\n this._value =\n {\n from: from.value,\n to: to.value\n };\n }\n //no time picker\n else\n {\n this._value =\n {\n from: day.date,\n to: this._endOfPeriod(day)\n };\n }\n \n this._valueChange.next();\n\n if(day.otherMonth)\n {\n this.display(this._dateApi.getValue(day.date));\n }\n }\n\n //######################### public methods - implementation of DateTimePicker #########################\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 display(value: DateApiObject<TDate>): void\n {\n this.displayDate = value;\n this.periodData = [];\n this._thisMonthData = [];\n const currentMonthDate = this.displayDate.value;\n const today = this._dateApi.now().value;\n\n this.displayDate\n .startOfMonth()\n .updateOriginal()\n .startOfWeek();\n\n do\n {\n for(let x = 0; x < 7; x++)\n {\n const day = this.displayDate.dayOfMonth();\n const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n const data = \n {\n active: false,\n disabled: false,\n date: this.displayDate.value,\n otherMonth: otherMonth,\n today: this.displayDate.isSameDay(today),\n weekend: this.displayDate.isWeekend(),\n day: day\n };\n\n this.periodData.push(data);\n\n if(!otherMonth)\n {\n this._thisMonthData.push(data);\n }\n\n this.displayDate.addDays(1);\n }\n }\n while(this.displayDate.isSameMonth(currentMonthDate));\n\n this.displayDate.resetOriginal();\n\n //can go down set minutes and hours\n if(this.canGoDown)\n {\n this.displayDate\n .minute(this._originalMinute)\n .hour(this._originalHour);\n }\n\n this._updateMinMax();\n\n //set value if exists\n if(this._value && (this.displayDate.isSameMonth(this._value.from!) \|\| this.displayDate.isSameMonth(this._value.to!)))\n {\n this.setValue(this._value);\n }\n }\n\n //######################### protected methods #########################\n\n /\n Obtains end of period\n * @param period - Period for which should be end obtained\n /\n protected _endOfPeriod(period: PeriodData<TDate>): TDate\n {\n return this._dateApi.getValue(period.date).endOfDay().value;\n }\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 _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n {\n return val.isSameMonth(this.displayDate!.value);\n }\n\n /\n Tests whether provided value is in same period target value\n * @param val - Tested value\n * @param target - Target value to be tested against\n /\n protected _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n {\n return val.isSameDay(target);\n }\n\n /\n Gets period data for specified value\n * @param val - Value for which is period data obtained\n /\n protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n {\n return this._thisMonthData[val.dayOfMonth() - 1];\n }\n}","<div [ngClass]=\"cssClasses.periodSelection \| asRequired\">\r\n <div [ngClass]=\"cssClasses.previousPeriod \| asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div [ngClass]=\"cssClasses.periodValue \| asRequired \| mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n <div [ngClass]=\"cssClasses.nextPeriod \| asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData \| asRequired\">\r\n <div [ngClass]=\"cssClasses.weekdayName \| asRequired\" ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div ngFor=\"let day of periodData\"\r\n [ngClass]=\"cssClasses.periodDatum \| asRequired\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" ngIf=\"canGoDown\">\r\n <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from \| dateFormat: 'time'}}</div>\r\n</div>"]}

package/es2015/src/legacy/picker/misc/datetimePicker.interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datetimePicker.interface.js","sourceRoot":"","sources":["../../../../../src/legacy/picker/misc/datetimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Type} from '@angular/core';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable} from 'rxjs';\n\nimport {DateTimeValue} from '../../../interfaces/dateTime/datetime.interface';\nimport {DateApiObject} from '../../../services/dateApi/dateApi.interface';\n\n/*\n Shared css classes for all pickers\n /\nexport interface CommonPickerCssClasses\n{\n /\n Period selection element wrapping displayed period and previous, next buttons\n /\n periodSelection: string;\n\n /\n Element used for switching period to previous one\n /\n previousPeriod: string;\n\n /\n Element used for switching period to next one\n /\n nextPeriod: string;\n\n /\n Element representing currently displayed period\n /\n periodValue: string;\n\n /\n Element wrapping displayed period data\n /\n periodData: string;\n\n /\n Element representing single datum for period item\n /\n periodDatum: string;\n\n /\n Name of css class that represents clickable items in picker\n /\n clickable: string;\n}\n\n/\n Css classes applied to datetime picker\n /\nexport interface DateTimePickerCssClasses\n{\n /\n Shared css classes for all pickers\n /\n pickerShared?: CommonPickerCssClasses;\n\n /\n Custom css classes specific for each picker type\n /\n pickerCustom?: Dictionary<object>;\n}\n\n/\n Defintion of datetime picker component options\n /\nexport interface DateTimePickerLegacyOptions<TPicker = any>\n{\n /\n Order of pickers, it's possible use less pickers as is defined in pickerPeriodsDefinition for example 'month,year'\n /\n pickerPeriodsOrder: string[]\|string\|null;\n\n /\n Definition of types for each period type for picker\n /\n pickerPeriodsDefinition: Dictionary<Type<TPicker>>;\n\n /\n Name of default period for picker that is displayed\n /\n defaultPeriod: string;\n\n /\n Css classes for date time picker\n /\n cssClasses: DateTimePickerCssClasses;\n}\n\n/\n Describes datetime picker component used for displaying and selecting value\n /\nexport interface DateTimeLegacyPicker<TDate = any, TCssClasses = object>\n{\n /\n Gets current value of datetime\n /\n readonly value: DateTimeValue<TDate>\|null;\n\n /\n Occurs when value changes\n /\n readonly valueChange: Observable<void>;\n\n /\n Occurs when user scales up\n /\n readonly scaleUp: Observable<TDate>;\n\n /\n Occurs when user scales down\n /\n readonly scaleDown: Observable<TDate>;\n\n /\n Sets css classes for picker, allowing to override defaults\n * @param cssClasses - Css classes to be set for picker\n /\n setCssClasses(cssClasses: TCssClasses): void;\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 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 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 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 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 setCanGoDown(value: boolean): void;\n\n /\n Sets indication whether can go up\n * @param value - Indication whether can go up in period\n /\n setCanGoUp(value: boolean): void;\n\n /\n Explicitly runs invalidation of content (change detection)\n /\n invalidateVisuals(): void;\n}\n\n/\n Data that represents data for any picker type\n /\nexport interface PeriodData<TDate = any>\n{\n /\n Indication that this period item is active and selected\n /\n active: boolean;\n\n /\n Indication that this period item is disabled\n /\n disabled: boolean;\n\n /\n Date for this period item\n /\n date: TDate;\n}\n\n/\n Data that represents day in date picker\n /\nexport interface DayData<TDate = any> extends PeriodData<TDate>\n{\n ~~/\n Indication that range is selected and this day is between selected dates~~\n /\n ~~betweenActive: boolean;\n\n~~ /\n Indication that this day is out of currently selected month\n /\n otherMonth: boolean;\n\n /\n Indication that this day is today\n /\n today: boolean;\n\n /\n Indication that this day is weekend day\n /\n weekend: boolean;\n\n /\n Day number of month\n /\n day: number;\n}\n\n/\n Data that represents month in date picker\n /\nexport interface MonthData<TDate = any> extends PeriodData<TDate>\n{\n /\n Name of month\n /\n name: string;\n}\n\n/\n Data that represents year in date picker\n /\nexport interface YearData<TDate = any> extends PeriodData<TDate>\n{\n /\n Value of year\n */\n value: number;\n}\n"]}
1	+ {"version":3,"file":"datetimePicker.interface.js","sourceRoot":"","sources":["../../../../../src/legacy/picker/misc/datetimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Type} from '@angular/core';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable} from 'rxjs';\n\nimport {DateTimeValue} from '../../../interfaces/dateTime/datetime.interface';\nimport {DateApiObject} from '../../../services/dateApi/dateApi.interface';\n\n/*\n Shared css classes for all pickers\n /\nexport interface CommonPickerCssClasses\n{\n /\n Period selection element wrapping displayed period and previous, next buttons\n /\n periodSelection: string;\n\n /\n Element used for switching period to previous one\n /\n previousPeriod: string;\n\n /\n Element used for switching period to next one\n /\n nextPeriod: string;\n\n /\n Element representing currently displayed period\n /\n periodValue: string;\n\n /\n Element wrapping displayed period data\n /\n periodData: string;\n\n /\n Element representing single datum for period item\n /\n periodDatum: string;\n\n /\n Name of css class that represents clickable items in picker\n /\n clickable: string;\n}\n\n/\n Css classes applied to datetime picker\n /\nexport interface DateTimePickerCssClasses\n{\n /\n Shared css classes for all pickers\n /\n pickerShared?: CommonPickerCssClasses;\n\n /\n Custom css classes specific for each picker type\n /\n pickerCustom?: Dictionary<object>;\n}\n\n/\n Defintion of datetime picker component options\n /\nexport interface DateTimePickerLegacyOptions<TPicker = any>\n{\n /\n Order of pickers, it's possible use less pickers as is defined in pickerPeriodsDefinition for example 'month,year'\n /\n pickerPeriodsOrder: string[]\|string\|null;\n\n /\n Definition of types for each period type for picker\n /\n pickerPeriodsDefinition: Dictionary<Type<TPicker>>;\n\n /\n Name of default period for picker that is displayed\n /\n defaultPeriod: string;\n\n /\n Css classes for date time picker\n /\n cssClasses: DateTimePickerCssClasses;\n}\n\n/\n Describes datetime picker component used for displaying and selecting value\n /\nexport interface DateTimeLegacyPicker<TDate = any, TCssClasses = object>\n{\n /\n Gets current value of datetime\n /\n readonly value: DateTimeValue<TDate>\|null;\n\n /\n Occurs when value changes\n /\n readonly valueChange: Observable<void>;\n\n /\n Occurs when user scales up\n /\n readonly scaleUp: Observable<TDate>;\n\n /\n Occurs when user scales down\n /\n readonly scaleDown: Observable<TDate>;\n\n /\n Sets css classes for picker, allowing to override defaults\n * @param cssClasses - Css classes to be set for picker\n /\n setCssClasses(cssClasses: TCssClasses): void;\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 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 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 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 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 setCanGoDown(value: boolean): void;\n\n /\n Sets indication whether can go up\n * @param value - Indication whether can go up in period\n /\n setCanGoUp(value: boolean): void;\n\n /\n Explicitly runs invalidation of content (change detection)\n /\n invalidateVisuals(): void;\n}\n\n/\n Data that represents data for any picker type\n /\nexport interface PeriodData<TDate = any>\n{\n /\n Indication that this period item is active and selected\n /\n active: boolean;\n\n /\n Indication that this period item is disabled\n /\n disabled: boolean;\n\n /\n Date for this period item\n /\n date: TDate;\n}\n\n/\n Data that represents day in date picker\n /\nexport interface DayData<TDate = any> extends PeriodData<TDate>\n{\n\n /\n Indication that this day is out of currently selected month\n /\n otherMonth: boolean;\n\n /\n Indication that this day is today\n /\n today: boolean;\n\n /\n Indication that this day is weekend day\n /\n weekend: boolean;\n\n /\n Day number of month\n /\n day: number;\n}\n\n/\n Data that represents month in date picker\n /\nexport interface MonthData<TDate = any> extends PeriodData<TDate>\n{\n /\n Name of month\n /\n name: string;\n}\n\n/\n Data that represents year in date picker\n /\nexport interface YearData<TDate = any> extends PeriodData<TDate>\n{\n /\n Value of year\n */\n value: number;\n}\n"]}

package/es2015/src/modules/dateTime/directives/dateTime/dateTime.directive.js ADDED Viewed

@@ -0,0 +1,221 @@
+import { __decorate, __metadata } from "tslib";
+import { Directive, inject, Input } from '@angular/core';
+import { BindThis, isBlank, isString } from '@jscrpt/common';
+import { Subject } from 'rxjs';
+import { DateTimeValueFormat } from '../../../../misc/enums';
+import { DATE_API, FORMAT_PROVIDER } from '../../../../misc/tokens';
+import { getSingleDateTimeValue } from '../../../../misc/utils';
+import { DateTimeBase } from '../dateTimeBase';
+import * as i0 from "@angular/core";
+/**
+ * Directive that holds shared data for date time, like formats, restrictions
+ */
+export class DateTimeDirective {
+    constructor() {
+        //######################### protected properties #########################
+        /**
+         * Subject used for emitting changes in max date time value
+         */
+        this.maxDateTimeChangesSubject = new Subject();
+        /**
+         * Subject used for emitting changes in min date time value
+         */
+        this.minDateTimeChangesSubject = new Subject();
+        /**
+         * Date time value format which is being worked with in this date time
+         */
+        this.ɵValueFormat = DateTimeValueFormat.DateInstance;
+        /**
+         * Format of string representation of date
+         */
+        this.ɵFormat = 'date';
+        /**
+         * Date api instance, used for date time manipulation
+         */
+        this.dateApi = inject(DATE_API);
+        /**
+         * Provider for available formats
+         */
+        this.formatProvider = inject(FORMAT_PROVIDER);
+        /**
+         * Custom format string representation of date
+         */
+        this.customFormat = this.dateApi.getFormat(this.formatProvider[this.ɵFormat]);
+    }
+    //######################### public properties #########################
+    /**
+     * Occurs when there are changes in max date time value
+     */
+    get maxDateTimeChanges() {
+        return this.maxDateTimeChangesSubject.asObservable();
+    }
+    /**
+     * Occurs when there are changes in min date time value
+     */
+    get minDateTimeChanges() {
+        return this.minDateTimeChangesSubject.asObservable();
+    }
+    //######################### public properties - inputs #########################
+    /**
+     * Gets or sets date time value format which is being worked with in this date time
+     */
+    get valueFormat() {
+        return this.ɵValueFormat;
+    }
+    set valueFormat(value) {
+        if (isString(value)) {
+            this.ɵValueFormat = DateTimeValueFormat[value];
+            return;
+        }
+        this.ɵValueFormat = value;
+    }
+    /**
+     * Gets or sets format of string representation of date
+     */
+    get format() {
+        return this.ɵFormat;
+    }
+    set format(value) {
+        this.ɵFormat = value;
+        this.customFormat = this.dateApi.getFormat(this.formatProvider[value]);
+    }
+    /**
+     * Gets or sets max allowed date for date time
+     */
+    get maxDateTime() {
+        return this.ɵMaxDateTime;
+    }
+    set maxDateTime(value) {
+        var _a;
+        (_a = this.maxDateInstanceChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.maxDateInstanceChange = null;
+        if (isBlank(value)) {
+            this.maxDateSet(value);
+            return;
+        }
+        let val = value;
+        if (value instanceof (DateTimeBase)) {
+            this.maxDateInstanceChange = value.valueChange.subscribe(() => {
+                const val = getSingleDateTimeValue(value.value);
+                if (isBlank(val)) {
+                    this.maxDateSet(null);
+                    return;
+                }
+                this.setMinMaxValue(val, this.maxDateSet);
+            });
+            const v = getSingleDateTimeValue(value.value);
+            if (isBlank(v)) {
+                this.maxDateSet(null);
+                return;
+            }
+            val = v;
+        }
+        this.setMinMaxValue(val, this.maxDateSet);
+    }
+    /**
+     * Gets or sets min allowed date for date time
+     */
+    get minDateTime() {
+        return this.ɵMinDateTime;
+    }
+    set minDateTime(value) {
+        var _a;
+        (_a = this.minDateInstanceChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.minDateInstanceChange = null;
+        if (isBlank(value)) {
+            this.minDateSet(value);
+            return;
+        }
+        let val = value;
+        if (value instanceof (DateTimeBase)) {
+            this.minDateInstanceChange = value.valueChange.subscribe(() => {
+                const val = getSingleDateTimeValue(value.value);
+                if (isBlank(val)) {
+                    this.minDateSet(null);
+                    return;
+                }
+                this.setMinMaxValue(val, this.minDateSet);
+            });
+            const v = getSingleDateTimeValue(value.value);
+            if (isBlank(v)) {
+                this.minDateSet(null);
+                return;
+            }
+            val = v;
+        }
+        this.setMinMaxValue(val, this.minDateSet);
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        var _a, _b;
+        (_a = this.maxDateInstanceChange) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.maxDateInstanceChange = null;
+        (_b = this.minDateInstanceChange) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        this.minDateInstanceChange = null;
+    }
+    //######################### protected methods #########################
+    /**
+     * Sets min date time and notifies about changes
+     * @param value - Value to be set
+     */
+    minDateSet(value) {
+        this.ɵMinDateTime = value;
+        this.minDateTimeChangesSubject.next();
+    }
+    /**
+     * Sets max date time and notifies about changes
+     * @param value - Value to be set
+     */
+    maxDateSet(value) {
+        this.ɵMaxDateTime = value;
+        this.maxDateTimeChangesSubject.next();
+    }
+    /**
+     * Sets min or max date time value
+     * @param value - Value to be set
+     * @param setter - Action used for setting value
+     */
+    setMinMaxValue(value, setter) {
+        const val = this.dateApi.getValue(value, this.customFormat);
+        if (val.isValid()) {
+            setter(val.value);
+        }
+        else {
+            setter(null);
+        }
+    }
+}
+DateTimeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DateTimeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: DateTimeDirective, selector: "[dateTime]", inputs: { valueFormat: "valueFormat", format: "format", customFormat: "customFormat", maxDateTime: "maxDateTime", minDateTime: "minDateTime" }, ngImport: i0 });
+__decorate([
+    BindThis,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], DateTimeDirective.prototype, "minDateSet", null);
+__decorate([
+    BindThis,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], DateTimeDirective.prototype, "maxDateSet", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateTime]'
+                }]
+        }], propDecorators: { valueFormat: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], customFormat: [{
+                type: Input
+            }], maxDateTime: [{
+                type: Input
+            }], minDateTime: [{
+                type: Input
+            }], minDateSet: [], maxDateSet: [] } });
+//# sourceMappingURL=dateTime.directive.js.map

package/es2015/src/modules/dateTime/directives/dateTime/dateTime.directive.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dateTime.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTime/directives/dateTime/dateTime.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {Directive, inject, Input, OnDestroy} from '@angular/core';\nimport {Action1, BindThis, isBlank, isString} from '@jscrpt/common';\nimport {Observable, Subject, Subscription} from 'rxjs';\n\nimport {FormatProvider} from '../../../../interfaces';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {DateTimeInputOutputValue} from '../../../../misc/types';\nimport {getSingleDateTimeValue} from '../../../../misc/utils';\nimport {DateApi, DateValue} from '../../../../services';\nimport {DateTimeBase} from '../dateTimeBase';\n\n/**\n * Directive that holds shared data for date time, like formats, restrictions\n */\n@Directive(\n{\n selector: '[dateTime]'\n})\nexport class DateTimeDirective<TDate = unknown> implements OnDestroy\n{\n //######################### protected properties #########################\n\n /**\n * Subject used for emitting changes in max date time value\n */\n protected maxDateTimeChangesSubject: Subject<void> = new Subject<void>();\n\n /**\n * Subject used for emitting changes in min date time value\n */\n protected minDateTimeChangesSubject: Subject<void> = new Subject<void>();\n\n /**\n * Subscription for max date instance value changes\n */\n protected maxDateInstanceChange: Subscription|undefined|null;\n\n /**\n * Subscription for min date instance value changes\n */\n protected minDateInstanceChange: Subscription|undefined|null;\n\n /**\n * Max allowed value of date time\n */\n protected ɵMaxDateTime: TDate|undefined|null;\n\n /**\n * Min allowed value of date time\n */\n protected ɵMinDateTime: TDate|undefined|null;\n\n /**\n * Date time value format which is being worked with in this date time\n */\n protected ɵValueFormat: DateTimeValueFormat = DateTimeValueFormat.DateInstance;\n\n /**\n * Format of string representation of date\n */\n protected ɵFormat: keyof FormatProvider = 'date';\n\n /**\n * Date api instance, used for date time manipulation\n */\n protected dateApi: DateApi<TDate> = inject(DATE_API);\n\n /**\n * Provider for available formats\n */\n protected formatProvider: FormatProvider = inject(FORMAT_PROVIDER);\n\n //######################### public properties #########################\n\n /**\n * Occurs when there are changes in max date time value\n */\n public get maxDateTimeChanges(): Observable<void>\n {\n return this.maxDateTimeChangesSubject.asObservable();\n }\n\n /**\n * Occurs when there are changes in min date time value\n */\n public get minDateTimeChanges(): Observable<void>\n {\n return this.minDateTimeChangesSubject.asObservable();\n }\n\n //######################### public properties - inputs #########################\n\n /**\n * Gets or sets date time value format which is being worked with in this date time\n */\n @Input()\n public get valueFormat(): DateTimeValueFormat\n {\n return this.ɵValueFormat;\n }\n public set valueFormat(value: DateTimeValueFormat)\n {\n if(isString(value))\n {\n this.ɵValueFormat = DateTimeValueFormat[value] as unknown as DateTimeValueFormat;\n\n return;\n }\n\n this.ɵValueFormat = value;\n }\n\n /**\n * Gets or sets format of string representation of date\n */\n @Input()\n public get format(): keyof FormatProvider\n {\n return this.ɵFormat;\n }\n public set format(value: keyof FormatProvider)\n {\n this.ɵFormat = value;\n this.customFormat = this.dateApi.getFormat(this.formatProvider[value]);\n }\n\n /**\n * Custom format string representation of date\n */\n @Input()\n public customFormat: string = this.dateApi.getFormat(this.formatProvider[this.ɵFormat]);\n\n /**\n * Gets or sets max allowed date for date time\n */\n @Input()\n public get maxDateTime(): TDate|undefined|null\n {\n return this.ɵMaxDateTime;\n }\n public set maxDateTime(value: TDate|undefined|null)\n {\n this.maxDateInstanceChange?.unsubscribe();\n this.maxDateInstanceChange = null;\n\n if(isBlank(value))\n {\n this.maxDateSet(value);\n\n return;\n }\n\n let val: DateTimeInputOutputValue<TDate> = value;\n\n if(value instanceof DateTimeBase<TDate>)\n {\n this.maxDateInstanceChange = value.valueChange.subscribe(() =>\n {\n const val = getSingleDateTimeValue<TDate>(value.value);\n\n if(isBlank(val))\n {\n this.maxDateSet(null);\n\n return;\n }\n\n this.setMinMaxValue(val, this.maxDateSet);\n });\n\n const v = getSingleDateTimeValue<TDate>(value.value);\n\n if(isBlank(v))\n {\n this.maxDateSet(null);\n\n return;\n }\n\n val = v;\n }\n \n this.setMinMaxValue(val, this.maxDateSet);\n }\n\n /**\n * Gets or sets min allowed date for date time\n */\n @Input()\n public get minDateTime(): TDate|undefined|null\n {\n return this.ɵMinDateTime;\n }\n public set minDateTime(value: TDate|undefined|null)\n {\n this.minDateInstanceChange?.unsubscribe();\n this.minDateInstanceChange = null;\n\n if(isBlank(value))\n {\n this.minDateSet(value);\n\n return;\n }\n\n let val: DateTimeInputOutputValue<TDate> = value;\n\n if(value instanceof DateTimeBase<TDate>)\n {\n this.minDateInstanceChange = value.valueChange.subscribe(() =>\n {\n const val = getSingleDateTimeValue<TDate>(value.value);\n\n if(isBlank(val))\n {\n this.minDateSet(null);\n\n return;\n }\n\n this.setMinMaxValue(val, this.minDateSet);\n });\n\n const v = getSingleDateTimeValue<TDate>(value.value);\n\n if(isBlank(v))\n {\n this.minDateSet(null);\n\n return;\n }\n\n val = v;\n }\n\n this.setMinMaxValue(val, this.minDateSet);\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this.maxDateInstanceChange?.unsubscribe();\n this.maxDateInstanceChange = null;\n\n this.minDateInstanceChange?.unsubscribe();\n this.minDateInstanceChange = null;\n }\n\n //######################### protected methods #########################\n\n /**\n * Sets min date time and notifies about changes\n * @param value - Value to be set\n */\n @BindThis\n protected minDateSet(value: TDate|undefined|null): void\n {\n this.ɵMinDateTime = value;\n this.minDateTimeChangesSubject.next();\n }\n\n /**\n * Sets max date time and notifies about changes\n * @param value - Value to be set\n */\n @BindThis\n protected maxDateSet(value: TDate|undefined|null): void\n {\n this.ɵMaxDateTime = value;\n this.maxDateTimeChangesSubject.next();\n }\n\n /**\n * Sets min or max date time value\n * @param value - Value to be set\n * @param setter - Action used for setting value\n */\n protected setMinMaxValue(value: string|number|TDate|Date, setter: Action1<TDate|undefined|null>): void\n {\n const val = this.dateApi.getValue(value, this.customFormat);\n\n if(val.isValid())\n {\n setter(val.value);\n }\n else\n {\n setter(null);\n }\n }\n\n //######################### ng language server #########################\n \n /**\n * Custom input type for `valueFormat` input\n */\n public static ngAcceptInputType_valueFormat: keyof typeof DateTimeValueFormat|DateTimeValueFormat;\n\n /**\n * Custom input type for `maxDateTime` input\n */\n public static ngAcceptInputType_maxDateTime: DateValue|DateTimeBase;\n\n /**\n * Custom input type for `minDateTime` input\n */\n public static ngAcceptInputType_minDateTime: DateValue|DateTimeBase;\n}"]}

package/es2015/src/modules/dateTime/directives/dateTimeBase.js CHANGED Viewed

@@ -1,32 +1,28 @@
-import { Directive, EventEmitter, Input } from '@angular/core';
-import { isString } from '@jscrpt/common';
-import { DateTimeValueFormat } from '../../../misc/enums';
+import { Directive, EventEmitter, inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DateTimeDirective } from './dateTime/dateTime.directive';
 import * as i0 from "@angular/core";
 /**
  * Base class for date time directives, contains basic shared data
  */
 export class DateTimeBase {
-    //######################### constructors #########################
-    constructor(dateApi, formatProvider) {
-        this.dateApi = dateApi;
-        this.formatProvider = formatProvider;
+    //######################### constructor #########################
+    constructor() {
         //######################### protected properties #########################
         /**
-         * Date time value format which is being worked with in this date time
+         * Subscriptions created during initialization
          */
-        this.ɵValueFormat = DateTimeValueFormat.DateInstance;
+        this.initSubscriptions = new Subscription();
         /**
-         * Format of string representation of date
+         * Instance of date time shared data, like formats and restrictions
          */
-        this.ɵFormat = 'date';
+        this.dateTimeData = inject((DateTimeDirective));
         /**
          * @inheritdoc
          */
         this.valueChange = new EventEmitter();
-        /**
-         * Custom format string representation of date
-         */
-        this.customFormat = this.dateApi.getFormat(this.formatProvider[this.ɵFormat]);
+        this.initSubscriptions.add(this.dateTimeData.maxDateTimeChanges.subscribe(() => this.onMaxDateTimeChange()));
+        this.initSubscriptions.add(this.dateTimeData.minDateTimeChanges.subscribe(() => this.onMinDateTimeChange()));
     }
     //######################### public properties - implementation of DateTimeInputValue #########################
     /**
@@ -38,40 +34,28 @@ export class DateTimeBase {
     set value(value) {
         this.ɵValue = value;
     }
-    //######################### public properties - inputs #########################
+    //######################### public methods - implementation of OnDestroy #########################
     /**
-     * Gets or sets date time value format which is being worked with in this date time
+     * Called when component is destroyed
      */
-    get valueFormat() {
-        return this.ɵValueFormat;
-    }
-    set valueFormat(value) {
-        if (isString(value)) {
-            this.ɵValueFormat = DateTimeValueFormat[value];
-            return;
-        }
-        this.ɵValueFormat = value;
+    ngOnDestroy() {
+        this.initSubscriptions.unsubscribe();
     }
+    //######################### protected methods #########################
     /**
-     * Gets or sets format of string representation of date
+     * Called whenever max date time restriction changes
      */
-    get format() {
-        return this.ɵFormat;
+    onMaxDateTimeChange() {
     }
-    set format(value) {
-        this.ɵFormat = value;
-        this.customFormat = this.dateApi.getFormat(this.formatProvider[value]);
+    /**
+     * Called whenever min date time restriction changes
+     */
+    onMinDateTimeChange() {
     }
 }
-DateTimeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimeBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DateTimeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: DateTimeBase, inputs: { valueFormat: "valueFormat", format: "format", customFormat: "customFormat" }, ngImport: i0 });
+DateTimeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DateTimeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: DateTimeBase, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimeBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }]; }, propDecorators: { valueFormat: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], customFormat: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=dateTimeBase.js.map

package/es2015/src/modules/dateTime/directives/dateTimeBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dateTimeBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTime/directives/dateTimeBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,YAAY,EAAE,~~KAAK~~,~~EAAC~~,MAAM,eAAe,CAAC;~~AAC7D~~,OAAO,EAAC,~~QAAQ~~,EAAC,MAAM,~~gBAAgB~~,CAAC;~~AAGxC~~,OAAO,EAAC,~~mBAAmB~~,EAAC,MAAM,~~qBAAqB,~~CAAC;;~~AAIxD~~;;GAEG;AAEH,MAAM,OAAO,YAAY;~~IAgFrB~~,~~kEAAkE~~;~~IAClE,YAAsB,OAAuB,EACvB,cAA8B~~;~~QAD9B~~,~~YAAO,GAAP,OAAO,CAAgB;QACvB,mBAAc,GAAd,cAAc,CAAgB;QAhFpD,~~0EAA0E;QAE1E;;WAEG;QACO,~~iBAAY~~,~~GAAwB~~,~~mBAAmB~~,~~CAAC,~~YAAY,CAAC;~~QAE~~/E;;WAEG;QACO,~~YAAO~~,~~GAAyB~~,MAAM,CAAC;~~QAqBjD~~;;WAEG;QACI,gBAAW,GAAuB,IAAI,YAAY,EAAQ,CAAC;~~QAsClE;;WAEG;QAEI~~,~~iBAAY,GAAW,~~IAAI,CAAC,~~OAAO~~,CAAC,~~SAAS~~,CAAC,IAAI,CAAC,~~cAAc~~,CAAC,~~IAAI~~,CAAC,~~OAAO~~,CAAC,~~CAAC~~,~~CAAC;IAMxF~~,CAAC~~;IAjED~~,~~8GAA8G;IAE9G;;OAEG;IACH~~,~~IAAW~~,~~KAAK;QAEZ~~,~~OAAO~~,~~IAAI,~~CAAC,~~MAAM,~~CAAC~~;IACvB~~,CAAC;~~IACD~~,~~IAAW~~,~~KAAK,~~CAAC,~~KAAqD;QAElE~~,~~IAAI,~~CAAC,~~MAAM,~~GAAG,~~KAAK,~~CAAC~~;IACxB~~,~~CAAC;IAOD,gFAAgF;IAEhF;;OAEG;IACH,IACW,WAAW;QAElB,OAAO,~~IAAI,CAAC,YAAY,CAAC~~;IAC7B~~,CAAC~~;IACD~~,~~IAAW~~,~~WAAW,~~CAAC,~~KAA0B;QAE7C~~,~~IAAG~~,~~QAAQ,~~CAAC,~~KAAK,CAAC,EAClB;YACI,~~IAAI,CAAC,~~YAAY,GAAG,~~mBAAmB,~~CAAC~~,~~KAAK,CAAmC,~~CAAC~~;YAEjF~~,~~OAAO;SACV;QAED,IAAI,~~CAAC,~~YAAY,GAAG,KAAK,~~CAAC;~~IAC9B~~,CAAC;~~IAED~~;;OAEG;IACH,~~IACW~~,~~MAAM~~;~~QAEb~~,OAAO,IAAI,CAAC,~~OAAO~~,CAAC;~~IACxB~~,CAAC;IACD,IAAW,~~MAAM~~,CAAC,~~KAA2B~~;~~QAEzC~~,IAAI,CAAC,~~OAAO~~,GAAG,KAAK,CAAC;~~QACrB~~,~~IAAI,~~CAAC,~~YAAY~~,~~GAAG~~,IAAI,CAAC,~~OAAO~~,CAAC,~~SAAS~~,~~CAAC~~,~~IAAI,~~CAAC,~~cAAc,~~CAAC,~~KAAK~~,~~CAAC~~,CAAC,~~CAAC~~;~~IAC3E~~,CAAC;;~~yGAxEQ~~,YAAY;6FAAZ,YAAY;2FAAZ,YAAY;kBADxB,SAAS~~;kHA6CK,WAAW;sBADrB,KAAK;gBAqBK,MAAM;sBADhB,KAAK;gBAeC,YAAY;sBADlB,KAAK~~","sourcesContent":["import {Directive, EventEmitter, ~~Input~~} from '@angular/core';\nimport {~~isString~~} from '~~@jscrpt/common~~';\n\nimport {DateTimeInputValue~~, FormatProvider~~} from '../../../interfaces';\nimport {~~DateTimeValueFormat} from '../../../misc/enums';\nimport {~~DateTimeInputOutputValue} from '../../../misc/types';\nimport {~~DateApi~~} from '~~../../../services~~';\n\n/*\n Base class for date time directives, contains basic shared data\n /\n@Directive()\nexport class DateTimeBase<TDate = unknown> implements DateTimeInputValue<TDate>\n{\n //######################### protected properties #########################\n\n /\n ~~Date~~ ~~time~~ ~~value~~ ~~format which is being worked with in this date time~~\n /\n protected ~~ɵValueFormat~~: ~~DateTimeValueFormat~~ = DateTimeValueFormat.DateInstance;\n\n /\n ~~Format of string representation of date\n /\n protected ɵFormat: keyof FormatProvider = 'date'~~;\n\n /\n Current value of date time, could be string, unix timestamp, Date, TDate object, or ranged DateTimeValue\n /\n protected ɵValue: DateTimeInputOutputValue<TDate>\|undefined\|null;\n\n //######################### public properties - implementation of DateTimeInputValue #########################\n\n /\n @inheritdoc\n /\n public get value(): DateTimeInputOutputValue<TDate>\|undefined\|null\n {\n return this.ɵValue;\n }\n public set value(value: DateTimeInputOutputValue<TDate>\|undefined\|null)\n {\n this.ɵValue = value;\n }\n\n /\n @inheritdoc\n /\n public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### ~~public~~ ~~properties - inputs~~ #########################\n\n ~~/\n Gets or sets date time value format which is being worked with in this date time\n /\n @Input~~()\n ~~public get valueFormat(): DateTimeValueFormat\n~~ {\n ~~return~~ this~~.ɵValueFormat;\n }\n public~~ ~~set~~ ~~valueFormat~~(~~value: DateTimeValueFormat~~)\n ~~{\n~~ if(~~isString~~(~~value~~))\n {\n ~~this.ɵValueFormat~~ = ~~DateTimeValueFormat[value]~~ as ~~unknown~~ as ~~DateTimeValueFormat;\n\n return;\n }\n\n this.ɵValueFormat~~ ~~= value;\~~n }\n\n /\n ~~Gets~~ or ~~sets~~ ~~format~~ ~~of string representation of date~~\n /\n ~~@Input()\n~~ public ~~get format~~(): ~~keyof FormatProvider~~\n {\n ~~return~~ this~~.ɵFormat~~;\n }\n ~~public set format(value: keyof FormatProvider)~~\n ~~{\n this.ɵFormat~~ = ~~value;\n this.customFormat~~ ~~= this.dateApi.getFormat(this.formatProvider[value]);\~~n }\n\n /\n ~~Custom~~ ~~format~~ ~~string~~ ~~representation~~ of ~~date~~\n /\n ~~@Input()\n public~~ ~~customFormat: string = this.dateApi.getFormat~~(~~this.formatProvider[this.ɵFormat]~~)~~;\n\n //######################### constructors #########################\n constructor(protected dateApi~~: ~~DateApi<TDate>,\n protected formatProvider: FormatProvider,)~~\n {\n }\n\n ~~//######################### ng language server #########################\n \n~~ /\n ~~Custom~~ ~~input~~ ~~type~~ ~~for~~ ~~`valueFormat`~~ ~~input~~\n */\n ~~public~~ ~~static ngAcceptInputType_valueFormat~~: ~~keyof typeof DateTimeValueFormat\|DateTimeValueFormat;\~~n}\n"]}
1	+ {"version":3,"file":"dateTimeBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTime/directives/dateTimeBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,YAAY,EAAE,MAAM,EAAY,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;;AAEhE;;GAEG;AAEH,MAAM,OAAO,YAAY;IAsCrB,iEAAiE;IACjE;QArCA,0EAA0E;QAE1E;;WAEG;QACO,sBAAiB,GAAiB,IAAI,YAAY,EAAE,CAAC;QAO/D;;WAEG;QACO,iBAAY,GAA6B,MAAM,CAAC,CAAA,iBAAwB,CAAA,CAAC,CAAC;QAgBpF;;WAEG;QACI,gBAAW,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAK9D,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC;QAC7G,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC;IACjH,CAAC;IAxBD,8GAA8G;IAE9G;;OAEG;IACH,IAAW,KAAK;QAEZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAW,KAAK,CAAC,KAAqD;QAElE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAcD,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,CAAC;IACzC,CAAC;IAED,uEAAuE;IAEvE;;OAEG;IACO,mBAAmB;IAE7B,CAAC;IAED;;OAEG;IACO,mBAAmB;IAE7B,CAAC;;yGArEQ,YAAY;6FAAZ,YAAY;2FAAZ,YAAY;kBADxB,SAAS","sourcesContent":["import {Directive, EventEmitter, inject, OnDestroy} from '@angular/core';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../interfaces';\nimport {DateTimeInputOutputValue} from '../../../misc/types';\nimport {DateTimeDirective} from './dateTime/dateTime.directive';\n\n/*\n Base class for date time directives, contains basic shared data\n /\n@Directive()\nexport class DateTimeBase<TDate = unknown> implements DateTimeInputValue<TDate>, OnDestroy\n{\n //######################### protected properties #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n /\n Current value of date time, could be string, unix timestamp, Date, TDate object, or ranged DateTimeValue\n /\n protected ɵValue: DateTimeInputOutputValue<TDate>\|undefined\|null;\n\n /\n Instance of date time shared data, like formats and restrictions\n /\n protected dateTimeData: DateTimeDirective<TDate> = inject(DateTimeDirective<TDate>);\n\n //######################### public properties - implementation of DateTimeInputValue #########################\n\n /\n @inheritdoc\n /\n public get value(): DateTimeInputOutputValue<TDate>\|undefined\|null\n {\n return this.ɵValue;\n }\n public set value(value: DateTimeInputOutputValue<TDate>\|undefined\|null)\n {\n this.ɵValue = value;\n }\n\n /\n @inheritdoc\n /\n public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### constructor #########################\n constructor()\n {\n this.initSubscriptions.add(this.dateTimeData.maxDateTimeChanges.subscribe(() => this.onMaxDateTimeChange()));\n this.initSubscriptions.add(this.dateTimeData.minDateTimeChanges.subscribe(() => this.onMinDateTimeChange()));\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /\n Called when component is destroyed\n /\n public ngOnDestroy(): void\n {\n this.initSubscriptions.unsubscribe();\n }\n\n //######################### protected methods #########################\n\n /\n Called whenever max date time restriction changes\n /\n protected onMaxDateTimeChange(): void\n {\n }\n\n /\n Called whenever min date time restriction changes\n */\n protected onMinDateTimeChange(): void\n {\n }\n}\n"]}