ngx-academia-uniandes-library/lib/academia-widgets/academyusers/roles.type.combobox/roles.type.combobox/roles.type.combobox.component.js

This library is used for Academia-Uniandes system.

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var api_1 = require("api-angular-academia-dto/api");
var combo_box_1 = require("../../../../combo-box/combo-box");
var combo_box_modeldata_1 = require("../../../../combo-box/model-data/combo-box.modeldata");
var modal_1 = require("ngx-bootstrap/modal");
var RolesTypeComboboxComponent = /** @class */ (function (_super) {
    __extends(RolesTypeComboboxComponent, _super);
    function RolesTypeComboboxComponent() {
        return _super.call(this) || this;
    }
    RolesTypeComboboxComponent.prototype.setData = function () {
        var _this = this;
        this.data = [];
        var bruteData = api_1.Roles_Type.getAllEnumValues();
        bruteData.sort(function (a, b) {
            if (a.description.toLocaleLowerCase() > b.description.toLocaleLowerCase()) {
                return 1;
            }
            if (a.description.toLocaleLowerCase() < b.description.toLocaleLowerCase()) {
                return -1;
            }
            return 0;
        });
        this.selectionParamsBeforeReset();
        bruteData.forEach(function (element) {
            var nmodeldata = new combo_box_modeldata_1.ComboBoxModelData(false, false, true, element.nameid, element);
            _this.data.push(nmodeldata);
        });
        this.selectionParamsAfterReset();
    };
    RolesTypeComboboxComponent.prototype.openDialogMulti = function () {
        this.modalDirectiveMulti.show();
    };
    RolesTypeComboboxComponent.prototype.closeDialogMulti = function () {
        this.modalDirectiveMulti.hide();
    };
    /* protected region developer's' code on begin */
    /* protected region developer's' code end */
    /* protected region developer's' code on begin */
    /* protected region developer's' code end */
    RolesTypeComboboxComponent.prototype.ngOnInit = /* protected region developer's' code on begin */
    /* protected region developer's' code end */
    function () {
        this.setData();
    };
    RolesTypeComboboxComponent.decorators = [
        { type: core_1.Component, args: [{
                    selector: 'app-roles-type-combobox',
                    template: "\n\n    <ng-template [ngIf]=\"(compact && !multiSelect)\">\n      <div>\n        <select [disabled]=\"disabled\" id=\"rolestypecombobox1\" 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        <!-- protected region developer's' code on begin -->\n        <!-- protected region developer's' code end -->\n    </ng-template>\n\n\n    <ng-template #checkrolestype [ngIf]=\"(!compact && multiSelect)\">\n  \n               <div [(hidden)]=\"!enableSelectionState\" class=\"selectOption\">\n                <div>\n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.ALL\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.ALL)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{'allElements'| translate }}</label>\n                </div>\n                <div>\n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.NONE\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.NONE)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{ 'notypeElements' | translate }}</label>\n                </div>\n                <div> \n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.SELECT\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.SELECT)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{ 'select'| translate }}</label>\n                </div>\n              </div>\n      <div class=\"comboselectlist\">\n        <table [class]=\"(disabled||selectStates != ComboBoxReference.SELECT?'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 || selectStates != ComboBoxReference.SELECT\" [checked]=\"element.selected\" type=\"checkbox\" id=\"{{'checkrolestype'+(element.object!=null?element.object.nameid:'-1')}}\"\n                  />\n                  <label for=\"{{'checkrolestype'+(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        <!-- protected region developer's' code on begin -->\n        <!-- protected region developer's' code end -->\n    </ng-template>\n\n    <ng-template #optionrolestype [ngIf]=\"(!compact && !multiSelect)\">\n      <div class=\"comboradiolist\">\n        <table [class]=\"(disabled || selectStates != ComboBoxReference.SELECT?'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=\"{{'rolestyperadiogroup'+optionInstance}}\" id=\"{{'radiorolestype'+(element.object!=null?element.object.nameid:'-1')+optionInstance}}\"\n                  />\n                  <label (click)=\"onSelectSingleElement(element)\" for=\"{{'radiorolestype'+(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        <!-- protected region developer's' code on begin -->\n        <!-- protected region developer's' code end -->\n    </ng-template>\n\n\n    <ng-template #checkrolestypecpt [ngIf]=\"(compact && multiSelect)\">\n\n      <p>{{'selectType' | translate}}: &nbsp;\n        <button [disabled]=\"disabled\" class=\"btn btn-default\" (click)=\"openDialogMulti()\">{{'select'| translate}}</button>\n      </p>\n      <ul [(hidden)]=\"disableCheckBoxesSelection\">\n        <li *ngFor=\"let element of selectedElements\">{{element.nameid | translate}}</li>\n      </ul>\n       <ul [(hidden)]=\"!disableCheckBoxesSelection\">\n        <li [(hidden)]=\"selectStates != ComboBoxReference.ALL\">{{'allElements' | translate}}</li>\n        <li [(hidden)]=\"selectStates != ComboBoxReference.NONE\">{{'notypeElements' | translate}}</li>\n      </ul>\n\n      <div class=\"modal fade\" [config]=\"{backdrop: 'static'}\" bsModal #rolestypedialogmulti=\"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\n              <div [(hidden)]=\"!enableSelectionState\" class=\"selectOption\">\n                <div>\n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.ALL\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.ALL)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{'allElements'| translate }}</label>\n                </div>\n                <div>\n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.NONE\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.NONE)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{ 'notypeElements' | translate }}</label>\n                </div>\n                <div> \n                  <input [disabled]=\"!disabled\"  [checked]=\"selectStates == ComboBoxReference.SELECT\" class=\"regular-radio\" type=\"radio\" name=\"{{'rolestypeoptionsselectmdradiogroup'+optionInstance}}\"\n                    id=\"{{'radiorolestypeselectmd'+optionInstance}}\" />\n                  <label (click)=\"changeSelectionState(ComboBoxReference.SELECT)\" for=\"{{'radiorolestypeselectmd'+optionInstance}}\">{{ 'select'| translate }}</label>\n                </div>\n              </div>\n          \n          \n          \n              <div class=\"comboselectlist\">\n                <table [class]=\"(disabled || selectStates != ComboBoxReference.SELECT?'table-list-disabled':'')+' table table-list table-filter'\">\n                  <tbody>\n                    <tr [(hidden)]=\"element.hidden\" *ngFor=\"let element of data\">\n                      <td>\n                     \n                        <div>\n                          <input (change)=\"onMultipleListElementClicked(element)\" [disabled]=\"disabled || selectStates != ComboBoxReference.SELECT\" [checked]=\"element.selected\" type=\"checkbox\" id=\"{{'checkrolestype'+(element.object!=null?element.object.nameid:'-1')}}\"\n                          />\n                          <label for=\"{{'checkrolestype'+(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        <!-- protected region developer's' code on begin -->\n        <!-- protected region developer's' code end -->\n\n    </ng-template>\n  ",
                    styles: ["\n    label{\n        margin: 0;\n        width: 100%;\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    .table-list{\n        width: 90%;\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-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\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        align-items: center;\n        justify-content: center;\n        justify-items: center;\n        padding-left: 15px;\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\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  "]
                },] },
    ];
    /** @nocollapse */
    RolesTypeComboboxComponent.ctorParameters = function () { return []; };
    RolesTypeComboboxComponent.propDecorators = {
        "modalDirectiveMulti": [{ type: core_1.ViewChild, args: ['rolestypedialogmulti',] },],
    };
    return RolesTypeComboboxComponent;
}(combo_box_1.ComboBox));
exports.RolesTypeComboboxComponent = RolesTypeComboboxComponent;
//# sourceMappingURL=roles.type.combobox.component.js.map