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

This library is used for Academia-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.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  "]}]}],"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}}]}],"hasImage":[{"__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":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"isInCurrentState":[{"__symbolic":"method"}],"onCircleClick":[{"__symbolic":"method"}],"checkImg":[{"__symbolic":"method"}]}}}}]