@hmcts/opal-frontend-common 0.0.56 → 0.0.57

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.
@@ -12,6 +12,9 @@ class GovukTabsListItemComponent {
12
12
  get hostClass() {
13
13
  return this.isActive ? 'govuk-tabs__list-item govuk-tabs__list-item--selected' : 'govuk-tabs__list-item';
14
14
  }
15
+ get hostRole() {
16
+ return 'presentation';
17
+ }
15
18
  /**
16
19
  * Resolves the tab item ID, using the tabs prefix when none is provided.
17
20
  */
@@ -44,7 +47,7 @@ class GovukTabsListItemComponent {
44
47
  this.router.navigate(['./'], { relativeTo: this.route, fragment });
45
48
  }
46
49
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GovukTabsListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
47
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GovukTabsListItemComponent, isStandalone: true, selector: "opal-lib-govuk-tabs-list-item, [opal-lib-govuk-tabs-list-item]", inputs: { tabItemId: "tabItemId", tabItemFragment: "tabItemFragment", activeTabItemFragment: "activeTabItemFragment" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<a\n #tabLink\n class=\"govuk-tabs__tab\"\n (click)=\"handleItemClick($event, tabItemFragment)\"\n [attr.href]=\"'#' + tabItemFragment\"\n [id]=\"resolvedTabItemId\"\n role=\"tab\"\n [attr.aria-controls]=\"tabItemFragment\"\n [attr.aria-selected]=\"isActive ? 'true' : 'false'\"\n [attr.tabindex]=\"isActive ? 0 : -1\"\n>\n <ng-content></ng-content>\n</a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
50
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GovukTabsListItemComponent, isStandalone: true, selector: "opal-lib-govuk-tabs-list-item, [opal-lib-govuk-tabs-list-item]", inputs: { tabItemId: "tabItemId", tabItemFragment: "tabItemFragment", activeTabItemFragment: "activeTabItemFragment" }, host: { properties: { "class": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: "<a\n #tabLink\n class=\"govuk-tabs__tab\"\n (click)=\"handleItemClick($event, tabItemFragment)\"\n [attr.href]=\"'#' + tabItemFragment\"\n [id]=\"resolvedTabItemId\"\n role=\"tab\"\n [attr.aria-controls]=\"tabItemFragment\"\n [attr.aria-selected]=\"isActive ? 'true' : 'false'\"\n [attr.tabindex]=\"isActive ? 0 : -1\"\n>\n <ng-content></ng-content>\n</a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
48
51
  }
49
52
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GovukTabsListItemComponent, decorators: [{
50
53
  type: Component,
@@ -61,6 +64,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
61
64
  }], hostClass: [{
62
65
  type: HostBinding,
63
66
  args: ['class']
67
+ }], hostRole: [{
68
+ type: HostBinding,
69
+ args: ['attr.role']
64
70
  }] } });
65
71
 
