igniteui-angular 19.0.6 → 19.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/igniteui-angular.mjs +46 -24
- 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/lib/combo/combo-add-item.component.d.ts +1 -0
- package/lib/core/styles/components/combo/_combo-theme.scss +2 -1
- package/lib/core/styles/components/input/_input-group-theme.scss +3 -3
- package/package.json +1 -1
- package/styles/igniteui-angular-dark.css +1 -1
- package/styles/igniteui-angular.css +1 -1
- package/styles/igniteui-bootstrap-dark.css +1 -1
- package/styles/igniteui-bootstrap-light.css +1 -1
- package/styles/igniteui-dark-green.css +1 -1
- package/styles/igniteui-fluent-dark-excel.css +1 -1
- package/styles/igniteui-fluent-dark-word.css +1 -1
- package/styles/igniteui-fluent-dark.css +1 -1
- package/styles/igniteui-fluent-light-excel.css +1 -1
- package/styles/igniteui-fluent-light-word.css +1 -1
- package/styles/igniteui-fluent-light.css +1 -1
- package/styles/igniteui-indigo-dark.css +1 -1
- package/styles/igniteui-indigo-light.css +1 -1
- package/styles/maps/igniteui-angular-dark.css.map +1 -1
- package/styles/maps/igniteui-angular.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
- package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
- package/styles/maps/igniteui-dark-green.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-dark.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
- package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
- package/styles/maps/igniteui-fluent-light.css.map +1 -1
- package/styles/maps/igniteui-indigo-dark.css.map +1 -1
- package/styles/maps/igniteui-indigo-light.css.map +1 -1
|
@@ -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,
|
|
@@ -38452,6 +38468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
38452
38468
|
* @hidden
|
|
38453
38469
|
*/
|
|
38454
38470
|
class IgxComboAddItemComponent extends IgxComboItemComponent {
|
|
38471
|
+
get isDropDownItem() {
|
|
38472
|
+
return false;
|
|
38473
|
+
}
|
|
38455
38474
|
get selected() {
|
|
38456
38475
|
return false;
|
|
38457
38476
|
}
|
|
@@ -38462,7 +38481,7 @@ class IgxComboAddItemComponent extends IgxComboItemComponent {
|
|
|
38462
38481
|
this.comboAPI.add_custom_item();
|
|
38463
38482
|
}
|
|
38464
38483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
38465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
38484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
38466
38485
|
}
|
|
38467
38486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
|
|
38468
38487
|
type: Component,
|
|
@@ -38470,9 +38489,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
38470
38489
|
selector: 'igx-combo-add-item',
|
|
38471
38490
|
template: '<ng-content></ng-content>',
|
|
38472
38491
|
providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }],
|
|
38473
|
-
standalone: true
|
|
38474
38492
|
}]
|
|
38475
|
-
}]
|
|
38493
|
+
}], propDecorators: { isDropDownItem: [{
|
|
38494
|
+
type: HostBinding,
|
|
38495
|
+
args: ['class.igx-drop-down__item']
|
|
38496
|
+
}] } });
|
|
38476
38497
|
|
|
38477
38498
|
/** @hidden */
|
|
38478
38499
|
class IgxComboDropDownComponent extends IgxDropDownComponent {
|
|
@@ -41333,6 +41354,7 @@ class IgxDialogComponent {
|
|
|
41333
41354
|
const eventArgs = { dialog: this, event: null, cancel: false };
|
|
41334
41355
|
this.opening.emit(eventArgs);
|
|
41335
41356
|
if (!eventArgs.cancel) {
|
|
41357
|
+
overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
|
|
41336
41358
|
this.toggleRef.open(overlaySettings);
|
|
41337
41359
|
this.isOpenChange.emit(true);
|
|
41338
41360
|
if (!this.leftButtonLabel && !this.rightButtonLabel) {
|
|
@@ -50404,7 +50426,7 @@ class IgxExcelStyleHeaderComponent {
|
|
|
50404
50426
|
}
|
|
50405
50427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
|
|
50406
50428
|
type: Component,
|
|
50407
|
-
args: [{ selector: 'igx-excel-style-header', imports: [NgIf,
|
|
50429
|
+
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
50430
|
}], ctorParameters: () => [{ type: BaseFilteringComponent }], propDecorators: { showPinning: [{
|
|
50409
50431
|
type: Input,
|
|
50410
50432
|
args: [{ transform: booleanAttribute }]
|
|
@@ -73278,7 +73300,7 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
|
|
|
73278
73300
|
}
|
|
73279
73301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
|
|
73280
73302
|
type: Component,
|
|
73281
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
73303
|
+
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
73304
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
73283
73305
|
type: Inject,
|
|
73284
73306
|
args: [IGX_GRID_BASE]
|
|
@@ -74468,7 +74490,7 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
|
|
|
74468
74490
|
}
|
|
74469
74491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
|
|
74470
74492
|
type: Component,
|
|
74471
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective,
|
|
74493
|
+
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
74494
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
74473
74495
|
type: Inject,
|
|
74474
74496
|
args: [IGX_GRID_BASE]
|
|
@@ -75656,8 +75678,7 @@ class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
|
|
|
75656
75678
|
}
|
|
75657
75679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionMrlRowComponent, decorators: [{
|
|
75658
75680
|
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" }]
|
|
75681
|
+
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
75682
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
75662
75683
|
type: Inject,
|
|
75663
75684
|
args: [IGX_GRID_BASE]
|
|
@@ -78758,7 +78779,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
|
|
|
78758
78779
|
}
|
|
78759
78780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
|
|
78760
78781
|
type: Component,
|
|
78761
|
-
args: [{ selector: 'igx-grid-toolbar-advanced-filtering', imports: [IgxButtonDirective, IgxRippleDirective,
|
|
78782
|
+
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
78783
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
78763
78784
|
type: Inject,
|
|
78764
78785
|
args: [IgxToolbarToken]
|
|
@@ -79119,7 +79140,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
|
|
|
79119
79140
|
}
|
|
79120
79141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
|
|
79121
79142
|
type: Component,
|
|
79122
|
-
args: [{ selector: 'igx-grid-toolbar-exporter', imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective,
|
|
79143
|
+
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
79144
|
}], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
|
|
79124
79145
|
type: Inject,
|
|
79125
79146
|
args: [IgxToolbarToken]
|
|
@@ -79677,7 +79698,7 @@ class IgxPageSizeSelectorComponent {
|
|
|
79677
79698
|
}
|
|
79678
79699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
|
|
79679
79700
|
type: Component,
|
|
79680
|
-
args: [{ selector: 'igx-page-size', imports: [IgxSelectComponent, FormsModule,
|
|
79701
|
+
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
79702
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79682
79703
|
type: Host
|
|
79683
79704
|
}] }], propDecorators: { cssClass: [{
|
|
@@ -79702,7 +79723,7 @@ class IgxPageNavigationComponent {
|
|
|
79702
79723
|
}
|
|
79703
79724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
|
|
79704
79725
|
type: Component,
|
|
79705
|
-
args: [{ selector: 'igx-page-nav', imports: [
|
|
79726
|
+
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
79727
|
}], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
|
|
79707
79728
|
type: Host
|
|
79708
79729
|
}] }], propDecorators: { cssClass: [{
|
|
@@ -79815,6 +79836,7 @@ const IGX_GRID_DIRECTIVES = [
|
|
|
79815
79836
|
|
|
79816
79837
|
/* blazorIndirectRender
|
|
79817
79838
|
blazorComponent */
|
|
79839
|
+
/* wcElementTag: igc-pivot-data-selector */
|
|
79818
79840
|
/**
|
|
79819
79841
|
* Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI
|
|
79820
79842
|
*
|