@anglr/datetime 5.0.0-beta.20221019093146 → 5.0.0-beta.20221019112435
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.
- package/changelog.md +11 -4
- package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js +0 -1
- package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js.map +1 -1
- package/es2015/src/legacy/picker/misc/datetimePicker.interface.js.map +1 -1
- package/es2015/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js +10 -10
- package/es2015/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js.map +1 -1
- package/es2015/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js +25 -10
- package/es2015/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js.map +1 -1
- package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js +66 -5
- package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js.map +1 -1
- package/es2015/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js +9 -3
- package/es2015/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js.map +1 -1
- package/es2015/src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.js.map +1 -1
- package/es2015/src/pipes/dateFormat.pipe.js +3 -9
- package/es2015/src/pipes/dateFormat.pipe.js.map +1 -1
- package/es2020/src/legacy/picker/components/dayPicker/dayPicker.component.js +0 -1
- package/es2020/src/legacy/picker/components/dayPicker/dayPicker.component.js.map +1 -1
- package/es2020/src/legacy/picker/misc/datetimePicker.interface.js.map +1 -1
- package/es2020/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js +10 -10
- package/es2020/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js.map +1 -1
- package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js +25 -10
- package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js.map +1 -1
- package/es2020/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js +63 -5
- package/es2020/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js.map +1 -1
- package/es2020/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js +8 -3
- package/es2020/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js.map +1 -1
- package/es2020/src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.js.map +1 -1
- package/es2020/src/pipes/dateFormat.pipe.js +3 -9
- package/es2020/src/pipes/dateFormat.pipe.js.map +1 -1
- package/package.json +1 -1
- package/src/legacy/picker/components/dayPicker/dayPicker.component.d.ts.map +1 -1
- package/src/legacy/picker/misc/datetimePicker.interface.d.ts +0 -4
- package/src/legacy/picker/misc/datetimePicker.interface.d.ts.map +1 -1
- package/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.d.ts +21 -8
- package/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.d.ts.map +1 -1
- package/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.d.ts +7 -6
- package/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.d.ts.map +1 -1
- package/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.d.ts +24 -0
- package/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.d.ts.map +1 -1
- package/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html +11 -13
- package/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.d.ts.map +1 -1
- package/src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.d.ts +16 -8
- package/src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.d.ts.map +1 -1
- package/src/pipes/dateFormat.pipe.d.ts +28 -2
- package/src/pipes/dateFormat.pipe.d.ts.map +1 -1
- package/version.bak +1 -1
package/es2015/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {lastValueFrom, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n absolute: true,\n alwaysVisible: false,\n closeOnValueSelect: true,\n disabled: false,\n positionOptions: PositionPlacement.BottomStart,\n showOnFocus: true,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n selector: '[dateTime][withPicker]',\n exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> implements OnInit, OnDestroy\n{\n //######################### protected properties #########################\n\n /**\n * Indication whether is value changes disabled\n */\n protected valueChangeDisabled: boolean = false;\n\n /**\n * Options for date time picker directive\n */\n protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n /**\n * Subscriptions created during initialization\n */\n protected initSubscriptions: Subscription = new Subscription();\n\n /**\n * Date time picker component reference\n */\n protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n /**\n * Instance of date time picker component\n */\n protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n /**\n * Instance of date time picker element\n */\n protected componentElement: HTMLElement|undefined|null;\n\n /**\n * Subscription for value changes in picker\n */\n protected valueChangeSubscription: Subscription|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * Gets or sets options for date time picker directive\n */\n @Input()\n public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n {\n return this.ɵWithPickerOptions;\n }\n public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n {\n this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n }\n\n //######################### constructor #########################\n constructor(protected viewContainer: ViewContainerRef,\n protected element: ElementRef<HTMLElement>,\n @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n @Inject(DOCUMENT) protected document: Document,\n @Inject(POSITION) protected position: Position,\n @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n {\n this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /**\n * Initialize component\n */\n public async ngOnInit(): Promise<void>\n {\n if(this.withPickerOptions.alwaysVisible)\n {\n this.showPicker();\n }\n\n this.initSubscriptions.add(this.input.valueChange.subscribe(() => this.setPickerValue()));\n\n this.initSubscriptions.add(this.input.focus.subscribe(() =>\n {\n if(this.withPickerOptions.showOnFocus)\n {\n this.showPicker();\n }\n }));\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n\n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this.hidePicker();\n this.initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Hides date time picker\n */\n public async showPicker(): Promise<void>\n {\n if(this.withPickerOptions.disabled || this.componentRef)\n {\n return;\n }\n\n this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n this.component = this.componentRef.instance;\n\n if(this.withPickerOptions.absolute)\n {\n this.document.body.append(this.componentElement);\n }\n\n this.valueChangeSubscription = this.component.valueChange.subscribe(() =>\n {\n if(this.component)\n {\n this.valueChangeDisabled = true;\n this.input.value = this.component.value;\n this.input.valueChange.emit();\n this.valueChangeDisabled = false;\n }\n });\n\n this.document.addEventListener('click', this.handleClickOutside);\n\n const result = await lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement,\n {\n placement: this.withPickerOptions.positionOptions,\n }));\n\n applyPositionResult(result);\n this.setPickerValue();\n }\n\n /**\n * Shows date time picker\n */\n public hidePicker(): void\n {\n if(this.withPickerOptions.alwaysVisible)\n {\n return;\n }\n\n this.valueChangeSubscription?.unsubscribe();\n this.valueChangeSubscription = null;\n\n this.component = null;\n\n this.componentRef?.destroy();\n this.componentRef = null;\n\n this.componentElement?.remove();\n this.componentElement = null;\n\n this.document.removeEventListener('click', this.handleClickOutside);\n }\n\n //######################### protected methods #########################\n\n /**\n * Sets all picker value\n */\n protected setPickerValue(): void\n {\n if(this.valueChangeDisabled)\n {\n return;\n }\n\n if(this.componentRef)\n {\n this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n // this.componentRef.changeDetectorRef.markForCheck();\n this.componentRef.changeDetectorRef.detectChanges();\n }\n }\n\n /**\n * Handles clicking outside of picker\n * @param event - Event that occured\n */\n @BindThis\n protected handleClickOutside(event: MouseEvent): void\n {\n if(!this.componentElement)\n {\n return;\n }\n\n if(this.componentElement != event.target &&\n !isDescendant(this.componentElement, event.target as HTMLElement) &&\n (!this.input.element || (this.input.element != event.target &&\n !isDescendant(this.input.element, event.target as HTMLElement))))\n {\n this.hidePicker();\n }\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {lastValueFrom, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n absolute: true,\n alwaysVisible: false,\n closeOnValueSelect: true,\n disabled: false,\n positionOptions: PositionPlacement.BottomStart,\n showOnFocus: true,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n selector: '[dateTime][withPicker]',\n exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> implements OnInit, OnDestroy\n{\n //######################### protected properties #########################\n\n /**\n * Indication whether is value changes disabled\n */\n protected valueChangeDisabled: boolean = false;\n\n /**\n * Options for date time picker directive\n */\n protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n /**\n * Subscriptions created during initialization\n */\n protected initSubscriptions: Subscription = new Subscription();\n\n /**\n * Date time picker component reference\n */\n protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n /**\n * Instance of date time picker component\n */\n protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n /**\n * Instance of date time picker element\n */\n protected componentElement: HTMLElement|undefined|null;\n\n /**\n * Subscription for value changes in picker\n */\n protected valueChangeSubscription: Subscription|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * Gets or sets options for date time picker directive\n */\n @Input()\n public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n {\n return this.ɵWithPickerOptions;\n }\n public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n {\n this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n }\n\n //######################### constructor #########################\n constructor(protected viewContainer: ViewContainerRef,\n protected element: ElementRef<HTMLElement>,\n @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n @Inject(DOCUMENT) protected document: Document,\n @Inject(POSITION) protected position: Position,\n @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n {\n this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /**\n * Initialize component\n */\n public async ngOnInit(): Promise<void>\n {\n if(this.withPickerOptions.alwaysVisible)\n {\n this.showPicker();\n }\n\n this.initSubscriptions.add(this.input.valueChange.subscribe(() =>\n {\n this.setPickerValue();\n this.componentRef?.changeDetectorRef.detectChanges();\n }));\n\n this.initSubscriptions.add(this.input.focus.subscribe(() =>\n {\n if(this.withPickerOptions.showOnFocus)\n {\n this.showPicker();\n }\n }));\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n\n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this.hidePicker();\n this.initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Hides date time picker\n */\n public async showPicker(): Promise<void>\n {\n if(this.withPickerOptions.disabled || this.componentRef)\n {\n return;\n }\n\n this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n this.component = this.componentRef.instance;\n\n if(this.withPickerOptions.absolute)\n {\n this.document.body.append(this.componentElement);\n }\n\n this.valueChangeSubscription = this.component.valueChange.subscribe(() =>\n {\n if(this.component)\n {\n this.valueChangeDisabled = true;\n this.input.value = this.component.value;\n this.input.valueChange.emit();\n this.valueChangeDisabled = false;\n }\n });\n\n this.document.addEventListener('click', this.handleClickOutside);\n\n const result = await lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement,\n {\n placement: this.withPickerOptions.positionOptions,\n }));\n\n applyPositionResult(result);\n this.setPickerValue();\n // this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.input.);\n // this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n // this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n this.componentRef.changeDetectorRef.detectChanges();\n }\n\n /**\n * Shows date time picker\n */\n public hidePicker(): void\n {\n if(this.withPickerOptions.alwaysVisible)\n {\n return;\n }\n\n this.valueChangeSubscription?.unsubscribe();\n this.valueChangeSubscription = null;\n\n this.component = null;\n\n this.componentRef?.destroy();\n this.componentRef = null;\n\n this.componentElement?.remove();\n this.componentElement = null;\n\n this.document.removeEventListener('click', this.handleClickOutside);\n }\n\n //######################### protected methods #########################\n\n /**\n * Sets all picker value\n */\n protected setPickerValue(): void\n {\n if(this.valueChangeDisabled)\n {\n return;\n }\n\n if(this.componentRef)\n {\n this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n }\n }\n\n /**\n * Handles clicking outside of picker\n * @param event - Event that occured\n */\n @BindThis\n protected handleClickOutside(event: MouseEvent): void\n {\n if(!this.componentElement)\n {\n return;\n }\n\n if(this.componentElement != event.target &&\n !isDescendant(this.componentElement, event.target as HTMLElement) &&\n (!this.input.element || (this.input.element != event.target &&\n !isDescendant(this.input.element, event.target as HTMLElement))))\n {\n this.hidePicker();\n }\n }\n}"]}
|
package/es2015/src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateTimePicker.interface.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Observable} from 'rxjs';\n\nimport {DateTimeObjectValue} from '../../../../misc/types';\n\n/**\n * Describes date time picker API for each date time period\n */\nexport interface DateTimePicker<TDate = unknown, TOptions = unknown>\n{\n /**\n * Value of date time picker\n */\n value: DateTimeObjectValue<TDate>|undefined|null;\n\n /**\n * Options for date time picker period\n */\n options: TOptions|undefined|null;\n\n /**\n * Date that describes which date should be displayed\n */\n display: TDate|undefined|null;\n\n /**\n * Indication whether picker can display
|
|
1
|
+
{"version":3,"file":"dateTimePicker.interface.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/interfaces/dateTimePicker/dateTimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Observable} from 'rxjs';\n\nimport {DateTimeObjectValue} from '../../../../misc/types';\n\n/**\n * Describes date time picker API for each date time period\n */\nexport interface DateTimePicker<TDate = unknown, TOptions = unknown>\n{\n /**\n * Value of date time picker\n */\n value: DateTimeObjectValue<TDate>|undefined|null;\n\n /**\n * Options for date time picker period\n */\n options: TOptions|undefined|null;\n\n /**\n * Date that describes which date should be displayed\n */\n display: TDate|undefined|null;\n\n /**\n * Max allowed date\n */\n maxDate: TDate|undefined|null;\n\n /**\n * Min allowed date to be selected\n */\n minDate: TDate|undefined|null;\n\n /**\n * Indication whether picker can display scale date time period up\n */\n canScaleUp: boolean;\n\n /**\n * Indication whether picker can display scale date time period down\n */\n canScaleDown: boolean;\n\n /**\n * Occurs when date time picker value changes\n */\n readonly valueChange: Observable<void>; \n\n /**\n * Occurs when period should be scaled up\n */\n readonly scaleUp: Observable<TDate>;\n\n /**\n * Occurs when period should be scaled down\n */\n readonly scaleDown: Observable<TDate>;\n}"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Inject, Pipe } from '@angular/core';
|
|
2
|
-
import { nameof } from '@jscrpt/common';
|
|
2
|
+
import { isString, nameof } from '@jscrpt/common';
|
|
3
3
|
import { DATE_API, FORMAT_PROVIDER } from '../misc/tokens';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
/**
|
|
@@ -11,14 +11,8 @@ export class DateFormatPipe {
|
|
|
11
11
|
this._formatProvider = _formatProvider;
|
|
12
12
|
this._dateApi = _dateApi;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
* Formats provided date into formatted string
|
|
17
|
-
* @param value - value to be transformed
|
|
18
|
-
* @param format - Format that is used for formatting, can be also 'FormatProvider' key
|
|
19
|
-
* @param parseFormat - format used for parsing string date
|
|
20
|
-
*/
|
|
21
|
-
transform(value, format = nameof('date'), parseFormat) {
|
|
14
|
+
transform(value, format = nameof('date'), parseFormatOrCustomFormat, _customFormat) {
|
|
15
|
+
const parseFormat = isString(parseFormatOrCustomFormat) ? parseFormatOrCustomFormat : undefined;
|
|
22
16
|
//format provider value
|
|
23
17
|
if (format in this._formatProvider) {
|
|
24
18
|
format = this._formatProvider[format];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateFormat.pipe.js","sourceRoot":"","sources":["../../../src/pipes/dateFormat.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"dateFormat.pipe.js","sourceRoot":"","sources":["../../../src/pipes/dateFormat.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAC,QAAQ,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;;AAGzD;;GAEG;AAEH,MAAM,OAAO,cAAc;IAEvB,kEAAkE;IAClE,YAA6C,eAA+B,EACtC,QAAwB;QADjB,oBAAe,GAAf,eAAe,CAAgB;QACtC,aAAQ,GAAR,QAAQ,CAAgB;IAE9D,CAAC;IAqCM,SAAS,CAAC,KAAsB,EAAE,SAAsC,MAAM,CAAiB,MAAM,CAAC,EAAE,yBAA0C,EAAE,aAAuB;QAE9K,MAAM,WAAW,GAAqB,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC;QAElH,uBAAuB;QACvB,IAAG,MAAM,IAAI,IAAI,CAAC,eAAe,EACjC;YACI,MAAM,GAAS,IAAI,CAAC,eAAgB,CAAC,MAAM,CAAC,CAAC;SAChD;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAE3D,IAAG,OAAO,CAAC,OAAO,EAAE,EACpB;YACI,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;SAC1D;QAED,OAAO,EAAE,CAAC;IACd,CAAC;;2GA7DQ,cAAc,kBAGH,eAAe,aACf,QAAQ;yGAJnB,cAAc;2FAAd,cAAc;kBAD1B,IAAI;mBAAC,EAAC,IAAI,EAAE,YAAY,EAAC;;0BAIT,MAAM;2BAAC,eAAe;;0BACtB,MAAM;2BAAC,QAAQ","sourcesContent":["import {Inject, Pipe, PipeTransform} from '@angular/core';\nimport {isString, nameof} from '@jscrpt/common';\n\nimport {FormatProvider} from '../interfaces';\nimport {DATE_API, FORMAT_PROVIDER} from '../misc/tokens';\nimport {DateApi, DateValue} from '../services';\n\n/**\n * Pipe that is used for formatting date\n */\n@Pipe({name: 'dateFormat'})\nexport class DateFormatPipe<TDate = any> implements PipeTransform\n{\n //######################### constructors #########################\n constructor(@Inject(FORMAT_PROVIDER) private _formatProvider: FormatProvider,\n @Inject(DATE_API) private _dateApi: DateApi<TDate>)\n {\n }\n\n //######################### public methods - implementation of PipeTransform #########################\n\n /**\n * Formats provided date into formatted string, with default format 'date'\n * @param value - value to be transformed\n */\n public transform(value: TDate|DateValue): string\n /**\n * Formats provided date into formatted string\n * @param value - value to be transformed\n * @param format - predefined format that is used for formatting, one of 'FormatProvider' keys\n */\n public transform(value: TDate|DateValue, format: keyof FormatProvider): string\n /**\n * Formats provided date into formatted string\n * @param value - value to be transformed\n * @param format - predefined format that is used for formatting, one of 'FormatProvider' keys\n * @param parseFormat - format used for parsing string date\n */\n public transform(value: TDate|DateValue, format: keyof FormatProvider, parseFormat: string): string\n /**\n * Formats provided date into formatted string\n * @param value - value to be transformed\n * @param format - format that is used for formatting\n * @param customFormat - indication that custom format is used\n */\n public transform(value: TDate|DateValue, format: string, customFormat: true): string\n /**\n * Formats provided date into formatted string\n * @param value - value to be transformed\n * @param format - format that is used for formatting\n * @param parseFormat - format used for parsing string date\n * @param customFormat - indication that custom format is used\n */\n public transform(value: TDate|DateValue, format: string, parseFormat: string, customFormat: true): string\n public transform(value: TDate|DateValue, format: string|keyof FormatProvider = nameof<FormatProvider>('date'), parseFormatOrCustomFormat?: string|boolean, _customFormat?: boolean): string\n {\n const parseFormat: string|undefined = isString(parseFormatOrCustomFormat) ? parseFormatOrCustomFormat : undefined;\n \n //format provider value\n if(format in this._formatProvider)\n {\n format = (<any>this._formatProvider)[format];\n }\n\n const dateObj = this._dateApi.getValue(value, parseFormat);\n\n if(dateObj.isValid())\n {\n return dateObj.format(this._dateApi.getFormat(format));\n }\n\n return '';\n }\n}"]}
|
|
@@ -144,7 +144,6 @@ export class DateTimeDayPickerComponent extends PickerBaseComponent {
|
|
|
144
144
|
const data = {
|
|
145
145
|
active: false,
|
|
146
146
|
disabled: false,
|
|
147
|
-
betweenActive: false,
|
|
148
147
|
date: this.displayDate.value,
|
|
149
148
|
otherMonth: otherMonth,
|
|
150
149
|
today: this.displayDate.isSameDay(today),
|
|
@@ -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>"]}
|
|
@@ -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
|
|
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"]}
|
|
@@ -10,21 +10,21 @@ export class DateTimePeriodPickerBase {
|
|
|
10
10
|
*/
|
|
11
11
|
this.valueChangeSubject = new Subject();
|
|
12
12
|
/**
|
|
13
|
-
* Subject used for
|
|
13
|
+
* Subject used for scaling up
|
|
14
14
|
*/
|
|
15
|
-
this.
|
|
15
|
+
this.scaleUpSubject = new Subject();
|
|
16
16
|
/**
|
|
17
|
-
* Subject used for
|
|
17
|
+
* Subject used for scaling down
|
|
18
18
|
*/
|
|
19
|
-
this.
|
|
19
|
+
this.scaleDownSubject = new Subject();
|
|
20
20
|
/**
|
|
21
21
|
* @inheritdoc
|
|
22
22
|
*/
|
|
23
|
-
this.
|
|
23
|
+
this.canScaleUp = false;
|
|
24
24
|
/**
|
|
25
25
|
* @inheritdoc
|
|
26
26
|
*/
|
|
27
|
-
this.
|
|
27
|
+
this.canScaleDown = false;
|
|
28
28
|
}
|
|
29
29
|
/**
|
|
30
30
|
* @inheritdoc
|
|
@@ -35,14 +35,14 @@ export class DateTimePeriodPickerBase {
|
|
|
35
35
|
/**
|
|
36
36
|
* @inheritdoc
|
|
37
37
|
*/
|
|
38
|
-
get
|
|
39
|
-
return this.
|
|
38
|
+
get scaleUp() {
|
|
39
|
+
return this.scaleUpSubject.asObservable();
|
|
40
40
|
}
|
|
41
41
|
/**
|
|
42
42
|
* @inheritdoc
|
|
43
43
|
*/
|
|
44
|
-
get
|
|
45
|
-
return this.
|
|
44
|
+
get scaleDown() {
|
|
45
|
+
return this.scaleDownSubject.asObservable();
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
//# sourceMappingURL=dateTimePeriodPickerBase.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateTimePeriodPickerBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/dateTimePeriodPickerBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAC,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"dateTimePeriodPickerBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/dateTimePeriodPickerBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAC,MAAM,MAAM,CAAC;AAMzC;;GAEG;AACH,MAAM,OAAgB,wBAAwB;IAA9C;QAEI,0EAA0E;QAE1E;;WAEG;QACO,uBAAkB,GAAkB,IAAI,OAAO,EAAQ,CAAC;QAElE;;WAEG;QACO,mBAAc,GAAmB,IAAI,OAAO,EAAS,CAAC;QAEhE;;WAEG;QACO,qBAAgB,GAAmB,IAAI,OAAO,EAAS,CAAC;QAkClE;;WAEG;QACI,eAAU,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACI,iBAAY,GAAY,KAAK,CAAC;IAyBzC,CAAC;IAvBG;;OAEG;IACH,IAAW,WAAW;QAElB,OAAO,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,IAAW,OAAO;QAEd,OAAO,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,IAAW,SAAS;QAEhB,OAAO,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;IAChD,CAAC;CACJ","sourcesContent":["import {Observable, Subject} from 'rxjs';\n\nimport {DateTimeObjectValue} from '../../../misc/types';\nimport {DateApiObject} from '../../../services';\nimport {DateTimePicker} from '../interfaces';\n\n/**\n * Base abstract class for each date time period picker\n */\nexport abstract class DateTimePeriodPickerBase<TDate = unknown, TOptions = unknown> implements DateTimePicker<TDate, TOptions>\n{\n //######################### protected properties #########################\n\n /**\n * Subject used for emitting of value changes\n */\n protected valueChangeSubject: Subject<void> = new Subject<void>();\n\n /**\n * Subject used for scaling up\n */\n protected scaleUpSubject: Subject<TDate> = new Subject<TDate>();\n\n /**\n * Subject used for scaling down\n */\n protected scaleDownSubject: Subject<TDate> = new Subject<TDate>();\n\n /**\n * Date api instance for displayed date\n */\n protected displayDate: DateApiObject<TDate>|undefined|null;\n\n //######################### public properties - implementation of DateTimePicker #########################\n\n /**\n * @inheritdoc\n */\n public value: DateTimeObjectValue<TDate>|undefined|null;\n\n /**\n * @inheritdoc\n */\n public options: TOptions|undefined|null;\n\n /**\n * @inheritdoc\n */\n public display: TDate|undefined|null;\n\n /**\n * @inheritdoc\n */\n public maxDate: TDate|undefined|null;\n\n /**\n * @inheritdoc\n */\n public minDate: TDate|undefined|null;\n\n /**\n * @inheritdoc\n */\n public canScaleUp: boolean = false;\n\n /**\n * @inheritdoc\n */\n public canScaleDown: boolean = false;\n\n /**\n * @inheritdoc\n */\n public get valueChange(): Observable<void>\n {\n return this.valueChangeSubject.asObservable();\n }\n\n /**\n * @inheritdoc\n */\n public get scaleUp(): Observable<TDate>\n {\n return this.scaleUpSubject.asObservable();\n }\n\n /**\n * @inheritdoc\n */\n public get scaleDown(): Observable<TDate>\n {\n return this.scaleDownSubject.asObservable();\n }\n}"]}
|
package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js
CHANGED
|
@@ -4,9 +4,10 @@ import { extend, isBlank, nameof } from '@jscrpt/common';
|
|
|
4
4
|
import { Subscription } from 'rxjs';
|
|
5
5
|
import { DATE_TIME_PICKER_OPTIONS } from '../../misc/tokens';
|
|
6
6
|
import { DayPickerSAComponent } from '../dayPicker/dayPicker.component';
|
|
7
|
-
import { DATE_API } from '../../../../misc/tokens';
|
|
7
|
+
import { DATE_API, FORMAT_PROVIDER } from '../../../../misc/tokens';
|
|
8
8
|
import { formatDateTime, parseDateTime } from '../../../../misc/utils';
|
|
9
9
|
import { DateTimeValueFormat } from '../../../../misc/enums';
|
|
10
|
+
import { DateTimeRestrictedBase } from '../../../dateTime/directives/dateTimeRestrictedBase';
|
|
10
11
|
import * as i0 from "@angular/core";
|
|
11
12
|
/**
|
|
12
13
|
* Text to be displayed when configuration, options are corrupted
|
|
@@ -24,11 +25,11 @@ const defaultOptions = {
|
|
|
24
25
|
/**
|
|
25
26
|
* Component used for displaying date time picker
|
|
26
27
|
*/
|
|
27
|
-
export class DateTimePickerComponent {
|
|
28
|
+
export class DateTimePickerComponent extends DateTimeRestrictedBase {
|
|
28
29
|
//######################### constructor #########################
|
|
29
|
-
constructor(position, dateApi, options) {
|
|
30
|
+
constructor(position, dateApi, formatProvider, options) {
|
|
31
|
+
super(dateApi, formatProvider);
|
|
30
32
|
this.position = position;
|
|
31
|
-
this.dateApi = dateApi;
|
|
32
33
|
//######################### public properties - outputs #########################
|
|
33
34
|
/**
|
|
34
35
|
* @inheritdoc
|
|
@@ -44,6 +45,16 @@ export class DateTimePickerComponent {
|
|
|
44
45
|
throw new Error(CORRUPTED_CONFIG_TEXT);
|
|
45
46
|
}
|
|
46
47
|
}
|
|
48
|
+
//######################### public properties - inputs #########################
|
|
49
|
+
/**
|
|
50
|
+
* @inheritdoc
|
|
51
|
+
*/
|
|
52
|
+
get value() {
|
|
53
|
+
return this.ɵValue;
|
|
54
|
+
}
|
|
55
|
+
set value(value) {
|
|
56
|
+
this.ɵValue = value;
|
|
57
|
+
}
|
|
47
58
|
/**
|
|
48
59
|
* Options for date time picker
|
|
49
60
|
*/
|
|
@@ -75,6 +86,7 @@ export class DateTimePickerComponent {
|
|
|
75
86
|
* Called when component is destroyed
|
|
76
87
|
*/
|
|
77
88
|
ngOnDestroy() {
|
|
89
|
+
super.ngOnDestroy();
|
|
78
90
|
this.component?.destroy();
|
|
79
91
|
this.component = null;
|
|
80
92
|
this.periodChangesSubscription?.unsubscribe();
|
|
@@ -104,12 +116,12 @@ export class DateTimePickerComponent {
|
|
|
104
116
|
this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);
|
|
105
117
|
this.valueChange.emit();
|
|
106
118
|
}));
|
|
107
|
-
this.periodChangesSubscription.add(this.component.instance.
|
|
108
|
-
this.periodChangesSubscription.add(this.component.instance.
|
|
119
|
+
this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));
|
|
120
|
+
this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));
|
|
109
121
|
}
|
|
110
122
|
const component = this.component.instance;
|
|
111
|
-
component.
|
|
112
|
-
component.
|
|
123
|
+
component.canScaleDown = false,
|
|
124
|
+
component.canScaleUp = false;
|
|
113
125
|
component.display = displayDate;
|
|
114
126
|
// component.options
|
|
115
127
|
//TODO: maybe add support for format!
|
|
@@ -148,8 +160,8 @@ export class DateTimePickerComponent {
|
|
|
148
160
|
return this.displayedPeriodType;
|
|
149
161
|
}
|
|
150
162
|
}
|
|
151
|
-
DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_API }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
-
DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
163
|
+
DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_API }, { token: FORMAT_PROVIDER }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
+
DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
153
165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
154
166
|
type: Component,
|
|
155
167
|
args: [{ selector: 'date-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #container></ng-container>" }]
|
|
@@ -159,6 +171,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
|
|
|
159
171
|
}] }, { type: undefined, decorators: [{
|
|
160
172
|
type: Inject,
|
|
161
173
|
args: [DATE_API]
|
|
174
|
+
}] }, { type: undefined, decorators: [{
|
|
175
|
+
type: Inject,
|
|
176
|
+
args: [FORMAT_PROVIDER]
|
|
162
177
|
}] }, { type: undefined, decorators: [{
|
|
163
178
|
type: Inject,
|
|
164
179
|
args: [DATE_TIME_PICKER_OPTIONS]
|
package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../../interfaces';\nimport {DateTimeInputOutputValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {DateApi} from '../../../../services';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\n\n/**\n * Text to be displayed when configuration, options are corrupted\n */\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/**\n * Default options for date time picker\n */\nconst defaultOptions: DateTimePickerOptions = \n{\n defaultPeriod: 'day',\n periodsDefinition:\n {\n 'day': DayPickerSAComponent,\n },\n};\n\n/**\n * Component used for displaying date time picker\n */\n@Component(\n{\n selector: 'date-time-picker',\n templateUrl: 'dateTimePicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> implements DateTimeInputValue<TDate>, OnChanges, OnDestroy\n{\n //######################### protected properties #########################\n \n /**\n * Subscription for changes in date time period picker\n */\n protected periodChangesSubscription: Subscription|undefined|null;\n\n /**\n * Options for date time picker\n */\n protected ɵOptions: DateTimePickerOptions<TDate>;\n\n /**\n * Currently displayed period type\n */\n protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n /**\n * Name of period which is currently displayed\n */\n protected displayedPeriodName: string;\n\n /**\n * Instance of created date time period picker\n */\n protected component: ComponentRef<DateTimePicker<TDate>>|undefined|null;\n \n //######################### protected properties - children #########################\n\n /**\n * Container used for displaying pickers for specific date time part\n */\n @ViewChild('container', {read: ViewContainerRef, static: true})\n protected pickerContainer: ViewContainerRef|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * @inheritdoc\n */\n @Input()\n public value: DateTimeInputOutputValue<TDate>|undefined|null;\n\n /**\n * Options for date time picker\n */\n @Input()\n public get options(): Partial<DateTimePickerOptions<TDate>>\n {\n return this.ɵOptions;\n }\n public set options(value: Partial<DateTimePickerOptions<TDate>>)\n {\n this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n if(value?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = value.periodsDefinition;\n }\n }\n\n //######################### public properties - outputs #########################\n\n /**\n * @inheritdoc\n */\n @Output()\n public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### constructor #########################\n constructor(@Inject(POSITION) protected position: Position,\n @Inject(DATE_API) protected dateApi: DateApi<TDate>,\n @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n {\n this.ɵOptions = extend(true, {}, defaultOptions, options);\n \n if(options?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = options.periodsDefinition;\n }\n\n this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n if(!this.displayedPeriodType)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /**\n * Called when input value changes\n */\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<DateTimePickerComponent>('value') in changes)\n {\n //empty value show now\n if(isBlank(this.value))\n {\n const now = this.dateApi.now();\n\n this.showPicker(this.displayedPeriodType, now.value);\n\n return;\n }\n\n }\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this.component?.destroy();\n this.component = null;\n\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = null;\n }\n\n //######################### protected methods #########################\n\n /**\n * Shows picker\n * @param type - Type of period that should be displayed\n * @param displayDate - Display date to be shown\n */\n protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n {\n if(!this.pickerContainer)\n {\n return;\n }\n\n //create new component and destroy previous one\n if(!this.component || (this.component && type != this.displayedPeriodType))\n {\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = new Subscription();\n this.component?.destroy();\n this.component = this.pickerContainer.createComponent(type);\n\n this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n {\n const component = this.component?.instance;\n\n if(!component)\n {\n return;\n }\n\n this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);\n this.valueChange.emit();\n }));\n\n this.periodChangesSubscription.add(this.component.instance.goUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n this.periodChangesSubscription.add(this.component.instance.goDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n }\n\n const component = this.component.instance;\n\n component.canGoDown = false,\n component.canGoUp = false;\n component.display = displayDate;\n // component.options\n //TODO: maybe add support for format!\n component.value = parseDateTime(this.value, this.dateApi, null, null);\n }\n\n /**\n * Gets type that is above current period picker\n */\n protected getUpperType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index >= periods.length)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index + 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n\n /**\n * Gets type that is below current period picker\n */\n protected getLowerType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index <= 0)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index - 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n}","<ng-container #container></ng-container>"]}
|
|
1
|
+
{"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue, FormatProvider} from '../../../../interfaces';\nimport {DateTimeInputOutputValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {DateApi} from '../../../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\nimport {DateTimeRestrictedBase} from '../../../dateTime/directives/dateTimeRestrictedBase';\n\n/**\n * Text to be displayed when configuration, options are corrupted\n */\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/**\n * Default options for date time picker\n */\nconst defaultOptions: DateTimePickerOptions = \n{\n defaultPeriod: 'day',\n periodsDefinition:\n {\n 'day': DayPickerSAComponent,\n },\n};\n\n/**\n * Component used for displaying date time picker\n */\n@Component(\n{\n selector: 'date-time-picker',\n templateUrl: 'dateTimePicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> extends DateTimeRestrictedBase<TDate> implements DateTimeInputValue<TDate>, OnChanges, OnDestroy\n{\n //######################### protected properties #########################\n \n /**\n * Subscription for changes in date time period picker\n */\n protected periodChangesSubscription: Subscription|undefined|null;\n\n /**\n * Options for date time picker\n */\n protected ɵOptions: DateTimePickerOptions<TDate>;\n\n /**\n * Currently displayed period type\n */\n protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n /**\n * Name of period which is currently displayed\n */\n protected displayedPeriodName: string;\n\n /**\n * Instance of created date time period picker\n */\n protected component: ComponentRef<DateTimePicker<TDate>>|undefined|null;\n \n //######################### protected properties - children #########################\n\n /**\n * Container used for displaying pickers for specific date time part\n */\n @ViewChild('container', {read: ViewContainerRef, static: true})\n protected pickerContainer: ViewContainerRef|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * @inheritdoc\n */\n @Input()\n public override get value(): DateTimeInputOutputValue<TDate>|undefined|null\n {\n return this.ɵValue;\n }\n public override set value(value: DateTimeInputOutputValue<TDate>|undefined|null)\n {\n this.ɵValue = value;\n }\n\n /**\n * Options for date time picker\n */\n @Input()\n public get options(): Partial<DateTimePickerOptions<TDate>>\n {\n return this.ɵOptions;\n }\n public set options(value: Partial<DateTimePickerOptions<TDate>>)\n {\n this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n if(value?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = value.periodsDefinition;\n }\n }\n\n //######################### public properties - outputs #########################\n\n /**\n * @inheritdoc\n */\n @Output()\n public override valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n //######################### constructor #########################\n constructor(@Inject(POSITION) protected position: Position,\n @Inject(DATE_API) dateApi: DateApi<TDate>,\n @Inject(FORMAT_PROVIDER) formatProvider: FormatProvider,\n @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n {\n super(dateApi, formatProvider);\n\n this.ɵOptions = extend(true, {}, defaultOptions, options);\n \n if(options?.periodsDefinition)\n {\n this.ɵOptions.periodsDefinition = options.periodsDefinition;\n }\n\n this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n if(!this.displayedPeriodType)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /**\n * Called when input value changes\n */\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<DateTimePickerComponent>('value') in changes)\n {\n //empty value show now\n if(isBlank(this.value))\n {\n const now = this.dateApi.now();\n\n this.showPicker(this.displayedPeriodType, now.value);\n\n return;\n }\n\n }\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public override ngOnDestroy(): void\n {\n super.ngOnDestroy();\n\n this.component?.destroy();\n this.component = null;\n\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = null;\n }\n\n //######################### protected methods #########################\n\n /**\n * Shows picker\n * @param type - Type of period that should be displayed\n * @param displayDate - Display date to be shown\n */\n protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n {\n if(!this.pickerContainer)\n {\n return;\n }\n\n //create new component and destroy previous one\n if(!this.component || (this.component && type != this.displayedPeriodType))\n {\n this.periodChangesSubscription?.unsubscribe();\n this.periodChangesSubscription = new Subscription();\n this.component?.destroy();\n this.component = this.pickerContainer.createComponent(type);\n\n this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n {\n const component = this.component?.instance;\n\n if(!component)\n {\n return;\n }\n\n this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);\n this.valueChange.emit();\n }));\n\n this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n }\n\n const component = this.component.instance;\n\n component.canScaleDown = false,\n component.canScaleUp = false;\n component.display = displayDate;\n // component.options\n //TODO: maybe add support for format!\n component.value = parseDateTime(this.value, this.dateApi, null, null);\n }\n\n /**\n * Gets type that is above current period picker\n */\n protected getUpperType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index >= periods.length)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index + 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n\n /**\n * Gets type that is below current period picker\n */\n protected getLowerType(): Type<DateTimePicker<TDate>>\n {\n const periods = Object.keys(this.ɵOptions.periodsDefinition);\n const index = periods.indexOf(this.displayedPeriodName);\n\n if(index < 0)\n {\n throw new Error(CORRUPTED_CONFIG_TEXT);\n }\n\n if(index <= 0)\n {\n return this.displayedPeriodType;\n }\n\n this.displayedPeriodName = periods[index - 1];\n this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n return this.displayedPeriodType;\n }\n}","<ng-container #container></ng-container>"]}
|
|
@@ -1,17 +1,75 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
1
|
+
import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
2
3
|
import { DateTimePeriodPickerBase } from '../dateTimePeriodPickerBase';
|
|
4
|
+
import { DatePipesModule } from '../../../datePipes.module';
|
|
5
|
+
import { DATE_API } from '../../../../misc/tokens';
|
|
3
6
|
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
import * as i2 from "../../../../pipes/dateFormat.pipe";
|
|
4
9
|
/**
|
|
5
10
|
* Component used for displaying day picker
|
|
6
11
|
*/
|
|
7
12
|
export class DayPickerSAComponent extends DateTimePeriodPickerBase {
|
|
13
|
+
//######################### constructor #########################
|
|
14
|
+
constructor(dateApi) {
|
|
15
|
+
super();
|
|
16
|
+
this.dateApi = dateApi;
|
|
17
|
+
//######################### protected properties - template bindings #########################
|
|
18
|
+
/**
|
|
19
|
+
* Names of days
|
|
20
|
+
*/
|
|
21
|
+
this.weekdays = [];
|
|
22
|
+
/**
|
|
23
|
+
* Array of period data to be displayed
|
|
24
|
+
* @internal
|
|
25
|
+
*/
|
|
26
|
+
this.periodData = [];
|
|
27
|
+
}
|
|
28
|
+
//######################### protected methods - template bindings #########################
|
|
29
|
+
selectDay(dayData) {
|
|
30
|
+
if (!this.value) {
|
|
31
|
+
this.value = this.displayDate?.clone() ?? this.dateApi.getValue(this.display ?? new Date());
|
|
32
|
+
}
|
|
33
|
+
//single value
|
|
34
|
+
if (!Array.isArray(this.value)) {
|
|
35
|
+
this.value.dayOfMonth(dayData.day);
|
|
36
|
+
this.value.updateOriginal();
|
|
37
|
+
this.valueChangeSubject.next();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Changes displayed month to next month
|
|
42
|
+
* @param event - Event that occured
|
|
43
|
+
*/
|
|
44
|
+
nextMonth(event) {
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
event.stopPropagation();
|
|
47
|
+
this.displayDate?.addMonths(1);
|
|
48
|
+
// this.display(this.displayDate);
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Changes displayed month to previous month
|
|
52
|
+
* @param event - Event that occured
|
|
53
|
+
*/
|
|
54
|
+
previousMonth(event) {
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
event.stopPropagation();
|
|
57
|
+
this.displayDate?.subtractMonths(1);
|
|
58
|
+
// this.display(this.displayDate!);
|
|
59
|
+
}
|
|
8
60
|
}
|
|
9
|
-
DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps:
|
|
10
|
-
DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "
|
|
61
|
+
DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [{ token: DATE_API }], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
+
DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"period\">\r\n <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div *ngFor=\"let day of periodData\"\r\n class=\"period-datum clickable\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DatePipesModule }, { kind: "pipe", type: i2.DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, decorators: [{
|
|
12
64
|
type: Component,
|
|
13
65
|
args: [{ selector: 'day-picker', host: {
|
|
14
66
|
'[class.date-time-period]': 'true',
|
|
15
|
-
}, standalone: true,
|
|
16
|
-
|
|
67
|
+
}, standalone: true, imports: [
|
|
68
|
+
CommonModule,
|
|
69
|
+
DatePipesModule,
|
|
70
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div *ngFor=\"let day of periodData\"\r\n class=\"period-datum clickable\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>" }]
|
|
71
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
72
|
+
type: Inject,
|
|
73
|
+
args: [DATE_API]
|
|
74
|
+
}] }]; } });
|
|
17
75
|
//# sourceMappingURL=dayPicker.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;;;;AAGjD;;GAEG;AAiBH,MAAM,OAAO,oBAAsC,SAAQ,wBAA+B;IAetF,iEAAiE;IACjE,YAAwC,OAAuB;QAE3D,KAAK,EAAE,CAAC;QAF4B,YAAO,GAAP,OAAO,CAAgB;QAd/D,8FAA8F;QAE9F;;WAEG;QACO,aAAQ,GAAa,EAAE,CAAC;QAElC;;;WAGG;QACI,eAAU,GAAqB,EAAE,CAAC;IAMzC,CAAC;IAED,2FAA2F;IAEjF,SAAS,CAAC,OAAgB;QAEhC,IAAG,CAAC,IAAI,CAAC,KAAK,EACd;YACI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SAC/F;QAED,cAAc;QACd,IAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B;YACI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAE5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAClC;IACL,CAAC;IAED;;;OAGG;IACO,SAAS,CAAC,KAAY;QAE5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;QAE/B,kCAAkC;IACtC,CAAC;IAED;;;OAGG;IACO,aAAa,CAAC,KAAY;QAEhC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;QAEpC,mCAAmC;IACvC,CAAC;;iHAhEQ,oBAAoB,kBAgBT,QAAQ;qGAhBnB,oBAAoB,yJC7BjC,65CAoBM,2CDIE,YAAY,+PACZ,eAAe;2FAIV,oBAAoB;kBAhBhC,SAAS;+BAEI,YAAY,QAGtB;wBACI,0BAA0B,EAAE,MAAM;qBACrC,cACW,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;qBAClB,mBACgB,uBAAuB,CAAC,MAAM;;0BAkBlC,MAAM;2BAAC,QAAQ","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {DateTimePicker} from '../../interfaces';\nimport {DateTimePeriodPickerBase} from '../dateTimePeriodPickerBase';\nimport {DatePipesModule} from '../../../datePipes.module';\nimport {DayData} from '../../../../legacy/picker/interfaces';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n selector: 'day-picker',\n templateUrl: 'dayPicker.component.html',\n host:\n {\n '[class.date-time-period]': 'true',\n },\n standalone: true,\n imports:\n [\n CommonModule,\n DatePipesModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DayPickerSAComponent<TDate = unknown> extends DateTimePeriodPickerBase<TDate> implements DateTimePicker<TDate>\n{\n //######################### protected properties - template bindings #########################\n\n /**\n * Names of days\n */\n protected weekdays: string[] = [];\n\n /**\n * Array of period data to be displayed\n * @internal\n */\n public periodData: DayData<TDate>[] = [];\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,)\n {\n super();\n }\n\n //######################### protected methods - template bindings #########################\n\n protected selectDay(dayData: DayData): void\n {\n if(!this.value)\n {\n this.value = this.displayDate?.clone() ?? this.dateApi.getValue(this.display ?? new Date());\n }\n\n //single value\n if(!Array.isArray(this.value))\n {\n this.value.dayOfMonth(dayData.day);\n this.value.updateOriginal();\n\n this.valueChangeSubject.next();\n }\n }\n\n /**\n * Changes displayed month to next month\n * @param event - Event that occured\n */\n protected nextMonth(event: Event): void\n {\n event.preventDefault();\n event.stopPropagation();\n this.displayDate?.addMonths(1);\n\n // this.display(this.displayDate);\n }\n\n /**\n * Changes displayed month to previous month\n * @param event - Event that occured\n */\n protected previousMonth(event: Event): void\n {\n event.preventDefault();\n event.stopPropagation();\n this.displayDate?.subtractMonths(1);\n\n // this.display(this.displayDate!);\n }\n}","<div class=\"period\">\r\n <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n <div *ngFor=\"let day of periodData\"\r\n class=\"period-datum clickable\"\r\n [class.other-month]=\"day.otherMonth\"\r\n [class.today]=\"day.today\"\r\n [class.weekend]=\"day.weekend\"\r\n [class.active]=\"day.active\"\r\n [class.disabled]=\"day.disabled\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>"]}
|