66
72
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"hmcts-opal-frontend-common-components-govuk-govuk-tabs-govuk-tabs-list-item.mjs","sources":["../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/govuk-tabs-list-item.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/govuk-tabs-list-item.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/hmcts-opal-frontend-common-components-govuk-govuk-tabs-govuk-tabs-list-item.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, inject } from '@angular/core';\nimport { Router, ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-govuk-tabs-list-item, [opal-lib-govuk-tabs-list-item]',\n templateUrl: './govuk-tabs-list-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsListItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n @Input({ required: false }) public tabItemId?: string;\n @Input({ required: true }) public tabItemFragment!: string;\n @Input({ required: true }) public activeTabItemFragment!: string;\n\n @HostBinding('class')\n /**\n * Returns the host class based on active state.\n */\n get hostClass(): string {\n return this.isActive ? 'govuk-tabs__list-item govuk-tabs__list-item--selected' : 'govuk-tabs__list-item';\n }\n\n /**\n * Resolves the tab item ID, using the tabs prefix when none is provided.\n */\n get resolvedTabItemId(): string {\n if (this.tabItemId) {\n return this.tabItemId;\n }\n\n const prefix = this.elementRef.nativeElement.closest('.govuk-tabs')?.id ?? 'tab';\n return `${prefix}-${this.tabItemFragment}`;\n }\n\n /**\n * Indicates whether this tab matches the active fragment.\n */\n get isActive(): boolean {\n return this.activeTabItemFragment === this.tabItemFragment;\n }\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 this.activate(item);\n }\n\n /**\n * Navigates to the provided fragment.\n */\n public activate(fragment: string): void {\n this.router.navigate(['./'], { relativeTo: this.route, fragment });\n }\n}\n","<a\n #tabLink\n class=\"govuk-tabs__tab\"\n (click)=\"handleItemClick($event, tabItemFragment)\"\n [attr.href]=\"'#' + tabItemFragment\"\n [id]=\"resolvedTabItemId\"\n role=\"tab\"\n [attr.aria-controls]=\"tabItemFragment\"\n [attr.aria-selected]=\"isActive ? 'true' : 'false'\"\n [attr.tabindex]=\"isActive ? 0 : -1\"\n>\n <ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAQa,0BAA0B,CAAA;AACpB,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAC9B,IAAA,UAAU,GAAG,MAAM,EAAC,UAAuB,EAAC;AAE1B,IAAA,SAAS;AACV,IAAA,eAAe;AACf,IAAA,qBAAqB;AAEvD,IAAA,IAII,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,GAAG,uDAAuD,GAAG,uBAAuB;IAC1G;AAEA;;AAEG;AACH,IAAA,IAAI,iBAAiB,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS;QACvB;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,EAAE,IAAI,KAAK;AAChF,QAAA,OAAO,GAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,EAAE;IAC5C;AAEA;;AAEG;AACH,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC,eAAe;IAC5D;AAEA;;;;AAIG;IACI,eAAe,CAAC,KAAY,EAAE,IAAY,EAAA;QAC/C,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrB;AAEA;;AAEG;AACI,IAAA,QAAQ,CAAC,QAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;IACpE;wGAnDW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,uSCRvC,iXAaA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDLa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBALtC,SAAS;+BACE,gEAAgE,EAAA,eAAA,EAEzD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iXAAA,EAAA;;sBAO9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBACxB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBAExB,WAAW;uBAAC,OAAO;;;AEjBtB;;AAEG;;;;"}
1
+ {"version":3,"file":"hmcts-opal-frontend-common-components-govuk-govuk-tabs-govuk-tabs-list-item.mjs","sources":["../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/govuk-tabs-list-item.component.ts","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/govuk-tabs-list-item.component.html","../../../projects/opal-frontend-common/components/govuk/govuk-tabs/govuk-tabs-list-item/hmcts-opal-frontend-common-components-govuk-govuk-tabs-govuk-tabs-list-item.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, inject } from '@angular/core';\nimport { Router, ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'opal-lib-govuk-tabs-list-item, [opal-lib-govuk-tabs-list-item]',\n templateUrl: './govuk-tabs-list-item.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsListItemComponent {\n private readonly router = inject(Router);\n private readonly route = inject(ActivatedRoute);\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n @Input({ required: false }) public tabItemId?: string;\n @Input({ required: true }) public tabItemFragment!: string;\n @Input({ required: true }) public activeTabItemFragment!: string;\n\n @HostBinding('class')\n /**\n * Returns the host class based on active state.\n */\n get hostClass(): string {\n return this.isActive ? 'govuk-tabs__list-item govuk-tabs__list-item--selected' : 'govuk-tabs__list-item';\n }\n\n @HostBinding('attr.role')\n /**\n * Sets the host role attribute.\n */\n get hostRole(): string {\n return 'presentation';\n }\n\n /**\n * Resolves the tab item ID, using the tabs prefix when none is provided.\n */\n get resolvedTabItemId(): string {\n if (this.tabItemId) {\n return this.tabItemId;\n }\n\n const prefix = this.elementRef.nativeElement.closest('.govuk-tabs')?.id ?? 'tab';\n return `${prefix}-${this.tabItemFragment}`;\n }\n\n /**\n * Indicates whether this tab matches the active fragment.\n */\n get isActive(): boolean {\n return this.activeTabItemFragment === this.tabItemFragment;\n }\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 this.activate(item);\n }\n\n /**\n * Navigates to the provided fragment.\n */\n public activate(fragment: string): void {\n this.router.navigate(['./'], { relativeTo: this.route, fragment });\n }\n}\n","<a\n #tabLink\n class=\"govuk-tabs__tab\"\n (click)=\"handleItemClick($event, tabItemFragment)\"\n [attr.href]=\"'#' + tabItemFragment\"\n [id]=\"resolvedTabItemId\"\n role=\"tab\"\n [attr.aria-controls]=\"tabItemFragment\"\n [attr.aria-selected]=\"isActive ? 'true' : 'false'\"\n [attr.tabindex]=\"isActive ? 0 : -1\"\n>\n <ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAQa,0BAA0B,CAAA;AACpB,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAC9B,IAAA,UAAU,GAAG,MAAM,EAAC,UAAuB,EAAC;AAE1B,IAAA,SAAS;AACV,IAAA,eAAe;AACf,IAAA,qBAAqB;AAEvD,IAAA,IAII,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,QAAQ,GAAG,uDAAuD,GAAG,uBAAuB;IAC1G;AAEA,IAAA,IAII,QAAQ,GAAA;AACV,QAAA,OAAO,cAAc;IACvB;AAEA;;AAEG;AACH,IAAA,IAAI,iBAAiB,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS;QACvB;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,EAAE,IAAI,KAAK;AAChF,QAAA,OAAO,GAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAC,eAAe,EAAE;IAC5C;AAEA;;AAEG;AACH,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC,eAAe;IAC5D;AAEA;;;;AAIG;IACI,eAAe,CAAC,KAAY,EAAE,IAAY,EAAA;QAC/C,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrB;AAEA;;AAEG;AACI,IAAA,QAAQ,CAAC,QAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;IACpE;wGA3DW,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,qUCRvC,iXAaA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDLa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBALtC,SAAS;+BACE,gEAAgE,EAAA,eAAA,EAEzD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iXAAA,EAAA;;sBAO9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBACxB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBAExB,WAAW;uBAAC,OAAO;;sBAQnB,WAAW;uBAAC,WAAW;;;AEzB1B;;AAEG;;;;"}
@@ -16,6 +16,12 @@ class GovukTabsComponent {
16
16
  get titleId() {
17
17
  return `${this.tabId}-title`;
18
18
  }
19
+ /*
20
+ * Returns the role attribute for the tabs list.
21
+ */
22
+ get role() {
23
+ return 'tablist';
24
+ }
19
25
  /**
20
26
  * Subscribes to URL fragment changes and emits active tab updates.
21
27
  */
@@ -45,11 +51,11 @@ class GovukTabsComponent {
45
51
  this.ngUnsubscribe.complete();
46
52
  }
47
53
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GovukTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
48
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GovukTabsComponent, isStandalone: true, selector: "opal-lib-govuk-tabs", inputs: { tabId: "tabId", titleText: "titleText" }, outputs: { activeTabFragmentChange: "activeTabFragmentChange" }, ngImport: i0, template: "<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
54
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GovukTabsComponent, isStandalone: true, selector: "opal-lib-govuk-tabs", inputs: { tabId: "tabId", titleText: "titleText" }, outputs: { activeTabFragmentChange: "activeTabFragmentChange" }, ngImport: i0, template: "<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\" [attr.role]=\"role\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
49
55
  }
50
56
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GovukTabsComponent, decorators: [{
51
57
  type: Component,
52
- args: [{ selector: 'opal-lib-govuk-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n" }]
58
+ args: [{ selector: 'opal-lib-govuk-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\" [attr.role]=\"role\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n" }]
53
59
  }], propDecorators: { tabId: [{
54
60
  type: Input,
55
61
  args: [{ required: false }]
@@ -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-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 {\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\nlet nextTabsId = 0;\n\n@Component({\n selector: 'opal-lib-govuk-tabs',\n templateUrl: './govuk-tabs.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsComponent implements OnInit, OnDestroy {\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: false }) public tabId = `govuk-tabs-${++nextTabsId}`;\n @Input({ required: false }) public titleText = 'Contents';\n @Output() public activeTabFragmentChange = new EventEmitter<string>();\n\n /**\n * Returns the ID for the tabs title element.\n */\n get titleId(): string {\n return `${this.tabId}-title`;\n }\n\n /**\n * Subscribes to URL fragment changes and emits active tab updates.\n */\n private setupListeners(): void {\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeTabFragmentChange.emit(fragment);\n }\n });\n }\n\n /**\n * Angular lifecycle hook that is called after the component's data-bound properties have been initialized.\n * Initializes the component by setting up necessary event listeners.\n *\n * @remarks\n * This method is part of the Angular OnInit lifecycle interface.\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 // GOV.UK tabs keyboard navigation is handled by govuk-frontend JavaScript when enabled.\n}\n","<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAaA,IAAI,UAAU,GAAG,CAAC;MAOL,kBAAkB,CAAA;AACZ,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAC9B,IAAA,aAAa,GAAG,IAAI,OAAO,EAAQ;AAEjB,IAAA,KAAK,GAAG,CAAA,WAAA,EAAc,EAAE,UAAU,EAAE;IACpC,SAAS,GAAG,UAAU;AACxC,IAAA,uBAAuB,GAAG,IAAI,YAAY,EAAU;AAErE;;AAEG;AACH,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,QAAQ;IAC9B;AAEA;;AAEG;IACK,cAAc,GAAA;QACpB,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,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC7C;AACF,QAAA,CAAC,CAAC;IACJ;AAEA;;;;;;AAMG;IACI,QAAQ,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;IACvB;AAEA;;;AAGG;IACI,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;IAC/B;wGA5CW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,oMCpB/B,iXAOA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDaa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAEd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iXAAA,EAAA;;sBAM9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB;;;AE1BH;;AAEG;;;;"}
1
+ {"version":3,"file":"hmcts-opal-frontend-common-components-govuk-govuk-tabs.mjs","sources":["../../../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 {\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\nlet nextTabsId = 0;\n\n@Component({\n selector: 'opal-lib-govuk-tabs',\n templateUrl: './govuk-tabs.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GovukTabsComponent implements OnInit, OnDestroy {\n private readonly route = inject(ActivatedRoute);\n private readonly ngUnsubscribe = new Subject<void>();\n\n @Input({ required: false }) public tabId = `govuk-tabs-${++nextTabsId}`;\n @Input({ required: false }) public titleText = 'Contents';\n @Output() public activeTabFragmentChange = new EventEmitter<string>();\n\n /**\n * Returns the ID for the tabs title element.\n */\n get titleId(): string {\n return `${this.tabId}-title`;\n }\n\n /*\n * Returns the role attribute for the tabs list.\n */\n get role(): string {\n return 'tablist';\n }\n\n /**\n * Subscribes to URL fragment changes and emits active tab updates.\n */\n private setupListeners(): void {\n this.route.fragment.pipe(takeUntil(this.ngUnsubscribe)).subscribe((fragment) => {\n if (fragment) {\n this.activeTabFragmentChange.emit(fragment);\n }\n });\n }\n\n /**\n * Angular lifecycle hook that is called after the component's data-bound properties have been initialized.\n * Initializes the component by setting up necessary event listeners.\n *\n * @remarks\n * This method is part of the Angular OnInit lifecycle interface.\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 // GOV.UK tabs keyboard navigation is handled by govuk-frontend JavaScript when enabled.\n}\n","<div class=\"govuk-tabs govuk-frontend-supported\" data-module=\"govuk-tabs\" [id]=\"tabId\">\n <h2 class=\"govuk-tabs__title\" [id]=\"titleId\">{{ titleText }}</h2>\n <ul class=\"govuk-tabs__list\" [attr.aria-labelledby]=\"titleId\" [attr.role]=\"role\">\n <ng-content select=\"[tab-list-items]\"></ng-content>\n </ul>\n <ng-content select=\"[tab-panels]\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAaA,IAAI,UAAU,GAAG,CAAC;MAOL,kBAAkB,CAAA;AACZ,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AAC9B,IAAA,aAAa,GAAG,IAAI,OAAO,EAAQ;AAEjB,IAAA,KAAK,GAAG,CAAA,WAAA,EAAc,EAAE,UAAU,EAAE;IACpC,SAAS,GAAG,UAAU;AACxC,IAAA,uBAAuB,GAAG,IAAI,YAAY,EAAU;AAErE;;AAEG;AACH,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,QAAQ;IAC9B;AAEA;;AAEG;AACH,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,SAAS;IAClB;AAEA;;AAEG;IACK,cAAc,GAAA;QACpB,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,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC7C;AACF,QAAA,CAAC,CAAC;IACJ;AAEA;;;;;;AAMG;IACI,QAAQ,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;IACvB;AAEA;;;AAGG;IACI,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;IAC/B;wGAnDW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,oMCpB/B,sYAOA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDaa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAEd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,sYAAA,EAAA;;sBAM9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;;sBACzB;;;AE1BH;;AAEG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hmcts/opal-frontend-common",
3
- "version": "0.0.56",
3
+ "version": "0.0.57",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -8,6 +8,7 @@ declare class GovukTabsListItemComponent {
8
8
  tabItemFragment: string;
9
9
  activeTabItemFragment: string;
10
10
  get hostClass(): string;
11
+ get hostRole(): string;
11
12
  /**
12
13
  * Resolves the tab item ID, using the tabs prefix when none is provided.
13
14
  */
@@ -11,6 +11,7 @@ declare class GovukTabsComponent implements OnInit, OnDestroy {
11
11
  * Returns the ID for the tabs title element.
12
12
  */
13
13
  get titleId(): string;
14
+ get role(): string;
14
15
  /**
15
16
  * Subscribes to URL fragment changes and emits active tab updates.
16
17
  */