@hmcts/opal-frontend-common 0.0.109 → 0.0.111

package/fesm2022/hmcts-opal-frontend-common-components-moj-moj-primary-navigation.mjs

@@ -1,173 +1,226 @@
-import * as i0 from '@angular/core';
-import { inject, EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, Component, ContentChildren } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Subject, takeUntil, startWith } from 'rxjs';
-
-class MojPrimaryNavigationItemComponent {
-    router = inject(Router);
-    route = inject(ActivatedRoute);
-    primaryNavigationItemId;
-    primaryNavigationItemFragment;
-    primaryNavigationItemText;
-    activeItemFragment;
-    isLastItem = false;
-    useFragmentNavigation = true;
-    navigationItemSelected = new EventEmitter();
-    hostClass = 'moj-primary-navigation__item';
-    hostId = `${this.primaryNavigationItemId}`;
-    hostLastItem = this.isLastItem;
-    /**
-     * Handles the click event of a sub-navigation item.
-     * @param event - The click event.
-     * @param item - The item string.
-     */
-    handleItemClick(event, item) {
-        event.preventDefault();
-        if (!this.useFragmentNavigation) {
-            this.navigationItemSelected.emit(item);
-            return;
-        }
-        // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.
-        this.router.navigate(['./'], { relativeTo: this.route, fragment: item });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MojPrimaryNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: MojPrimaryNavigationItemComponent, isStandalone: true, selector: "opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]", inputs: { primaryNavigationItemId: "primaryNavigationItemId", primaryNavigationItemFragment: "primaryNavigationItemFragment", primaryNavigationItemText: "primaryNavigationItemText", activeItemFragment: "activeItemFragment", isLastItem: "isLastItem", useFragmentNavigation: "useFragmentNavigation" }, outputs: { navigationItemSelected: "navigationItemSelected" }, host: { properties: { "class": "this.hostClass", "id": "this.hostId", "class.last-item": "this.hostLastItem" } }, ngImport: i0, template: "<a\n  href=\"\"\n  class=\"moj-primary-navigation__link cursor-pointer\"\n  [attr.aria-current]=\"primaryNavigationItemFragment === activeItemFragment ? 'page' : null\"\n  (click)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n  >{{ primaryNavigationItemText }}</a\n>\n", styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MojPrimaryNavigationItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"\"\n  class=\"moj-primary-navigation__link cursor-pointer\"\n  [attr.aria-current]=\"primaryNavigationItemFragment === activeItemFragment ? 'page' : null\"\n  (click)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n  >{{ primaryNavigationItemText }}</a\n>\n", styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"] }]
-        }], propDecorators: { primaryNavigationItemId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], primaryNavigationItemFragment: [{
-                type: Input,
-                args: [{ required: true }]
-            }], primaryNavigationItemText: [{
-                type: Input,
-                args: [{ required: true }]
-            }], activeItemFragment: [{
-                type: Input,
-                args: [{ required: true }]
-            }], isLastItem: [{
-                type: Input,
-                args: [{ required: false }]
-            }], useFragmentNavigation: [{
-                type: Input,
-                args: [{ required: false }]
-            }], navigationItemSelected: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostId: [{
-                type: HostBinding,
-                args: ['id']
-            }], hostLastItem: [{
-                type: HostBinding,
-                args: ['class.last-item']
-            }] } });
-
-class MojPrimaryNavigationComponent {
-    route = inject(ActivatedRoute);
-    ngUnsubscribe = new Subject();
-    itemSubscriptions = [];
-    primaryNavigationItems;
-    primaryNavigationId;
-    useFragmentNavigation = true;
-    activeItemFragment = new EventEmitter();
-    navigationItemSelected = new EventEmitter();
-    /**
-     * Synchronise the projected item mode and selection events with the container mode.
-     */
-    wirePrimaryNavigationItems() {
-        this.itemSubscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.itemSubscriptions = [];
-        this.primaryNavigationItems.forEach((item) => {
-            item.useFragmentNavigation = this.useFragmentNavigation;
-            this.itemSubscriptions.push(item.navigationItemSelected.subscribe((selectedItem) => this.navigationItemSelected.emit(selectedItem)));
-        });
-    }
-    /**
-     * Sets up the listeners for the route fragment changes.
-     * Emits the active navigation item when a fragment is present in the route.
-     */
-    setupListeners() {
-        // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.
-        this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {
-            if (!this.useFragmentNavigation) {
-                return;
-            }
-            if (fragment) {
-                this.activeItemFragment.emit(fragment);
-            }
-        });
-    }
-    /**
-     * Initializes the component.
-     * This method is called after the component has been created and initialized.
-     */
-    ngOnInit() {
-        this.setupListeners();
-    }
-    /**
-     * Wire projected navigation item events after content is available.
-     */
-    ngAfterContentInit() {
-        this.primaryNavigationItems.changes
-            .pipe(startWith(this.primaryNavigationItems), takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.wirePrimaryNavigationItems();
-        });
-    }
-    /**
-     * Keep projected items in sync if navigation mode input changes after initial render.
-     * @param changes - The input change set.
-     */
-    ngOnChanges(changes) {
-        const useFragmentNavigationChange = changes['useFragmentNavigation'];
-        if (useFragmentNavigationChange && this.primaryNavigationItems) {
-            this.wirePrimaryNavigationItems();
-        }
-        if (useFragmentNavigationChange?.currentValue === true && useFragmentNavigationChange.previousValue === false) {
-            const currentFragment = this.route.snapshot?.fragment;
-            if (currentFragment) {
-                this.activeItemFragment.emit(currentFragment);
-            }
-        }
-    }
-    /**
-     * Lifecycle hook that is called when the component is about to be destroyed.
-     * Unsubscribes from the route fragment subscription.
-     */
-    ngOnDestroy() {
-        this.itemSubscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MojPrimaryNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: MojPrimaryNavigationComponent, isStandalone: true, selector: "opal-lib-moj-primary-navigation", inputs: { primaryNavigationId: "primaryNavigationId", useFragmentNavigation: "useFragmentNavigation" }, outputs: { activeItemFragment: "activeItemFragment", navigationItemSelected: "navigationItemSelected" }, queries: [{ propertyName: "primaryNavigationItems", predicate: MojPrimaryNavigationItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"moj-primary-navigation\" [id]=\"primaryNavigationId\">\n  <div class=\"moj-primary-navigation__container\">\n    <div class=\"moj-primary-navigation__nav\">\n      <nav class=\"moj-primary-navigation\" aria-label=\"Primary navigation\">\n        <ul class=\"moj-primary-navigation__list\">\n          <ng-content></ng-content>\n        </ul>\n      </nav>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MojPrimaryNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'opal-lib-moj-primary-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"moj-primary-navigation\" [id]=\"primaryNavigationId\">\n  <div class=\"moj-primary-navigation__container\">\n    <div class=\"moj-primary-navigation__nav\">\n      <nav class=\"moj-primary-navigation\" aria-label=\"Primary navigation\">\n        <ul class=\"moj-primary-navigation__list\">\n          <ng-content></ng-content>\n        </ul>\n      </nav>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { primaryNavigationItems: [{
-                type: ContentChildren,
-                args: [MojPrimaryNavigationItemComponent]
-            }], primaryNavigationId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], useFragmentNavigation: [{
-                type: Input,
-                args: [{ required: false }]
-            }], activeItemFragment: [{
-                type: Output
-            }], navigationItemSelected: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostBinding, Input, Output, inject } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Subject, startWith, takeUntil } from "rxjs";
+var MojPrimaryNavigationItemComponent = class MojPrimaryNavigationItemComponent {
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	primaryNavigationItemId;
+	primaryNavigationItemFragment;
+	primaryNavigationItemText;
+	activeItemFragment;
+	isLastItem = false;
+	useFragmentNavigation = true;
+	navigationItemSelected = new EventEmitter();
+	hostClass = "moj-primary-navigation__item";
+	hostId = `${this.primaryNavigationItemId}`;
+	hostLastItem = this.isLastItem;
+	handleItemClick(event, item) {
+		event.preventDefault();
+		if (!this.useFragmentNavigation) {
+			this.navigationItemSelected.emit(item);
+			return;
+		}
+		this.router.navigate(["./"], {
+			relativeTo: this.route,
+			fragment: item
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "21.2.25",
+		ngImport: i0,
+		type: MojPrimaryNavigationItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "21.2.25",
+		type: MojPrimaryNavigationItemComponent,
+		isStandalone: true,
+		selector: "opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]",
+		inputs: {
+			primaryNavigationItemId: "primaryNavigationItemId",
+			primaryNavigationItemFragment: "primaryNavigationItemFragment",
+			primaryNavigationItemText: "primaryNavigationItemText",
+			activeItemFragment: "activeItemFragment",
+			isLastItem: "isLastItem",
+			useFragmentNavigation: "useFragmentNavigation"
+		},
+		outputs: { navigationItemSelected: "navigationItemSelected" },
+		host: { properties: {
+			"class": "this.hostClass",
+			"id": "this.hostId",
+			"class.last-item": "this.hostLastItem"
+		} },
+		ngImport: i0,
+		template: "<a\n  href=\"\"\n  class=\"moj-primary-navigation__link cursor-pointer\"\n  [attr.aria-current]=\"primaryNavigationItemFragment === activeItemFragment ? 'page' : null\"\n  (click)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n  >{{ primaryNavigationItemText }}</a\n>\n",
+		styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.2.25",
+	ngImport: i0,
+	type: MojPrimaryNavigationItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]",
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<a\n  href=\"\"\n  class=\"moj-primary-navigation__link cursor-pointer\"\n  [attr.aria-current]=\"primaryNavigationItemFragment === activeItemFragment ? 'page' : null\"\n  (click)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n  >{{ primaryNavigationItemText }}</a\n>\n",
+			styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"]
+		}]
+	}],
+	propDecorators: {
+		primaryNavigationItemId: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		primaryNavigationItemFragment: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		primaryNavigationItemText: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		activeItemFragment: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		isLastItem: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		useFragmentNavigation: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		navigationItemSelected: [{ type: Output }],
+		hostClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		hostId: [{
+			type: HostBinding,
+			args: ["id"]
+		}],
+		hostLastItem: [{
+			type: HostBinding,
+			args: ["class.last-item"]
+		}]
+	}
+});
+var MojPrimaryNavigationComponent = class MojPrimaryNavigationComponent {
+	route = inject(ActivatedRoute);
+	ngUnsubscribe = new Subject();
+	itemSubscriptions = [];
+	primaryNavigationItems;
+	primaryNavigationId;
+	useFragmentNavigation = true;
+	activeItemFragment = new EventEmitter();
+	navigationItemSelected = new EventEmitter();
+	wirePrimaryNavigationItems() {
+		this.itemSubscriptions.forEach((subscription) => subscription.unsubscribe());
+		this.itemSubscriptions = [];
+		this.primaryNavigationItems.forEach((item) => {
+			item.useFragmentNavigation = this.useFragmentNavigation;
+			this.itemSubscriptions.push(item.navigationItemSelected.subscribe((selectedItem) => this.navigationItemSelected.emit(selectedItem)));
+		});
+	}
+	setupListeners() {
+		this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {
+			if (!this.useFragmentNavigation) return;
+			if (fragment) this.activeItemFragment.emit(fragment);
+		});
+	}
+	ngOnInit() {
+		this.setupListeners();
+	}
+	ngAfterContentInit() {
+		this.primaryNavigationItems.changes.pipe(startWith(this.primaryNavigationItems), takeUntil(this.ngUnsubscribe)).subscribe(() => {
+			this.wirePrimaryNavigationItems();
+		});
+	}
+	ngOnChanges(changes) {
+		const useFragmentNavigationChange = changes["useFragmentNavigation"];
+		if (useFragmentNavigationChange && this.primaryNavigationItems) this.wirePrimaryNavigationItems();
+		if (useFragmentNavigationChange?.currentValue === true && useFragmentNavigationChange.previousValue === false) {
+			const currentFragment = this.route.snapshot?.fragment;
+			if (currentFragment) this.activeItemFragment.emit(currentFragment);
+		}
+	}
+	ngOnDestroy() {
+		this.itemSubscriptions.forEach((subscription) => subscription.unsubscribe());
+		this.ngUnsubscribe.next();
+		this.ngUnsubscribe.complete();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "21.2.25",
+		ngImport: i0,
+		type: MojPrimaryNavigationComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "21.2.25",
+		type: MojPrimaryNavigationComponent,
+		isStandalone: true,
+		selector: "opal-lib-moj-primary-navigation",
+		inputs: {
+			primaryNavigationId: "primaryNavigationId",
+			useFragmentNavigation: "useFragmentNavigation"
+		},
+		outputs: {
+			activeItemFragment: "activeItemFragment",
+			navigationItemSelected: "navigationItemSelected"
+		},
+		queries: [{
+			propertyName: "primaryNavigationItems",
+			predicate: MojPrimaryNavigationItemComponent
+		}],
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<div class=\"moj-primary-navigation\" [id]=\"primaryNavigationId\">\n  <div class=\"moj-primary-navigation__container\">\n    <div class=\"moj-primary-navigation__nav\">\n      <nav class=\"moj-primary-navigation\" aria-label=\"Primary navigation\">\n        <ul class=\"moj-primary-navigation__list\">\n          <ng-content></ng-content>\n        </ul>\n      </nav>\n    </div>\n  </div>\n</div>\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.2.25",
+	ngImport: i0,
+	type: MojPrimaryNavigationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "opal-lib-moj-primary-navigation",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"moj-primary-navigation\" [id]=\"primaryNavigationId\">\n  <div class=\"moj-primary-navigation__container\">\n    <div class=\"moj-primary-navigation__nav\">\n      <nav class=\"moj-primary-navigation\" aria-label=\"Primary navigation\">\n        <ul class=\"moj-primary-navigation__list\">\n          <ng-content></ng-content>\n        </ul>\n      </nav>\n    </div>\n  </div>\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		primaryNavigationItems: [{
+			type: ContentChildren,
+			args: [MojPrimaryNavigationItemComponent]
+		}],
+		primaryNavigationId: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		useFragmentNavigation: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		activeItemFragment: [{ type: Output }],
+		navigationItemSelected: [{ type: Output }]
+	}
+});
 export { MojPrimaryNavigationComponent, MojPrimaryNavigationItemComponent };
-//# sourceMappingURL=hmcts-opal-frontend-common-components-moj-moj-primary-navigation.mjs.map
+
+//# sourceMappingURL=hmcts-opal-frontend-common-components-moj-moj-primary-navigation.mjs.map