kwikui
Version:
KwikID's UI Component Library in Angular
52 lines • 8.47 kB
JavaScript
import { animate, style, transition, trigger } from "@angular/animations";
import { Component } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "./loader.service";
import * as i2 from "@angular/common";
export class KwikUILoaderComponent {
constructor(loaderService) {
this.loaderService = loaderService;
this.isLoaderVisible = false;
// Subscribe to the loaderService's changes in showLoader
this.loaderSubscription = this.loaderService.showLoader.subscribe((isVisible) => {
this.isLoaderVisible = isVisible; // Update the component property
});
}
ngOnInit() { }
ngOnDestroy() {
// Unsubscribe from the observable to avoid memory leaks
this.loaderSubscription.unsubscribe();
}
}
/** @nocollapse */ KwikUILoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUILoaderComponent, deps: [{ token: i1.KwikUILoaderService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUILoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUILoaderComponent, selector: "kwikui-loader", ngImport: i0, template: "<div\n class=\"kwikui-loader\"\n *ngIf=\"loaderService.showLoader | async as isLoaderVisible\"\n [class.fullscreen]=\"loaderService.fullscreen && true\"\n [@panelInOut]=\"isLoaderVisible ? 'visible' : 'hidden'\"\n>\n <div class=\"loader-container\">\n <span class=\"loader\"></span>\n <div class=\"loader-text\">{{ loaderService.loaderText }}</div>\n </div>\n</div>\n", styles: [".kwikui-loader{top:0;left:0;width:100%;height:100%;background:rgba(211,211,211,.5);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem;z-index:100}.kwikui-loader.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh}.kwikui-loader .loader-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;padding:2em 1.5em;grid-gap:1rem;gap:1rem;background-color:#fff;box-shadow:#959da533 0 8px 24px;border-radius:.5rem}.kwikui-loader .loader-container .loader{width:28px;height:28px;border-radius:50%;display:inline-block;position:relative;border:3px solid;box-sizing:border-box;border-color:var(--tui-primary) transparent transparent;animation:rotation 1s ease-out infinite}@keyframes rotation{0%{transform:rotate(0);animation-timing-function:ease-in}25%{animation-timing-function:linear}50%{transform:rotate(180deg);animation-timing-function:ease-out}75%{animation-timing-function:linear}to{transform:rotate(360deg);animation-timing-function:ease-in}}.kwikui-loader .loader-container .loader-text{font-size:1rem;color:#000;margin:0}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, animations: [
trigger("panelInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate(150)
]),
transition(":leave", [
animate(100, style({ transform: "translateY(100%)" }))
])
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUILoaderComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-loader",
templateUrl: "./loader.component.html",
styleUrls: ["./loader.component.scss"],
animations: [
trigger("panelInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate(150)
]),
transition(":leave", [
animate(100, style({ transform: "translateY(100%)" }))
])
])
]
}]
}], ctorParameters: function () { return [{ type: i1.KwikUILoaderService }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2t3aWt1aS9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9sb2FkZXIvbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2t3aWt1aS9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9sb2FkZXIvbG9hZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBb0JsRCxNQUFNLE9BQU8scUJBQXFCO0lBS2hDLFlBQW1CLGFBQWtDO1FBQWxDLGtCQUFhLEdBQWIsYUFBYSxDQUFxQjtRQUpyRCxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUt0Qix5REFBeUQ7UUFDekQsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FDL0QsQ0FBQyxTQUFTLEVBQUUsRUFBRTtZQUNaLElBQUksQ0FBQyxlQUFlLEdBQUcsU0FBUyxDQUFDLENBQUMsZ0NBQWdDO1FBQ3BFLENBQUMsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFFBQVEsS0FBVSxDQUFDO0lBRW5CLFdBQVc7UUFDVCx3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hDLENBQUM7O3NJQW5CVSxxQkFBcUI7MEhBQXJCLHFCQUFxQixxRENyQmxDLDZYQVdBLDZ4Q0RGYztRQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7WUFDcEIsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQkFDbkIsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLENBQUM7Z0JBQ3hDLE9BQU8sQ0FBQyxHQUFHLENBQUM7YUFDYixDQUFDO1lBQ0YsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQkFDbkIsT0FBTyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxDQUFDO2FBQ3ZELENBQUM7U0FDSCxDQUFDO0tBQ0g7NEZBRVUscUJBQXFCO2tCQWhCakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsV0FBVyxFQUFFLHlCQUF5QjtvQkFDdEMsU0FBUyxFQUFFLENBQUMseUJBQXlCLENBQUM7b0JBQ3RDLFVBQVUsRUFBRTt3QkFDVixPQUFPLENBQUMsWUFBWSxFQUFFOzRCQUNwQixVQUFVLENBQUMsUUFBUSxFQUFFO2dDQUNuQixLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQztnQ0FDeEMsT0FBTyxDQUFDLEdBQUcsQ0FBQzs2QkFDYixDQUFDOzRCQUNGLFVBQVUsQ0FBQyxRQUFRLEVBQUU7Z0NBQ25CLE9BQU8sQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLENBQUMsQ0FBQzs2QkFDdkQsQ0FBQzt5QkFDSCxDQUFDO3FCQUNIO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tIFwiQGFuZ3VsYXIvYW5pbWF0aW9uc1wiO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IEt3aWtVSUxvYWRlclNlcnZpY2UgfSBmcm9tIFwiLi9sb2FkZXIuc2VydmljZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwia3dpa3VpLWxvYWRlclwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2xvYWRlci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vbG9hZGVyLmNvbXBvbmVudC5zY3NzXCJdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcihcInBhbmVsSW5PdXRcIiwgW1xuICAgICAgdHJhbnNpdGlvbihcIjplbnRlclwiLCBbXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoMTAwJSlcIiB9KSxcbiAgICAgICAgYW5pbWF0ZSgxNTApXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oXCI6bGVhdmVcIiwgW1xuICAgICAgICBhbmltYXRlKDEwMCwgc3R5bGUoeyB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgxMDAlKVwiIH0pKVxuICAgICAgXSlcbiAgICBdKVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEt3aWtVSUxvYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGlzTG9hZGVyVmlzaWJsZSA9IGZhbHNlO1xuXG4gIHByaXZhdGUgbG9hZGVyU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IocHVibGljIGxvYWRlclNlcnZpY2U6IEt3aWtVSUxvYWRlclNlcnZpY2UpIHtcbiAgICAvLyBTdWJzY3JpYmUgdG8gdGhlIGxvYWRlclNlcnZpY2UncyBjaGFuZ2VzIGluIHNob3dMb2FkZXJcbiAgICB0aGlzLmxvYWRlclN1YnNjcmlwdGlvbiA9IHRoaXMubG9hZGVyU2VydmljZS5zaG93TG9hZGVyLnN1YnNjcmliZShcbiAgICAgIChpc1Zpc2libGUpID0+IHtcbiAgICAgICAgdGhpcy5pc0xvYWRlclZpc2libGUgPSBpc1Zpc2libGU7IC8vIFVwZGF0ZSB0aGUgY29tcG9uZW50IHByb3BlcnR5XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAvLyBVbnN1YnNjcmliZSBmcm9tIHRoZSBvYnNlcnZhYmxlIHRvIGF2b2lkIG1lbW9yeSBsZWFrc1xuICAgIHRoaXMubG9hZGVyU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJrd2lrdWktbG9hZGVyXCJcbiAgKm5nSWY9XCJsb2FkZXJTZXJ2aWNlLnNob3dMb2FkZXIgfCBhc3luYyBhcyBpc0xvYWRlclZpc2libGVcIlxuICBbY2xhc3MuZnVsbHNjcmVlbl09XCJsb2FkZXJTZXJ2aWNlLmZ1bGxzY3JlZW4gJiYgdHJ1ZVwiXG4gIFtAcGFuZWxJbk91dF09XCJpc0xvYWRlclZpc2libGUgPyAndmlzaWJsZScgOiAnaGlkZGVuJ1wiXG4+XG4gIDxkaXYgY2xhc3M9XCJsb2FkZXItY29udGFpbmVyXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJsb2FkZXJcIj48L3NwYW4+XG4gICAgPGRpdiBjbGFzcz1cImxvYWRlci10ZXh0XCI+e3sgbG9hZGVyU2VydmljZS5sb2FkZXJUZXh0IH19PC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=