rt-query-params-router-link/fesm2022/rt-query-params-router-link.mjs


import * as i0 from '@angular/core';
import { Directive, Inject, Input, HostListener, NgModule } from '@angular/core';
import { WINDOW } from 'rt-platform';
import { Subscription } from 'rxjs';
import * as i1 from '@angular/router';
import { CommonModule } from '@angular/common';

class RtQueryParamsRouterLinkDirective {
    el;
    renderer;
    router;
    activatedRoute;
    window;
    linkQueryParams;
    linkQueryParamsHandling = 'merge';
    linkIsActive = true;
    classActiveLink;
    currentLink = false;
    subscription = new Subscription();
    constructor(el, renderer, router, activatedRoute, window) {
        this.el = el;
        this.renderer = renderer;
        this.router = router;
        this.activatedRoute = activatedRoute;
        this.window = window;
    }
    onClick($event) {
        if (!this.linkIsActive) {
            return;
        }
        // Open link in new tab if clicked with ctrl or cmd.
        if ($event.ctrlKey || $event.metaKey) {
            $event.preventDefault();
            $event.stopPropagation();
            this.window.open(this.getStringifyUrl(), '_blank');
        }
        else {
            this.router.navigate([], {
                queryParams: this.linkQueryParams,
                queryParamsHandling: this.linkQueryParamsHandling,
            });
        }
    }
    ngOnInit() {
        this.subscription.add(this.activatedRoute.queryParams.subscribe((params) => {
            if (this.checkKeyValuesPresence(this.linkQueryParams, params)) {
                this.currentLink = true;
                this.renderer.addClass(this.el.nativeElement, this.classActiveLink);
            }
            else {
                this.currentLink = false;
                this.renderer.removeClass(this.el.nativeElement, this.classActiveLink);
            }
        }));
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    getStringifyUrl() {
        const oldQueryParams = this.activatedRoute.snapshot.queryParams;
        const mergedQueryParams = {
            ...oldQueryParams,
            ...this.linkQueryParams,
        };
        let url = '';
        if (mergedQueryParams) {
            url += '?';
            for (const param of Object.keys(mergedQueryParams)) {
                if (typeof mergedQueryParams[param] === 'object') {
                    for (const arr of mergedQueryParams[param]) {
                        url += `${param}=${arr}&`;
                    }
                }
                else {
                    url += `${param}=${mergedQueryParams[param]}&`;
                }
            }
            url = url.slice(0, url.length - 1);
        }
        return url.replace(/ /g, '%20');
    }
    checkKeyValuesPresence(obj1, obj2) {
        for (const key in obj1) {
            if (Object.prototype.hasOwnProperty.call(obj1, key)) {
                const value1 = obj1[key].toString();
                const value2 = obj2[key]?.toString();
                if (value2 === undefined || value1 !== value2) {
                    return false;
                }
            }
        }
        return true;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RtQueryParamsRouterLinkDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: RtQueryParamsRouterLinkDirective, selector: "[rtQueryParamsRouterLink]", inputs: { linkQueryParams: "linkQueryParams", linkQueryParamsHandling: "linkQueryParamsHandling", linkIsActive: "linkIsActive", classActiveLink: "classActiveLink" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: RtQueryParamsRouterLinkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[rtQueryParamsRouterLink]',
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: Window, decorators: [{
                    type: Inject,
                    args: [WINDOW]
                }] }]; }, propDecorators: { linkQueryParams: [{
                type: Input
            }], linkQueryParamsHandling: [{
                type: Input
            }], linkIsActive: [{
                type: Input
            }], classActiveLink: [{
                type: Input
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

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

/*
 * Public API Surface of rt-query-params-router-link
 */

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

export { RtQueryParamsRouterLinkDirective, RtQueryParamsRouterLinkModule };
//# sourceMappingURL=rt-query-params-router-link.mjs.map