ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
60 lines • 13.4 kB
JavaScript
import { Component, HostBinding } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "./sidenav.service";
export class SidenavContentComponent {
constructor(sidenavService) {
this.sidenavService = sidenavService;
}
get state() {
return {
value: this.sidenavService.openedState,
params: {
marginLeft: this.marginLeft ?? 0
}
};
}
get marginLeft() {
return this.sidenavService.options.mode === 'over' ? 0 : this.sidenavService.options.width;
}
}
SidenavContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavContentComponent, deps: [{ token: i1.SidenavService }], target: i0.ɵɵFactoryTarget.Component });
SidenavContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SidenavContentComponent, selector: "sdk-sidenav-content", host: { properties: { "@state": "this.state" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, 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{z-index:1;width:100%;min-height:100%;overflow:hidden}\n"], animations: [
trigger('state', [
state('opened', style({
marginLeft: '{{marginLeft}}px'
}), { params: { marginLeft: 0 } }),
state('closed', style({
marginLeft: '0'
})),
transition('opened => closed', [
animate('0.2s')
]),
transition('closed => opened', [
animate('0.2s')
]),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavContentComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-sidenav-content', template: `<ng-content></ng-content>`, animations: [
trigger('state', [
state('opened', style({
marginLeft: '{{marginLeft}}px'
}), { params: { marginLeft: 0 } }),
state('closed', style({
marginLeft: '0'
})),
transition('opened => closed', [
animate('0.2s')
]),
transition('closed => opened', [
animate('0.2s')
]),
]),
], 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{z-index:1;width:100%;min-height:100%;overflow:hidden}\n"] }]
}], ctorParameters: function () { return [{ type: i1.SidenavService }]; }, propDecorators: { state: [{
type: HostBinding,
args: ['@state']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZW5hdi1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvbmd4LXNsaWNlLWtpdC9zcmMvbGliL25hdmlnYXRpb24vc2lkZW5hdi9zaWRlbmF2LWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZELE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQXVCakYsTUFBTSxPQUFPLHVCQUF1QjtJQWVoQyxZQUNXLGNBQThCO1FBQTlCLG1CQUFjLEdBQWQsY0FBYyxDQUFnQjtJQUNyQyxDQUFDO0lBZkwsSUFBa0MsS0FBSztRQUNuQyxPQUFPO1lBQ0gsS0FBSyxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVztZQUN0QyxNQUFNLEVBQUU7Z0JBQ0osVUFBVSxFQUFFLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQzthQUNuQztTQUNKLENBQUM7SUFDTixDQUFDO0lBRUQsSUFBVyxVQUFVO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxLQUFLLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUM7SUFDL0YsQ0FBQzs7b0hBYlEsdUJBQXVCO3dHQUF2Qix1QkFBdUIsNkdBbkJ0QiwyQkFBMkIsMnhHQUV6QjtRQUNSLE9BQU8sQ0FBQyxPQUFPLEVBQUU7WUFDYixLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQztnQkFDbEIsVUFBVSxFQUFFLGtCQUFrQjthQUNqQyxDQUFDLEVBQUUsRUFBQyxNQUFNLEVBQUUsRUFBQyxVQUFVLEVBQUUsQ0FBQyxFQUFDLEVBQUMsQ0FBQztZQUM5QixLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQztnQkFDbEIsVUFBVSxFQUFFLEdBQUc7YUFDbEIsQ0FBQyxDQUFDO1lBQ0gsVUFBVSxDQUFDLGtCQUFrQixFQUFFO2dCQUMzQixPQUFPLENBQUMsTUFBTSxDQUFDO2FBQ2xCLENBQUM7WUFDRixVQUFVLENBQUMsa0JBQWtCLEVBQUU7Z0JBQzNCLE9BQU8sQ0FBQyxNQUFNLENBQUM7YUFDbEIsQ0FBQztTQUNMLENBQUM7S0FDTDsyRkFFUSx1QkFBdUI7a0JBckJuQyxTQUFTOytCQUNJLHFCQUFxQixZQUNyQiwyQkFBMkIsY0FFekI7d0JBQ1IsT0FBTyxDQUFDLE9BQU8sRUFBRTs0QkFDYixLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQztnQ0FDbEIsVUFBVSxFQUFFLGtCQUFrQjs2QkFDakMsQ0FBQyxFQUFFLEVBQUMsTUFBTSxFQUFFLEVBQUMsVUFBVSxFQUFFLENBQUMsRUFBQyxFQUFDLENBQUM7NEJBQzlCLEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDO2dDQUNsQixVQUFVLEVBQUUsR0FBRzs2QkFDbEIsQ0FBQyxDQUFDOzRCQUNILFVBQVUsQ0FBQyxrQkFBa0IsRUFBRTtnQ0FDM0IsT0FBTyxDQUFDLE1BQU0sQ0FBQzs2QkFDbEIsQ0FBQzs0QkFDRixVQUFVLENBQUMsa0JBQWtCLEVBQUU7Z0NBQzNCLE9BQU8sQ0FBQyxNQUFNLENBQUM7NkJBQ2xCLENBQUM7eUJBQ0wsQ0FBQztxQkFDTDtxR0FJaUMsS0FBSztzQkFBdEMsV0FBVzt1QkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2lkZW5hdlNlcnZpY2UgfSBmcm9tICcuL3NpZGVuYXYuc2VydmljZSc7XG5pbXBvcnQgeyBhbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdzZGstc2lkZW5hdi1jb250ZW50JyxcbiAgICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50PjwvbmctY29udGVudD5gLFxuICAgIHN0eWxlVXJsczogWycuL3NpZGVuYXYtY29udGVudC5jb21wb25lbnQuc2NzcyddLFxuICAgIGFuaW1hdGlvbnM6IFtcbiAgICAgICAgdHJpZ2dlcignc3RhdGUnLCBbXG4gICAgICAgICAgICBzdGF0ZSgnb3BlbmVkJywgc3R5bGUoe1xuICAgICAgICAgICAgICAgIG1hcmdpbkxlZnQ6ICd7e21hcmdpbkxlZnR9fXB4J1xuICAgICAgICAgICAgfSksIHtwYXJhbXM6IHttYXJnaW5MZWZ0OiAwfX0pLFxuICAgICAgICAgICAgc3RhdGUoJ2Nsb3NlZCcsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICBtYXJnaW5MZWZ0OiAnMCdcbiAgICAgICAgICAgIH0pKSxcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJ29wZW5lZCA9PiBjbG9zZWQnLCBbXG4gICAgICAgICAgICAgICAgYW5pbWF0ZSgnMC4ycycpXG4gICAgICAgICAgICBdKSxcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJ2Nsb3NlZCA9PiBvcGVuZWQnLCBbXG4gICAgICAgICAgICAgICAgYW5pbWF0ZSgnMC4ycycpXG4gICAgICAgICAgICBdKSxcbiAgICAgICAgXSksXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBTaWRlbmF2Q29udGVudENvbXBvbmVudCB7XG5cbiAgICBASG9zdEJpbmRpbmcoJ0BzdGF0ZScpcHVibGljICBnZXQgc3RhdGUoKTogYW55IHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICAgIHZhbHVlOiB0aGlzLnNpZGVuYXZTZXJ2aWNlLm9wZW5lZFN0YXRlLFxuICAgICAgICAgICAgcGFyYW1zOiB7XG4gICAgICAgICAgICAgICAgbWFyZ2luTGVmdDogdGhpcy5tYXJnaW5MZWZ0ID8/IDBcbiAgICAgICAgICAgIH1cbiAgICAgICAgfTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IG1hcmdpbkxlZnQoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2lkZW5hdlNlcnZpY2Uub3B0aW9ucy5tb2RlID09PSAnb3ZlcicgPyAwIDogdGhpcy5zaWRlbmF2U2VydmljZS5vcHRpb25zLndpZHRoO1xuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgc2lkZW5hdlNlcnZpY2U6IFNpZGVuYXZTZXJ2aWNlXG4gICAgKSB7IH1cbn1cbiJdfQ==