@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
71 lines • 11 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, ViewEncapsulation } from '@angular/core';
import { ButtonComponent } from '../button/button.component';
import { SidepanelLayoutPanelDirective } from './directives/sidepanel-layout-panel.directive';
import { sidePanelLayoutAnimation } from './sidepanel-layout.animations';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SidepanelLayoutComponent {
constructor() {
this.cdr = inject(ChangeDetectorRef);
this._isPanelDisplayed = true;
this._animationParams = {};
this.staticClass = 'nj-sidepanel-layout';
/**
* Whether the panel should be displayed beside or over the content
*/
this.isOverContent = false;
/**
* Emit when sidepanel visibility state change
*/
this.sidepanelVisibilityChange = new EventEmitter();
}
/**
* Whether the panel animation should be disabled
*/
set isAnimationDisabled(value) {
this._animationParams = value && { animationDuration: '0ms' };
}
/**
* Show sidepanel
*/
showPanel() {
this.changePanelVisibility(true);
}
/**
* Hide sidepanel
*/
hidePanel() {
this.changePanelVisibility(false);
}
changePanelVisibility(isPanelDisplayed) {
if (isPanelDisplayed === this._isPanelDisplayed) {
return;
}
this._isPanelDisplayed = isPanelDisplayed;
this.sidepanelVisibilityChange.emit(isPanelDisplayed);
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidepanelLayoutComponent, isStandalone: true, selector: "nj-sidepanel-layout", inputs: { isAnimationDisabled: "isAnimationDisabled", isOverContent: "isOverContent" }, outputs: { sidepanelVisibilityChange: "sidepanelVisibilityChange" }, host: { properties: { "class": "this.staticClass", "class.nj-sidepanel-layout--over-content": "this.isOverContent" } }, queries: [{ propertyName: "panel", first: true, predicate: SidepanelLayoutPanelDirective, descendants: true }], ngImport: i0, template: " <div [@panelOpened]=\"{value: !isOverContent && _isPanelDisplayed, params: _animationParams}\" class=\"nj-sidepanel-layout__content\">\n <ng-content></ng-content>\n </div>\n <div [@panelSlideInAndOut]=\"{value: '*', params: _animationParams}\" *ngIf=\"_isPanelDisplayed && panel.templateRef\" class=\"nj-sidepanel-layout__sidepanel\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\"></ng-container>\n </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [sidePanelLayoutAnimation.panelSlideInAndOut, sidePanelLayoutAnimation.panelOpened], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidepanelLayoutComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-sidepanel-layout', animations: [sidePanelLayoutAnimation.panelSlideInAndOut, sidePanelLayoutAnimation.panelOpened], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ButtonComponent, SidepanelLayoutPanelDirective, CommonModule], template: " <div [@panelOpened]=\"{value: !isOverContent && _isPanelDisplayed, params: _animationParams}\" class=\"nj-sidepanel-layout__content\">\n <ng-content></ng-content>\n </div>\n <div [@panelSlideInAndOut]=\"{value: '*', params: _animationParams}\" *ngIf=\"_isPanelDisplayed && panel.templateRef\" class=\"nj-sidepanel-layout__sidepanel\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\"></ng-container>\n </div>\n" }]
}], propDecorators: { staticClass: [{
type: HostBinding,
args: ['class']
}], isAnimationDisabled: [{
type: Input
}], isOverContent: [{
type: HostBinding,
args: ['class.nj-sidepanel-layout--over-content']
}, {
type: Input
}], sidepanelVisibilityChange: [{
type: Output
}], panel: [{
type: ContentChild,
args: [SidepanelLayoutPanelDirective]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZXBhbmVsLWxheW91dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zaWRlcGFuZWwtbGF5b3V0L3NpZGVwYW5lbC1sYXlvdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2lkZXBhbmVsLWxheW91dC9zaWRlcGFuZWwtbGF5b3V0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixXQUFXLEVBQ1gsTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04saUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUM5RixPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7O0FBV3pFLE1BQU0sT0FBTyx3QkFBd0I7SUFUckM7UUFVVSxRQUFHLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFOUIsc0JBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLHFCQUFnQixHQUFHLEVBQUUsQ0FBQztRQUVGLGdCQUFXLEdBQUcscUJBQXFCLENBQUM7UUFVbEU7O1dBRUc7UUFHSCxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUV0Qjs7V0FFRztRQUNPLDhCQUF5QixHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0EwQm5FO0lBNUNDOztPQUVHO0lBQ0gsSUFDSSxtQkFBbUIsQ0FBQyxLQUFjO1FBQ3BDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxLQUFLLElBQUksRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUNoRSxDQUFDO0lBZ0JEOztPQUVHO0lBQ0gsU0FBUztRQUNQLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxTQUFTO1FBQ1AsSUFBSSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFTyxxQkFBcUIsQ0FBQyxnQkFBeUI7UUFDckQsSUFBSSxnQkFBZ0IsS0FBSyxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDL0MsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLGlCQUFpQixHQUFHLGdCQUFnQixDQUFDO1FBQzFDLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7K0dBbkRVLHdCQUF3QjttR0FBeEIsd0JBQXdCLHVZQTRCckIsNkJBQTZCLGdEQ3REN0MsK2FBTUEsMkNEa0I0RCxZQUFZLDRSQUoxRCxDQUFDLHdCQUF3QixDQUFDLGtCQUFrQixFQUFFLHdCQUF3QixDQUFDLFdBQVcsQ0FBQzs7NEZBTXBGLHdCQUF3QjtrQkFUcEMsU0FBUzsrQkFDRSxxQkFBcUIsY0FFbkIsQ0FBQyx3QkFBd0IsQ0FBQyxrQkFBa0IsRUFBRSx3QkFBd0IsQ0FBQyxXQUFXLENBQUMsbUJBQzlFLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLDZCQUE2QixFQUFFLFlBQVksQ0FBQzs4QkFRekMsV0FBVztzQkFBeEMsV0FBVzt1QkFBQyxPQUFPO2dCQU1oQixtQkFBbUI7c0JBRHRCLEtBQUs7Z0JBVU4sYUFBYTtzQkFGWixXQUFXO3VCQUFDLHlDQUF5Qzs7c0JBQ3JELEtBQUs7Z0JBTUkseUJBQXlCO3NCQUFsQyxNQUFNO2dCQUVnRCxLQUFLO3NCQUEzRCxZQUFZO3VCQUFDLDZCQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2lkZXBhbmVsTGF5b3V0UGFuZWxEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMvc2lkZXBhbmVsLWxheW91dC1wYW5lbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgc2lkZVBhbmVsTGF5b3V0QW5pbWF0aW9uIH0gZnJvbSAnLi9zaWRlcGFuZWwtbGF5b3V0LmFuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1zaWRlcGFuZWwtbGF5b3V0JyxcbiAgdGVtcGxhdGVVcmw6ICdzaWRlcGFuZWwtbGF5b3V0LmNvbXBvbmVudC5odG1sJyxcbiAgYW5pbWF0aW9uczogW3NpZGVQYW5lbExheW91dEFuaW1hdGlvbi5wYW5lbFNsaWRlSW5BbmRPdXQsIHNpZGVQYW5lbExheW91dEFuaW1hdGlvbi5wYW5lbE9wZW5lZF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQnV0dG9uQ29tcG9uZW50LCBTaWRlcGFuZWxMYXlvdXRQYW5lbERpcmVjdGl2ZSwgQ29tbW9uTW9kdWxlXVxufSlcbmV4cG9ydCBjbGFzcyBTaWRlcGFuZWxMYXlvdXRDb21wb25lbnQge1xuICBwcml2YXRlIGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG5cbiAgcHJvdGVjdGVkIF9pc1BhbmVsRGlzcGxheWVkID0gdHJ1ZTtcbiAgcHJvdGVjdGVkIF9hbmltYXRpb25QYXJhbXMgPSB7fTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgcHJpdmF0ZSBzdGF0aWNDbGFzcyA9ICduai1zaWRlcGFuZWwtbGF5b3V0JztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgcGFuZWwgYW5pbWF0aW9uIHNob3VsZCBiZSBkaXNhYmxlZFxuICAgKi9cbiAgQElucHV0KClcbiAgc2V0IGlzQW5pbWF0aW9uRGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9hbmltYXRpb25QYXJhbXMgPSB2YWx1ZSAmJiB7IGFuaW1hdGlvbkR1cmF0aW9uOiAnMG1zJyB9O1xuICB9XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHBhbmVsIHNob3VsZCBiZSBkaXNwbGF5ZWQgYmVzaWRlIG9yIG92ZXIgdGhlIGNvbnRlbnRcbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3Mubmotc2lkZXBhbmVsLWxheW91dC0tb3Zlci1jb250ZW50JylcbiAgQElucHV0KClcbiAgaXNPdmVyQ29udGVudCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBFbWl0IHdoZW4gc2lkZXBhbmVsIHZpc2liaWxpdHkgc3RhdGUgY2hhbmdlXG4gICAqL1xuICBAT3V0cHV0KCkgc2lkZXBhbmVsVmlzaWJpbGl0eUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBAQ29udGVudENoaWxkKFNpZGVwYW5lbExheW91dFBhbmVsRGlyZWN0aXZlKSBwcm90ZWN0ZWQgcGFuZWw/OiBTaWRlcGFuZWxMYXlvdXRQYW5lbERpcmVjdGl2ZTtcblxuICAvKipcbiAgICogU2hvdyBzaWRlcGFuZWxcbiAgICovXG4gIHNob3dQYW5lbCgpIHtcbiAgICB0aGlzLmNoYW5nZVBhbmVsVmlzaWJpbGl0eSh0cnVlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBIaWRlIHNpZGVwYW5lbFxuICAgKi9cbiAgaGlkZVBhbmVsKCkge1xuICAgIHRoaXMuY2hhbmdlUGFuZWxWaXNpYmlsaXR5KGZhbHNlKTtcbiAgfVxuXG4gIHByaXZhdGUgY2hhbmdlUGFuZWxWaXNpYmlsaXR5KGlzUGFuZWxEaXNwbGF5ZWQ6IGJvb2xlYW4pIHtcbiAgICBpZiAoaXNQYW5lbERpc3BsYXllZCA9PT0gdGhpcy5faXNQYW5lbERpc3BsYXllZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLl9pc1BhbmVsRGlzcGxheWVkID0gaXNQYW5lbERpc3BsYXllZDtcbiAgICB0aGlzLnNpZGVwYW5lbFZpc2liaWxpdHlDaGFuZ2UuZW1pdChpc1BhbmVsRGlzcGxheWVkKTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIiwiICA8ZGl2IFtAcGFuZWxPcGVuZWRdPVwie3ZhbHVlOiAhaXNPdmVyQ29udGVudCAmJiBfaXNQYW5lbERpc3BsYXllZCwgcGFyYW1zOiBfYW5pbWF0aW9uUGFyYW1zfVwiIGNsYXNzPVwibmotc2lkZXBhbmVsLWxheW91dF9fY29udGVudFwiPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxkaXYgW0BwYW5lbFNsaWRlSW5BbmRPdXRdPVwie3ZhbHVlOiAnKicsIHBhcmFtczogX2FuaW1hdGlvblBhcmFtc31cIiAqbmdJZj1cIl9pc1BhbmVsRGlzcGxheWVkICYmIHBhbmVsLnRlbXBsYXRlUmVmXCIgY2xhc3M9XCJuai1zaWRlcGFuZWwtbGF5b3V0X19zaWRlcGFuZWxcIj5cbiAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInBhbmVsLnRlbXBsYXRlUmVmXCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuIl19