adn-datatable/adn-datatable.metadata.json

Datatable component integrable to any angular project.

{"__symbolic":"module","version":4,"metadata":{"DatatableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":23,"character":4},{"__symbolic":"reference","module":"@ng-bootstrap/ng-bootstrap","name":"NgbModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4},{"__symbolic":"reference","module":"angular2-multiselect-dropdown","name":"AngularMultiSelectModule","line":26,"character":4}],"providers":[{"__symbolic":"reference","name":"ɵc"}],"bootstrap":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-root","template":"\n<!--\n<data-table-component width=\"100%\" oddRowColor=\"\" evenRowColor=\"\" headerColor=\"red\" [userId]=\"'user2'\" [apiUrl]=\"'http://localhost:1337'\" [tableObjectId]=\"'dataCollection1'\"></data-table-component>\n-->\n<data-table-component [ready]='true' oddRowColor=\"#fff\" evenRowColor=\"#f6f6f6\" headerColor=\"aliceblue\" [userId]=\"'user2'\" datatableWidth=\"80%\" [apiUrl]=\"'https://api-datatable.herokuapp.com'\" [tableObjectId]=\"'dataCollection1'\"></data-table-component>\n<!-- <button (click)=\"callme()\">asdsadoiio</button> -->","styles":[".small{font-size:10px}.small .dateInput[_ngcontent-c2]{min-width:0;height:40%}.small .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.small .dateFilter[_ngcontent-c2]{min-width:50%}.small .multiSelect[_ngcontent-c2]{min-width:100px;margin-left:7%;width:50%;height:auto}.small .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.xsmall{font-size:8px}.xsmall .icon[_ngcontent-c2]{margin:0;height:auto;max-width:10px}.xsmall .selected-list[_ngcontent-c3] .c-btn[_ngcontent-c3]{width:100%;box-shadow:0 1px 5px #aca3a3;padding:0;cursor:pointer;display:flex}.xsmall .dateInput[_ngcontent-c2]{min-width:0;height:40%}.xsmall .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.xsmall .dateFilter[_ngcontent-c2]{min-width:50%}.xsmall .multiSelect[_ngcontent-c2]{margin-left:7%;width:50%;height:auto}.xsmall .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.xsmall .data-table[_ngcontent-c4]{table-layout:auto}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"callme":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"data-table-component","template":"\n  <div *ngIf=\"loading\" class=\"loader\"><div class=\"lds-ring\"><div></div><div></div><div></div><div></div></div></div>\n<div #datatableDiv style=\"margin: auto;\">\n  <br>\n  <div id=\"changeUser\" class=\"popup-demo\">\n      <div style=\"display: inline\">\n      <span style=\"margin-right: 20px;\">Changer d'utilisateur (Demo only (user2 for test) - actuellement '{{requestBody.userId}}')</span>\n        <input type=\"text\" class=\"addUserInput\" id=\"changeUserInput\">\n        <button (click)=\"changeUserCall()\" class=\"popupButton\">\n          Changer d'utilisateur\n        </button>\n      </div>\n    </div>\n\n  <div *ngIf=\"readyToDisplay\">\n    <button *ngIf=\"editable\" (click)=\"toggleEdit()\" class=\"validateButton\">\n      Mode vue\n      <img class=\"icon\" src=\"../assets/img/view.png\">\n    </button>\n    <button *ngIf=\"!editable\" (click)=\"toggleEdit()\" class=\"validateButton\">\n      Mode édition\n      <img class=\"icon\" src=\"../assets/img/edit.png\">\n    </button>\n    <div *ngIf=\"infoTable.admins.includes(requestBody.userId)\">\n      <button (click)=\"showUsersPopup = false; showRevokePopup = false; showGrantPopup = !showGrantPopup; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showGrantPopup)}\">\n        <img class=\"icon\" src=\"../assets/img/unlock.png\">\n        <span>Autoriser l'accés</span>\n      </button>\n      <button (click)=\"showUsersPopup = false; showRevokePopup = !showRevokePopup; showGrantPopup = false; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showRevokePopup)}\">\n        <img class=\"icon\" src=\"../assets/img/lock.png\">\n        <span>Restreindre l'accés</span>\n      </button>\n      <button (click)=\"showUsersPopup = !showUsersPopup; showRevokePopup = false; showGrantPopup = false; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showUsersPopup)}\">\n          <img class=\"icon\" src=\"../assets/img/user.png\">\n          <span>Gérer les utlisateurs</span>\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"showUsersPopup\" id=\"usersPopup\" class=\"popup\">\n      <hr>\n      <h4>Liste des utilisateurs</h4>\n      <hr>\n      <div style=\"display: inline\">\n        <input type=\"text\" class=\"addUserInput\" id=\"addUserInput\">\n        <button (click)=\"addUserCall()\" class=\"popupButton\">\n          Ajouter\n          <img class=\"icon\" src=\"../assets/img/add.png\">\n        </button>\n      </div>\n      <div id=\"existingUser\" *ngIf=\"existingUser\" style=\"color: purple;\">\n        <span>Ce nom d'utilisateur existe déja dans ce datatable.</span>\n      </div>\n      <div *ngFor=\"let user of infoTable.users;\" class=\"divUser\">\n        <img class=\"icon\" *ngIf=\"!infoTable.admins.includes(user)\" src=\"../assets/img/user.png\">\n        <img class=\"icon\" *ngIf=\"infoTable.admins.includes(user)\" src=\"../assets/img/admin.png\">\n          <span>{{user}}</span>\n          <button *ngIf=\"!infoTable.admins.includes(user)\" (click)=\"grantAdminCall(user)\" class=\"popupButton\">Attribuer <br>le rôle admin</button>\n          <button *ngIf=\"infoTable.admins.includes(user)\" (click)=\"revokeAdminCall(user)\" class=\"popupButton\">Retirer  <br>le rôle admin</button>\n          <button (click)=\"deleteUserCall(user)\" class=\"popupButton\">Supprimer <br>de la liste</button>\n      </div>\n    </div>\n  \n  <div *ngIf=\"showGrantPopup\" id=\"usersPopup\" class=\"popup\">\n    <hr>\n    <h4>Attribuer l'accés aux lignes sélectionnés à un utilisateur</h4>\n    \n    <select class=\"selectUser\" #selectUserGrant (change)=\"userSelected = selectUserGrant.value;\">\n        <option value=''></option>\n        <option *ngFor=\"let user of infoTable.users; let indexColumn = index\" value='{{user}}'>{{user}}</option>\n    </select>\n    <button (click)=\"grantAccessToUserCall(userSelected)\" class=\"popupButton\">Attribuer</button>\n  </div>\n  \n  <div *ngIf=\"showRevokePopup\" id=\"usersPopup\" class=\"popup\">\n      <hr>\n      <h4>Retirer l'accés aux lignes sélectionnés à un utilisateur</h4>\n      \n      <select class=\"selectUser\" #selectUserRevoke (change)=\"userSelected = selectUserRevoke.value;\">\n          <option value=''></option>\n          <option *ngFor=\"let user of infoTable.users; let indexColumn = index\" value='{{user}}'>{{user}}</option>\n      </select>\n      <button (click)=\"revokeAccessFromUserCall(userSelected)\" class=\"popupButton\">Retirer</button>\n    </div>\n\n  <div *ngIf=\"readyToDisplay\">\n    \n    <div class=\"userFilters\">\n        <div class=\"dateFilter\" *ngIf=\"dateHeadersName.length > 0\">\n            <div class=\"dateFilterTop\">\n            <span>De </span>\n            <input type=\"date\" [(ngModel)]=\"requestBody.searchDate.dateFrom\" (ngModelChange)=\"searchDateFromChange($event)\" class=\" dateInput\"> \n            <img class=\"icon\" src=\"../assets/img/calendar.png\">\n            <span> à </span>\n            <input type=\"date\" [(ngModel)]=\"requestBody.searchDate.dateTo\" (ngModelChange)=\"searchDateToChange($event)\" class=\" dateInput\">\n            <img class=\"icon\" src=\"../assets/img/calendar.png\">\n          </div>\n          <div class=\"dateFilterBottom\">\n          <span>Sur la colonne </span>\n          <select class=\"selectDateColumn\" #selectDateColumn (change)=\"changingDateColumn(selectDateColumn.value);\">\n            <option value='\"\"' *ngIf=\"requestBody.searchDate.dateColumn == ''\">> Sélectionner une colonne de type date</option>\n            <option value='\"\"' *ngIf=\"requestBody.searchDate.dateColumn != ''\">> Annuler</option>\n            <option *ngFor=\"let column of dateHeadersName; let indexColumn = index\" value='{{column}}'>{{column}}</option>\n          </select>\n        </div>\n      </div>\n      \n      <div _ngcontent-c1=\"\" class=\"o_cp_controller\">\n          <div _ngcontent-c1=\"\" class=\"o_control_panel\">\n            <div _ngcontent-c1=\"\" class=\"o_cp_searchview\" role=\"search\">\n              <div _ngcontent-c1=\"\" aria-autocomplete=\"list\" class=\"o_searchview\" role=\"search\">\n                <span _ngcontent-c1=\"\" aria-label=\"Advanced Search...\" class=\"o_searchview_more fa fa-search-minus\" role=\"img\" title=\"Recherche avancée...\"></span><div _ngcontent-c1=\"\" class=\"o_searchview_input_container\">\n                  <input _ngcontent-c1=\"\" accesskey=\"Q\" aria-haspopup=\"true\" class=\"o_searchview_input\" placeholder=\"Recherche…\" role=\"searchbox\" type=\"text\" name=\"search\" [(ngModel)]=\"requestBody.searchText\" (ngModelChange)=\"searchTextInColumns($event)\" autocomplete=\"on\">\n                  <div _ngcontent-c1=\"\" class=\"dropdown-menu o_searchview_autocomplete\" role=\"menu\"></div></div></div></div>\n                \n                <div _ngcontent-c1=\"\" class=\"o_cp_right\">\n                  \n                    \n                  \n                       \n                          <angular2-multiselect  \n                  name=\"dropdown-1\" \n                  [data]=\"dropdownList\"\n                  [(ngModel)]=\"selectedItems[1]\" \n                  [settings]=\"dropdownSettings\" \n                  (onSelect)=\"onItemSelect($event)\" \n                  (onDeSelect)=\"OnItemDeSelect($event)\"\n                  (onSelectAll)=\"onSelectAll($event)\"\n                  (onDeSelectAll)=\"onDeSelectAll()\" disabled>\n                  </angular2-multiselect>\n                   \n        </div></div></div>\n    </div>\n\n\n    <div id=\"datatable\">\n      <div id=\"datatable-header\" #datatableHeader>\n        <div class=\"datatable-index\">\n              <input type=\"checkbox\" id=\"row-all\" (click)=\"selectAll()\">\n              <label *ngIf=\"!selectAllRows\" for=\"row-all\" style=\"font-size:10px;\">Tout</label>\n              <label *ngIf=\"selectAllRows\" for=\"row-all\" style=\"font-size:10px;\">Aucun</label>\n        </div>\n        <div class=\"datatable-main\">\n          <div class=\"datatable-cell\" *ngFor=\"let columnName of headersName; let indexColumn = index\" (click)=\"headerNameClicked(columnName)\">\n            <span>{{columnName}}</span>\n            <span class=\"column-sort-icon\">\n              <span class=\"glyphicon glyphicon-sort column-sortable-icon\" *ngIf=\"requestBody['order']['column'] != columnName\"></span>\n              <span *ngIf=\"requestBody['order']['column'] == columnName\">\n                  <span class=\"glyphicon glyphicon-triangle-top\" *ngIf=\"requestBody['order']['dir'] == 'asc'\"></span>\n                  <span class=\"glyphicon glyphicon-triangle-bottom\" *ngIf=\"requestBody['order']['dir'] != 'asc'\"></span>\n              </span>\n            </span>\n          </div>\n          <div class=\"datatable-cell datatable-action\">\n            <span>Actions</span>\n      </div>\n        </div>\n        \n      </div>\n      \n      <div id=\"datatable-body\">\n        <div #datatableRows *ngFor=\"let row of dataDisplayed; let indexRow = index\" class=\"datatable-row\" [ngClass]=\"{'selectedRow': (row.selected)}\">\n            <div class=\"datatable-index\">\n              <input type=\"checkbox\" id=\"row-{{indexRow}}\" [(ngModel)]=\"row.selected\">\n              <label for=\"row-{{indexRow}}\">{{requestBody['start']+indexRow+1}}</label>\n            </div>\n          <div class=\"datatable-main\">\n            <div (click)=\"selectRow(indexRow)\" id=\"row-{{indexRow}}-col-{{indexCell}}\" class=\"datatable-cell datatable-main-cell\" *ngFor=\"let columnName of headersName; let indexCell = index\">\n              <textarea\n                id=\"row-{{indexRow}}-col-{{indexCell}}\" \n                name=\"row-{{indexRow}}-col-{{indexCell}}\"\n                [ngModel]=\"dataDisplayed[indexRow][columnName]\"\n                (change)=\"onValueUpdate($event, indexRow, columnName)\"\n                (focus)=\"autoGrowTextZone($event)\" \n                (focusout)=\"autoResizeTextZone($event)\" \n                *ngIf=\"editable && !isDate(dataDisplayed[indexRow][columnName])\"\n                type=\"text\" \n                class=\"form-control input-sm\" \n                style=\"background-color: transparent;\"\n                ></textarea>\n                \n                <input\n                id=\"row-{{indexRow}}-col-{{indexCell}}\" \n                name=\"row-{{indexRow}}-col-{{indexCell}}\"\n                [ngModel] =\"dataDisplayed[indexRow][columnName] | date:'yyyy-MM-dd'\"\n                (ngModelChange)=\"onDateValueUpdate($event, indexRow,  columnName)\"\n                (focus)=\"autoGrowTextZone($event)\" \n                (focusout)=\"autoResizeTextZone($event)\" \n                *ngIf=\"editable && isDate(dataDisplayed[indexRow][columnName])\"\n                type=\"date\"\n                class=\"form-control input-sm date dateInput\"\n                style=\"background-color: transparent;\"\n                >\n\n              <span *ngIf=\"!editable\">{{dataDisplayed[indexRow][columnName]}}</span>\n\n              <hr *ngIf=\"columnName == searchColumnName\" style=\"background: red;margin: 0;width: 100%;height: 1px;\">\n            </div>\n            <div class=\"datatable-cell datatable-main-cell\">\n              <button (click)=\"deleteRow(row)\" class=\"btn btn-sm btn-default\" >\n                <img class=\"icon\" src=\"../assets/img/bin.png\">\n              </button>\n          </div>\n          </div>\n          \n        </div>\n      </div>\n    </div>\n   \n    <div class=\"pagination-box\">\n        <div class=\"pagination-range\">\n            Affichage:\n            <span [textContent]=\"requestBody['start'] + 1\"></span>\n            -\n            <span [textContent]=\"MathMin( (castNumber(requestBody['start']) + castNumber(requestBody['length'])), responseBody.recordsFiltered)\"></span>\n            /\n            <span [textContent]=\"responseBody.recordsFiltered\"></span>\n        </div>\n        <div class=\"pagination-controllers\">\n            <div class=\"pagination-limit\">\n                <div class=\"input-group\">\n                    <span class=\"input-group-addon\">Nombre de lignes par page:</span>\n                    <input #limitInput type=\"number\" class=\"form-control\" min=\"1\" step=\"1\"\n                           [ngModel]=\"requestBody['length']\" (blur)=\"requestBody['length'] = castNumber(limitInput.value); emitData()\"\n                           (keyup.enter)=\"requestBody['length'] = castNumber(limitInput.value); emitData()\" (keyup.esc)=\"limitInput.value = castNumber(requestBody['length'])\"/>\n                </div>\n            </div>\n            <div class=\" pagination-pages\">\n                <button [disabled]=\"requestBody['start'] <= 0\" (click)=\"pageFirst()\" class=\"btn btn-default pagination-firstpage\" id=\"pageFirst\">&laquo;</button>\n                <button [disabled]=\"requestBody['start'] <= 0\" (click)=\"pageBack()\" class=\"btn btn-default pagination-prevpage\">&lsaquo;</button>\n                <div class=\"pagination-page\">\n                    <div class=\"input-group\">\n                        <input #pageInput type=\"number\" class=\"form-control\" min=\"1\" step=\"1\" max=\"{{maxPage}}\"\n                               [ngModel]=\"page\" (blur)=\"page = castNumber(pageInput.value)\"\n                               (keyup.enter)=\"page = castNumber(pageInput.value)\" (keyup.esc)=\"pageInput.value = castNumber(page)\"/>\n                    </div>\n                </div>\n                <button [disabled]=\"(requestBody['start'] + requestBody['length']) >= responseBody.recordsFiltered\" (click)=\"pageForward()\" class=\"btn btn-default pagination-nextpage\">&rsaquo;</button>\n                <button [disabled]=\"(requestBody['start'] + requestBody['length']) >= responseBody.recordsFiltered\" (click)=\"pageLast()\" class=\"btn btn-default pagination-lastpage\">&raquo;</button>\n            </div>\n        </div>\n    </div>\n    \n\n  </div>\n</div>\n","styles":["textarea{resize:none;overflow:hidden;height:100%;background:0 0;border:none;border-radius:0;outline:0;box-shadow:none}.icon{margin:3px;height:20px;width:20px}.searchIcon{margin-top:auto;margin-bottom:auto;height:30px;width:30px}.noDisplay{display:none}.validateButton{width:100%;border-radius:5px;font-size:large;font-weight:600}.userFilters{margin:auto;width:100%;height:auto;padding-top:50px;border-bottom:1px solid #ccc;display:inline-flex}.dateFilter{width:45%;font-size:15px}.dateFilter>*{width:100%;margin-bottom:10px}.dateFilterTop input{background-color:#fff}.selectDateColumn{text-align:center;border-radius:20px;margin-left:15px;width:60%;padding:5px 10px;background-color:#fff}.searchFilter{display:flex;align-items:center;justify-content:center;height:auto;background:#eee;border-radius:40px;width:50%;margin-left:2%;box-shadow:0 1px 5px #959595}.multiSelect{min-width:110px;margin-left:3%;width:50%}.searchText{min-width:110px;margin-left:2%;width:25%}.fullHeightInput{height:42px;box-shadow:none;border:2px solid #eee;box-shadow:0 1px 5px #959595}.dateInput{min-width:110px;width:34%;text-align:right;margin:1%;border:none;box-shadow:0 1px 5px #959595}#datatable{display:flex;flex-direction:column;width:100%;margin-top:50px;overflow-x:scroll}#datatable-header{display:flex;flex-direction:row;width:100%;font-weight:bolder}#datatable-header .datatable-cell{padding:10px}.datatable-main{display:flex;flex-direction:row}.datatable-index{display:flex;flex-direction:row;width:50px;border:.7px ridge #aaa;text-align:center;align-items:center;justify-content:center}.datatable-index span{width:50px}.datatable-index input{width:15px}.datatable-index label{width:35px}.datatable-action{display:flex;flex-direction:row;width:100px;border:.7px ridge #aaa;text-align:center;align-items:center;justify-content:center}.datatable-action button,.datatable-action span{width:100px}#datatable-body{display:flex;flex-direction:column;width:100%}.datatable-row{display:flex;flex-direction:row;width:100%}.datatable-row:hover button,.datatable-row:hover div{background:#dadada!important}.datatable-row:nth-child(odd) button,.datatable-row:nth-child(odd) div{background:#fff}.datatable-row:nth-child(even) button,.datatable-row:nth-child(even) div{background:#f6f6f6}.datatable-cell{width:150px;border:.7px ridge #aaa;text-align:center;padding:5px;align-items:center;justify-content:center;display:flex}.datatable-cell span{margin-right:2px}input[type=date]{padding:0}.column-sort-icon{float:right;margin-right:8px}.column-sort-icon .column-sortable-icon{color:#d3d3d3}.pagination-box{position:relative;margin-top:10px;margin-bottom:30px}.pagination-range{margin-top:7px;margin-left:3px;display:inline-block}.pagination-controllers{float:right}.pagination-controllers input{min-width:60px;text-align:right}.pagination-limit{margin-right:25px;display:inline-table;width:150px}.pagination-pages{display:inline-block}.pagination-page{width:110px;display:inline-table}.pagination-box button{outline:0!important}.pagination-firstpage,.pagination-lastpage,.pagination-nextpage,.pagination-prevpage{vertical-align:top}.pagination-reload{color:gray;font-size:12px}.loader{position:fixed;width:100vw;height:100vh;background:#fff;opacity:.5;display:flex;align-items:center;justify-content:center}.lds-ring{display:inline-block;position:relative;width:128px;height:128px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:102px;height:102px;margin:10px;border:10px solid #aaa;border-radius:50%;-webkit-animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-ring;animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-ring;border-color:#aaa transparent transparent}.lds-ring div:nth-child(1){-webkit-animation-delay:-.45s;animation-delay:-.45s}.lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}.lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}@-webkit-keyframes lds-ring{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lds-ring{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.xsmall{font-size:8px}.xsmall .icon[_ngcontent-c2]{margin:0;height:auto;max-width:10px}.xsmall .selected-list[_ngcontent-c3] .c-btn[_ngcontent-c3]{width:100%;box-shadow:0 1px 5px #aca3a3;padding:0;cursor:pointer;display:flex}.xsmall .dateInput[_ngcontent-c2]{min-width:0;height:40%}.xsmall .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.xsmall .dateFilter[_ngcontent-c2]{min-width:50%}.xsmall .multiSelect[_ngcontent-c2]{margin-left:7%;width:50%;height:auto}.xsmall .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.xsmall .data-table[_ngcontent-c4]{table-layout:auto}.small{font-size:10px}.small .dateInput[_ngcontent-c2]{min-width:0;height:40%}.small .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.small .dateFilter[_ngcontent-c2]{min-width:50%}.small .multiSelect[_ngcontent-c2]{min-width:100px;margin-left:7%;width:50%;height:auto}.small .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.o_control_panel[_ngcontent-c1]{display:flex;flex-flow:column wrap-reverse;padding-top:10px;padding-right:16px;padding-bottom:10px;background-color:#fff}.o_control_panel[_ngcontent-c1]>.o_cp_searchview[_ngcontent-c1]{width:50%;min-height:30px}@media (min-width:768px){.o_searchview[_ngcontent-c1]{border-bottom:1px solid #8f8f8f}}.o_searchview[_ngcontent-c1]{align-items:flex-end;position:relative;padding:0 20px 1px 0}.o_searchview[_ngcontent-c1] .o_searchview_more[_ngcontent-c1]{position:absolute;top:4px;left:auto;bottom:auto;right:0;font-size:16px;cursor:pointer}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1]{position:relative;display:flex;flex-flow:row wrap}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1] .o_searchview_input[_ngcontent-c1]{width:100px;flex:1 0 auto}.o_searchview[_ngcontent-c1] .o_searchview_input[_ngcontent-c1]{border:none;outline:0}[type=number][_ngcontent-c1],[type=password][_ngcontent-c1],[type=text][_ngcontent-c1],select[_ngcontent-c1],textarea[_ngcontent-c1]{width:100%;display:block;outline:0}button[_ngcontent-c1],input[_ngcontent-c1]{overflow:visible}button[_ngcontent-c1],input[_ngcontent-c1],optgroup[_ngcontent-c1],select[_ngcontent-c1],textarea[_ngcontent-c1]{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1] .o_searchview_autocomplete[_ngcontent-c1]{position:absolute;top:100%;left:auto;bottom:auto;right:auto;width:100%}.dropdown-menu[_ngcontent-c1]{box-shadow:0 6px 12px -4px rgba(0,0,0,.25);position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1.08333333rem;color:#666;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #dee2e6;border-radius:0}.o_control_panel[_ngcontent-c1]>.o_cp_right[_ngcontent-c1]{width:50%;margin-top:5px}.o_search_options[_ngcontent-c1]{margin:auto 0;display:block}.o_cp_controller{width:50%}.o_dropdown[_ngcontent-c1]{white-space:nowrap;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-group-vertical[_ngcontent-c1],.btn-group[_ngcontent-c1]{position:relative;display:inline-flex;vertical-align:middle}.adminButton{width:33.333%;border-radius:5px;font-size:large;font-weight:600}.adminButton img{width:20px;height:20px;margin-right:10px}.addUserInput,.selectUser{width:200px!important;display:inline!important;border-radius:5px}.selectedRow div{background-color:#add8e6!important}.popupButton{background:#ddd;color:#555;border:1px solid #aaa;border-radius:5px;margin:10px!important}.divUser{display:flex;align-items:inherit}.divUser span{display:block;width:200px;border-bottom:1px solid #aaa}.divUser button{width:150px}.popup{display:flex;flex-direction:column;align-items:center;background:#efefef;border-radius:0 0 10px 10px}.popup-demo{margin-bottom:40px;display:flex;flex-direction:column;align-items:center;background:#ddd;border:1px solid #333;border-radius:10px}.popupSelected{background-color:#aaa}#datatable-header,.datatable-row[_ngcontent-c1]:nth-child(even) button[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(even) div[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(odd) button[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(odd) div[_ngcontent-c1]{background:0 0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":291,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":291,"character":60}]}],"datatableDiv":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":293,"character":5},"arguments":["datatableDiv"]}]}],"datatableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":294,"character":5},"arguments":["datatableHeader"]}]}],"datatableRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":295,"character":5},"arguments":["datatableRows"]}]}],"oddRowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":297,"character":5}}]}],"evenRowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":299,"character":5}}]}],"headerColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":301,"character":5}}]}],"userId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":303,"character":5}}]}],"apiUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":304,"character":5}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":305,"character":5}}]}],"tableObjectId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":306,"character":5}}]}],"datatableWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":307,"character":5}}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"selectRow":[{"__symbolic":"method"}],"changeUserCall":[{"__symbolic":"method"}],"logSelected":[{"__symbolic":"method"}],"headerNameClicked":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"modifyData":[{"__symbolic":"method"}],"addUserCall":[{"__symbolic":"method"}],"addUser":[{"__symbolic":"method"}],"deleteUserCall":[{"__symbolic":"method"}],"deleteUser":[{"__symbolic":"method"}],"grantAdminCall":[{"__symbolic":"method"}],"grantAdmin":[{"__symbolic":"method"}],"revokeAdminCall":[{"__symbolic":"method"}],"revokeAdmin":[{"__symbolic":"method"}],"grantAccessToUserCall":[{"__symbolic":"method"}],"grantAccessToUser":[{"__symbolic":"method"}],"revokeAccessFromUserCall":[{"__symbolic":"method"}],"revokeAccessFromUser":[{"__symbolic":"method"}],"emitData":[{"__symbolic":"method"}],"toggleEdit":[{"__symbolic":"method"}],"onValueUpdate":[{"__symbolic":"method"}],"onDateValueUpdate":[{"__symbolic":"method"}],"deleteRow":[{"__symbolic":"method"}],"autoGrowTextZone":[{"__symbolic":"method"}],"autoResizeTextZone":[{"__symbolic":"method"}],"isDate":[{"__symbolic":"method"}],"onItemSelect":[{"__symbolic":"method"}],"OnItemDeSelect":[{"__symbolic":"method"}],"onSelectAll":[{"__symbolic":"method"}],"onDeSelectAll":[{"__symbolic":"method"}],"searchTextInColumns":[{"__symbolic":"method"}],"changingDateColumn":[{"__symbolic":"method"}],"searchDateFromChange":[{"__symbolic":"method"}],"searchDateToChange":[{"__symbolic":"method"}],"castNumber":[{"__symbolic":"method"}],"MathMin":[{"__symbolic":"method"}],"pageBack":[{"__symbolic":"method"}],"pageForward":[{"__symbolic":"method"}],"pageFirst":[{"__symbolic":"method"}],"pageLast":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}}},"origins":{"DatatableModule":"./src/app/app.module","ɵa":"./src/app/app.component","ɵb":"./src/app/data-table-component/data-table-component","ɵc":"./src/app/data.service"},"importAs":"adn-datatable"}