@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
67 lines (63 loc) • 6.9 kB
JavaScript
import { trigger, transition, style, animate } from '@angular/animations';
import { NgIf, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, HostBinding, Output } from '@angular/core';
import { NgDocLetDirective } from '@ng-doc/ui-kit/directives';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
class NgDocSidenavComponent {
constructor() {
/**
* Content of the sidenav.
*/
this.sidebar = '';
/**
* Indicates whether the sidenav is opened or not.
* This is used to trigger the animation.
*/
this.opened = true;
/**
* Indicates whether the sidenav has a backdrop or not.
*/
this.hasBackdrop = true;
this.closeEvent = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgDocSidenavComponent, isStandalone: true, selector: "ng-doc-sidenav", inputs: { sidebar: "sidebar", opened: "opened", hasBackdrop: "hasBackdrop" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "attr.data-ng-doc-sidebar": "!!sidebar", "attr.data-ng-doc-opened": "this.opened" } }, ngImport: i0, template: "<div class=\"ng-doc-sidenav-wrapper\">\n <div class=\"ng-doc-sidenav\">\n <ng-container *polymorpheusOutlet=\"sidebar\"></ng-container>\n </div>\n <div class=\"ng-doc-sidenav-content\">\n @if (opened && hasBackdrop) {\n <div class=\"ng-doc-backdrop\" @backdropFade (click)=\"closeEvent.emit()\"></div>\n }\n\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}@media (max-width: 1024px){:host[data-ng-doc-opened=true] .ng-doc-sidenav{right:0;transition:right var(--ng-doc-transition);--ng-doc-sidebar-shadow: var(--ng-doc-shadow-color) -5px 5px 20px -5px}:host .ng-doc-sidenav{transition:unset;left:unset;right:calc(var(--ng-doc-sidenav-width) * -1);top:var(--ng-doc-navbar-height)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [
trigger('backdropFade', [
transition(':enter', [
style({ opacity: 0 }),
animate('220ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 })),
]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocSidenavComponent, decorators: [{
type: Component,
args: [{ animations: [
trigger('backdropFade', [
transition(':enter', [
style({ opacity: 0 }),
animate('220ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 })),
]),
]),
], selector: 'ng-doc-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusModule, NgIf, AsyncPipe, NgDocLetDirective], host: {
'[attr.data-ng-doc-sidebar]': '!!sidebar',
}, template: "<div class=\"ng-doc-sidenav-wrapper\">\n <div class=\"ng-doc-sidenav\">\n <ng-container *polymorpheusOutlet=\"sidebar\"></ng-container>\n </div>\n <div class=\"ng-doc-sidenav-content\">\n @if (opened && hasBackdrop) {\n <div class=\"ng-doc-backdrop\" @backdropFade (click)=\"closeEvent.emit()\"></div>\n }\n\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{width:100%}:host[data-ng-doc-sidebar=false] .ng-doc-sidenav-content{margin-left:0;width:100%}:host .ng-doc-sidenav-wrapper{position:relative;display:flex;width:100%}:host .ng-doc-sidenav{position:fixed;top:var(--ng-doc-navbar-height);width:var(--ng-doc-sidenav-width);flex-shrink:0;z-index:10;transition:left var(--ng-doc-transition)}:host .ng-doc-sidenav-content{margin-left:var(--ng-doc-sidenav-width);width:calc(100% - var(--ng-doc-sidenav-width));padding:var(--ng-doc-sidenav-content-padding);transition:margin-left var(--ng-doc-transition)}:host .ng-doc-backdrop{position:fixed!important;left:0;top:0;width:100%;height:100%;z-index:9}:host .ng-doc-backdrop:not(nothing){background:color-mix(in srgb,rgba(0,0,0,.2) 60%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host .ng-doc-backdrop{background-color:#0003}}:host .ng-doc-backdropnothing{background-color:#0003}@media (max-width: 1024px){:host[data-ng-doc-opened=true] .ng-doc-sidenav{right:0;transition:right var(--ng-doc-transition);--ng-doc-sidebar-shadow: var(--ng-doc-shadow-color) -5px 5px 20px -5px}:host .ng-doc-sidenav{transition:unset;left:unset;right:calc(var(--ng-doc-sidenav-width) * -1);top:var(--ng-doc-navbar-height)}:host .ng-doc-sidenav-content{margin-left:0;width:100%}}\n"] }]
}], propDecorators: { sidebar: [{
type: Input
}], opened: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-opened']
}], hasBackdrop: [{
type: Input
}], closeEvent: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocSidenavComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-sidenav.mjs.map