ngx-mariem-datatable/bundles/ngx-mariem-datatable.umd.min.js

Advanced table extension with sorting, filtering, paging and more... for Angular apps

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ngx-mariem-datatable",["exports","@angular/core","@angular/animations","@angular/common","@angular/forms"],e):e((t=t||self)["ngx-mariem-datatable"]={},t.ng.core,t.ng.animations,t.ng.common,t.ng.forms)}(this,(function(t,e,n,a,r){"use strict";var i=n.animation([n.style({opacity:"{{opacity}}",transform:"scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})"}),n.animate("{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)",n.style("*"))],{params:{duration:"200ms",delay:"0ms",opacity:"0",scale:"1",x:"0",y:"0",z:"0"}}),o=[n.trigger("animate",[n.transition("void => *",[n.useAnimation(i)])]),n.trigger("animateStagger",[n.state("50",n.style("*")),n.state("100",n.style("*")),n.state("200",n.style("*")),n.transition("void => 50",n.query("@*",[n.stagger("50ms",[n.animateChild()])],{optional:!0})),n.transition("void => 100",n.query("@*",[n.stagger("100ms",[n.animateChild()])],{optional:!0})),n.transition("void => 200",n.query("@*",[n.stagger("200ms",[n.animateChild()])],{optional:!0}))]),n.trigger("fadeInOut",[n.state("0",n.style({display:"none",opacity:0})),n.state("1",n.style({display:"block",opacity:1})),n.transition("1 => 0",n.animate("300ms ease-out")),n.transition("0 => 1",n.animate("300ms ease-in"))]),n.trigger("slideInOut",[n.state("0",n.style({height:"0px",display:"none"})),n.state("1",n.style({height:"*",display:"block"})),n.transition("1 => 0",n.animate("300ms ease-out")),n.transition("0 => 1",n.animate("300ms ease-in"))]),n.trigger("slideIn",[n.transition("void => left",[n.style({transform:"translateX(100%)"}),n.animate("300ms ease-in",n.style({transform:"translateX(0)"}))]),n.transition("left => void",[n.style({transform:"translateX(0)"}),n.animate("300ms ease-in",n.style({transform:"translateX(-100%)"}))]),n.transition("void => right",[n.style({transform:"translateX(-100%)"}),n.animate("300ms ease-in",n.style({transform:"translateX(0)"}))]),n.transition("right => void",[n.style({transform:"translateX(0)"}),n.animate("300ms ease-in",n.style({transform:"translateX(100%)"}))])]),n.trigger("slideInLeft",[n.state("void",n.style({transform:"translateX(-100%)",display:"none"})),n.state("*",n.style({transform:"translateX(0)",display:"flex"})),n.transition("void => *",n.animate("300ms")),n.transition("* => void",n.animate("300ms"))]),n.trigger("slideInRight",[n.state("void",n.style({transform:"translateX(100%)",display:"none"})),n.state("*",n.style({transform:"translateX(0)",display:"flex"})),n.transition("void => *",n.animate("300ms")),n.transition("* => void",n.animate("300ms"))]),n.trigger("slideInTop",[n.state("void",n.style({transform:"translateY(-100%)",display:"none"})),n.state("*",n.style({transform:"translateY(0)",display:"flex"})),n.transition("void => *",n.animate("300ms")),n.transition("* => void",n.animate("300ms"))]),n.trigger("slideInBottom",[n.state("void",n.style({transform:"translateY(100%)",display:"none"})),n.state("*",n.style({transform:"translateY(0)",display:"flex"})),n.transition("void => *",n.animate("300ms")),n.transition("* => void",n.animate("300ms"))]),n.trigger("expandCollapse",[n.state("void",n.style({height:"0px"})),n.state("*",n.style({height:"*"})),n.transition("void => *",n.animate("300ms ease-out")),n.transition("* => void",n.animate("300ms ease-in"))]),n.trigger("routerTransitionLeft",[n.transition("* => *",[n.query("content > :enter, content > :leave",[n.style({position:"absolute",top:0,bottom:0,left:0,right:0})],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateX(100%)",opacity:0})],{optional:!0}),n.sequence([n.group([n.query("content > :leave",[n.style({transform:"translateX(0)",opacity:1}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateX(-100%)",opacity:0}))],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateX(100%)"}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateX(0%)",opacity:1}))],{optional:!0})]),n.query("content > :leave",n.animateChild(),{optional:!0}),n.query("content > :enter",n.animateChild(),{optional:!0})])])]),n.trigger("routerTransitionRight",[n.transition("* => *",[n.query("content > :enter, content > :leave",[n.style({position:"absolute",top:0,bottom:0,left:0,right:0})],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateX(-100%)",opacity:0})],{optional:!0}),n.sequence([n.group([n.query("content > :leave",[n.style({transform:"translateX(0)",opacity:1}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateX(100%)",opacity:0}))],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateX(-100%)"}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateX(0%)",opacity:1}))],{optional:!0})]),n.query("content > :leave",n.animateChild(),{optional:!0}),n.query("content > :enter",n.animateChild(),{optional:!0})])])]),n.trigger("routerTransitionUp",[n.transition("* => *",[n.query("content > :enter, content > :leave",[n.style({position:"absolute",top:0,bottom:0,left:0,right:0})],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateY(100%)",opacity:0})],{optional:!0}),n.group([n.query("content > :leave",[n.style({transform:"translateY(0)",opacity:1}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateY(-100%)",opacity:0}))],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateY(100%)"}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateY(0%)",opacity:1}))],{optional:!0})]),n.query("content > :leave",n.animateChild(),{optional:!0}),n.query("content > :enter",n.animateChild(),{optional:!0})])]),n.trigger("routerTransitionDown",[n.transition("* => *",[n.query("content > :enter, content > :leave",[n.style({position:"absolute",top:0,bottom:0,left:0,right:0})],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateY(-100%)",opacity:0})],{optional:!0}),n.sequence([n.group([n.query("content > :leave",[n.style({transform:"translateY(0)",opacity:1}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateY(100%)",opacity:0}))],{optional:!0}),n.query("content > :enter",[n.style({transform:"translateY(-100%)"}),n.animate("600ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({transform:"translateY(0%)",opacity:1}))],{optional:!0})]),n.query("content > :leave",n.animateChild(),{optional:!0}),n.query("content > :enter",n.animateChild(),{optional:!0})])])]),n.trigger("routerTransitionFade",[n.transition("* => *",n.group([n.query("content > :enter, content > :leave ",[n.style({position:"absolute",top:0,bottom:0,left:0,right:0})],{optional:!0}),n.query("content > :enter",[n.style({opacity:0})],{optional:!0}),n.query("content > :leave",[n.style({opacity:1}),n.animate("300ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({opacity:0}))],{optional:!0}),n.query("content > :enter",[n.style({opacity:0}),n.animate("300ms cubic-bezier(0.0, 0.0, 0.2, 1)",n.style({opacity:1}))],{optional:!0}),n.query("content > :enter",n.animateChild(),{optional:!0}),n.query("content > :leave",n.animateChild(),{optional:!0})]))])],s=function(){function t(){this.onRowClicked=new e.EventEmitter,this.onActionClicked=new e.EventEmitter,this.onlinkClicked=new e.EventEmitter,this.onToggleAllClicked=new e.EventEmitter,this.onToggleClicked=new e.EventEmitter,this.smallCells=!1,this.hideParentAction=!1,this.loadingList=!1,this.nbRows=4,this.hideTheader=!1,this.textalign="left",this.regroupbylabel="",this.regroupbylist=[""],this.regroupby=!1,this.display=[!0],this._datatable=[],this.datatableChange=new e.EventEmitter,this.numberOfRecords=0,this.serverSidePagination=!1,this.startDisplay=new e.EventEmitter,this.serverSidesearch=!1,this.search=new e.EventEmitter,this.displayedColomnList=[],this._Actions=[],this.nothingToShowMessage="Pas de résultats",this.paginationmessag="",this.showBoundaryLinks=!0,this._itemsPerPage=10,this.maxSize=5,this.checkboxes=!1,this.checkboxesMultiselect=!0,this.pagination=!0,this.nameOnExtract="Liste",this.Advancedfilter=!0,this.visibility=!0,this.datatableexist=!1,this.searchexist=!1,this._searchvalue="",this.startItem=0,this.endItem=10,this.dataChild=[],this.dataChildRow=[],this.filtreopen=!0,this.filters=[],this.associations=[],this.checkAll=!1}return Object.defineProperty(t.prototype,"datatable",{set:function(t){var e=this;t&&this._datatable!=t&&(this.regroupby&&this.regroupbylabel&&(this.regroupbylist=[],t.map((function(t){e.regroupbylist.indexOf(t[e.regroupbylabel])<0&&e.regroupbylist.push(t[e.regroupbylabel]),e.display.push(!0)}))),this._datatable=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"displayedColomn",{set:function(t){var e=t.find((function(t){return 1==t.search}));this.searchexist=!!e,this.displayedColomnList=t.map((function(t){return t}))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"Actions",{get:function(){return this._Actions},set:function(t){this._Actions=t,this._Actions=t.map((function(t){return t}))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"itemsPerPage",{set:function(t){this._itemsPerPage=t,this.endItem=t,this.startItem=0},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"searchvalue",{get:function(){return this._searchvalue},set:function(t){this._searchvalue=t,this.refreshPagination()},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.checkAllClicked=function(){var t=this;this._datatable=this._datatable.map((function(e){return e.selected=t.checkAll,e})),this.datatableChanged()},t.prototype.ckeckBoxClicked=function(t){this.checkboxesMultiselect||(this._datatable=this._datatable.map((function(e){return e.selected&&e.id!=t.id&&(e.selected=!1),e})));var e=this._datatable.find((function(t){return!t.selected}));this.checkAll=!e,this.datatableChanged()},t.prototype.datatableChanged=function(){this.datatableChange.emit(this._datatable)},t.prototype.rowClicked=function(t){this.onRowClicked.emit(t)},t.prototype.actionClicked=function(t){this.onActionClicked.emit(t)},t.prototype.sortAsc=function(t){this._datatable.sort((function(e,n){if("number"==typeof e[t])return e[t]-n[t];var a=e[t]?e[t].toUpperCase():"",r=n[t]?n[t].toUpperCase():"";return a<r?-1:a>r?1:0}))},t.prototype.sortDesc=function(t){this._datatable.sort((function(e,n){if("number"==typeof n[t])return n[t]-e[t];var a=n[t]?n[t].toUpperCase():"",r=e[t]?e[t].toUpperCase():"";return a<r?-1:a>r?1:0}))},t.prototype.sortBy=function(t){var e=t.data;t.sorted=!t.sorted||!t.sorted,this.sortByItem=t,t.sorted?this.sortAsc(e):this.sortDesc(e)},t.prototype.pageChanged=function(t){this.startItem=(t.page-1)*t.itemsPerPage,this.endItem=t.page*t.itemsPerPage,this.serverSidePagination&&this.startDisplay.emit(this.startItem)},t.prototype.refreshPagination=function(){this.startItem=0,this.endItem=this._itemsPerPage,this.serverSidePagination&&this.startDisplay.emit(this.startItem)},t.prototype.searchServerSide=function(t){this.searchvalue=t.target.value,this.startItem=0,this.endItem=10,this.search.emit(this.searchvalue)},t.prototype.filtersChange=function(t){this.filters=t.filters,this.associations=t.associations,0==this.filters.length&&(this.filtreopen=!this.filtreopen)},t.decorators=[{type:e.Component,args:[{selector:"ngx-mariem-datatable",template:'<div\r\n  id="ngx-datatable"\r\n  class="position-relative"\r\n  [style.text-align]="textalign"\r\n>\r\n  <div class="table-container table-responsive-sm">\r\n    <table class="table" [@animateStagger]="{ value: \'50\' }">\r\n      <thead>\r\n        <tr\r\n          [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n          *ngIf="!hideTheader"\r\n        >\r\n          <th class="w-2rem" *ngIf="checkboxes">\r\n            <span *ngIf="checkboxesMultiselect" class="checkboxTemplate">\r\n              <input\r\n                [(ngModel)]="checkAll"\r\n                (change)="checkAllClicked()"\r\n                [id]="\'checkAll\'"\r\n                class="w-0 field-checkbox"\r\n                type="checkbox"\r\n                [name]="\'checkAll\'"\r\n              />\r\n              <label [for]="\'checkAll\'"></label>\r\n            </span>\r\n          </th>\r\n          <th\r\n            class="p3"\r\n            [ngClass]="{\r\n              \'bg-blue-light thsorted\': title == sortByItem\r\n            }"\r\n            *ngFor="let title of displayedColomnList"\r\n          >\r\n            <span\r\n              (click)="title.sort && !loadingList ? sortBy(title) : \'\'"\r\n              class="title-header p3 cursor-pointer"\r\n              [ngClass]="{\r\n                sorting: title.sort && !loadingList && title != sortByItem,\r\n                sorting_asc:\r\n                  title == sortByItem && title.sorted && !loadingList,\r\n                sorting_desc:\r\n                  title == sortByItem && !title.sorted && !loadingList\r\n              }"\r\n            >\r\n              {{ title.value }}\r\n              \x3c!-- <i class="sortIcon material-icons">\r\n                {{\r\n                  title == sortByItem\r\n                    ? title.sorted && !loadingList\r\n                      ? "keyboard_arrow_up"\r\n                      : "keyboard_arrow_down"\r\n                    : ""\r\n                }}\r\n              </i> --\x3e\r\n            </span>\r\n          </th>\r\n          <th class="p3 action" *ngFor="let action of Actions">\r\n            <span class="color-primary block p3 cursor-pointer">\r\n              {{ action.value }}\r\n            </span>\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <ng-container *ngIf="loadingList">\r\n          <tr\r\n            loading-rows\r\n            [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n            [displayedColomnList]="displayedColomnList"\r\n            [nbRows]="nbRows"\r\n            [Actions]="Actions"\r\n            [checkboxes]="checkboxes"\r\n          ></tr>\r\n          <tr\r\n            loading-rows\r\n            [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n            [displayedColomnList]="displayedColomnList"\r\n            [Actions]="Actions"\r\n            [checkboxes]="checkboxes"\r\n          ></tr>\r\n          <tr\r\n            loading-rows\r\n            [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n            [displayedColomnList]="displayedColomnList"\r\n            [Actions]="Actions"\r\n            [checkboxes]="checkboxes"\r\n          ></tr>\r\n          <tr\r\n            loading-rows\r\n            [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n            [displayedColomnList]="displayedColomnList"\r\n            [Actions]="Actions"\r\n            [checkboxes]="checkboxes"\r\n          ></tr>\r\n        </ng-container>\r\n        <ng-container *ngIf="!loadingList">\r\n          <ng-container\r\n            *ngFor="let groupeby of regroupbylist; let gbIndex = index"\r\n          >\r\n            <ng-container *ngIf="display[gbIndex]">\r\n              <tr\r\n                [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n                class="tr-small"\r\n                *ngIf="regroupby"\r\n              >\r\n                <td\r\n                  (click)="display[gbIndex] = !display[gbIndex]"\r\n                  [ngClass]="\r\n                    display[gbIndex]\r\n                      ? \'collapsed-group-opened\'\r\n                      : \'collapsed-group-closed\'\r\n                  "\r\n                  class="collapsed-group"\r\n                  [attr.colspan]="\r\n                    displayedColomnList.length +\r\n                    Actions.length +\r\n                    (checkboxes ? 1 : 0)\r\n                  "\r\n                >\r\n                  {{ groupeby }}\r\n                </td>\r\n              </tr>\r\n              <ng-container\r\n                *ngFor="\r\n                  let row of _datatable\r\n                    | grouppigBy\r\n                      : {\r\n                          groupeby: groupeby,\r\n                          regroupbylabel: regroupbylabel,\r\n                          regroupby: regroupby\r\n                        }\r\n                    | filterData\r\n                      : {\r\n                          searchvalue: searchvalue,\r\n                          displayedColomnList: displayedColomnList,\r\n                          serverSidesearch: serverSidesearch,\r\n                          filters: filters,\r\n                          associations: associations\r\n                        }\r\n                    | paginate\r\n                      : {\r\n                          startItem: startItem,\r\n                          endItem: pagination && !regroupby ? endItem : \'all\',\r\n                          serverSidePagination: serverSidePagination\r\n                        };\r\n                  let rowindex = index\r\n                "\r\n              >\r\n                <tr\r\n                  [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n                  datatable-row\r\n                  [row]="row"\r\n                  [displayedColomnList]="displayedColomnList"\r\n                  [sortByItem]="sortByItem"\r\n                  [Actions]="Actions"\r\n                  [textalign]="textalign"\r\n                  [checkboxes]="checkboxes"\r\n                  (rowClicked)="rowClicked($event)"\r\n                  (onActionClicked)="actionClicked($event)"\r\n                  (onckeckBoxClicked)="ckeckBoxClicked($event)"\r\n                  [class]="row.rowClass"\r\n                  [ngClass]="{\r\n                    rowSelected: row.selected,\r\n                    \'tr-small\': smallCells\r\n                  }"\r\n                  (click)="rowClicked(row)"\r\n                ></tr>\r\n              </ng-container>\r\n            </ng-container>\r\n            <tr\r\n              [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n              *ngIf="\r\n                (\r\n                  _datatable\r\n                  | filterData\r\n                    : {\r\n                        searchvalue: searchvalue,\r\n                        displayedColomnList: displayedColomnList,\r\n\r\n                        serverSidesearch: serverSidesearch,\r\n                        filters: filters,\r\n                        associations: associations\r\n                      }\r\n                ).length == 0\r\n              "\r\n              class="odd"\r\n            >\r\n              <td\r\n                [style.background]="\'#fff\'"\r\n                valign="top"\r\n                [attr.colspan]="\r\n                  displayedColomnList.length +\r\n                  Actions.length +\r\n                  (checkboxes ? 1 : 0)\r\n                "\r\n                class="dataTables_empty"\r\n              >\r\n                {{ nothingToShowMessage }}\r\n              </td>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-container>\r\n      </tbody>\r\n    </table>\r\n    \x3c!-- //pagination section --\x3e\r\n\r\n    <div\r\n      *ngIf="pagination && !loadingList"\r\n      [@animate]="{ value: \'*\', params: { y: \'100%\' } }"\r\n      [attr.colspan]="\r\n        displayedColomnList.length + Actions.length + (checkboxes ? 1 : 0)\r\n      "\r\n      datatable-footer\r\n      [totalItems]="\r\n        serverSidePagination\r\n          ? numberOfRecords\r\n          : (\r\n              _datatable\r\n              | filterData\r\n                : {\r\n                    searchvalue: searchvalue,\r\n                    displayedColomnList: displayedColomnList,\r\n                    serverSidesearch: serverSidesearch,\r\n                    filters: filters,\r\n                    associations: associations\r\n                  }\r\n            )?.length\r\n      "\r\n      [itemsPerPage]="_itemsPerPage"\r\n      [endItem]="endItem"\r\n      [startItem]="startItem"\r\n      [maxSize]="maxSize"\r\n      [showBoundaryLinks]="showBoundaryLinks"\r\n      (onpageChanged)="pageChanged($event)"\r\n      class="footer-table"\r\n    ></div>\r\n    \x3c!-- //pagination section --\x3e\r\n  </div>\r\n</div>\r\n',changeDetection:e.ChangeDetectionStrategy.OnPush,encapsulation:e.ViewEncapsulation.None,animations:[o],styles:['@charset "UTF-8";#ngx-datatable{line-height:1.42857143;color:rgba(0,0,0,.87);font-size:.8rem;font-weight:400;background-color:#fdfdfd;box-shadow:.25rem .1875rem .3rem 0 #c5c5c585;overflow:auto}#ngx-datatable .w-2rem{width:2rem}#ngx-datatable .bg-light-datatable{background:#f6f8f9}#ngx-datatable .thsorted{border-radius:.75rem .75rem 0 0}#ngx-datatable .dropdown-item.active,#ngx-datatable .dropdown-item:active{color:#000!important;background-color:#fdfdfd!important}#ngx-datatable .actionitem{flex:1;border-right:.0625rem solid #dee2e6;display:flex;padding:.6875rem .625rem;opacity:.6}#ngx-datatable .action{text-align:center}#ngx-datatable .checkboxTemplate{display:flex;justify-content:left;width:1.125rem;margin:auto}#ngx-datatable .isParent{background-color:rgba(221,221,221,.75)!important}#ngx-datatable .datatableinfolist{float:left;text-align:left;padding:.5rem .75rem}#ngx-datatable .table{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);border-radius:.25rem;background:#ffff;border:none;margin-bottom:0;border-collapse:collapse;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;width:100%;color:#000}#ngx-datatable .table .searchInput{color:#000;background-image:url(img/search.png);background-position:99.1% center;background-repeat:no-repeat;font-size:.6875rem;font-weight:400;width:100%;outline:0;padding:0 .9375rem 0 .3125rem;border:.0625rem solid #ccc;height:1.125rem}#ngx-datatable .sorting_asc{background:url(img/sorting/sort_asc.png) 99.6% center no-repeat}#ngx-datatable .sorting_desc{background:url(img/sorting/sort_desc.png) 99.6% center no-repeat}#ngx-datatable .sorting{background:url(img/sorting/sort_both.png) 99.6% center no-repeat}#ngx-datatable .sorting,#ngx-datatable .sorting_asc,#ngx-datatable .sorting_desc{padding-right:.625rem!important;background-position:98% 50%}#ngx-datatable .sortIcon{font-size:1rem;color:#fff;background:#363636;border-radius:50%}#ngx-datatable .inputnumber{text-align:center}#ngx-datatable .inputnumber:focus{border:.0625rem solid;background:#fff!important}#ngx-datatable .linkValue{color:#428bca;cursor:pointer}#ngx-datatable .linkValue:hover{text-decoration:underline}#ngx-datatable th span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:99%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ngx-datatable .icon:hover{opacity:.6}#ngx-datatable .p3{padding:.1875rem}#ngx-datatable .cursor-pointer{cursor:pointer}#ngx-datatable tr{height:1rem;min-height:1rem;border:.0625rem solid #dee2e6}#ngx-datatable tbody tr:hover{cursor:pointer;background:#c0c0c01f}#ngx-datatable .tr-small{height:1.75rem!important;min-height:1.75rem!important}#ngx-datatable .childDatatable{padding:.75rem!important;background:#fff}#ngx-datatable .childDatatable tr{height:1.375rem;min-height:1.375rem}#ngx-datatable .childDatatable td{padding:.1875rem .625rem;font-size:.625rem}#ngx-datatable .childDatatable .collapsed-group-closed:after,#ngx-datatable .childDatatable .collapsed-group-opened:after{left:1.25rem}#ngx-datatable .table-bordered-h td{border-bottom:none!important;border-top:none!important}#ngx-datatable .table-bordered-white tbody{background:#fff}#ngx-datatable .table-bordered-white td{border-top:none!important}#ngx-datatable .collapsed-group{text-align:left;padding-left:1.25rem;cursor:pointer;background:#f2f2f2;position:relative;box-shadow:.0625rem .125rem .0625rem 0 #c1c1c170}#ngx-datatable .collapsed-group-closed:after{font-family:FontAwesome;content:"";width:.8125rem;height:.625rem;position:absolute;left:.4375rem}#ngx-datatable .collapsed-group-opened:after{font-family:FontAwesome;content:"";width:.8125rem;height:.625rem;position:absolute;left:.4375rem}#ngx-datatable .footer-table{height:2.75rem;display:flex;justify-content:space-between;align-items:center}#ngx-datatable .search-wrapper .search input{background:#fff;color:rgba(0,0,0,.87);width:100%;height:3rem;min-height:3rem;max-height:3rem;padding:0 1rem;border:none;outline:0}#ngx-datatable .search-wrapper .search{width:100%;height:3rem;line-height:3rem;padding:0 1.125rem}#ngx-datatable .mat-icon{font-size:1.5rem;color:rgba(0,0,0,.54)}@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;src:url(iconfont/MaterialIcons-Regular.eot);src:local("Material Icons"),local("MaterialIcons-Regular"),url(iconfont/MaterialIcons-Regular.woff2) format("woff2"),url(iconfont/MaterialIcons-Regular.woff) format("woff"),url(iconfont/MaterialIcons-Regular.ttf) format("truetype")}.material-icons{font-family:"Material Icons";font-weight:400;font-style:normal;font-size:1.5rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.table td,.table th{padding:.5625rem .625rem .625rem;line-height:calc(30 / 16);vertical-align:top}']}]}],t.ctorParameters=function(){return[]},t.propDecorators={onRowClicked:[{type:e.Output}],onActionClicked:[{type:e.Output}],onlinkClicked:[{type:e.Output}],onToggleAllClicked:[{type:e.Output}],onToggleClicked:[{type:e.Output}],smallCells:[{type:e.Input}],hideParentAction:[{type:e.Input}],loadingList:[{type:e.Input}],nbRows:[{type:e.Input}],childListLabel:[{type:e.Input}],hideTheader:[{type:e.Input}],textalign:[{type:e.Input}],regroupbylabel:[{type:e.Input}],regroupby:[{type:e.Input}],datatable:[{type:e.Input}],datatableChange:[{type:e.Output}],numberOfRecords:[{type:e.Input}],serverSidePagination:[{type:e.Input}],startDisplay:[{type:e.Output}],serverSidesearch:[{type:e.Input}],search:[{type:e.Output}],displayedColomn:[{type:e.Input}],Actions:[{type:e.Input}],nothingToShowMessage:[{type:e.Input}],paginationmessag:[{type:e.Input}],showBoundaryLinks:[{type:e.Input}],itemsPerPage:[{type:e.Input}],maxSize:[{type:e.Input}],checkboxes:[{type:e.Input}],checkboxesMultiselect:[{type:e.Input}],pagination:[{type:e.Input}],Advancedfilter:[{type:e.Input}],visibility:[{type:e.Input}],searchvalue:[{type:e.Input}]},t}();var l=function(){function t(t){this.datePipe=t}return t.prototype.transform=function(t,e){return this.searchFilter(t,e)},t.prototype.searchFilter=function(t,e){var n=this;return e.serverSidesearch?t:0==e.searchvalue.length?t:t.filter((function(t){for(var a=!1,r=0;r<e.displayedColomnList.length;r++){var i=e.displayedColomnList[r].data,o=e.displayedColomnList[r].type;a=a||t[i]&&("date"==o?n.datePipe.transform(new Date(t[i]),"dd/MM/yyyy"):t[i]).toString().toLowerCase().includes(e.searchvalue.toLowerCase())}return a}))},t.decorators=[{type:e.Pipe,args:[{name:"filterData",pure:!1}]}],t.ctorParameters=function(){return[{type:a.DatePipe}]},t}();var c=function(){function t(){}return t.prototype.transform=function(t,e){return e.serverSidePagination||"all"==e.endItem?t:t.slice(e.startItem,e.endItem)},t.decorators=[{type:e.Pipe,args:[{name:"paginate",pure:!1}]}],t}(),p=function(){function t(){}return t.prototype.transform=function(t,e){return e.regroupby?t.filter((function(t){return t[e.regroupbylabel]==e.groupeby})):t},t.decorators=[{type:e.Pipe,args:[{name:"grouppigBy"}]}],t}(),d=function(){function t(){this._row={},this.displayedColomnList=[],this.Actions=[],this.checkboxes=!1,this.textalign="left",this.onrowClicked=new e.EventEmitter,this.onActionClicked=new e.EventEmitter,this.onckeckBoxClicked=new e.EventEmitter}return Object.defineProperty(t.prototype,"row",{get:function(){return this._row},set:function(t){this._row=t},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.rowClicked=function(t){this.onrowClicked.emit(t)},t.prototype.actionClicked=function(t,e){this.onActionClicked.emit({item:e,action:t.type})},t.prototype.ckeckBoxClicked=function(t){this.onckeckBoxClicked.emit(t)},t.decorators=[{type:e.Component,args:[{selector:"[datatable-row]",template:'\x3c!-- row content --\x3e\r\n<ng-container>\r\n  <td\r\n    *ngIf="checkboxes"\r\n    datatable-checkbox-template\r\n    [row]="row"\r\n    (onckeckBoxClicked)="ckeckBoxClicked($event)"\r\n  ></td>\r\n  <ng-container *ngFor="let title of displayedColomnList">\r\n    <td\r\n      *ngIf="title.type == \'text\' || title.type == \'badge\'"\r\n    >\r\n      <span\r\n        [class]="row[title.data + \'_class\']"\r\n        [ngClass]="{ badge: title.type == \'badge\' }"\r\n      >\r\n        {{ row[title.data] }}\r\n      </span>\r\n    </td>\r\n    \x3c!-- date piped --\x3e\r\n    <td *ngIf="title.type == \'date\'">\r\n      <span>\r\n        {{ row[title.data] | date: "dd/MM/yyyy" }}\r\n      </span>\r\n    </td>\r\n    \x3c!-- checkbox --\x3e\r\n    <td\r\n      *ngIf="title.type == \'checkbox\'"\r\n      datatable-inputcheckbox-template\r\n      [row]="row"\r\n      [title]="title.data"\r\n      [textalign]="textalign"\r\n      style="display: flex; justify-content: center; padding-top: 1rem"\r\n    ></td>\r\n    <td *ngIf="title.type == \'icon\'">\r\n      <i class="material-icons icon-satatus">\r\n        {{ row[title.data] }}\r\n      </i>\r\n    </td>\r\n    <td *ngIf="title.type == \'customTemplate\'">\r\n      <ng-container\r\n        *ngTemplateOutlet="\r\n          title.template;\r\n          context: {\r\n            row: row\r\n          }\r\n        "\r\n      >\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n  \x3c!-- actions List --\x3e\r\n\r\n  <ng-container *ngFor="let action of Actions">\r\n    <td class="p-0">\r\n      <div class="d-flex">\r\n        <ng-container *ngFor="let child of action.childrens; let x = index">\r\n          <div\r\n            placement="left"\r\n            class="actionitem"\r\n            [style.border-right]="\r\n              x + 1 == action.childrens.length ? \'none\' : \'\'\r\n            "\r\n          >\r\n            <span\r\n              (click)="\r\n                !row[child.disabledAttribut] ? actionClicked(child, row) : \'\'\r\n              "\r\n              [style.text-align]="\'center\'"\r\n              [ngClass]="row[child.disabledAttribut] ? \'icon-disabled\' : \'\'"\r\n              [class]="\r\n                \' cursor-pointer m-auto color-primary-onhover material-icons\'\r\n              "\r\n            >\r\n              {{ child.iconClass }}\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n</ng-container>\r\n',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={row:[{type:e.Input}],displayedColomnList:[{type:e.Input}],Actions:[{type:e.Input}],checkboxes:[{type:e.Input}],textalign:[{type:e.Input}],sortByItem:[{type:e.Input}],onrowClicked:[{type:e.Output}],onActionClicked:[{type:e.Output}],onckeckBoxClicked:[{type:e.Output}]},t}();var m=function(){function t(){this.row={},this.onckeckBoxClicked=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.ckeckBoxClicked=function(t){this.onckeckBoxClicked.emit(t)},t.decorators=[{type:e.Component,args:[{selector:"[datatable-checkbox-template]",template:'\n    <span class="checkboxTemplate">\n      <input\n        [(ngModel)]="row.selected"\n        (change)="ckeckBoxClicked(row)"\n        [id]="\'checkboxTemplate_\' + row.id"\n        class="w-0 field-checkbox"\n        type="checkbox"\n        [name]="\'checkboxTemplate_\' + row.id"\n      />\n      <label [for]="\'checkboxTemplate_\' + row.id"></label>\n    </span>\n  '}]}],t.ctorParameters=function(){return[]},t.propDecorators={row:[{type:e.Input}],onckeckBoxClicked:[{type:e.Output}]},t}();var g=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[m],imports:[a.CommonModule,r.FormsModule],exports:[m]}]}],t}(),u=function(){function t(){this.textalign="left",this.row={},this.allEnabled=!1,this.inputChanged=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.onInputChanged=function(t,e){t&&e&&(t[e+"Change"]=!0,this.inputChanged.emit({item:t,label:e}))},t.decorators=[{type:e.Component,args:[{selector:"[datatable-inputcheckbox-template]",template:'\n    <span class="custom-control custom-checkbox">\n      <input\n        type="checkbox"\n        [style.text-align]="textalign"\n        [id]="\'InputcheckboxTemplate_\' + row.id"\n        [name]="\'InputcheckboxTemplate_\' + row.id"\n        (ngModelChange)="onInputChanged(row, title)"\n        [readonly]="!allEnabled || row.disabled"\n        class="custom-control-input"\n        [(ngModel)]="row[title]"\n      />\n      <label\n        class="custom-control-label"\n        [for]="\'InputcheckboxTemplate_\' + row.id"\n      ></label>\n    </span>\n  '}]}],t.ctorParameters=function(){return[]},t.propDecorators={textalign:[{type:e.Input}],row:[{type:e.Input}],allEnabled:[{type:e.Input}],title:[{type:e.Input}],inputChanged:[{type:e.Output}]},t}();var h=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[u],imports:[a.CommonModule,r.FormsModule],exports:[u]}]}],t}(),y=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[d],imports:[a.CommonModule,r.FormsModule,g,h],providers:[a.DatePipe],exports:[d],schemas:[e.CUSTOM_ELEMENTS_SCHEMA]}]}],t}(),f=function(){function t(){this.totalItems=0,this.itemsPerPage=10,this.startItem=0,this.endItem=10,this.paginationmessag="",this.maxSize=5,this.showBoundaryLinks=!0,this.onpageChanged=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.pageChanged=function(t){this.onpageChanged.emit(t)},t.decorators=[{type:e.Component,args:[{selector:"[datatable-footer]",template:'\n    <div class="datatableinfolist" id="plansAssignmentTable_info">\n      <ng-container\n        *ngTemplateOutlet="\n          endItemTemplate;\n          context: {\n            total: totalItems,\n            endItem: endItem,\n            startItem: startItem,\n            paginationmessag: paginationmessag\n          }\n        "\n      >\n      </ng-container>\n    </div>\n    <ngx-mariem-pagination\n      [totalItems]="totalItems"\n      [itemsPerPage]="itemsPerPage"\n      [maxSize]="maxSize"\n      (pageChanged)="pageChanged($event)"\n    ></ngx-mariem-pagination>\n    <ng-template\n      #endItemTemplate\n      let-total="total"\n      let-endItem="endItem"\n      let-paginationmessag="paginationmessag"\n    >\n      <ng-container *ngIf="endItem">\n        \x3c!-- De {{ startItem + 1 }} à\n        {{ endItem > total ? total : endItem }}\n        sur un total de --\x3e\n        {{ total }} au total\n        \x3c!-- {{ paginationmessag }} --\x3e\n      </ng-container>\n    </ng-template>\n  ',encapsulation:e.ViewEncapsulation.None,styles:["\n      .page-link {\n        color: #333 !important;\n        margin-top: .25rem;\n        border: none !important;\n        font-weight: 700 !important;\n        align-items: center !important;\n        margin: 0 !important;\n        padding: 0.5rem; //8px; !important;\n        height: auto !important;\n        min-width: auto !important;\n        border-radius: .25rem !important;\n      }\n      .page-item.active .page-link {\n        background-color: hsla(0, 0%, 62%, 0.2) !important;\n      }\n      .page-item:first-child .page-link::before,\n      .page-item:last-child .page-link::after {\n        content: none !important;\n      }\n      .pagination {\n        margin: 0;\n      }\n      .page-item .page-link:active {\n        background-color: hsla(0, 0%, 62%, 0.2) !important;\n        border: none !important;\n      }\n      .page-link:focus {\n        outline: none !important;\n      }\n      .page-item:first-child .page-link:focus,\n      .page-item:first-child .page-link:hover,\n      .page-item:last-child .page-link:focus,\n      .page-item:last-child .page-link:hover,\n      .page-link:focus,\n      .page-link:hover {\n        background-color: #eaeaea8a !important;\n      }\n    "]}]}],t.ctorParameters=function(){return[]},t.propDecorators={totalItems:[{type:e.Input}],itemsPerPage:[{type:e.Input}],startItem:[{type:e.Input}],endItem:[{type:e.Input}],paginationmessag:[{type:e.Input}],maxSize:[{type:e.Input}],showBoundaryLinks:[{type:e.Input}],onpageChanged:[{type:e.Output}]},t}();var b=function(){function t(){this.previousText="&lsaquo;",this.nextText="&rsaquo;",this.firstText="&laquo;",this.lastText="&raquo;",this.pageChanged=new e.EventEmitter,this._totalItems=0,this._itemsPerPage=10,this._maxSize=5,this.listNumbers=[],this.activeIndex=0}return Object.defineProperty(t.prototype,"totalItems",{get:function(){return this._totalItems},set:function(t){this._totalItems=t,this.fixListNumbers()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"itemsPerPage",{get:function(){return this._itemsPerPage},set:function(t){this._itemsPerPage=t,this.fixListNumbers()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"maxSize",{get:function(){return this._maxSize},set:function(t){this._maxSize=t,this.fixListNumbers()},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.pageChangedFn(0)},t.prototype.fixListNumbers=function(){var t=Math.round(this.totalItems/this.itemsPerPage),e=t*this.itemsPerPage<this.totalItems?t+1:t;this.listNumbers=[];for(var n=0;n<e;n++)this.listNumbers.push(n+1)},t.prototype.pageChangedFn=function(t){this.activeIndex=t,this.pageChanged.emit({page:t+1,itemsPerPage:this.itemsPerPage})},t.decorators=[{type:e.Component,args:[{selector:"ngx-mariem-pagination",template:'\n    <div class="flex">\n      <button\n        [disabled]="activeIndex == 0"\n        (click)="pageChangedFn(0)"\n        [innerHTML]="firstText"\n        class="page-link"\n      ></button>\n      <button\n        [disabled]="activeIndex == 0"\n        (click)="pageChangedFn(activeIndex - 1)"\n        [innerHTML]="previousText"\n        class="page-link"\n      ></button>\n      <button\n        *ngFor="\n          let i of listNumbers\n            | pipePagination: { maxSize: maxSize, activeIndex: activeIndex }\n        "\n        class="page-link"\n        [ngClass]="{ \'active-page\': activeIndex == i - 1 }"\n        (click)="pageChangedFn(i - 1)"\n      >\n        {{ i }}\n      </button>\n      <button\n        [disabled]="activeIndex == listNumbers.length - 1"\n        (click)="pageChangedFn(activeIndex + 1)"\n        [innerHTML]="nextText"\n        class="page-link"\n      ></button>\n      <button\n        [disabled]="activeIndex == listNumbers.length - 1"\n        (click)="pageChangedFn(listNumbers.length - 1)"\n        [innerHTML]="lastText"\n        class="page-link"\n      ></button>\n    </div>\n  ',styles:[".flex{display:flex}.active-page{background-color:rgba(158,158,158,.2)!important}.page-link{background:0 0;color:#333!important;border:none!important;font-weight:700!important;align-items:center!important;margin:0!important;padding:.5rem;height:auto!important;min-width:auto!important;border-radius:.25rem!important;cursor:pointer}.page-link:hover{background-color:rgba(158,158,158,.2)!important}.page-link[disabled]{cursor:no-drop}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={totalItems:[{type:e.Input}],itemsPerPage:[{type:e.Input}],maxSize:[{type:e.Input}],previousText:[{type:e.Input}],nextText:[{type:e.Input}],firstText:[{type:e.Input}],lastText:[{type:e.Input}],pageChanged:[{type:e.Output}]},t}();var x=function(){function t(){}return t.prototype.transform=function(t,e){if(t.length<=e.maxSize)return t;return e.activeIndex+e.maxSize>=t.length?t.slice(t.length-e.maxSize,t.length):t.slice(e.activeIndex,e.activeIndex+e.maxSize)},t.decorators=[{type:e.Pipe,args:[{name:"pipePagination"}]}],t}(),k=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[b,x],imports:[a.CommonModule],exports:[b]}]}],t}(),v=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[f],imports:[a.CommonModule,k],exports:[f]}]}],t}(),I=function(){function t(){this.displayedColomnList=[],this.Actions=[],this.nbRows=4,this.checkboxes=!1}return t.prototype.ngOnInit=function(){},t.decorators=[{type:e.Component,args:[{selector:"[loading-rows]",template:'\n    <ng-container>\n      <td *ngIf="checkboxes">\n        <div class="loading-row"></div>\n      </td>\n      <td *ngFor="let title of displayedColomnList">\n        <div class="loading-row"></div>\n      </td>\n\n      \x3c!-- actions List --\x3e\n\n      <td *ngFor="let action of Actions">\n        <div class="loading-row"></div>\n      </td>\n    </ng-container>\n  ',styles:["@-webkit-keyframes placeHolderShimmer{0%,100%,50%{background:#ececec}30%,80%{background:#f7f7f7}}@keyframes placeHolderShimmer{0%,100%,50%{background:#ececec}30%,80%{background:#f7f7f7}}.loading-row{height:20px;width:98%;-webkit-animation:3s infinite placeHolderShimmer;animation:3s infinite placeHolderShimmer}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={displayedColomnList:[{type:e.Input}],Actions:[{type:e.Input}],nbRows:[{type:e.Input}],checkboxes:[{type:e.Input}]},t}();var C=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[I],imports:[a.CommonModule],exports:[I]}]}],t}(),w=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[s,l,c,p],imports:[a.CommonModule,r.FormsModule,y,v,C],exports:[s]}]}],t}(),P=function(){this.type="text",this.search=!1,this.sort=!1};var L=function(t,e,n){this.type=t,this.iconClass=e,n&&(this.disabledAttribut=n)};var _=function(){};t.NgxMariemDatatableComponent=s,t.NgxMariemDatatableModule=w,t.action=L,t.datatable_action=_,t.datatable_displayedColomn=P,t.filterData=l,t.grouppigByPipe=p,t.paginatePipe=c,t.ɵa=o,t.ɵb=y,t.ɵc=d,t.ɵd=g,t.ɵe=m,t.ɵf=h,t.ɵg=u,t.ɵh=v,t.ɵi=f,t.ɵj=k,t.ɵk=b,t.ɵl=x,t.ɵm=C,t.ɵn=I,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mariem-datatable.umd.min.js.map