@agorapulse/ui-components 20.4.13 → 20.4.14
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/agorapulse-ui-components-20.4.14.tgz +0 -0
- package/datepicker/index.d.ts +82 -4
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +185 -6
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +25 -5
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/filter-dropdown/index.d.ts +6 -1
- package/package.json +1 -1
- package/agorapulse-ui-components-20.4.13.tgz +0 -0
|
Binary file
|
package/datepicker/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { OnInit, OnChanges, AfterViewInit, ChangeDetectorRef, EventEmitter, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { OnInit, OnChanges, AfterViewInit, ChangeDetectorRef, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
|
|
3
|
+
import { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
|
|
4
|
+
import dayjs from 'dayjs';
|
|
3
5
|
import { SymbolRegistry } from '@agorapulse/ui-symbol';
|
|
4
6
|
import { DaterangepickerComponent } from '@agorapulse/ngx-daterangepicker-material';
|
|
5
|
-
import
|
|
7
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
6
8
|
|
|
7
9
|
declare enum DatepickerMode {
|
|
8
10
|
Single = "Single",
|
|
@@ -26,6 +28,8 @@ interface I18nDatePicker {
|
|
|
26
28
|
[other: string]: string;
|
|
27
29
|
};
|
|
28
30
|
}
|
|
31
|
+
type FirstDayOfWeek = 'sunday' | 'monday';
|
|
32
|
+
type Locale = 'en' | 'fr' | 'es' | 'de';
|
|
29
33
|
type RangesConfigPresetType = {
|
|
30
34
|
[periodText: string]: [dayjs.Dayjs, dayjs.Dayjs];
|
|
31
35
|
};
|
|
@@ -95,5 +99,79 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit {
|
|
|
95
99
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "ap-datepicker", never, { "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "i18n": { "alias": "i18n"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "mode": { "alias": "mode"; "required": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedDates": { "alias": "selectedDates"; "required": false; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; }, { "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
|
|
96
100
|
}
|
|
97
101
|
|
|
98
|
-
|
|
99
|
-
|
|
102
|
+
/**
|
|
103
|
+
* A dropdown component that displays a datepicker (single, multiple, or range mode)
|
|
104
|
+
* in an overlay. Exposes open/close/toggle so it can be driven by apDropdownTrigger.
|
|
105
|
+
*/
|
|
106
|
+
declare class DatepickerDropdownComponent implements DropdownOverlay {
|
|
107
|
+
datepickerDropdownTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
108
|
+
mode: _angular_core.InputSignal<DatepickerMode>;
|
|
109
|
+
selectedDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
110
|
+
selectedDates: _angular_core.InputSignal<dayjs.Dayjs[]>;
|
|
111
|
+
selectedPeriod: _angular_core.InputSignal<Period>;
|
|
112
|
+
minDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
113
|
+
maxDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
114
|
+
firstDayOfWeek: _angular_core.InputSignal<"sunday" | "monday">;
|
|
115
|
+
locale: _angular_core.InputSignal<string>;
|
|
116
|
+
i18n: _angular_core.InputSignal<I18nDatePicker | undefined>;
|
|
117
|
+
protected readonly effectiveI18n: _angular_core.Signal<I18nDatePicker>;
|
|
118
|
+
showRanges: _angular_core.InputSignal<boolean>;
|
|
119
|
+
showCustomRangeLabel: _angular_core.InputSignal<boolean>;
|
|
120
|
+
rangesConfig: _angular_core.InputSignal<RangesConfigPresetType | null>;
|
|
121
|
+
showBackdrop: _angular_core.InputSignal<boolean>;
|
|
122
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
123
|
+
defaultPosition: _angular_core.InputSignal<"left" | "right">;
|
|
124
|
+
opened: _angular_core.OutputEmitterRef<void>;
|
|
125
|
+
closed: _angular_core.OutputEmitterRef<void>;
|
|
126
|
+
dateSelected: _angular_core.OutputEmitterRef<dayjs.Dayjs>;
|
|
127
|
+
periodSelected: _angular_core.OutputEmitterRef<Period>;
|
|
128
|
+
private readonly overlay;
|
|
129
|
+
readonly isOpen: _angular_core.Signal<boolean>;
|
|
130
|
+
open(triggerElement?: HTMLElement): void;
|
|
131
|
+
close(): void;
|
|
132
|
+
toggle(triggerElement?: HTMLElement): void;
|
|
133
|
+
onDateSelected(date: dayjs.Dayjs): void;
|
|
134
|
+
onPeriodSelected(period: Period): void;
|
|
135
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerDropdownComponent, never>;
|
|
136
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerDropdownComponent, "ap-datepicker-dropdown", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedDates": { "alias": "selectedDates"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "i18n": { "alias": "i18n"; "required": false; "isSignal": true; }; "showRanges": { "alias": "showRanges"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "dateSelected": "dateSelected"; "periodSelected": "periodSelected"; }, never, never, true, never>;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
declare const defaultPeriodSelected: Period;
|
|
140
|
+
declare class InputDatepickerComponent implements ControlValueAccessor {
|
|
141
|
+
mode: _angular_core.InputSignal<DatepickerMode>;
|
|
142
|
+
label: _angular_core.InputSignal<string | undefined>;
|
|
143
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
144
|
+
firstDayOfWeek: _angular_core.InputSignal<FirstDayOfWeek>;
|
|
145
|
+
locale: _angular_core.InputSignal<Locale>;
|
|
146
|
+
dateFormat: _angular_core.InputSignal<string>;
|
|
147
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
148
|
+
minDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
149
|
+
maxDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
150
|
+
selectedDate: _angular_core.InputSignal<dayjs.Dayjs | undefined>;
|
|
151
|
+
selectedDates: _angular_core.InputSignal<dayjs.Dayjs[]>;
|
|
152
|
+
selectedPeriod: _angular_core.InputSignal<Period | undefined>;
|
|
153
|
+
i18n: _angular_core.InputSignal<I18nDatePicker | undefined>;
|
|
154
|
+
showRanges: _angular_core.InputSignal<boolean>;
|
|
155
|
+
showCustomRangeLabel: _angular_core.InputSignal<boolean>;
|
|
156
|
+
rangesConfig: _angular_core.InputSignal<RangesConfigPresetType | null>;
|
|
157
|
+
showBackdrop: _angular_core.InputSignal<boolean>;
|
|
158
|
+
defaultPosition: _angular_core.InputSignal<"left" | "right">;
|
|
159
|
+
periodRange: _angular_core.WritableSignal<Period>;
|
|
160
|
+
isDisabled: _angular_core.WritableSignal<boolean>;
|
|
161
|
+
periodChanged: _angular_core.OutputEmitterRef<Period>;
|
|
162
|
+
dateSelected: _angular_core.OutputEmitterRef<dayjs.Dayjs>;
|
|
163
|
+
displayedDate: _angular_core.Signal<string>;
|
|
164
|
+
initPeriodRange: _angular_core.EffectRef;
|
|
165
|
+
onTouched: () => void;
|
|
166
|
+
onChange: (value: Period) => void;
|
|
167
|
+
onPeriodSelected(period: Period): void;
|
|
168
|
+
writeValue(value: Period): void;
|
|
169
|
+
registerOnChange(fn: (value: Period) => void): void;
|
|
170
|
+
registerOnTouched(fn: () => void): void;
|
|
171
|
+
setDisabledState(isDisabled: boolean): void;
|
|
172
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputDatepickerComponent, never>;
|
|
173
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputDatepickerComponent, "ap-input-datepicker", never, { "mode": { "alias": "mode"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "selectedDates": { "alias": "selectedDates"; "required": false; "isSignal": true; }; "selectedPeriod": { "alias": "selectedPeriod"; "required": false; "isSignal": true; }; "i18n": { "alias": "i18n"; "required": false; "isSignal": true; }; "showRanges": { "alias": "showRanges"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "rangesConfig": { "alias": "rangesConfig"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "defaultPosition": { "alias": "defaultPosition"; "required": false; "isSignal": true; }; }, { "periodChanged": "periodChanged"; "dateSelected": "dateSelected"; }, never, never, true, never>;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, InputDatepickerComponent, RangesConfigPreset, defaultPeriodSelected };
|
|
177
|
+
export type { FirstDayOfWeek, I18nDatePicker, Locale, Period, RangesConfigPresetType, StartDate };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { createDropdownOverlay, DropdownTriggerDirective } from '@agorapulse/ui-components/dropdown-base';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { input, EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component, viewChild, computed, output, signal, effect } from '@angular/core';
|
|
1
4
|
import * as i1 from '@agorapulse/ui-symbol';
|
|
2
|
-
import { apArrowLeft, apArrowRight, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
5
|
+
import { apArrowLeft, apArrowRight, SymbolComponent, withSymbols, apCalendar, apChevronDown } from '@agorapulse/ui-symbol';
|
|
3
6
|
import * as i2 from '@agorapulse/ngx-daterangepicker-material';
|
|
4
7
|
import { NgxDaterangepickerMd } from '@agorapulse/ngx-daterangepicker-material';
|
|
5
|
-
import * as i0 from '@angular/core';
|
|
6
|
-
import { input, EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
7
8
|
import dayjs from 'dayjs';
|
|
8
9
|
import 'dayjs/locale/de';
|
|
9
10
|
import 'dayjs/locale/en';
|
|
@@ -11,6 +12,9 @@ import 'dayjs/locale/es';
|
|
|
11
12
|
import 'dayjs/locale/fr';
|
|
12
13
|
import 'dayjs/locale/pt';
|
|
13
14
|
import localeData from 'dayjs/plugin/localeData';
|
|
15
|
+
import { FormFieldComponent } from '@agorapulse/ui-components/form-field';
|
|
16
|
+
import { InputDirective } from '@agorapulse/ui-components/input';
|
|
17
|
+
import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
|
|
14
18
|
|
|
15
19
|
var DatepickerMode;
|
|
16
20
|
(function (DatepickerMode) {
|
|
@@ -254,11 +258,11 @@ class DatepickerComponent {
|
|
|
254
258
|
: this.doubleCalendarWidth;
|
|
255
259
|
}
|
|
256
260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: false, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [style.width]=\"width + 'px'\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <div\n class=\"month-arrow-button\"\n (click)=\"onPreviousMonth()\">\n <ap-symbol\n symbolId=\"arrow-left\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n <div class=\"month-label\">\n {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n </div>\n }\n @if (datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <div class=\"month-label\">\n {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n <div\n class=\"month-arrow-button\"\n (click)=\"onNextMonth()\">\n <ap-symbol\n symbolId=\"arrow-right\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n </div>\n }\n @if (showRanges && mode === DatepickerMode.Range) {\n <div class=\"header-filler\"></div>\n }\n </div>\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!showRanges\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatepickerComponent, isStandalone: true, selector: "ap-datepicker", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: false, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: false, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: false, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerRef", first: true, predicate: ["datepickerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"custom-calendar\"\n [style.width]=\"width + 'px'\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <div\n class=\"month-arrow-button\"\n aria-label=\"Previous month\"\n tabindex=\"0\"\n (click)=\"onPreviousMonth()\">\n <ap-symbol\n symbolId=\"arrow-left\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n <div class=\"month-label\">\n {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n </div>\n }\n @if (datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <div class=\"month-label\">\n {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n <div\n class=\"month-arrow-button\"\n aria-label=\"Next month\"\n tabindex=\"-1\"\n (click)=\"onNextMonth()\">\n <ap-symbol\n symbolId=\"arrow-right\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n </div>\n }\n @if (showRanges && mode === DatepickerMode.Range) {\n <div class=\"header-filler\"></div>\n }\n </div>\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!showRanges\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: NgxDaterangepickerMd }, { kind: "component", type: i2.DaterangepickerComponent, selector: "ngx-daterangepicker-material", inputs: ["startDate", "endDate", "dateLimit", "autoApply", "singleDatePicker", "showDropdowns", "showWeekNumbers", "showISOWeekNumbers", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "maxSpan", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "showClearButton", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "showCustomRangeLabel", "showCancel", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "customRangeDirection", "drops", "opens", "closeOnAutoApply", "minDate", "locale", "ranges", "maxDate", "isInvalidDate", "isCustomDate", "isTooltipDate"], outputs: ["choosedDate", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "cancelClicked", "clearClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
258
262
|
}
|
|
259
263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
260
264
|
type: Component,
|
|
261
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [SymbolComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [style.width]=\"width + 'px'\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <div\n class=\"month-arrow-button\"\n (click)=\"onPreviousMonth()\">\n <ap-symbol\n symbolId=\"arrow-left\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n <div class=\"month-label\">\n {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n </div>\n }\n @if (datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <div class=\"month-label\">\n {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n <div\n class=\"month-arrow-button\"\n (click)=\"onNextMonth()\">\n <ap-symbol\n symbolId=\"arrow-right\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n </div>\n }\n @if (showRanges && mode === DatepickerMode.Range) {\n <div class=\"header-filler\"></div>\n }\n </div>\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!showRanges\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
|
|
265
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker', imports: [SymbolComponent, NgxDaterangepickerMd], template: "<div\n class=\"custom-calendar\"\n [style.width]=\"width + 'px'\">\n <div class=\"custom-header\">\n @if (datepickerRef.leftCalendar.month) {\n <div class=\"month-header\">\n <div\n class=\"month-arrow-button\"\n aria-label=\"Previous month\"\n tabindex=\"0\"\n (click)=\"onPreviousMonth()\">\n <ap-symbol\n symbolId=\"arrow-left\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n <div class=\"month-label\">\n {{ datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n </div>\n }\n @if (datepickerRef.rightCalendar.month) {\n <div class=\"month-header\">\n <div class=\"month-label\">\n {{ datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n </div>\n <div\n class=\"month-arrow-button\"\n aria-label=\"Next month\"\n tabindex=\"-1\"\n (click)=\"onNextMonth()\">\n <ap-symbol\n symbolId=\"arrow-right\"\n [color]=\"'#858FA1'\"\n [size]=\"14\" />\n </div>\n </div>\n }\n @if (showRanges && mode === DatepickerMode.Range) {\n <div class=\"header-filler\"></div>\n }\n </div>\n <ngx-daterangepicker-material\n #datepickerRef\n [class.hide-ranges]=\"!showRanges\"\n [alwaysShowCalendars]=\"true\"\n [autoApply]=\"true\"\n [customRangeDirection]=\"true\"\n [isCustomDate]=\"$any(isCustomDate)\"\n [locale]=\"localeConfig\"\n [maxDate]=\"maxDateStr\"\n [minDate]=\"minDateStr\"\n [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : $any(null)\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (datesUpdated)=\"onDatesUpdated($event)\"\n (startDateChanged)=\"onStartDateChanged($event)\" />\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep .ranges{display:none}\n"] }]
|
|
262
266
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SymbolRegistry }], propDecorators: { datepickerRef: [{
|
|
263
267
|
type: ViewChild,
|
|
264
268
|
args: ['datepickerRef']
|
|
@@ -291,9 +295,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
291
295
|
type: Output
|
|
292
296
|
}], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }] } });
|
|
293
297
|
|
|
298
|
+
const DEFAULT_I18N = {
|
|
299
|
+
ranges: {
|
|
300
|
+
yesterday: 'Yesterday',
|
|
301
|
+
lastWeek: 'Last Week',
|
|
302
|
+
last30Days: 'Last 30 days',
|
|
303
|
+
lastMonth: 'Previous month',
|
|
304
|
+
thisMonth: 'This month',
|
|
305
|
+
},
|
|
306
|
+
};
|
|
307
|
+
/**
|
|
308
|
+
* A dropdown component that displays a datepicker (single, multiple, or range mode)
|
|
309
|
+
* in an overlay. Exposes open/close/toggle so it can be driven by apDropdownTrigger.
|
|
310
|
+
*/
|
|
311
|
+
class DatepickerDropdownComponent {
|
|
312
|
+
datepickerDropdownTemplate = viewChild('datepickerDropdownTemplate', ...(ngDevMode ? [{ debugName: "datepickerDropdownTemplate" }] : []));
|
|
313
|
+
mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
314
|
+
selectedDate = input(undefined, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
|
|
315
|
+
selectedDates = input([], ...(ngDevMode ? [{ debugName: "selectedDates" }] : []));
|
|
316
|
+
selectedPeriod = input({ startDate: undefined, endDate: undefined }, ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
|
|
317
|
+
minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
318
|
+
maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
319
|
+
firstDayOfWeek = input('monday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
|
|
320
|
+
locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : []));
|
|
321
|
+
i18n = input(undefined, ...(ngDevMode ? [{ debugName: "i18n" }] : []));
|
|
322
|
+
effectiveI18n = computed(() => this.i18n() ?? DEFAULT_I18N, ...(ngDevMode ? [{ debugName: "effectiveI18n" }] : []));
|
|
323
|
+
showRanges = input(false, ...(ngDevMode ? [{ debugName: "showRanges" }] : []));
|
|
324
|
+
showCustomRangeLabel = input(false, ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : []));
|
|
325
|
+
rangesConfig = input(null, ...(ngDevMode ? [{ debugName: "rangesConfig" }] : []));
|
|
326
|
+
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
327
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
328
|
+
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
329
|
+
opened = output();
|
|
330
|
+
closed = output();
|
|
331
|
+
dateSelected = output();
|
|
332
|
+
periodSelected = output();
|
|
333
|
+
overlay = createDropdownOverlay();
|
|
334
|
+
isOpen = this.overlay.isOpen;
|
|
335
|
+
open(triggerElement) {
|
|
336
|
+
const template = this.datepickerDropdownTemplate();
|
|
337
|
+
if (this.disabled() || this.isOpen() || !template)
|
|
338
|
+
return;
|
|
339
|
+
this.overlay.open(template, triggerElement, {
|
|
340
|
+
showBackdrop: this.showBackdrop(),
|
|
341
|
+
defaultPosition: this.defaultPosition(),
|
|
342
|
+
onClose: () => this.close(),
|
|
343
|
+
});
|
|
344
|
+
this.opened.emit();
|
|
345
|
+
}
|
|
346
|
+
close() {
|
|
347
|
+
if (!this.isOpen())
|
|
348
|
+
return;
|
|
349
|
+
this.overlay.close();
|
|
350
|
+
this.closed.emit();
|
|
351
|
+
}
|
|
352
|
+
toggle(triggerElement) {
|
|
353
|
+
if (this.isOpen()) {
|
|
354
|
+
this.close();
|
|
355
|
+
}
|
|
356
|
+
else {
|
|
357
|
+
this.open(triggerElement);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
onDateSelected(date) {
|
|
361
|
+
this.dateSelected.emit(date);
|
|
362
|
+
if (this.mode() !== DatepickerMode.Multiple) {
|
|
363
|
+
this.close();
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
onPeriodSelected(period) {
|
|
367
|
+
this.periodSelected.emit(period);
|
|
368
|
+
if (period.startDate && period.endDate) {
|
|
369
|
+
this.close();
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", type: DatepickerDropdownComponent, isStandalone: true, selector: "ap-datepicker-dropdown", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", dateSelected: "dateSelected", periodSelected: "periodSelected" }, viewQueries: [{ propertyName: "datepickerDropdownTemplate", first: true, predicate: ["datepickerDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #datepickerDropdownTemplate>\n <div\n class=\"ap-datepicker-dropdown__content\"\n role=\"dialog\"\n aria-label=\"Datepicker\"\n tabindex=\"-1\">\n <ap-datepicker\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"effectiveI18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (click)=\"$event.stopPropagation()\"\n (dateSelected)=\"onDateSelected($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: DatepickerComponent, selector: "ap-datepicker", inputs: ["firstDayOfWeek", "i18n", "locale", "maxDate", "minDate", "mode", "selectedDate", "selectedDates", "selectedPeriod", "showRanges", "showCustomRangeLabel", "rangesConfig"], outputs: ["dateSelected", "periodSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
374
|
+
}
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerDropdownComponent, decorators: [{
|
|
376
|
+
type: Component,
|
|
377
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-datepicker-dropdown', imports: [DatepickerComponent], template: "<ng-template #datepickerDropdownTemplate>\n <div\n class=\"ap-datepicker-dropdown__content\"\n role=\"dialog\"\n aria-label=\"Datepicker\"\n tabindex=\"-1\">\n <ap-datepicker\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"effectiveI18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (click)=\"$event.stopPropagation()\"\n (dateSelected)=\"onDateSelected($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n </div>\n</ng-template>\n", styles: [":host{display:none}.ap-datepicker-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-datepicker-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}\n"] }]
|
|
378
|
+
}], propDecorators: { datepickerDropdownTemplate: [{ type: i0.ViewChild, args: ['datepickerDropdownTemplate', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], periodSelected: [{ type: i0.Output, args: ["periodSelected"] }] } });
|
|
379
|
+
|
|
380
|
+
const defaultPeriodSelected = { startDate: undefined, endDate: undefined };
|
|
381
|
+
class InputDatepickerComponent {
|
|
382
|
+
mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
383
|
+
label = input('Select date', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
384
|
+
placeholder = input('Select date', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
385
|
+
firstDayOfWeek = input('monday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
|
|
386
|
+
locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : []));
|
|
387
|
+
dateFormat = input('MM/DD/YYYY', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
|
|
388
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
389
|
+
minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
390
|
+
maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
391
|
+
selectedDate = input(undefined, ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
|
|
392
|
+
selectedDates = input([], ...(ngDevMode ? [{ debugName: "selectedDates" }] : []));
|
|
393
|
+
selectedPeriod = input(undefined, ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
|
|
394
|
+
i18n = input(undefined, ...(ngDevMode ? [{ debugName: "i18n" }] : []));
|
|
395
|
+
showRanges = input(false, ...(ngDevMode ? [{ debugName: "showRanges" }] : []));
|
|
396
|
+
showCustomRangeLabel = input(false, ...(ngDevMode ? [{ debugName: "showCustomRangeLabel" }] : []));
|
|
397
|
+
rangesConfig = input(null, ...(ngDevMode ? [{ debugName: "rangesConfig" }] : []));
|
|
398
|
+
showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
|
|
399
|
+
defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
|
|
400
|
+
periodRange = signal(defaultPeriodSelected, ...(ngDevMode ? [{ debugName: "periodRange" }] : []));
|
|
401
|
+
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
402
|
+
periodChanged = output();
|
|
403
|
+
dateSelected = output();
|
|
404
|
+
displayedDate = computed(() => {
|
|
405
|
+
const { startDate, endDate } = this.periodRange();
|
|
406
|
+
const dateFormat = this.dateFormat() ?? 'MM/DD/YYYY';
|
|
407
|
+
if (startDate && endDate) {
|
|
408
|
+
return `${dayjs(startDate).format(dateFormat)} - ${dayjs(endDate).format(dateFormat)}`;
|
|
409
|
+
}
|
|
410
|
+
return '';
|
|
411
|
+
}, ...(ngDevMode ? [{ debugName: "displayedDate" }] : []));
|
|
412
|
+
initPeriodRange = effect(() => {
|
|
413
|
+
const selected = this.selectedPeriod();
|
|
414
|
+
if (selected && selected.startDate && selected.endDate) {
|
|
415
|
+
this.periodRange.set({
|
|
416
|
+
startDate: dayjs(selected.startDate),
|
|
417
|
+
endDate: dayjs(selected.endDate),
|
|
418
|
+
});
|
|
419
|
+
}
|
|
420
|
+
else {
|
|
421
|
+
this.periodRange.set(defaultPeriodSelected);
|
|
422
|
+
}
|
|
423
|
+
}, ...(ngDevMode ? [{ debugName: "initPeriodRange" }] : []));
|
|
424
|
+
onTouched = () => { };
|
|
425
|
+
onChange = () => { };
|
|
426
|
+
onPeriodSelected(period) {
|
|
427
|
+
if (period.startDate && period.endDate) {
|
|
428
|
+
this.periodRange.set(period);
|
|
429
|
+
this.onChange(period);
|
|
430
|
+
this.periodChanged.emit(period);
|
|
431
|
+
}
|
|
432
|
+
else {
|
|
433
|
+
this.periodRange.set(defaultPeriodSelected);
|
|
434
|
+
this.onChange(defaultPeriodSelected);
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
writeValue(value) {
|
|
438
|
+
if (value && value.startDate && value.endDate) {
|
|
439
|
+
this.periodRange.set({
|
|
440
|
+
startDate: dayjs(value.startDate),
|
|
441
|
+
endDate: dayjs(value.endDate),
|
|
442
|
+
});
|
|
443
|
+
}
|
|
444
|
+
else {
|
|
445
|
+
this.periodRange.set(defaultPeriodSelected);
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
registerOnChange(fn) {
|
|
449
|
+
this.onChange = fn;
|
|
450
|
+
}
|
|
451
|
+
registerOnTouched(fn) {
|
|
452
|
+
this.onTouched = fn;
|
|
453
|
+
}
|
|
454
|
+
setDisabledState(isDisabled) {
|
|
455
|
+
this.isDisabled.set(isDisabled);
|
|
456
|
+
}
|
|
457
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
458
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: InputDatepickerComponent, isStandalone: true, selector: "ap-input-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null }, showRanges: { classPropertyName: "showRanges", publicName: "showRanges", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, rangesConfig: { classPropertyName: "rangesConfig", publicName: "rangesConfig", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodChanged: "periodChanged", dateSelected: "dateSelected" }, providers: [withSymbols(apCalendar, apChevronDown)], ngImport: i0, template: "<ap-form-field>\n @let vLabel = label();\n @if (vLabel) {\n <label for=\"datepicker\">\n {{ vLabel }}\n </label>\n }\n <ap-input-group [apDropdownTrigger]=\"datepickerDropdown\" symbolPosition=\"left\">\n <ap-symbol size=\"sm\" symbolId=\"calendar\" />\n <input\n apInput\n id=\"datepicker\"\n readonly\n (blur)=\"onTouched()\"\n [disabled]=\"disabled() || isDisabled()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayedDate()\"\n type=\"text\" />\n </ap-input-group>\n\n</ap-form-field>\n\n<ap-datepicker-dropdown\n #datepickerDropdown\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled() || isDisabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"periodRange()\"\n [showBackdrop]=\"showBackdrop()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (dateSelected)=\"dateSelected.emit($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n", dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "firstDayOfWeek", "locale", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "disabled", "defaultPosition"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
459
|
+
}
|
|
460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputDatepickerComponent, decorators: [{
|
|
461
|
+
type: Component,
|
|
462
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-input-datepicker', imports: [
|
|
463
|
+
DatepickerDropdownComponent,
|
|
464
|
+
DropdownTriggerDirective,
|
|
465
|
+
InputDirective,
|
|
466
|
+
InputGroupComponent,
|
|
467
|
+
SymbolComponent,
|
|
468
|
+
FormFieldComponent,
|
|
469
|
+
SymbolComponent,
|
|
470
|
+
], providers: [withSymbols(apCalendar, apChevronDown)], template: "<ap-form-field>\n @let vLabel = label();\n @if (vLabel) {\n <label for=\"datepicker\">\n {{ vLabel }}\n </label>\n }\n <ap-input-group [apDropdownTrigger]=\"datepickerDropdown\" symbolPosition=\"left\">\n <ap-symbol size=\"sm\" symbolId=\"calendar\" />\n <input\n apInput\n id=\"datepicker\"\n readonly\n (blur)=\"onTouched()\"\n [disabled]=\"disabled() || isDisabled()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayedDate()\"\n type=\"text\" />\n </ap-input-group>\n\n</ap-form-field>\n\n<ap-datepicker-dropdown\n #datepickerDropdown\n [defaultPosition]=\"defaultPosition()\"\n [disabled]=\"disabled() || isDisabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [i18n]=\"i18n()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [rangesConfig]=\"rangesConfig()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"periodRange()\"\n [showBackdrop]=\"showBackdrop()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n (dateSelected)=\"dateSelected.emit($event)\"\n (periodSelected)=\"onPeriodSelected($event)\"\n [showRanges]=\"showRanges()\" />\n" }]
|
|
471
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDates", required: false }] }], selectedPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriod", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], showRanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRanges", required: false }] }], showCustomRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomRangeLabel", required: false }] }], rangesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangesConfig", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], periodChanged: [{ type: i0.Output, args: ["periodChanged"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
|
|
472
|
+
|
|
294
473
|
/**
|
|
295
474
|
* Generated bundle index. Do not edit.
|
|
296
475
|
*/
|
|
297
476
|
|
|
298
|
-
export { DatepickerComponent, DatepickerMode, RangesConfigPreset };
|
|
477
|
+
export { DatepickerComponent, DatepickerDropdownComponent, DatepickerMode, InputDatepickerComponent, RangesConfigPreset, defaultPeriodSelected };
|
|
299
478
|
//# sourceMappingURL=agorapulse-ui-components-datepicker.mjs.map
|