igniteui-angular 16.1.12 → 16.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/date-picker/date-picker.component.mjs +3 -3
- package/esm2022/lib/grids/hierarchical-grid/hierarchical-grid.component.mjs +7 -3
- package/esm2022/lib/simple-combo/simple-combo.component.mjs +3 -3
- package/esm2022/lib/stepper/step/step.component.mjs +2 -2
- package/esm2022/lib/time-picker/time-picker.component.mjs +3 -3
- package/fesm2022/igniteui-angular.mjs +11 -8
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/lib/grids/hierarchical-grid/hierarchical-grid.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -39497,7 +39497,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
|
|
|
39497
39497
|
IgxComboAPIService,
|
|
39498
39498
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
39499
39499
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
39500
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [
|
|
39500
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n {{ clearIcon }}\n </igx-icon>\n </igx-suffix>\n\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ toggleIcon }}\n </igx-icon>\n </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n [attr.aria-activedescendant]=\"this.activeDescendant\"\n (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
|
|
39501
39501
|
}
|
|
39502
39502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
|
|
39503
39503
|
type: Component,
|
|
@@ -39505,7 +39505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
39505
39505
|
IgxComboAPIService,
|
|
39506
39506
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
|
|
39507
39507
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
|
|
39508
|
-
], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [
|
|
39508
|
+
], standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, NgIf, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\">\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n\n <input #comboInput igxInput [value]=\"displayValue[0]\" role=\"combobox\"\n aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"selection.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n (click)=\"handleClear($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\">\n {{ clearIcon }}\n </igx-icon>\n </igx-suffix>\n\n <igx-suffix *ngIf=\"showSearchCaseIcon\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n (click)=\"toggleCaseSensitive()\">\n </igx-icon>\n </igx-suffix>\n\n <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\">\n {{ toggleIcon }}\n </igx-icon>\n </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n [attr.aria-activedescendant]=\"this.activeDescendant\"\n (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
|
|
39509
39509
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
|
|
39510
39510
|
type: Optional
|
|
39511
39511
|
}, {
|
|
@@ -40607,7 +40607,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
|
|
|
40607
40607
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: "hideOutsideDays", displayMonthsCount: "displayMonthsCount", showWeekNumbers: "showWeekNumbers", formatter: "formatter", headerOrientation: "headerOrientation", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: "spinLoop", spinDelta: "spinDelta", outlet: "outlet", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: "readOnly" }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" } }, providers: [
|
|
40608
40608
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
|
|
40609
40609
|
{ provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
|
|
40610
|
-
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\"
|
|
40610
|
+
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: IgxCalendarHeaderTemplateDirective, descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: IgxCalendarSubheaderTemplateDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "labelDirective", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\">\n <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n <igx-icon [title]=\"value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n </igx-prefix>\n\n <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n <igx-suffix *ngIf=\"!clearComponents.length && value\" (click)=\"clear()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }] }); }
|
|
40611
40611
|
}
|
|
40612
40612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
|
|
40613
40613
|
type: Component,
|
|
@@ -40623,7 +40623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
40623
40623
|
IgxDateTimeEditorDirective,
|
|
40624
40624
|
IgxTextSelectionDirective,
|
|
40625
40625
|
IgxSuffixDirective
|
|
40626
|
-
], template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\"
|
|
40626
|
+
], template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\">\n <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n <igx-icon [title]=\"value\n ? pickerResourceStrings.igx_date_picker_change_date\n : pickerResourceStrings.igx_date_picker_choose_date\">today</igx-icon>\n </igx-prefix>\n\n <input class=\"igx-date-picker__input-date\" [displayValuePipe]=\"formatter ? displayValue : null\" igxInput\n [igxDateTimeEditor]=\"inputFormat\" [displayFormat]=\"displayFormat\"\n [minValue]=\"minValue\" [maxValue]=\"maxValue\" [spinDelta]=\"spinDelta\" [spinLoop]=\"spinLoop\"\n [disabled]=\"disabled\" [placeholder]=\"placeholder\" [readonly]=\"!isDropdown || readOnly\"\n [igxTextSelection]=\"isDropdown && !readOnly\" [locale]=\"locale\" [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-labelledby]=\"label?.id\" aria-haspopup=\"dialog\" aria-autocomplete=\"none\" role=\"combobox\">\n\n <igx-suffix *ngIf=\"!clearComponents.length && value\" (click)=\"clear()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n", styles: [":host{display:block}\n"] }]
|
|
40627
40627
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
40628
40628
|
type: Inject,
|
|
40629
40629
|
args: [LOCALE_ID]
|
|
@@ -47984,7 +47984,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
|
|
|
47984
47984
|
useExisting: IgxTimePickerComponent,
|
|
47985
47985
|
multi: true
|
|
47986
47986
|
}
|
|
47987
|
-
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "timePickerActionsDirective", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "secondsList", first: true, predicate: ["secondsList"], descendants: true }, { propertyName: "ampmList", first: true, predicate: ["ampmList"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective }, { propertyName: "_inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }, { propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\"
|
|
47987
|
+
], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "timePickerActionsDirective", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "clearComponents", predicate: IgxPickerClearComponent }], viewQueries: [{ propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "secondsList", first: true, predicate: ["secondsList"], descendants: true }, { propertyName: "ampmList", first: true, predicate: ["ampmList"], descendants: true }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective }, { propertyName: "_inputGroup", first: true, predicate: IgxInputGroupComponent, descendants: true }, { propertyName: "dateTimeEditor", first: true, predicate: IgxDateTimeEditorDirective, descendants: true, static: true }, { propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\">\n <input [displayValuePipe]=\"formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"inputFormat\"\n type=\"text\" [readonly]=\"!isDropdown || readOnly\" [minValue]=\"minValue\" [maxValue]=\"maxValue\"\n [locale]=\"locale\" [spinDelta]=\"itemsDelta\" [spinLoop]=\"spinLoop\" [placeholder]=\"placeholder\"\n [disabled]=\"disabled\" [displayFormat]=\"displayFormat\"\n [igxTextSelection]=\"isDropdown && !readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"!toggleDirective.collapsed\" [attr.aria-labelledby]=\"label?.id\"\n (click)=\"!isDropdown && toggle()\"/>\n\n <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n <igx-icon [title]=\"value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n </igx-prefix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"showClearButton\" (click)=\"clear(); $event.stopPropagation()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n <div *ngIf=\"cancelButtonLabel || okButtonLabel\" class=\"igx-time-picker__buttons\">\n <button *ngIf=\"cancelButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"cancelButtonClick()\">\n {{cancelButtonLabel}}\n </button>\n <button *ngIf=\"okButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"okButtonClick()\">\n {{okButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n [ngClass]=\"{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}\">\n <div *ngIf=\"!isDropdown\" class=\"igx-time-picker__header\">\n <h2 class=\"igx-time-picker__header-hour\">\n <span>{{ selectedDate | timeFormatPipe }}</span>\n </h2>\n </div>\n <div class=\"igx-time-picker__main\">\n <div class=\"igx-time-picker__body\">\n <div *ngIf=\"showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let hour of hourItems | timeItemPipe:'hour':selectedDate:minDropdownValue:maxDropdownValue\">{{ hour }}</span>\n </div>\n <div *ngIf=\"showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':selectedDate:minDropdownValue:maxDropdownValue\">{{ minute }}</span>\n </div>\n <div *ngIf=\"showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':selectedDate:minDropdownValue:maxDropdownValue\">{{ seconds }}</span>\n </div>\n <div *ngIf=\"showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':selectedDate:minDropdownValue:maxDropdownValue\">{{ ampm }}</span>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxItemListDirective, selector: "[igxItemList]", inputs: ["igxItemList"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxTimeItemDirective, selector: "[igxTimeItem]", inputs: ["igxTimeItem"], exportAs: ["timeItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TimeFormatPipe, name: "timeFormatPipe" }, { kind: "pipe", type: TimeItemPipe, name: "timeItemPipe" }] }); }
|
|
47988
47988
|
}
|
|
47989
47989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxTimePickerComponent, decorators: [{
|
|
47990
47990
|
type: Component,
|
|
@@ -48003,7 +48003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
48003
48003
|
useExisting: IgxTimePickerComponent,
|
|
48004
48004
|
multi: true
|
|
48005
48005
|
}
|
|
48006
|
-
], selector: 'igx-time-picker', standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective, NgIf, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxToggleDirective, NgClass, IgxItemListDirective, NgFor, IgxTimeItemDirective, NgTemplateOutlet, TimeFormatPipe, TimeItemPipe], template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\"
|
|
48006
|
+
], selector: 'igx-time-picker', standalone: true, imports: [IgxInputGroupComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxTextSelectionDirective, NgIf, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, IgxToggleDirective, NgClass, IgxItemListDirective, NgFor, IgxTimeItemDirective, NgTemplateOutlet, TimeFormatPipe, TimeItemPipe], template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\">\n <input [displayValuePipe]=\"formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"inputFormat\"\n type=\"text\" [readonly]=\"!isDropdown || readOnly\" [minValue]=\"minValue\" [maxValue]=\"maxValue\"\n [locale]=\"locale\" [spinDelta]=\"itemsDelta\" [spinLoop]=\"spinLoop\" [placeholder]=\"placeholder\"\n [disabled]=\"disabled\" [displayFormat]=\"displayFormat\"\n [igxTextSelection]=\"isDropdown && !readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"!toggleDirective.collapsed\" [attr.aria-labelledby]=\"label?.id\"\n (click)=\"!isDropdown && toggle()\"/>\n\n <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n <igx-icon [title]=\"value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n </igx-prefix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"showClearButton\" (click)=\"clear(); $event.stopPropagation()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n <div *ngIf=\"cancelButtonLabel || okButtonLabel\" class=\"igx-time-picker__buttons\">\n <button *ngIf=\"cancelButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"cancelButtonClick()\">\n {{cancelButtonLabel}}\n </button>\n <button *ngIf=\"okButtonLabel\" type=\"button\" igxButton=\"flat\" (click)=\"okButtonClick()\">\n {{okButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n [ngClass]=\"{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}\">\n <div *ngIf=\"!isDropdown\" class=\"igx-time-picker__header\">\n <h2 class=\"igx-time-picker__header-hour\">\n <span>{{ selectedDate | timeFormatPipe }}</span>\n </h2>\n </div>\n <div class=\"igx-time-picker__main\">\n <div class=\"igx-time-picker__body\">\n <div *ngIf=\"showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let hour of hourItems | timeItemPipe:'hour':selectedDate:minDropdownValue:maxDropdownValue\">{{ hour }}</span>\n </div>\n <div *ngIf=\"showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':selectedDate:minDropdownValue:maxDropdownValue\">{{ minute }}</span>\n </div>\n <div *ngIf=\"showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':selectedDate:minDropdownValue:maxDropdownValue\">{{ seconds }}</span>\n </div>\n <div *ngIf=\"showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':selectedDate:minDropdownValue:maxDropdownValue\">{{ ampm }}</span>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
48007
48007
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
48008
48008
|
type: Inject,
|
|
48009
48009
|
args: [LOCALE_ID]
|
|
@@ -82960,7 +82960,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
|
|
|
82960
82960
|
IgxForOfSyncService,
|
|
82961
82961
|
IgxForOfScrollSyncService,
|
|
82962
82962
|
IgxRowIslandAPIService
|
|
82963
|
-
], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorComponent, descendants: true }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [activeDescendant]=\"activeDescendant\"\n [width]=\"calcWidth\"\n [pinnedColumnCollection]=\"pinnedColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n <ng-template #pinnedRecordsTemplate>\n <ng-container *ngIf=\"data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n [ngClass]=\"{ 'igx-grid__tr--pinned-bottom': !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n [style.width.px]=\"calcWidth\">\n <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\"\n [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <ng-template\n [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n </ng-template>\n <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n </ng-template>\n <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-hierarchical-grid-row>\n </ng-template>\n\n <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n </igx-hierarchical-grid-row>\n </ng-template>\n <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n }\">\n <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n [data]=\"rowData\" [layout]=\"layout\" #row>\n </igx-child-grid-row>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n </div>\n <div igxToggle #loadingOverlay>\n <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n </igx-circular-bar>\n </div>\n <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n (keydown)=\"navigation.summaryNav($event)\">\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n <ng-content select=\"igx-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator\"></ng-content>\n <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n <span *ngIf=\"showAddButton\">\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n <span *ngIf=\"showAddButton\">\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon role=\"button\" [active]=\"hasExpandedRecords() && hasExpandableChildren\">unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n </ng-container>\n </div>\n</div>\n<ng-template #defaultRowEditText>\n You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82963
|
+
], queries: [{ propertyName: "actionStrip", first: true, predicate: IgxActionStripComponent, read: IgxActionStripComponent }, { propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorComponent, descendants: true }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n [grid]=\"this\"\n [hasMRL]=\"hasColumnLayouts\"\n [activeDescendant]=\"activeDescendant\"\n [width]=\"calcWidth\"\n [pinnedColumnCollection]=\"pinnedColumns\"\n [unpinnedColumnCollection]=\"unpinnedColumns\"\n (keydown.meta.c)=\"copyHandler($event)\"\n (keydown.control.c)=\"copyHandler($event)\"\n (copy)=\"copyHandler($event)\"\n (keydown)=\"navigation.headerNavigation($event)\"\n (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n <div class=\"igx-grid__tbody-content\" tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-left\"></span>\n <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n <ng-template #pinnedRecordsTemplate>\n <ng-container *ngIf=\"data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridAddRow:true:pipeTrigger\n | gridRowPinning:id:true:pipeTrigger\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n [ngClass]=\"{ 'igx-grid__tr--pinned-bottom': !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n [style.width.px]=\"calcWidth\">\n <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n | gridTransaction:id:pipeTrigger\n | visibleColumns:hasVisibleColumns\n | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n | gridAddRow:false:pipeTrigger\n | gridRowPinning:id:false:pipeTrigger\"\n [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n <ng-template\n [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n </ng-template>\n <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n </ng-template>\n <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n </igx-hierarchical-grid-row>\n </ng-template>\n\n <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n </igx-hierarchical-grid-row>\n </ng-template>\n <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n [ngClass]=\"{\n 'igx-grid__tr-container': true,\n 'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n }\">\n <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n [data]=\"rowData\" [layout]=\"layout\" #row>\n </igx-child-grid-row>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n </div>\n <div igxToggle #loadingOverlay>\n <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n </igx-circular-bar>\n </div>\n <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n </div>\n <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n </div>\n <div class=\"igx-grid__addrow-snackbar\">\n <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n </div>\n\n <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n (keydown)=\"navigation.summaryNav($event)\">\n <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n class=\"igx-grid__summaries\" #summaryRow>\n </igx-grid-summary-row>\n <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n [style.width.px]=\"scrollSize\"></div>\n </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n </ng-template>\n </div>\n <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n <ng-content select=\"igx-grid-footer\"></ng-content>\n <ng-content select=\"igx-paginator\"></ng-content>\n <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyFilteredGridMessage}}</span>\n <span *ngIf=\"showAddButton\">\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n <span class=\"igx-grid__tbody-message\" role=\"cell\">\n <span>{{emptyGridMessage}}</span>\n <span *ngIf=\"showAddButton\">\n <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n </span>\n </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n <button type=\"button\" igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n {{resourceStrings.igx_grid_add_row_label}}\n </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n <div class=\"igx-grid__loading\">\n <igx-circular-bar [indeterminate]=\"true\">\n </igx-circular-bar>\n </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n <igx-icon role=\"button\" [active]=\"hasExpandedRecords() && hasExpandableChildren\">unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n <div [className]=\"bannerClass\">\n <ng-container\n *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n </ng-container>\n </div>\n</div>\n<ng-template #defaultRowEditText>\n You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n <div class=\"igx-banner__message\">\n <span class=\"igx-banner__text\">\n <ng-container\n *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n </ng-container>\n </span>\n </div>\n <div class=\"igx-banner__actions\">\n <div class=\"igx-banner__row\">\n <ng-container\n *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82964
82964
|
}
|
|
82965
82965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
|
|
82966
82966
|
type: Component,
|
|
@@ -83043,6 +83043,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
83043
83043
|
}], childTemplate: [{
|
|
83044
83044
|
type: ViewChild,
|
|
83045
83045
|
args: ['child_record_template', { read: TemplateRef, static: true }]
|
|
83046
|
+
}], actionStrip: [{
|
|
83047
|
+
type: ContentChild,
|
|
83048
|
+
args: [IgxActionStripComponent, { read: IgxActionStripComponent, descendants: false }]
|
|
83046
83049
|
}], id: [{
|
|
83047
83050
|
type: HostBinding,
|
|
83048
83051
|
args: ['attr.id']
|
|
@@ -89333,7 +89336,7 @@ class IgxStepComponent extends ToggleAnimationPlayer {
|
|
|
89333
89336
|
changeVerticalActiveStep() {
|
|
89334
89337
|
this.stepperService.expand(this);
|
|
89335
89338
|
if (!this.animationSettings.closeAnimation) {
|
|
89336
|
-
this.stepperService.previousActiveStep
|
|
89339
|
+
this.stepperService.previousActiveStep?.openAnimationPlayer?.finish();
|
|
89337
89340
|
}
|
|
89338
89341
|
if (!this.animationSettings.openAnimation) {
|
|
89339
89342
|
this.stepperService.activeStep.closeAnimationPlayer?.finish();
|