igniteui-angular 21.2.22 → 21.2.23
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-core.mjs +14 -5
- package/fesm2022/igniteui-angular-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-date-picker.mjs +12 -3
- package/fesm2022/igniteui-angular-date-picker.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +31 -11
- package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-grid.mjs +2 -2
- package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +2 -2
- package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs +4 -4
- package/fesm2022/igniteui-angular-grids-tree-grid.mjs.map +1 -1
- package/package.json +1 -1
- package/types/igniteui-angular-core.d.ts +7 -4
- package/types/igniteui-angular-date-picker.d.ts +2 -0
- package/types/igniteui-angular-grids-core.d.ts +11 -1
|
@@ -749,6 +749,10 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
749
749
|
this._overlayId = this._overlayService
|
|
750
750
|
.attach(IgxCalendarContainerComponent, this.viewContainerRef, overlaySettings);
|
|
751
751
|
this._overlayService.show(this._overlayId);
|
|
752
|
+
if (!this.collapsed) {
|
|
753
|
+
// do not leave a focused input in edit mode during the opening animation
|
|
754
|
+
this._calendar?.wrapper?.nativeElement?.focus();
|
|
755
|
+
}
|
|
752
756
|
}
|
|
753
757
|
/**
|
|
754
758
|
* Toggles the picker's dropdown or dialog
|
|
@@ -950,6 +954,12 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
950
954
|
getEditElement() {
|
|
951
955
|
return this.inputDirective.nativeElement;
|
|
952
956
|
}
|
|
957
|
+
/** @hidden @internal */
|
|
958
|
+
onToggleClick(event) {
|
|
959
|
+
// do not focus input on click
|
|
960
|
+
event.stopPropagation();
|
|
961
|
+
this.toggle();
|
|
962
|
+
}
|
|
953
963
|
subscribeToClick() {
|
|
954
964
|
fromEvent(this.getEditElement(), 'click')
|
|
955
965
|
.pipe(takeUntil(this._destroy$))
|
|
@@ -1034,7 +1044,6 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1034
1044
|
});
|
|
1035
1045
|
this._overlayService.opened.pipe(...this._overlaySubFilter).subscribe(() => {
|
|
1036
1046
|
this.opened.emit({ owner: this });
|
|
1037
|
-
this._calendar.wrapper?.nativeElement?.focus();
|
|
1038
1047
|
});
|
|
1039
1048
|
this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => {
|
|
1040
1049
|
const args = { owner: this, event: e.event, cancel: e.cancel };
|
|
@@ -1116,7 +1125,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1116
1125
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" } }, providers: [
|
|
1117
1126
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
|
|
1118
1127
|
{ provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
|
|
1119
|
-
], 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)=\"
|
|
1128
|
+
], 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)=\"onToggleClick($event)\">\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: [":host{display:block}\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" }] }); }
|
|
1120
1129
|
}
|
|
1121
1130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
|
|
1122
1131
|
type: Component,
|
|
@@ -1132,7 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1132
1141
|
IgxDateTimeEditorDirective,
|
|
1133
1142
|
IgxTextSelectionDirective,
|
|
1134
1143
|
IgxSuffixDirective
|
|
1135
|
-
], template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"
|
|
1144
|
+
], template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"onToggleClick($event)\">\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: [":host{display:block}\n"] }]
|
|
1136
1145
|
}], ctorParameters: () => [], propDecorators: { hideOutsideDays: [{
|
|
1137
1146
|
type: Input,
|
|
1138
1147
|
args: [{ transform: booleanAttribute }]
|