@cardboard-box/ngx-box
Version:
A collection of useful directives, components and services for angular
35 lines • 10.3 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../magic-circle/magic-circle.component";
import * as i3 from "../magic-circle/ring/ring.component";
import * as i4 from "../magic-circle/square/square.component";
import * as i5 from "../icon/icon.component";
export class ContainerComponent {
constructor() {
this.loading = false;
this.handleScroll = false;
}
set notLoading(value) { this.loading = !value; }
get notLoading() { return !this.loading; }
}
ContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: ContainerComponent, selector: "box-container", inputs: { loading: "loading", loadingText: ["loading-text", "loadingText"], error: "error", handleScroll: ["handle-scroll", "handleScroll"], notLoading: ["not-loading", "notLoading"] }, ngImport: i0, template: "<main class=\"flex\">\n <section class=\"loading center\" *ngIf=\"loading\">\n <magic-circle spin-speed=\"20s\" width=\"100%\" height=\"100%\">\n <mc-ring [text]=\"loadingText || 'Some fancy stuff is happening... Sit tight...'\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\">\n <mc-ring text=\"Loading... Loading... Loading...\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\"></mc-square>\n </mc-ring>\n </mc-square>\n </mc-ring>\n </magic-circle>\n </section>\n <section class=\"error center\" *ngIf=\"error\">\n <h1><box-icon>warning</box-icon>An error occurred:</h1>\n <p>{{ error }}</p>\n </section>\n <section class=\"content\" *ngIf=\"!loading && !error\" [ngClass]=\"{ 'scroll': handleScroll || handleScroll === '' }\">\n <ng-content></ng-content>\n </section>\n</main>", styles: [".static-fill{position:fixed!important;top:0;left:0;width:100vw;height:100vh;overflow:hidden;display:flex;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Roboto}.flex{display:flex;flex-flow:row;overflow:hidden;color:var(--text-color);position:relative}.flex.row{flex-flow:column}.flex .fill{flex:1}.flex .center-vert{margin-top:auto;margin-bottom:auto}.flex .center-horz{margin-left:auto;margin-right:auto}.flex .center{margin:auto}.flex .pad-left{margin-left:auto}.flex .pad-right{margin-right:auto}\n", "main{position:absolute;width:100%;height:100%}main .loading{width:400px;height:400px;position:relative}main .error h1,main .error p{text-align:center}main .content{position:relative;width:100%;height:100%;overflow:hidden}main .content.scroll{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MagicCircleComponent, selector: "magic-circle", inputs: ["width", "height", "spin-speed"] }, { kind: "component", type: i3.RingComponent, selector: "mc-ring", inputs: ["width", "height", "color", "innerWidth", "text"] }, { kind: "component", type: i4.SquareComponent, selector: "mc-square", inputs: ["width", "height", "color", "rotate", "total", "index"] }, { kind: "component", type: i5.IconComponent, selector: "box-icon", inputs: ["font-size", "unsize", "fill", "spin"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'box-container', template: "<main class=\"flex\">\n <section class=\"loading center\" *ngIf=\"loading\">\n <magic-circle spin-speed=\"20s\" width=\"100%\" height=\"100%\">\n <mc-ring [text]=\"loadingText || 'Some fancy stuff is happening... Sit tight...'\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\">\n <mc-ring text=\"Loading... Loading... Loading...\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\"></mc-square>\n </mc-ring>\n </mc-square>\n </mc-ring>\n </magic-circle>\n </section>\n <section class=\"error center\" *ngIf=\"error\">\n <h1><box-icon>warning</box-icon>An error occurred:</h1>\n <p>{{ error }}</p>\n </section>\n <section class=\"content\" *ngIf=\"!loading && !error\" [ngClass]=\"{ 'scroll': handleScroll || handleScroll === '' }\">\n <ng-content></ng-content>\n </section>\n</main>", styles: [".static-fill{position:fixed!important;top:0;left:0;width:100vw;height:100vh;overflow:hidden;display:flex;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Roboto}.flex{display:flex;flex-flow:row;overflow:hidden;color:var(--text-color);position:relative}.flex.row{flex-flow:column}.flex .fill{flex:1}.flex .center-vert{margin-top:auto;margin-bottom:auto}.flex .center-horz{margin-left:auto;margin-right:auto}.flex .center{margin:auto}.flex .pad-left{margin-left:auto}.flex .pad-right{margin-right:auto}\n", "main{position:absolute;width:100%;height:100%}main .loading{width:400px;height:400px;position:relative}main .error h1,main .error p{text-align:center}main .content{position:relative;width:100%;height:100%;overflow:hidden}main .content.scroll{overflow-y:auto}\n"] }]
}], propDecorators: { loading: [{
type: Input
}], loadingText: [{
type: Input,
args: ['loading-text']
}], error: [{
type: Input
}], handleScroll: [{
type: Input,
args: ['handle-scroll']
}], notLoading: [{
type: Input,
args: ['not-loading']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhcmRib2FyZGJveC9uZ3gtYm94L3NyYy9saWIvY29tcG9uZW50cy9jb250YWluZXIvY29udGFpbmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NhcmRib2FyZGJveC9uZ3gtYm94L3NyYy9saWIvY29tcG9uZW50cy9jb250YWluZXIvY29udGFpbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBUWpELE1BQU0sT0FBTyxrQkFBa0I7SUFML0I7UUFNYSxZQUFPLEdBQWdCLEtBQUssQ0FBQztRQUdkLGlCQUFZLEdBQWdCLEtBQUssQ0FBQztLQU03RDtJQUhHLElBQ0ksVUFBVSxDQUFDLEtBQWtCLElBQUksSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDN0QsSUFBSSxVQUFVLEtBQUssT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDOzsrR0FUakMsa0JBQWtCO21HQUFsQixrQkFBa0IsK09DUi9CLDJzQ0F1Qk87MkZEZk0sa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWU7OEJBS2QsT0FBTztzQkFBZixLQUFLO2dCQUNpQixXQUFXO3NCQUFqQyxLQUFLO3VCQUFDLGNBQWM7Z0JBQ1osS0FBSztzQkFBYixLQUFLO2dCQUNrQixZQUFZO3NCQUFuQyxLQUFLO3VCQUFDLGVBQWU7Z0JBSWxCLFVBQVU7c0JBRGIsS0FBSzt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvcEJvb2xlYW4gfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2JveC1jb250YWluZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbICcuLy4uLy4uL3N0eWxlcy9mbGV4LnNjc3MnLCAnLi9jb250YWluZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDb250YWluZXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIGxvYWRpbmc6IFByb3BCb29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCdsb2FkaW5nLXRleHQnKSBsb2FkaW5nVGV4dD86IHN0cmluZztcbiAgICBASW5wdXQoKSBlcnJvcj86IHN0cmluZztcbiAgICBASW5wdXQoJ2hhbmRsZS1zY3JvbGwnKSBoYW5kbGVTY3JvbGw6IFByb3BCb29sZWFuID0gZmFsc2U7XG5cblxuICAgIEBJbnB1dCgnbm90LWxvYWRpbmcnKSBcbiAgICBzZXQgbm90TG9hZGluZyh2YWx1ZTogUHJvcEJvb2xlYW4pIHsgdGhpcy5sb2FkaW5nID0gIXZhbHVlOyB9XG4gICAgZ2V0IG5vdExvYWRpbmcoKSB7IHJldHVybiAhdGhpcy5sb2FkaW5nOyB9XG59XG4iLCI8bWFpbiBjbGFzcz1cImZsZXhcIj5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImxvYWRpbmcgY2VudGVyXCIgKm5nSWY9XCJsb2FkaW5nXCI+XG4gICAgICAgIDxtYWdpYy1jaXJjbGUgc3Bpbi1zcGVlZD1cIjIwc1wiIHdpZHRoPVwiMTAwJVwiIGhlaWdodD1cIjEwMCVcIj5cbiAgICAgICAgICAgIDxtYy1yaW5nIFt0ZXh0XT1cImxvYWRpbmdUZXh0IHx8ICdTb21lIGZhbmN5IHN0dWZmIGlzIGhhcHBlbmluZy4uLiBTaXQgdGlnaHQuLi4nXCI+XG4gICAgICAgICAgICAgICAgPG1jLXNxdWFyZSBbdG90YWxdPVwiM1wiIFtpbmRleF09XCIwXCI+PC9tYy1zcXVhcmU+XG4gICAgICAgICAgICAgICAgPG1jLXNxdWFyZSBbdG90YWxdPVwiM1wiIFtpbmRleF09XCIxXCI+PC9tYy1zcXVhcmU+XG4gICAgICAgICAgICAgICAgPG1jLXNxdWFyZSBbdG90YWxdPVwiM1wiIFtpbmRleF09XCIyXCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYy1yaW5nIHRleHQ9XCJMb2FkaW5nLi4uIExvYWRpbmcuLi4gTG9hZGluZy4uLlwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPG1jLXNxdWFyZSBbdG90YWxdPVwiM1wiIFtpbmRleF09XCIwXCI+PC9tYy1zcXVhcmU+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWMtc3F1YXJlIFt0b3RhbF09XCIzXCIgW2luZGV4XT1cIjFcIj48L21jLXNxdWFyZT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxtYy1zcXVhcmUgW3RvdGFsXT1cIjNcIiBbaW5kZXhdPVwiMlwiPjwvbWMtc3F1YXJlPlxuICAgICAgICAgICAgICAgICAgICA8L21jLXJpbmc+XG4gICAgICAgICAgICAgICAgPC9tYy1zcXVhcmU+XG4gICAgICAgICAgICA8L21jLXJpbmc+XG4gICAgICAgIDwvbWFnaWMtY2lyY2xlPlxuICAgIDwvc2VjdGlvbj5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImVycm9yIGNlbnRlclwiICpuZ0lmPVwiZXJyb3JcIj5cbiAgICAgICAgPGgxPjxib3gtaWNvbj53YXJuaW5nPC9ib3gtaWNvbj5BbiBlcnJvciBvY2N1cnJlZDo8L2gxPlxuICAgICAgICA8cD57eyBlcnJvciB9fTwvcD5cbiAgICA8L3NlY3Rpb24+XG4gICAgPHNlY3Rpb24gY2xhc3M9XCJjb250ZW50XCIgKm5nSWY9XCIhbG9hZGluZyAmJiAhZXJyb3JcIiBbbmdDbGFzc109XCJ7ICdzY3JvbGwnOiBoYW5kbGVTY3JvbGwgfHwgaGFuZGxlU2Nyb2xsID09PSAnJyB9XCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L3NlY3Rpb24+XG48L21haW4+Il19