ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
35 lines • 12.2 kB
JavaScript
import { Component, Input } from '@angular/core';
import { SidenavOptions } from './sidenav.options';
import * as i0 from "@angular/core";
import * as i1 from "./sidenav.service";
export class SidenavContainerComponent {
constructor(sidenavService) {
this.sidenavService = sidenavService;
this.hasBackdrop = false;
}
set mode(mode) {
this.sidenavService.updateOptions({ mode });
}
get mode() {
return this.sidenavService.options.mode;
}
closeSide() {
this.sidenavService.isOpened = false;
}
ngOnInit() {
this.sidenavService.options = new SidenavOptions({
mode: this.mode
});
}
}
SidenavContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavContainerComponent, deps: [{ token: i1.SidenavService }], target: i0.ɵɵFactoryTarget.Component });
SidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SidenavContainerComponent, selector: "sdk-sidenav-container", inputs: { hasBackdrop: "hasBackdrop", mode: "mode" }, ngImport: i0, template: "<ng-container>\n <ng-content select=\"sdk-sidenav\"></ng-content>\n <ng-content select=\"sdk-sidenav-content\"></ng-content>\n <div class=\"sdk-sidenav-backdrop\" (click)=\"closeSide()\"\n [class.active]=\"sidenavService.isOpened && hasBackdrop\"></div>\n</ng-container>\n", styles: [".flex,.flex-row,:host,.flex-row-reverse,.flex-column,.flex-column-reverse{position:relative;display:flex}.flex-row,:host{position:relative;display:flex;flex-direction:row}.flex-row-reverse{position:relative;display:flex;flex-direction:row-reverse}.flex-column{position:relative;display:flex;flex-direction:column}.flex-column-reverse{position:relative;display:flex;flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.layout-center-center{align-content:center;align-items:center;justify-content:center}.layout-center-start{align-content:flex-start;align-items:flex-start;justify-content:center}.layout-center-end{align-content:flex-end;align-items:flex-end;justify-content:center}.layout-center-stretch{align-content:stretch;align-items:stretch;justify-content:center}.layout-space-around-center{align-content:center;align-items:center;justify-content:space-around}.layout-space-around-start{align-content:flex-start;align-items:flex-start;justify-content:space-around}.layout-space-around-end{align-content:flex-end;align-items:flex-end;justify-content:space-around}.layout-space-around-stretch{align-content:stretch;align-items:stretch;justify-content:space-around}.layout-space-between-center{align-content:center;align-items:center;justify-content:space-between}.layout-space-between-start{align-content:flex-start;align-items:flex-start;justify-content:space-between}.layout-space-between-end{align-content:flex-end;align-items:flex-end;justify-content:space-between}.layout-space-between-stretch{align-content:stretch;align-items:stretch;justify-content:space-between}.layout-start-center{align-content:center;align-items:center;justify-content:flex-start}.layout-start-start{align-content:flex-start;align-items:flex-start;justify-content:flex-start}.layout-start-end{align-content:flex-end;align-items:flex-end;justify-content:flex-start}.layout-start-stretch,:host{align-content:stretch;align-items:stretch;justify-content:flex-start}.layout-end-center{align-content:center;align-items:center;justify-content:flex-end}.layout-end-start{align-content:flex-start;align-items:flex-start;justify-content:flex-end}.layout-end-end{align-content:flex-end;align-items:flex-end;justify-content:flex-end}.layout-end-stretch{align-content:stretch;align-items:stretch;justify-content:flex-end}.flex-grow-1{flex:1}.flex-grow-2{flex:2}.flex-grow-3{flex:3}.flex-grow-4{flex:4}.flex-grow-5{flex:5}.flex-grow-6{flex:6}.flex-grow-7{flex:7}.flex-grow-8{flex:8}.flex-grow-9{flex:9}.flex-grow-10{flex:10}.flex-grow-11{flex:11}.flex-grow-12{flex:12}.sdk-xs-1{width:100%}.sdk-xs-2{width:50%}.sdk-xs-3{width:33.3333333333%}.sdk-xs-4{width:25%}.sdk-xm-1{width:100%}.sdk-xm-2{width:50%}.sdk-xm-3{width:33.3333333333%}.sdk-xm-4{width:25%}.sdk-xl-1{width:100%}.sdk-xl-2{width:50%}.sdk-xl-3{width:33.3333333333%}.sdk-xl-4{width:25%}@media screen and (max-width: 1024px){.flex-row,:host{flex-wrap:wrap}.sdk-xl-2,.sdk-xl-3,.sdk-xm-2{width:100%}.sdk-xl-4,.sdk-xm-3{width:50%}.sdk-xm-4{width:33.3333333333%}}@media screen and (max-width: 675.84px){.sdk-xl-4,.sdk-xm-3,.sdk-xs-2{width:100%}.sdk-xm-4,.sdk-xs-3{width:50%}.sdk-xs-4{width:33.3333333333%}}@media screen and (max-width: 512px){.sdk-xm-4,.sdk-xs-3{width:100%}.sdk-xs-4{width:50%}}:host{width:100%;flex-shrink:0}.sdk-sidenav-backdrop{position:absolute;z-index:2;top:0;left:0;bottom:0;right:0;display:none;background-color:#15151599}.sdk-sidenav-backdrop.active{display:flex}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-sidenav-container', template: "<ng-container>\n <ng-content select=\"sdk-sidenav\"></ng-content>\n <ng-content select=\"sdk-sidenav-content\"></ng-content>\n <div class=\"sdk-sidenav-backdrop\" (click)=\"closeSide()\"\n [class.active]=\"sidenavService.isOpened && hasBackdrop\"></div>\n</ng-container>\n", styles: [".flex,.flex-row,:host,.flex-row-reverse,.flex-column,.flex-column-reverse{position:relative;display:flex}.flex-row,:host{position:relative;display:flex;flex-direction:row}.flex-row-reverse{position:relative;display:flex;flex-direction:row-reverse}.flex-column{position:relative;display:flex;flex-direction:column}.flex-column-reverse{position:relative;display:flex;flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.layout-center-center{align-content:center;align-items:center;justify-content:center}.layout-center-start{align-content:flex-start;align-items:flex-start;justify-content:center}.layout-center-end{align-content:flex-end;align-items:flex-end;justify-content:center}.layout-center-stretch{align-content:stretch;align-items:stretch;justify-content:center}.layout-space-around-center{align-content:center;align-items:center;justify-content:space-around}.layout-space-around-start{align-content:flex-start;align-items:flex-start;justify-content:space-around}.layout-space-around-end{align-content:flex-end;align-items:flex-end;justify-content:space-around}.layout-space-around-stretch{align-content:stretch;align-items:stretch;justify-content:space-around}.layout-space-between-center{align-content:center;align-items:center;justify-content:space-between}.layout-space-between-start{align-content:flex-start;align-items:flex-start;justify-content:space-between}.layout-space-between-end{align-content:flex-end;align-items:flex-end;justify-content:space-between}.layout-space-between-stretch{align-content:stretch;align-items:stretch;justify-content:space-between}.layout-start-center{align-content:center;align-items:center;justify-content:flex-start}.layout-start-start{align-content:flex-start;align-items:flex-start;justify-content:flex-start}.layout-start-end{align-content:flex-end;align-items:flex-end;justify-content:flex-start}.layout-start-stretch,:host{align-content:stretch;align-items:stretch;justify-content:flex-start}.layout-end-center{align-content:center;align-items:center;justify-content:flex-end}.layout-end-start{align-content:flex-start;align-items:flex-start;justify-content:flex-end}.layout-end-end{align-content:flex-end;align-items:flex-end;justify-content:flex-end}.layout-end-stretch{align-content:stretch;align-items:stretch;justify-content:flex-end}.flex-grow-1{flex:1}.flex-grow-2{flex:2}.flex-grow-3{flex:3}.flex-grow-4{flex:4}.flex-grow-5{flex:5}.flex-grow-6{flex:6}.flex-grow-7{flex:7}.flex-grow-8{flex:8}.flex-grow-9{flex:9}.flex-grow-10{flex:10}.flex-grow-11{flex:11}.flex-grow-12{flex:12}.sdk-xs-1{width:100%}.sdk-xs-2{width:50%}.sdk-xs-3{width:33.3333333333%}.sdk-xs-4{width:25%}.sdk-xm-1{width:100%}.sdk-xm-2{width:50%}.sdk-xm-3{width:33.3333333333%}.sdk-xm-4{width:25%}.sdk-xl-1{width:100%}.sdk-xl-2{width:50%}.sdk-xl-3{width:33.3333333333%}.sdk-xl-4{width:25%}@media screen and (max-width: 1024px){.flex-row,:host{flex-wrap:wrap}.sdk-xl-2,.sdk-xl-3,.sdk-xm-2{width:100%}.sdk-xl-4,.sdk-xm-3{width:50%}.sdk-xm-4{width:33.3333333333%}}@media screen and (max-width: 675.84px){.sdk-xl-4,.sdk-xm-3,.sdk-xs-2{width:100%}.sdk-xm-4,.sdk-xs-3{width:50%}.sdk-xs-4{width:33.3333333333%}}@media screen and (max-width: 512px){.sdk-xm-4,.sdk-xs-3{width:100%}.sdk-xs-4{width:50%}}:host{width:100%;flex-shrink:0}.sdk-sidenav-backdrop{position:absolute;z-index:2;top:0;left:0;bottom:0;right:0;display:none;background-color:#15151599}.sdk-sidenav-backdrop.active{display:flex}\n"] }]
}], ctorParameters: function () { return [{ type: i1.SidenavService }]; }, propDecorators: { hasBackdrop: [{
type: Input
}], mode: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZW5hdi1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZ3gtc2xpY2Uta2l0L3NyYy9saWIvbmF2aWdhdGlvbi9zaWRlbmF2L3NpZGVuYXYtY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL25hdmlnYXRpb24vc2lkZW5hdi9zaWRlbmF2LWNvbnRhaW5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUV6RCxPQUFPLEVBQWUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7OztBQU9oRSxNQUFNLE9BQU8seUJBQXlCO0lBWWxDLFlBQ1csY0FBOEI7UUFBOUIsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBWHpCLGdCQUFXLEdBQVksS0FBSyxDQUFDO0lBYTdDLENBQUM7SUFYRCxJQUFvQixJQUFJLENBQUMsSUFBaUI7UUFDdEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsRUFBQyxJQUFJLEVBQUMsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFRCxJQUFXLElBQUk7UUFDWCxPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztJQUM1QyxDQUFDO0lBT00sU0FBUztRQUNaLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUN6QyxDQUFDO0lBRU0sUUFBUTtRQUNYLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxHQUFHLElBQUksY0FBYyxDQUFDO1lBQzdDLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtTQUNsQixDQUFDLENBQUM7SUFDUCxDQUFDOztzSEF6QlEseUJBQXlCOzBHQUF6Qix5QkFBeUIsbUhDVHRDLG1TQU1BOzJGREdhLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDSSx1QkFBdUI7cUdBTWpCLFdBQVc7c0JBQTFCLEtBQUs7Z0JBRWMsSUFBSTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2lkZW5hdlNlcnZpY2UgfSBmcm9tICcuL3NpZGVuYXYuc2VydmljZSc7XG5pbXBvcnQgeyBTaWRlbmF2TW9kZSwgU2lkZW5hdk9wdGlvbnMgfSBmcm9tICcuL3NpZGVuYXYub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RrLXNpZGVuYXYtY29udGFpbmVyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2lkZW5hdi1jb250YWluZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NpZGVuYXYtY29udGFpbmVyLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNpZGVuYXZDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgQElucHV0KClwdWJsaWMgIGhhc0JhY2tkcm9wOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKXB1YmxpYyAgc2V0IG1vZGUobW9kZTogU2lkZW5hdk1vZGUpIHtcbiAgICAgICAgdGhpcy5zaWRlbmF2U2VydmljZS51cGRhdGVPcHRpb25zKHttb2RlfSk7XG4gICAgfVxuXG4gICAgcHVibGljIGdldCBtb2RlKCk6IFNpZGVuYXZNb2RlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2lkZW5hdlNlcnZpY2Uub3B0aW9ucy5tb2RlO1xuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgc2lkZW5hdlNlcnZpY2U6IFNpZGVuYXZTZXJ2aWNlLFxuICAgICkge1xuICAgIH1cblxuICAgIHB1YmxpYyBjbG9zZVNpZGUoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2lkZW5hdlNlcnZpY2UuaXNPcGVuZWQgPSBmYWxzZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2lkZW5hdlNlcnZpY2Uub3B0aW9ucyA9IG5ldyBTaWRlbmF2T3B0aW9ucyh7XG4gICAgICAgICAgICBtb2RlOiB0aGlzLm1vZGVcbiAgICAgICAgfSk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzZGstc2lkZW5hdlwiPjwvbmctY29udGVudD5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzZGstc2lkZW5hdi1jb250ZW50XCI+PC9uZy1jb250ZW50PlxuICAgIDxkaXYgY2xhc3M9XCJzZGstc2lkZW5hdi1iYWNrZHJvcFwiIChjbGljayk9XCJjbG9zZVNpZGUoKVwiXG4gICAgICAgICBbY2xhc3MuYWN0aXZlXT1cInNpZGVuYXZTZXJ2aWNlLmlzT3BlbmVkICYmIGhhc0JhY2tkcm9wXCI+PC9kaXY+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==