@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
41 lines • 8.71 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from '@angular/core';
import { IconButtonComponent } from '../icon-button/icon-button.component';
import { SidepanelHeaderActionDirective } from './directives/sidepanel-header-action.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SidepanelHeaderComponent {
constructor() {
this.staticClass = 'nj-sidepanel-header';
/**
* Whether it should display a close icon in the header
*/
this.hasCloseIcon = true;
/**
* Emit event when clicking the close icon
*/
this.closeIconClicked = new EventEmitter();
}
get shouldDisplayHeaderActions() {
return this.hasCloseIcon || this.actions.length;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelHeaderComponent, isStandalone: true, selector: "nj-sidepanel-header", inputs: { title: "title", hasCloseIcon: "hasCloseIcon" }, outputs: { closeIconClicked: "closeIconClicked" }, host: { properties: { "class": "this.staticClass" } }, queries: [{ propertyName: "actions", predicate: SidepanelHeaderActionDirective }], ngImport: i0, template: "<span *ngIf=\"title; else noTitle\" class=\"nj-sidepanel-header__title\">{{title}}</span>\n<div class=\"nj-sidepanel-header__actions\" *ngIf=\"shouldDisplayHeaderActions\">\n <ng-container *ngFor=\"let action of actions\" [ngTemplateOutlet]=\"action.templateRef\"></ng-container>\n <nj-icon-button *ngIf=\"hasCloseIcon\" variant=\"tertiary\" icon=\"close\" (buttonClick)=\"closeIconClicked.emit($event)\"></nj-icon-button>\n</div>\n\n<ng-template #noTitle>\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SidepanelHeaderActionDirective, IconButtonComponent, CommonModule], template: "<span *ngIf=\"title; else noTitle\" class=\"nj-sidepanel-header__title\">{{title}}</span>\n<div class=\"nj-sidepanel-header__actions\" *ngIf=\"shouldDisplayHeaderActions\">\n <ng-container *ngFor=\"let action of actions\" [ngTemplateOutlet]=\"action.templateRef\"></ng-container>\n <nj-icon-button *ngIf=\"hasCloseIcon\" variant=\"tertiary\" icon=\"close\" (buttonClick)=\"closeIconClicked.emit($event)\"></nj-icon-button>\n</div>\n\n<ng-template #noTitle>\n <div class=\"nj-sidepanel-header__custom-title\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nj-sidepanel-header__custom-title{flex-grow:1}\n"] }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], title: [{
type: Input
}], hasCloseIcon: [{
type: Input
}], closeIconClicked: [{
type: Output
}], actions: [{
type: ContentChildren,
args: [SidepanelHeaderActionDirective]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZXBhbmVsLWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zaWRlcGFuZWwtaGVhZGVyL3NpZGVwYW5lbC1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2lkZXBhbmVsLWhlYWRlci9zaWRlcGFuZWwtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUNaLFdBQVcsRUFDWCxLQUFLLEVBQ0wsTUFBTSxFQUVOLGlCQUFpQixFQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxzQ0FBc0MsQ0FBQztBQUN6RSxPQUFPLEVBQUMsOEJBQThCLEVBQUMsTUFBTSxnREFBZ0QsQ0FBQzs7O0FBVzlGLE1BQU0sT0FBTyx3QkFBd0I7SUFUckM7UUFVZ0MsZ0JBQVcsR0FBRyxxQkFBcUIsQ0FBQztRQVNsRTs7V0FFRztRQUNNLGlCQUFZLEdBQUcsSUFBSSxDQUFDO1FBRTdCOztXQUVHO1FBQ08scUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztLQU83RDtJQUhDLElBQWMsMEJBQTBCO1FBQ3RDLE9BQU8sSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQztJQUNsRCxDQUFDOytHQXhCVSx3QkFBd0I7bUdBQXhCLHdCQUF3QiwyUUFvQmxCLDhCQUE4Qiw2QkM1Q2pELDRqQkFXQSwyR0RXNEMsbUJBQW1CLDBPQUFFLFlBQVk7OzRGQUVoRSx3QkFBd0I7a0JBVHBDLFNBQVM7K0JBQ0UscUJBQXFCLG1CQUdkLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsOEJBQThCLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDOzhCQUc5QyxXQUFXO3NCQUF4QyxXQUFXO3VCQUFDLE9BQU87Z0JBTVgsS0FBSztzQkFBYixLQUFLO2dCQU1HLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0ksZ0JBQWdCO3NCQUF6QixNQUFNO2dCQUVvRCxPQUFPO3NCQUFqRSxlQUFlO3VCQUFDLDhCQUE4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBRdWVyeUxpc3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtJY29uQnV0dG9uQ29tcG9uZW50fSBmcm9tICcuLi9pY29uLWJ1dHRvbi9pY29uLWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHtTaWRlcGFuZWxIZWFkZXJBY3Rpb25EaXJlY3RpdmV9IGZyb20gJy4vZGlyZWN0aXZlcy9zaWRlcGFuZWwtaGVhZGVyLWFjdGlvbi5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1zaWRlcGFuZWwtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NpZGVwYW5lbC1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zaWRlcGFuZWwtaGVhZGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbU2lkZXBhbmVsSGVhZGVyQWN0aW9uRGlyZWN0aXZlLCBJY29uQnV0dG9uQ29tcG9uZW50LCBDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFNpZGVwYW5lbEhlYWRlckNvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBwcml2YXRlIHN0YXRpY0NsYXNzID0gJ25qLXNpZGVwYW5lbC1oZWFkZXInO1xuXG5cbiAgLyoqXG4gICAqIFRpdGxlIGRpc3BsYXllZCBpbiB0aGUgaGVhZGVyXG4gICAqL1xuICBASW5wdXQoKSB0aXRsZT86IHN0cmluZztcblxuXG4gIC8qKlxuICAgKiBXaGV0aGVyIGl0IHNob3VsZCBkaXNwbGF5IGEgY2xvc2UgaWNvbiBpbiB0aGUgaGVhZGVyXG4gICAqL1xuICBASW5wdXQoKSBoYXNDbG9zZUljb24gPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBFbWl0IGV2ZW50IHdoZW4gY2xpY2tpbmcgdGhlIGNsb3NlIGljb25cbiAgICovXG4gIEBPdXRwdXQoKSBjbG9zZUljb25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2lkZXBhbmVsSGVhZGVyQWN0aW9uRGlyZWN0aXZlKSBwcm90ZWN0ZWQgYWN0aW9uczogUXVlcnlMaXN0PFNpZGVwYW5lbEhlYWRlckFjdGlvbkRpcmVjdGl2ZT47XG5cbiAgcHJvdGVjdGVkIGdldCBzaG91bGREaXNwbGF5SGVhZGVyQWN0aW9ucygpIHtcbiAgICByZXR1cm4gdGhpcy5oYXNDbG9zZUljb24gfHwgdGhpcy5hY3Rpb25zLmxlbmd0aDtcbiAgfVxufVxuIiwiPHNwYW4gKm5nSWY9XCJ0aXRsZTsgZWxzZSBub1RpdGxlXCIgY2xhc3M9XCJuai1zaWRlcGFuZWwtaGVhZGVyX190aXRsZVwiPnt7dGl0bGV9fTwvc3Bhbj5cbjxkaXYgY2xhc3M9XCJuai1zaWRlcGFuZWwtaGVhZGVyX19hY3Rpb25zXCIgKm5nSWY9XCJzaG91bGREaXNwbGF5SGVhZGVyQWN0aW9uc1wiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBhY3Rpb24gb2YgYWN0aW9uc1wiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvbi50ZW1wbGF0ZVJlZlwiPjwvbmctY29udGFpbmVyPlxuICA8bmotaWNvbi1idXR0b24gKm5nSWY9XCJoYXNDbG9zZUljb25cIiB2YXJpYW50PVwidGVydGlhcnlcIiBpY29uPVwiY2xvc2VcIiAoYnV0dG9uQ2xpY2spPVwiY2xvc2VJY29uQ2xpY2tlZC5lbWl0KCRldmVudClcIj48L25qLWljb24tYnV0dG9uPlxuPC9kaXY+XG5cbjxuZy10ZW1wbGF0ZSAjbm9UaXRsZT5cbiAgPGRpdiBjbGFzcz1cIm5qLXNpZGVwYW5lbC1oZWFkZXJfX2N1c3RvbS10aXRsZVwiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19