govuk-angular
Version:
Angular components port of govuk-frontend nunjucks macros.
65 lines (63 loc) • 14.2 kB
JavaScript
import { Component, ContentChildren, Input } from '@angular/core';
import { GovUKNavComponent } from './nav.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
export class GovUKNavBarComponent {
constructor(router, el) {
this.router = router;
this.el = el;
}
onClick($event, nav, id) {
$event.preventDefault();
this.selectNav(nav);
this.router.navigate([nav.link]);
this.setFocus(id);
}
createId(choice) {
return choice.toLowerCase().replace(/\s/gm, '-') + '-' + this.id;
}
setFocus(id) {
this.el.nativeElement.querySelector('#' + id).blur();
}
selectNav(navCurrent) {
this.navs.toArray().forEach(nav => (nav.active = false));
navCurrent.active = true;
}
}
GovUKNavBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKNavBarComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
GovUKNavBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: GovUKNavBarComponent, selector: "govuk-navbar", inputs: { id: "id" }, queries: [{ propertyName: "navs", predicate: GovUKNavComponent }], ngImport: i0, template: `
<nav class="app-subnav">
<ul class="app-subnav__section">
<li *ngFor="let nav of navs" class="app-subnav__section-item " [ngClass]="{'app-subnav__section-item--current': nav.active}" >
<a class="app-subnav__link govuk-link govuk-link--no-visited-state"
[id]="createId(nav.label)"
href="#"
(click)="onClick($event, nav, createId(nav.label))"
routerLinkActive="active"> {{nav.label}} </a>
</li>
</ul>
</nav>
`, isInline: true, styles: ["@charset \"UTF-8\";.app-subnav{margin-bottom:100px;padding:30px 15px 0 0;font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:14px;font-size:.875rem;line-height:1.14286}@media print{.app-subnav{font-family:sans-serif}}@media (min-width: 40.0625em){.app-subnav{font-size:16px;font-size:1rem;line-height:1.25}}@media print{.app-subnav{font-size:14pt;line-height:1.2}}.app-subnav__section{margin:0 0 20px;padding:0;list-style-type:none}.app-subnav__link{padding:2px 0;text-decoration:none}.app-subnav__link:not(:focus):hover{color:#1d70b8;text-decoration:underline}.app-subnav__section-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.app-subnav__section-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8}.app-subnav__section-item--current .app-subnav__link{font-weight:700}.app-subnav__section--nested{margin-top:10px;margin-bottom:0;padding-left:20px}.app-subnav__section--nested .app-subnav__section-item:before{content:\"\\2014\";margin-left:-20px;color:#505a5f}.app-subnav__section--nested .app-subnav__link{padding-left:0;font-weight:400}.app-subnav__theme{margin:0;padding:10px 15px 10px 0;color:#505a5f;font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25}@media print{.app-subnav__theme{font-family:sans-serif}}@media (min-width: 40.0625em){.app-subnav__theme{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-subnav__theme{font-size:14pt;line-height:1.15}}.app-page-navigation__item{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25;margin-bottom:10px}@media print{.app-page-navigation__item{font-family:sans-serif}}@media (min-width: 40.0625em){.app-page-navigation__item{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-page-navigation__item{font-size:14pt;line-height:1.15}}@media (min-width: 40.0625em){.app-page-navigation__item{display:none}}.app-page-navigation__item:before{content:\"\\2014\";margin-left:-20px;padding-right:5px}.app-navigation{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:16px;font-size:1rem;line-height:1.25;box-sizing:border-box;width:100%;background-color:#f8f8f8}@media print{.app-navigation{font-family:sans-serif}}@media (min-width: 40.0625em){.app-navigation{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-navigation{font-size:14pt;line-height:1.15}}@media (max-width: 40.0525em){.app-navigation{display:none}}.app-navigation__list{position:relative;left:-15px;margin:0;padding:0;list-style:none}.app-navigation__list-item{box-sizing:border-box;display:block;position:relative;height:50px;padding:0 15px;float:left;line-height:50px}.app-navigation__list-item--current{border-bottom:4px solid #1d70b8}.app-navigation__link{font-weight:700;text-decoration:none}.app-navigation__link:not(:focus):visited{color:#1d70b8}.app-navigation__link:not(:focus):hover{color:#1d70b8;text-decoration:underline}.app-navigation__link:after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0}.app-navigation__list-item--current .app-navigation__link:hover{text-decoration:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: GovUKNavBarComponent, decorators: [{
type: Component,
args: [{ selector: 'govuk-navbar', template: `
<nav class="app-subnav">
<ul class="app-subnav__section">
<li *ngFor="let nav of navs" class="app-subnav__section-item " [ngClass]="{'app-subnav__section-item--current': nav.active}" >
<a class="app-subnav__link govuk-link govuk-link--no-visited-state"
[id]="createId(nav.label)"
href="#"
(click)="onClick($event, nav, createId(nav.label))"
routerLinkActive="active"> {{nav.label}} </a>
</li>
</ul>
</nav>
`, styles: ["@charset \"UTF-8\";.app-subnav{margin-bottom:100px;padding:30px 15px 0 0;font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:14px;font-size:.875rem;line-height:1.14286}@media print{.app-subnav{font-family:sans-serif}}@media (min-width: 40.0625em){.app-subnav{font-size:16px;font-size:1rem;line-height:1.25}}@media print{.app-subnav{font-size:14pt;line-height:1.2}}.app-subnav__section{margin:0 0 20px;padding:0;list-style-type:none}.app-subnav__link{padding:2px 0;text-decoration:none}.app-subnav__link:not(:focus):hover{color:#1d70b8;text-decoration:underline}.app-subnav__section-item{margin-bottom:5px;padding-top:5px;padding-bottom:5px}.app-subnav__section-item--current{margin-left:-14px;padding-left:10px;border-left:4px solid #1d70b8}.app-subnav__section-item--current .app-subnav__link{font-weight:700}.app-subnav__section--nested{margin-top:10px;margin-bottom:0;padding-left:20px}.app-subnav__section--nested .app-subnav__section-item:before{content:\"\\2014\";margin-left:-20px;color:#505a5f}.app-subnav__section--nested .app-subnav__link{padding-left:0;font-weight:400}.app-subnav__theme{margin:0;padding:10px 15px 10px 0;color:#505a5f;font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25}@media print{.app-subnav__theme{font-family:sans-serif}}@media (min-width: 40.0625em){.app-subnav__theme{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-subnav__theme{font-size:14pt;line-height:1.15}}.app-page-navigation__item{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25;margin-bottom:10px}@media print{.app-page-navigation__item{font-family:sans-serif}}@media (min-width: 40.0625em){.app-page-navigation__item{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-page-navigation__item{font-size:14pt;line-height:1.15}}@media (min-width: 40.0625em){.app-page-navigation__item{display:none}}.app-page-navigation__item:before{content:\"\\2014\";margin-left:-20px;padding-right:5px}.app-navigation{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:16px;font-size:1rem;line-height:1.25;box-sizing:border-box;width:100%;background-color:#f8f8f8}@media print{.app-navigation{font-family:sans-serif}}@media (min-width: 40.0625em){.app-navigation{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.app-navigation{font-size:14pt;line-height:1.15}}@media (max-width: 40.0525em){.app-navigation{display:none}}.app-navigation__list{position:relative;left:-15px;margin:0;padding:0;list-style:none}.app-navigation__list-item{box-sizing:border-box;display:block;position:relative;height:50px;padding:0 15px;float:left;line-height:50px}.app-navigation__list-item--current{border-bottom:4px solid #1d70b8}.app-navigation__link{font-weight:700;text-decoration:none}.app-navigation__link:not(:focus):visited{color:#1d70b8}.app-navigation__link:not(:focus):hover{color:#1d70b8;text-decoration:underline}.app-navigation__link:after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0}.app-navigation__list-item--current .app-navigation__link:hover{text-decoration:none}\n"] }]
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
type: Input
}], navs: [{
type: ContentChildren,
args: [GovUKNavComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2dvdnVrLWFuZ3VsYXIvc3JjL2xpYi9uYXZiYXIvbmF2YmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBYSxLQUFLLEVBQWMsTUFBTSxlQUFlLENBQUM7QUFHekYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7QUFvQnBELE1BQU0sT0FBTyxvQkFBb0I7SUFLN0IsWUFBbUIsTUFBYyxFQUFTLEVBQWM7UUFBckMsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUFTLE9BQUUsR0FBRixFQUFFLENBQVk7SUFBRyxDQUFDO0lBRTVELE9BQU8sQ0FBQyxNQUFhLEVBQUUsR0FBc0IsRUFBRSxFQUFVO1FBQ3JELE1BQU0sQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN0QixDQUFDO0lBRUQsUUFBUSxDQUFDLE1BQWM7UUFDbkIsT0FBTyxNQUFNLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQztJQUNyRSxDQUFDO0lBRUQsUUFBUSxDQUFDLEVBQVU7UUFDZixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsR0FBRyxHQUFHLEVBQUUsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pELENBQUM7SUFHRCxTQUFTLENBQUMsVUFBNkI7UUFDbkMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUN6RCxVQUFVLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztJQUM3QixDQUFDOztpSEExQlEsb0JBQW9CO3FHQUFwQixvQkFBb0IsK0ZBR1osaUJBQWlCLDZCQWxCeEI7Ozs7Ozs7Ozs7Ozs7Q0FhYjsyRkFFWSxvQkFBb0I7a0JBbEJoQyxTQUFTOytCQUNJLGNBQWMsWUFFZDs7Ozs7Ozs7Ozs7OztDQWFiO3NIQUdZLEVBQUU7c0JBQVYsS0FBSztnQkFFOEIsSUFBSTtzQkFBdkMsZUFBZTt1QkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBRdWVyeUxpc3QsIElucHV0LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuXG5pbXBvcnQgeyBHb3ZVS05hdkNvbXBvbmVudCB9IGZyb20gJy4vbmF2LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZ292dWstbmF2YmFyJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uYXZpZ2F0aW9uLnNjc3MnXSxcbiAgICB0ZW1wbGF0ZTogYFxuICA8bmF2IGNsYXNzPVwiYXBwLXN1Ym5hdlwiPlxuICAgIDx1bCBjbGFzcz1cImFwcC1zdWJuYXZfX3NlY3Rpb25cIj5cbiAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBuYXYgb2YgbmF2c1wiICBjbGFzcz1cImFwcC1zdWJuYXZfX3NlY3Rpb24taXRlbSBcIiAgW25nQ2xhc3NdPVwieydhcHAtc3VibmF2X19zZWN0aW9uLWl0ZW0tLWN1cnJlbnQnOiBuYXYuYWN0aXZlfVwiID5cbiAgICAgICAgICAgICAgPGEgY2xhc3M9XCJhcHAtc3VibmF2X19saW5rICBnb3Z1ay1saW5rIGdvdnVrLWxpbmstLW5vLXZpc2l0ZWQtc3RhdGVcIlxuICAgICAgICAgICAgICAgICBbaWRdPVwiY3JlYXRlSWQobmF2LmxhYmVsKVwiXG4gICAgICAgICAgICAgICAgIGhyZWY9XCIjXCJcbiAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50LCBuYXYsIGNyZWF0ZUlkKG5hdi5sYWJlbCkpXCJcbiAgICAgICAgICAgICAgICAgcm91dGVyTGlua0FjdGl2ZT1cImFjdGl2ZVwiPiB7e25hdi5sYWJlbH19ICA8L2E+XG4gICAgICAgIDwvbGk+XG5cbiAgICA8L3VsPlxuICA8L25hdj5cbmBcbn0pXG5leHBvcnQgY2xhc3MgR292VUtOYXZCYXJDb21wb25lbnQgIHtcbiAgICBASW5wdXQoKSBpZDogc3RyaW5nO1xuXG4gICAgQENvbnRlbnRDaGlsZHJlbihHb3ZVS05hdkNvbXBvbmVudCkgbmF2czogUXVlcnlMaXN0PEdvdlVLTmF2Q29tcG9uZW50PjtcblxuICAgIGNvbnN0cnVjdG9yKHB1YmxpYyByb3V0ZXI6IFJvdXRlciwgcHVibGljIGVsOiBFbGVtZW50UmVmKSB7fVxuXG4gICAgb25DbGljaygkZXZlbnQ6IEV2ZW50LCBuYXY6IEdvdlVLTmF2Q29tcG9uZW50LCBpZDogc3RyaW5nKSB7XG4gICAgICAgICRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICB0aGlzLnNlbGVjdE5hdihuYXYpO1xuICAgICAgICB0aGlzLnJvdXRlci5uYXZpZ2F0ZShbbmF2LmxpbmtdKTtcbiAgICAgICAgdGhpcy5zZXRGb2N1cyhpZCk7XG4gICAgfVxuXG4gICAgY3JlYXRlSWQoY2hvaWNlOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gY2hvaWNlLnRvTG93ZXJDYXNlKCkucmVwbGFjZSgvXFxzL2dtLCAnLScpICsgJy0nICsgdGhpcy5pZDtcbiAgICB9XG5cbiAgICBzZXRGb2N1cyhpZDogc3RyaW5nKSB7XG4gICAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcjJyArIGlkKS5ibHVyKCk7XG4gICAgfVxuXG5cbiAgICBzZWxlY3ROYXYobmF2Q3VycmVudDogR292VUtOYXZDb21wb25lbnQpIHtcbiAgICAgICAgdGhpcy5uYXZzLnRvQXJyYXkoKS5mb3JFYWNoKG5hdiA9PiAobmF2LmFjdGl2ZSA9IGZhbHNlKSk7XG4gICAgICAgIG5hdkN1cnJlbnQuYWN0aXZlID0gdHJ1ZTtcbiAgICB9XG5cbn1cbiJdfQ==