ngx-router-outlet-class/fesm2020/ngx-router-outlet-class.mjs

A directive to add CSS class(es) to the activated/attached component's host element (hereinafter, the `route element`) of a router-outlet.

import * as i0 from '@angular/core';
import { Directive, Self, Input, NgModule } from '@angular/core';
import { merge, tap } from 'rxjs';
import * as i1 from '@angular/router';

class NgxRouterOutletClassDirective {
    constructor(routerOutlet) {
        this.routerOutlet = routerOutlet;
        /**
         * A function to get the class(es) for a specific router-outlet's component's host element.
         * The function is called with the component instance as the only argument every time
         * the component changes.
         * The function should return a string with the class(es) to add.
         * Multiple classes can be separated by spaces.
         * @type {function}
         * @memberof NgxRouterOutletClassDirective
         */
        this.dynamicClassGetter = () => '';
        this.componentClassList = this.routerOutlet['activated']?.location?.nativeElement.classList;
        this.classArray = [];
        this.subscription = merge(routerOutlet?.activateEvents, routerOutlet?.attachEvents).pipe(tap(() => this.componentClassList =
            this.routerOutlet['activated']?.location?.nativeElement.classList)).subscribe({
            next: (component) => {
                this.setComponentClass();
                const dynamicClasses = this.splitClasses(this.dynamicClassGetter?.(component));
                if (dynamicClasses) {
                    this.setComponentClass(dynamicClasses);
                }
            },
        });
    }
    /**
     * Split a string of classes into an array of classes.
     * @param classes A string of classes separated by spaces.
     * @private
     */
    splitClasses(classes) {
        return classes?.split(' ').filter(Boolean) || [];
    }
    /**
     * Set the component class(es) to the component's host element.
     * @param classes
     * @private
     */
    setComponentClass(classes = this.classArray) {
        classes.forEach((className) => {
            if (!this.componentClassList?.contains(className)) {
                this.componentClassList?.add(className);
            }
        });
    }
    /**
     * Unset the component class(es) from the component's host element.
     * @param classes
     * @private
     */
    unsetComponentClass(classes) {
        classes.forEach((className) => {
            if (this.componentClassList?.contains(className)) {
                this.componentClassList?.remove(className);
            }
        });
    }
    ngOnChanges(changes) {
        const componentClassChange = changes['componentClass'];
        if (componentClassChange) {
            const { currentValue, previousValue } = componentClassChange;
            const previousClasses = this.splitClasses(previousValue);
            const newClasses = this.splitClasses(currentValue);
            this.classArray = newClasses;
            const notIn = (target) => (str) => !target.includes(str);
            const classesToRemove = previousClasses.filter(notIn(newClasses));
            const classesToAdd = newClasses.filter(notIn(previousClasses));
            this.unsetComponentClass(classesToRemove);
            this.setComponentClass(classesToAdd);
        }
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
NgxRouterOutletClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassDirective, deps: [{ token: i1.RouterOutlet, self: true }], target: i0.ɵɵFactoryTarget.Directive });
NgxRouterOutletClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: NgxRouterOutletClassDirective, selector: "router-outlet[componentClass], router-outlet[dynamicClassGetter]", inputs: { componentClass: "componentClass", dynamicClassGetter: "dynamicClassGetter" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'router-outlet[componentClass], router-outlet[dynamicClassGetter]',
                }]
        }], ctorParameters: function () { return [{ type: i1.RouterOutlet, decorators: [{
                    type: Self
                }] }]; }, propDecorators: { componentClass: [{
                type: Input
            }], dynamicClassGetter: [{
                type: Input
            }] } });

class NgxRouterOutletClassModule {
}
NgxRouterOutletClassModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxRouterOutletClassModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassModule, declarations: [NgxRouterOutletClassDirective], exports: [NgxRouterOutletClassDirective] });
NgxRouterOutletClassModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxRouterOutletClassModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxRouterOutletClassDirective,
                    ],
                    imports: [],
                    exports: [
                        NgxRouterOutletClassDirective,
                    ],
                }]
        }] });

/*
 * Public API Surface of ngx-router-outlet-class
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxRouterOutletClassDirective, NgxRouterOutletClassModule };
//# sourceMappingURL=ngx-router-outlet-class.mjs.map