govuk-angular
Version:
Angular components port of govuk-frontend nunjucks macros.
96 lines (92 loc) • 10.5 kB
JavaScript
import { Component, ContentChildren, Input, Output, EventEmitter, } from '@angular/core';
import { GovUKTabComponent } from './tab.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class GovUKTabsComponent {
constructor() {
this.activeTabChange = new EventEmitter();
this.tabClick = new EventEmitter();
this.tabChange = new EventEmitter();
}
ngOnChanges(changes) {
this.tabActiveChange(changes);
}
// contentChildren are set
ngAfterContentInit() {
this.showTabs = this.tabs.filter((tab) => !tab.hide);
const activeTabs = this.tabs.filter((tab) => tab.active);
// if there is no active tab set, activate the first
if (activeTabs.length === 0) {
this.tabs.first.active = true;
}
if (this.activeTab !== '') {
this.activeTabChange.emit(this.tabs.first.id);
}
}
tabActiveChange(changes) {
if (!this.tabs) {
return;
}
const activeTabId = changes.activeTab.currentValue;
this.tabs.toArray().forEach((tab) => {
tab.active = (tab.id === activeTabId);
});
}
onClick(event, tabCurrent) {
this.tabs.toArray().forEach((tab) => (tab.active = false));
const tabClickEvent = { originEvent: event, id: tabCurrent.id, name: tabCurrent.label };
this.tabClick.emit(tabClickEvent);
if (tabCurrent.id !== this.activeTab) {
this.tabChange.emit(tabClickEvent);
}
tabCurrent.active = true;
this.activeTabChange.emit(tabCurrent.id);
}
}
GovUKTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
GovUKTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKTabsComponent, selector: "govuk-tabs", inputs: { id: "id", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange", tabClick: "tabClick", tabChange: "tabChange" }, queries: [{ propertyName: "tabs", predicate: GovUKTabComponent }], usesOnChanges: true, ngImport: i0, template: `
<ul class="govuk-tabs__list" id="tab-list-{{ id }}">
<li
*ngFor="let tab of showTabs"
class="govuk-tabs__list-item"
(click)="onClick($event, tab)"
[ngClass]="{ 'govuk-tabs__list-item--selected': tab.active }"
id="tab-list-item-{{ tab.id }}" >
<a class="govuk-tabs__tab" href="javascript://" id="tab-link-{{ tab.id }}" > {{ tab.label }} </a>
</li>
</ul>
<ng-content></ng-content>
`, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKTabsComponent, decorators: [{
type: Component,
args: [{
selector: 'govuk-tabs',
template: `
<ul class="govuk-tabs__list" id="tab-list-{{ id }}">
<li
*ngFor="let tab of showTabs"
class="govuk-tabs__list-item"
(click)="onClick($event, tab)"
[ngClass]="{ 'govuk-tabs__list-item--selected': tab.active }"
id="tab-list-item-{{ tab.id }}" >
<a class="govuk-tabs__tab" href="javascript://" id="tab-link-{{ tab.id }}" > {{ tab.label }} </a>
</li>
</ul>
<ng-content></ng-content>
`,
}]
}], propDecorators: { id: [{
type: Input
}], activeTab: [{
type: Input
}], activeTabChange: [{
type: Output
}], tabClick: [{
type: Output
}], tabChange: [{
type: Output
}], tabs: [{
type: ContentChildren,
args: [GovUKTabComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9nb3Z1ay1hbmd1bGFyL3NyYy9saWIvdGFicy90YWJzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUNULGVBQWUsRUFHZixLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksR0FHZixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBcUJwRCxNQUFNLE9BQU8sa0JBQWtCO0lBbEIvQjtRQXVCYyxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFckMsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFFeEMsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7S0FpRHREO0lBM0NHLFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCwwQkFBMEI7SUFDMUIsa0JBQWtCO1FBQ2QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFRLENBQUM7UUFFNUQsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV6RCxvREFBb0Q7UUFDcEQsSUFBSSxVQUFVLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRTtZQUN6QixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1NBQ2pDO1FBRUQsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLEVBQUUsRUFBRTtZQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQUM7SUFDL0UsQ0FBQztJQUVELGVBQWUsQ0FBQyxPQUFzQjtRQUNsQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtZQUFDLE9BQU87U0FBQztRQUN6QixNQUFNLFdBQVcsR0FBRyxPQUFPLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQztRQUVuRCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ2hDLEdBQUcsQ0FBQyxNQUFNLEdBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxLQUFLLFdBQVcsQ0FBQyxDQUFDO1FBQzNDLENBQUMsQ0FBQyxDQUFDO0lBRVAsQ0FBQztJQUVELE9BQU8sQ0FBQyxLQUFZLEVBQUUsVUFBNkI7UUFDL0MsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBRTNELE1BQU0sYUFBYSxHQUFhLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsVUFBVSxDQUFDLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBRWxHLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBRWxDLElBQUksVUFBVSxDQUFDLEVBQUUsS0FBSyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ3RDO1FBRUQsVUFBVSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFFekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzdDLENBQUM7OytHQXpEUSxrQkFBa0I7bUdBQWxCLGtCQUFrQixvTkFXVixpQkFBaUIsa0RBM0J4Qjs7Ozs7Ozs7Ozs7Ozs7R0FjWDsyRkFFVSxrQkFBa0I7a0JBbEI5QixTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxZQUFZO29CQUN0QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7O0dBY1g7aUJBQ0Y7OEJBR1ksRUFBRTtzQkFBVixLQUFLO2dCQUVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksZUFBZTtzQkFBeEIsTUFBTTtnQkFFRyxRQUFRO3NCQUFqQixNQUFNO2dCQUVHLFNBQVM7c0JBQWxCLE1BQU07Z0JBRTZCLElBQUk7c0JBQXZDLGVBQWU7dUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgU2ltcGxlQ2hhbmdlcyxcbiAgICBPbkNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgR292VUtUYWJDb21wb25lbnQgfSBmcm9tICcuL3RhYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgVGFiRXZlbnQgfSBmcm9tICcuL3RhYi1ldmVudHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2dvdnVrLXRhYnMnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPHVsIGNsYXNzPVwiZ292dWstdGFic19fbGlzdFwiIGlkPVwidGFiLWxpc3Qte3sgaWQgfX1cIj5cbiAgICAgIDxsaVxuICAgICAgICAqbmdGb3I9XCJsZXQgdGFiIG9mIHNob3dUYWJzXCJcbiAgICAgICAgY2xhc3M9XCJnb3Z1ay10YWJzX19saXN0LWl0ZW1cIlxuICAgICAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQsIHRhYilcIlxuICAgICAgICBbbmdDbGFzc109XCJ7ICdnb3Z1ay10YWJzX19saXN0LWl0ZW0tLXNlbGVjdGVkJzogdGFiLmFjdGl2ZSB9XCJcbiAgICAgICAgaWQ9XCJ0YWItbGlzdC1pdGVtLXt7IHRhYi5pZCB9fVwiID5cblxuICAgICAgICA8YSBjbGFzcz1cImdvdnVrLXRhYnNfX3RhYlwiIGhyZWY9XCJqYXZhc2NyaXB0Oi8vXCIgaWQ9XCJ0YWItbGluay17eyB0YWIuaWQgfX1cIiA+IHt7IHRhYi5sYWJlbCB9fSA8L2E+XG4gICAgICA8L2xpPlxuICAgIDwvdWw+XG5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIEdvdlVLVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgICBASW5wdXQoKSBpZDogc3RyaW5nO1xuXG4gICAgQElucHV0KCkgYWN0aXZlVGFiOiBzdHJpbmc7XG4gICAgQE91dHB1dCgpIGFjdGl2ZVRhYkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIEBPdXRwdXQoKSB0YWJDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8VGFiRXZlbnQ+KCk7XG5cbiAgICBAT3V0cHV0KCkgdGFiQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxUYWJFdmVudD4oKTtcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oR292VUtUYWJDb21wb25lbnQpIHRhYnM6IFF1ZXJ5TGlzdDxHb3ZVS1RhYkNvbXBvbmVudD47XG5cbiAgICBzaG93VGFiczogUXVlcnlMaXN0PEdvdlVLVGFiQ29tcG9uZW50PjtcblxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50YWJBY3RpdmVDaGFuZ2UoY2hhbmdlcyk7XG4gICAgfVxuXG4gICAgLy8gY29udGVudENoaWxkcmVuIGFyZSBzZXRcbiAgICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgICAgIHRoaXMuc2hvd1RhYnMgPSB0aGlzLnRhYnMuZmlsdGVyKCh0YWIpID0+ICF0YWIuaGlkZSkgYXMgYW55O1xuXG4gICAgICAgIGNvbnN0IGFjdGl2ZVRhYnMgPSB0aGlzLnRhYnMuZmlsdGVyKCh0YWIpID0+IHRhYi5hY3RpdmUpO1xuXG4gICAgICAgIC8vIGlmIHRoZXJlIGlzIG5vIGFjdGl2ZSB0YWIgc2V0LCBhY3RpdmF0ZSB0aGUgZmlyc3RcbiAgICAgICAgaWYgKGFjdGl2ZVRhYnMubGVuZ3RoID09PSAwKSB7XG4gICAgICAgICAgICB0aGlzLnRhYnMuZmlyc3QuYWN0aXZlID0gdHJ1ZTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLmFjdGl2ZVRhYiAhPT0gJycpIHt0aGlzLmFjdGl2ZVRhYkNoYW5nZS5lbWl0KHRoaXMudGFicy5maXJzdC5pZCk7fVxuICAgIH1cblxuICAgIHRhYkFjdGl2ZUNoYW5nZShjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgICAgIGlmICghdGhpcy50YWJzKSB7cmV0dXJuO31cbiAgICAgICAgY29uc3QgYWN0aXZlVGFiSWQgPSBjaGFuZ2VzLmFjdGl2ZVRhYi5jdXJyZW50VmFsdWU7XG5cbiAgICAgICAgdGhpcy50YWJzLnRvQXJyYXkoKS5mb3JFYWNoKCh0YWIpID0+IHtcbiAgICAgICAgICAgIHRhYi5hY3RpdmUgPSAgKHRhYi5pZCA9PT0gYWN0aXZlVGFiSWQpO1xuICAgICAgICB9KTtcblxuICAgIH1cblxuICAgIG9uQ2xpY2soZXZlbnQ6IEV2ZW50LCB0YWJDdXJyZW50OiBHb3ZVS1RhYkNvbXBvbmVudCkge1xuICAgICAgICB0aGlzLnRhYnMudG9BcnJheSgpLmZvckVhY2goKHRhYikgPT4gKHRhYi5hY3RpdmUgPSBmYWxzZSkpO1xuXG4gICAgICAgIGNvbnN0IHRhYkNsaWNrRXZlbnQ6IFRhYkV2ZW50ID0geyBvcmlnaW5FdmVudDogZXZlbnQsIGlkOiB0YWJDdXJyZW50LmlkLCBuYW1lOiB0YWJDdXJyZW50LmxhYmVsIH07XG5cbiAgICAgICAgdGhpcy50YWJDbGljay5lbWl0KHRhYkNsaWNrRXZlbnQpO1xuXG4gICAgICAgIGlmICh0YWJDdXJyZW50LmlkICE9PSB0aGlzLmFjdGl2ZVRhYikge1xuICAgICAgICAgICAgdGhpcy50YWJDaGFuZ2UuZW1pdCh0YWJDbGlja0V2ZW50KTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRhYkN1cnJlbnQuYWN0aXZlID0gdHJ1ZTtcblxuICAgICAgICB0aGlzLmFjdGl2ZVRhYkNoYW5nZS5lbWl0KHRhYkN1cnJlbnQuaWQpO1xuICAgIH1cbn1cbiJdfQ==