igniteui-angular 22.1.0-beta.6 → 22.1.0-beta.7
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/igniteui-angular-accordion.mjs +4 -4
- package/fesm2022/igniteui-angular-accordion.mjs.map +1 -1
- package/fesm2022/igniteui-angular-action-strip.mjs +0 -1
- package/fesm2022/igniteui-angular-action-strip.mjs.map +1 -1
- package/fesm2022/igniteui-angular-avatar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-badge.mjs +0 -1
- package/fesm2022/igniteui-angular-badge.mjs.map +1 -1
- package/fesm2022/igniteui-angular-banner.mjs +2 -2
- package/fesm2022/igniteui-angular-banner.mjs.map +1 -1
- package/fesm2022/igniteui-angular-button-group.mjs.map +1 -1
- package/fesm2022/igniteui-angular-calendar.mjs +4 -5
- package/fesm2022/igniteui-angular-calendar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-card.mjs.map +1 -1
- package/fesm2022/igniteui-angular-carousel.mjs.map +1 -1
- package/fesm2022/igniteui-angular-chips.mjs.map +1 -1
- package/fesm2022/igniteui-angular-combo.mjs +17 -6
- package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-core.mjs +16 -337
- package/fesm2022/igniteui-angular-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-date-picker.mjs +12 -14
- package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-dialog.mjs +1 -1
- package/fesm2022/igniteui-angular-dialog.mjs.map +1 -1
- package/fesm2022/igniteui-angular-directives.mjs +45 -47
- package/fesm2022/igniteui-angular-directives.mjs.map +1 -1
- package/fesm2022/igniteui-angular-drop-down.mjs +3 -2
- package/fesm2022/igniteui-angular-drop-down.mjs.map +1 -1
- package/fesm2022/igniteui-angular-expansion-panel.mjs +23 -12
- package/fesm2022/igniteui-angular-expansion-panel.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +484 -202
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +115 -94
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +15 -19
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-lite.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +75 -153
- package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +28 -35
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-icon.mjs.map +1 -1
- package/fesm2022/igniteui-angular-input-group.mjs +1 -1
- package/fesm2022/igniteui-angular-input-group.mjs.map +1 -1
- package/fesm2022/igniteui-angular-list.mjs.map +1 -1
- package/fesm2022/igniteui-angular-navbar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-navigation-drawer.mjs +2 -3
- package/fesm2022/igniteui-angular-navigation-drawer.mjs.map +1 -1
- package/fesm2022/igniteui-angular-paginator.mjs.map +1 -1
- package/fesm2022/igniteui-angular-progressbar.mjs +5 -2
- package/fesm2022/igniteui-angular-progressbar.mjs.map +1 -1
- package/fesm2022/igniteui-angular-query-builder.mjs +18 -19
- package/fesm2022/igniteui-angular-query-builder.mjs.map +1 -1
- package/fesm2022/igniteui-angular-radio.mjs +1 -1
- package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
- package/fesm2022/igniteui-angular-select.mjs.map +1 -1
- package/fesm2022/igniteui-angular-simple-combo.mjs +10 -7
- package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
- package/fesm2022/igniteui-angular-slider.mjs +3 -3
- package/fesm2022/igniteui-angular-slider.mjs.map +1 -1
- package/fesm2022/igniteui-angular-splitter.mjs +1 -1
- package/fesm2022/igniteui-angular-splitter.mjs.map +1 -1
- package/fesm2022/igniteui-angular-stepper.mjs +1 -1
- package/fesm2022/igniteui-angular-stepper.mjs.map +1 -1
- package/fesm2022/igniteui-angular-tabs.mjs.map +1 -1
- package/fesm2022/igniteui-angular-time-picker.mjs +3 -6
- package/fesm2022/igniteui-angular-time-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-tree.mjs +8 -10
- package/fesm2022/igniteui-angular-tree.mjs.map +1 -1
- package/migrations/migration-collection.json +0 -7
- package/package.json +1 -1
- package/types/igniteui-angular-avatar.d.ts +1 -1
- package/types/igniteui-angular-banner.d.ts +3 -3
- package/types/igniteui-angular-calendar.d.ts +9 -9
- package/types/igniteui-angular-card.d.ts +1 -1
- package/types/igniteui-angular-carousel.d.ts +9 -9
- package/types/igniteui-angular-chat.d.ts +1 -1
- package/types/igniteui-angular-chips.d.ts +5 -5
- package/types/igniteui-angular-combo.d.ts +17 -13
- package/types/igniteui-angular-core.d.ts +200 -495
- package/types/igniteui-angular-date-picker.d.ts +3 -3
- package/types/igniteui-angular-dialog.d.ts +4 -4
- package/types/igniteui-angular-directives.d.ts +60 -59
- package/types/igniteui-angular-drop-down.d.ts +16 -16
- package/types/igniteui-angular-expansion-panel.d.ts +6 -6
- package/types/igniteui-angular-grids-core.d.ts +1053 -791
- package/types/igniteui-angular-grids-grid.d.ts +104 -267
- package/types/igniteui-angular-grids-hierarchical-grid.d.ts +68 -547
- package/types/igniteui-angular-grids-lite.d.ts +7 -7
- package/types/igniteui-angular-grids-pivot-grid.d.ts +94 -129
- package/types/igniteui-angular-grids-tree-grid.d.ts +5 -51
- package/types/igniteui-angular-icon.d.ts +2 -2
- package/types/igniteui-angular-input-group.d.ts +4 -4
- package/types/igniteui-angular-list.d.ts +4 -4
- package/types/igniteui-angular-navigation-drawer.d.ts +3 -3
- package/types/igniteui-angular-progressbar.d.ts +1 -0
- package/types/igniteui-angular-query-builder.d.ts +9 -9
- package/types/igniteui-angular-radio.d.ts +1 -1
- package/types/igniteui-angular-select.d.ts +5 -5
- package/types/igniteui-angular-simple-combo.d.ts +2 -2
- package/types/igniteui-angular-slider.d.ts +4 -4
- package/types/igniteui-angular-splitter.d.ts +3 -3
- package/types/igniteui-angular-time-picker.d.ts +8 -8
- package/types/igniteui-angular-tree.d.ts +8 -8
- package/migrations/update-22_1_0_import-migration/index.d.ts +0 -2
- package/migrations/update-22_1_0_import-migration/index.js +0 -228
- package/migrations/update-22_1_0_import-migration/index.spec.d.ts +0 -1
- package/migrations/update-22_1_0_import-migration/index.spec.js +0 -188
|
@@ -251,7 +251,7 @@ class PickerBaseDirective {
|
|
|
251
251
|
}
|
|
252
252
|
/** Subscribes to the click events of toggle/clear icons in a query */
|
|
253
253
|
subToIconsClicked(components, handler) {
|
|
254
|
-
const subscribeToClick =
|
|
254
|
+
const subscribeToClick = componentList => {
|
|
255
255
|
componentList.forEach(component => {
|
|
256
256
|
component.clicked
|
|
257
257
|
.pipe(takeUntil(merge(componentList.changes, this._destroy$)))
|
|
@@ -657,7 +657,6 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
657
657
|
/** @hidden @internal */
|
|
658
658
|
this.displayValue = { transform: (date) => this.formatter(date) };
|
|
659
659
|
this._resourceStrings = getCurrentResourceStrings(DatePickerResourceStringsEN);
|
|
660
|
-
this._overlayId = '';
|
|
661
660
|
this._ngControl = null;
|
|
662
661
|
this._specialDates = null;
|
|
663
662
|
this._disabledDates = null;
|
|
@@ -958,7 +957,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
958
957
|
}
|
|
959
958
|
if (this._overlayId) {
|
|
960
959
|
this._overlayService.detach(this._overlayId);
|
|
961
|
-
this._overlayId
|
|
960
|
+
delete this._overlayId;
|
|
962
961
|
}
|
|
963
962
|
}
|
|
964
963
|
/** @hidden @internal */
|
|
@@ -1072,7 +1071,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1072
1071
|
this.closed.emit({ owner: this });
|
|
1073
1072
|
this._overlayService.detach(this._overlayId);
|
|
1074
1073
|
this._collapsed = true;
|
|
1075
|
-
this._overlayId =
|
|
1074
|
+
this._overlayId = null;
|
|
1076
1075
|
this._calendar = null;
|
|
1077
1076
|
this._calendarContainer = undefined;
|
|
1078
1077
|
this.cdr.markForCheck();
|
|
@@ -1131,7 +1130,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1131
1130
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], displayMonthsCount: "displayMonthsCount", orientation: "orientation", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", formatter: "formatter", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], spinDelta: "spinDelta", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: ["readOnly", "readOnly", booleanAttribute] }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" }, classAttribute: "igx-date-picker" }, providers: [
|
|
1132
1131
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
|
|
1133
1132
|
{ provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
|
|
1134
|
-
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <igx-icon\n [title]=\"\n value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\n \"\n family=\"default\"\n name=\"today\"\n >\n </igx-icon>\n </igx-prefix>\n }\n\n <input class=\"igx-date-picker__input-date\"\n [igxReadOnlyInput]=\"readOnly\"\n [displayValuePipe]=\"
|
|
1133
|
+
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <igx-icon\n [title]=\"\n value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\n \"\n family=\"default\"\n name=\"today\"\n >\n </igx-icon>\n </igx-prefix>\n }\n\n <input class=\"igx-date-picker__input-date\"\n [igxReadOnlyInput]=\"readOnly\"\n [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1135
1134
|
}
|
|
1136
1135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
|
|
1137
1136
|
type: Component,
|
|
@@ -1147,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
1147
1146
|
IgxDateTimeEditorDirective,
|
|
1148
1147
|
IgxTextSelectionDirective,
|
|
1149
1148
|
IgxSuffixDirective
|
|
1150
|
-
], template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <igx-icon\n [title]=\"\n value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\n \"\n family=\"default\"\n name=\"today\"\n >\n </igx-icon>\n </igx-prefix>\n }\n\n <input class=\"igx-date-picker__input-date\"\n [igxReadOnlyInput]=\"readOnly\"\n [displayValuePipe]=\"
|
|
1149
|
+
], template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <igx-icon\n [title]=\"\n value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\n \"\n family=\"default\"\n name=\"today\"\n >\n </igx-icon>\n </igx-prefix>\n }\n\n <input class=\"igx-date-picker__input-date\"\n [igxReadOnlyInput]=\"readOnly\"\n [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n"] }]
|
|
1151
1150
|
}], ctorParameters: () => [], propDecorators: { hideOutsideDays: [{
|
|
1152
1151
|
type: Input,
|
|
1153
1152
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1267,7 +1266,7 @@ class DateRangePickerFormatPipe {
|
|
|
1267
1266
|
}
|
|
1268
1267
|
const startDate = this.i18nFormatter.formatDate(start, appliedFormat, locale);
|
|
1269
1268
|
const endDate = this.i18nFormatter.formatDate(end, appliedFormat, locale);
|
|
1270
|
-
let formatted
|
|
1269
|
+
let formatted;
|
|
1271
1270
|
if (start) {
|
|
1272
1271
|
formatted = `${startDate} - `;
|
|
1273
1272
|
if (end) {
|
|
@@ -1831,7 +1830,6 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
|
|
|
1831
1830
|
this._doneButtonText = null;
|
|
1832
1831
|
this._cancelButtonText = null;
|
|
1833
1832
|
this._dateSeparator = null;
|
|
1834
|
-
this._overlayId = '';
|
|
1835
1833
|
this._displayMonthsCount = 2;
|
|
1836
1834
|
this._specialDates = null;
|
|
1837
1835
|
this._disabledDates = null;
|
|
@@ -2173,7 +2171,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
|
|
|
2173
2171
|
this._overlayService.closed.pipe(...this._overlaySubFilter).subscribe(() => {
|
|
2174
2172
|
this._overlayService.detach(this._overlayId);
|
|
2175
2173
|
this._collapsed = true;
|
|
2176
|
-
this._overlayId =
|
|
2174
|
+
this._overlayId = null;
|
|
2177
2175
|
this._calendar = null;
|
|
2178
2176
|
this._calendarContainer = undefined;
|
|
2179
2177
|
this.closed.emit({ owner: this });
|
|
@@ -2300,8 +2298,8 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
|
|
|
2300
2298
|
};
|
|
2301
2299
|
}
|
|
2302
2300
|
toRangeOfDates(range) {
|
|
2303
|
-
let start
|
|
2304
|
-
let end
|
|
2301
|
+
let start;
|
|
2302
|
+
let end;
|
|
2305
2303
|
if (!isDate(range.start)) {
|
|
2306
2304
|
start = DateTimeUtil.parseIsoDate(range.start);
|
|
2307
2305
|
}
|
|
@@ -2309,7 +2307,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
|
|
|
2309
2307
|
end = DateTimeUtil.parseIsoDate(range.end);
|
|
2310
2308
|
}
|
|
2311
2309
|
if (start || end) {
|
|
2312
|
-
return { start
|
|
2310
|
+
return { start, end };
|
|
2313
2311
|
}
|
|
2314
2312
|
return { start: range.start, end: range.end };
|
|
2315
2313
|
}
|
|
@@ -2548,7 +2546,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
|
|
|
2548
2546
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxDateRangePickerComponent, isStandalone: true, selector: "igx-date-range-picker", inputs: { displayMonthsCount: "displayMonthsCount", orientation: "orientation", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], formatter: "formatter", doneButtonText: "doneButtonText", cancelButtonText: "cancelButtonText", overlaySettings: "overlaySettings", displayFormat: "displayFormat", inputFormat: "inputFormat", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", specialDates: "specialDates", resourceStrings: "resourceStrings", placeholder: "placeholder", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], usePredefinedRanges: "usePredefinedRanges", customRanges: "customRanges", activeDate: "activeDate", locale: "locale", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.igx-date-range-picker": "this.cssClass" } }, providers: [
|
|
2549
2547
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
|
|
2550
2548
|
{ provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
|
|
2551
|
-
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "hint", first: true, predicate: IgxHintDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n <div (click)=\"open()\" class=\"content-wrap\">\n <ng-content select=\"igx-date-single\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n <ng-content select=\"igx-date-range-start\"></ng-content>\n <div [className]=\"separatorClass\">\n <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n </ng-container>\n </div>\n <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n <igx-input-group [type]=\"type\">\n <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n [value]=\"value! | dateRange: appliedFormat : locale : formatter\" />\n\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n </igx-prefix>\n }\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n </igx-input-group>\n</ng-template>\n\n<ng-container #container></ng-container>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n", "@layer ig.base{.igx-date-range-picker{--_range-column-gap: .25rem;--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);display:grid;position:relative;align-items:start;row-gap:.25rem;-moz-column-gap:var(--_range-column-gap);column-gap:var(--_range-column-gap)}.igx-date-range-picker>igx-icon{cursor:pointer}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)){grid-template-columns:auto 1fr auto auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-end .igx-input-group__bundle{grid-column:4/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label){grid-template-columns:auto 1fr auto 2ch auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__label{grid-column:2/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__hint{grid-column:1/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__bundle{grid-column:5/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__label,.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:6/7!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:5/span 2!important}.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:2}.igx-date-range-picker .igx-input-group__label:only-child,.igx-date-range-picker .igx-input-group__hint:only-child{grid-column:1/-1}.igx-date-range-picker igx-date-range-start,.igx-date-range-picker igx-date-range-end{display:contents}.igx-date-range-picker__label{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:flex;align-items:center;justify-content:center;height:100%;color:var(--label-color);pointer-events:none;grid-column:4/5;grid-row:1}.igx-date-range-picker-buttons{display:flex;justify-content:flex-end;padding:0 1rem 1rem}.igx-date-range-picker-buttons>*{margin-inline-end:.5rem}.igx-date-range-picker-buttons>*:last-of-type{margin-inline-end:0}.igx-date-range-picker-buttons:empty{display:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-range-picker__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.material{@container style(--ig-theme: material){.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:1}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 1;--_hint-row: 2}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2549
|
+
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "hint", first: true, predicate: IgxHintDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n <div (click)=\"open()\" class=\"content-wrap\">\n <ng-content select=\"igx-date-single\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n <ng-content select=\"igx-date-range-start\"></ng-content>\n <div [className]=\"separatorClass\">\n <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n </ng-container>\n </div>\n <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n <igx-input-group [type]=\"type\">\n <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n </igx-prefix>\n }\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n </igx-input-group>\n</ng-template>\n\n<ng-container #container></ng-container>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n", "@layer ig.base{.igx-date-range-picker{--_range-column-gap: .25rem;--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);display:grid;position:relative;align-items:start;row-gap:.25rem;-moz-column-gap:var(--_range-column-gap);column-gap:var(--_range-column-gap)}.igx-date-range-picker>igx-icon{cursor:pointer}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)){grid-template-columns:auto 1fr auto auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-end .igx-input-group__bundle{grid-column:4/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label){grid-template-columns:auto 1fr auto 2ch auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__label{grid-column:2/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__hint{grid-column:1/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__bundle{grid-column:5/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__label,.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:6/7!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:5/span 2!important}.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:2}.igx-date-range-picker .igx-input-group__label:only-child,.igx-date-range-picker .igx-input-group__hint:only-child{grid-column:1/-1}.igx-date-range-picker igx-date-range-start,.igx-date-range-picker igx-date-range-end{display:contents}.igx-date-range-picker__label{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:flex;align-items:center;justify-content:center;height:100%;color:var(--label-color);pointer-events:none;grid-column:4/5;grid-row:1}.igx-date-range-picker-buttons{display:flex;justify-content:flex-end;padding:0 1rem 1rem}.igx-date-range-picker-buttons>*{margin-inline-end:.5rem}.igx-date-range-picker-buttons>*:last-of-type{margin-inline-end:0}.igx-date-range-picker-buttons:empty{display:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-range-picker__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.material{@container style(--ig-theme: material){.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:1}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 1;--_hint-row: 2}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2552
2550
|
}
|
|
2553
2551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
|
|
2554
2552
|
type: Component,
|
|
@@ -2564,7 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
2564
2562
|
IgxSuffixDirective,
|
|
2565
2563
|
IgxReadOnlyInputDirective,
|
|
2566
2564
|
DateRangePickerFormatPipe
|
|
2567
|
-
], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n <div (click)=\"open()\" class=\"content-wrap\">\n <ng-content select=\"igx-date-single\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n <ng-content select=\"igx-date-range-start\"></ng-content>\n <div [className]=\"separatorClass\">\n <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n </ng-container>\n </div>\n <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n <igx-input-group [type]=\"type\">\n <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n [value]=\"value! | dateRange: appliedFormat : locale : formatter\" />\n\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n </igx-prefix>\n }\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n </igx-input-group>\n</ng-template>\n\n<ng-container #container></ng-container>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n", "@layer ig.base{.igx-date-range-picker{--_range-column-gap: .25rem;--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);display:grid;position:relative;align-items:start;row-gap:.25rem;-moz-column-gap:var(--_range-column-gap);column-gap:var(--_range-column-gap)}.igx-date-range-picker>igx-icon{cursor:pointer}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)){grid-template-columns:auto 1fr auto auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-end .igx-input-group__bundle{grid-column:4/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label){grid-template-columns:auto 1fr auto 2ch auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__label{grid-column:2/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__hint{grid-column:1/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__bundle{grid-column:5/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__label,.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:6/7!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:5/span 2!important}.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:2}.igx-date-range-picker .igx-input-group__label:only-child,.igx-date-range-picker .igx-input-group__hint:only-child{grid-column:1/-1}.igx-date-range-picker igx-date-range-start,.igx-date-range-picker igx-date-range-end{display:contents}.igx-date-range-picker__label{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:flex;align-items:center;justify-content:center;height:100%;color:var(--label-color);pointer-events:none;grid-column:4/5;grid-row:1}.igx-date-range-picker-buttons{display:flex;justify-content:flex-end;padding:0 1rem 1rem}.igx-date-range-picker-buttons>*{margin-inline-end:.5rem}.igx-date-range-picker-buttons>*:last-of-type{margin-inline-end:0}.igx-date-range-picker-buttons:empty{display:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-range-picker__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.material{@container style(--ig-theme: material){.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:1}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 1;--_hint-row: 2}}}\n"] }]
|
|
2565
|
+
], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n <div (click)=\"open()\" class=\"content-wrap\">\n <ng-content select=\"igx-date-single\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n <ng-content select=\"igx-date-range-start\"></ng-content>\n <div [className]=\"separatorClass\">\n <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n </ng-container>\n </div>\n <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #clearIcon>\n <igx-icon family=\"default\" name=\"input_clear\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n <igx-input-group [type]=\"type\">\n <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n <input #singleInput igxInput type=\"text\" [igxReadOnlyInput]=\"readOnly\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"toggle()\">\n <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n </igx-prefix>\n }\n\n @if (!clearComponents.length && value) {\n <igx-suffix (click)=\"clear()\">\n <ng-container *ngTemplateOutlet=\"clearIcon\"></ng-container>\n </igx-suffix>\n }\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n </igx-input-group>\n</ng-template>\n\n<ng-container #container></ng-container>\n", styles: ["@layer ig.base{.igx-date-picker{display:block}.igx-date-picker igx-calendar,.igx-date-picker igx-days-view,.igx-date-picker igx-months-view,.igx-date-picker igx-years-view{box-shadow:none;border-radius:0}.igx-date-picker igx-divider{--ig-divider-color: var(--actions-divider-color)}.igx-date-picker__actions{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));display:flex;justify-content:flex-end;gap:.5rem}.igx-date-picker__actions [igxButton]{--component-size: var(--ig-size, var(--default-size)) !important}.igx-date-picker__buttons{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.igx-date-picker--dropdown{display:flex;flex:1 0 0;flex-direction:column;box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-24);background:var(--content-background);border-radius:var(--border-radius);overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.25rem,-1 * 3.25rem),var(--is-medium, 1)*max(2.875rem,-1 * 2.875rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(4rem,-1 * 4rem),var(--is-medium, 1)*max(3.375rem,-1 * 3.375rem),var(--is-small, 1)*max(2.9375rem,-1 * 2.9375rem));padding:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3.375rem,-1 * 3.375rem),var(--is-medium, 1)*max(3rem,-1 * 3rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-picker__actions{min-height:max(var(--is-large, 1)*max(3rem,-1 * 3rem),var(--is-medium, 1)*max(2.75rem,-1 * 2.75rem),var(--is-small, 1)*max(2.5rem,-1 * 2.5rem));padding:.5rem 1rem}.igx-date-picker--dropdown{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-3)}.igx-date-picker--dialog{box-shadow:0 0 0 .0625rem var(--border-color),var(--ig-elevation-5)}}}\n", "@layer ig.base{.igx-date-range-picker{--_range-column-gap: .25rem;--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);display:grid;position:relative;align-items:start;row-gap:.25rem;-moz-column-gap:var(--_range-column-gap);column-gap:var(--_range-column-gap)}.igx-date-range-picker>igx-icon{cursor:pointer}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)){grid-template-columns:auto 1fr auto auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):not(:has(.igx-date-range-picker__label)) igx-date-range-end .igx-input-group__bundle{grid-column:4/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label){grid-template-columns:auto 1fr auto 2ch auto 1fr auto}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__bundle{grid-column:1/span 3!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__label{grid-column:2/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-start .igx-input-group__hint{grid-column:1/span 2!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__bundle{grid-column:5/-1!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__label,.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:6/7!important}.igx-date-range-picker:has(igx-date-range-start,igx-date-range-end):has(.igx-date-range-picker__label) igx-date-range-end .igx-input-group__hint{grid-column:5/span 2!important}.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:2}.igx-date-range-picker .igx-input-group__label:only-child,.igx-date-range-picker .igx-input-group__hint:only-child{grid-column:1/-1}.igx-date-range-picker igx-date-range-start,.igx-date-range-picker igx-date-range-end{display:contents}.igx-date-range-picker__label{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);display:flex;align-items:center;justify-content:center;height:100%;color:var(--label-color);pointer-events:none;grid-column:4/5;grid-row:1}.igx-date-range-picker-buttons{display:flex;justify-content:flex-end;padding:0 1rem 1rem}.igx-date-range-picker-buttons>*{margin-inline-end:.5rem}.igx-date-range-picker-buttons>*:last-of-type{margin-inline-end:0}.igx-date-range-picker-buttons:empty{display:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-date-range-picker__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom)}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 2;--_hint-row: 3}.igx-date-range-picker:not(:has(.igx-input-group__label)) .igx-date-range-picker__label{grid-row:2}}}@layer ig.material{@container style(--ig-theme: material){.igx-date-range-picker:has(.igx-input-group__label) .igx-date-range-picker__label{grid-row:1}.igx-date-range-picker .igx-input-group:not(:has(.igx-input-group__label)){--_bundle-row: 1;--_hint-row: 2}}}\n"] }]
|
|
2568
2566
|
}], ctorParameters: () => [], propDecorators: { displayMonthsCount: [{
|
|
2569
2567
|
type: Input
|
|
2570
2568
|
}], orientation: [{
|