@ipi-soft/ng-components
Version:
Custom Angular Components
70 lines (66 loc) • 6.96 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Output, ContentChild } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@ipi-soft/ng-components/services';
const OpenCloseAnimation = trigger('openCloseAnimation', [
state('true', style({
transform: 'translateX(0%)',
})),
state('false', style({
transform: 'translateX(100%)',
})),
transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
]);
class IpiDrawerComponent {
constructor(scrollBlockService, changeDetector) {
this.scrollBlockService = scrollBlockService;
this.changeDetector = changeDetector;
this.isOpen = false;
this.closeChange = new EventEmitter();
this.scrollBlockService.activate();
}
ngOnDestroy() {
this.scrollBlockService.deactivate();
}
ngAfterViewInit() {
this.isOpen = true;
this.changeDetector.detectChanges();
}
close() {
if (!this.closeChange) {
return;
}
this.isOpen = false;
setTimeout(() => {
this.closeChange.emit();
}, 250);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiDrawerComponent, deps: [{ token: i1.ScrollBlockService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiDrawerComponent, isStandalone: true, selector: "ipi-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--ipi-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--ipi-drawer-background, #FFFFFF);box-shadow:var(--ipi-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--ipi-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--ipi-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [OpenCloseAnimation] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiDrawerComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-drawer', animations: [OpenCloseAnimation], imports: [
NgTemplateOutlet,
], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n <div class=\"header\">\n @if (title) {\n <span class=\"title\">\n <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n </span>\n }\n \n @if (description) {\n <span class=\"description\">\n <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n </span>\n }\n </div>\n\n @if (content) {\n <div class=\"content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n }\n\n @if (actions) {\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n }\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--ipi-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--ipi-drawer-background, #FFFFFF);box-shadow:var(--ipi-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--ipi-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--ipi-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
}], ctorParameters: () => [{ type: i1.ScrollBlockService }, { type: i0.ChangeDetectorRef }], propDecorators: { closeChange: [{
type: Output
}], title: [{
type: ContentChild,
args: ['title']
}], description: [{
type: ContentChild,
args: ['description']
}], content: [{
type: ContentChild,
args: ['content']
}], actions: [{
type: ContentChild,
args: ['actions']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiDrawerComponent };
//# sourceMappingURL=ipi-soft-ng-components-drawer.mjs.map