@hmcts/opal-frontend-common 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,6 +6,8 @@ export declare class GovukTabListItemComponent {
6
6
  set tabsListItemId(tabsListItemId: string);
7
7
  tabListItemHref: string;
8
8
  tabListItemName: string;
9
+ hostClass: string;
10
+ hostId: string;
9
11
  static ɵfac: i0.ɵɵFactoryDeclaration<GovukTabListItemComponent, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<GovukTabListItemComponent, "opal-lib-govuk-tab-list-item", never, { "tabsId": { "alias": "tabsId"; "required": true; }; "tabsListItemId": { "alias": "tabsListItemId"; "required": true; }; "tabListItemHref": { "alias": "tabListItemHref"; "required": true; }; "tabListItemName": { "alias": "tabListItemName"; "required": true; }; }, {}, never, never, true, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<GovukTabListItemComponent, "opal-lib-govuk-tab-list-item, [opal-lib-govuk-tab-list-item]", never, { "tabsId": { "alias": "tabsId"; "required": true; }; "tabsListItemId": { "alias": "tabsListItemId"; "required": true; }; "tabListItemHref": { "alias": "tabListItemHref"; "required": true; }; "tabListItemName": { "alias": "tabListItemName"; "required": true; }; }, {}, never, never, true, never>;
11
13
  }
@@ -7,6 +7,9 @@ export declare class MojPrimaryNavigationItemComponent {
7
7
  primaryNavigationItemText: string;
8
8
  activeItemFragment: string;
9
9
  isLastItem: boolean;
10
+ hostClass: string;
11
+ hostId: string;
12
+ hostLastItem: boolean;
10
13
  /**
11
14
  * Handles the click event of a sub-navigation item.
12
15
  * @param event - The click event.
@@ -6,6 +6,8 @@ export declare class MojSubNavigationItemComponent {
6
6
  subNavItemFragment: string;
7
7
  subNavItemText: string;
8
8
  activeSubNavItemFragment: string;
9
+ hostClass: string;
10
+ hostId: string;
9
11
  /**
10
12
  * Handles the click event of a sub-navigation item.
11
13
  * @param event - The click event.
@@ -13,5 +15,5 @@ export declare class MojSubNavigationItemComponent {
13
15
  */
14
16
  handleItemClick(event: Event, item: string): void;
15
17
  static ɵfac: i0.ɵɵFactoryDeclaration<MojSubNavigationItemComponent, never>;
16
- static ɵcmp: i0.ɵɵComponentDeclaration<MojSubNavigationItemComponent, "opal-lib-moj-sub-navigation-item", never, { "subNavItemId": { "alias": "subNavItemId"; "required": true; }; "subNavItemFragment": { "alias": "subNavItemFragment"; "required": true; }; "subNavItemText": { "alias": "subNavItemText"; "required": true; }; "activeSubNavItemFragment": { "alias": "activeSubNavItemFragment"; "required": true; }; }, {}, never, ["[badge]"], true, never>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<MojSubNavigationItemComponent, "opal-lib-moj-sub-navigation-item, [opal-lib-moj-sub-navigation-item]", never, { "subNavItemId": { "alias": "subNavItemId"; "required": true; }; "subNavItemFragment": { "alias": "subNavItemFragment"; "required": true; }; "subNavItemText": { "alias": "subNavItemText"; "required": true; }; "activeSubNavItemFragment": { "alias": "activeSubNavItemFragment"; "required": true; }; }, {}, never, ["[badge]"], true, never>;
17
19
  }
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Input, ChangeDetectionStrategy, Component, PLATFORM_ID } from '@angular/core';
2
+ import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, PLATFORM_ID } from '@angular/core';
3
3
  import { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';
4
4
  import { isPlatformBrowser } from '@angular/common';
5
5
 
@@ -12,12 +12,14 @@ class GovukTabListItemComponent {
12
12
  }
13
13
  tabListItemHref;
14
14
  tabListItemName;
15
+ hostClass = 'govuk-tabs__list-item';
16
+ hostId = `${this.tabsId}_${this._tabsListItemId}`;
15
17
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GovukTabListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GovukTabListItemComponent, isStandalone: true, selector: "opal-lib-govuk-tab-list-item", inputs: { tabsId: "tabsId", tabsListItemId: "tabsListItemId", tabListItemHref: "tabListItemHref", tabListItemName: "tabListItemName" }, ngImport: i0, template: "<li class=\"govuk-tabs__list-item\" [id]=\"tabsId + _tabsListItemId\">\n <a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
18
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GovukTabListItemComponent, isStandalone: true, selector: "opal-lib-govuk-tab-list-item, [opal-lib-govuk-tab-list-item]", inputs: { tabsId: "tabsId", tabsListItemId: "tabsListItemId", tabListItemHref: "tabListItemHref", tabListItemName: "tabListItemName" }, host: { properties: { "class": "this.hostClass", "id": "this.hostId" } }, ngImport: i0, template: "<a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
17
19
  }
