igniteui-angular 19.0.6 → 19.0.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.
|
@@ -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';
|
|
@@ -5948,7 +5948,9 @@ class IgxOverlayService {
|
|
|
5948
5948
|
return;
|
|
5949
5949
|
}
|
|
5950
5950
|
if (settings) {
|
|
5951
|
-
|
|
5951
|
+
settings.positionStrategy ??= info.settings.positionStrategy;
|
|
5952
|
+
settings.scrollStrategy ??= info.settings.scrollStrategy;
|
|
5953
|
+
info.settings = { ...info.settings, ...settings };
|
|
5952
5954
|
}
|
|
5953
5955
|
this.updateSize(info);
|
|
5954
5956
|
info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
|
|
@@ -10222,7 +10224,7 @@ class IgxIconComponent {
|
|
|
10222
10224
|
}
|
|
10223
10225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, decorators: [{
|
|
10224
10226
|
type: Component,
|
|
10225
|
-
args: [{ selector: "igx-icon",
|
|
10227
|
+
args: [{ selector: "igx-icon", 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" }]
|
|
10226
10228
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
|
|
10227
10229
|
type: HostBinding,
|
|
10228
10230
|
args: ["class"]
|
|
@@ -24258,7 +24260,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
|
|
|
24258
24260
|
* ```
|
|
24259
24261
|
*/
|
|
24260
24262
|
open(overlaySettings) {
|
|
24261
|
-
const settings =
|
|
24263
|
+
const settings = { ...{}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
|
|
24262
24264
|
this.toggleDirective.open(settings);
|
|
24263
24265
|
this.updateScrollPosition();
|
|
24264
24266
|
}
|
|
@@ -24707,7 +24709,7 @@ class IgxGridActionButtonComponent {
|
|
|
24707
24709
|
}
|
|
24708
24710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
|
|
24709
24711
|
type: Component,
|
|
24710
|
-
args: [{ selector: 'igx-grid-action-button', imports: [NgIf,
|
|
24712
|
+
args: [{ selector: 'igx-grid-action-button', 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" }]
|
|
24711
24713
|
}], propDecorators: { container: [{
|
|
24712
24714
|
type: ViewChild,
|
|
24713
24715
|
args: ['container']
|
|
@@ -27975,7 +27977,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
27975
27977
|
NgIf,
|
|
27976
27978
|
NgFor,
|
|
27977
27979
|
NgTemplateOutlet,
|
|
27978
|
-
IgxButtonDirective,
|
|
27979
27980
|
IgxIconButtonDirective,
|
|
27980
27981
|
IgxRippleDirective,
|
|
27981
27982
|
IgxToggleActionDirective,
|
|
@@ -30559,6 +30560,14 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
|
|
|
30559
30560
|
*/
|
|
30560
30561
|
this._monthFormat = "short";
|
|
30561
30562
|
}
|
|
30563
|
+
/**
|
|
30564
|
+
* @hidden
|
|
30565
|
+
*/
|
|
30566
|
+
onMouseDown() {
|
|
30567
|
+
if (this.tabIndex !== -1) {
|
|
30568
|
+
this.el.nativeElement.focus();
|
|
30569
|
+
}
|
|
30570
|
+
}
|
|
30562
30571
|
/**
|
|
30563
30572
|
* Returns the locale representation of the month in the months view.
|
|
30564
30573
|
*
|
|
@@ -30605,7 +30614,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
|
|
|
30605
30614
|
provide: DAY_INTERVAL_TOKEN,
|
|
30606
30615
|
useValue: "month",
|
|
30607
30616
|
},
|
|
30608
|
-
], 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" }] }); }
|
|
30617
|
+
], 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" }] }); }
|
|
30609
30618
|
}
|
|
30610
30619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
|
|
30611
30620
|
type: Component,
|
|
@@ -30619,7 +30628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
30619
30628
|
provide: DAY_INTERVAL_TOKEN,
|
|
30620
30629
|
useValue: "month",
|
|
30621
30630
|
},
|
|
30622
|
-
], selector: "igx-months-view", imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe
|
|
30631
|
+
], selector: "igx-months-view", 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" }]
|
|
30623
30632
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
30624
30633
|
type: Inject,
|
|
30625
30634
|
args: [DAY_INTERVAL_TOKEN]
|
|
@@ -30743,6 +30752,14 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
|
|
|
30743
30752
|
year: this.yearFormat,
|
|
30744
30753
|
});
|
|
30745
30754
|
}
|
|
30755
|
+
/**
|
|
30756
|
+
* @hidden
|
|
30757
|
+
*/
|
|
30758
|
+
onMouseDown() {
|
|
30759
|
+
if (this.tabIndex !== -1) {
|
|
30760
|
+
this.el.nativeElement.focus();
|
|
30761
|
+
}
|
|
30762
|
+
}
|
|
30746
30763
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxYearsViewComponent, deps: [{ token: i0.ElementRef }, { token: DAY_INTERVAL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30747
30764
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", 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: [
|
|
30748
30765
|
{
|
|
@@ -30754,7 +30771,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
|
|
|
30754
30771
|
provide: DAY_INTERVAL_TOKEN,
|
|
30755
30772
|
useValue: "year",
|
|
30756
30773
|
},
|
|
30757
|
-
], 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"] }] }); }
|
|
30774
|
+
], 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"] }] }); }
|
|
30758
30775
|
}
|
|
30759
30776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
|
|
30760
30777
|
type: Component,
|
|
@@ -30768,7 +30785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
30768
30785
|
provide: DAY_INTERVAL_TOKEN,
|
|
30769
30786
|
useValue: "year",
|
|
30770
30787
|
},
|
|
30771
|
-
], selector: "igx-years-view", 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" }]
|
|
30788
|
+
], selector: "igx-years-view", 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" }]
|
|
30772
30789
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
30773
30790
|
type: Inject,
|
|
30774
30791
|
args: [DAY_INTERVAL_TOKEN]
|
|
@@ -33231,7 +33248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
33231
33248
|
multi: false,
|
|
33232
33249
|
provide: KeyboardNavigationService,
|
|
33233
33250
|
},
|
|
33234
|
-
], selector: 'igx-calendar', 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" }]
|
|
33251
|
+
], selector: 'igx-calendar', 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" }]
|
|
33235
33252
|
}], propDecorators: { wrapper: [{
|
|
33236
33253
|
type: ViewChild,
|
|
33237
33254
|
args: ["wrapper"]
|
|
@@ -33676,7 +33693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
33676
33693
|
},
|
|
33677
33694
|
], selector: "igx-month-picker", imports: [
|
|
33678
33695
|
NgIf,
|
|
33679
|
-
NgStyle,
|
|
33680
33696
|
NgTemplateOutlet,
|
|
33681
33697
|
DatePipe,
|
|
33682
33698
|
IgxIconComponent,
|
|
@@ -41333,6 +41349,7 @@ class IgxDialogComponent {
|
|
|
41333
41349
|
const eventArgs = { dialog: this, event: null, cancel: false };
|
|
41334
41350
|
this.opening.emit(eventArgs);
|
|
41335
41351
|
if (!eventArgs.cancel) {
|
|
41352
|
+
overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
|
|
41336
41353
|
this.toggleRef.open(overlaySettings);
|
|
41337
41354
|
this.isOpenChange.emit(true);
|
|
41338
41355
|
if (!this.leftButtonLabel && !this.rightButtonLabel) {
|
|
@@ -50404,7 +50421,7 @@ class IgxExcelStyleHeaderComponent {
|
|
|
50404
50421
|
}
|
|
50405
50422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
|
|
50406
50423
|
type: Component,
|
|
50407
|
-
args: [{ selector: 'igx-excel-style-header', imports: [NgIf,
|
|
50424
|
+
args: [{ selector: 'igx-excel-style-header', 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" }]
|
|
50408
50425
|
}], ctorParameters: () => [{ type: BaseFilteringComponent }], propDecorators: { showPinning: [{
|
|
50409
50426
|
type: Input,
|
|
50410
50427
|
args: [{ transform: booleanAttribute }]
|
|
@@ -73278,7 +73295,7 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
|
|
|
73278
73295
|
}
|
|
73279
73296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
|
|
73280
73297
|
type: Component,
|
|
73281
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
73298
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', 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" }]
|
|
73282
73299
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
73283
73300
|
type: Inject,
|
|
73284
73301
|
args: [IGX_GRID_BASE]
|
|
@@ -74468,7 +74485,7 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
|
|
|
74468
74485
|
}
|
|
74469
74486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
|
|
74470
74487
|
type: Component,
|
|
74471
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
74488
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', 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" }]
|
|
74472
74489
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
74473
74490
|
type: Inject,
|
|
74474
74491
|
args: [IGX_GRID_BASE]
|
|
@@ -75656,8 +75673,7 @@ class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
|
|
|
75656
75673
|
}
|
|
75657
75674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionMrlRowComponent, decorators: [{
|
|
75658
75675
|
type: Component,
|
|
75659
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', imports: [
|
|
75660
|
-
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" }]
|
|
75676
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', 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" }]
|
|
75661
75677
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
75662
75678
|
type: Inject,
|
|
75663
75679
|
args: [IGX_GRID_BASE]
|
|
@@ -78758,7 +78774,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
|
|
|
78758
78774
|
}
|
|
78759
78775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
|
|
78760
78776
|
type: Component,
|
|
78761
|
-
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', imports: [IgxButtonDirective, IgxRippleDirective,
|
|
78777
|
+
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', 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" }]
|
|
78762
78778
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
78763
78779
|
type: Inject,
|
|
78764
78780
|
args: [IgxToolbarToken]
|
|
@@ -79119,7 +79135,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
|
|
|
79119
79135
|
}
|
|
79120
79136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
|
|
79121
79137
|
type: Component,
|
|
79122
|
-
args: [{ selector: 'igx-grid-toolbar-exporter', imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective,
|
|
79138
|
+
args: [{ selector: 'igx-grid-toolbar-exporter', 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" }]
|
|
79123
79139
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
79124
79140
|
type: Inject,
|
|
79125
79141
|
args: [IgxToolbarToken]
|
|
@@ -79677,7 +79693,7 @@ class IgxPageSizeSelectorComponent {
|
|
|
79677
79693
|
}
|
|
79678
79694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
|
|
79679
79695
|
type: Component,
|
|
79680
|
-
args: [{ selector: 'igx-page-size', imports: [IgxSelectComponent, FormsModule,
|
|
79696
|
+
args: [{ selector: 'igx-page-size', 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" }]
|
|
79681
79697
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79682
79698
|
type: Host
|
|
79683
79699
|
}] }], propDecorators: { cssClass: [{
|
|
@@ -79702,7 +79718,7 @@ class IgxPageNavigationComponent {
|
|
|
79702
79718
|
}
|
|
79703
79719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
|
|
79704
79720
|
type: Component,
|
|
79705
|
-
args: [{ selector: 'igx-page-nav', imports: [
|
|
79721
|
+
args: [{ selector: 'igx-page-nav', 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" }]
|
|
79706
79722
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79707
79723
|
type: Host
|
|
79708
79724
|
}] }], propDecorators: { cssClass: [{
|