-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path17-es2015.15dd34b0e7f3801c61b1.js
1 lines (1 loc) · 13.1 KB
/
17-es2015.15dd34b0e7f3801c61b1.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{ulYL:function(n,e,t){"use strict";t.r(e),t.d(e,"SampleSecondModule",function(){return F});var c=t("An66"),o=t("1VvW"),i=t("5Q2+"),m=t("kZht"),l=t("aJOL"),a=t("1ZKX"),s=t("BL99"),b=t("ctyY"),p=t("j5U8"),u=t("hCLc"),r=t("ydE+"),g=t("O+XF"),d=t("EmXI"),G=t("IOEv"),h=t("pTnX");function y(n,e){1&n&&m.Gc(0,"License")}function x(n,e){1&n&&(m.Gc(0),m.ic(1,"uppercase")),2&n&&m.Hc(m.jc(1,1,e.$implicit))}function U(n,e){1&n&&m.Gc(0,"Price")}function w(n,e){1&n&&(m.Gc(0),m.ic(1,"currency")),2&n&&m.Hc(m.jc(1,1,e.$implicit))}function V(n,e){}function f(n,e){1&n&&(m.Gc(0,"\n "),m.Vb(1,"button",17),m.Gc(2,"\n "),m.Vb(3,"mat-icon"),m.Gc(4,"done"),m.Ub(),m.Gc(5,"\n "),m.Ub(),m.Gc(6,"\n "))}function k(n,e){1&n&&m.Gc(0),2&n&&m.Ic("\u2116",e.$implicit,"")}function C(n,e){1&n&&(m.Gc(0),m.ic(1,"uppercase")),2&n&&m.Hc(m.jc(1,1,e.$implicit))}function v(n,e){if(1&n&&(m.Gc(0,"\n "),m.Vb(1,"button",18),m.Gc(2),m.ic(3,"currency"),m.Ub(),m.Gc(4,"\n "),m.Vb(5,"mat-menu",null,19),m.Gc(7,"\n "),m.Vb(8,"button",20),m.Gc(9,"EUR"),m.Ub(),m.Gc(10,"\n "),m.Vb(11,"button",20),m.Gc(12,"DOL"),m.Ub(),m.Gc(13,"\n "),m.Ub(),m.Gc(14,"\n ")),2&n){const n=e.$implicit,t=m.wc(6);m.Cb(1),m.oc("matMenuTriggerFor",t),m.Cb(1),m.Hc(m.jc(3,2,n))}}function E(n,e){if(1&n){const n=m.Xb();m.Vb(0,"mat-option",22),m.dc("click",function(){return m.xc(n),m.hc(2).cd.detectChanges()}),m.Gc(1),m.Ub()}if(2&n){const n=e.$implicit;m.oc("value",n.name),m.Cb(1),m.Ic("\n ",n.name,"\n ")}}function L(n,e){if(1&n&&(m.Gc(0,"\n "),m.Vb(1,"mat-form-field"),m.Gc(2,"\n "),m.Vb(3,"mat-label"),m.Gc(4,"Relative"),m.Ub(),m.Gc(5,"\n "),m.Vb(6,"mat-select"),m.Gc(7,"\n "),m.Ec(8,E,2,2,"mat-option",21),m.Gc(9,"\n "),m.Ub(),m.Gc(10,"\n "),m.Ub(),m.Gc(11,"\n ")),2&n){const n=m.hc();m.Cb(8),m.oc("ngForOf",n.licenses)}}const S=function(){return["status-column"]};let O=(()=>{class n{constructor(n){this.cd=n,this.licenses=[],this.columns=["name","position","weight","symbol","position","weight","symbol","status"],this.elements=[{position:1,name:"Hydrogen",weight:1.0079,symbol:"H"},{position:2,name:"Helium",weight:4.0026,symbol:"He"},{position:3,name:"Lithium",weight:6.941,symbol:"Li"},{position:4,name:"Beryllium",weight:9.0122,symbol:"Be"},{position:5,name:"Boron",weight:10.811,symbol:"B"},{position:6,name:"Carbon",weight:12.0107,symbol:"C"},{position:7,name:"Nitrogen",weight:14.0067,symbol:"N"},{position:8,name:"Oxygen",weight:15.9994,symbol:"O"},{position:9,name:"Fluorine",weight:18.9984,symbol:"F"},{position:10,name:"Neon",weight:20.1797,symbol:"Ne"}]}ngAfterViewInit(){document.querySelectorAll("pre code").forEach(n=>{hljs.highlightBlock(n)}),setTimeout(()=>{this.licenses=[{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}],this.cd.detectChanges()})}}return n.\u0275fac=function(e){return new(e||n)(m.Ob(m.h))},n.\u0275cmp=m.Ib({type:n,selectors:[["sample-second"]],decls:138,vars:7,consts:[[1,"simple-toolbar"],[1,"column-samples"],[1,"column"],[1,"javascript"],[3,"source"],["key","name"],["ngx-th",""],["ngx-td",""],["key","price"],[3,"source","striped","keys"],["key","name","sticky",""],["key","status","width","50","sticky-end","",3,"css-class"],["row-height","60",3,"source"],["key","id","width","100","empty-head",""],["key","name","head-title","License name"],["key","price","head-title","Cost"],["key","change","width","250","empty-head","","custom-key",""],["mat-button","",1,"button__done"],["mat-button","",3,"matMenuTriggerFor"],["menu","matMenu"],["mat-menu-item",""],[3,"value","click",4,"ngFor","ngForOf"],[3,"value","click"]],template:function(n,e){1&n&&(m.Vb(0,"mat-toolbar",0),m.Gc(1,"\n "),m.Vb(2,"span"),m.Gc(3,"Example custom templates"),m.Ub(),m.Gc(4,"\n"),m.Ub(),m.Gc(5,"\n\n"),m.Vb(6,"h4"),m.Gc(7,"1. Override columns rendering"),m.Ub(),m.Gc(8,"\n\n"),m.Vb(9,"div",1),m.Gc(10,"\n "),m.Vb(11,"div",2),m.Gc(12,"\n "),m.Vb(13,"pre"),m.Vb(14,"code",3),m.Gc(15,"\n // app.component.ts\n import { Component } from \"@angular/core\";\n import { LicenseSample } from \"./license.interface\";\n\n @Component({\n selector: 'app',\n templateUrl: './app.component.html'\n })\n export class AppComponent {\n\n public licenses: LicenseSample[] = [\n {\n id: 1,\n name: 'single',\n price: 29.3\n },\n {\n id: 2,\n name: 'developer',\n price: 49.8\n },\n {\n id: 3,\n name: 'premium',\n price: 99.5\n },\n {\n id: 4,\n name: 'enterprise',\n price: 199\n }\n ];\n\n }\n\n"),m.Ub(),m.Ub(),m.Gc(16,"\n "),m.Ub(),m.Gc(17,"\n\n "),m.Vb(18,"div",2),m.Gc(19,"\n "),m.Vb(20,"pre"),m.Vb(21,"code",3),m.Pb(),m.Gc(22,'\n \x3c!-- app.component.html --\x3e\n <ngx-table-builder [source]="licenses">\n\n <ngx-column key="name">\n <ng-template ngx-th>License</ng-template>\n <ng-template ngx-td let-name>\n {{ name | uppercase }}\n </ng-template>\n </ngx-column>\n\n <ngx-column key="price">\n <ng-template ngx-th>Cost</ng-template>\n <ng-template ngx-td let-price>\n {{ price | currency }}\n </ng-template>\n </ngx-column>\n\n </ngx-table-builder>\n\n'),m.Wb(),m.Ub(),m.Ub(),m.Gc(23,"\n\n "),m.Vb(24,"ngx-table-builder",4),m.Gc(25,"\n "),m.Vb(26,"ngx-column",5),m.Gc(27,"\n "),m.Ec(28,y,1,0,"ng-template",6),m.Gc(29,"\n "),m.Ec(30,x,2,3,"ng-template",7),m.Gc(31,"\n "),m.Ub(),m.Gc(32,"\n\n "),m.Vb(33,"ngx-column",8),m.Gc(34,"\n "),m.Ec(35,U,1,0,"ng-template",6),m.Gc(36,"\n "),m.Ec(37,w,2,3,"ng-template",7),m.Gc(38,"\n "),m.Ub(),m.Gc(39,"\n "),m.Ub(),m.Gc(40,"\n "),m.Ub(),m.Gc(41,"\n"),m.Ub(),m.Gc(42,"\n\n"),m.Vb(43,"h4"),m.Gc(44,"2. Sticky and Custom Columns"),m.Ub(),m.Gc(45,"\n\n"),m.Vb(46,"div",1),m.Gc(47,"\n "),m.Vb(48,"div",2),m.Gc(49,"\n "),m.Vb(50,"pre"),m.Vb(51,"code",3),m.Gc(52,"\n // app.component.ts\n import { Component } from \"@angular/core\";\n\n export interface PeriodicElement {\n name: string;\n position: number;\n weight: number;\n symbol: string;\n }\n\n @Component({\n selector: 'app',\n templateUrl: './app.component.html',\n styles: [\n `\n // Use custom CSS for column and cell\n .status-column .table-grid__cell {\n padding: 0;\n color: green;\n }\n\n // Reset CSS for default mat-button style\n .button__done[mat-button] {\n padding: 0;\n min-width: 100%;\n }\n `\n ],\n // Use to disable CSS Encapsulation for this component\n encapsulation: ViewEncapsulation.None,\n })\n export class AppComponent {\n public columns: string[] = [\n 'name', 'position', 'weight', 'symbol',\n 'position', 'weight', 'symbol', 'status'\n ];\n\n public data: PeriodicElement[] = [\n { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },\n { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },\n { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },\n { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },\n { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },\n { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },\n { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },\n { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },\n { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },\n { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },\n ];\n }\n\n\n"),m.Ub(),m.Ub(),m.Gc(53,"\n\n "),m.Vb(54,"p"),m.Gc(55,"\n "),m.Vb(56,"b"),m.Gc(57,"Note"),m.Ub(),m.Gc(58,": If you use the keys array, then the columns will be drawn to agree with their order (including\n repetitions). If you do not use the keys array, then the columns will be drawn to agree with the specified\n templates (ngx-column). "),m.Qb(59,"br"),m.Gc(60,"\n "),m.Ub(),m.Gc(61,"\n\n "),m.Qb(62,"hr"),m.Gc(63,"\n\n "),m.Vb(64,"p"),m.Gc(65,"\n "),m.Vb(66,"b"),m.Gc(67,"Note"),m.Ub(),m.Gc(68,": You can also use keywords "),m.Vb(69,"b"),m.Gc(70," "),m.Vb(71,"i"),m.Gc(72,"empty-head"),m.Ub(),m.Gc(73," "),m.Ub(),m.Gc(74,",\n "),m.Vb(75,"b"),m.Gc(76,"\n "),m.Vb(77,"i"),m.Gc(78,"head-title"),m.Ub(),m.Gc(79,"\n "),m.Ub(),m.Gc(80,"\n for print simple text in table head.\n "),m.Ub(),m.Gc(81,"\n\n "),m.Vb(82,"pre"),m.Vb(83,"code",3),m.Pb(),m.Gc(84,'\n \x3c!-- app.component.html --\x3e\n <ngx-table-builder [source]="licenses" row-height="60">\n <ngx-column key="id" width="100" empty-head>\n <ng-template ngx-td let-id>\u2116{{ id }}</ng-template>\n </ngx-column>\n\n <ngx-column key="name" head-title="License name">\n <ng-template ngx-td let-name>{{ name | uppercase }}</ng-template>\n </ngx-column>\n\n <ngx-column key="price" head-title="Cost">\n <ng-template ngx-td let-price>\n <button mat-button [matMenuTriggerFor]="menu">{{ price | currency }}</button>\n <mat-menu #menu="matMenu">\n <button mat-menu-item>EUR</button>\n <button mat-menu-item>DOL</button>\n </mat-menu>\n </ng-template>\n </ngx-column>\n\n <ngx-column key="change" width="250" empty-head custom-key>\n <ng-template ngx-td>\n <mat-form-field>\n <mat-label>Relative</mat-label>\n <mat-select>\n <mat-option\n [value]="license.name"\n (click)="cd.detectChanges()"\n *ngFor="let license of licenses"\n >\n {{ license.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </ng-template>\n </ngx-column>\n </ngx-table-builder>\n\n'),m.Wb(),m.Ub(),m.Ub(),m.Gc(85,"\n "),m.Ub(),m.Gc(86,"\n\n "),m.Vb(87,"div",2),m.Gc(88,"\n "),m.Vb(89,"ngx-table-builder",9),m.Gc(90,"\n "),m.Qb(91,"ngx-column",10),m.Gc(92,"\n\n "),m.Vb(93,"ngx-column",11),m.Gc(94,"\n "),m.Ec(95,V,0,0,"ng-template",6),m.Gc(96,"\n "),m.Ec(97,f,7,0,"ng-template",7),m.Gc(98,"\n "),m.Ub(),m.Gc(99,"\n "),m.Ub(),m.Gc(100,"\n "),m.Vb(101,"div"),m.Qb(102,"br"),m.Ub(),m.Gc(103,"\n\n "),m.Vb(104,"pre"),m.Vb(105,"code",3),m.Pb(),m.Gc(106,'\n \x3c!-- app.component.html --\x3e\n <ngx-table-builder [source]="data" [striped]="false" [keys]="columns">\n\n <ngx-column key="name" sticky></ngx-column>\n\n <ngx-column width="50" key="status" sticky-end [css-class]="[\'status-column\']">\n <ng-template ngx-th></ng-template>\n <ng-template ngx-td>\n <button class="button__done" mat-button>\n <mat-icon>done</mat-icon>\n </button>\n </ng-template>\n </ngx-column>\n\n </ngx-table-builder>\n'),m.Wb(),m.Ub(),m.Ub(),m.Gc(107,"\n\n "),m.Qb(108,"hr"),m.Gc(109,"\n\n "),m.Vb(110,"ngx-table-builder",12),m.Gc(111,"\n "),m.Vb(112,"ngx-column",13),m.Gc(113,"\n "),m.Ec(114,k,1,1,"ng-template",7),m.Gc(115,"\n "),m.Ub(),m.Gc(116,"\n\n "),m.Vb(117,"ngx-column",14),m.Gc(118,"\n "),m.Ec(119,C,2,3,"ng-template",7),m.Gc(120,"\n "),m.Ub(),m.Gc(121,"\n\n "),m.Vb(122,"ngx-column",15),m.Gc(123,"\n "),m.Ec(124,v,15,4,"ng-template",7),m.Gc(125,"\n "),m.Ub(),m.Gc(126,"\n\n "),m.Vb(127,"ngx-column",16),m.Gc(128,"\n "),m.Ec(129,L,12,1,"ng-template",7),m.Gc(130,"\n "),m.Ub(),m.Gc(131,"\n "),m.Ub(),m.Gc(132,"\n "),m.Ub(),m.Gc(133,"\n"),m.Ub(),m.Gc(134,"\n\n"),m.Vb(135,"div"),m.Qb(136,"br"),m.Ub(),m.Gc(137,"\n")),2&n&&(m.Cb(24),m.oc("source",e.licenses),m.Cb(65),m.oc("source",e.elements)("striped",!1)("keys",e.columns),m.Cb(4),m.oc("css-class",m.qc(6,S)),m.Cb(17),m.oc("source",e.licenses))},directives:[l.a,a.a,s.a,b.a,p.a,u.a,r.a,g.d,g.a,g.b,d.b,d.e,G.a,c.l,h.i],pipes:[c.v,c.c],styles:["\n /*noinspection CssUnusedSymbol*/\n .status-column .table-grid__cell {\n padding: 0;\n color: green;\n }\n\n /*noinspection CssUnusedSymbol*/\n .button__done[mat-button] {\n padding: 0;\n min-width: 100%;\n }\n "],encapsulation:2,changeDetection:0}),n})(),F=(()=>{class n{}return n.\u0275fac=function(e){return new(e||n)},n.\u0275mod=m.Mb({type:n}),n.\u0275inj=m.Lb({imports:[[c.b,i.a,o.b.forChild([{path:"",component:O}])]]}),n})()}}]);