ngx-router-outlet-class
Version:
A directive to add CSS class(es) to the activated/attached component's host element (hereinafter, the `route element`) of a router-outlet.
134 lines (128 loc) • 6.55 kB
JavaScript
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) {
var _a, _b;
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 = (_b = (_a = this.routerOutlet['activated']) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.nativeElement.classList;
this.classArray = [];
this.subscription = merge(routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.activateEvents, routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.attachEvents).pipe(tap(() => {
var _a, _b;
return this.componentClassList =
(_b = (_a = this.routerOutlet['activated']) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.nativeElement.classList;
})).subscribe({
next: (component) => {
var _a;
this.setComponentClass();
const dynamicClasses = this.splitClasses((_a = this.dynamicClassGetter) === null || _a === void 0 ? void 0 : _a.call(this, 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 === null || classes === void 0 ? void 0 : 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) => {
var _a, _b;
if (!((_a = this.componentClassList) === null || _a === void 0 ? void 0 : _a.contains(className))) {
(_b = this.componentClassList) === null || _b === void 0 ? void 0 : _b.add(className);
}
});
}
/**
* Unset the component class(es) from the component's host element.
* @param classes
* @private
*/
unsetComponentClass(classes) {
classes.forEach((className) => {
var _a, _b;
if ((_a = this.componentClassList) === null || _a === void 0 ? void 0 : _a.contains(className)) {
(_b = this.componentClassList) === null || _b === void 0 ? void 0 : _b.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