igniteui-angular 22.2.2 → 22.2.4
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 +16 -7
- 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-dialog.mjs +1 -1
- package/fesm2022/igniteui-angular-dialog.mjs.map +1 -1
- package/fesm2022/igniteui-angular-grids-core.mjs +37 -13
- 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/grids/grid/README.md +6 -0
- package/lib/core/styles/themes/_scoping.scss +4 -0
- package/package.json +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
- package/types/igniteui-angular-core.d.ts +8 -5
- package/types/igniteui-angular-date-picker.d.ts +2 -0
- package/types/igniteui-angular-grids-core.d.ts +11 -1
|
@@ -760,6 +760,10 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
760
760
|
this._overlayId = this._overlayService
|
|
761
761
|
.attach(IgxCalendarContainerComponent, this.viewContainerRef, overlaySettings);
|
|
762
762
|
this._overlayService.show(this._overlayId);
|
|
763
|
+
if (!this.collapsed) {
|
|
764
|
+
// do not leave a focused input in edit mode during the opening animation
|
|
765
|
+
this._calendar?.wrapper?.nativeElement?.focus();
|
|
766
|
+
}
|
|
763
767
|
}
|
|
764
768
|
/**
|
|
765
769
|
* Toggles the picker's dropdown or dialog
|
|
@@ -961,6 +965,12 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
961
965
|
getEditElement() {
|
|
962
966
|
return this.inputDirective.nativeElement;
|
|
963
967
|
}
|
|
968
|
+
/** @hidden @internal */
|
|
969
|
+
onToggleClick(event) {
|
|
970
|
+
// do not focus input on click
|
|
971
|
+
event.stopPropagation();
|
|
972
|
+
this.toggle();
|
|
973
|
+
}
|
|
964
974
|
subscribeToClick() {
|
|
965
975
|
fromEvent(this.getEditElement(), 'click')
|
|
966
976
|
.pipe(takeUntil(this._destroy$))
|
|
@@ -1035,7 +1045,6 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1035
1045
|
});
|
|
1036
1046
|
this._overlayService.opened.pipe(...this._overlaySubFilter).subscribe(() => {
|
|
1037
1047
|
this.opened.emit({ owner: this });
|
|
1038
|
-
this._calendar.wrapper?.nativeElement?.focus();
|
|
1039
1048
|
});
|
|
1040
1049
|
this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => {
|
|
1041
1050
|
const args = { owner: this, event: e.event, cancel: e.cancel };
|
|
@@ -1117,7 +1126,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
1117
1126
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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: [
|
|
1118
1127
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
|
|
1119
1128
|
{ provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
|
|
1120
|
-
], 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)=\"
|
|
1129
|
+
], 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]=\"$any($any(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 }); }
|
|
1121
1130
|
}
|
|
1122
1131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
|
|
1123
1132
|
type: Component,
|
|
@@ -1133,7 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
1133
1142
|
IgxDateTimeEditorDirective,
|
|
1134
1143
|
IgxTextSelectionDirective,
|
|
1135
1144
|
IgxSuffixDirective
|
|
1136
|
-
], template: "<igx-input-group [type]=\"type\">\n @if (!toggleComponents.length) {\n <igx-prefix (click)=\"
|
|
1145
|
+
], 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]=\"$any($any(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"] }]
|
|
1137
1146
|
}], ctorParameters: () => [], propDecorators: { hideOutsideDays: [{
|
|
1138
1147
|
type: Input,
|
|
1139
1148
|
args: [{ transform: booleanAttribute }]
|