@one-paragon/angular-utilities 2.0.11 → 2.0.13

package/fesm2022/one-paragon-angular-utilities.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal, effect, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
+import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, computed, isSignal, Injectable, Pipe, input, signal, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, Component, ChangeDetectionStrategy, HostListener, EventEmitter, untracked, Output, effect, ContentChildren, ChangeDetectorRef, output, ViewChild, EnvironmentInjector, createComponent, viewChild, linkedSignal, contentChild, forwardRef, contentChildren, model, runInInjectionContext, provideAppInitializer } from '@angular/core';
 import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, observeOn, debounceTime, scan as scan$1, timestamp as timestamp$1, first as first$1 } from 'rxjs/operators';
 import * as i1 from 'rxjs';
 import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp, animationFrameScheduler, debounceTime as debounceTime$1, BehaviorSubject } from 'rxjs';
@@ -2554,40 +2554,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class StylerDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
-    stylesApplied = {};
-    element;
-    set styler(styles) {
-        const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
-            if (typeof (val) === 'string') {
-                acc[key] = val;
-                this.el.nativeElement.style[key] = val;
-            }
-            else if (val?.condition === true || val?.condition(this.element)) {
-                const value = typeof (val.value) === 'string' ? val.value : val?.value(this.element);
-                acc[key] = value;
-                this.el.nativeElement.style[key] = value;
-            }
-            return acc;
-        }, {});
-        Object.keys(this.stylesApplied).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
-            this.renderer.removeStyle(this.el.nativeElement, key);
+    $stylesApplied = signal({});
+    $element = input.required({ alias: 'element' });
+    $styler = input.required({ alias: 'styler' });
+    #stylerEffect = effect(() => {
+        const styles = this.$styler();
+        untracked(() => {
+            const element = this.$element();
+            const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
+                if (!val)
+                    return acc;
+                if (typeof (val) === 'string') {
+                    acc[key] = val;
+                    this.el.nativeElement.style[key] = val;
+                }
+                else if (!val?.condition || val?.condition === true || val?.condition(element)) {
+                    const value = typeof (val.value) === 'string' ? val.value : val?.value(element);
+                    acc[key] = value;
+                    this.el.nativeElement.style[key] = value;
+                }
+                return acc;
+            }, {});
+            Object.keys(this.$stylesApplied()).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
+                this.renderer.removeStyle(this.el.nativeElement, key);
+            });
+            this.$stylesApplied.set(toApply);
         });
-        this.stylesApplied = toApply;
-    }
-    ;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { element: "element", styler: "styler" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $styler: { classPropertyName: "$styler", publicName: "styler", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: StylerDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[styler]',
-                }]
-        }], propDecorators: { element: [{
-                type: Input
-            }], styler: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[styler]' }]
+        }] });
 
 class MatSlideToggleGroupDirective {
     allowMultiple = false;
@@ -2690,35 +2690,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class ConditionalClassesDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
-    element;
-    classes;
+    $element = input.required({ alias: 'element' });
+    $classes = input(undefined, { alias: 'conditionalClasses' });
     classesApplied = [];
-    ngOnChanges(changes) {
-        let toApply = [];
-        if (this.classes) {
-            toApply = Object.keys(this.classes)
-                .filter(key => this.classes[key](this.element));
-        }
-        var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
-        var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
-        classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
-        classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
-        this.classesApplied = toApply;
-    }
+    #onClasses = effect(() => {
+        const classes = this.$classes();
+        untracked(() => {
+            const element = this.$element();
+            let toApply = [];
+            if (classes) {
+                toApply = Object.keys(classes)
+                    .filter(key => (classes[key] === true) || classes[key](element));
+            }
+            var classesNotYetApplied = toApply.filter(c => !this.classesApplied.includes(c));
+            var classesToRemove = this.classesApplied.filter(c => !toApply.includes(c));
+            classesToRemove.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
+            classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
+            this.classesApplied = toApply;
+        });
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { element: "element", classes: ["conditionalClasses", "classes"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $classes: { classPropertyName: "$classes", publicName: "conditionalClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[conditionalClasses]',
                 }]
-        }], propDecorators: { element: [{
-                type: Input
-            }], classes: [{
-                type: Input,
-                args: ['conditionalClasses']
-            }] } });
+        }] });
 
 class UtilitiesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4152,7 +4151,7 @@ function createLinkCreator(metaData) {
     const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
     const routerLinkOptions = useRouterLink ? {
         queryParams: (element) => metaData.additional.link.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
-            map[key] = parseInterpolated(value, element);
+            map[key] = typeof value === 'function' ? value(element) : parseInterpolated(value, element);
             return map;
         }, {}) ?? null,
         fragment: metaData.additional.link?.routerLinkOptions?.fragment,
@@ -4161,8 +4160,9 @@ function createLinkCreator(metaData) {
     }
         : undefined;
     if (hasRoute) {
+        const value = metaData.additional.link.interpolatedRoute;
         return ({
-            link: (element) => parseInterpolated(metaData.additional.link.interpolatedRoute, element),
+            link: (element) => typeof value === 'function' ? value(element) : parseInterpolated(value, element),
             target,
             useRouterLink,
             routerLinkOptions,