@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
66 lines • 12.5 kB
JavaScript
import { CommonModule } from '@angular/common';
import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from '@angular/core';
import { ListGroupComponent } from '../list-group/list-group.component';
import { ListItemComponent } from '../list-item/list-item.component';
import { SidebarFooterDirective } from './directives/sidebar-footer.directive';
import { SidebarItemDirective } from './directives/sidebar-item.directive';
import { SidebarLogoDirective } from './directives/sidebar-logo.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SidebarComponent {
constructor() {
this.staticClass = 'nj-sidebar';
/**
* Whether the sidebar should be folded
*/
this.isFolded = false;
/**
* Whether the sidebar should have a fold list item
*/
this.hasFoldItem = true;
/**
* Fold list item label
*/
this.foldItemLabel = 'Fold';
/**
* Emits an event when fold list item is clicked
*/
this.foldItemClicked = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: SidebarComponent, isStandalone: true, selector: "nj-sidebar", inputs: { isFolded: ["isFolded", "isFolded", booleanAttribute], hasFoldItem: ["hasFoldItem", "hasFoldItem", booleanAttribute], foldItemLabel: "foldItemLabel" }, outputs: { foldItemClicked: "foldItemClicked" }, host: { properties: { "class": "this.staticClass", "class.nj-sidebar--folded": "this.isFolded" } }, queries: [{ propertyName: "logo", first: true, predicate: SidebarLogoDirective, descendants: true }, { propertyName: "footerElements", predicate: SidebarFooterDirective }], ngImport: i0, template: "<div class=\"nj-sidebar__brand\" *ngIf=\"logo?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{isFolded}\"></ng-container>\n</div>\n<nav class=\"nj-sidebar__navigation\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-group>\n</nav>\n<nav *ngIf=\"footerElements?.length\" class=\"nj-sidebar__navigation nj-sidebar__navigation--footer\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-container *ngFor=\"let footerElement of footerElements\" [ngTemplateOutlet]=\"footerElement.templateRef\">\n </ng-container>\n </nj-list-group>\n</nav>\n<nj-list-group *ngIf=\"hasFoldItem\" class=\"nj-sidebar__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li nj-list-item njSidebarItem class=\"nj-sidebar__fold-btn\" type=\"button\" iconName=\"chevron_left\" (itemClick)=\"foldItemClicked.next($event)\">\n {{foldItemLabel}}\n </li>\n</nj-list-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "nj-list-group", inputs: ["listId", "isClickable", "isCheckboxList", "hasBorder", "isDense", "isCustomSelectList", "ariaLabel", "isMultiSelect"] }, { kind: "component", type: ListItemComponent, selector: "[nj-list-item]", inputs: ["isActive", "isDisabled", "hasRightBorder", "role", "ariaSelected", "iconName", "iconAriaLabel", "type", "href", "value", "isCheckboxContent", "isIconOnly", "checkboxContentId"], outputs: ["itemClick"] }, { kind: "directive", type: SidebarItemDirective, selector: "[njSidebarItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
CommonModule,
ListGroupComponent,
ListItemComponent,
SidebarFooterDirective,
SidebarItemDirective,
SidebarLogoDirective
], template: "<div class=\"nj-sidebar__brand\" *ngIf=\"logo?.templateRef as templateRef\">\n <ng-container [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{isFolded}\"></ng-container>\n</div>\n<nav class=\"nj-sidebar__navigation\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-content></ng-content>\n </nj-list-group>\n</nav>\n<nav *ngIf=\"footerElements?.length\" class=\"nj-sidebar__navigation nj-sidebar__navigation--footer\">\n <nj-list-group [isDense]=\"true\" [hasBorder]=\"false\">\n <ng-container *ngFor=\"let footerElement of footerElements\" [ngTemplateOutlet]=\"footerElement.templateRef\">\n </ng-container>\n </nj-list-group>\n</nav>\n<nj-list-group *ngIf=\"hasFoldItem\" class=\"nj-sidebar__collapse\" [isDense]=\"true\" [hasBorder]=\"false\">\n <li nj-list-item njSidebarItem class=\"nj-sidebar__fold-btn\" type=\"button\" iconName=\"chevron_left\" (itemClick)=\"foldItemClicked.next($event)\">\n {{foldItemLabel}}\n </li>\n</nj-list-group>\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], isFolded: [{
type: HostBinding,
args: ['class.nj-sidebar--folded']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], hasFoldItem: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], foldItemLabel: [{
type: Input
}], foldItemClicked: [{
type: Output
}], logo: [{
type: ContentChild,
args: [SidebarLogoDirective]
}], footerElements: [{
type: ContentChildren,
args: [SidebarFooterDirective]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zaWRlYmFyL3NpZGViYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2lkZWJhci9zaWRlYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLGVBQWUsRUFDZixZQUFZLEVBQ1osV0FBVyxFQUNYLEtBQUssRUFDTCxNQUFNLEVBRU4saUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7QUFpQjNFLE1BQU0sT0FBTyxnQkFBZ0I7SUFmN0I7UUFpQlUsZ0JBQVcsR0FBRyxZQUFZLENBQUM7UUFFbkM7O1dBRUc7UUFHSCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCOztXQUVHO1FBRUgsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFFbkI7O1dBRUc7UUFFSCxrQkFBYSxHQUFHLE1BQU0sQ0FBQztRQUV2Qjs7V0FFRztRQUVILG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztLQUtsRDsrR0FoQ1ksZ0JBQWdCO21HQUFoQixnQkFBZ0IsMkZBUVAsZ0JBQWdCLCtDQU1oQixnQkFBZ0Isb1BBZXRCLG9CQUFvQixvRUFFakIsc0JBQXNCLDZCQ2xFekMsdStCQW1CQSwyQ0RRSSxZQUFZLHVhQUNaLGtCQUFrQiwyTEFDbEIsaUJBQWlCLCtRQUVqQixvQkFBb0I7OzRGQUlYLGdCQUFnQjtrQkFmNUIsU0FBUzsrQkFDRSxZQUFZLG1CQUVMLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQO3dCQUNQLFlBQVk7d0JBQ1osa0JBQWtCO3dCQUNsQixpQkFBaUI7d0JBQ2pCLHNCQUFzQjt3QkFDdEIsb0JBQW9CO3dCQUNwQixvQkFBb0I7cUJBQ3JCOzhCQUlPLFdBQVc7c0JBRGxCLFdBQVc7dUJBQUMsT0FBTztnQkFRcEIsUUFBUTtzQkFGUCxXQUFXO3VCQUFDLDBCQUEwQjs7c0JBQ3RDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBT3RDLFdBQVc7c0JBRFYsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFPdEMsYUFBYTtzQkFEWixLQUFLO2dCQU9OLGVBQWU7c0JBRGQsTUFBTTtnQkFHdUMsSUFBSTtzQkFBakQsWUFBWTt1QkFBQyxvQkFBb0I7Z0JBRWlCLGNBQWM7c0JBQWhFLGVBQWU7dUJBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBRdWVyeUxpc3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlzdEdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vbGlzdC1ncm91cC9saXN0LWdyb3VwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBMaXN0SXRlbUNvbXBvbmVudCB9IGZyb20gJy4uL2xpc3QtaXRlbS9saXN0LWl0ZW0uY29tcG9uZW50JztcbmltcG9ydCB7IFNpZGViYXJGb290ZXJEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvc2lkZWJhci1mb290ZXIuZGlyZWN0aXZlJztcbmltcG9ydCB7IFNpZGViYXJJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9kaXJlY3RpdmVzL3NpZGViYXItaXRlbS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgU2lkZWJhckxvZ29EaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvc2lkZWJhci1sb2dvLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25qLXNpZGViYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2lkZWJhci5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIExpc3RHcm91cENvbXBvbmVudCxcbiAgICBMaXN0SXRlbUNvbXBvbmVudCxcbiAgICBTaWRlYmFyRm9vdGVyRGlyZWN0aXZlLFxuICAgIFNpZGViYXJJdGVtRGlyZWN0aXZlLFxuICAgIFNpZGViYXJMb2dvRGlyZWN0aXZlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgU2lkZWJhckNvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcml2YXRlIHN0YXRpY0NsYXNzID0gJ25qLXNpZGViYXInO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBzaWRlYmFyIHNob3VsZCBiZSBmb2xkZWRcbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3Mubmotc2lkZWJhci0tZm9sZGVkJylcbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pXG4gIGlzRm9sZGVkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHNpZGViYXIgc2hvdWxkIGhhdmUgYSBmb2xkIGxpc3QgaXRlbVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pXG4gIGhhc0ZvbGRJdGVtID0gdHJ1ZTtcblxuICAvKipcbiAgICogRm9sZCBsaXN0IGl0ZW0gbGFiZWxcbiAgICovXG4gIEBJbnB1dCgpXG4gIGZvbGRJdGVtTGFiZWwgPSAnRm9sZCc7XG5cbiAgLyoqXG4gICAqIEVtaXRzIGFuIGV2ZW50IHdoZW4gZm9sZCBsaXN0IGl0ZW0gaXMgY2xpY2tlZFxuICAgKi9cbiAgQE91dHB1dCgpXG4gIGZvbGRJdGVtQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICBAQ29udGVudENoaWxkKFNpZGViYXJMb2dvRGlyZWN0aXZlKSBwcm90ZWN0ZWQgbG9nbz86IFNpZGViYXJMb2dvRGlyZWN0aXZlO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2lkZWJhckZvb3RlckRpcmVjdGl2ZSkgcHJvdGVjdGVkIGZvb3RlckVsZW1lbnRzPzogUXVlcnlMaXN0PFNpZGViYXJGb290ZXJEaXJlY3RpdmU+O1xufVxuIiwiPGRpdiBjbGFzcz1cIm5qLXNpZGViYXJfX2JyYW5kXCIgKm5nSWY9XCJsb2dvPy50ZW1wbGF0ZVJlZiBhcyB0ZW1wbGF0ZVJlZlwiPlxuICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInRlbXBsYXRlUmVmXCIgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cIntpc0ZvbGRlZH1cIj48L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPG5hdiBjbGFzcz1cIm5qLXNpZGViYXJfX25hdmlnYXRpb25cIj5cbiAgPG5qLWxpc3QtZ3JvdXAgW2lzRGVuc2VdPVwidHJ1ZVwiIFtoYXNCb3JkZXJdPVwiZmFsc2VcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvbmotbGlzdC1ncm91cD5cbjwvbmF2PlxuPG5hdiAqbmdJZj1cImZvb3RlckVsZW1lbnRzPy5sZW5ndGhcIiBjbGFzcz1cIm5qLXNpZGViYXJfX25hdmlnYXRpb24gbmotc2lkZWJhcl9fbmF2aWdhdGlvbi0tZm9vdGVyXCI+XG4gIDxuai1saXN0LWdyb3VwIFtpc0RlbnNlXT1cInRydWVcIiBbaGFzQm9yZGVyXT1cImZhbHNlXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgZm9vdGVyRWxlbWVudCBvZiBmb290ZXJFbGVtZW50c1wiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImZvb3RlckVsZW1lbnQudGVtcGxhdGVSZWZcIj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uai1saXN0LWdyb3VwPlxuPC9uYXY+XG48bmotbGlzdC1ncm91cCAqbmdJZj1cImhhc0ZvbGRJdGVtXCIgY2xhc3M9XCJuai1zaWRlYmFyX19jb2xsYXBzZVwiIFtpc0RlbnNlXT1cInRydWVcIiBbaGFzQm9yZGVyXT1cImZhbHNlXCI+XG4gIDxsaSBuai1saXN0LWl0ZW0gbmpTaWRlYmFySXRlbSBjbGFzcz1cIm5qLXNpZGViYXJfX2ZvbGQtYnRuXCIgdHlwZT1cImJ1dHRvblwiIGljb25OYW1lPVwiY2hldnJvbl9sZWZ0XCIgKGl0ZW1DbGljayk9XCJmb2xkSXRlbUNsaWNrZWQubmV4dCgkZXZlbnQpXCI+XG4gICAge3tmb2xkSXRlbUxhYmVsfX1cbiAgPC9saT5cbjwvbmotbGlzdC1ncm91cD5cbiJdfQ==