ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
97 lines • 12.3 kB
JavaScript
import { Component, HostBinding, Inject, Input, PLATFORM_ID } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./sidenav.service";
export class SidenavComponent {
constructor(platformId, el, sidenavService) {
this.el = el;
this.sidenavService = sidenavService;
this.sub = new Subscription();
}
set opened(st) {
this.sidenavService.isOpened = st;
}
get currentMode() {
return `sdk-sidenav--${this.sidenavService.options.mode}`;
}
get isOpened() {
return this.sidenavService.isOpened;
}
get getExternalStyles() {
return this.styles ?? '';
}
get openClose() {
return this.sidenavService.openedState;
}
ngAfterViewInit() {
this.sub = this.sidenavService.openedObservableState.subscribe(st => {
this.sidenavService.updateOptions({
width: this.el.nativeElement.clientWidth,
});
});
}
ngOnDestroy() {
this.sub?.unsubscribe();
}
}
SidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i1.SidenavService }], target: i0.ɵɵFactoryTarget.Component });
SidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SidenavComponent, selector: "sdk-sidenav", inputs: { styles: "styles", opened: "opened" }, host: { properties: { "class": "this.currentMode", "class.active": "this.isOpened", "style": "this.getExternalStyles", "@state": "this.openClose" } }, ngImport: i0, template: `
<ng-content></ng-content>`, isInline: true, styles: ["@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes modal{0%{transform:scale(.5) translateY(100px);opacity:0}}@keyframes sdk-menu-more{0%{opacity:0;transform:scale(.9)}}@keyframes sdk-slide-in-right{0%{opacity:0;transform:translate(-1000px)}}@keyframes sdk-slide-in-left{0%{opacity:0;transform:translate(1000px)}}@keyframes sdk-slide-out-left{to{opacity:1;transform:translate(-1000px)}0%{transform:translate(0)}}@keyframes sdk-slide-out-right{to{opacity:1;transform:translate(1000px)}0%{transform:translate(0)}}@keyframes sdk-painting{0%{width:0%}to{width:100%}}@keyframes dot{0%{width:10px;height:10px;background-color:rgba(var(--base-rgb),1);transform:translateY(0)}to{width:23px;height:23px;background-color:rgba(var(--base-rgb),0);transform:translateY(-20 px)}}:host{z-index:3;background:var(--background);min-width:240px;height:100%;position:fixed;overflow-x:hidden;overflow-y:auto;left:0;bottom:0}\n"], animations: [
trigger('state', [
state('opened', style({
transform: 'none'
})),
state('closed', style({
transform: 'translateX(-100%)',
opacity: '0'
})),
transition('opened => closed', [
animate('0.2s 0.03s')
]),
transition('closed => opened', [
animate('0.2s 0.035s')
]),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SidenavComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-sidenav', template: `
<ng-content></ng-content>`, animations: [
trigger('state', [
state('opened', style({
transform: 'none'
})),
state('closed', style({
transform: 'translateX(-100%)',
opacity: '0'
})),
transition('opened => closed', [
animate('0.2s 0.03s')
]),
transition('closed => opened', [
animate('0.2s 0.035s')
]),
]),
], styles: ["@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes modal{0%{transform:scale(.5) translateY(100px);opacity:0}}@keyframes sdk-menu-more{0%{opacity:0;transform:scale(.9)}}@keyframes sdk-slide-in-right{0%{opacity:0;transform:translate(-1000px)}}@keyframes sdk-slide-in-left{0%{opacity:0;transform:translate(1000px)}}@keyframes sdk-slide-out-left{to{opacity:1;transform:translate(-1000px)}0%{transform:translate(0)}}@keyframes sdk-slide-out-right{to{opacity:1;transform:translate(1000px)}0%{transform:translate(0)}}@keyframes sdk-painting{0%{width:0%}to{width:100%}}@keyframes dot{0%{width:10px;height:10px;background-color:rgba(var(--base-rgb),1);transform:translateY(0)}to{width:23px;height:23px;background-color:rgba(var(--base-rgb),0);transform:translateY(-20 px)}}:host{z-index:3;background:var(--background);min-width:240px;height:100%;position:fixed;overflow-x:hidden;overflow-y:auto;left:0;bottom:0}\n"] }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.ElementRef }, { type: i1.SidenavService }]; }, propDecorators: { styles: [{
type: Input
}], opened: [{
type: Input
}], currentMode: [{
type: HostBinding,
args: ['class']
}], isOpened: [{
type: HostBinding,
args: [`class.active`]
}], getExternalStyles: [{
type: HostBinding,
args: [`style`]
}], openClose: [{
type: HostBinding,
args: ['@state']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZW5hdi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL25neC1zbGljZS1raXQvc3JjL2xpYi9uYXZpZ2F0aW9uL3NpZGVuYXYvc2lkZW5hdi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVILFNBQVMsRUFHVCxXQUFXLEVBQ1gsTUFBTSxFQUNOLEtBQUssRUFHTCxXQUFXLEVBQ2QsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUEwQnBDLE1BQU0sT0FBTyxnQkFBZ0I7SUEwQnpCLFlBQ3lCLFVBQWUsRUFDNUIsRUFBYyxFQUNmLGNBQThCO1FBRDdCLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZixtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUEzQmxDLFFBQUcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBNkJoQyxDQUFDO0lBekJELElBQW9CLE1BQU0sQ0FBQyxFQUFXO1FBQ2xDLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUN0QyxDQUFDO0lBRUQsSUFBaUMsV0FBVztRQUN4QyxPQUFPLGdCQUFnQixJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM5RCxDQUFDO0lBRUQsSUFBd0MsUUFBUTtRQUM1QyxPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxJQUFpQyxpQkFBaUI7UUFDOUMsT0FBTyxJQUFJLENBQUMsTUFBTSxJQUFJLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBa0MsU0FBUztRQUN2QyxPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFDO0lBQzNDLENBQUM7SUFTTSxlQUFlO1FBQ2xCLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxxQkFBcUIsQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDLEVBQUU7WUFDaEUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUM7Z0JBQzlCLEtBQUssRUFBRSxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxXQUFXO2FBQzNDLENBQUMsQ0FBQztRQUNQLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLFdBQVc7UUFDZCxJQUFJLENBQUMsR0FBRyxFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQzVCLENBQUM7OzZHQTNDUSxnQkFBZ0Isa0JBMkJiLFdBQVc7aUdBM0JkLGdCQUFnQiwwUEFyQmY7a0NBQ29CLHdpQ0FFbEI7UUFDUixPQUFPLENBQUMsT0FBTyxFQUFFO1lBQ2IsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUM7Z0JBQ2xCLFNBQVMsRUFBRSxNQUFNO2FBQ3BCLENBQUMsQ0FBQztZQUNILEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDO2dCQUNsQixTQUFTLEVBQUUsbUJBQW1CO2dCQUM5QixPQUFPLEVBQUUsR0FBRzthQUNmLENBQUMsQ0FBQztZQUNILFVBQVUsQ0FBQyxrQkFBa0IsRUFBRTtnQkFDM0IsT0FBTyxDQUFDLFlBQVksQ0FBQzthQUN4QixDQUFDO1lBQ0YsVUFBVSxDQUFDLGtCQUFrQixFQUFFO2dCQUMzQixPQUFPLENBQUMsYUFBYSxDQUFDO2FBQ3pCLENBQUM7U0FDTCxDQUFDO0tBQ0w7MkZBRVEsZ0JBQWdCO2tCQXZCNUIsU0FBUzsrQkFDSSxhQUFhLFlBQ2I7a0NBQ29CLGNBRWxCO3dCQUNSLE9BQU8sQ0FBQyxPQUFPLEVBQUU7NEJBQ2IsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUM7Z0NBQ2xCLFNBQVMsRUFBRSxNQUFNOzZCQUNwQixDQUFDLENBQUM7NEJBQ0gsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUM7Z0NBQ2xCLFNBQVMsRUFBRSxtQkFBbUI7Z0NBQzlCLE9BQU8sRUFBRSxHQUFHOzZCQUNmLENBQUMsQ0FBQzs0QkFDSCxVQUFVLENBQUMsa0JBQWtCLEVBQUU7Z0NBQzNCLE9BQU8sQ0FBQyxZQUFZLENBQUM7NkJBQ3hCLENBQUM7NEJBQ0YsVUFBVSxDQUFDLGtCQUFrQixFQUFFO2dDQUMzQixPQUFPLENBQUMsYUFBYSxDQUFDOzZCQUN6QixDQUFDO3lCQUNMLENBQUM7cUJBQ0w7OzBCQTZCSSxNQUFNOzJCQUFDLFdBQVc7a0dBdkJQLE1BQU07c0JBQXJCLEtBQUs7Z0JBRWMsTUFBTTtzQkFBekIsS0FBSztnQkFJMkIsV0FBVztzQkFBM0MsV0FBVzt1QkFBQyxPQUFPO2dCQUlvQixRQUFRO3NCQUEvQyxXQUFXO3VCQUFDLGNBQWM7Z0JBSU0saUJBQWlCO3NCQUFqRCxXQUFXO3VCQUFDLE9BQU87Z0JBSWMsU0FBUztzQkFBMUMsV0FBVzt1QkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBBZnRlclZpZXdJbml0LFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBIb3N0QmluZGluZyxcbiAgICBJbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT25EZXN0cm95LFxuICAgIE91dHB1dCxcbiAgICBQTEFURk9STV9JRFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNpZGVuYXZTZXJ2aWNlIH0gZnJvbSAnLi9zaWRlbmF2LnNlcnZpY2UnO1xuaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7U2lkZW5hdlN0YXRlfSBmcm9tICcuL3NpZGVuYXYub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RrLXNpZGVuYXYnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5gLFxuICAgIHN0eWxlVXJsczogWycuL3NpZGVuYXYuY29tcG9uZW50LnNjc3MnXSxcbiAgICBhbmltYXRpb25zOiBbXG4gICAgICAgIHRyaWdnZXIoJ3N0YXRlJywgW1xuICAgICAgICAgICAgc3RhdGUoJ29wZW5lZCcsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06ICdub25lJ1xuICAgICAgICAgICAgfSkpLFxuICAgICAgICAgICAgc3RhdGUoJ2Nsb3NlZCcsIHN0eWxlKHtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKC0xMDAlKScsXG4gICAgICAgICAgICAgICAgb3BhY2l0eTogJzAnXG4gICAgICAgICAgICB9KSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCdvcGVuZWQgPT4gY2xvc2VkJywgW1xuICAgICAgICAgICAgICAgIGFuaW1hdGUoJzAuMnMgMC4wM3MnKVxuICAgICAgICAgICAgXSksXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCdjbG9zZWQgPT4gb3BlbmVkJywgW1xuICAgICAgICAgICAgICAgIGFuaW1hdGUoJzAuMnMgMC4wMzVzJylcbiAgICAgICAgICAgIF0pLFxuICAgICAgICBdKSxcbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIFNpZGVuYXZDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xuXG4gICAgcHVibGljIHN1YiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICAgIEBJbnB1dCgpIHB1YmxpYyBzdHlsZXM7XG5cbiAgICBASW5wdXQoKSBwdWJsaWMgc2V0IG9wZW5lZChzdDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnNpZGVuYXZTZXJ2aWNlLmlzT3BlbmVkID0gc3Q7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIHB1YmxpYyBnZXQgY3VycmVudE1vZGUoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGBzZGstc2lkZW5hdi0tJHt0aGlzLnNpZGVuYXZTZXJ2aWNlLm9wdGlvbnMubW9kZX1gO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZyhgY2xhc3MuYWN0aXZlYCkgcHVibGljIGdldCBpc09wZW5lZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2lkZW5hdlNlcnZpY2UuaXNPcGVuZWQ7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKGBzdHlsZWApIHB1YmxpYyBnZXQgZ2V0RXh0ZXJuYWxTdHlsZXMoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc3R5bGVzID8/ICcnO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnQHN0YXRlJykgcHVibGljIGdldCBvcGVuQ2xvc2UoKTogU2lkZW5hdlN0YXRlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2lkZW5hdlNlcnZpY2Uub3BlbmVkU3RhdGU7XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoUExBVEZPUk1fSUQpIHBsYXRmb3JtSWQ6IGFueSxcbiAgICAgICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICAgICAgcHVibGljIHNpZGVuYXZTZXJ2aWNlOiBTaWRlbmF2U2VydmljZVxuICAgICkge1xuICAgIH1cblxuICAgIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc3ViID0gdGhpcy5zaWRlbmF2U2VydmljZS5vcGVuZWRPYnNlcnZhYmxlU3RhdGUuc3Vic2NyaWJlKHN0ID0+IHtcbiAgICAgICAgICAgIHRoaXMuc2lkZW5hdlNlcnZpY2UudXBkYXRlT3B0aW9ucyh7XG4gICAgICAgICAgICAgICAgd2lkdGg6IHRoaXMuZWwubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aCxcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc3ViPy51bnN1YnNjcmliZSgpO1xuICAgIH1cbn1cbiJdfQ==