ngx-academia-uniandes-library/lib/academia-widgets/academygeneral/active.option.combobox/active.option.combobox/active.option.combobox.component.metadata.json

This library is used for Academia-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"ActiveOptionComboboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../combo-box/combo-box","name":"ComboBox","line":11,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-active-option-combobox","template":"\n    <ng-template [ngIf]=\"(compact && !multiSelect)\">\n      <div>\n        <select [disabled]=\"disabled\" id=\"combobox1\" class=\"combobox form-control\" [(ngModel)]=\"selectedSingle\" (change)=\"onSelectionChange()\">\n          <option [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\" [ngValue]=\"element\">{{(element.object == null?\"UNASIGNED\":element.object.nameid)| translate }}</option>\n        </select>\n      </div>\n    </ng-template>\n\n\n    <ng-template #checkactiveoption [ngIf]=\"(!compact && multiSelect)\">\n      <div class=\"comboselectlist\">\n        <table [class]=\"(disabled?'table-list-disabled':'')+' table table-list table-filter'\">\n          <tbody>\n            <tr [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\">\n              <td>\n                <div>\n                  <input (change)=\"onMultipleListElementClicked(element)\" [disabled]=\"disabled\" [checked]=\"element.selected\" type=\"checkbox\" name=\"{{'checkactiveoption'+(element.object!=null?element.object.nameid:'-1')}}\" id=\"{{'checkactiveoption'+(element.object!=null?element.object.nameid:'-1')}}\"\n                  />\n                  <label  for=\"{{'checkactiveoption'+(element.object!=null?element.object.nameid:'-1')}}\">{{(element.object != null?element.object.nameid:\"selectAll\")| translate }}</label>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-template>\n\n    <ng-template #optionactiveoption [ngIf]=\"(!compact && !multiSelect)\">\n      <div class=\"comboradiolist\">\n        <table [class]=\"(disabled?'table-list-disabled':'')+' table table-list table-filter'\">\n          <tbody>\n            <tr [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\">\n              <td>\n                <div>\n                  <input [disabled]=\"disabled\" [checked]=\"element.selected\" type=\"radio\" name=\"{{'radiogroupactiveoption'+optionInstance}}\" id=\"{{'radioactioption'+(element.object!=null?element.object.nameid:'-1')+optionInstance}}\"\n                  />\n                  <label (click)=\"onSelectSingleElement(element)\" for=\"{{'radioactioption'+(element.object!=null?element.object.nameid:'-1')+optionInstance}}\"> {{(element.object != null?element.object.nameid:\"UNASIGNED\")| translate }}</label>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </ng-template>\n\n\n    <ng-template #checkactiveoptioncpt [ngIf]=\"(compact && multiSelect)\">\n\n      <p>{{'selectActiveOption' | translate}}: &nbsp;\n        <button [disabled]=\"disabled\" class=\"btn btn-default\" (click)=\"openDialogMulti()\">{{'select'| translate}}</button>\n      </p>\n      <ul>\n        <li *ngFor=\"let element of selectedElements\">{{element.nameid | translate}}</li>\n      </ul>\n\n      <div class=\"modal fade\" [config]=\"{backdrop: 'static'}\" bsModal #activeoptiondialogmulti=\"bs-modal\" tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-dialog\" role=\"document\">\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <table class=\"table-list\">\n                <tr>\n                  <td>\n                    <b>{{'select' | translate}}</b>\n                  </td>\n                  <td>\n                    <button (click)=\"closeDialogMulti()\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                      <span aria-hidden=\"true\">&times;</span>\n                    </button>\n                  </td>\n\n                </tr>\n              </table>\n            </div>\n            <div align=\"center\" class=\"modal-body\">\n\n              <div class=\"comboselectlist\">\n                <table [class]=\"(disabled?'table-list-disabled':'')+' table table-list table-filter'\">\n                  <tbody>\n                    <tr [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\">\n                      <td>                   \n                        <div>\n                          <input [checked]=\"element.selected\" type=\"checkbox\" id=\"{{'checkactiveoption'+(element.object!=null?element.object.nameid:'-1')}}\"\n                          />\n                          <label (click)=\"onMultipleListElementClicked(element)\" for=\"{{'checkactiveoption'+(element.object!=null?element.object.nameid:'-1')}}\"> {{(element.object != null?element.object.nameid:\"selectAll\")| translate }}</label>\n                        </div>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n\n\n\n            </div>\n            <div align=\"center\" class=\"modal-footer\">\n              <button type=\"button\" class=\"btn btn-lg btn-uniandes-main\" (click)=\"closeDialogMulti()\">{{'select' | translate}}</button>\n            </div>\n          </div>\n\n        </div>\n      </div>\n\n\n    </ng-template>\n  ","styles":["\n    label{\n        width: 100%;\n        margin: 0;\n        text-align: left;\n    }\n    .label-candidates{\n        padding-left: 5%;\n        padding-right: 5%;\n        font-style: italic;\n        padding-bottom: 18px;\n    }\n    .panel {\n        border: 1px solid #ddd;\n        background-color: #fcfcfc;\n    }\n    .panel .btn-group {\n        margin: 15px 0 30px;\n    }\n    .panel .btn-group .btn {\n        transition: background-color .3s ease;\n    }\n    .table{\n        margin: 0;\n    }\n\n    .table-list-disabled{\n        background-color: #eee !important;\n    }\n\n    .table-list-disabled tbody tr td div label{\n        color: #7b7b7b !important;\n    }\n\n    .table-list{\n        width: 90%;\n    }\n\n    .table-filter {\n        background-color: #fff;\n        border-bottom: 1px solid #eee;\n    }\n    .table-filter tbody tr:hover {\n        cursor: pointer;\n        background-color: #eee;\n    }\n    .table-filter tbody tr td {\n        padding-top: 5px;\n        padding-right: 0px;\n        padding-bottom:5px;\n        vertical-align: middle;\n        border-top-color: #eee;\n    }\n    .table-filter tr td:first-child {\n        width: 15px;\n    }\n    .table-filter tr td:nth-child(2) {\n        width: 15px;\n    }\n    .ckbox {\n        position: relative;\n    }\n\n    .ckbox input[type=\"checkbox\"] {\n        opacity: 0;\n    }\n    .ckbox label {\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        display: block;\n    }\n    .ckbox label:before {\n        content: '';\n        top: 1px;\n        left: 0;\n        width: 18px;\n        height: 18px;\n        display: block;\n        position: absolute;\n        border-radius: 2px;\n        border: 1px solid #bbb;\n        background-color: #fff;\n        margin-top: 3px;\n    }\n\n    .ckbox input[type=\"checkbox\"]:checked + label:after {\n        top: 0px;\n        left: 2px;\n        content: '\\2714';\n        color: #000;\n        font-size: 18px;\n        font-family: 'Wingdings';\n        position: absolute;\n    \n    }\n\n\n\n    .table-filter .star {\n        color: #ccc;\n        text-align: center;\n        display: block;\n    }\n    .table-filter .star.star-checked {\n        color: #F0AD4E;\n    }\n    .table-filter .star:hover {\n        color: #ccc;\n    }\n    .table-filter .star.star-checked:hover {\n        color: #F0AD4E;\n    }\n    .table-filter .media-photo {\n        width: 35px;\n    }\n\n    .table-filter .media-body {\n        display: block;\n        width: 100%;\n        /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */\n    }\n    .table-filter .media-meta {\n        font-size: 11px;\n        color: #999;\n    }\n    .table-filter .media .title {\n        color: #000000;\n        font-size: 14px;\n        line-height: normal;\n        margin: 0;\n    }\n    .table-filter .media .title span {\n        font-size: .8em;\n        margin-right: 20px;\n    }\n    .table-filter .media .title span.green {\n        color: #5cb85c;\n    }\n    .table-filter .media .title span.yellow {\n        color: #f0ad4e;\n    }\n    .table-filter .media .title span.red {\n        color: #d9534f;\n    }\n    .table-filter .media .summary {\n        font-size: 14px;\n    }\n    .table-list{\n\n        width: 100%;\n    }\n    .comboyear{\n        width: 90px;\n    }\n\n    .labelyear{\n        width: 85px;\n        text-align: right;\n        padding-right: 5px;\n        font-size: 13px;\n        padding-top: 5px;\n    \n    }\n\n    .modal-body{\n        padding: 0px !important;\n        margin: 0px !important;\n\n        max-height: 70vh !important;\n        overflow-y: auto;\n    }\n    .modal-footer{\n        display: block;\n        padding: 10px;\n    }\n\n    .selectOption{\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        padding-top: 20px;\n        padding-left: 5px;\n        padding-right: 5px;\n        padding-bottom: 20px;\n        background-color:  white;\n    }\n\n    .selectOption div{\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .selectOption label{\n        margin: 0;\n    }\n\n\n    [type=\"radio\"]:checked,\n    [type=\"radio\"]:not(:checked) {\n        position: absolute;\n        display: none;\n    }\n    [type=\"radio\"]:checked + label,\n    [type=\"radio\"]:not(:checked) + label\n    {\n        position: relative;\n        padding-left: 28px;\n        cursor: pointer;\n        line-height: 20px;\n        display: inline-block;\n        color: #666;\n    }\n    [type=\"radio\"]:checked + label:before,\n    [type=\"radio\"]:not(:checked) + label:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 18px;\n        height: 18px;\n        border: 1px solid #bbb;\n        border-radius: 2px;\n    }\n    [type=\"radio\"]:checked + label:after,\n    [type=\"radio\"]:not(:checked) + label:after {\n        content: '';\n        width: 12px;\n        height: 12px;\n        background: black;\n        position: absolute;\n        top: 3px;\n        left: 3px;\n        border-radius: 100%;\n    \n\n    }\n    [type=\"radio\"]:not(:checked) + label:after {\n        opacity: 0;\n        -webkit-transform: scale(0);\n        transform: scale(0);\n    }\n    [type=\"radio\"]:checked + label:after {\n        opacity: 1;\n        -webkit-transform: scale(1);\n        transform: scale(1);\n    }\n\n\n\n\n\n    [type=\"checkbox\"]:checked,\n    [type=\"checkbox\"]:not(:checked) {\n        position: absolute;\n        display: none;\n    }\n    [type=\"checkbox\"]:checked + label,\n    [type=\"checkbox\"]:not(:checked) + label\n    {\n        position: relative;\n        padding-left: 28px;\n        cursor: pointer;\n        line-height: 20px;\n        display: inline-block;\n        color: #666;\n    }\n    [type=\"checkbox\"]:checked + label:before,\n    [type=\"checkbox\"]:not(:checked) + label:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 18px;\n        height: 18px;\n        border: 1px solid #bbb;\n        border-radius: 2px;\n    }\n    [type=\"checkbox\"]:checked + label:after,\n    [type=\"checkbox\"]:not(:checked) + label:after {\n        font-family: 'Material Icons';\n        content: 'check';\n        font-weight: bold;\n        width: 18px;\n        height: 18px;\n        color: black;\n        font-size: 16px;\n        position: absolute;\n        top: 0px;\n        left: 1px;\n        border-radius: 100%;\n    \n\n    }\n    [type=\"checkbox\"]:not(:checked) + label:after {\n        opacity: 0;\n        -webkit-transform: scale(0);\n        transform: scale(0);\n    }\n    [type=\"checkbox\"]:checked + label:after {\n        opacity: 1;\n        -webkit-transform: scale(1);\n        transform: scale(1);\n    }\n\n    /* protected region developer's' code on begin */\n    /* protected region developer's' code end */\n    /*Common Styles*/\n    /*Buttons*/\n\n    .btn-uniandes-main { \n        color: #000000; \n        background-color: #FFFF00; \n        border-color: none; \n      } \n   \n      .btn-uniandes-main:hover, \n      .btn-uniandes-main:focus, \n      .btn-uniandes-main:active, \n      .btn-uniandes-main.active, \n      .open .dropdown-toggle.btn-uniandes-main { \n        color: #000000; \n        background-color: #DBD000; \n        border-color: none ; \n      } \n   \n      .btn-uniandes-main:active, \n      .btn-uniandes-main.active, \n      .open .dropdown-toggle.btn-uniandes-main { \n        background-image: none; \n      } \n   \n      .btn-uniandes-main.disabled, \n      .btn-uniandes-main[disabled], \n      fieldset[disabled] .btn-uniandes-main, \n      .btn-uniandes-main.disabled:hover, \n      .btn-uniandes-main[disabled]:hover, \n      fieldset[disabled] .btn-uniandes-main:hover, \n      .btn-uniandes-main.disabled:focus, \n      .btn-uniandes-main[disabled]:focus, \n      fieldset[disabled] .btn-uniandes-main:focus, \n      .btn-uniandes-main.disabled:active, \n      .btn-uniandes-main[disabled]:active, \n      fieldset[disabled] .btn-uniandes-main:active, \n      .btn-uniandes-main.disabled.active, \n      .btn-uniandes-main[disabled].active, \n      fieldset[disabled] .btn-uniandes-main.active { \n        background-color: #FFFF00; \n        border-color: none; \n      } \n   \n      .btn-uniandes-main .badge { \n        color: #FFFF00; \n        background-color: #000000; \n      }\n\n\n      .btn-uniandes-secondary { \n        color: #ffffff; \n        background-color: #000000; \n        border-color: none; \n      } \n   \n      .btn-uniandes-secondary:hover, \n      .btn-uniandes-secondary:focus, \n      .btn-uniandes-secondary:active, \n      .btn-uniandes-secondary.active, \n      .open .dropdown-toggle.btn-uniandes-secondary { \n        color: #ffffff; \n        background-color: #707070; \n        border-color: none; \n      } \n   \n      .btn-uniandes-secondary:active, \n      .btn-uniandes-secondary.active, \n      .open .dropdown-toggle.btn-uniandes-secondary { \n        background-image: none; \n      } \n   \n      .btn-uniandes-secondary.disabled, \n      .btn-uniandes-secondary[disabled], \n      fieldset[disabled] .btn-uniandes-secondary, \n      .btn-uniandes-secondary.disabled:hover, \n      .btn-uniandes-secondary[disabled]:hover, \n      fieldset[disabled] .btn-uniandes-secondary:hover, \n      .btn-uniandes-secondary.disabled:focus, \n      .btn-uniandes-secondary[disabled]:focus, \n      fieldset[disabled] .btn-uniandes-secondary:focus, \n      .btn-uniandes-secondary.disabled:active, \n      .btn-uniandes-secondary[disabled]:active, \n      fieldset[disabled] .btn-uniandes-secondary:active, \n      .btn-uniandes-secondary.disabled.active, \n      .btn-uniandes-secondary[disabled].active, \n      fieldset[disabled] .btn-uniandes-secondary.active { \n        background-color: #000000; \n        border-color: none; \n      } \n   \n      .btn-uniandes-secondary .badge { \n        color: #000000; \n        background-color: #ffffff; \n      }\n\n    /*Dialogs*/\n    .modal-header{\n        padding: 0px;\n        border: 0px;\n        background-color: #FFFF00;\n    }\n\n    .modal-header table{\n        margin: 0px;\n        border: 0px;   \n        width: 100%;\n    }\n\n    .modal-header table tr td{\n        padding: 10px;\n    \n    }\n    .modal-body{\n        padding-bottom: 20px;\n        margin-left: 20px;\n        margin-right: 20px;\n    }\n\n    .title-element{\n        padding-top: 5px;\n        padding-bottom: 5px;\n    }\n    .modal-content{\n        border-radius: 0px;\n        border: 0px;\n    }\n\n    .modal-header{\n          border-radius: 0;\n    }\n  "]}]}],"members":{"modalDirectiveMulti":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["activeoptiondialogmulti"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"setData":[{"__symbolic":"method"}],"openDialogMulti":[{"__symbolic":"method"}],"closeDialogMulti":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]