@edugouvfr/ngx-dsfr
Version:
NgxDsfr est un portage Angular des éléments d'interface du Système de Design de l'État Français (DSFR).
36 lines • 13.3 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { DsfrI18nPipe } from '../../../shared/i18n/i18n.pipe';
import { DsfrLinkComponent } from '../../link';
import { ItemLinkComponent } from '../../link/item-link.component';
import * as i0 from "@angular/core";
export class DsfrMegaMenuComponent {
constructor() {
/**Emet l'évènement Event du DOM à la sélection d'un lien */
this.linkSelect = new EventEmitter();
/**Emet l'évènement Event du DOM à la fermeture du méga menu */
this.closeSelect = new EventEmitter();
}
onLink(event) {
this.linkSelect.emit(event);
}
onClose() {
this.closeSelect.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrMegaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DsfrMegaMenuComponent, isStandalone: true, selector: "dsfr-mega-menu", inputs: { megaMenu: "megaMenu", idMenu: "idMenu" }, outputs: { linkSelect: "linkSelect", closeSelect: "closeSelect" }, ngImport: i0, template: "<div class=\"fr-container fr-container--fluid fr-container-lg\">\n <div class=\"fr-grid-row fr-grid-row-lg--gutters\">\n <div class=\"fr-col-12 fr-mb-n3v\">\n <button\n type=\"button\"\n (click)=\"onClose()\"\n class=\"fr-btn--close fr-btn\"\n [title]=\"'commons.close' | dsfrI18n\"\n [attr.aria-controls]=\"'mega-menu-' + idMenu\">\n {{ 'commons.close' | dsfrI18n }}\n </button>\n </div>\n @if (megaMenu.leader) {\n <div class=\"fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right\">\n <div class=\"fr-mega-menu__leader\">\n <h4 class=\"fr-h4 fr-mb-2v\">{{ megaMenu.leader.title }}</h4>\n @if (megaMenu.leader.text) {\n <p class=\"fr-hidden fr-unhidden-lg\">{{ megaMenu.leader.text }}</p>\n }\n @if (megaMenu.leader.link) {\n <edu-item-link\n [item]=\"megaMenu.leader.link\"\n [icon]=\"'fr-icon-arrow-right-line'\"\n (linkSelect)=\"onLink(megaMenu.leader.link)\"></edu-item-link>\n }\n </div>\n </div>\n }\n @for (category of megaMenu.categories; track category) {\n <div class=\"fr-col-12 fr-col-lg-3\">\n @if (category.label) {\n <h5 class=\"fr-mega-menu__category\">\n @if (!category.link) {\n <span class=\"fr-nav__link\">{{ category.label }}</span>\n }\n @if (category.link) {\n <dsfr-link\n [label]=\"category.label\"\n [customClass]=\"'fr-nav__link'\"\n [link]=\"category.link\"\n linkTarget=\"_self\">\n </dsfr-link>\n }\n </h5>\n }\n <ul class=\"fr-mega-menu__list\">\n @for (link of category.subItems; track link) {\n <li>\n @if (link) {\n <edu-item-link [item]=\"link\" customClass=\"fr-nav__link\" (linkSelect)=\"onLink(link)\"></edu-item-link>\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n</div>\n", styles: [".fr-mega-menu .fr-container:before{content:\"\";display:block;padding-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: ItemLinkComponent, selector: "edu-item-link", inputs: ["defaultIconPosition", "item"] }, { kind: "component", type: DsfrLinkComponent, selector: "dsfr-link", inputs: ["ariaCurrent", "ariaLabel", "ariaControls", "customClass", "disabled", "icon", "iconPosition", "linkId", "label", "link", "linkTarget", "route", "routePath", "routerLinkActive", "routerLinkActiveOptions", "routerLinkExtras", "linkSize", "tooltipMessage", "mode", "ariaCurrentWhenActive", "size", "targetLink", "routerLink"], outputs: ["linkSelect"] }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: DsfrI18nPipe, name: "dsfrI18n" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrMegaMenuComponent, decorators: [{
type: Component,
args: [{ selector: 'dsfr-mega-menu', encapsulation: ViewEncapsulation.None, imports: [FormsModule, ItemLinkComponent, DsfrLinkComponent, RouterModule, DsfrI18nPipe], standalone: true, template: "<div class=\"fr-container fr-container--fluid fr-container-lg\">\n <div class=\"fr-grid-row fr-grid-row-lg--gutters\">\n <div class=\"fr-col-12 fr-mb-n3v\">\n <button\n type=\"button\"\n (click)=\"onClose()\"\n class=\"fr-btn--close fr-btn\"\n [title]=\"'commons.close' | dsfrI18n\"\n [attr.aria-controls]=\"'mega-menu-' + idMenu\">\n {{ 'commons.close' | dsfrI18n }}\n </button>\n </div>\n @if (megaMenu.leader) {\n <div class=\"fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right\">\n <div class=\"fr-mega-menu__leader\">\n <h4 class=\"fr-h4 fr-mb-2v\">{{ megaMenu.leader.title }}</h4>\n @if (megaMenu.leader.text) {\n <p class=\"fr-hidden fr-unhidden-lg\">{{ megaMenu.leader.text }}</p>\n }\n @if (megaMenu.leader.link) {\n <edu-item-link\n [item]=\"megaMenu.leader.link\"\n [icon]=\"'fr-icon-arrow-right-line'\"\n (linkSelect)=\"onLink(megaMenu.leader.link)\"></edu-item-link>\n }\n </div>\n </div>\n }\n @for (category of megaMenu.categories; track category) {\n <div class=\"fr-col-12 fr-col-lg-3\">\n @if (category.label) {\n <h5 class=\"fr-mega-menu__category\">\n @if (!category.link) {\n <span class=\"fr-nav__link\">{{ category.label }}</span>\n }\n @if (category.link) {\n <dsfr-link\n [label]=\"category.label\"\n [customClass]=\"'fr-nav__link'\"\n [link]=\"category.link\"\n linkTarget=\"_self\">\n </dsfr-link>\n }\n </h5>\n }\n <ul class=\"fr-mega-menu__list\">\n @for (link of category.subItems; track link) {\n <li>\n @if (link) {\n <edu-item-link [item]=\"link\" customClass=\"fr-nav__link\" (linkSelect)=\"onLink(link)\"></edu-item-link>\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n</div>\n", styles: [".fr-mega-menu .fr-container:before{content:\"\";display:block;padding-top:1rem}\n"] }]
}], propDecorators: { megaMenu: [{
type: Input
}], idMenu: [{
type: Input
}], linkSelect: [{
type: Output
}], closeSelect: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVnYS1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2hlYWRlci9jb21wb25lbnQvbWVnYS1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1kc2ZyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2hlYWRlci9jb21wb25lbnQvbWVnYS1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDOUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOztBQVduRSxNQUFNLE9BQU8scUJBQXFCO0lBUmxDO1FBWUUsNERBQTREO1FBQ2xELGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBWSxDQUFDO1FBRXBELCtEQUErRDtRQUNyRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7S0FTbkQ7SUFQQyxNQUFNLENBQUMsS0FBZTtRQUNwQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzsrR0FoQlUscUJBQXFCO21HQUFyQixxQkFBcUIsaU1DakJsQyw2aUVBMERBLDBJRDVDWSxXQUFXLCtCQUFFLGlCQUFpQixtR0FBRSxpQkFBaUIsNFpBQUUsWUFBWSwwQkFBRSxZQUFZOzs0RkFHNUUscUJBQXFCO2tCQVJqQyxTQUFTOytCQUNFLGdCQUFnQixpQkFHWCxpQkFBaUIsQ0FBQyxJQUFJLFdBQzVCLENBQUMsV0FBVyxFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixFQUFFLFlBQVksRUFBRSxZQUFZLENBQUMsY0FDNUUsSUFBSTs4QkFHUCxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFHSSxVQUFVO3NCQUFuQixNQUFNO2dCQUdHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgUm91dGVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IERzZnJMaW5rIH0gZnJvbSAnLi4vLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IERzZnJJMThuUGlwZSB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9pMThuL2kxOG4ucGlwZSc7XG5pbXBvcnQgeyBEc2ZyTGlua0NvbXBvbmVudCB9IGZyb20gJy4uLy4uL2xpbmsnO1xuaW1wb3J0IHsgSXRlbUxpbmtDb21wb25lbnQgfSBmcm9tICcuLi8uLi9saW5rL2l0ZW0tbGluay5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHNmck1lZ2FNZW51IH0gZnJvbSAnLi9tZWdhLW1lbnUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkc2ZyLW1lZ2EtbWVudScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZWdhLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tZWdhLW1lbnUuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaW1wb3J0czogW0Zvcm1zTW9kdWxlLCBJdGVtTGlua0NvbXBvbmVudCwgRHNmckxpbmtDb21wb25lbnQsIFJvdXRlck1vZHVsZSwgRHNmckkxOG5QaXBlXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmck1lZ2FNZW51Q29tcG9uZW50IHtcbiAgQElucHV0KCkgbWVnYU1lbnU6IERzZnJNZWdhTWVudTtcbiAgQElucHV0KCkgaWRNZW51OiBzdHJpbmc7XG5cbiAgLyoqRW1ldCBsJ8OpdsOobmVtZW50IEV2ZW50IGR1IERPTSDDoCBsYSBzw6lsZWN0aW9uIGQndW4gbGllbiAqL1xuICBAT3V0cHV0KCkgbGlua1NlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXI8RHNmckxpbms+KCk7XG5cbiAgLyoqRW1ldCBsJ8OpdsOobmVtZW50IEV2ZW50IGR1IERPTSDDoCBsYSBmZXJtZXR1cmUgZHUgbcOpZ2EgbWVudSAqL1xuICBAT3V0cHV0KCkgY2xvc2VTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuXG4gIG9uTGluayhldmVudDogRHNmckxpbmspIHtcbiAgICB0aGlzLmxpbmtTZWxlY3QuZW1pdChldmVudCk7XG4gIH1cblxuICBvbkNsb3NlKCkge1xuICAgIHRoaXMuY2xvc2VTZWxlY3QuZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZnItY29udGFpbmVyIGZyLWNvbnRhaW5lci0tZmx1aWQgZnItY29udGFpbmVyLWxnXCI+XG4gIDxkaXYgY2xhc3M9XCJmci1ncmlkLXJvdyBmci1ncmlkLXJvdy1sZy0tZ3V0dGVyc1wiPlxuICAgIDxkaXYgY2xhc3M9XCJmci1jb2wtMTIgZnItbWItbjN2XCI+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAoY2xpY2spPVwib25DbG9zZSgpXCJcbiAgICAgICAgY2xhc3M9XCJmci1idG4tLWNsb3NlIGZyLWJ0blwiXG4gICAgICAgIFt0aXRsZV09XCInY29tbW9ucy5jbG9zZScgfCBkc2ZySTE4blwiXG4gICAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiJ21lZ2EtbWVudS0nICsgaWRNZW51XCI+XG4gICAgICAgIHt7ICdjb21tb25zLmNsb3NlJyB8IGRzZnJJMThuIH19XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICBAaWYgKG1lZ2FNZW51LmxlYWRlcikge1xuICAgICAgPGRpdiBjbGFzcz1cImZyLWNvbC0xMiBmci1jb2wtbGctOCBmci1jb2wtb2Zmc2V0LWxnLTQtLXJpZ2h0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmci1tZWdhLW1lbnVfX2xlYWRlclwiPlxuICAgICAgICAgIDxoNCBjbGFzcz1cImZyLWg0IGZyLW1iLTJ2XCI+e3sgbWVnYU1lbnUubGVhZGVyLnRpdGxlIH19PC9oND5cbiAgICAgICAgICBAaWYgKG1lZ2FNZW51LmxlYWRlci50ZXh0KSB7XG4gICAgICAgICAgICA8cCBjbGFzcz1cImZyLWhpZGRlbiBmci11bmhpZGRlbi1sZ1wiPnt7IG1lZ2FNZW51LmxlYWRlci50ZXh0IH19PC9wPlxuICAgICAgICAgIH1cbiAgICAgICAgICBAaWYgKG1lZ2FNZW51LmxlYWRlci5saW5rKSB7XG4gICAgICAgICAgICA8ZWR1LWl0ZW0tbGlua1xuICAgICAgICAgICAgICBbaXRlbV09XCJtZWdhTWVudS5sZWFkZXIubGlua1wiXG4gICAgICAgICAgICAgIFtpY29uXT1cIidmci1pY29uLWFycm93LXJpZ2h0LWxpbmUnXCJcbiAgICAgICAgICAgICAgKGxpbmtTZWxlY3QpPVwib25MaW5rKG1lZ2FNZW51LmxlYWRlci5saW5rKVwiPjwvZWR1LWl0ZW0tbGluaz5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgfVxuICAgIEBmb3IgKGNhdGVnb3J5IG9mIG1lZ2FNZW51LmNhdGVnb3JpZXM7IHRyYWNrIGNhdGVnb3J5KSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiZnItY29sLTEyIGZyLWNvbC1sZy0zXCI+XG4gICAgICAgIEBpZiAoY2F0ZWdvcnkubGFiZWwpIHtcbiAgICAgICAgICA8aDUgY2xhc3M9XCJmci1tZWdhLW1lbnVfX2NhdGVnb3J5XCI+XG4gICAgICAgICAgICBAaWYgKCFjYXRlZ29yeS5saW5rKSB7XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZnItbmF2X19saW5rXCI+e3sgY2F0ZWdvcnkubGFiZWwgfX08L3NwYW4+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBAaWYgKGNhdGVnb3J5LmxpbmspIHtcbiAgICAgICAgICAgICAgPGRzZnItbGlua1xuICAgICAgICAgICAgICAgIFtsYWJlbF09XCJjYXRlZ29yeS5sYWJlbFwiXG4gICAgICAgICAgICAgICAgW2N1c3RvbUNsYXNzXT1cIidmci1uYXZfX2xpbmsnXCJcbiAgICAgICAgICAgICAgICBbbGlua109XCJjYXRlZ29yeS5saW5rXCJcbiAgICAgICAgICAgICAgICBsaW5rVGFyZ2V0PVwiX3NlbGZcIj5cbiAgICAgICAgICAgICAgPC9kc2ZyLWxpbms+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9oNT5cbiAgICAgICAgfVxuICAgICAgICA8dWwgY2xhc3M9XCJmci1tZWdhLW1lbnVfX2xpc3RcIj5cbiAgICAgICAgICBAZm9yIChsaW5rIG9mIGNhdGVnb3J5LnN1Ykl0ZW1zOyB0cmFjayBsaW5rKSB7XG4gICAgICAgICAgICA8bGk+XG4gICAgICAgICAgICAgIEBpZiAobGluaykge1xuICAgICAgICAgICAgICAgIDxlZHUtaXRlbS1saW5rIFtpdGVtXT1cImxpbmtcIiBjdXN0b21DbGFzcz1cImZyLW5hdl9fbGlua1wiIChsaW5rU2VsZWN0KT1cIm9uTGluayhsaW5rKVwiPjwvZWR1LWl0ZW0tbGluaz5cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICB9XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=