@ardium-ui/ui 5.0.0-alpha.37 → 5.0.0-alpha.38
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/fesm2022/ardium-ui-ui.mjs +3033 -1625
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/utils/date.utils.d.ts +16 -0
- package/lib/calendar/abstract-calendar.d.ts +127 -0
- package/lib/calendar/calendar.component.d.ts +8 -97
- package/lib/calendar/calendar.defaults.d.ts +12 -1
- package/lib/calendar/calendar.internal-directives.d.ts +24 -8
- package/lib/calendar/calendar.internal-types.d.ts +1 -0
- package/lib/calendar/calendar.module.d.ts +4 -9
- package/lib/calendar/calendar.types.d.ts +19 -5
- package/lib/calendar/index.d.ts +3 -0
- package/lib/calendar/range-calendar.component.d.ts +16 -0
- package/lib/calendar/range-calendar.directives.d.ts +51 -0
- package/lib/calendar/range-calendar.module.d.ts +10 -0
- package/lib/calendar/views/calendar-views.module.d.ts +13 -0
- package/lib/calendar/views/days-view/days-view.component.d.ts +20 -2
- package/lib/calendar/views/days-view/days-view.helpers.d.ts +2 -2
- package/lib/calendar/views/months-view/months-view.component.d.ts +15 -3
- package/lib/calendar/views/years-view/years-view.component.d.ts +15 -3
- package/lib/inputs/date-input/abstract-date-input.d.ts +112 -0
- package/lib/inputs/date-input/date-input.component.d.ts +19 -82
- package/lib/inputs/date-input/date-input.defaults.d.ts +21 -3
- package/lib/inputs/date-input/{date-input.directive.d.ts → date-input.directives.d.ts} +2 -2
- package/lib/inputs/date-input/date-input.module.d.ts +5 -4
- package/lib/inputs/date-input/date-input.serializers.d.ts +4 -2
- package/lib/inputs/date-input/date-input.types.d.ts +5 -4
- package/lib/inputs/date-input/date-range-input.component.d.ts +29 -0
- package/lib/inputs/date-input/date-range-input.directives.d.ts +82 -0
- package/lib/inputs/date-input/date-range-input.module.d.ts +17 -0
- package/lib/inputs/date-input/index.d.ts +7 -1
- package/lib/inputs/date-input/multipage-date-range-input.component.d.ts +44 -0
- package/lib/inputs/date-input/multipage-date-range-input.directives.d.ts +82 -0
- package/lib/inputs/date-input/multipage-date-range-input.module.d.ts +17 -0
- package/package.json +1 -1
- package/prebuilt-themes/default/buttons/button.css +4 -4
- package/prebuilt-themes/default/buttons/fab.css +4 -4
- package/prebuilt-themes/default/buttons/icon-button.css +4 -4
- package/prebuilt-themes/default/calendar.css +134 -54
- package/prebuilt-themes/default/calendar.css.map +1 -1
- package/prebuilt-themes/default/checkbox-list.css +4 -4
- package/prebuilt-themes/default/checkbox.css +4 -4
- package/prebuilt-themes/default/chips.css +8 -8
- package/prebuilt-themes/default/inputs/autocomplete-input.css +69 -24
- package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/color-input.css +4 -43
- package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/date-input.css +76 -20
- package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +109 -61
- package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/hex-input.css +42 -17
- package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/input.css +36 -13
- package/prebuilt-themes/default/inputs/input.css.map +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +26 -21
- package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/password-input.css +64 -21
- package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
- package/prebuilt-themes/default/inputs/search-bar.css +38 -15
- package/prebuilt-themes/default/inputs/search-bar.css.map +1 -1
- package/prebuilt-themes/default/radio.css +4 -4
- package/prebuilt-themes/default/segment.css +4 -4
- package/prebuilt-themes/default/select.css +4 -4
- package/prebuilt-themes/default/slide-toggle.css +4 -4
- package/prebuilt-themes/default/slider.css +4 -4
- package/prebuilt-themes/default/stars.css +4 -4
- package/prebuilt-themes/default/statebox.css +4 -4
- package/prebuilt-themes/default/tabber.css +4 -4
- package/themes/default/_mixins.scss +4 -4
- package/themes/default/calendar.scss +146 -55
- package/themes/default/inputs/_shared.scss +27 -8
- package/themes/default/inputs/autocomplete-input.scss +68 -14
- package/themes/default/inputs/color-input.scss +1 -1
- package/themes/default/inputs/date-input.scss +54 -5
- package/themes/default/inputs/file-input.scss +83 -23
- package/themes/default/inputs/hex-input.scss +42 -7
- package/themes/default/inputs/input.scss +37 -3
- package/themes/default/inputs/number-input.scss +30 -14
- package/themes/default/inputs/password-input.scss +70 -15
- package/themes/default/inputs/search-bar.scss +39 -5
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
|
2
|
+
import { CalendarDayContext, CalendarDaysViewHeaderContext, CalendarFloatingMonthContext, CalendarMonthContext, CalendarMonthsViewHeaderContext, CalendarWeekdayContext, CalendarYearContext, CalendarYearsViewHeaderContext } from '../../calendar';
|
|
3
|
+
import { ArdDateInputAcceptButtonsContext, ArdDateInputValueContext } from './date-input.types';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class ArdDateRangeInputPrefixTemplateDirective {
|
|
6
|
+
template: TemplateRef<undefined>;
|
|
7
|
+
constructor(template: TemplateRef<undefined>);
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputPrefixTemplateDirective, never>;
|
|
9
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputPrefixTemplateDirective, "ard-date-range-input > ng-template[ard-prefix-tmp]", never, {}, {}, never, never, false, never>;
|
|
10
|
+
}
|
|
11
|
+
export declare class ArdDateRangeInputSuffixTemplateDirective {
|
|
12
|
+
template: TemplateRef<undefined>;
|
|
13
|
+
constructor(template: TemplateRef<undefined>);
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputSuffixTemplateDirective, never>;
|
|
15
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputSuffixTemplateDirective, "ard-date-range-input > ng-template[ard-suffix-tmp]", never, {}, {}, never, never, false, never>;
|
|
16
|
+
}
|
|
17
|
+
export declare class ArdDateRangeInputValueTemplateDirective {
|
|
18
|
+
template: TemplateRef<ArdDateInputValueContext<Date>>;
|
|
19
|
+
constructor(template: TemplateRef<ArdDateInputValueContext<Date>>);
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputValueTemplateDirective, never>;
|
|
21
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputValueTemplateDirective, "ard-date-range-input > ng-template[ard-value-tmp]", never, {}, {}, never, never, false, never>;
|
|
22
|
+
}
|
|
23
|
+
export declare class ArdDateRangeInputCalendarIconTemplateDirective {
|
|
24
|
+
template: TemplateRef<undefined>;
|
|
25
|
+
constructor(template: TemplateRef<undefined>);
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputCalendarIconTemplateDirective, never>;
|
|
27
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputCalendarIconTemplateDirective, "ard-date-range-input > ng-template[ard-date-input-icon-tmp]", never, {}, {}, never, never, false, never>;
|
|
28
|
+
}
|
|
29
|
+
export declare class ArdDateRangeInputAcceptButtonsTemplateDirective {
|
|
30
|
+
template: TemplateRef<ArdDateInputAcceptButtonsContext>;
|
|
31
|
+
constructor(template: TemplateRef<ArdDateInputAcceptButtonsContext>);
|
|
32
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputAcceptButtonsTemplateDirective, never>;
|
|
33
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputAcceptButtonsTemplateDirective, "ard-date-range-input > ng-template[ard-accept-buttons-tmp]", never, {}, {}, never, never, false, never>;
|
|
34
|
+
}
|
|
35
|
+
export declare class ArdDateRangeInputDaysViewHeaderTemplateDirective {
|
|
36
|
+
template: TemplateRef<CalendarDaysViewHeaderContext>;
|
|
37
|
+
constructor(template: TemplateRef<CalendarDaysViewHeaderContext>);
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputDaysViewHeaderTemplateDirective, never>;
|
|
39
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputDaysViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
40
|
+
}
|
|
41
|
+
export declare class ArdDateRangeInputYearsViewHeaderTemplateDirective {
|
|
42
|
+
template: TemplateRef<CalendarYearsViewHeaderContext>;
|
|
43
|
+
constructor(template: TemplateRef<CalendarYearsViewHeaderContext>);
|
|
44
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputYearsViewHeaderTemplateDirective, never>;
|
|
45
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputYearsViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-year-picker-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
46
|
+
}
|
|
47
|
+
export declare class ArdDateRangeInputMonthsViewHeaderTemplateDirective {
|
|
48
|
+
template: TemplateRef<CalendarMonthsViewHeaderContext>;
|
|
49
|
+
constructor(template: TemplateRef<CalendarMonthsViewHeaderContext>);
|
|
50
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputMonthsViewHeaderTemplateDirective, never>;
|
|
51
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputMonthsViewHeaderTemplateDirective, "ard-date-range-input > ng-template[ard-month-picker-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
52
|
+
}
|
|
53
|
+
export declare class ArdDateRangeInputWeekdayTemplateDirective {
|
|
54
|
+
template: TemplateRef<CalendarWeekdayContext>;
|
|
55
|
+
constructor(template: TemplateRef<CalendarWeekdayContext>);
|
|
56
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputWeekdayTemplateDirective, never>;
|
|
57
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputWeekdayTemplateDirective, "ard-date-range-input > ng-template[ard-weekday-tmp]", never, {}, {}, never, never, false, never>;
|
|
58
|
+
}
|
|
59
|
+
export declare class ArdDateRangeInputFloatingMonthTemplateDirective {
|
|
60
|
+
template: TemplateRef<CalendarFloatingMonthContext>;
|
|
61
|
+
constructor(template: TemplateRef<CalendarFloatingMonthContext>);
|
|
62
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputFloatingMonthTemplateDirective, never>;
|
|
63
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputFloatingMonthTemplateDirective, "ard-date-range-input > ng-template[ard-floating-month-tmp]", never, {}, {}, never, never, false, never>;
|
|
64
|
+
}
|
|
65
|
+
export declare class ArdDateRangeInputYearTemplateDirective {
|
|
66
|
+
template: TemplateRef<CalendarYearContext>;
|
|
67
|
+
constructor(template: TemplateRef<CalendarYearContext>);
|
|
68
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputYearTemplateDirective, never>;
|
|
69
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputYearTemplateDirective, "ard-date-range-input > ng-template[ard-year-tmp]", never, {}, {}, never, never, false, never>;
|
|
70
|
+
}
|
|
71
|
+
export declare class ArdDateRangeInputMonthTemplateDirective {
|
|
72
|
+
template: TemplateRef<CalendarMonthContext>;
|
|
73
|
+
constructor(template: TemplateRef<CalendarMonthContext>);
|
|
74
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputMonthTemplateDirective, never>;
|
|
75
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputMonthTemplateDirective, "ard-date-range-input > ng-template[ard-month-tmp]", never, {}, {}, never, never, false, never>;
|
|
76
|
+
}
|
|
77
|
+
export declare class ArdDateRangeInputDayTemplateDirective {
|
|
78
|
+
template: TemplateRef<CalendarDayContext>;
|
|
79
|
+
constructor(template: TemplateRef<CalendarDayContext>);
|
|
80
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdDateRangeInputDayTemplateDirective, never>;
|
|
81
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdDateRangeInputDayTemplateDirective, "ard-date-range-input > ng-template[ard-day-tmp]", never, {}, {}, never, never, false, never>;
|
|
82
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "./date-range-input.component";
|
|
3
|
+
import * as i2 from "./date-range-input.directives";
|
|
4
|
+
import * as i3 from "@angular/common";
|
|
5
|
+
import * as i4 from "../../form-field-frame/form-field-frame.module";
|
|
6
|
+
import * as i5 from "../../dropdown-panel/dropdown-panel.module";
|
|
7
|
+
import * as i6 from "@ardium-ui/devkit";
|
|
8
|
+
import * as i7 from "../../calendar/range-calendar.module";
|
|
9
|
+
import * as i8 from "../../buttons/icon-button/icon-button.module";
|
|
10
|
+
import * as i9 from "../../buttons/button/button.module";
|
|
11
|
+
import * as i10 from "../../icon/icon.module";
|
|
12
|
+
import * as i11 from "../../calendar/calendar.internal-directives";
|
|
13
|
+
export declare class ArdiumDateRangeInputModule {
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDateRangeInputModule, never>;
|
|
15
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDateRangeInputModule, [typeof i1.ArdiumDateRangeInputComponent, typeof i2.ArdDateRangeInputPrefixTemplateDirective, typeof i2.ArdDateRangeInputSuffixTemplateDirective, typeof i2.ArdDateRangeInputValueTemplateDirective, typeof i2.ArdDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputDayTemplateDirective, typeof i2.ArdDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputMonthTemplateDirective, typeof i2.ArdDateRangeInputWeekdayTemplateDirective, typeof i2.ArdDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumRangeCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumButtonModule, typeof i10.ArdiumIconModule, typeof i11._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumDateRangeInputComponent, typeof i2.ArdDateRangeInputPrefixTemplateDirective, typeof i2.ArdDateRangeInputSuffixTemplateDirective, typeof i2.ArdDateRangeInputValueTemplateDirective, typeof i2.ArdDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputDayTemplateDirective, typeof i2.ArdDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputMonthTemplateDirective, typeof i2.ArdDateRangeInputWeekdayTemplateDirective, typeof i2.ArdDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdDateRangeInputYearTemplateDirective]>;
|
|
16
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDateRangeInputModule>;
|
|
17
|
+
}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
export * from './date-input.component';
|
|
2
2
|
export * from './date-input.defaults';
|
|
3
|
-
export * from './date-input.
|
|
3
|
+
export * from './date-input.directives';
|
|
4
4
|
export * from './date-input.module';
|
|
5
5
|
export * from './date-input.types';
|
|
6
|
+
export * from './date-range-input.component';
|
|
7
|
+
export * from './date-range-input.directives';
|
|
8
|
+
export * from './date-range-input.module';
|
|
9
|
+
export * from './multipage-date-range-input.component';
|
|
10
|
+
export * from './multipage-date-range-input.directives';
|
|
11
|
+
export * from './multipage-date-range-input.module';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { NumberLike } from '@ardium-ui/devkit';
|
|
2
|
+
import { ArdMultiCalendarLocation, DateRange } from '../../calendar';
|
|
3
|
+
import { _AbstractDateInput } from './abstract-date-input';
|
|
4
|
+
import { ArdDateInputDefaults } from './date-input.defaults';
|
|
5
|
+
import { ArdDateInputSerializeFn } from './date-input.types';
|
|
6
|
+
import { ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective } from './multipage-date-range-input.directives';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
type CalendarDataItem = {
|
|
9
|
+
location: ArdMultiCalendarLocation;
|
|
10
|
+
activeDate: Date;
|
|
11
|
+
highlightedDay: number | null;
|
|
12
|
+
};
|
|
13
|
+
export declare class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput<DateRange> {
|
|
14
|
+
readonly componentId = "012";
|
|
15
|
+
readonly componentName = "multipage-date-range-input";
|
|
16
|
+
readonly isRangeSelector = true;
|
|
17
|
+
protected readonly _DEFAULTS: ArdDateInputDefaults;
|
|
18
|
+
constructor(defaults: ArdDateInputDefaults);
|
|
19
|
+
readonly serializeFn: import("@angular/core").InputSignal<ArdDateInputSerializeFn<DateRange>>;
|
|
20
|
+
readonly highlightedDate: import("@angular/core").WritableSignal<Date | null>;
|
|
21
|
+
readonly numberOfCalendars: import("@angular/core").InputSignalWithTransform<number, NumberLike>;
|
|
22
|
+
readonly calendarDataArray: import("@angular/core").Signal<CalendarDataItem[]>;
|
|
23
|
+
onActivePageChange(newPage: {
|
|
24
|
+
year: number;
|
|
25
|
+
month: number;
|
|
26
|
+
}, index: number): void;
|
|
27
|
+
onHighlightDate(date: Date | null): void;
|
|
28
|
+
writeValue(v: any): void;
|
|
29
|
+
protected _isFullValue(value: DateRange | null): boolean;
|
|
30
|
+
readonly shouldDisplayPlaceholder: import("@angular/core").Signal<boolean>;
|
|
31
|
+
readonly shouldDisplayValue: import("@angular/core").Signal<boolean>;
|
|
32
|
+
readonly shouldDisplayDateInput: import("@angular/core").Signal<boolean>;
|
|
33
|
+
readonly calendarDaysViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective | undefined>;
|
|
34
|
+
readonly calendarYearsViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective | undefined>;
|
|
35
|
+
readonly calendarMonthsViewHeaderTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective | undefined>;
|
|
36
|
+
readonly calendarWeekdayTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputWeekdayTemplateDirective | undefined>;
|
|
37
|
+
readonly calendarFloatingMonthTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputFloatingMonthTemplateDirective | undefined>;
|
|
38
|
+
readonly calendarYearTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputYearTemplateDirective | undefined>;
|
|
39
|
+
readonly calendarMonthTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputMonthTemplateDirective | undefined>;
|
|
40
|
+
readonly calendarDayTemplate: import("@angular/core").Signal<ArdMultipageDateRangeInputDayTemplateDirective | undefined>;
|
|
41
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumMultipageDateRangeInputComponent, never>;
|
|
42
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumMultipageDateRangeInputComponent, "ard-multipage-date-range-input", never, { "serializeFn": { "alias": "serializeFn"; "required": false; "isSignal": true; }; "numberOfCalendars": { "alias": "numberOfCalendars"; "required": false; "isSignal": true; }; }, {}, ["calendarDaysViewHeaderTemplate", "calendarYearsViewHeaderTemplate", "calendarMonthsViewHeaderTemplate", "calendarWeekdayTemplate", "calendarFloatingMonthTemplate", "calendarYearTemplate", "calendarMonthTemplate", "calendarDayTemplate"], never, false, never>;
|
|
43
|
+
}
|
|
44
|
+
export {};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
|
2
|
+
import { CalendarDayContext, CalendarDaysViewHeaderContext, CalendarFloatingMonthContext, CalendarMonthContext, CalendarMonthsViewHeaderContext, CalendarWeekdayContext, CalendarYearContext, CalendarYearsViewHeaderContext } from '../../calendar';
|
|
3
|
+
import { ArdDateInputAcceptButtonsContext, ArdDateInputValueContext } from './date-input.types';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class ArdMultipageDateRangeInputPrefixTemplateDirective {
|
|
6
|
+
template: TemplateRef<undefined>;
|
|
7
|
+
constructor(template: TemplateRef<undefined>);
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputPrefixTemplateDirective, never>;
|
|
9
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputPrefixTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-prefix-tmp]", never, {}, {}, never, never, false, never>;
|
|
10
|
+
}
|
|
11
|
+
export declare class ArdMultipageDateRangeInputSuffixTemplateDirective {
|
|
12
|
+
template: TemplateRef<undefined>;
|
|
13
|
+
constructor(template: TemplateRef<undefined>);
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputSuffixTemplateDirective, never>;
|
|
15
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputSuffixTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-suffix-tmp]", never, {}, {}, never, never, false, never>;
|
|
16
|
+
}
|
|
17
|
+
export declare class ArdMultipageDateRangeInputValueTemplateDirective {
|
|
18
|
+
template: TemplateRef<ArdDateInputValueContext<Date>>;
|
|
19
|
+
constructor(template: TemplateRef<ArdDateInputValueContext<Date>>);
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputValueTemplateDirective, never>;
|
|
21
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputValueTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-value-tmp]", never, {}, {}, never, never, false, never>;
|
|
22
|
+
}
|
|
23
|
+
export declare class ArdMultipageDateRangeInputCalendarIconTemplateDirective {
|
|
24
|
+
template: TemplateRef<undefined>;
|
|
25
|
+
constructor(template: TemplateRef<undefined>);
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputCalendarIconTemplateDirective, never>;
|
|
27
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputCalendarIconTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-date-input-icon-tmp]", never, {}, {}, never, never, false, never>;
|
|
28
|
+
}
|
|
29
|
+
export declare class ArdMultipageDateRangeInputAcceptButtonsTemplateDirective {
|
|
30
|
+
template: TemplateRef<ArdDateInputAcceptButtonsContext>;
|
|
31
|
+
constructor(template: TemplateRef<ArdDateInputAcceptButtonsContext>);
|
|
32
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, never>;
|
|
33
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-accept-buttons-tmp]", never, {}, {}, never, never, false, never>;
|
|
34
|
+
}
|
|
35
|
+
export declare class ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective {
|
|
36
|
+
template: TemplateRef<CalendarDaysViewHeaderContext>;
|
|
37
|
+
constructor(template: TemplateRef<CalendarDaysViewHeaderContext>);
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, never>;
|
|
39
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
40
|
+
}
|
|
41
|
+
export declare class ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective {
|
|
42
|
+
template: TemplateRef<CalendarYearsViewHeaderContext>;
|
|
43
|
+
constructor(template: TemplateRef<CalendarYearsViewHeaderContext>);
|
|
44
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, never>;
|
|
45
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-year-picker-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
46
|
+
}
|
|
47
|
+
export declare class ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective {
|
|
48
|
+
template: TemplateRef<CalendarMonthsViewHeaderContext>;
|
|
49
|
+
constructor(template: TemplateRef<CalendarMonthsViewHeaderContext>);
|
|
50
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, never>;
|
|
51
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-month-picker-header-tmp]", never, {}, {}, never, never, false, never>;
|
|
52
|
+
}
|
|
53
|
+
export declare class ArdMultipageDateRangeInputWeekdayTemplateDirective {
|
|
54
|
+
template: TemplateRef<CalendarWeekdayContext>;
|
|
55
|
+
constructor(template: TemplateRef<CalendarWeekdayContext>);
|
|
56
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputWeekdayTemplateDirective, never>;
|
|
57
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputWeekdayTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-weekday-tmp]", never, {}, {}, never, never, false, never>;
|
|
58
|
+
}
|
|
59
|
+
export declare class ArdMultipageDateRangeInputFloatingMonthTemplateDirective {
|
|
60
|
+
template: TemplateRef<CalendarFloatingMonthContext>;
|
|
61
|
+
constructor(template: TemplateRef<CalendarFloatingMonthContext>);
|
|
62
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputFloatingMonthTemplateDirective, never>;
|
|
63
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputFloatingMonthTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-floating-month-tmp]", never, {}, {}, never, never, false, never>;
|
|
64
|
+
}
|
|
65
|
+
export declare class ArdMultipageDateRangeInputYearTemplateDirective {
|
|
66
|
+
template: TemplateRef<CalendarYearContext>;
|
|
67
|
+
constructor(template: TemplateRef<CalendarYearContext>);
|
|
68
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputYearTemplateDirective, never>;
|
|
69
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputYearTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-year-tmp]", never, {}, {}, never, never, false, never>;
|
|
70
|
+
}
|
|
71
|
+
export declare class ArdMultipageDateRangeInputMonthTemplateDirective {
|
|
72
|
+
template: TemplateRef<CalendarMonthContext>;
|
|
73
|
+
constructor(template: TemplateRef<CalendarMonthContext>);
|
|
74
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputMonthTemplateDirective, never>;
|
|
75
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputMonthTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-month-tmp]", never, {}, {}, never, never, false, never>;
|
|
76
|
+
}
|
|
77
|
+
export declare class ArdMultipageDateRangeInputDayTemplateDirective {
|
|
78
|
+
template: TemplateRef<CalendarDayContext>;
|
|
79
|
+
constructor(template: TemplateRef<CalendarDayContext>);
|
|
80
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdMultipageDateRangeInputDayTemplateDirective, never>;
|
|
81
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ArdMultipageDateRangeInputDayTemplateDirective, "ard-multipage-date-range-input > ng-template[ard-day-tmp]", never, {}, {}, never, never, false, never>;
|
|
82
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "./multipage-date-range-input.component";
|
|
3
|
+
import * as i2 from "./multipage-date-range-input.directives";
|
|
4
|
+
import * as i3 from "@angular/common";
|
|
5
|
+
import * as i4 from "../../form-field-frame/form-field-frame.module";
|
|
6
|
+
import * as i5 from "../../dropdown-panel/dropdown-panel.module";
|
|
7
|
+
import * as i6 from "@ardium-ui/devkit";
|
|
8
|
+
import * as i7 from "../../calendar/range-calendar.module";
|
|
9
|
+
import * as i8 from "../../buttons/icon-button/icon-button.module";
|
|
10
|
+
import * as i9 from "../../buttons/button/button.module";
|
|
11
|
+
import * as i10 from "../../icon/icon.module";
|
|
12
|
+
import * as i11 from "../../calendar/calendar.internal-directives";
|
|
13
|
+
export declare class ArdiumMultipageDateRangeInputModule {
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumMultipageDateRangeInputModule, never>;
|
|
15
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumMultipageDateRangeInputModule, [typeof i1.ArdiumMultipageDateRangeInputComponent, typeof i2.ArdMultipageDateRangeInputPrefixTemplateDirective, typeof i2.ArdMultipageDateRangeInputSuffixTemplateDirective, typeof i2.ArdMultipageDateRangeInputValueTemplateDirective, typeof i2.ArdMultipageDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputDayTemplateDirective, typeof i2.ArdMultipageDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputWeekdayTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearTemplateDirective], [typeof i3.CommonModule, typeof i4.ArdiumFormFieldFrameModule, typeof i5.ArdiumDropdownPanelModule, typeof i6.ArdiumClickOutsideModule, typeof i7.ArdiumRangeCalendarModule, typeof i8.ArdiumIconButtonModule, typeof i9.ArdiumButtonModule, typeof i10.ArdiumIconModule, typeof i11._CalendarTemplateRepositoryDirective], [typeof i1.ArdiumMultipageDateRangeInputComponent, typeof i2.ArdMultipageDateRangeInputPrefixTemplateDirective, typeof i2.ArdMultipageDateRangeInputSuffixTemplateDirective, typeof i2.ArdMultipageDateRangeInputValueTemplateDirective, typeof i2.ArdMultipageDateRangeInputCalendarIconTemplateDirective, typeof i2.ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, typeof i2.ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputDayTemplateDirective, typeof i2.ArdMultipageDateRangeInputFloatingMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputMonthTemplateDirective, typeof i2.ArdMultipageDateRangeInputWeekdayTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, typeof i2.ArdMultipageDateRangeInputYearTemplateDirective]>;
|
|
16
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumMultipageDateRangeInputModule>;
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -186,10 +186,10 @@ ard-button {
|
|
|
186
186
|
.ard-button::before {
|
|
187
187
|
content: "";
|
|
188
188
|
position: absolute;
|
|
189
|
-
top: -0;
|
|
190
|
-
bottom: -0;
|
|
191
|
-
left: -0;
|
|
192
|
-
right: -0;
|
|
189
|
+
top: calc(-1 * 0);
|
|
190
|
+
bottom: calc(-1 * 0);
|
|
191
|
+
left: calc(-1 * 0);
|
|
192
|
+
right: calc(-1 * 0);
|
|
193
193
|
opacity: 0;
|
|
194
194
|
border-radius: inherit;
|
|
195
195
|
pointer-events: none;
|
|
@@ -184,10 +184,10 @@ ard-fab {
|
|
|
184
184
|
.ard-fab::before {
|
|
185
185
|
content: "";
|
|
186
186
|
position: absolute;
|
|
187
|
-
top: -0;
|
|
188
|
-
bottom: -0;
|
|
189
|
-
left: -0;
|
|
190
|
-
right: -0;
|
|
187
|
+
top: calc(-1 * 0);
|
|
188
|
+
bottom: calc(-1 * 0);
|
|
189
|
+
left: calc(-1 * 0);
|
|
190
|
+
right: calc(-1 * 0);
|
|
191
191
|
opacity: 0;
|
|
192
192
|
border-radius: inherit;
|
|
193
193
|
pointer-events: none;
|
|
@@ -182,10 +182,10 @@ ard-icon-button {
|
|
|
182
182
|
.ard-icon-button::before {
|
|
183
183
|
content: "";
|
|
184
184
|
position: absolute;
|
|
185
|
-
top: -0;
|
|
186
|
-
bottom: -0;
|
|
187
|
-
left: -0;
|
|
188
|
-
right: -0;
|
|
185
|
+
top: calc(-1 * 0);
|
|
186
|
+
bottom: calc(-1 * 0);
|
|
187
|
+
left: calc(-1 * 0);
|
|
188
|
+
right: calc(-1 * 0);
|
|
189
189
|
opacity: 0;
|
|
190
190
|
border-radius: inherit;
|
|
191
191
|
pointer-events: none;
|
|
@@ -1,6 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--ard-calendar-grid-size: 2.25rem;
|
|
3
|
+
--ard-calendar-grid-gap: 0.25rem;
|
|
4
|
+
--ard-calendar-padding: 0.375rem;
|
|
5
|
+
--ard-calendar-header-padding: 0.375rem 0 0.75rem 0;
|
|
6
|
+
--ard-calendar-weekday-padding: 0 0 0.5rem 0;
|
|
7
|
+
--ard-calendar-weekday-font-size: 0.875rem;
|
|
8
|
+
--ard-calendar-weekday-font-weight: 500;
|
|
9
|
+
--ard-calendar-weekday-color: var(--ard-text);
|
|
10
|
+
--ard-calendar-floating-month-transform: none;
|
|
11
|
+
--ard-calendar-floating-month-padding: 0 0 0 1rem;
|
|
12
|
+
--ard-calendar-floating-month-font-size: 0.875rem;
|
|
13
|
+
--ard-calendar-floating-month-font-weight: 500;
|
|
14
|
+
--ard-calendar-floating-month-color: var(--ard-text3);
|
|
15
|
+
--ard-calendar-entry-padding: 0;
|
|
16
|
+
--ard-calendar-entry-font-size: 0.875rem;
|
|
17
|
+
--ard-calendar-entry-font-weight: 400;
|
|
18
|
+
--ard-calendar-entry-border-radius: 9999px;
|
|
19
|
+
--ard-calendar-entry-range-overlay-border-width: 1px;
|
|
20
|
+
--ard-calendar-entry-range-overlay-border-style: dashed;
|
|
21
|
+
--ard-calendar-entry-today-border-color: var(--ard-detail);
|
|
22
|
+
--ard-calendar-entry-today-selected-border: 2px solid var(--ard-bg);
|
|
23
|
+
--ard-calendar-entry-highlighted-overlay-opacity: 20%;
|
|
24
|
+
--ard-calendar-entry-selected-overlay-opacity: 100%;
|
|
25
|
+
--ard-calendar-entry-selected-range-overlay-opacity: 12%;
|
|
26
|
+
--ard-calendar-entry-disabled-overlay-opacity: 12%;
|
|
27
|
+
--ard-calendar-entry-disabled-highlighted-overlay-opacity: 15%;
|
|
28
|
+
--ard-calendar-entry-disabled-opacity: 50%;
|
|
29
|
+
}
|
|
30
|
+
|
|
1
31
|
.ard-calendar {
|
|
2
|
-
width:
|
|
32
|
+
min-width: calc(var(--ard-calendar-grid-size) * 7 + var(--ard-calendar-grid-gap) * 6);
|
|
3
33
|
user-select: none;
|
|
34
|
+
padding: var(--ard-calendar-padding, 0 0.375rem 0.375rem 0.375rem);
|
|
35
|
+
box-sizing: content-box;
|
|
4
36
|
}
|
|
5
37
|
.ard-calendar.ard-color-none {
|
|
6
38
|
--ard-cmpcl--bg: var(--ard-bg);
|
|
@@ -136,11 +168,12 @@
|
|
|
136
168
|
--ard-cmpcl--overlay-colored-light: currentColor;
|
|
137
169
|
}
|
|
138
170
|
.ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header {
|
|
139
|
-
display:
|
|
140
|
-
|
|
171
|
+
display: grid;
|
|
172
|
+
grid-template-columns: 1fr 5fr 1fr;
|
|
141
173
|
align-items: center;
|
|
174
|
+
justify-items: center;
|
|
142
175
|
width: 100%;
|
|
143
|
-
padding: 0.75rem 0;
|
|
176
|
+
padding: var(--ard-calendar-header-padding, 0.75rem 0);
|
|
144
177
|
}
|
|
145
178
|
.ard-calendar .ard-calendar__top-toolbar .ard-calendar__calendar-header .ard-dropdown-arrow {
|
|
146
179
|
width: var(--ard-dropdown-button-size);
|
|
@@ -157,55 +190,60 @@
|
|
|
157
190
|
}
|
|
158
191
|
.ard-calendar .ard-calendar__weekdays {
|
|
159
192
|
display: grid;
|
|
160
|
-
grid-template-columns: repeat(7, 2.
|
|
193
|
+
grid-template-columns: repeat(7, var(--ard-calendar-grid-size, 2.25rem));
|
|
194
|
+
gap: var(--ard-calendar-grid-gap, 0.25rem);
|
|
161
195
|
align-items: center;
|
|
162
|
-
padding: 0 0
|
|
196
|
+
padding: var(--ard-calendar-weekday-padding, 0 0 0.5rem 0);
|
|
163
197
|
}
|
|
164
198
|
.ard-calendar .ard-calendar__weekdays .ard-calendar__weekday {
|
|
165
199
|
text-align: center;
|
|
166
|
-
font-size: 0.875rem;
|
|
167
|
-
font-weight: 500;
|
|
168
|
-
color: var(--ard-text);
|
|
200
|
+
font-size: var(--ard-calendar-weekday-font-size, 0.875rem);
|
|
201
|
+
font-weight: var(--ard-calendar-weekday-font-weight, 500);
|
|
202
|
+
color: var(--ard-calendar-weekday-color, var(--ard-text));
|
|
169
203
|
}
|
|
170
204
|
.ard-calendar .ard-calendar__days-grid {
|
|
171
|
-
padding: 0
|
|
172
|
-
padding-top: 0;
|
|
205
|
+
padding: 0;
|
|
173
206
|
display: grid;
|
|
174
|
-
grid-template-columns: repeat(7,
|
|
207
|
+
grid-template-columns: repeat(7, var(--ard-calendar-grid-size));
|
|
175
208
|
position: relative;
|
|
176
209
|
outline: none;
|
|
210
|
+
gap: var(--ard-calendar-grid-gap, 0.25rem);
|
|
177
211
|
}
|
|
178
212
|
.ard-calendar .ard-calendar__days-grid > * {
|
|
179
|
-
|
|
213
|
+
width: var(--ard-calendar-grid-size);
|
|
214
|
+
max-width: var(--ard-calendar-grid-size);
|
|
215
|
+
height: var(--ard-calendar-grid-size);
|
|
216
|
+
max-height: var(--ard-calendar-grid-size);
|
|
180
217
|
box-sizing: border-box;
|
|
181
|
-
aspect-ratio: 1;
|
|
182
218
|
}
|
|
183
219
|
.ard-calendar .ard-calendar__days-grid.ard-reserve-top-row {
|
|
184
|
-
padding-top:
|
|
220
|
+
padding-top: calc(var(--ard-calendar-grid-size) + var(--ard-calendar-grid-gap));
|
|
185
221
|
}
|
|
186
222
|
.ard-calendar .ard-calendar__days-grid .ard-calendar__floating-month {
|
|
187
223
|
position: absolute;
|
|
188
224
|
top: 0;
|
|
189
225
|
left: 0;
|
|
226
|
+
transform: var(--ard-calendar-floating-month-transform, none);
|
|
190
227
|
width: 100%;
|
|
191
228
|
box-sizing: border-box;
|
|
192
229
|
aspect-ratio: 7;
|
|
193
|
-
padding
|
|
230
|
+
padding: var(--ard-calendar-floating-month-padding, 0 0 0 1rem);
|
|
194
231
|
display: flex;
|
|
195
232
|
align-items: center;
|
|
196
|
-
font-size: 0.875rem;
|
|
197
|
-
font-weight: 500;
|
|
198
|
-
color: var(--ard-text3);
|
|
233
|
+
font-size: var(--ard-calendar-floating-month-font-size, 0.875rem);
|
|
234
|
+
font-weight: var(--ard-calendar-floating-month-font-weight, 500);
|
|
235
|
+
color: var(--ard-calendar-floating-month-color, var(--ard-text3));
|
|
199
236
|
letter-spacing: 0.5px;
|
|
200
237
|
}
|
|
201
238
|
.ard-calendar .ard-calendar__simple-grid {
|
|
202
239
|
border-top: 1px solid var(--ard-detail-ultralight);
|
|
203
|
-
margin-top: 0.25rem;
|
|
204
240
|
display: grid;
|
|
205
241
|
grid-template-columns: repeat(4, 1fr);
|
|
206
|
-
grid-template-rows: repeat(6,
|
|
242
|
+
grid-template-rows: repeat(6, var(--ard-calendar-grid-size));
|
|
207
243
|
position: relative;
|
|
208
244
|
outline: none;
|
|
245
|
+
padding: 0;
|
|
246
|
+
gap: var(--ard-calendar-grid-gap, 0.25rem);
|
|
209
247
|
}
|
|
210
248
|
.ard-calendar .ard-calendar__simple-grid > * {
|
|
211
249
|
max-width: 100%;
|
|
@@ -216,7 +254,8 @@
|
|
|
216
254
|
z-index: 1;
|
|
217
255
|
cursor: pointer;
|
|
218
256
|
outline: none;
|
|
219
|
-
padding: 0
|
|
257
|
+
padding: var(--ard-calendar-entry-padding, 0);
|
|
258
|
+
box-sizing: border-box;
|
|
220
259
|
}
|
|
221
260
|
.ard-calendar .ard-calendar__entry .ard-calendar__entry-button {
|
|
222
261
|
width: 100%;
|
|
@@ -225,49 +264,96 @@
|
|
|
225
264
|
display: flex;
|
|
226
265
|
align-items: center;
|
|
227
266
|
justify-content: center;
|
|
228
|
-
font-size: 0.875rem;
|
|
267
|
+
font-size: var(--ard-calendar-entry-font-size, 0.875rem);
|
|
268
|
+
font-weight: var(--ard-calendar-entry-font-weight, 400);
|
|
229
269
|
background: transparent;
|
|
230
270
|
border: 1px solid transparent;
|
|
231
|
-
border-radius: 9999px;
|
|
271
|
+
border-radius: var(--ard-calendar-entry-border-radius, 9999px);
|
|
232
272
|
position: relative;
|
|
233
273
|
cursor: pointer;
|
|
274
|
+
outline: none;
|
|
275
|
+
box-sizing: border-box;
|
|
234
276
|
}
|
|
235
277
|
.ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-focus-overlay {
|
|
236
278
|
position: absolute;
|
|
237
|
-
top: -0;
|
|
238
|
-
bottom: -0;
|
|
239
|
-
left: -0;
|
|
240
|
-
right: -0;
|
|
279
|
+
top: calc(-1 * 0);
|
|
280
|
+
bottom: calc(-1 * 0);
|
|
281
|
+
left: calc(-1 * 0);
|
|
282
|
+
right: calc(-1 * 0);
|
|
241
283
|
opacity: 0;
|
|
242
284
|
border-radius: inherit;
|
|
243
285
|
pointer-events: none;
|
|
244
286
|
transition: opacity 0.2s ease;
|
|
245
287
|
z-index: -1;
|
|
246
|
-
background: var(--ard-cmpcl--
|
|
247
|
-
border: 2px solid transparent;
|
|
288
|
+
background: var(--ard-cmpcl--overlay);
|
|
248
289
|
transition: border-color 0.1s ease, opacity 0.1s ease;
|
|
249
290
|
}
|
|
291
|
+
.ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
|
|
292
|
+
position: absolute;
|
|
293
|
+
top: calc(-1 * 0);
|
|
294
|
+
bottom: calc(-1 * 0);
|
|
295
|
+
left: calc(-1 * 0);
|
|
296
|
+
right: calc(-1 * 0);
|
|
297
|
+
opacity: 0;
|
|
298
|
+
border-radius: inherit;
|
|
299
|
+
pointer-events: none;
|
|
300
|
+
transition: opacity 0.2s ease;
|
|
301
|
+
z-index: -1;
|
|
302
|
+
opacity: 1;
|
|
303
|
+
left: -calc(var(--ard-calendar-grid-gap, 0.25rem)/2);
|
|
304
|
+
right: -calc(var(--ard-calendar-grid-gap, 0.25rem)/2);
|
|
305
|
+
border: var(--ard-calendar-entry-range-overlay-border-width, 1px) var(--ard-calendar-entry-range-overlay-border-style, dashed) transparent;
|
|
306
|
+
background: transparent;
|
|
307
|
+
transition: none;
|
|
308
|
+
border-radius: 0;
|
|
309
|
+
}
|
|
250
310
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-empty {
|
|
251
311
|
cursor: default;
|
|
252
312
|
}
|
|
253
313
|
.ard-calendar .ard-calendar__entry.ard-calendar-today .ard-calendar__entry-button {
|
|
254
|
-
border-color: var(--ard-detail);
|
|
314
|
+
border-color: var(--ard-calendar-entry-today-border-color, var(--ard-detail));
|
|
315
|
+
}
|
|
316
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range .ard-range-overlay {
|
|
317
|
+
opacity: 1;
|
|
318
|
+
border-top-color: var(--ard-cmpcl--bg-colored);
|
|
319
|
+
border-bottom-color: var(--ard-cmpcl--bg-colored);
|
|
320
|
+
}
|
|
321
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-start .ard-range-overlay {
|
|
322
|
+
border-left-color: var(--ard-cmpcl--bg-colored);
|
|
323
|
+
}
|
|
324
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-highlighted .ard-range-overlay {
|
|
325
|
+
border-right-color: var(--ard-cmpcl--bg-colored);
|
|
255
326
|
}
|
|
256
327
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted .ard-focus-overlay {
|
|
257
|
-
opacity: 20
|
|
328
|
+
opacity: var(--ard-calendar-entry-highlighted-overlay-opacity, 20%);
|
|
329
|
+
}
|
|
330
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
|
|
331
|
+
left: 0;
|
|
332
|
+
border-top-left-radius: var(--ard-calendar-entry-border-radius);
|
|
333
|
+
border-bottom-left-radius: var(--ard-calendar-entry-border-radius);
|
|
334
|
+
}
|
|
335
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted:not(.ard-calendar__entry-selected-in-range) .ard-range-overlay {
|
|
336
|
+
right: 0;
|
|
337
|
+
border-top-right-radius: var(--ard-calendar-entry-border-radius);
|
|
338
|
+
border-bottom-right-radius: var(--ard-calendar-entry-border-radius);
|
|
339
|
+
}
|
|
340
|
+
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-in-range .ard-range-overlay {
|
|
341
|
+
opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
|
|
342
|
+
background-color: var(--ard-cmpcl--bg-colored);
|
|
258
343
|
}
|
|
259
344
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-calendar__entry-button {
|
|
260
345
|
color: var(--ard-cmpcl--on-bg-colored);
|
|
261
346
|
}
|
|
262
347
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-focus-overlay {
|
|
263
|
-
opacity: 100
|
|
348
|
+
opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
|
|
349
|
+
background: var(--ard-cmpcl--bg-colored);
|
|
264
350
|
}
|
|
265
351
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-selected.ard-calendar-today .ard-focus-overlay {
|
|
266
|
-
border
|
|
352
|
+
border: var(--ard-calendar-entry-today-selected-border, 2px solid var(--ard-bg));
|
|
267
353
|
}
|
|
268
354
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled {
|
|
269
355
|
pointer-events: none;
|
|
270
|
-
opacity: 50
|
|
356
|
+
opacity: var(--ard-calendar-entry-disabled-overlay-opacity, 50%);
|
|
271
357
|
}
|
|
272
358
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-calendar__entry-button {
|
|
273
359
|
cursor: default;
|
|
@@ -276,27 +362,21 @@
|
|
|
276
362
|
background: var(--ard-cmpcl--overlay);
|
|
277
363
|
}
|
|
278
364
|
.ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled.ard-calendar__entry-highlighted .ard-focus-overlay {
|
|
279
|
-
opacity: 15
|
|
365
|
+
opacity: var(--ard-calendar-entry-disabled-highlighted-overlay-opacity, 15%);
|
|
280
366
|
}
|
|
281
|
-
.ard-calendar .ard-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
367
|
+
.ard-calendar .ard-years-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay,
|
|
368
|
+
.ard-calendar .ard-months-view .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
|
|
369
|
+
left: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
|
|
370
|
+
right: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
|
|
371
|
+
border: none;
|
|
286
372
|
}
|
|
287
|
-
.ard-calendar .ard-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
justify-content: center;
|
|
291
|
-
aspect-ratio: unset;
|
|
373
|
+
.ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay,
|
|
374
|
+
.ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-start .ard-range-overlay {
|
|
375
|
+
left: 0;
|
|
292
376
|
}
|
|
293
|
-
.ard-calendar .ard-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
width: 100%;
|
|
297
|
-
height: 1px;
|
|
298
|
-
background: var(--ard-detail-ultralight);
|
|
299
|
-
bottom: 0;
|
|
377
|
+
.ard-calendar .ard-years-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay,
|
|
378
|
+
.ard-calendar .ard-months-view .ard-calendar__entry.ard-calendar__entry-selected-end .ard-range-overlay {
|
|
379
|
+
right: 0;
|
|
300
380
|
}
|
|
301
381
|
|
|
302
382
|
.ard-readonly .ard-calendar,
|
|
@@ -305,7 +385,7 @@
|
|
|
305
385
|
}
|
|
306
386
|
|
|
307
387
|
.ard-disabled .ard-calendar {
|
|
308
|
-
opacity: 50
|
|
388
|
+
opacity: var(--ard-calendar-entry-disabled-opacity, 50%);
|
|
309
389
|
}
|
|
310
390
|
|
|
311
391
|
/*# sourceMappingURL=calendar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/calendar.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_dropdown-arrow.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/calendar.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_dropdown-arrow.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;;ACrCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD1FA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EEjDJ,OCsCqB;EDrCrB,QCqCqB;EDpCrB;EACA;EACA,qBCSO;EDRP,oBCQO;EDPP;EACA;;AFgDE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EIhJJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EJyIM;EACA;EACA;;AAEF;EItJJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EJ+IM;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGJ;EACE;;AAGA;EACE;;AAIF;EACE;EACA;EACA;;AAGA;EACE;;AAKF;EACE;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;EACA;;AAIA;EACE;;AAIN;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGA;EACE;;AASF;AAAA;EACE;EACA;EACA;;AAKF;AAAA;EACE;;AAIF;AAAA;EACE;;;AAQR;AAAA;EACE;;;AAIF;EACE","file":"calendar.css"}
|