igniteui-angular 18.2.11 → 18.2.12
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/esm2022/lib/action-strip/action-strip.component.mjs +1 -3
- package/esm2022/lib/action-strip/grid-actions/grid-action-button.component.mjs +2 -3
- package/esm2022/lib/calendar/calendar.component.mjs +3 -3
- package/esm2022/lib/calendar/month-picker/month-picker.component.mjs +2 -3
- package/esm2022/lib/calendar/months-view/months-view.component.mjs +12 -4
- package/esm2022/lib/calendar/years-view/years-view.component.mjs +11 -3
- package/esm2022/lib/dialog/dialog.component.mjs +2 -1
- package/esm2022/lib/drop-down/drop-down.component.mjs +2 -2
- package/esm2022/lib/grids/filtering/excel-style/excel-style-header.component.mjs +2 -3
- package/esm2022/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.mjs +2 -3
- package/esm2022/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.mjs +3 -6
- package/esm2022/lib/grids/pivot-grid/pivot-row-header-group.component.mjs +2 -3
- package/esm2022/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.mjs +3 -3
- package/esm2022/lib/grids/toolbar/grid-toolbar-exporter.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +2 -3
- package/esm2022/lib/paginator/paginator.component.mjs +3 -5
- package/esm2022/lib/services/overlay/overlay.mjs +4 -2
- package/fesm2022/igniteui-angular.mjs +37 -21
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/lib/calendar/months-view/months-view.component.d.ts +4 -0
- package/lib/calendar/years-view/years-view.component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import * as i4 from '@angular/forms';
|
|
|
4
4
|
import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, takeUntil as takeUntil$1, pipe } from 'rxjs';
|
|
6
6
|
import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
|
|
7
|
-
import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT,
|
|
7
|
+
import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgFor, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
|
|
8
8
|
import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
|
|
9
9
|
import { strToU8, zip } from 'fflate';
|
|
10
10
|
import { scaleInVerTop, scaleOutVerTop, AnimationUtil, fadeIn, fadeOut, slideInTop, slideOutTop, slideInBottom, slideOutBottom, scaleInHorRight, scaleOutHorRight, scaleInHorLeft, scaleOutHorLeft, scaleInVerBottom, scaleOutVerBottom, scaleInCenter, growVerIn, growVerOut, slideInLeft } from 'igniteui-angular/animations';
|
|
@@ -5953,7 +5953,9 @@ class IgxOverlayService {
|
|
|
5953
5953
|
return;
|
|
5954
5954
|
}
|
|
5955
5955
|
if (settings) {
|
|
5956
|
-
|
|
5956
|
+
settings.positionStrategy ??= info.settings.positionStrategy;
|
|
5957
|
+
settings.scrollStrategy ??= info.settings.scrollStrategy;
|
|
5958
|
+
info.settings = { ...info.settings, ...settings };
|
|
5957
5959
|
}
|
|
5958
5960
|
this.updateSize(info);
|
|
5959
5961
|
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
|
|
@@ -10242,7 +10244,7 @@ class IgxIconComponent {
|
|
|
10242
10244
|
}
|
|
10243
10245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxIconComponent, decorators: [{
|
|
10244
10246
|
type: Component,
|
|
10245
|
-
args: [{ selector: "igx-icon", standalone: true,
|
|
10247
|
+
args: [{ selector: "igx-icon", standalone: true, template: "<!-- This is only here for backwards compatibility in case -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n @case (\"liga\") {{{ iconRef.name }}}\n\n @case (\"svg\") {\n <div [innerHTML]=\"getSvg\"></div>\n }\n}\n" }]
|
|
10246
10248
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
|
|
10247
10249
|
type: HostBinding,
|
|
10248
10250
|
args: ["class"]
|
|
@@ -24303,7 +24305,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
|
|
|
24303
24305
|
* ```
|
|
24304
24306
|
*/
|
|
24305
24307
|
open(overlaySettings) {
|
|
24306
|
-
const settings =
|
|
24308
|
+
const settings = { ...{}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
|
|
24307
24309
|
this.toggleDirective.open(settings);
|
|
24308
24310
|
this.updateScrollPosition();
|
|
24309
24311
|
}
|
|
@@ -24752,7 +24754,7 @@ class IgxGridActionButtonComponent {
|
|
|
24752
24754
|
}
|
|
24753
24755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
|
|
24754
24756
|
type: Component,
|
|
24755
|
-
args: [{ selector: 'igx-grid-action-button', standalone: true, imports: [NgIf,
|
|
24757
|
+
args: [{ selector: 'igx-grid-action-button', standalone: true, imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<ng-container *ngIf=\"!asMenuItem\">\n <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n <ng-container *ngIf=\"asMenuItem\">\n <div #container [className]=\"containerClass\">\n <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n <label igxLabel>{{labelText}}</label>\n </div>\n </ng-container>\n</ng-template>\n" }]
|
|
24756
24758
|
}], propDecorators: { container: [{
|
|
24757
24759
|
type: ViewChild,
|
|
24758
24760
|
args: ['container']
|
|
@@ -28021,7 +28023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
28021
28023
|
NgIf,
|
|
28022
28024
|
NgFor,
|
|
28023
28025
|
NgTemplateOutlet,
|
|
28024
|
-
IgxButtonDirective,
|
|
28025
28026
|
IgxIconButtonDirective,
|
|
28026
28027
|
IgxRippleDirective,
|
|
28027
28028
|
IgxToggleActionDirective,
|
|
@@ -30605,6 +30606,14 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
|
|
|
30605
30606
|
*/
|
|
30606
30607
|
this._monthFormat = "short";
|
|
30607
30608
|
}
|
|
30609
|
+
/**
|
|
30610
|
+
* @hidden
|
|
30611
|
+
*/
|
|
30612
|
+
onMouseDown() {
|
|
30613
|
+
if (this.tabIndex !== -1) {
|
|
30614
|
+
this.el.nativeElement.focus();
|
|
30615
|
+
}
|
|
30616
|
+
}
|
|
30608
30617
|
/**
|
|
30609
30618
|
* Returns the locale representation of the month in the months view.
|
|
30610
30619
|
*
|
|
@@ -30651,7 +30660,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
|
|
|
30651
30660
|
provide: DAY_INTERVAL_TOKEN,
|
|
30652
30661
|
useValue: "month",
|
|
30653
30662
|
},
|
|
30654
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarMonth\n #item=\"igxCalendarMonth\"\n *ngFor=\"let month of range; trackBy: monthTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"month.getTime()\"\n [attr.aria-label]=\"formattedMonth(month).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [value]=\"month\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedMonth(month).formatted | titlecase }}\n </span>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
|
|
30663
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarMonth\n #item=\"igxCalendarMonth\"\n *ngFor=\"let month of range; trackBy: monthTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"month.getTime()\"\n [attr.aria-label]=\"formattedMonth(month).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [value]=\"month\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n (mousedown)=\"onMouseDown()\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedMonth(month).formatted | titlecase }}\n </span>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
|
|
30655
30664
|
}
|
|
30656
30665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
|
|
30657
30666
|
type: Component,
|
|
@@ -30665,7 +30674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
30665
30674
|
provide: DAY_INTERVAL_TOKEN,
|
|
30666
30675
|
useValue: "month",
|
|
30667
30676
|
},
|
|
30668
|
-
], selector: "igx-months-view", standalone: true, imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe
|
|
30677
|
+
], selector: "igx-months-view", standalone: true, imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarMonth\n #item=\"igxCalendarMonth\"\n *ngFor=\"let month of range; trackBy: monthTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"month.getTime()\"\n [attr.aria-label]=\"formattedMonth(month).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [value]=\"month\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n (mousedown)=\"onMouseDown()\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedMonth(month).formatted | titlecase }}\n </span>\n </span>\n</div>\n" }]
|
|
30669
30678
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
30670
30679
|
type: Inject,
|
|
30671
30680
|
args: [DAY_INTERVAL_TOKEN]
|
|
@@ -30789,6 +30798,14 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
|
|
|
30789
30798
|
year: this.yearFormat,
|
|
30790
30799
|
});
|
|
30791
30800
|
}
|
|
30801
|
+
/**
|
|
30802
|
+
* @hidden
|
|
30803
|
+
*/
|
|
30804
|
+
onMouseDown() {
|
|
30805
|
+
if (this.tabIndex !== -1) {
|
|
30806
|
+
this.el.nativeElement.focus();
|
|
30807
|
+
}
|
|
30808
|
+
}
|
|
30792
30809
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxYearsViewComponent, deps: [{ token: i0.ElementRef }, { token: DAY_INTERVAL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30793
30810
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { standalone: "standalone", yearFormat: "yearFormat" }, host: { properties: { "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
|
|
30794
30811
|
{
|
|
@@ -30800,7 +30817,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
|
|
|
30800
30817
|
provide: DAY_INTERVAL_TOKEN,
|
|
30801
30818
|
useValue: "year",
|
|
30802
30819
|
},
|
|
30803
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarYear\n #item=\"igxCalendarYear\"\n *ngFor=\"let year of range; trackBy: yearTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"year.getTime()\"\n [attr.aria-label]=\"formattedYear(year).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [attr.aria-current]=\"item.isCurrent\"\n [value]=\"year\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedYear(year).formatted }}\n </span>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }] }); }
|
|
30820
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarYear\n #item=\"igxCalendarYear\"\n *ngFor=\"let year of range; trackBy: yearTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"year.getTime()\"\n [attr.aria-label]=\"formattedYear(year).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [attr.aria-current]=\"item.isCurrent\"\n [value]=\"year\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n (mousedown)=\"onMouseDown()\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedYear(year).formatted }}\n </span>\n </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }] }); }
|
|
30804
30821
|
}
|
|
30805
30822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
|
|
30806
30823
|
type: Component,
|
|
@@ -30814,7 +30831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
30814
30831
|
provide: DAY_INTERVAL_TOKEN,
|
|
30815
30832
|
useValue: "year",
|
|
30816
30833
|
},
|
|
30817
|
-
], selector: "igx-years-view", standalone: true, imports: [NgFor, IgxCalendarYearDirective], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarYear\n #item=\"igxCalendarYear\"\n *ngFor=\"let year of range; trackBy: yearTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"year.getTime()\"\n [attr.aria-label]=\"formattedYear(year).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [attr.aria-current]=\"item.isCurrent\"\n [value]=\"year\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedYear(year).formatted }}\n </span>\n </span>\n</div>\n" }]
|
|
30834
|
+
], selector: "igx-years-view", standalone: true, imports: [NgFor, IgxCalendarYearDirective], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n <span\n igxCalendarYear\n #item=\"igxCalendarYear\"\n *ngFor=\"let year of range; trackBy: yearTracker\"\n class=\"igx-calendar-view__item\"\n role=\"gridcell\"\n [attr.id]=\"year.getTime()\"\n [attr.aria-label]=\"formattedYear(year).long\"\n [attr.aria-selected]=\"item.isSelected\"\n [attr.aria-current]=\"item.isCurrent\"\n [value]=\"year\"\n [date]=\"date\"\n [showActive]=\"showActive\"\n (itemSelection)=\"selectDate($event)\"\n (mousedown)=\"onMouseDown()\"\n >\n <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n {{ formattedYear(year).formatted }}\n </span>\n </span>\n</div>\n" }]
|
|
30818
30835
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
30819
30836
|
type: Inject,
|
|
30820
30837
|
args: [DAY_INTERVAL_TOKEN]
|
|
@@ -33277,7 +33294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
33277
33294
|
multi: false,
|
|
33278
33295
|
provide: KeyboardNavigationService,
|
|
33279
33296
|
},
|
|
33280
|
-
], selector: 'igx-calendar', standalone: true, imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, NgStyle, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n <ng-container *ngIf=\"selection === 'single'\">\n <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n <ng-container *ngIf=\"selection === 'single'\">\n <span>{{ getFormattedDate().weekday }}, </span>\n <span>{{ getFormattedDate().monthday }}</span>\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n <span> - </span>\n <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n </ng-container>\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n <span\n #monthsBtn\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n class=\"igx-calendar-picker__date\">\n {{ formattedMonth(obj.date) }}\n </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n <span\n #yearsBtn\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n class=\"igx-calendar-picker__date\">\n {{ formattedYear(obj.date) }}\n </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n <span *ngIf=\"monthsViewNumber < 2 || obj.index < 1\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n {{ monthsViewNumber > 1 ?\n (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n (obj.date | date: 'LLLL yyyy')) :\n resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n </span>\n <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n <div\n #prevPageBtn\n tabindex=\"0\"\n class=\"igx-calendar-picker__prev\"\n role=\"button\"\n [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n data-action=\"prev\"\n igxCalendarScrollPage\n [startScroll]=\"startPrevPageScroll\"\n [stopScroll]=\"stopPageScroll\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n <div\n #nextPageBtn\n tabindex=\"0\"\n class=\"igx-calendar-picker__next\"\n role=\"button\"\n [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n data-action=\"next\"\n igxCalendarScrollPage\n [startScroll]=\"startNextPageScroll\"\n [stopScroll]=\"stopPageScroll\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n </ng-container>\n </div>\n <div\n class=\"igx-calendar-picker__nav\"\n *ngIf=\"this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0\"\n >\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n <section class=\"igx-calendar-picker\">\n <div class=\"igx-calendar-picker__dates\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n </ng-container>\n </div>\n <div class=\"igx-calendar-picker__nav\">\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n <section class=\"igx-calendar-picker\">\n <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n </ng-container>\n </div>\n <div class=\"igx-calendar-picker__nav\">\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n\n<header\n aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n class=\"igx-calendar__header\"\n *ngIf=\"selection === 'single' && hasHeader || selection === 'range' && hasHeader\">\n <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n </h5>\n <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n </ng-container>\n </h2>\n</header>\n\n\n<div\n #wrapper\n [style.--calendar-months]=\"monthsViewNumber\"\n [tabIndex]=\"0\"\n class=\"igx-calendar__wrapper\"\n [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n [attr.aria-activedescendant]=\"activeDescendant\"\n [attr.aria-multiselectable]=\"selection !== 'single'\"\n aria-labelledby=\"calendar-desc\"\n role=\"grid\"\n >\n <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n <ng-container *ngIf=\"selection === 'multi'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_multi_selection}}\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_range_selection}}\n </ng-container>\n <ng-container *ngIf=\"selection === 'single'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_single_selection}}\n </ng-container>\n </caption>\n <section\n class=\"igx-calendar__pickers\"\n [class.igx-calendar__pickers--days]=\"isDefaultView\"\n [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n >\n <ng-container *ngIf=\"isDefaultView\">\n <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isYearView\">\n <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isDecadeView\">\n <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n </ng-container>\n </section>\n\n <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n <ng-container *ngIf=\"isDefaultView\">\n <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n <igx-days-view\n #days\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [selection]=\"selection\"\n [locale]=\"locale\"\n [value]=\"value\"\n [(activeDate)]=\"activeDate\"\n [(previewRangeDate)]=\"previewRangeDate\"\n [viewDate]=\"i | IgxGetViewDate: viewDate\"\n [weekStart]=\"weekStart\"\n [formatOptions]=\"formatOptions\"\n [formatViews]=\"formatViews\"\n [disabledDates]=\"disabledDates\"\n [specialDates]=\"specialDates\"\n [style.--calendar-row-start]=\"(i + 1) * 2\"\n [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [showActiveDay]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (dateSelected)=\"handleDateSelection($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-days-view>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isYearView\">\n <igx-months-view\n #months\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [date]=\"viewDate\"\n [locale]=\"locale\"\n [formatView]=\"formatViews.month\"\n [monthFormat]=\"formatOptions.month\"\n [showActive]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (pageChanged)=\"updateYear($event)\"\n (activeDateChanged)=\"updateActiveDescendant($event)\"\n (selected)=\"changeMonth($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-months-view>\n </ng-container>\n\n <ng-container *ngIf=\"isDecadeView\">\n <igx-years-view\n #decade\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [date]=\"viewDate\"\n [locale]=\"locale\"\n [formatView]=\"formatViews.year\"\n [yearFormat]=\"formatOptions.year\"\n [showActive]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (pageChanged)=\"updateYear($event)\"\n (activeDateChanged)=\"updateActiveDescendant($event)\"\n (selected)=\"changeYear($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-years-view>\n </ng-container>\n </section>\n</div>\n" }]
|
|
33297
|
+
], selector: 'igx-calendar', standalone: true, imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n <ng-container *ngIf=\"selection === 'single'\">\n <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n <ng-container *ngIf=\"selection === 'single'\">\n <span>{{ getFormattedDate().weekday }}, </span>\n <span>{{ getFormattedDate().monthday }}</span>\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n <span> - </span>\n <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n </ng-container>\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n <span\n #monthsBtn\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n class=\"igx-calendar-picker__date\">\n {{ formattedMonth(obj.date) }}\n </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n <span\n #yearsBtn\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n class=\"igx-calendar-picker__date\">\n {{ formattedYear(obj.date) }}\n </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n <span *ngIf=\"monthsViewNumber < 2 || obj.index < 1\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n {{ monthsViewNumber > 1 ?\n (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n (obj.date | date: 'LLLL yyyy')) :\n resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n </span>\n <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n <div\n #prevPageBtn\n tabindex=\"0\"\n class=\"igx-calendar-picker__prev\"\n role=\"button\"\n [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n data-action=\"prev\"\n igxCalendarScrollPage\n [startScroll]=\"startPrevPageScroll\"\n [stopScroll]=\"stopPageScroll\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n <div\n #nextPageBtn\n tabindex=\"0\"\n class=\"igx-calendar-picker__next\"\n role=\"button\"\n [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n data-action=\"next\"\n igxCalendarScrollPage\n [startScroll]=\"startNextPageScroll\"\n [stopScroll]=\"stopPageScroll\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n </ng-container>\n </div>\n <div\n class=\"igx-calendar-picker__nav\"\n *ngIf=\"this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0\"\n >\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n <section class=\"igx-calendar-picker\">\n <div class=\"igx-calendar-picker__dates\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n </ng-container>\n </div>\n <div class=\"igx-calendar-picker__nav\">\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n <section class=\"igx-calendar-picker\">\n <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n <ng-container\n *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n </ng-container>\n </div>\n <div class=\"igx-calendar-picker__nav\">\n <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n </div>\n </section>\n</ng-template>\n\n\n<header\n aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n class=\"igx-calendar__header\"\n *ngIf=\"selection === 'single' && hasHeader || selection === 'range' && hasHeader\">\n <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n </h5>\n <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n </ng-container>\n </h2>\n</header>\n\n\n<div\n #wrapper\n [style.--calendar-months]=\"monthsViewNumber\"\n [tabIndex]=\"0\"\n class=\"igx-calendar__wrapper\"\n [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n [attr.aria-activedescendant]=\"activeDescendant\"\n [attr.aria-multiselectable]=\"selection !== 'single'\"\n aria-labelledby=\"calendar-desc\"\n role=\"grid\"\n >\n <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n <ng-container *ngIf=\"selection === 'multi'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_multi_selection}}\n </ng-container>\n <ng-container *ngIf=\"selection === 'range'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_range_selection}}\n </ng-container>\n <ng-container *ngIf=\"selection === 'single'\">\n {{ monthsViewNumber && monthsViewNumber > 1 ?\n resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n resourceStrings.igx_calendar_singular_single_selection}}\n </ng-container>\n </caption>\n <section\n class=\"igx-calendar__pickers\"\n [class.igx-calendar__pickers--days]=\"isDefaultView\"\n [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n >\n <ng-container *ngIf=\"isDefaultView\">\n <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isYearView\">\n <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isDecadeView\">\n <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n </ng-container>\n </section>\n\n <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n <ng-container *ngIf=\"isDefaultView\">\n <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n <igx-days-view\n #days\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [selection]=\"selection\"\n [locale]=\"locale\"\n [value]=\"value\"\n [(activeDate)]=\"activeDate\"\n [(previewRangeDate)]=\"previewRangeDate\"\n [viewDate]=\"i | IgxGetViewDate: viewDate\"\n [weekStart]=\"weekStart\"\n [formatOptions]=\"formatOptions\"\n [formatViews]=\"formatViews\"\n [disabledDates]=\"disabledDates\"\n [specialDates]=\"specialDates\"\n [style.--calendar-row-start]=\"(i + 1) * 2\"\n [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [showActiveDay]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (dateSelected)=\"handleDateSelection($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-days-view>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isYearView\">\n <igx-months-view\n #months\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [date]=\"viewDate\"\n [locale]=\"locale\"\n [formatView]=\"formatViews.month\"\n [monthFormat]=\"formatOptions.month\"\n [showActive]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (pageChanged)=\"updateYear($event)\"\n (activeDateChanged)=\"updateActiveDescendant($event)\"\n (selected)=\"changeMonth($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-months-view>\n </ng-container>\n\n <ng-container *ngIf=\"isDecadeView\">\n <igx-years-view\n #decade\n role=\"rowgroup\"\n [tabIndex]=\"-1\"\n [date]=\"viewDate\"\n [locale]=\"locale\"\n [formatView]=\"formatViews.year\"\n [yearFormat]=\"formatOptions.year\"\n [showActive]=\"showActiveDay\"\n [standalone]=\"false\"\n (swiperight)=\"previousPage()\"\n (swipeleft)=\"nextPage()\"\n (pageChanged)=\"updateYear($event)\"\n (activeDateChanged)=\"updateActiveDescendant($event)\"\n (selected)=\"changeYear($event)\"\n (mousedown)=\"$event.preventDefault()\">\n </igx-years-view>\n </ng-container>\n </section>\n</div>\n" }]
|
|
33281
33298
|
}], propDecorators: { wrapper: [{
|
|
33282
33299
|
type: ViewChild,
|
|
33283
33300
|
args: ["wrapper"]
|
|
@@ -33722,7 +33739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
33722
33739
|
},
|
|
33723
33740
|
], selector: "igx-month-picker", standalone: true, imports: [
|
|
33724
33741
|
NgIf,
|
|
33725
|
-
NgStyle,
|
|
33726
33742
|
NgTemplateOutlet,
|
|
33727
33743
|
DatePipe,
|
|
33728
33744
|
IgxIconComponent,
|
|
@@ -41382,6 +41398,7 @@ class IgxDialogComponent {
|
|
|
41382
41398
|
const eventArgs = { dialog: this, event: null, cancel: false };
|
|
41383
41399
|
this.opening.emit(eventArgs);
|
|
41384
41400
|
if (!eventArgs.cancel) {
|
|
41401
|
+
overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
|
|
41385
41402
|
this.toggleRef.open(overlaySettings);
|
|
41386
41403
|
this.isOpenChange.emit(true);
|
|
41387
41404
|
if (!this.leftButtonLabel && !this.rightButtonLabel) {
|
|
@@ -50435,7 +50452,7 @@ class IgxExcelStyleHeaderComponent {
|
|
|
50435
50452
|
}
|
|
50436
50453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
|
|
50437
50454
|
type: Component,
|
|
50438
|
-
args: [{ selector: 'igx-excel-style-header', standalone: true, imports: [NgIf,
|
|
50455
|
+
args: [{ selector: 'igx-excel-style-header', standalone: true, imports: [NgIf, NgClass, IgxIconComponent, IgxIconButtonDirective], template: "<header *ngIf=\"esf.column\"\n class=\"igx-excel-filter__menu-header\">\n <h4>{{ esf.column.header || esf.column.field }}</h4>\n <div class=\"igx-excel-filter__menu-header-actions\">\n <button *ngIf=\"showSelecting\"\n type=\"button\"\n igxIconButton=\"flat\"\n (click)=\"esf.onSelect()\"\n [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n >\n <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n </button>\n <button *ngIf=\"showPinning\"\n type=\"button\"\n igxIconButton=\"flat\"\n (click)=\"esf.onPin()\"\n [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n >\n <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n </button>\n <button *ngIf=\"showHiding\"\n type=\"button\"\n igxIconButton=\"flat\"\n (click)=\"esf.onHideToggle()\"\n [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n >\n <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n </button>\n </div>\n</header>\n" }]
|
|
50439
50456
|
}], ctorParameters: () => [{ type: BaseFilteringComponent }], propDecorators: { showPinning: [{
|
|
50440
50457
|
type: Input,
|
|
50441
50458
|
args: [{ transform: booleanAttribute }]
|
|
@@ -73288,7 +73305,7 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
|
|
|
73288
73305
|
}
|
|
73289
73306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
|
|
73290
73307
|
type: Component,
|
|
73291
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
73308
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n <igx-icon\n family=\"default\"\n [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <igx-pivot-row-dimension-header\n role=\"columnheader\"\n class=\"igx-grid-th--fw\"\n [id]=\"grid.id + '_' + column.field\"\n [ngClass]=\"column.headerClasses\"\n [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n (pointerdown)=\"pointerdown($event)\"\n [igxColumnMovingDrop]=\"column\"\n [column]=\"column\"\n (keydown)=\"grid.navigation.headerNavigation($event)\"\n >\n </igx-pivot-row-dimension-header>\n <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n [igxPivotResizeHandle]=\"column\"\n [igxPivotResizeHandleHeader]=\"this\"\n [attr.draggable]=\"false\"\n [style.cursor]=\"colResizingService.resizeCursor\">\n </span>\n <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
|
|
73292
73309
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
73293
73310
|
type: Inject,
|
|
73294
73311
|
args: [IGX_GRID_BASE]
|
|
@@ -74478,7 +74495,7 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
|
|
|
74478
74495
|
}
|
|
74479
74496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
|
|
74480
74497
|
type: Component,
|
|
74481
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
74498
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n <igx-icon\n family=\"default\"\n [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n <igx-pivot-row-dimension-header\n role=\"columnheader\"\n class=\"igx-grid-th--fw\"\n [id]=\"grid.id + '_' + column.field\"\n [ngClass]=\"column.headerClasses\"\n [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n [igxColumnMovingDrag]=\"column\"\n [ghostHost]=\"grid.outlet.nativeElement\"\n [attr.droppable]=\"true\"\n (pointerdown)=\"pointerdown($event)\"\n [igxColumnMovingDrop]=\"column\"\n [column]=\"column\"\n (keydown)=\"grid.navigation.headerNavigation($event)\"\n >\n </igx-pivot-row-dimension-header>\n <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n [igxPivotResizeHandle]=\"column\"\n [igxPivotResizeHandleHeader]=\"this\"\n [attr.draggable]=\"false\"\n [style.cursor]=\"colResizingService.resizeCursor\">\n </span>\n <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
|
|
74482
74499
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
74483
74500
|
type: Inject,
|
|
74484
74501
|
args: [IGX_GRID_BASE]
|
|
@@ -75666,8 +75683,7 @@ class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
|
|
|
75666
75683
|
}
|
|
75667
75684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowDimensionMrlRowComponent, decorators: [{
|
|
75668
75685
|
type: Component,
|
|
75669
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', standalone: true, imports: [
|
|
75670
|
-
IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging], template: "<ng-template ngFor let-cell let-cellIndex=\"index\" [ngForOf]=\"rowGroup\n | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger\">\n <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\"\n [grid]=\"grid\"\n [dimension]=\"cell.rootDimension\"\n [rootDimension]=\"cell.rootDimension\"\n [rowIndex]=\"rowIndex\"\n [colIndex]=\"cellIndex\"\n [rowData]=\"cell.records[0]\"\n [width]=\"rowDimensionWidthCombined(cell.dimensions)\"\n [layout]=\"{\n rowStart: cell.rowStart,\n rowEnd: cell.rowStart + cell.rowSpan,\n colStart: cell.colStart,\n colEnd: cell.colStart + cell.colSpan,\n columnVisibleIndex: cellIndex\n }\">\n </igx-pivot-row-dimension-content>\n</ng-template>\n" }]
|
|
75686
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', standalone: true, imports: [NgFor, IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging], template: "<ng-template ngFor let-cell let-cellIndex=\"index\" [ngForOf]=\"rowGroup\n | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger\">\n <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\"\n [grid]=\"grid\"\n [dimension]=\"cell.rootDimension\"\n [rootDimension]=\"cell.rootDimension\"\n [rowIndex]=\"rowIndex\"\n [colIndex]=\"cellIndex\"\n [rowData]=\"cell.records[0]\"\n [width]=\"rowDimensionWidthCombined(cell.dimensions)\"\n [layout]=\"{\n rowStart: cell.rowStart,\n rowEnd: cell.rowStart + cell.rowSpan,\n colStart: cell.colStart,\n colEnd: cell.colStart + cell.colSpan,\n columnVisibleIndex: cellIndex\n }\">\n </igx-pivot-row-dimension-content>\n</ng-template>\n" }]
|
|
75671
75687
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
75672
75688
|
type: Inject,
|
|
75673
75689
|
args: [IGX_GRID_BASE]
|
|
@@ -78768,7 +78784,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
|
|
|
78768
78784
|
}
|
|
78769
78785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
|
|
78770
78786
|
type: Component,
|
|
78771
|
-
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective,
|
|
78787
|
+
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n class=\"igx-grid-toolbar__adv-filter\">\n <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n <span #ref>\n <ng-content></ng-content>\n </span>\n <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n <span *ngIf=\"!ref.textContent.trim()\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n" }]
|
|
78772
78788
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
78773
78789
|
type: Inject,
|
|
78774
78790
|
args: [IgxToolbarToken]
|
|
@@ -79129,7 +79145,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
|
|
|
79129
79145
|
}
|
|
79130
79146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
|
|
79131
79147
|
type: Component,
|
|
79132
|
-
args: [{ selector: 'igx-grid-toolbar-exporter', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective,
|
|
79148
|
+
args: [{ selector: 'igx-grid-toolbar-exporter', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective], template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n <span #ref>\n <ng-content></ng-content>\n </span>\n <span *ngIf=\"!ref.textContent.trim()\">\n {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n </span>\n <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n <span #excel>\n <ng-content select=[excelText],excel-text></ng-content>\n </span>\n <excel-text *ngIf=\"!excel.childNodes.length\">\n {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n </excel-text>\n </li>\n\n <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n <span #csv>\n <ng-content select=[csvText],csv-text></ng-content>\n </span>\n <csv-text *ngIf=\"!csv.childNodes.length\">\n {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n </li>\n </ul>\n</div>\n" }]
|
|
79133
79149
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
79134
79150
|
type: Inject,
|
|
79135
79151
|
args: [IgxToolbarToken]
|
|
@@ -79687,7 +79703,7 @@ class IgxPageSizeSelectorComponent {
|
|
|
79687
79703
|
}
|
|
79688
79704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
|
|
79689
79705
|
type: Component,
|
|
79690
|
-
args: [{ selector: 'igx-page-size', standalone: true, imports: [IgxSelectComponent, FormsModule,
|
|
79706
|
+
args: [{ selector: 'igx-page-size', standalone: true, imports: [IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n <igx-select-item [value]=\"val\" *ngFor=\"let val of paginator.selectOptions\">\n {{ val }}\n </igx-select-item>\n </igx-select>\n</div>\n" }]
|
|
79691
79707
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79692
79708
|
type: Host
|
|
79693
79709
|
}] }], propDecorators: { cssClass: [{
|
|
@@ -79712,7 +79728,7 @@ class IgxPageNavigationComponent {
|
|
|
79712
79728
|
}
|
|
79713
79729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
|
|
79714
79730
|
type: Component,
|
|
79715
|
-
args: [{ selector: 'igx-page-nav', standalone: true, imports: [
|
|
79731
|
+
args: [{ selector: 'igx-page-nav', standalone: true, imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.paginate(0)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n [disabled]=\"paginator.isFirstPage\"\n [attr.aria-disabled]=\"paginator.isFirstPage\"\n (click)=\"paginator.previousPage()\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n <span>{{ paginator.page + 1 }}</span>\n <span\n > {{\n paginator.resourceStrings.igx_paginator_pager_text\n }} </span\n >\n <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.nextPage()\"\n igxRipple\n [igxRippleCentered]=\"true\"\n igxIconButton=\"flat\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n [disabled]=\"paginator.isLastPage\"\n [attr.aria-disabled]=\"paginator.isLastPage\"\n (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n igxIconButton=\"flat\"\n igxRipple\n [igxRippleCentered]=\"true\"\n type=\"button\"\n>\n <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
|
|
79716
79732
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79717
79733
|
type: Host
|
|
79718
79734
|
}] }], propDecorators: { cssClass: [{
|