@knora/action/esm2015/lib/progress-indicator/progress-indicator.component.js

Knora ui module: action

import * as tslib_1 from "tslib";
import { Component, Input } from '@angular/core';
/**
 * The progress indicator can be used to show the status of loading something.
 * This can be the simple loader or in case of submitting data it can show the status (not ready, loading, done or error).
 *
 */
let ProgressIndicatorComponent = class ProgressIndicatorComponent {
    /**
     * @ignore
     */
    constructor() {
        /**
         * @param {string} [color=primary]
         *
         * Parameter to customize the appearance of the loader.
         * Hexadecimal color value e.g. #00ff00 or similar color values 'red', 'green' etc.
         */
        this.color = 'primary';
    }
    ngOnInit() {
    }
};
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number)
], ProgressIndicatorComponent.prototype, "status", void 0);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String)
], ProgressIndicatorComponent.prototype, "color", void 0);
ProgressIndicatorComponent = tslib_1.__decorate([
    Component({
        selector: 'kui-progress-indicator',
        template: "<!-- this is the progress indicator for forms -->\n<div class=\"kui-progress-indicator submit\" *ngIf=\"status !== undefined; else isLoading\">\n    <!-- spinner while on load / on submit -->\n    <div class=\"on-submit\" *ngIf=\"status === 0\">\n        <div class=\"spinner\" [style.border-top-color]=\"color\" [style.border-left-color]=\"color\"></div>\n    </div>\n\n    <div>\n        <!-- bullet point before submit -->\n        <mat-icon *ngIf=\"status === -1\" class=\"before-submit\">keyboard_arrow_right</mat-icon>\n        <!-- icon 'check' when done -->\n        <mat-icon *ngIf=\"status === 1\" class=\"after-submit\" [style.color]=\"color\">done</mat-icon>\n        <!-- in case of an error -->\n        <mat-icon *ngIf=\"status === 400\" class=\"submit-error\">not_interested</mat-icon>\n    </div>\n\n</div>\n\n<!-- default case: is loading -->\n<ng-template #isLoading>\n    <div class=\"kui-progress-indicator default\">\n        <div class=\"line\">\n            <div class=\"bounce1\" [style.background-color]=\"color\"></div>\n            <div class=\"bounce2\" [style.background-color]=\"color\"></div>\n            <div class=\"bounce3\" [style.background-color]=\"color\"></div>\n        </div>\n        <div class=\"line\">\n            <div class=\"bounce3\" [style.background-color]=\"color\"></div>\n            <div class=\"bounce1\" [style.background-color]=\"color\"></div>\n            <div class=\"bounce2\" [style.background-color]=\"color\"></div>\n        </div>\n    </div>\n</ng-template>\n\n\n<!-- another variety of isLoading (in one line) -->\n<!--\n<div class=\"loading-progress-indicator\">\n    <span class=\"text\">{{text}}</span>\n    <span class=\"dot\"></span>\n    <span class=\"dot\"></span>\n    <span class=\"dot\"></span>\n    <span class=\"dot\"></span>\n    <span class=\"dot\"></span>\n    <span class=\"dot\"></span>\n</div>\n-->\n",
        styles: [".kui-progress-indicator.default{height:56px;margin-left:auto;margin-right:auto;padding:24px 36px;top:60px;width:96px}.kui-progress-indicator.default.page-center{left:50%;position:absolute;top:39%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.kui-progress-indicator.default h1,.kui-progress-indicator.default h2,.kui-progress-indicator.default h3,.kui-progress-indicator.default p{color:#555;text-align:center}.kui-progress-indicator.default .line{margin:0 auto;text-align:center;width:70px}.kui-progress-indicator.default .line>div{-webkit-animation:1.4s ease-in-out infinite both bounce-keyframes;animation:1.4s ease-in-out infinite both bounce-keyframes;background-color:#00695c;border-radius:6px;display:inline-block;height:18px;width:18px}.kui-progress-indicator.default .line .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.kui-progress-indicator.default .line .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bounce-keyframes{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce-keyframes{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.kui-progress-indicator.submit{height:32px;width:32px}.kui-progress-indicator.submit .on-submit{-webkit-animation:.7s linear infinite spinner-keyframes;animation:.7s linear infinite spinner-keyframes;height:32px;width:32px}.kui-progress-indicator.submit .on-submit .spinner{border:2px solid #00695c;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:28px;width:28px}.kui-progress-indicator.submit .before-submit{color:rgba(128,128,128,.8)}.kui-progress-indicator.submit .after-submit{color:#00695c}.kui-progress-indicator.submit .submit-error{color:#f44336}@-webkit-keyframes spinner-keyframes{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-keyframes{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loading-progress-indicator{text-align:center;width:100%}.loading-progress-indicator .text{color:#00695c;font-size:12pt}.loading-progress-indicator .dot{-webkit-animation:1.4s ease-in-out infinite dot-keyframes;animation:1.4s ease-in-out infinite dot-keyframes;background-color:#00695c;border-radius:2px;display:inline-block;height:6px;margin:3px 6px 2px;width:6px}.loading-progress-indicator .dot:nth-child(2){-webkit-animation-delay:.16s;animation-delay:.16s}.loading-progress-indicator .dot:nth-child(3){-webkit-animation-delay:.32s;animation-delay:.32s}.loading-progress-indicator .dot:nth-child(4){-webkit-animation-delay:.48s;animation-delay:.48s}.loading-progress-indicator .dot:nth-child(5){-webkit-animation-delay:.64s;animation-delay:.64s}.loading-progress-indicator .dot:nth-child(6){-webkit-animation-delay:.8s;animation-delay:.8s}@-webkit-keyframes dot-keyframes{0%,100%{opacity:.4;-webkit-transform:scale(1,1);transform:scale(1,1)}50%{opacity:1;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}}@keyframes dot-keyframes{0%,100%{opacity:.4;-webkit-transform:scale(1,1);transform:scale(1,1)}50%{opacity:1;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}}"]
    }),
    tslib_1.__metadata("design:paramtypes", [])
], ProgressIndicatorComponent);
export { ProgressIndicatorComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtaW5kaWNhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Brbm9yYS9hY3Rpb24vIiwic291cmNlcyI6WyJsaWIvcHJvZ3Jlc3MtaW5kaWNhdG9yL3Byb2dyZXNzLWluZGljYXRvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRXpEOzs7O0dBSUc7QUFNSCxJQUFhLDBCQUEwQixHQUF2QyxNQUFhLDBCQUEwQjtJQXdCbkM7O09BRUc7SUFDSDtRQVpBOzs7OztXQUtHO1FBQ00sVUFBSyxHQUFZLFNBQVMsQ0FBQztJQU9wQyxDQUFDO0lBRUQsUUFBUTtJQUNSLENBQUM7Q0FFSixDQUFBO0FBcEJZO0lBQVIsS0FBSyxFQUFFOzswREFBaUI7QUFRaEI7SUFBUixLQUFLLEVBQUU7O3lEQUE0QjtBQXJCM0IsMEJBQTBCO0lBTHRDLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSx3QkFBd0I7UUFDbEMsNDJEQUFrRDs7S0FFckQsQ0FBQzs7R0FDVywwQkFBMEIsQ0FpQ3RDO1NBakNZLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIFRoZSBwcm9ncmVzcyBpbmRpY2F0b3IgY2FuIGJlIHVzZWQgdG8gc2hvdyB0aGUgc3RhdHVzIG9mIGxvYWRpbmcgc29tZXRoaW5nLlxuICogVGhpcyBjYW4gYmUgdGhlIHNpbXBsZSBsb2FkZXIgb3IgaW4gY2FzZSBvZiBzdWJtaXR0aW5nIGRhdGEgaXQgY2FuIHNob3cgdGhlIHN0YXR1cyAobm90IHJlYWR5LCBsb2FkaW5nLCBkb25lIG9yIGVycm9yKS5cbiAqXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna3VpLXByb2dyZXNzLWluZGljYXRvcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Byb2dyZXNzLWluZGljYXRvci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtaW5kaWNhdG9yLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NJbmRpY2F0b3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgLyoqXG4gICAgICogQHBhcmFtIHtudW1iZXJ9IFtzdGF0dXNdXG4gICAgICpcbiAgICAgKiBbc3RhdHVzXSBpcyBhIG51bWJlciBhbmQgY2FuIGJlIHVzZWQgd2hlbiBzdWJtaXR0aW5nIGZvcm0gZGF0YTpcbiAgICAgKlxuICAgICAqIC0gbm90IHJlYWR5OiAgICAtMVxuICAgICAqIC0gbG9hZGluZzogICAgICAgMFxuICAgICAqIC0gZG9uZTogICAgICAgICAgMVxuICAgICAqXG4gICAgICogLSBlcnJvcjogICAgICAgNDAwXG4gICAgICovXG4gICAgQElucHV0KCkgc3RhdHVzPzogbnVtYmVyO1xuXG4gICAgLyoqXG4gICAgICogQHBhcmFtIHtzdHJpbmd9IFtjb2xvcj1wcmltYXJ5XVxuICAgICAqXG4gICAgICogUGFyYW1ldGVyIHRvIGN1c3RvbWl6ZSB0aGUgYXBwZWFyYW5jZSBvZiB0aGUgbG9hZGVyLlxuICAgICAqIEhleGFkZWNpbWFsIGNvbG9yIHZhbHVlIGUuZy4gIzAwZmYwMCBvciBzaW1pbGFyIGNvbG9yIHZhbHVlcyAncmVkJywgJ2dyZWVuJyBldGMuXG4gICAgICovXG4gICAgQElucHV0KCkgY29sb3I/OiBzdHJpbmcgPSAncHJpbWFyeSc7XG5cblxuICAgIC8qKlxuICAgICAqIEBpZ25vcmVcbiAgICAgKi9cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICB9XG5cbn1cbiJdfQ==