ngx-monitorias-uniandes-lib
Version:
This library is used for Monitorias-Uniandes system.
38 lines • 7.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var CheckBarStateComponent = /** @class */ (function () {
function CheckBarStateComponent() {
this.entries = [];
this.state = "true";
this.entriesValues = [];
this.onItemClick = new core_1.EventEmitter();
}
CheckBarStateComponent.prototype.ngOnInit = function () {
};
CheckBarStateComponent.prototype.isInCurrentState = function (state) {
return state === this.currentState;
};
CheckBarStateComponent.prototype.onCircleClick = function (state) {
this.onItemClick.emit(state);
};
CheckBarStateComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'check-bar-state',
template: "\n <div class=\"container-fluid\">\n\n <br /><br />\n <ul class=\"list-unstyled multi-steps\">\n <li (click)=\" onCircleClick(item)\" [class.is-active-true]=\"isInCurrentState(item) && state == 'true'\" [class.is-active-false]=\"isInCurrentState(item) && state == 'false'\" [class.is-active-warning]=\"isInCurrentState(item) && state == 'warning'\" *ngFor=\"let item of entries; let i = index\"><div class=\"txt-state\">{{(entriesValues && entriesValues.length > 0 && entriesValues[i][item] ? entriesValues[i][item] : item) | translate }}</div> <span class=\"popover above\">{{ (entriesValues && entriesValues.length > 0 && entriesValues[i][item] ? entriesValues[i][item] : item) | translate }}</span> </li>\n </ul>\n \n </div>\n ",
styles: ["\n .multi-steps > li.is-active-true:before, .multi-steps > li.is-active-true ~ li:before, .multi-steps > li.is-active-false:before, .multi-steps > li.is-active-false ~ li:before, .multi-steps > li.is-active-warning:before, .multi-steps > li.is-active-warning ~ li:before {\n content: \"\";\n font-family: inherit;\n font-weight: 700;\n }\n .multi-steps > li.is-active-true:after, .multi-steps > li.is-active-true ~ li:after, .multi-steps > li.is-active-false:after, .multi-steps > li.is-active-false ~ li:after, .multi-steps > li.is-active-warning:after, .multi-steps > li.is-active-warning ~ li:after {\n background-color: #bee7dc;\n }\n .multi-steps {\n display: table;\n table-layout: fixed;\n width: 100%;\n cursor: pointer;\n }\n .multi-steps > li {\n counter-increment: stepNum;\n text-align: center;\n display: table-cell;\n position: relative;\n }\n .multi-steps > li:before {\n content: \"\";\n background-image: url(\"assets/img/success.svg\");\n display: block;\n margin: 0 auto 4px;\n background-color: #00ac8e;\n width: 36px;\n height: 36px;\n text-align: center;\n font-weight: bold;\n border-width: 2px;\n border-style: solid;\n border-color: #00ac8e;\n border-radius: 50%;\n }\n .multi-steps > li:after {\n content: \"\";\n height: 2px;\n width: 100%;\n background-color: #00ac8e;\n position: absolute;\n top: 16px;\n left: 50%;\n z-index: -1;\n }\n .multi-steps > li:last-child:after {\n display: none;\n }\n .multi-steps > li.is-active-true:before {\n background-color: #fff;\n border-color: #00ac8e;\n }\n .multi-steps > li.is-active-true ~ li {\n color: black;\n }\n .multi-steps > li.is-active-true ~ li:before {\n background-image: url(\"assets/img/success-inactive.svg\");\n background-color: #bee7dc;\n border-color: #bee7dc;\n }\n .multi-steps > li.is-active-false:before {\n background-color: #d75a4a;\n border-color: #d75a4a;\n background-image: url(\"assets/img/error.svg\");\n }\n .multi-steps > li.is-active-false ~ li {\n color: black;\n }\n .multi-steps > li.is-active-false ~ li:before {\n background-image: url(\"assets/img/success-inactive.svg\");\n background-color: #bee7dc;\n border-color: #bee7dc;\n }\n .multi-steps > li.is-active-warning:before {\n background-color: #e2e214;\n border-color: #e2e214;\n background-image: url(\"assets/img/warning.svg\");\n }\n .multi-steps > li.is-active-warning ~ li {\n color: black;\n }\n .multi-steps > li.is-active-warning ~ li:before {\n background-image: url(\"assets/img/success-inactive.svg\");\n background-color: #bee7dc;\n border-color: #bee7dc;\n }\n @media screen and (max-width: 576px) {\n .multi-steps li:not(.is-active-true):not(.is-active-false):not(.is-active-warning) {\n display: none;\n }\n .multi-steps li:after {\n background-color: white;\n display: none;\n font-size: 0;\n }\n }\n .popover {\n display: none;\n }\n @media screen and (max-width: 768px) {\n .multi-steps li:not(.is-active-true):not(.is-active-false):not(.is-active-warning) {\n display: none;\n }\n .multi-steps li:after {\n background-color: white;\n display: none;\n font-size: 0;\n }\n }\n @media screen and (max-width: 992px) {\n /* li:not(.is-active-true):not(.is-active-false):not(.is-active-warning){\n display: none;\n }\n li:after{\n background-color: white;\n display: none;\n font-size: 0;\n }\n */\n .multi-steps li {\n content: none;\n font-size: 0;\n color: white;\n align-content: center;\n }\n .multi-steps li:hover .popover {\n font-family: inherit;\n font-weight: 700;\n padding: 7px 10px;\n color: black;\n display: block;\n top: -50px;\n left: 30px;\n }\n .multi-steps li.is-active-true ~ li {\n content: \"\";\n color: white;\n }\n .multi-steps li.is-active-true, .multi-steps li.is-active-false, .multi-steps li.is-active-warning {\n text-align: center;\n }\n .multi-steps li.is-active-true .popover, .multi-steps li.is-active-false .popover, .multi-steps li.is-active-warning .popover {\n font-family: inherit;\n font-weight: 700;\n color: black;\n display: block;\n top: -50px;\n left: 30px;\n padding: 7px 10px;\n }\n }\n "]
},] },
];
/** @nocollapse */
CheckBarStateComponent.ctorParameters = function () { return []; };
CheckBarStateComponent.propDecorators = {
"entries": [{ type: core_1.Input },],
"currentState": [{ type: core_1.Input },],
"state": [{ type: core_1.Input },],
"entriesValues": [{ type: core_1.Input },],
"onItemClick": [{ type: core_1.Output },],
};
return CheckBarStateComponent;
}());
exports.CheckBarStateComponent = CheckBarStateComponent;
//# sourceMappingURL=check-bar-state.component.js.map