igniteui-angular 18.2.3 → 18.2.4

package/fesm2022/igniteui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, DestroyRef, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Observable, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
@@ -773,6 +773,13 @@ function getComponentCssSizeVar(size) {
             return 'var(--ig-size, var(--ig-size-large))';
     }
 }
+/**
+ * @param path - The URI path to be normalized.
+ * @returns string encoded using the encodeURI function.
+ */
+function normalizeURI(path) {
+    return path.split('/').map(encodeURI).join('/');
+}
 
 var PagingError;
 (function (PagingError) {
@@ -16666,6 +16673,50 @@ class IgxCheckboxComponent {
     set required(value) {
         this._required = value;
     }
+    /**
+     * Returns if the component is of type `material`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.material;
+     * ```
+     */
+    get material() {
+        return this.theme === 'material';
+    }
+    /**
+     * Returns if the component is of type `indigo`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.indigo;
+     * ```
+     */
+    get indigo() {
+        return this.theme === 'indigo';
+    }
+    /**
+     * Returns if the component is of type `bootstrap`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.bootstrap;
+     * ```
+     */
+    get bootstrap() {
+        return this.theme === 'bootstrap';
+    }
+    /**
+     * Returns if the component is of type `fluent`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.fluent;
+     * ```
+     */
+    get fluent() {
+        return this.theme === 'fluent';
+    }
     /**
      * Sets/gets whether the checkbox is checked.
      * Default value is `false`.
@@ -16902,15 +16953,18 @@ class IgxCheckboxComponent {
          * @internal
          */
         this._required = false;
-        /**
-         * @hidden
-         * @internal
-         */
-        this.theme = 'material';
-        this.theme = this.themeService?.globalTheme;
+        this.elRef = inject(ElementRef);
+        this._theme$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+        this.theme = this.themeService.globalTheme;
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this.theme = value;
+            this.cdr.detectChanges();
+        });
+        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
     }
     /**
      * @hidden
@@ -16924,6 +16978,11 @@ class IgxCheckboxComponent {
                 this.cdr.detectChanges();
             }
         }
+        const theme = this.themeService.getComponentTheme(this.elRef);
+        if (theme) {
+            this._theme$.next(theme);
+            this.cdr.markForCheck();
+        }
     }
     /** @hidden @internal */
     onKeyUp(event) {
@@ -17045,7 +17104,7 @@ class IgxCheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: ThemeService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--material": "this.material", "class.igx-checkbox--indigo": "this.indigo", "class.igx-checkbox--bootstrap": "this.bootstrap", "class.igx-checkbox--fluent": "this.fluent", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
                 provide: EDITOR_PROVIDER,
                 useExisting: IgxCheckboxComponent,
                 multi: true
@@ -17103,6 +17162,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.igx-checkbox']
+            }], material: [{
+                type: HostBinding,
+                args: ['class.igx-checkbox--material']
+            }], indigo: [{
+                type: HostBinding,
+                args: ['class.igx-checkbox--indigo']
+            }], bootstrap: [{
+                type: HostBinding,
+                args: ['class.igx-checkbox--bootstrap']
+            }], fluent: [{
+                type: HostBinding,
+                args: ['class.igx-checkbox--fluent']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.igx-checkbox--focused']
@@ -28293,6 +28364,21 @@ class IgxAvatarComponent {
     get isCircle() {
         return this.shape === 'circle';
     }
+    /**
+     * Sets the image source of the avatar.
+     *
+     * @example
+     * ```html
+     * <igx-avatar src="images/picture.jpg"></igx-avatar>
+     * ```
+     * @igxFriendlyName Image URL
+     */
+    set src(value) {
+        this._src = normalizeURI(value);
+    }
+    get src() {
+        return this._src;
+    }
     /**
      * Returns the size of the avatar.
      *
@@ -40693,6 +40779,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
         this._calendar.locale = this.locale;
         this._calendar.weekStart = this.weekStart;
         this._calendar.specialDates = this.specialDates;
+        this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
         this._calendar.headerOrientation = this.headerOrientation;
@@ -40731,7 +40818,7 @@ class IgxDatePickerComponent extends PickerBaseDirective {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxDatePickerComponent, isStandalone: true, selector: "igx-date-picker", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], displayMonthsCount: "displayMonthsCount", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], formatter: "formatter", headerOrientation: "headerOrientation", todayButtonLabel: "todayButtonLabel", cancelButtonLabel: "cancelButtonLabel", spinLoop: ["spinLoop", "spinLoop", booleanAttribute], spinDelta: "spinDelta", outlet: "outlet", id: "id", formatViews: "formatViews", disabledDates: "disabledDates", specialDates: "specialDates", calendarFormat: "calendarFormat", value: "value", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", readOnly: ["readOnly", "readOnly", booleanAttribute] }, outputs: { valueChange: "valueChange", validationFailed: "validationFailed" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.id": "this.id" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDatePickerComponent, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDatePickerComponent, multi: true }
-        ], 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 [type]=\"type\">\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon\n            [title]=\"\n                value\n                    ? pickerResourceStrings.igx_date_picker_change_date\n                    : pickerResourceStrings.igx_date_picker_choose_date\n            \"\n            family=\"default\"\n            name=\"today\"\n            >\n        </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 family=\"default\" name=\"input_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", "name", "active"] }, { 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", "defaultFormatType", "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]" }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "headerTitleTemplate", first: true, predicate: IgxCalendarHeaderTitleTemplateDirective, 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 [type]=\"type\">\n    <igx-prefix *ngIf=\"!toggleComponents.length\" (click)=\"toggle()\">\n        <igx-icon\n            [title]=\"\n                value\n                    ? pickerResourceStrings.igx_date_picker_change_date\n                    : pickerResourceStrings.igx_date_picker_choose_date\n            \"\n            family=\"default\"\n            name=\"today\"\n            >\n        </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 family=\"default\" name=\"input_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", "name", "active"] }, { 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", "defaultFormatType", "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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
             type: Component,
@@ -40816,6 +40903,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], label: [{
                 type: ContentChild,
                 args: [IgxLabelDirective]
+            }], headerTitleTemplate: [{
+                type: ContentChild,
+                args: [IgxCalendarHeaderTitleTemplateDirective]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [IgxCalendarHeaderTemplateDirective]
@@ -48786,13 +48876,18 @@ class IgxQueryBuilderComponent {
      * @hidden @internal
      */
     deleteGroup() {
-        const selectedGroup = this.contextualGroup;
-        const parent = selectedGroup.parent;
-        if (parent) {
-            const index = parent.children.indexOf(selectedGroup);
+        let selectedGroup = this.contextualGroup;
+        let parent = selectedGroup.parent;
+        if (!parent) {
+            this.rootGroup = null;
+        }
+        while (parent) {
+            let index = parent.children.indexOf(selectedGroup);
             parent.children.splice(index, 1);
+            selectedGroup = parent;
+            parent = parent.children.length === 0 ? parent.parent : null;
         }
-        else {
+        if (this.rootGroup?.children.length === 0) {
             this.rootGroup = null;
         }
         this.clearSelection();
@@ -92589,7 +92684,6 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
             // input click
             if (this.hasProjectedInputs && this._focusedInput) {
                 this._focusedInput.setFocus();
-                this._focusedInput = null;
             }
             if (this.inputDirective) {
                 this.inputDirective.focus();
@@ -92633,6 +92727,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
         this.updateCalendar();
     }
     updateValidityOnBlur() {
+        this._focusedInput = null;
         this.onTouchCallback();
         if (this._ngControl) {
             if (this.hasProjectedInputs) {