igniteui-angular 19.2.7 → 19.2.8

package/fesm2022/igniteui-angular.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, contentChildren, QueryList, signal, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, 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, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, sampleTime, filter as filter$1, pipe } from 'rxjs';
-import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
+import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe } from 'rxjs';
+import { takeUntil, filter, throttle, throttleTime, first as first$2, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, DOCUMENT, NgTemplateOutlet, NgClass, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
 import { strToU8, zip } from 'fflate';
@@ -19195,6 +19195,19 @@ let nextId = 0;
  * ```
  */
 class IgxRadioGroupDirective {
+    /**
+     * Returns reference to the child radio buttons.
+     *
+     * @example
+     * ```typescript
+     * let radioButtons =  this.radioGroup.radioButtons;
+     * ```
+     */
+    get radioButtons() {
+        const buttons = Array.from(this._radioButtons());
+        this._radioButtonsList.reset(buttons);
+        return this._radioButtonsList;
+    }
     /**
      * Sets/gets the `value` attribute.
      *
@@ -19283,6 +19296,26 @@ class IgxRadioGroupDirective {
         this._invalid = value;
         this._setRadioButtonsInvalid();
     }
+    /**
+     * A css class applied to the component if any of the
+     * child radio buttons labelPosition is set to `before`.
+     *
+     * @hidden
+     * @internal
+     */
+    get labelBefore() {
+        return this._radioButtons().some((radio) => radio.labelPosition === 'before');
+    }
+    /**
+     * A css class applied to the component if all
+     * child radio buttons are disabled.
+     *
+     * @hidden
+     * @internal
+     */
+    get disabled() {
+        return this._radioButtons().every((radio) => radio.disabled);
+    }
     handleClick(event) {
         event.stopPropagation();
         if (this.selected) {
@@ -19291,7 +19324,7 @@ class IgxRadioGroupDirective {
     }
     handleKeyDown(event) {
         const { key } = event;
-        const buttons = this.radioButtons.filter(radio => !radio.disabled);
+        const buttons = this._radioButtons().filter(radio => !radio.disabled);
         const checked = buttons.find((radio) => radio.checked);
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
             let index = checked ? buttons.indexOf(checked) : -1;
@@ -19357,60 +19390,12 @@ class IgxRadioGroupDirective {
     set alignment(value) {
         this.vertical = value === RadioGroupAlignment.vertical;
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    ngAfterContentInit() {
-        // The initial value can possibly be set by NgModel and it is possible that
-        // the OnInit of the NgModel occurs after the OnInit of this class.
-        this._isInitialized = true;
-        this.radioButtons.changes.pipe(startWith(0), takeUntil(this.destroy$)).subscribe(() => {
-            this.queryChange$.next();
-            setTimeout(() => this._initRadioButtons());
-        });
-        if (this.ngControl) {
-            this.radioButtons.forEach((button) => {
-                if (this.ngControl.disabled) {
-                    button.disabled = this.ngControl.disabled;
-                }
-            });
-        }
-    }
-    /**
-     * @hidden
-     * @internal
-    */
-    ngAfterViewInit() {
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.invalid = false;
-            });
-            if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
-                this._required = this.ngControl?.control?.hasValidator(Validators.required);
-            }
-        }
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
-                button.blurRadio
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    this.updateValidityOnBlur();
-                });
-                fromEvent(button.nativeElement, 'keyup')
-                    .pipe(takeUntil(this.destroy$))
-                    .subscribe((event) => {
-                    this.updateOnKeyUp(event);
-                });
-            });
-        }
-    }
     /**
      * @hidden
      * @internal
      */
     updateValidityOnBlur() {
-        this.radioButtons.forEach((button) => {
+        this._radioButtons().forEach((button) => {
             button.focused = false;
             if (button.invalid) {
                 this.invalid = true;
@@ -19422,9 +19407,9 @@ class IgxRadioGroupDirective {
      * @internal
      */
     updateOnKeyUp(event) {
-        const checked = this.radioButtons.find(x => x.checked);
+        const checked = this._radioButtons().find(x => x.checked);
         if (event.key === "Tab") {
-            this.radioButtons.forEach((radio) => {
+            this._radioButtons().forEach((radio) => {
                 if (radio === checked) {
                     checked.focused = true;
                 }
@@ -19437,10 +19422,10 @@ class IgxRadioGroupDirective {
     _updateTabIndex() {
         // Needed so that the keyboard navigation of a radio group
         // placed inside a dialog works properly
-        if (this.radioButtons) {
-            const checked = this.radioButtons.find(x => x.checked);
+        if (this._radioButtons) {
+            const checked = this._radioButtons().find(x => x.checked);
             if (checked) {
-                this.radioButtons.forEach((button) => {
+                this._radioButtons().forEach((button) => {
                     checked.nativeElement.tabIndex = 0;
                     if (button !== checked) {
                         button.nativeElement.tabIndex = -1;
@@ -19481,8 +19466,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     registerOnTouched(fn) {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.registerOnTouched(fn);
             });
         }
@@ -19499,6 +19484,8 @@ class IgxRadioGroupDirective {
         this.ngControl = ngControl;
         this._directionality = _directionality;
         this.cdr = cdr;
+        this._radioButtons = contentChildren(IgxRadioComponent, { descendants: true });
+        this._radioButtonsList = new QueryList();
         /**
          * An event that is emitted after the radio group `value` is changed.
          *
@@ -19553,7 +19540,7 @@ class IgxRadioGroupDirective {
          * @hidden
          * @internal
          */
-        this._isInitialized = false;
+        this._isInitialized = signal(false);
         /**
          * @hidden
          * @internal
@@ -19577,31 +19564,72 @@ class IgxRadioGroupDirective {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+        effect(() => {
+            this.initialize();
+            Promise.resolve().then(() => {
+                this.setRadioButtons();
+            });
+        });
     }
     /**
      * @hidden
      * @internal
      */
-    _initRadioButtons() {
-        if (this.radioButtons) {
-            const props = { name: this._name, required: this._required };
-            this.radioButtons.forEach((button) => {
-                Object.assign(button, props);
-                if (button.value === this._value) {
-                    button.checked = true;
-                    this._selected = button;
-                    this.cdr.markForCheck();
+    initialize() {
+        // The initial value can possibly be set by NgModel and it is possible that
+        // the OnInit of the NgModel occurs after the OnInit of this class.
+        this._isInitialized.set(true);
+        if (this.ngControl) {
+            this.ngControl.statusChanges
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(() => {
+                this.invalid = false;
+            });
+            if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
+                this._required = this.ngControl?.control?.hasValidator(Validators.required);
+            }
+            this._radioButtons().forEach((button) => {
+                if (this.ngControl.disabled) {
+                    button.disabled = this.ngControl.disabled;
                 }
-                button.change.pipe(takeUntil(button.destroy$), takeUntil(this.destroy$), takeUntil(this.queryChange$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
             });
         }
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    setRadioButtons() {
+        this._radioButtons().forEach((button) => {
+            button.name = this._name;
+            button.required = this._required;
+            if (button.value === this._value) {
+                button.checked = true;
+                this._selected = button;
+                this.cdr.markForCheck();
+            }
+            this._setRadioButtonEvents(button);
+        });
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    _setRadioButtonEvents(button) {
+        button.change.pipe(takeUntil$1(button.destroy$), takeUntil$1(this.destroy$), takeUntil$1(this.queryChange$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
+        button.blurRadio
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(() => this.updateValidityOnBlur());
+        fromEvent(button.nativeElement, 'keyup')
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe((event) => this.updateOnKeyUp(event));
+    }
     /**
      * @hidden
      * @internal
      */
     _selectedRadioButtonChanged(args) {
-        this.radioButtons.forEach((button) => {
+        this._radioButtons().forEach((button) => {
             button.checked = button.id === args.owner.id;
             if (button.checked && button.ngControl) {
                 this.invalid = button.ngControl.invalid;
@@ -19622,8 +19650,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonNames() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.name = this._name;
             });
         }
@@ -19633,8 +19661,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _selectRadioButton() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 if (this._value === null) {
                     // no value - uncheck all radio buttons
                     if (button.checked) {
@@ -19666,8 +19694,8 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonsRequired() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.required = this._required;
             });
         }
@@ -19677,14 +19705,14 @@ class IgxRadioGroupDirective {
      * @internal
      */
     _setRadioButtonsInvalid() {
-        if (this.radioButtons) {
-            this.radioButtons.forEach((button) => {
+        if (this._radioButtons) {
+            this._radioButtons().forEach((button) => {
                 button.invalid = this._invalid;
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxRadioGroupDirective, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: IgxDirectionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical" } }, queries: [{ propertyName: "radioButtons", predicate: IgxRadioComponent, descendants: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.5", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, queries: [{ propertyName: "_radioButtons", predicate: IgxRadioComponent, descendants: true, isSignal: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
             type: Directive,
@@ -19697,10 +19725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: IgxDirectionality }, { type: i0.ChangeDetectorRef }], propDecorators: { radioButtons: [{
-                type: ContentChildren,
-                args: [IgxRadioComponent, { descendants: true }]
-            }], value: [{
+                }] }, { type: IgxDirectionality }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -19720,6 +19745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }], vertical: [{
                 type: HostBinding,
                 args: ['class.igx-radio-group--vertical']
+            }], labelBefore: [{
+                type: HostBinding,
+                args: ['class.igx-radio-group--before']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.igx-radio-group--disabled']
             }], handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -20908,6 +20939,21 @@ class IgxTooltipDirective extends IgxToggleDirective {
          * Returns whether open time out has started
          */
         this.toBeShown = false;
+        this._destroy$ = new Subject();
+        this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
+        this.overlayService.opening.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+            document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
+        });
+        this.overlayService.closed.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+            document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        });
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        document.removeEventListener('touchstart', this.onDocumentTouchStart);
+        this._destroy$.next(true);
+        this._destroy$.complete();
     }
     /**
      * If there is open animation in progress this method will finish is.
@@ -20951,6 +20997,9 @@ class IgxTooltipDirective extends IgxToggleDirective {
             overlaySettings.positionStrategy.settings.closeAnimation = animation;
         }
     }
+    onDocumentTouchStart(event) {
+        this.tooltipTarget?.onDocumentTouchStart(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: IgxTooltipDirective, isStandalone: true, selector: "[igxTooltip]", inputs: { context: "context", id: "id" }, host: { properties: { "class.igx-tooltip--hidden": "this.hiddenClass", "class.igx-tooltip": "this.defaultClass", "attr.id": "this.id", "attr.role": "this.role" } }, exportAs: ["tooltip"], usesInheritance: true, ngImport: i0 }); }
 }
@@ -21164,6 +21213,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         if (shouldReturn) {
             return;
         }
+        this.target.tooltipTarget = this;
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
         if (showingArgs.cancel) {
@@ -21229,18 +21279,23 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
         this.target.closing.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (this.target.tooltipTarget !== this) {
+                return;
+            }
             const hidingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipHide.emit(hidingArgs);
             if (hidingArgs.cancel) {
                 event.cancel = true;
             }
         });
+        this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
     }
     /**
      * @hidden
      */
     ngOnDestroy() {
         this.hideTooltip();
+        this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -21258,6 +21313,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
             this.target.forceClose(this.mergedOverlaySettings);
             this.target.toBeHidden = false;
         }
+        this.target.tooltipTarget = this;
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
         if (showingArgs.cancel) {
@@ -21325,7 +21381,7 @@ class IgxTooltipTargetDirective extends IgxToggleActionDirective {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipTargetDirective, deps: [{ token: i0.ElementRef }, { token: IgxNavigationService, optional: true }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart()", "document:touchstart": "onDocumentTouchStart($event)" } }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.5", type: IgxTooltipTargetDirective, isStandalone: true, selector: "[igxTooltipTarget]", inputs: { showDelay: "showDelay", hideDelay: "hideDelay", tooltipDisabled: ["tooltipDisabled", "tooltipDisabled", booleanAttribute], target: ["igxTooltipTarget", "target"], tooltip: "tooltip" }, outputs: { tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, exportAs: ["tooltipTarget"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxTooltipTargetDirective, decorators: [{
             type: Directive,
@@ -21361,12 +21417,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }], onTouchStart: [{
-                type: HostListener,
-                args: ['touchstart']
-            }], onDocumentTouchStart: [{
-                type: HostListener,
-                args: ['document:touchstart', ['$event']]
             }] } });
 
 /* NOTE: Tooltip directives collection for ease-of-use import in standalone components scenario */