ngx-monitorias-uniandes-lib/lib/check-bar-state/check-bar-state.component.metadata.json

This library is used for Monitorias-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"CheckBarStateComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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  "]}]}],"members":{"entries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"currentState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"entriesValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"onItemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"isInCurrentState":[{"__symbolic":"method"}],"onCircleClick":[{"__symbolic":"method"}]}}}}]