@ng-matero/extensions
Version:
Angular Material Extensions
57 lines • 11.3 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, booleanAttribute, } from '@angular/core';
import { MatProgressBar } from '@angular/material/progress-bar';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import * as i0 from "@angular/core";
export class MtxLoader {
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/** The loader's type. Can be `spinner` or `progressbar` */
this.type = 'spinner';
/** Theme color palette for the component. */
this.color = 'primary';
/** Mode of the progress circle or the progress bar. */
this.mode = 'indeterminate';
/** Stroke width of the spinner loader. */
this.strokeWidth = 4;
/** The diameter of the spinner loader (will set width and height of svg). */
this.diameter = 48;
/** Buffer value of the progressbar loader. */
this.bufferValue = 0;
/** Value of the progress circle or the progress bar. */
this.value = 0;
/** Whether the loader is loading. */
this.loading = true;
/** Whether the loader has a backdrop. */
this.hasBackdrop = true;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxLoader, isStandalone: true, selector: "mtx-loader", inputs: { type: "type", color: "color", mode: "mode", strokeWidth: "strokeWidth", diameter: "diameter", bufferValue: "bufferValue", value: "value", loading: ["loading", "loading", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute] }, host: { properties: { "class.mtx-loader-loading": "loading" }, classAttribute: "mtx-loader" }, exportAs: ["mtxLoader"], ngImport: i0, template: "@if (loading && hasBackdrop) {\n <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n <div class=\"mtx-loader-main\">\n @if (type==='spinner') {\n <mat-spinner\n [color]=\"color\"\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"diameter\"\n [mode]=\"$any(mode)\"\n [value]=\"value\">\n </mat-spinner>\n }\n @if (type==='progressbar') {\n <mat-progress-bar\n [color]=\"color\"\n [mode]=\"$any(mode)\"\n [value]=\"value\"\n [bufferValue]=\"bufferValue\">\n </mat-progress-bar>\n }\n </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoader, decorators: [{
type: Component,
args: [{ selector: 'mtx-loader', exportAs: 'mtxLoader', host: {
'class': 'mtx-loader',
'[class.mtx-loader-loading]': 'loading',
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatProgressSpinner, MatProgressBar], template: "@if (loading && hasBackdrop) {\n <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n <div class=\"mtx-loader-main\">\n @if (type==='spinner') {\n <mat-spinner\n [color]=\"color\"\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"diameter\"\n [mode]=\"$any(mode)\"\n [value]=\"value\">\n </mat-spinner>\n }\n @if (type==='progressbar') {\n <mat-progress-bar\n [color]=\"color\"\n [mode]=\"$any(mode)\"\n [value]=\"value\"\n [bufferValue]=\"bufferValue\">\n </mat-progress-bar>\n }\n </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
type: Input
}], color: [{
type: Input
}], mode: [{
type: Input
}], strokeWidth: [{
type: Input
}], diameter: [{
type: Input
}], bufferValue: [{
type: Input
}], value: [{
type: Input
}], loading: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], hasBackdrop: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9sb2FkZXIvbG9hZGVyLnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9sb2FkZXIvbG9hZGVyLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLGlCQUFpQixFQUNqQixnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGNBQWMsRUFBbUIsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRixPQUFPLEVBQUUsa0JBQWtCLEVBQXVCLE1BQU0sb0NBQW9DLENBQUM7O0FBa0I3RixNQUFNLE9BQU8sU0FBUztJQTRCcEIsWUFBb0Isa0JBQXFDO1FBQXJDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBbUI7UUEzQnpELDJEQUEyRDtRQUNsRCxTQUFJLEdBQWtCLFNBQVMsQ0FBQztRQUV6Qyw2Q0FBNkM7UUFDcEMsVUFBSyxHQUFpQixTQUFTLENBQUM7UUFFekMsdURBQXVEO1FBQzlDLFNBQUksR0FBMEMsZUFBZSxDQUFDO1FBRXZFLDBDQUEwQztRQUNqQyxnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUV6Qiw2RUFBNkU7UUFDcEUsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUV2Qiw4Q0FBOEM7UUFDckMsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFFekIsd0RBQXdEO1FBQy9DLFVBQUssR0FBRyxDQUFDLENBQUM7UUFFbkIscUNBQXFDO1FBQ0csWUFBTyxHQUFHLElBQUksQ0FBQztRQUV2RCx5Q0FBeUM7UUFDRCxnQkFBVyxHQUFHLElBQUksQ0FBQztJQUVDLENBQUM7aUlBNUJsRCxTQUFTO3FIQUFULFNBQVMsa09BdUJBLGdCQUFnQiwrQ0FHaEIsZ0JBQWdCLHFKQ3REdEMscW5CQXlCQSw2akJEQ1ksa0JBQWtCLCtLQUFFLGNBQWM7OzJGQUVqQyxTQUFTO2tCQWRyQixTQUFTOytCQUNFLFlBQVksWUFDWixXQUFXLFFBQ2Y7d0JBQ0osT0FBTyxFQUFFLFlBQVk7d0JBQ3JCLDRCQUE0QixFQUFFLFNBQVM7cUJBQ3hDLGlCQUdjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQLENBQUMsa0JBQWtCLEVBQUUsY0FBYyxDQUFDO3NGQUlwQyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0csS0FBSztzQkFBYixLQUFLO2dCQUdHLElBQUk7c0JBQVosS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLO2dCQUdHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBR0csV0FBVztzQkFBbkIsS0FBSztnQkFHRyxLQUFLO3NCQUFiLEtBQUs7Z0JBR2tDLE9BQU87c0JBQTlDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBR0UsV0FBVztzQkFBbEQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGhlbWVQYWxldHRlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBNYXRQcm9ncmVzc0JhciwgUHJvZ3Jlc3NCYXJNb2RlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcHJvZ3Jlc3MtYmFyJztcbmltcG9ydCB7IE1hdFByb2dyZXNzU3Bpbm5lciwgUHJvZ3Jlc3NTcGlubmVyTW9kZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Byb2dyZXNzLXNwaW5uZXInO1xuXG5leHBvcnQgdHlwZSBNdHhMb2FkZXJUeXBlID0gJ3NwaW5uZXInIHwgJ3Byb2dyZXNzYmFyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXR4LWxvYWRlcicsXG4gIGV4cG9ydEFzOiAnbXR4TG9hZGVyJyxcbiAgaG9zdDoge1xuICAgICdjbGFzcyc6ICdtdHgtbG9hZGVyJyxcbiAgICAnW2NsYXNzLm10eC1sb2FkZXItbG9hZGluZ10nOiAnbG9hZGluZycsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9sb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9sb2FkZXIuc2NzcycsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTWF0UHJvZ3Jlc3NTcGlubmVyLCBNYXRQcm9ncmVzc0Jhcl0sXG59KVxuZXhwb3J0IGNsYXNzIE10eExvYWRlciB7XG4gIC8qKiBUaGUgbG9hZGVyJ3MgdHlwZS4gQ2FuIGJlIGBzcGlubmVyYCBvciBgcHJvZ3Jlc3NiYXJgICovXG4gIEBJbnB1dCgpIHR5cGU6IE10eExvYWRlclR5cGUgPSAnc3Bpbm5lcic7XG5cbiAgLyoqIFRoZW1lIGNvbG9yIHBhbGV0dGUgZm9yIHRoZSBjb21wb25lbnQuICovXG4gIEBJbnB1dCgpIGNvbG9yOiBUaGVtZVBhbGV0dGUgPSAncHJpbWFyeSc7XG5cbiAgLyoqIE1vZGUgb2YgdGhlIHByb2dyZXNzIGNpcmNsZSBvciB0aGUgcHJvZ3Jlc3MgYmFyLiAqL1xuICBASW5wdXQoKSBtb2RlOiBQcm9ncmVzc1NwaW5uZXJNb2RlIHwgUHJvZ3Jlc3NCYXJNb2RlID0gJ2luZGV0ZXJtaW5hdGUnO1xuXG4gIC8qKiBTdHJva2Ugd2lkdGggb2YgdGhlIHNwaW5uZXIgbG9hZGVyLiAqL1xuICBASW5wdXQoKSBzdHJva2VXaWR0aCA9IDQ7XG5cbiAgLyoqIFRoZSBkaWFtZXRlciBvZiB0aGUgc3Bpbm5lciBsb2FkZXIgKHdpbGwgc2V0IHdpZHRoIGFuZCBoZWlnaHQgb2Ygc3ZnKS4gKi9cbiAgQElucHV0KCkgZGlhbWV0ZXIgPSA0ODtcblxuICAvKiogQnVmZmVyIHZhbHVlIG9mIHRoZSBwcm9ncmVzc2JhciBsb2FkZXIuICovXG4gIEBJbnB1dCgpIGJ1ZmZlclZhbHVlID0gMDtcblxuICAvKiogVmFsdWUgb2YgdGhlIHByb2dyZXNzIGNpcmNsZSBvciB0aGUgcHJvZ3Jlc3MgYmFyLiAqL1xuICBASW5wdXQoKSB2YWx1ZSA9IDA7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGxvYWRlciBpcyBsb2FkaW5nLiAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgbG9hZGluZyA9IHRydWU7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGxvYWRlciBoYXMgYSBiYWNrZHJvcC4gKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGhhc0JhY2tkcm9wID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9jaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG59XG4iLCJAaWYgKGxvYWRpbmcgJiYgaGFzQmFja2Ryb3ApIHtcbiAgPGRpdiBjbGFzcz1cIm10eC1sb2FkZXItYmFja2Ryb3BcIj48L2Rpdj5cbn1cbkBpZiAobG9hZGluZykge1xuICA8ZGl2IGNsYXNzPVwibXR4LWxvYWRlci1tYWluXCI+XG4gICAgQGlmICh0eXBlPT09J3NwaW5uZXInKSB7XG4gICAgICA8bWF0LXNwaW5uZXJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW3N0cm9rZVdpZHRoXT1cInN0cm9rZVdpZHRoXCJcbiAgICAgICAgW2RpYW1ldGVyXT1cImRpYW1ldGVyXCJcbiAgICAgICAgW21vZGVdPVwiJGFueShtb2RlKVwiXG4gICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiPlxuICAgICAgPC9tYXQtc3Bpbm5lcj5cbiAgICB9XG4gICAgQGlmICh0eXBlPT09J3Byb2dyZXNzYmFyJykge1xuICAgICAgPG1hdC1wcm9ncmVzcy1iYXJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW21vZGVdPVwiJGFueShtb2RlKVwiXG4gICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAgIFtidWZmZXJWYWx1ZV09XCJidWZmZXJWYWx1ZVwiPlxuICAgICAgPC9tYXQtcHJvZ3Jlc3MtYmFyPlxuICAgIH1cbiAgPC9kaXY+XG59XG48bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=