18
20
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GovukTabListItemComponent, decorators: [{
19
21
  type: Component,
20
- args: [{ selector: 'opal-lib-govuk-tab-list-item', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"govuk-tabs__list-item\" [id]=\"tabsId + _tabsListItemId\">\n <a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n</li>\n" }]
22
+ args: [{ selector: 'opal-lib-govuk-tab-list-item, [opal-lib-govuk-tab-list-item]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n" }]
21
23
  }], propDecorators: { tabsId: [{
22
24
  type: Input,
23
25
  args: [{ required: true }]
@@ -30,6 +32,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
30
32
  }], tabListItemName: [{
31
33
  type: Input,
32
34
  args: [{ required: true }]
35
+ }], hostClass: [{
36
+ type: HostBinding,
37
+ args: ['class']
38
+ }], hostId: [{
39
+ type: HostBinding,
40
+ args: ['id']
33
41
  }] } });
34
42
 
35
43
  class GovukTabPanelComponent {
@@ -1 +1 @@
1
- {"version":3,"file":"hmcts-opal-frontend-common-components-govuk-govuk-tabs.mjs","sources":["../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-list-item/govuk-tab-list-item.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-list-item/govuk-tab-list-item.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-panel/govuk-tab-panel.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-panel/govuk-tab-panel.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/hmcts-opal-frontend-common-components-govuk-govuk-tabs.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';\nimport { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';\n\n@Component({\n selector: 'opal-lib-govuk-tab-list-item',\n imports: [],\n templateUrl: './govuk-tab-list-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabListItemComponent {\n private readonly utilService = inject(UtilsService);\n public _tabsListItemId!: string;\n\n @Input({ required: true }) public tabsId!: string;\n @Input({ required: true }) set tabsListItemId(tabsListItemId: string) {\n this._tabsListItemId = this.utilService.upperCaseFirstLetter(tabsListItemId);\n }\n\n @Input({ required: true }) public tabListItemHref!: string;\n @Input({ required: true }) public tabListItemName!: string;\n}\n","<li class=\"govuk-tabs__list-item\" [id]=\"tabsId + _tabsListItemId\">\n <a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n</li>\n","import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';\nimport { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';\n\n@Component({\n selector: 'opal-lib-govuk-tab-panel',\n imports: [],\n templateUrl: './govuk-tab-panel.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabPanelComponent {\n private readonly utilService = inject(UtilsService);\n public _tabsPanelId!: string;\n\n @Input({ required: true }) public tabsId!: string;\n @Input({ required: true }) set tabsPanelId(tabsPanelId: string) {\n this._tabsPanelId = this.utilService.upperCaseFirstLetter(tabsPanelId);\n }\n}\n","<div class=\"govuk-tabs__panel\" [id]=\"tabsId + _tabsPanelId\">\n <ng-content></ng-content>\n</div>\n","import { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, Input, PLATFORM_ID, inject } from '@angular/core';\n\n@Component({\n selector: 'opal-lib-govuk-tabs',\n imports: [],\n templateUrl: './govuk-tabs.component.html',\n\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsComponent implements AfterViewInit {\n private readonly platformId = inject(PLATFORM_ID);\n\n @Input({ required: true }) public tabsId!: string;\n /**\n * Lifecycle hook that is called after Angular has fully initialized the component's view.\n * It is called only once after the first ngAfterContentChecked.\n * We use it to initialize the govuk-frontend component.\n */\n ngAfterViewInit() {\n if (isPlatformBrowser(this.platformId)) {\n import('govuk-frontend').then((govuk) => {\n govuk.initAll();\n });\n }\n }\n}\n","<div class=\"govuk-tabs\" data-module=\"govuk-tabs\" [id]=\"tabsId\">\n <h2 class=\"govuk-tabs__title\">Contents</h2>\n <ul class=\"govuk-tabs__list\">\n <ng-content select=\"[items]\"></ng-content>\n </ul>\n <ng-content select=\"[panels]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"hmcts-opal-frontend-common-components-govuk-govuk-tabs.mjs","sources":["../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-list-item/govuk-tab-list-item.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-list-item/govuk-tab-list-item.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-panel/govuk-tab-panel.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tab-panel/govuk-tab-panel.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/hmcts-opal-frontend-common-components-govuk-govuk-tabs.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';\nimport { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';\n\n@Component({\n selector: 'opal-lib-govuk-tab-list-item, [opal-lib-govuk-tab-list-item]',\n imports: [],\n templateUrl: './govuk-tab-list-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabListItemComponent {\n private readonly utilService = inject(UtilsService);\n public _tabsListItemId!: string;\n\n @Input({ required: true }) public tabsId!: string;\n @Input({ required: true }) set tabsListItemId(tabsListItemId: string) {\n this._tabsListItemId = this.utilService.upperCaseFirstLetter(tabsListItemId);\n }\n\n @Input({ required: true }) public tabListItemHref!: string;\n @Input({ required: true }) public tabListItemName!: string;\n\n @HostBinding('class') hostClass = 'govuk-tabs__list-item';\n @HostBinding('id') hostId = `${this.tabsId}_${this._tabsListItemId}`;\n}\n","<a class=\"govuk-tabs__tab\" [href]=\"tabListItemHref\"> {{ tabListItemName }} </a>\n","import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';\nimport { UtilsService } from '@hmcts/opal-frontend-common/services/utils-service';\n\n@Component({\n selector: 'opal-lib-govuk-tab-panel',\n imports: [],\n templateUrl: './govuk-tab-panel.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabPanelComponent {\n private readonly utilService = inject(UtilsService);\n public _tabsPanelId!: string;\n\n @Input({ required: true }) public tabsId!: string;\n @Input({ required: true }) set tabsPanelId(tabsPanelId: string) {\n this._tabsPanelId = this.utilService.upperCaseFirstLetter(tabsPanelId);\n }\n}\n","<div class=\"govuk-tabs__panel\" [id]=\"tabsId + _tabsPanelId\">\n <ng-content></ng-content>\n</div>\n","import { isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, Input, PLATFORM_ID, inject } from '@angular/core';\n\n@Component({\n selector: 'opal-lib-govuk-tabs',\n imports: [],\n templateUrl: './govuk-tabs.component.html',\n\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsComponent implements AfterViewInit {\n private readonly platformId = inject(PLATFORM_ID);\n\n @Input({ required: true }) public tabsId!: string;\n /**\n * Lifecycle hook that is called after Angular has fully initialized the component's view.\n * It is called only once after the first ngAfterContentChecked.\n * We use it to initialize the govuk-frontend component.\n */\n ngAfterViewInit() {\n if (isPlatformBrowser(this.platformId)) {\n import('govuk-frontend').then((govuk) => {\n govuk.initAll();\n });\n }\n }\n}\n","<div class=\"govuk-tabs\" data-module=\"govuk-tabs\" [id]=\"tabsId\">\n <h2 class=\"govuk-tabs__title\">Contents</h2>\n <ul class=\"govuk-tabs__list\">\n <ng-content select=\"[items]\"></ng-content>\n </ul>\n <ng-content select=\"[panels]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Input, ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
2
+ import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
3
3
  import { Router, ActivatedRoute } from '@angular/router';
4
4
  import { Subject, takeUntil } from 'rxjs';
5
5
 
@@ -11,6 +11,9 @@ class MojPrimaryNavigationItemComponent {
11
11
  primaryNavigationItemText;
12
12
  activeItemFragment;
13
13
  isLastItem = false;
14
+ hostClass = 'moj-primary-navigation__item';
15
+ hostId = `${this.primaryNavigationItemId}`;
16
+ hostLastItem = this.isLastItem;
14
17
  /**
15
18
  * Handles the click event of a sub-navigation item.
16
19
  * @param event - The click event.
@@ -22,11 +25,11 @@ class MojPrimaryNavigationItemComponent {
22
25
  this.router.navigate(['./'], { relativeTo: this.route, fragment: item });
23
26
  }
24
27
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MojPrimaryNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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" }, ngImport: i0, template: "<li class=\"moj-primary-navigation__item\" [class.last-item]=\"isLastItem\" [id]=\"primaryNavigationItemId\">\n <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 (keyup.enter)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n >{{ primaryNavigationItemText }}</a\n >\n</li>\n", styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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" }, 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 (keyup.enter)=\"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 });
26
29
  }
27
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MojPrimaryNavigationItemComponent, decorators: [{
28
31
  type: Component,
29
- args: [{ selector: 'opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"moj-primary-navigation__item\" [class.last-item]=\"isLastItem\" [id]=\"primaryNavigationItemId\">\n <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 (keyup.enter)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n >{{ primaryNavigationItemText }}</a\n >\n</li>\n", styles: [".moj-primary-navigation__item.last-item{margin-right:initial!important}.moj-primary-navigation__item{margin-right:20px}\n"] }]
32
+ 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 (keyup.enter)=\"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"] }]
30
33
  }], propDecorators: { primaryNavigationItemId: [{
31
34
  type: Input,
32
35
  args: [{ required: true }]
@@ -42,6 +45,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
42
45
  }], isLastItem: [{
43
46
  type: Input,
44
47
  args: [{ required: false }]
48
+ }], hostClass: [{
49
+ type: HostBinding,
50
+ args: ['class']
51
+ }], hostId: [{
52
+ type: HostBinding,
53
+ args: ['id']
54
+ }], hostLastItem: [{
55
+ type: HostBinding,
56
+ args: ['class.last-item']
45
57
  }] } });
46
58
 
47
59
  class MojPrimaryNavigationComponent {
@@ -1 +1 @@
1
- {"version":3,"file":"hmcts-opal-frontend-common-components-moj-moj-primary-navigation.mjs","sources":["../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation-item/moj-primary-navigation-item.component.ts","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation-item/moj-primary-navigation-item.component.html","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation.component.ts","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation.component.html","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/hmcts-opal-frontend-common-components-moj-moj-primary-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]',\n imports: [],\n templateUrl: './moj-primary-navigation-item.component.html',\n styleUrls: ['./moj-primary-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojPrimaryNavigationItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n\n @Input({ required: true }) public primaryNavigationItemId!: string;\n @Input({ required: true }) public primaryNavigationItemFragment!: string;\n @Input({ required: true }) public primaryNavigationItemText!: string;\n @Input({ required: true }) public activeItemFragment!: string;\n @Input({ required: false }) public isLastItem: boolean = false;\n\n /**\n * Handles the click event of a sub-navigation item.\n * @param event - The click event.\n * @param item - The item string.\n */\n public handleItemClick(event: Event, item: string): void {\n event.preventDefault();\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.router.navigate(['./'], { relativeTo: this.route, fragment: item });\n }\n}\n","<li class=\"moj-primary-navigation__item\" [class.last-item]=\"isLastItem\" [id]=\"primaryNavigationItemId\">\n <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 (keyup.enter)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n >{{ primaryNavigationItemText }}</a\n >\n</li>\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n inject,\n} from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'opal-lib-moj-primary-navigation',\n imports: [],\n templateUrl: './moj-primary-navigation.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojPrimaryNavigationComponent implements OnInit, OnDestroy {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: true }) public primaryNavigationId!: string;\n @Output() activeItemFragment = new EventEmitter<string>();\n\n /**\n * Sets up the listeners for the route fragment changes.\n * Emits the active navigation item when a fragment is present in the route.\n */\n private setupListeners(): void {\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeItemFragment.emit(fragment);\n }\n });\n }\n\n /**\n * Initializes the component.\n * This method is called after the component has been created and initialized.\n */\n public ngOnInit(): void {\n this.setupListeners();\n }\n\n /**\n * Lifecycle hook that is called when the component is about to be destroyed.\n * Unsubscribes from the route fragment subscription.\n */\n public ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAUa,iCAAiC,CAAA;AAC3B,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAEb,IAAA,uBAAuB;AACvB,IAAA,6BAA6B;AAC7B,IAAA,yBAAyB;AACzB,IAAA,kBAAkB;IACjB,UAAU,GAAY,KAAK;AAE9D;;;;AAIG;IACI,eAAe,CAAC,KAAY,EAAE,IAAY,EAAA;QAC/C,KAAK,CAAC,cAAc,EAAE;;QAEtB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;wGAlB/D,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iCAAiC,oYCV9C,8eAUA,EAAA,MAAA,EAAA,CAAA,2HAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDAa,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAP7C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8EAA8E,EAC/E,OAAA,EAAA,EAAE,EAGM,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8eAAA,EAAA,MAAA,EAAA,CAAA,2HAAA,CAAA,EAAA;8BAMb,uBAAuB,EAAA,CAAA;sBAAxD,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,6BAA6B,EAAA,CAAA;sBAA9D,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,yBAAyB,EAAA,CAAA;sBAA1D,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACS,kBAAkB,EAAA,CAAA;sBAAnD,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACU,UAAU,EAAA,CAAA;sBAA5C,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;;MECf,6BAA6B,CAAA;AACvB,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAC9B,IAAA,aAAa,GAAG,IAAI,OAAO,EAAQ;AAElB,IAAA,mBAAmB;AAC3C,IAAA,kBAAkB,GAAG,IAAI,YAAY,EAAU;AAEzD;;;AAGG;IACK,cAAc,GAAA;;QAEpB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,KAAI;YAC7E,IAAI,QAAQ,EAAE;AACZ,gBAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAE1C,SAAC,CAAC;;AAGJ;;;AAGG;IACI,QAAQ,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;;AAGvB;;;AAGG;IACI,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;;wGAnCpB,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA7B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,6BAA6B,0MCnB1C,kZAWA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDQa,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBANzC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iCAAiC,EAClC,OAAA,EAAA,EAAE,EAEM,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kZAAA,EAAA;8BAOb,mBAAmB,EAAA,CAAA;sBAApD,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACf,kBAAkB,EAAA,CAAA;sBAA3B;;;AEzBH;;AAEG;;;;"}
1
+ {"version":3,"file":"hmcts-opal-frontend-common-components-moj-moj-primary-navigation.mjs","sources":["../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation-item/moj-primary-navigation-item.component.ts","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation-item/moj-primary-navigation-item.component.html","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation.component.ts","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/moj-primary-navigation.component.html","../../../projects/opal-frontend-common/components/moj/moj-primary-navigation/hmcts-opal-frontend-common-components-moj-moj-primary-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-moj-primary-navigation-item, [opal-lib-moj-primary-navigation-item]',\n imports: [],\n templateUrl: './moj-primary-navigation-item.component.html',\n styleUrls: ['./moj-primary-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojPrimaryNavigationItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n\n @Input({ required: true }) public primaryNavigationItemId!: string;\n @Input({ required: true }) public primaryNavigationItemFragment!: string;\n @Input({ required: true }) public primaryNavigationItemText!: string;\n @Input({ required: true }) public activeItemFragment!: string;\n @Input({ required: false }) public isLastItem: boolean = false;\n\n @HostBinding('class') hostClass = 'moj-primary-navigation__item';\n @HostBinding('id') hostId = `${this.primaryNavigationItemId}`;\n @HostBinding('class.last-item') hostLastItem = this.isLastItem;\n\n /**\n * Handles the click event of a sub-navigation item.\n * @param event - The click event.\n * @param item - The item string.\n */\n public handleItemClick(event: Event, item: string): void {\n event.preventDefault();\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.router.navigate(['./'], { relativeTo: this.route, fragment: item });\n }\n}\n","<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 (keyup.enter)=\"handleItemClick($event, primaryNavigationItemFragment)\"\n >{{ primaryNavigationItemText }}</a\n>\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n inject,\n} from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'opal-lib-moj-primary-navigation',\n imports: [],\n templateUrl: './moj-primary-navigation.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojPrimaryNavigationComponent implements OnInit, OnDestroy {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: true }) public primaryNavigationId!: string;\n @Output() activeItemFragment = new EventEmitter<string>();\n\n /**\n * Sets up the listeners for the route fragment changes.\n * Emits the active navigation item when a fragment is present in the route.\n */\n private setupListeners(): void {\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeItemFragment.emit(fragment);\n }\n });\n }\n\n /**\n * Initializes the component.\n * This method is called after the component has been created and initialized.\n */\n public ngOnInit(): void {\n this.setupListeners();\n }\n\n /**\n * Lifecycle hook that is called when the component is about to be destroyed.\n * Unsubscribes from the route fragment subscription.\n */\n public ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Input, ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
2
+ import { inject, HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
3
3
  import { Router, ActivatedRoute } from '@angular/router';
4
4
  import { Subject, takeUntil } from 'rxjs';
5
5
 
@@ -10,6 +10,8 @@ class MojSubNavigationItemComponent {
10
10
  subNavItemFragment;
11
11
  subNavItemText;
12
12
  activeSubNavItemFragment;
13
+ hostClass = 'moj-sub-navigation__item';
14
+ hostId = this.subNavItemId;
13
15
  /**
14
16
  * Handles the click event of a sub-navigation item.
15
17
  * @param event - The click event.
@@ -21,11 +23,11 @@ class MojSubNavigationItemComponent {
21
23
  this.router.navigate(['./'], { relativeTo: this.route, fragment: item });
22
24
  }
23
25
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MojSubNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MojSubNavigationItemComponent, isStandalone: true, selector: "opal-lib-moj-sub-navigation-item", inputs: { subNavItemId: "subNavItemId", subNavItemFragment: "subNavItemFragment", subNavItemText: "subNavItemText", activeSubNavItemFragment: "activeSubNavItemFragment" }, ngImport: i0, template: "<li class=\"moj-sub-navigation__item\" [id]=\"subNavItemId\">\n <a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n >\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n </a>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
26
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MojSubNavigationItemComponent, isStandalone: true, selector: "opal-lib-moj-sub-navigation-item, [opal-lib-moj-sub-navigation-item]", inputs: { subNavItemId: "subNavItemId", subNavItemFragment: "subNavItemFragment", subNavItemText: "subNavItemText", activeSubNavItemFragment: "activeSubNavItemFragment" }, host: { properties: { "class": "this.hostClass", "id": "this.hostId" } }, ngImport: i0, template: "<a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n>\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n</a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
25
27
  }
26
28
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MojSubNavigationItemComponent, decorators: [{
27
29
  type: Component,
28
- args: [{ selector: 'opal-lib-moj-sub-navigation-item', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"moj-sub-navigation__item\" [id]=\"subNavItemId\">\n <a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n >\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n </a>\n</li>\n" }]
30
+ args: [{ selector: 'opal-lib-moj-sub-navigation-item, [opal-lib-moj-sub-navigation-item]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n>\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n</a>\n" }]
29
31
  }], propDecorators: { subNavItemId: [{
30
32
  type: Input,
31
33
  args: [{ required: true }]
@@ -38,6 +40,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
38
40
  }], activeSubNavItemFragment: [{
39
41
  type: Input,
40
42
  args: [{ required: true }]
43
+ }], hostClass: [{
44
+ type: HostBinding,
45
+ args: ['class']
46
+ }], hostId: [{
47
+ type: HostBinding,
48
+ args: ['id']
41
49
  }] } });
42
50
 
43
51
  class MojSubNavigationComponent {
@@ -1 +1 @@
1
- {"version":3,"file":"hmcts-opal-frontend-common-components-moj-moj-sub-navigation.mjs","sources":["../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation-item/moj-sub-navigation-item.component.ts","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation-item/moj-sub-navigation-item.component.html","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation.component.ts","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation.component.html","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/hmcts-opal-frontend-common-components-moj-moj-sub-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';\nimport { Router, ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-moj-sub-navigation-item',\n imports: [],\n templateUrl: './moj-sub-navigation-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojSubNavigationItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n\n @Input({ required: true }) public subNavItemId!: string;\n @Input({ required: true }) public subNavItemFragment!: string;\n @Input({ required: true }) public subNavItemText!: string;\n @Input({ required: true }) public activeSubNavItemFragment!: string;\n\n /**\n * Handles the click event of a sub-navigation item.\n * @param event - The click event.\n * @param item - The item string.\n */\n public handleItemClick(event: Event, item: string): void {\n event.preventDefault();\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.router.navigate(['./'], { relativeTo: this.route, fragment: item });\n }\n}\n","<li class=\"moj-sub-navigation__item\" [id]=\"subNavItemId\">\n <a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n >\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n </a>\n</li>\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n inject,\n} from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'opal-lib-moj-sub-navigation',\n imports: [],\n templateUrl: './moj-sub-navigation.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojSubNavigationComponent implements OnInit, OnDestroy {\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: true }) public subNavId!: string;\n @Output() activeSubNavItemFragment = new EventEmitter<string>();\n\n /**\n * Sets up the listeners for the route fragment changes.\n * Emits the active navigation item when a fragment is present in the route.\n */\n private setupListeners(): void {\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeSubNavItemFragment.emit(fragment);\n }\n });\n }\n\n ngOnInit(): void {\n this.setupListeners();\n }\n\n /**\n * Lifecycle hook that is called when the component is about to be destroyed.\n * Unsubscribes from the route fragment subscription.\n */\n ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n}\n","<nav class=\"moj-sub-navigation\" aria-label=\"Sub navigation\" [id]=\"subNavId\">\n <ul class=\"moj-sub-navigation__list\">\n <ng-content></ng-content>\n </ul>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"hmcts-opal-frontend-common-components-moj-moj-sub-navigation.mjs","sources":["../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation-item/moj-sub-navigation-item.component.ts","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation-item/moj-sub-navigation-item.component.html","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation.component.ts","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/moj-sub-navigation.component.html","../../../projects/opal-frontend-common/components/moj/moj-sub-navigation/hmcts-opal-frontend-common-components-moj-moj-sub-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';\nimport { Router, ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-moj-sub-navigation-item, [opal-lib-moj-sub-navigation-item]',\n imports: [],\n templateUrl: './moj-sub-navigation-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojSubNavigationItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n\n @Input({ required: true }) public subNavItemId!: string;\n @Input({ required: true }) public subNavItemFragment!: string;\n @Input({ required: true }) public subNavItemText!: string;\n @Input({ required: true }) public activeSubNavItemFragment!: string;\n\n @HostBinding('class') hostClass = 'moj-sub-navigation__item';\n @HostBinding('id') hostId = this.subNavItemId;\n\n /**\n * Handles the click event of a sub-navigation item.\n * @param event - The click event.\n * @param item - The item string.\n */\n public handleItemClick(event: Event, item: string): void {\n event.preventDefault();\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.router.navigate(['./'], { relativeTo: this.route, fragment: item });\n }\n}\n","<a\n class=\"moj-sub-navigation__link cursor-pointer\"\n [attr.aria-current]=\"subNavItemFragment === activeSubNavItemFragment ? 'page' : ''\"\n (click)=\"handleItemClick($event, subNavItemFragment)\"\n (keyup.enter)=\"handleItemClick($event, subNavItemFragment)\"\n role=\"link\"\n tabindex=\"0\"\n>\n {{ subNavItemText }}\n <ng-content select=\"[badge]\"></ng-content>\n</a>\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n inject,\n} from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n selector: 'opal-lib-moj-sub-navigation',\n imports: [],\n templateUrl: './moj-sub-navigation.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MojSubNavigationComponent implements OnInit, OnDestroy {\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: true }) public subNavId!: string;\n @Output() activeSubNavItemFragment = new EventEmitter<string>();\n\n /**\n * Sets up the listeners for the route fragment changes.\n * Emits the active navigation item when a fragment is present in the route.\n */\n private setupListeners(): void {\n // Basically we want to mimic the behaviour of the GDS tabs component, as this is how these will be used.\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeSubNavItemFragment.emit(fragment);\n }\n });\n }\n\n ngOnInit(): void {\n this.setupListeners();\n }\n\n /**\n * Lifecycle hook that is called when the component is about to be destroyed.\n * Unsubscribes from the route fragment subscription.\n */\n ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n}\n","<nav class=\"moj-sub-navigation\" aria-label=\"Sub navigation\" [id]=\"subNavId\">\n <ul class=\"moj-sub-navigation__list\">\n <ng-content></ng-content>\n </ul>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hmcts/opal-frontend-common",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^18.2.0 || ^19.0.0",