ngx-academia-uniandes-library
Version:
This library is used for Academia-Uniandes system.
41 lines • 6.82 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.hasImage = true;
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.prototype.checkImg = function () {
return this.hasImage;
};
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.with-img]=\"checkImg()\" [class.is-active-true]=\"isInCurrentState(item) && state\" [class.is-active-false]=\"isInCurrentState(item) && !state\" *ngFor=\"let item of entries; let i = index\">{{item | translate }} <span class=\"popover above\">{{ item | translate }}</span> </li>\n </ul>\n \n </div>\n ",
styles: ["\n .multi-steps>li.is-active-true:before,\n .multi-steps>li.is-active-true~li:before,\n .multi-steps>li.is-active-false:before,\n .multi-steps>li.is-active-false~li:before {\n content: '';\n font-family: inherit;\n font-weight: 700;\n }\n\n .multi-steps>li.is-active-true:after,\n .multi-steps>li.is-active-true~li:after,\n .multi-steps>li.is-active-false:after,\n .multi-steps>li.is-active-false~li:after {\n background-color: #bee7dc;\n }\n\n .multi-steps {\n display: table;\n table-layout: fixed;\n width: 100%;\n cursor: pointer;\n }\n\n .multi-steps>li {\n counter-increment: stepNum;\n text-align: center;\n display: table-cell;\n position: relative;\n }\n\n .multi-steps>li.with-img:before,\n .multi-steps>li:before {\n content: '';\n z-index: 2;\n position: relative;\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\n .multi-steps>li.with-img:before {\n background-image: url(\"assets/img/success.svg\");\n }\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\n .multi-steps>li:last-child:after {\n display: none;\n }\n\n .multi-steps>li.is-active-true~li {\n color: black;\n }\n\n .multi-steps>li.is-active-true~li:before,\n .multi-steps>li.with-img.is-active-true~li:before {\n background-color: #bee7dc;\n border-color: #bee7dc;\n z-index: 2;\n position: relative;\n }\n\n .multi-steps>li.with-img.is-active-true~li:before {\n background-image: url(\"assets/img/success-inactive.svg\");\n }\n\n .multi-steps>li.is-active-false:before,\n .multi-steps>li.with-img.is-active-false:before {\n background-color: #d75a4a;\n border-color: #d75a4a;\n z-index: 2;\n position: relative;\n }\n\n .multi-steps>li.with-img.is-active-false:before {\n background-image: url(\"assets/img/error.svg\");\n }\n\n .multi-steps>li.is-active-false~li {\n color: black;\n }\n\n .multi-steps>li.is-active-false~li:before,\n .multi-steps>li.with-img.is-active-false~li:before {\n background-color: #bee7dc;\n border-color: #bee7dc;\n z-index: 2;\n position: relative;\n }\n\n .multi-steps>li.with-img.is-active-false~li:before {\n background-image: url(\"assets/img/success-inactive.svg\");\n }\n\n @media screen and (max-width: 576px) {\n .multi-steps li:not(.is-active-true):not(.is-active-false) {\n display: none;\n }\n .multi-steps li:after {\n background-color: white;\n display: none;\n font-size: 0;\n }\n .multi-steps>li {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .popover {\n display: none;\n }\n\n @media screen and (max-width: 768px) {\n .multi-steps li:not(.is-active-true):not(.is-active-false) {\n display: none;\n }\n .multi-steps li:after {\n background-color: white;\n display: none;\n font-size: 0;\n }\n .container-fluid {\n margin-top: -32px;\n }\n }\n\n @media screen and (min-width: 769px) and (max-width: 1400px) {\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: -42px;\n left: 0;\n }\n .multi-steps li.is-active-true~li {\n content: '';\n color: white;\n }\n .multi-steps li.is-active-true,\n .multi-steps li.is-active-false {\n text-align: center;\n }\n .multi-steps li.is-active-true .popover,\n .multi-steps li.is-active-false .popover {\n font-family: inherit;\n font-weight: 700;\n color: black;\n display: block;\n top: -42px;\n left: 0;\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 },],
"hasImage": [{ type: core_1.Input },],
"onItemClick": [{ type: core_1.Output },],
};
return CheckBarStateComponent;
}());
exports.CheckBarStateComponent = CheckBarStateComponent;
//# sourceMappingURL=check-bar-state.component.js.map