import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class LoaderSquareComponent {
    constructor() {
        this.title = '';
        this.message = '';
        this.width = '230px';
    }
    ngOnInit() {
        this.calculateWidth();
    }
    calculateWidth() {
        const characters = this.message.length;
        if (characters <= 18)
            return;
        this.width = `${Math.round((characters * 160) / 18)}px`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LoaderSquareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: LoaderSquareComponent, selector: "smz-ui-loader-square", inputs: { title: "title", message: "message", width: "width" }, ngImport: i0, template: "<div class=\"loading-page-container\">\r\n    <div class=\"loading-container\" [ngStyle]=\"{ 'width': width }\">\r\n        <div class=\"spinner-container\">\r\n            <div class=\"sk-square-grid\">\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-one\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-two\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-three\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-four\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        <div class=\"text-container grid flex-col items-start justify-middle\">\r\n            <h3>{{ title }}</h3>\r\n            <p>{{ message }}</p>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".loading-page-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;-webkit-user-select:none;user-select:none;z-index:10001}.loading-container{min-width:230px;max-width:500px;height:80px;background:var(--surface-card);border-radius:60px;border:1px solid var(--surface-ground);box-shadow:0 6.2px 4.5px #00000006,0 14.4px 10.6px #00000009,0 25.8px 19px #0000000a,0 42.9px 31.5px #0000000c,0 70.6px 51.8px #0000000e,0 123.4px 90.6px #0001,0 267px 196px #00000017;display:grid!important;grid-template-columns:70px 1fr;grid-template-rows:60px;grid-column-gap:10px;grid-row-gap:0px;margin-left:auto;margin-right:auto;margin-top:calc(50vh - 40px);padding:8px}.text-container h3{font-size:18px;color:var(--text-color);margin-top:16px;margin-bottom:0}.text-container p{color:var(--text-color);margin:2px 0 0;font-size:12px;line-height:15px}.spinner-container{height:65px;width:65px;display:flex;justify-content:center;align-items:center;background:var(--primary-color);border-radius:100%}.sk-square-grid{height:35px;width:35px;transform:rotate(45deg);font-size:0;line-height:0;animation:rotate-loader 5s infinite;padding:4px;border:1px solid var(--surface-card)}.sk-segment-holder{position:relative;display:inline-block;width:50%;height:50%}.sk-segment{position:absolute;background:var(--surface-card)}.sk-one{bottom:0;height:0;width:100%;animation:slide-one 1s infinite}.sk-two{left:0;height:100%;width:0;animation:slide-two 1s infinite;animation-delay:.25s}.sk-three{right:0;height:100%;width:0;animation:slide-two 1s infinite;animation-delay:.75s}.sk-four{top:0;height:0;width:100%;animation:slide-one 1s infinite;animation-delay:.5s}@keyframes slide-one{0%{height:0;opacity:1}12.5%{height:100%;opacity:1}50%{opacity:1}to{height:100%;opacity:0}}@keyframes slide-two{0%{width:0;opacity:1}12.5%{width:100%;opacity:1}50%{opacity:1}to{width:100%;opacity:0}}@keyframes rotate-loader{0%{transform:rotate(45deg)}20%{transform:rotate(45deg)}25%{transform:rotate(135deg)}45%{transform:rotate(135deg)}50%{transform:rotate(225deg)}70%{transform:rotate(225deg)}75%{transform:rotate(315deg)}95%{transform:rotate(315deg)}to{transform:rotate(405deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LoaderSquareComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-ui-loader-square', template: "<div class=\"loading-page-container\">\r\n    <div class=\"loading-container\" [ngStyle]=\"{ 'width': width }\">\r\n        <div class=\"spinner-container\">\r\n            <div class=\"sk-square-grid\">\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-one\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-two\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-three\"></div>\r\n              </div>\r\n              <div class=\"sk-segment-holder\">\r\n                <div class=\"sk-segment sk-four\"></div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        <div class=\"text-container grid flex-col items-start justify-middle\">\r\n            <h3>{{ title }}</h3>\r\n            <p>{{ message }}</p>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".loading-page-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;-webkit-user-select:none;user-select:none;z-index:10001}.loading-container{min-width:230px;max-width:500px;height:80px;background:var(--surface-card);border-radius:60px;border:1px solid var(--surface-ground);box-shadow:0 6.2px 4.5px #00000006,0 14.4px 10.6px #00000009,0 25.8px 19px #0000000a,0 42.9px 31.5px #0000000c,0 70.6px 51.8px #0000000e,0 123.4px 90.6px #0001,0 267px 196px #00000017;display:grid!important;grid-template-columns:70px 1fr;grid-template-rows:60px;grid-column-gap:10px;grid-row-gap:0px;margin-left:auto;margin-right:auto;margin-top:calc(50vh - 40px);padding:8px}.text-container h3{font-size:18px;color:var(--text-color);margin-top:16px;margin-bottom:0}.text-container p{color:var(--text-color);margin:2px 0 0;font-size:12px;line-height:15px}.spinner-container{height:65px;width:65px;display:flex;justify-content:center;align-items:center;background:var(--primary-color);border-radius:100%}.sk-square-grid{height:35px;width:35px;transform:rotate(45deg);font-size:0;line-height:0;animation:rotate-loader 5s infinite;padding:4px;border:1px solid var(--surface-card)}.sk-segment-holder{position:relative;display:inline-block;width:50%;height:50%}.sk-segment{position:absolute;background:var(--surface-card)}.sk-one{bottom:0;height:0;width:100%;animation:slide-one 1s infinite}.sk-two{left:0;height:100%;width:0;animation:slide-two 1s infinite;animation-delay:.25s}.sk-three{right:0;height:100%;width:0;animation:slide-two 1s infinite;animation-delay:.75s}.sk-four{top:0;height:0;width:100%;animation:slide-one 1s infinite;animation-delay:.5s}@keyframes slide-one{0%{height:0;opacity:1}12.5%{height:100%;opacity:1}50%{opacity:1}to{height:100%;opacity:0}}@keyframes slide-two{0%{width:0;opacity:1}12.5%{width:100%;opacity:1}50%{opacity:1}to{width:100%;opacity:0}}@keyframes rotate-loader{0%{transform:rotate(45deg)}20%{transform:rotate(45deg)}25%{transform:rotate(135deg)}45%{transform:rotate(135deg)}50%{transform:rotate(225deg)}70%{transform:rotate(225deg)}75%{transform:rotate(315deg)}95%{transform:rotate(315deg)}to{transform:rotate(405deg)}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { title: [{
                type: Input
            }], message: [{
                type: Input
            }], width: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLXNxdWFyZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc216LXVpL3NyYy9saWIvbW9kdWxlcy9zbXotbGF5b3V0cy9mZWF0dXJlcy9nbG9iYWwtbG9hZGVyL2NvbXBvbmVudHMvc3F1YXJlL2xvYWRlci1zcXVhcmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNtei11aS9zcmMvbGliL21vZHVsZXMvc216LWxheW91dHMvZmVhdHVyZXMvZ2xvYmFsLWxvYWRlci9jb21wb25lbnRzL3NxdWFyZS9sb2FkZXItc3F1YXJlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFPekQsTUFBTSxPQUFPLHFCQUFxQjtJQUtoQztRQUhnQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsWUFBTyxHQUFHLEVBQUUsQ0FBQztRQUNiLFVBQUssR0FBRyxPQUFPLENBQUM7SUFDaEIsQ0FBQztJQUVWLFFBQVE7UUFFYixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGNBQWM7UUFFbkIsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUM7UUFFdkMsSUFBSSxVQUFVLElBQUksRUFBRTtZQUFFLE9BQU87UUFFN0IsSUFBSSxDQUFDLEtBQUssR0FBSSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxVQUFVLEdBQUcsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztJQUMzRCxDQUFDOzhHQW5CVSxxQkFBcUI7a0dBQXJCLHFCQUFxQiw0SENQbEMsdTlCQXVCTTs7MkZEaEJPLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxzQkFBc0I7d0RBTWhCLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsT0FBTztzQkFBdEIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3Ntei11aS1sb2FkZXItc3F1YXJlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbG9hZGVyLXNxdWFyZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbG9hZGVyLXNxdWFyZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBMb2FkZXJTcXVhcmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXRcclxue1xyXG4gIEBJbnB1dCgpIHB1YmxpYyB0aXRsZSA9ICcnO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBtZXNzYWdlID0gJyc7XHJcbiAgQElucHV0KCkgcHVibGljIHdpZHRoID0gJzIzMHB4JztcclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZFxyXG4gIHtcclxuICAgIHRoaXMuY2FsY3VsYXRlV2lkdGgoKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBjYWxjdWxhdGVXaWR0aCgpOiB2b2lkIHtcclxuXHJcbiAgICBjb25zdCBjaGFyYWN0ZXJzID0gdGhpcy5tZXNzYWdlLmxlbmd0aDtcclxuXHJcbiAgICBpZiAoY2hhcmFjdGVycyA8PSAxOCkgcmV0dXJuO1xyXG5cclxuICAgIHRoaXMud2lkdGggPSAgYCR7TWF0aC5yb3VuZCgoY2hhcmFjdGVycyAqIDE2MCkgLyAxOCl9cHhgO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwibG9hZGluZy1wYWdlLWNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImxvYWRpbmctY29udGFpbmVyXCIgW25nU3R5bGVdPVwieyAnd2lkdGgnOiB3aWR0aCB9XCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInNwaW5uZXItY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzay1zcXVhcmUtZ3JpZFwiPlxyXG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzay1zZWdtZW50LWhvbGRlclwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNrLXNlZ21lbnQgc2stb25lXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNrLXNlZ21lbnQtaG9sZGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2stc2VnbWVudCBzay10d29cIj48L2Rpdj5cclxuICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2stc2VnbWVudC1ob2xkZXJcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzay1zZWdtZW50IHNrLXRocmVlXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNrLXNlZ21lbnQtaG9sZGVyXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2stc2VnbWVudCBzay1mb3VyXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInRleHQtY29udGFpbmVyIGdyaWQgZmxleC1jb2wgaXRlbXMtc3RhcnQganVzdGlmeS1taWRkbGVcIj5cclxuICAgICAgICAgICAgPGgzPnt7IHRpdGxlIH19PC9oMz5cclxuICAgICAgICAgICAgPHA+e3sgbWVzc2FnZSB9fTwvcD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=