23-es2015.1c8a670e48b49f36eee0.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{k5xG:function(e,n,t){"use strict";t.r(n),t.d(n,"SampleThirteenModule",function(){return v});var c=t("An66"),o=t("1VvW"),l=t("MRfT"),i=t("5Q2+"),a=t("kZht"),r=t("aJOL"),s=t("1ZKX"),b=t("BL99"),m=t("ctyY"),d=t("j5U8"),u=t("UDV5");function g(e,n){if(1&e){const e=a.Xb();a.Gc(0,"\n                    "),a.Vb(1,"mat-checkbox",12),a.dc("change",function(){a.xc(e);const n=a.hc();return a.wc(31).selection.toggleAll(n.data)}),a.Ub(),a.Gc(2,"\n                ")}if(2&e){a.hc();const e=a.wc(31);a.Cb(1),a.oc("indeterminate",e.selectionModel.isIndeterminate)("checked",e.selectionModel.isAll)}}function p(e,n){if(1&e){const e=a.Xb();a.Gc(0,"\n                    "),a.Vb(1,"mat-checkbox",13),a.dc("change",function(){a.xc(e);const t=n.$implicit;return a.hc(),a.wc(31).selection.toggle(t)}),a.Ub(),a.Gc(2,"\n                ")}if(2&e){const e=n.$implicit;a.hc();const t=a.wc(31);a.Cb(1),a.oc("checked",t.selectionModel.get(e.id))}}function h(e,n){1&e&&a.Gc(0),2&e&&a.Ic("\n                    ",n.$implicit,"\n                ")}function k(e,n){if(1&e){const e=a.Xb();a.Vb(0,"ngx-column",14),a.Gc(1,"\n                "),a.Ec(2,h,1,1,"ng-template",15),a.dc("onClick",function(n){return a.xc(e),a.hc().rowOnClick(n)}),a.Gc(3,"\n            "),a.Ub()}2&e&&a.oc("key",n.$implicit)}function f(e,n){if(1&e){const e=a.Xb();a.Gc(0,"\n                    "),a.Vb(1,"mat-checkbox",12),a.dc("change",function(){a.xc(e);const n=a.hc();return a.wc(52).selection.toggleAll(n.data)}),a.Ub(),a.Gc(2,"\n                ")}if(2&e){a.hc();const e=a.wc(52);a.Cb(1),a.oc("indeterminate",e.selectionModel.isIndeterminate)("checked",e.selectionModel.isAll)}}function G(e,n){if(1&e){const e=a.Xb();a.Gc(0,"\n                    "),a.Vb(1,"mat-checkbox",13),a.dc("change",function(){a.xc(e);const t=n.$implicit;return a.hc(),a.wc(52).selection.toggle(t)}),a.Ub(),a.Gc(2,"\n                ")}if(2&e){const e=n.$implicit;a.hc();const t=a.wc(52);a.Cb(1),a.oc("checked",t.selectionModel.get(e.id))}}function x(e,n){1&e&&a.Gc(0),2&e&&a.Ic("\n                    ",n.$implicit,"\n                ")}function w(e,n){if(1&e){const e=a.Xb();a.Vb(0,"ngx-column",14),a.Gc(1,"\n                "),a.Ec(2,x,1,1,"ng-template",16),a.dc("dblClick",function(n){return a.xc(e),a.hc().rowDblClick(n)}),a.Gc(3,"\n            "),a.Ub()}2&e&&a.oc("key",n.$implicit)}let C=(()=>{class e{constructor(e){this.toast=e,this.data=[{id:1,name:"single",price:29.3},{id:2,name:"developer",price:49.8},{id:3,name:"premium",price:99.5},{id:4,name:"enterprise",price:199}]}ngAfterViewInit(){this.update()}update(){document.querySelectorAll("pre code").forEach(e=>{hljs.highlightBlock(e)})}rowOnClick(e){this.toast.success(JSON.stringify(e,null,4),"OnClick",{timeOut:2e3,onActivateTick:!0})}rowDblClick(e){this.toast.success(JSON.stringify(e,null,4),"DblClick",{timeOut:2e3,onActivateTick:!0})}}return e.\u0275fac=function(n){return new(n||e)(a.Ob(l.b))},e.\u0275cmp=a.Ib({type:e,selectors:[["sample-thirteen"]],features:[a.Bb([l.b])],decls:74,vars:4,consts:[[1,"simple-toolbar"],[1,"column-samples"],[1,"column"],[1,"html"],["enable-selection","",3,"source"],["tableFirst",""],["key","selection","sticky","","width","55","custom-key",""],["ngx-th",""],["ngx-td","","row","",3,"onClick"],[3,"key",4,"ngFor","ngForOf"],["tableSecond",""],[1,"javascript"],[3,"indeterminate","checked","change"],[3,"checked","change"],[3,"key"],["ngx-td","",3,"onClick"],["ngx-td","",3,"dblClick"]],template:function(e,n){if(1&e&&(a.Vb(0,"mat-toolbar",0),a.Gc(1,"\n    "),a.Vb(2,"span"),a.Gc(3,"Example mouse events"),a.Ub(),a.Gc(4,"\n"),a.Ub(),a.Gc(5,"\n\n"),a.Vb(6,"div",1),a.Gc(7,"\n    "),a.Vb(8,"div",2),a.Gc(9,"\n        "),a.Qb(10,"br"),a.Gc(11,"\n        "),a.Vb(12,"pre"),a.Vb(13,"code",3),a.Pb(),a.Gc(14,'\n  <b>OnClick</b>:\n\n  <ngx-table-builder [source]="data" enable-selection #tableFirst>\n      <ngx-column key="selection" sticky width="55" custom-key>\n          <ng-template ngx-th>\n              <mat-checkbox\n                  (change)="tableFirst.selection.toggleAll(data)"\n                  [indeterminate]="tableFirst.selectionModel.isIndeterminate"\n                  [checked]="tableFirst.selectionModel.isAll"\n              ></mat-checkbox>\n          </ng-template>\n          <ng-template ngx-td row let-row (onClick)="$events.preventDefault()">\n              <mat-checkbox\n                  [checked]="tableFirst.selectionModel.get($any(row).id)"\n                  (change)="tableFirst.selection.toggle(row)"\n              ></mat-checkbox>\n          </ng-template>\n      </ngx-column>\n\n      <ngx-column *ngFor="let key of tableFirst.modelColumnKeys" [key]="key">\n          <ng-template ngx-td (onClick)="rowOnClick($events)" let-cell>\n            {{ cell }}\n            </ng-template>\n      </ngx-column>\n  </ngx-table-builder>\n\n  <b>DblClick</b>:\n\n  <ngx-table-builder [source]="data" enable-selection #tableSecond>\n      <ngx-column key="selection" sticky width="55" custom-key>\n          <ng-template ngx-th>\n              <mat-checkbox\n                  (change)="tableSecond.selection.toggleAll(data)"\n                  [indeterminate]="tableSecond.selectionModel.isIndeterminate"\n                  [checked]="tableSecond.selectionModel.isAll"\n              ></mat-checkbox>\n          </ng-template>\n          <ng-template ngx-td row let-row (onClick)="$events.preventDefault()">\n              <mat-checkbox\n                  [checked]="tableSecond.selectionModel.get($any(row).id)"\n                  (change)="tableSecond.selection.toggle(row)"\n              ></mat-checkbox>\n          </ng-template>\n      </ngx-column>\n\n      <ngx-column *ngFor="let key of tableSecond.modelColumnKeys" [key]="key">\n          <ng-template ngx-td (dblClick)="rowDblClick($events)" let-cell>\n            {{ cell }}\n            </ng-template>\n      </ngx-column>\n  </ngx-table-builder>\n\n'),a.Wb(),a.Ub(),a.Ub(),a.Gc(15,"\n\n        "),a.Vb(16,"p"),a.Gc(17,"\n            A template reference variable is often a reference to a DOM element within a template. It can also refer to\n            a directive (which contains a component), an element, TemplateRef, or a web component. Use the hash symbol\n            (#) to declare a reference variable. As per Official documentation it is not recommended to give same name\n            for template reference variables as it will yield inconsistent results at runtime. Therefore, use different\n            reference names (#tableFirst, #tableSecond).\n        "),a.Ub(),a.Gc(18,"\n    "),a.Ub(),a.Gc(19,"\n    "),a.Vb(20,"div",2),a.Gc(21,"\n        "),a.Qb(22,"br"),a.Gc(23,"\n\n        "),a.Vb(24,"b"),a.Gc(25,"OnClick"),a.Ub(),a.Gc(26,": "),a.Qb(27,"br"),a.Qb(28,"br"),a.Gc(29,"\n\n        "),a.Vb(30,"ngx-table-builder",4,5),a.Gc(32,"\n            "),a.Vb(33,"ngx-column",6),a.Gc(34,"\n                "),a.Ec(35,g,3,2,"ng-template",7),a.Gc(36,"\n                "),a.Ec(37,p,3,1,"ng-template",8),a.dc("onClick",function(e){return e.preventDefault()}),a.Gc(38,"\n            "),a.Ub(),a.Gc(39,"\n\n            "),a.Ec(40,k,4,1,"ngx-column",9),a.Gc(41,"\n        "),a.Ub(),a.Gc(42,"\n\n        "),a.Qb(43,"br"),a.Gc(44,"\n\n        "),a.Vb(45,"b"),a.Gc(46,"DblClick"),a.Ub(),a.Gc(47,": "),a.Qb(48,"br"),a.Qb(49,"br"),a.Gc(50,"\n\n        "),a.Vb(51,"ngx-table-builder",4,10),a.Gc(53,"\n            "),a.Vb(54,"ngx-column",6),a.Gc(55,"\n                "),a.Ec(56,f,3,2,"ng-template",7),a.Gc(57,"\n                "),a.Ec(58,G,3,1,"ng-template",8),a.dc("onClick",function(e){return e.preventDefault()}),a.Gc(59,"\n            "),a.Ub(),a.Gc(60,"\n\n            "),a.Ec(61,w,4,1,"ngx-column",9),a.Gc(62,"\n        "),a.Ub(),a.Gc(63,"\n\n        "),a.Qb(64,"br"),a.Gc(65,"\n        "),a.Qb(66,"br"),a.Gc(67,"\n\n        "),a.Vb(68,"pre"),a.Vb(69,"code",11),a.Gc(70,"\n  // app.component.ts\n  import { TableEvent } from \"@angular-ru/ng-table-builder\";\n  import { Component } from \"@angular/core\";\n  import { ToastService } from \"./toast.service\";\n  import { Data } from \"./data.interface\";\n\n  @Component({\n    selector: 'app',\n    templateUrl: './app.component.html'\n  })\n  export class AppComponent {\n    public data: Data[] = [ .. ];\n    constructor(private toast: ToastService) {}\n\n    public rowOnClick(events: TableEvent): void {\n        this.toast.success('OnClick', events);\n    }\n\n    public rowDblClick(events: TableEvent): void {\n        this.toast.success('DblClick', events);\n    }\n\n  }\n\n"),a.Ub(),a.Ub(),a.Gc(71,"\n    "),a.Ub(),a.Gc(72,"\n"),a.Ub(),a.Gc(73,"\n")),2&e){const e=a.wc(31),t=a.wc(52);a.Cb(30),a.oc("source",n.data),a.Cb(10),a.oc("ngForOf",e.modelColumnKeys),a.Cb(11),a.oc("source",n.data),a.Cb(10),a.oc("ngForOf",t.modelColumnKeys)}},directives:[r.a,s.a,b.a,m.a,d.a,c.l,u.a],encapsulation:2,changeDetection:0}),e})(),v=(()=>{class e{}return e.\u0275fac=function(n){return new(n||e)},e.\u0275mod=a.Mb({type:e}),e.\u0275inj=a.Lb({imports:[[c.b,i.a,l.a,o.b.forChild([{path:"",component:C}])]]}),e})()}}]);