23-es5.1c8a670e48b49f36eee0.js

!function(){function e(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function n(e,n){for(var t=0;t<n.length;t++){var c=n[t];c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(e,c.key,c)}}(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{k5xG:function(t,c,l){"use strict";l.r(c),l.d(c,"SampleThirteenModule",function(){return O});var o=l("An66"),i=l("1VvW"),a=l("MRfT"),r=l("5Q2+"),b=l("kZht"),s=l("aJOL"),m=l("1ZKX"),u=l("BL99"),d=l("ctyY"),g=l("j5U8"),p=l("UDV5");function f(e,n){if(1&e){var t=b.Xb();b.Gc(0,"\n                    "),b.Vb(1,"mat-checkbox",12),b.dc("change",function(){b.xc(t);var e=b.hc();return b.wc(31).selection.toggleAll(e.data)}),b.Ub(),b.Gc(2,"\n                ")}if(2&e){b.hc();var c=b.wc(31);b.Cb(1),b.oc("indeterminate",c.selectionModel.isIndeterminate)("checked",c.selectionModel.isAll)}}function h(e,n){if(1&e){var t=b.Xb();b.Gc(0,"\n                    "),b.Vb(1,"mat-checkbox",13),b.dc("change",function(){b.xc(t);var e=n.$implicit;return b.hc(),b.wc(31).selection.toggle(e)}),b.Ub(),b.Gc(2,"\n                ")}if(2&e){var c=n.$implicit;b.hc();var l=b.wc(31);b.Cb(1),b.oc("checked",l.selectionModel.get(c.id))}}function k(e,n){1&e&&b.Gc(0),2&e&&b.Ic("\n                    ",n.$implicit,"\n                ")}function v(e,n){if(1&e){var t=b.Xb();b.Vb(0,"ngx-column",14),b.Gc(1,"\n                "),b.Ec(2,k,1,1,"ng-template",15),b.dc("onClick",function(e){return b.xc(t),b.hc().rowOnClick(e)}),b.Gc(3,"\n            "),b.Ub()}2&e&&b.oc("key",n.$implicit)}function G(e,n){if(1&e){var t=b.Xb();b.Gc(0,"\n                    "),b.Vb(1,"mat-checkbox",12),b.dc("change",function(){b.xc(t);var e=b.hc();return b.wc(52).selection.toggleAll(e.data)}),b.Ub(),b.Gc(2,"\n                ")}if(2&e){b.hc();var c=b.wc(52);b.Cb(1),b.oc("indeterminate",c.selectionModel.isIndeterminate)("checked",c.selectionModel.isAll)}}function x(e,n){if(1&e){var t=b.Xb();b.Gc(0,"\n                    "),b.Vb(1,"mat-checkbox",13),b.dc("change",function(){b.xc(t);var e=n.$implicit;return b.hc(),b.wc(52).selection.toggle(e)}),b.Ub(),b.Gc(2,"\n                ")}if(2&e){var c=n.$implicit;b.hc();var l=b.wc(52);b.Cb(1),b.oc("checked",l.selectionModel.get(c.id))}}function w(e,n){1&e&&b.Gc(0),2&e&&b.Ic("\n                    ",n.$implicit,"\n                ")}function C(e,n){if(1&e){var t=b.Xb();b.Vb(0,"ngx-column",14),b.Gc(1,"\n                "),b.Ec(2,w,1,1,"ng-template",16),b.dc("dblClick",function(e){return b.xc(t),b.hc().rowDblClick(e)}),b.Gc(3,"\n            "),b.Ub()}2&e&&b.oc("key",n.$implicit)}var y,U,V=((U=function(){function t(n){e(this,t),this.toast=n,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}]}var c,l,o;return c=t,(l=[{key:"ngAfterViewInit",value:function(){this.update()}},{key:"update",value:function(){document.querySelectorAll("pre code").forEach(function(e){hljs.highlightBlock(e)})}},{key:"rowOnClick",value:function(e){this.toast.success(JSON.stringify(e,null,4),"OnClick",{timeOut:2e3,onActivateTick:!0})}},{key:"rowDblClick",value:function(e){this.toast.success(JSON.stringify(e,null,4),"DblClick",{timeOut:2e3,onActivateTick:!0})}}])&&n(c.prototype,l),o&&n(c,o),t}()).\u0275fac=function(e){return new(e||U)(b.Ob(a.b))},U.\u0275cmp=b.Ib({type:U,selectors:[["sample-thirteen"]],features:[b.Bb([a.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&&(b.Vb(0,"mat-toolbar",0),b.Gc(1,"\n    "),b.Vb(2,"span"),b.Gc(3,"Example mouse events"),b.Ub(),b.Gc(4,"\n"),b.Ub(),b.Gc(5,"\n\n"),b.Vb(6,"div",1),b.Gc(7,"\n    "),b.Vb(8,"div",2),b.Gc(9,"\n        "),b.Qb(10,"br"),b.Gc(11,"\n        "),b.Vb(12,"pre"),b.Vb(13,"code",3),b.Pb(),b.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'),b.Wb(),b.Ub(),b.Ub(),b.Gc(15,"\n\n        "),b.Vb(16,"p"),b.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        "),b.Ub(),b.Gc(18,"\n    "),b.Ub(),b.Gc(19,"\n    "),b.Vb(20,"div",2),b.Gc(21,"\n        "),b.Qb(22,"br"),b.Gc(23,"\n\n        "),b.Vb(24,"b"),b.Gc(25,"OnClick"),b.Ub(),b.Gc(26,": "),b.Qb(27,"br"),b.Qb(28,"br"),b.Gc(29,"\n\n        "),b.Vb(30,"ngx-table-builder",4,5),b.Gc(32,"\n            "),b.Vb(33,"ngx-column",6),b.Gc(34,"\n                "),b.Ec(35,f,3,2,"ng-template",7),b.Gc(36,"\n                "),b.Ec(37,h,3,1,"ng-template",8),b.dc("onClick",function(e){return e.preventDefault()}),b.Gc(38,"\n            "),b.Ub(),b.Gc(39,"\n\n            "),b.Ec(40,v,4,1,"ngx-column",9),b.Gc(41,"\n        "),b.Ub(),b.Gc(42,"\n\n        "),b.Qb(43,"br"),b.Gc(44,"\n\n        "),b.Vb(45,"b"),b.Gc(46,"DblClick"),b.Ub(),b.Gc(47,": "),b.Qb(48,"br"),b.Qb(49,"br"),b.Gc(50,"\n\n        "),b.Vb(51,"ngx-table-builder",4,10),b.Gc(53,"\n            "),b.Vb(54,"ngx-column",6),b.Gc(55,"\n                "),b.Ec(56,G,3,2,"ng-template",7),b.Gc(57,"\n                "),b.Ec(58,x,3,1,"ng-template",8),b.dc("onClick",function(e){return e.preventDefault()}),b.Gc(59,"\n            "),b.Ub(),b.Gc(60,"\n\n            "),b.Ec(61,C,4,1,"ngx-column",9),b.Gc(62,"\n        "),b.Ub(),b.Gc(63,"\n\n        "),b.Qb(64,"br"),b.Gc(65,"\n        "),b.Qb(66,"br"),b.Gc(67,"\n\n        "),b.Vb(68,"pre"),b.Vb(69,"code",11),b.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"),b.Ub(),b.Ub(),b.Gc(71,"\n    "),b.Ub(),b.Gc(72,"\n"),b.Ub(),b.Gc(73,"\n")),2&e){var t=b.wc(31),c=b.wc(52);b.Cb(30),b.oc("source",n.data),b.Cb(10),b.oc("ngForOf",t.modelColumnKeys),b.Cb(11),b.oc("source",n.data),b.Cb(10),b.oc("ngForOf",c.modelColumnKeys)}},directives:[s.a,m.a,u.a,d.a,g.a,o.l,p.a],encapsulation:2,changeDetection:0}),U),O=((y=function n(){e(this,n)}).\u0275fac=function(e){return new(e||y)},y.\u0275mod=b.Mb({type:y}),y.\u0275inj=b.Lb({imports:[[o.b,r.a,a.a,i.b.forChild([{path:"",component:V}])]]}),y)}}])}();