{"__symbolic":"module","version":4,"metadata":{"MxCrudService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"MxCrudPanelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MxCrudPanel"},{"__symbolic":"reference","name":"MxAddPanel"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@marxa/devkit","name":"MxDateTimeModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"MxCrudPanel"},{"__symbolic":"reference","name":"MxAddPanel"}]}]}],"members":{}},"MxCrudPanelColumns":{"__symbolic":"interface"},"MxCrudCreateConfig":{"__symbolic":"interface"},"MxAddPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"mx-add-panel, [mx-add-panel], [mxAddPanel]","host":{"class":"mx-add-panel","$quoted$":["class"]}}]}],"members":{}},"MxCrudPanel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"mx-crud-panel","exportAs":"mxCrudPanel","template":"<mat-drawer-container\r\n  [hasBackdrop]=\"backdrop\"\r\n  [style.height.vh]=\"height_vh\"\r\n>\r\n\r\n  <mat-drawer #itemPanel\r\n  id=\"item_panel\"\r\n  [mode]=\"'over'\"\r\n  [position]=\"panelPosition\"\r\n  [style.width.vw]=\"width_vw\">\r\n    <div class=\"row\">\r\n      <div class=\"col s1\">\r\n        <button mat-icon-button (click)=\"closeItemPanel()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div class=\"col s11\">\r\n        <ng-container *ngIf=\"itemSelected; else addItem\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"selectTemplate; context: itemCtx\"\r\n          ></ng-container>\r\n        </ng-container>\r\n        <ng-template #addItem >\r\n            <ng-container *ngIf=\"addSwitched\" [ngTemplateOutlet]=\"addTemplate\"></ng-container>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </mat-drawer>\r\n\r\n  <mat-drawer-content>\r\n    <div id=\"mx-crud-content\">\r\n      <div class=\"row\" id=\"mx-crud-header\">\r\n        <div class=\"col s12 header\">\r\n          <h4 class=\"\">\r\n            <b>{{ listName }}</b>\r\n            <span>\r\n              <button\r\n              mat-raised-button\r\n              [color]=\"addBtnConfig.color\"\r\n              (click)=\"openItemPanel()\">\r\n                <mat-icon *ngIf=\"addBtnConfig.enableIcon\"\r\n                >{{addBtnConfig.icon}}</mat-icon>\r\n                {{addBtnConfig.label}}\r\n              </button>\r\n            </span>\r\n          </h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\" id=\"mx-crud-body\">\r\n        <div class=\"col s12\">\r\n\r\n          <ng-container *ngIf=\"(_list | async) as List; else loading \">\r\n            <ng-container *ngIf=\"List.length > 0; else empty\">\r\n              <table *ngIf=\"columns\" mat-table #table [dataSource]=\"List\" >\r\n                <ng-container *ngFor=\"let col of columns\">\r\n                  <ng-container matColumnDef=\"{{colId(col)}}\">\r\n                    <th mat-header-cell *matHeaderCellDef> {{colDisplay(col)}} </th>\r\n                    <td mat-cell *matCellDef=\"let item\">\r\n                      <ng-container *ngIf=\"colValue(item, col) as value\">\r\n                        <ng-container [ngSwitch]=\"colValueType(value)\">\r\n                          <ng-container *ngSwitchCase=\"'timestamp'\">{{value | mxTimestamp | date: 'dd/MM/yyyy'}}</ng-container>\r\n                          <ng-container *ngSwitchDefault>{{value}}</ng-container>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </td>\r\n                  </ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container matColumnDef=\"options\">\r\n                  <th mat-header-cell *matHeaderCellDef></th>\r\n                  <td class=\"del-cell\" mat-cell *matCellDef=\"let item\">\r\n                    <span class=\"delete\" mxStopPropagation >\r\n                      <button mat-icon-button\r\n                      (click)=\"onDeleteItem(item)\">\r\n                        <mat-icon>delete</mat-icon>\r\n                      </button>\r\n                    </span>\r\n                  </td>\r\n                </ng-container>\r\n                <tr mat-header-row *matHeaderRowDef=\"colRefs\"></tr>\r\n                <tr class=\"item-row\" mat-row *matRowDef=\"let item; columns: colRefs;\"\r\n                (click)=\"openItemPanel(item)\"\r\n                ></tr>\r\n              </table>\r\n            </ng-container>\r\n            <ng-template #empty>\r\n              <div class=\"empty-message\" *ngIf=\"emptyMessage\">\r\n                <p>{{emptyMessage}}</p>\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #loading>\r\n            <div class=\"spinner\"\r\n            *ngIf=\"loadingAnimation\">\r\n              <mat-spinner></mat-spinner>\r\n            </div>\r\n          </ng-template>\r\n\r\n\r\n\r\n          <!-- <mat-selection-list\r\n            #listPanel\r\n            (selectionChange)=\"onItemSelected($event)\"\r\n            [disableRipple]=\"true\"\r\n            [multiple]=\"false\"\r\n          >\r\n            <mat-list-option class=\"mx-panel-option\" *ngFor=\"let item of list\" [value]=\"item\">\r\n              {{ item[itemSelector] }}\r\n              <span class=\"delete\" mxStopPropagation >\r\n                <button mat-icon-button\r\n                (click)=\"onDeleteItem(item)\">\r\n                  <mat-icon>delete</mat-icon>\r\n                </button>\r\n              </span>\r\n            </mat-list-option>\r\n          </mat-selection-list> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n","styles":["#add_item{height:100vh}#add_item,#item_panel{position:fixed;right:0;top:0}mat-drawer-container{max-height:100vh}mat-drawer .row{width:100%}mat-drawer-content{min-height:100%}mat-drawer-content .row{width:100%;margin:0}mat-drawer-content .row .col{padding:0}.mat-drawer-backdrop{position:fixed;top:0;right:0}#mx-crud-content{background-color:#fff;padding:0 1em 2em;margin:1em 0;border-radius:1em}#mx-crud-content ::ng-deep td.mat-cell,#mx-crud-content ::ng-deep th.mat-header-cell{border-bottom-color:#fff;border-bottom-width:1px}#mx-crud-header{margin-bottom:0}#mx-crud-body .col{height:100%;overflow:auto!important}.header h4{border-radius:10px;padding:1em;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;margin-bottom:0}.mx-panel-option ::ng-deep{border-bottom:1px solid #ccc}.mx-panel-option ::ng-deep:first-child{border-top:1px solid #ccc}.mx-panel-option ::ng-deep .mat-list-text{display:flex;justify-content:space-between;flex-direction:row!important;align-items:center}table{width:100%}table .item-row{transition:all .2s;cursor:pointer}table .item-row:hover{background:hsla(0,0%,80%,.33)}table .item-row:hover .delete{opacity:1!important}table .item-row .del-cell{text-align:right}.delete{color:#cd5c5c;opacity:0;transition:all .3s}@media screen and (max-width:768px){.delete{opacity:1!important}}.empty-message,.spinners{width:100%;height:100%;display:flex;justify-content:center;align-items:center}"]}]}],"members":{"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"listName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"addBtnConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"itemSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"selectTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"addTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"height_vh":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"width_vw":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"backdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"panelPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"loadingAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"itemPanel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":65,"character":3},"arguments":["itemPanel"]}]}],"listPanel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["listPanel"]}]}],"onDelete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"onClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":3}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"MxCrudService"}]}],"ngOnInit":[{"__symbolic":"method"}],"colId":[{"__symbolic":"method"}],"colDisplay":[{"__symbolic":"method"}],"colValue":[{"__symbolic":"method"}],"colValueType":[{"__symbolic":"method"}],"openItemPanel":[{"__symbolic":"method"}],"closeItemPanel":[{"__symbolic":"method"}],"onDeleteItem":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":49,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"A11yModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"BidiModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/cdk/observers","name":"ObserversModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/cdk/platform","name":"PlatformModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/cdk/stepper","name":"CdkStepperModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/cdk/tree","name":"CdkTreeModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material/bottom-sheet","name":"MatBottomSheetModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":74,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":79,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":80,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":81,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":82,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":83,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":84,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":85,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":86,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":87,"character":4},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":88,"character":4},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":89,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":90,"character":4},{"__symbolic":"reference","module":"@angular/material/snack-bar","name":"MatSnackBarModule","line":91,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":92,"character":4},{"__symbolic":"reference","module":"@angular/material/stepper","name":"MatStepperModule","line":93,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":94,"character":4},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":95,"character":4},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":96,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":97,"character":4},{"__symbolic":"reference","module":"@angular/material/tree","name":"MatTreeModule","line":98,"character":4}]}]}],"members":{}}},"origins":{"MxCrudService":"./lib/mx-crud-panel.service","MxCrudPanelModule":"./lib/mx-crud-panel.module","MxCrudPanelColumns":"./lib/mx-crud-panel.model","MxCrudCreateConfig":"./lib/mx-crud-panel.model","MxAddPanel":"./lib/components/mx-crud-panel/mx-crud-panel.component","MxCrudPanel":"./lib/components/mx-crud-panel/mx-crud-panel.component","ɵa":"./shared/material.module"},"importAs":"@marxa/crud-panel"}