igniteui-angular 17.2.24 → 17.2.25
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/combo/combo.common.mjs +8 -17
- package/esm2022/lib/combo/combo.component.mjs +3 -3
- package/esm2022/lib/grids/filtering/excel-style/excel-style-filtering.component.mjs +14 -1
- package/esm2022/lib/navigation-drawer/navigation-drawer.component.mjs +3 -3
- package/esm2022/lib/query-builder/query-builder.component.mjs +18 -3
- package/esm2022/lib/slider/slider.component.mjs +4 -4
- package/fesm2022/igniteui-angular.mjs +44 -25
- package/fesm2022/igniteui-angular.mjs.map +1 -1
- package/lib/combo/combo.common.d.ts +1 -3
- package/lib/core/styles/components/dialog/_dialog-theme.scss +5 -12
- package/lib/core/styles/components/drop-down/_drop-down-theme.scss +10 -4
- package/lib/core/styles/typography/_bootstrap.scss +3 -3
- package/lib/core/styles/typography/_fluent.scss +9 -2
- package/lib/grids/filtering/excel-style/excel-style-filtering.component.d.ts +1 -0
- 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
|
@@ -35691,17 +35691,11 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
35691
35691
|
return;
|
|
35692
35692
|
}
|
|
35693
35693
|
const selection = this.selectionService.get(this._id);
|
|
35694
|
+
this.selectionService.clear(this._id);
|
|
35694
35695
|
this._id = value;
|
|
35695
35696
|
if (selection) {
|
|
35696
35697
|
this.selectionService.set(this._id, selection);
|
|
35697
35698
|
}
|
|
35698
|
-
if (this.dropdown?.open) {
|
|
35699
|
-
this.dropdown.close();
|
|
35700
|
-
}
|
|
35701
|
-
if (this.inputGroup?.isFocused) {
|
|
35702
|
-
this.inputGroup.element.nativeElement.blur();
|
|
35703
|
-
this.inputGroup.isFocused = false;
|
|
35704
|
-
}
|
|
35705
35699
|
}
|
|
35706
35700
|
/**
|
|
35707
35701
|
* Configures the drop down list height
|
|
@@ -36571,13 +36565,14 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
36571
36565
|
if (!e.event) {
|
|
36572
36566
|
this.comboInput?.nativeElement.focus();
|
|
36573
36567
|
}
|
|
36568
|
+
else {
|
|
36569
|
+
this._onTouchedCallback();
|
|
36570
|
+
this.updateValidity();
|
|
36571
|
+
}
|
|
36574
36572
|
}
|
|
36575
36573
|
/** @hidden @internal */
|
|
36576
36574
|
handleClosed() {
|
|
36577
36575
|
this.closed.emit({ owner: this });
|
|
36578
|
-
if (this.comboInput.nativeElement !== document.activeElement) {
|
|
36579
|
-
this.validateComboState();
|
|
36580
|
-
}
|
|
36581
36576
|
}
|
|
36582
36577
|
/** @hidden @internal */
|
|
36583
36578
|
handleKeyDown(event) {
|
|
@@ -36611,14 +36606,10 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
36611
36606
|
onBlur() {
|
|
36612
36607
|
if (this.collapsed) {
|
|
36613
36608
|
this._onTouchedCallback();
|
|
36614
|
-
this.
|
|
36609
|
+
this.updateValidity();
|
|
36615
36610
|
}
|
|
36616
36611
|
}
|
|
36617
36612
|
/** @hidden @internal */
|
|
36618
|
-
onFocus() {
|
|
36619
|
-
this._onTouchedCallback();
|
|
36620
|
-
}
|
|
36621
|
-
/** @hidden @internal */
|
|
36622
36613
|
setActiveDescendant() {
|
|
36623
36614
|
this.activeDescendant = this.dropdown.focusedItem?.id || '';
|
|
36624
36615
|
}
|
|
@@ -36626,7 +36617,7 @@ class IgxComboBaseDirective extends DisplayDensityBase {
|
|
|
36626
36617
|
toggleCaseSensitive() {
|
|
36627
36618
|
this.filteringOptions = Object.assign({}, this.filteringOptions, { caseSensitive: !this.filteringOptions.caseSensitive });
|
|
36628
36619
|
}
|
|
36629
|
-
|
|
36620
|
+
updateValidity() {
|
|
36630
36621
|
if (this.ngControl && this.ngControl.invalid) {
|
|
36631
36622
|
this.valid = IgxInputState.INVALID;
|
|
36632
36623
|
}
|
|
@@ -37527,7 +37518,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
|
|
|
37527
37518
|
IgxComboAPIService,
|
|
37528
37519
|
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
|
|
37529
37520
|
{ provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
|
|
37530
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\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\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\"
|
|
37521
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\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\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($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 <igx-suffix class=\"igx-combo__toggle-button\">\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</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\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 <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 [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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<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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { 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", "igxLabel"], outputs: ["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" }] }); }
|
|
37531
37522
|
}
|
|
37532
37523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxComboComponent, decorators: [{
|
|
37533
37524
|
type: Component,
|
|
@@ -37553,7 +37544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
37553
37544
|
IgxRippleDirective,
|
|
37554
37545
|
IgxComboFilteringPipe,
|
|
37555
37546
|
IgxComboGroupingPipe
|
|
37556
|
-
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\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\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\"
|
|
37547
|
+
], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\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\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($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 <igx-suffix class=\"igx-combo__toggle-button\">\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</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" >\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"></igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\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\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\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 <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 [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [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<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>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
|
|
37557
37548
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
|
|
37558
37549
|
type: Optional
|
|
37559
37550
|
}, {
|
|
@@ -47238,10 +47229,25 @@ class IgxQueryBuilderComponent extends DisplayDensityBase {
|
|
|
47238
47229
|
*/
|
|
47239
47230
|
deleteGroup() {
|
|
47240
47231
|
const selectedGroup = this.contextualGroup;
|
|
47241
|
-
|
|
47232
|
+
let parent = selectedGroup.parent;
|
|
47242
47233
|
if (parent) {
|
|
47243
|
-
|
|
47234
|
+
let index = parent.children.indexOf(selectedGroup);
|
|
47244
47235
|
parent.children.splice(index, 1);
|
|
47236
|
+
if (parent.children.length === 0) {
|
|
47237
|
+
let childGroup = parent;
|
|
47238
|
+
parent = parent.parent;
|
|
47239
|
+
while (parent && parent.children.length === 1) {
|
|
47240
|
+
childGroup = parent;
|
|
47241
|
+
parent = parent.parent;
|
|
47242
|
+
}
|
|
47243
|
+
if (parent) {
|
|
47244
|
+
index = parent.children.indexOf(childGroup);
|
|
47245
|
+
parent.children.splice(index, 1);
|
|
47246
|
+
}
|
|
47247
|
+
else {
|
|
47248
|
+
this.rootGroup = null;
|
|
47249
|
+
}
|
|
47250
|
+
}
|
|
47245
47251
|
}
|
|
47246
47252
|
else {
|
|
47247
47253
|
this.rootGroup = null;
|
|
@@ -53485,6 +53491,11 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
|
|
|
53485
53491
|
renderValues() {
|
|
53486
53492
|
this.filterValues = this.generateFilterValues();
|
|
53487
53493
|
this.generateListData();
|
|
53494
|
+
this.expressionsList.forEach(expr => {
|
|
53495
|
+
if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
|
|
53496
|
+
this.modifyExpression(expr);
|
|
53497
|
+
}
|
|
53498
|
+
});
|
|
53488
53499
|
}
|
|
53489
53500
|
generateFilterValues() {
|
|
53490
53501
|
const formatValue = (value) => {
|
|
@@ -53510,6 +53521,14 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
|
|
|
53510
53521
|
const filterValues = new Set(this.expressionsList.reduce(processExpression, []));
|
|
53511
53522
|
return filterValues;
|
|
53512
53523
|
}
|
|
53524
|
+
modifyExpression(expr) {
|
|
53525
|
+
const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value) => value.toLowerCase()));
|
|
53526
|
+
this.grid.data.forEach(item => {
|
|
53527
|
+
if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
|
|
53528
|
+
expr.expression.searchVal.add(item[this.column.field]);
|
|
53529
|
+
}
|
|
53530
|
+
});
|
|
53531
|
+
}
|
|
53513
53532
|
generateListData() {
|
|
53514
53533
|
this.listData = new Array();
|
|
53515
53534
|
const shouldUpdateSelection = this.areExpressionsSelectable();
|
|
@@ -83386,11 +83405,11 @@ class IgxNavigationDrawerComponent {
|
|
|
83386
83405
|
});
|
|
83387
83406
|
}
|
|
83388
83407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [{ token: ElementRef }, { token: IgxNavigationService, optional: true }, { token: i0.Renderer2 }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
83389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "style.flexBasis": "this.flexWidth", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<
|
|
83408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.4", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "style.flexBasis": "this.flexWidth", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
83390
83409
|
}
|
|
83391
83410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
|
|
83392
83411
|
type: Component,
|
|
83393
|
-
args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', standalone: true, imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<
|
|
83412
|
+
args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', standalone: true, imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
83394
83413
|
}], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
|
|
83395
83414
|
type: Inject,
|
|
83396
83415
|
args: [ElementRef]
|
|
@@ -85223,12 +85242,12 @@ class IgxSliderComponent {
|
|
|
85223
85242
|
normalizeByStep(value) {
|
|
85224
85243
|
if (this.isRange) {
|
|
85225
85244
|
this._value = {
|
|
85226
|
-
lower: value.lower
|
|
85227
|
-
upper: value.upper
|
|
85245
|
+
lower: Math.floor(value.lower / this.step) * this.step,
|
|
85246
|
+
upper: Math.floor(value.upper / this.step) * this.step
|
|
85228
85247
|
};
|
|
85229
85248
|
}
|
|
85230
85249
|
else {
|
|
85231
|
-
this._value = value
|
|
85250
|
+
this._value = Math.floor(value / this.step) * this.step;
|
|
85232
85251
|
}
|
|
85233
85252
|
}
|
|
85234
85253
|
updateTrack() {
|