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.
1 lines • 8.11 kB
Source Map (JSON)
{"version":3,"file":"ngx-router-outlet-class.mjs","sources":["../../../projects/ngx-router-outlet-class/src/lib/ngx-router-outlet-class.directive.ts","../../../projects/ngx-router-outlet-class/src/lib/ngx-router-outlet-class.module.ts","../../../projects/ngx-router-outlet-class/src/public-api.ts","../../../projects/ngx-router-outlet-class/src/ngx-router-outlet-class.ts"],"sourcesContent":["import { Directive, Input, OnChanges, OnDestroy, Self, SimpleChanges } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\nimport { merge, Subscription, tap } from 'rxjs';\n\n@Directive({\n selector: 'router-outlet[componentClass], router-outlet[dynamicClassGetter]',\n})\nexport class NgxRouterOutletClassDirective implements OnChanges, OnDestroy {\n\n constructor(\n @Self() private routerOutlet: RouterOutlet,\n ) {\n this.subscription = merge(\n routerOutlet?.activateEvents,\n routerOutlet?.attachEvents,\n ).pipe(\n tap(() => this.componentClassList =\n this.routerOutlet['activated']?.location?.nativeElement.classList),\n ).subscribe({\n next: (component) => {\n this.setComponentClass();\n\n const dynamicClasses = this.splitClasses(\n this.dynamicClassGetter?.(component));\n if (dynamicClasses) {\n this.setComponentClass(dynamicClasses);\n }\n },\n });\n }\n\n /**\n * The class(es) to add to the router-outlet's every component's host element.\n * Multiple classes can be separated by spaces.\n * It will be applied to the component's host element every time its value changes\n * or the component changes.\n * We recommend using this input for static classes for better performance.\n * @type {string}\n * @memberof NgxRouterOutletClassDirective\n */\n @Input() componentClass?: string;\n\n /**\n * A function to get the class(es) for a specific router-outlet's component's host element.\n * The function is called with the component instance as the only argument every time\n * the component changes.\n * The function should return a string with the class(es) to add.\n * Multiple classes can be separated by spaces.\n * @type {function}\n * @memberof NgxRouterOutletClassDirective\n */\n @Input() dynamicClassGetter: (component: any) => string = () => '';\n\n private componentClassList: DOMTokenList = this.routerOutlet['activated']?.location?.nativeElement.classList;\n\n private classArray: string[] = [];\n\n private subscription: Subscription;\n\n /**\n * Split a string of classes into an array of classes.\n * @param classes A string of classes separated by spaces.\n * @private\n */\n private splitClasses(classes?: string) {\n return classes?.split(' ').filter(Boolean) || [];\n }\n\n /**\n * Set the component class(es) to the component's host element.\n * @param classes\n * @private\n */\n private setComponentClass(classes: string[] = this.classArray) {\n classes.forEach((className) => {\n if (!this.componentClassList?.contains(className)) {\n this.componentClassList?.add(className);\n }\n });\n }\n\n /**\n * Unset the component class(es) from the component's host element.\n * @param classes\n * @private\n */\n private unsetComponentClass(classes: string[]) {\n classes.forEach((className) => {\n if (this.componentClassList?.contains(className)) {\n this.componentClassList?.remove(className);\n }\n });\n }\n\n ngOnChanges(changes: SimpleChanges) {\n const componentClassChange = changes['componentClass'];\n\n if (componentClassChange) {\n const { currentValue, previousValue }: {\n currentValue?: string,\n previousValue?: string,\n } = componentClassChange;\n\n const previousClasses = this.splitClasses(previousValue);\n const newClasses = this.splitClasses(currentValue);\n this.classArray = newClasses;\n\n const notIn = (target: string[]) => (str: string) => !target.includes(str);\n const classesToRemove = previousClasses.filter(notIn(newClasses));\n const classesToAdd = newClasses.filter(notIn(previousClasses));\n\n this.unsetComponentClass(classesToRemove);\n this.setComponentClass(classesToAdd);\n }\n }\n\n ngOnDestroy() {\n this.subscription.unsubscribe();\n }\n\n}\n","import { NgModule } from '@angular/core';\n\nimport { NgxRouterOutletClassDirective } from './ngx-router-outlet-class.directive';\n\n@NgModule({\n declarations: [\n NgxRouterOutletClassDirective,\n ],\n imports: [],\n exports: [\n NgxRouterOutletClassDirective,\n ],\n})\nexport class NgxRouterOutletClassModule {\n}\n","/*\n * Public API Surface of ngx-router-outlet-class\n */\n\nexport * from './lib/ngx-router-outlet-class.directive';\nexport * from './lib/ngx-router-outlet-class.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAQa,6BAA6B,CAAA;AAExC,IAAA,WAAA,CACkB,YAA0B,EAAA;QAA1B,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAc;AAgC5C;;;;;;;;AAQG;AACM,QAAA,IAAA,CAAA,kBAAkB,GAA+B,MAAM,EAAE,CAAC;AAE3D,QAAA,IAAA,CAAA,kBAAkB,GAAiB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC;QAErG,IAAU,CAAA,UAAA,GAAa,EAAE,CAAC;QA3ChC,IAAI,CAAC,YAAY,GAAG,KAAK,CACvB,YAAY,EAAE,cAAc,EAC5B,YAAY,EAAE,YAAY,CAC3B,CAAC,IAAI,CACJ,GAAG,CAAC,MAAM,IAAI,CAAC,kBAAkB;AAC/B,YAAA,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CACrE,CAAC,SAAS,CAAC;AACV,YAAA,IAAI,EAAE,CAAC,SAAS,KAAI;gBAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAEzB,gBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CACtC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC,CAAC;AACxC,gBAAA,IAAI,cAAc,EAAE;AAClB,oBAAA,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;AACxC,iBAAA;aACF;AACF,SAAA,CAAC,CAAC;KACJ;AA8BD;;;;AAIG;AACK,IAAA,YAAY,CAAC,OAAgB,EAAA;AACnC,QAAA,OAAO,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KAClD;AAED;;;;AAIG;AACK,IAAA,iBAAiB,CAAC,OAAA,GAAoB,IAAI,CAAC,UAAU,EAAA;AAC3D,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;YAC5B,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;AACzC,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;AAED;;;;AAIG;AACK,IAAA,mBAAmB,CAAC,OAAiB,EAAA;AAC3C,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;YAC5B,IAAI,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE;AAChD,gBAAA,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;AAC5C,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,MAAM,oBAAoB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAEvD,QAAA,IAAI,oBAAoB,EAAE;AACxB,YAAA,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAGjC,oBAAoB,CAAC;YAEzB,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;AACnD,YAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;AAE7B,YAAA,MAAM,KAAK,GAAG,CAAC,MAAgB,KAAK,CAAC,GAAW,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC3E,MAAM,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;YAClE,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;AAE/D,YAAA,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC1C,YAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AACtC,SAAA;KACF;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;KACjC;;0HA/GU,6BAA6B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;8GAA7B,6BAA6B,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAHzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kEAAkE;AAC7E,iBAAA,CAAA;;0BAII,IAAI;4CA8BE,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAWG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;;;MCvCK,0BAA0B,CAAA;;uHAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;wHAA1B,0BAA0B,EAAA,YAAA,EAAA,CAPnC,6BAA6B,CAAA,EAAA,OAAA,EAAA,CAI7B,6BAA6B,CAAA,EAAA,CAAA,CAAA;wHAGpB,0BAA0B,EAAA,CAAA,CAAA;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,6BAA6B;AAC9B,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,OAAO,EAAE;wBACP,6BAA6B;AAC9B,qBAAA;AACF,iBAAA,CAAA;;;ACZD;;AAEG;;ACFH;;AAEG;;;;"}