iptdevs-design-system
Version:
Library common elements into IPT Plattform.
48 lines • 5.55 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class LoaderComponent {
constructor() {
this.message = '';
this.isDialog = false;
}
}
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LoaderComponent, selector: "ipt-loader", inputs: { message: "message", isDialog: "isDialog" }, ngImport: i0, template: `
<div [ngClass]="{'dialog': isDialog}">
<div [ngClass]="{'loader_container' : isDialog}">
<span>{{ message }}</span>
<div class="container">
<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>`, isInline: true, styles: [".dialog{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s;z-index:9999}.loader_container{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute;inset:0;margin:auto;background-color:#fff;border-radius:3px;padding:1rem;z-index:9999}span{display:flex;justify-content:center;color:#1c77f7;font:bold;margin-bottom:1rem}.container{display:flex;justify-content:center}.spinner{width:60px;height:60px;position:relative}.spinner .dot{position:absolute;inset:0;display:flex;justify-content:center}.spinner .dot:after{content:\"\";width:7px;height:7px;border-radius:50%;background-color:#1c77f7}@keyframes spin{to{transform:rotate(360deg)}}.spinner .dot{animation:spin 2s infinite}.spinner .dot:nth-child(2){animation-delay:.1s}.spinner .dot:nth-child(3){animation-delay:.2s}.spinner .dot:nth-child(4){animation-delay:.3s}.spinner .dot:nth-child(5){animation-delay:.4s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-loader', template: `
<div [ngClass]="{'dialog': isDialog}">
<div [ngClass]="{'loader_container' : isDialog}">
<span>{{ message }}</span>
<div class="container">
<div class="spinner">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>`, styles: [".dialog{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s;z-index:9999}.loader_container{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute;inset:0;margin:auto;background-color:#fff;border-radius:3px;padding:1rem;z-index:9999}span{display:flex;justify-content:center;color:#1c77f7;font:bold;margin-bottom:1rem}.container{display:flex;justify-content:center}.spinner{width:60px;height:60px;position:relative}.spinner .dot{position:absolute;inset:0;display:flex;justify-content:center}.spinner .dot:after{content:\"\";width:7px;height:7px;border-radius:50%;background-color:#1c77f7}@keyframes spin{to{transform:rotate(360deg)}}.spinner .dot{animation:spin 2s infinite}.spinner .dot:nth-child(2){animation-delay:.1s}.spinner .dot:nth-child(3){animation-delay:.2s}.spinner .dot:nth-child(4){animation-delay:.3s}.spinner .dot:nth-child(5){animation-delay:.4s}\n"] }]
}], propDecorators: { message: [{
type: Input
}], isDialog: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2xvYWRlci9sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFxQmpELE1BQU0sT0FBTyxlQUFlO0lBbkI1QjtRQW9CVyxZQUFPLEdBQVcsRUFBRSxDQUFDO1FBQ3JCLGFBQVEsR0FBWSxLQUFLLENBQUM7S0FDcEM7OzRHQUhZLGVBQWU7Z0dBQWYsZUFBZSx3R0FqQmhCOzs7Ozs7Ozs7Ozs7OztTQWNIOzJGQUdJLGVBQWU7a0JBbkIzQixTQUFTOytCQUNFLFlBQVksWUFDWjs7Ozs7Ozs7Ozs7Ozs7U0FjSDs4QkFJRSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaXB0LWxvYWRlcicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgW25nQ2xhc3NdPVwieydkaWFsb2cnOiBpc0RpYWxvZ31cIj5cbiAgICA8ZGl2IFtuZ0NsYXNzXT1cInsnbG9hZGVyX2NvbnRhaW5lcicgOiBpc0RpYWxvZ31cIj5cbiAgICAgIDxzcGFuPnt7IG1lc3NhZ2UgfX08L3NwYW4+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzcGlubmVyXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRvdFwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkb3RcIj48L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZG90XCI+PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImRvdFwiPjwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJkb3RcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+YCxcbiAgc3R5bGVVcmxzOiBbJy4vbG9hZGVyLmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIExvYWRlckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBpc0RpYWxvZzogYm9vbGVhbiA9IGZhbHNlO1xufVxuXG4iXX0=