2428.ccca2e3735a3d429.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[2428],{2428:(A,u,r)=>{r.r(u),r.d(u,{NpVirtualScrollDemoModule:()=>c});var Z=r(6895),d=r(8379),t=r(4650),i=r(5499);const m=["virtualScroll"];function _(n,a){1&n&&t._uU(0),2&n&&t.hij(" ",a.item," ")}function g(n,a){if(1&n){const e=t.EpF();t.TgZ(0,"fieldset")(1,"legend"),t._uU(2,"Basic"),t.qZA(),t.TgZ(3,"np-virtual-scroll",6,7),t.NdJ("loadData",function(l){t.CHM(e);const f=t.oxw();return t.KtG(f.loadData(l))}),t.qZA(),t.YNc(5,_,1,1,"ng-template",null,8,t.W1O),t.TgZ(7,"div",9)(8,"button",10),t.NdJ("click",function(){t.CHM(e);const l=t.oxw();return t.KtG(l.scrollTo11Item())}),t._uU(9," Go to 11th Item "),t.qZA(),t.TgZ(10,"button",10),t.NdJ("click",function(){t.CHM(e);const l=t.oxw();return t.KtG(l.scrollOffsetDown())}),t._uU(11," Scroll offset 1000px down "),t.qZA(),t.TgZ(12,"button",10),t.NdJ("click",function(){t.CHM(e);const l=t.oxw();return t.KtG(l.scrollOffsetUp())}),t._uU(13," Scroll offset 1000px up "),t.qZA()()()}if(2&n){const e=t.MAs(6),o=t.oxw();t.xp6(3),t.Q6J("items",o.data)("pageSize",o.pageSize)("itemHeight",50)("template",e)}}class s{constructor(){this.importText="import { NpVirtualScrollModule } from 'np-ui-lib';",this.htmlText='<np-virtual-scroll [items]="data" [pageSize]="pageSize" [itemHeight]="50" \n  [template]="itemTemplate" (loadData)="loadData($event)">\n</np-virtual-scroll>\n\n<ng-template #itemTemplate let-item="item">\n  {{item}}\n</ng-template>',this.loadDataText='this.allData = Array.from({ length: 1000 }).map((_, i) => "Item "+ (i+1));\nthis.data = Array.from<string>({ length: 1000 });\n\nloadData(event) {\n  setTimeout(() => {\n    const fetchedData = this.allData.slice(event.first, (event.first + event.rows));\n    Array.prototype.splice.apply(this.data, [...[event.first, event.rows], ...fetchedData]);\n    this.data = [...this.data];\n  }, 2000);\n}',this.pageSize=5,this.allData=Array.from({length:1e3}).map((a,e)=>`Item #${e+1}`),this.data=Array.from({length:1e3})}ngOnInit(){}loadData(a){setTimeout(()=>{const e=this.allData.slice(a.first,a.first+a.rows);Array.prototype.splice.apply(this.data,[a.first,a.rows,...e]),this.data=[...this.data]},2e3)}scrollTo11Item(){this.virtualScroll.scrollToIndex(10)}scrollOffsetDown(){this.virtualScroll.scrollToOffset(1e3)}scrollOffsetUp(){this.virtualScroll.scrollToOffset(-1e3)}static#t=this.\u0275fac=function(e){return new(e||s)};static#e=this.\u0275cmp=t.Xpm({type:s,selectors:[["app-np-virtual-scroll-demo"]],viewQuery:function(e,o){if(1&e&&t.Gf(m,5),2&e){let l;t.iGM(l=t.CRH())&&(o.virtualScroll=l.first)}},decls:140,vars:3,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],["npTabContent",""],["header","New Products",3,"items","pageSize","itemHeight","template","loadData"],["virtualScroll",""],["itemTemplate",""],[1,"np-btn-group"],["type","button",1,"np-btn",3,"click"]],template:function(e,o){1&e&&(t.TgZ(0,"h2",0),t._uU(1,"Virtual Scroll"),t.qZA(),t.TgZ(2,"np-tabs")(3,"np-tab",1)(4,"np-card")(5,"np-card-body")(6,"b"),t._uU(7,"Module to import"),t.qZA(),t.TgZ(8,"div")(9,"pre"),t._UZ(10,"code",2),t.qZA()()()(),t.TgZ(11,"np-card")(12,"np-card-body")(13,"b"),t._uU(14,"HTML"),t.qZA(),t.TgZ(15,"div")(16,"pre"),t._UZ(17,"code",2),t.qZA()()()(),t.TgZ(18,"np-card")(19,"np-card-body")(20,"table",3)(21,"tr")(22,"th"),t._uU(23,"Property"),t.qZA(),t.TgZ(24,"th"),t._uU(25,"Description"),t.qZA(),t.TgZ(26,"th"),t._uU(27,"Type"),t.qZA(),t.TgZ(28,"th"),t._uU(29,"Default"),t.qZA()(),t.TgZ(30,"tr")(31,"td"),t._uU(32,"header"),t.qZA(),t.TgZ(33,"td"),t._uU(34,"Header of list as plain text or html string"),t.qZA(),t.TgZ(35,"td"),t._uU(36,"string"),t.qZA(),t._UZ(37,"td"),t.qZA(),t.TgZ(38,"tr")(39,"td"),t._uU(40,"items"),t.qZA(),t.TgZ(41,"td"),t._uU(42,"Array of items"),t.qZA(),t.TgZ(43,"td"),t._uU(44,"any[]"),t.qZA(),t._UZ(45,"td"),t.qZA(),t.TgZ(46,"tr")(47,"td"),t._uU(48,"pageSize"),t.qZA(),t.TgZ(49,"td"),t._uU(50,"Set page size"),t.qZA(),t.TgZ(51,"td"),t._uU(52,"number"),t.qZA(),t._UZ(53,"td"),t.qZA(),t.TgZ(54,"tr")(55,"td"),t._uU(56,"itemHeight"),t.qZA(),t.TgZ(57,"td"),t._uU(58,"Set height of single element in px"),t.qZA(),t.TgZ(59,"td"),t._uU(60,"number"),t.qZA(),t._UZ(61,"td"),t.qZA(),t.TgZ(62,"tr")(63,"td"),t._uU(64,"template"),t.qZA(),t.TgZ(65,"td"),t._uU(66,"Item template to display for single item"),t.qZA(),t.TgZ(67,"td"),t._uU(68,"TemplateRef<any>"),t.qZA(),t._UZ(69,"td"),t.qZA(),t.TgZ(70,"tr")(71,"td"),t._uU(72,"styleClass"),t.qZA(),t.TgZ(73,"td"),t._uU(74,"Set extra class on component"),t.qZA(),t.TgZ(75,"td"),t._uU(76,"string"),t.qZA(),t._UZ(77,"td"),t.qZA(),t.TgZ(78,"tr")(79,"td"),t._uU(80,"inputId"),t.qZA(),t.TgZ(81,"td"),t._uU(82,"Set id attribute"),t.qZA(),t.TgZ(83,"td"),t._uU(84,"string"),t.qZA(),t._UZ(85,"td"),t.qZA()()()(),t.TgZ(86,"np-card")(87,"np-card-body")(88,"table",3)(89,"tr")(90,"th"),t._uU(91,"Method"),t.qZA(),t.TgZ(92,"th"),t._uU(93,"Description"),t.qZA(),t.TgZ(94,"th"),t._uU(95,"Parameters"),t.qZA()(),t.TgZ(96,"tr")(97,"td"),t._uU(98,"loadData({first: number, rows: pageSize})"),t.qZA(),t.TgZ(99,"td"),t._uU(100," Callback to load data event, fetch data in this method "),t._UZ(101,"br"),t._uU(102,"first is the index of first record in page, and rows is number of page size "),t.qZA(),t.TgZ(103,"td"),t._uU(104,"{first: number, rows: pageSize}"),t.qZA()()()()(),t.TgZ(105,"np-card")(106,"np-card-body")(107,"table",3)(108,"tr")(109,"th"),t._uU(110,"Api"),t.qZA(),t.TgZ(111,"th"),t._uU(112,"Description"),t.qZA(),t.TgZ(113,"th"),t._uU(114,"Parameters"),t.qZA()(),t.TgZ(115,"tr")(116,"td"),t._uU(117,"scrollToIndex(idx: number)"),t.qZA(),t.TgZ(118,"td"),t._uU(119,"Scroll to given index, index start with 0."),t.qZA(),t.TgZ(120,"td"),t._uU(121,"idx: number"),t.qZA()(),t.TgZ(122,"tr")(123,"td"),t._uU(124,"scrollToOffset(offset: number)"),t.qZA(),t.TgZ(125,"td"),t._uU(126," Scroll to given offset, offset is in px. "),t._UZ(127,"br"),t._uU(128," Use +offset to scroll down. Use -offset to scroll up. "),t.qZA(),t.TgZ(129,"td"),t._uU(130,"offset: number"),t.qZA()()()()(),t.TgZ(131,"np-card")(132,"np-card-body")(133,"b"),t._uU(134,"How to use loadData method?"),t.qZA(),t.TgZ(135,"pre")(136,"code"),t._uU(137),t.qZA()()()()(),t.TgZ(138,"np-tab",4),t.YNc(139,g,14,4,"ng-template",5),t.qZA()()),2&e&&(t.xp6(10),t.Q6J("innerText",o.importText),t.xp6(7),t.Q6J("innerText",o.htmlText),t.xp6(120),t.Oqu(o.loadDataText))},dependencies:[i.pY,i.KA,i.Qk,i.Bl,i.c0,i.El],encapsulation:2})}const T=[{path:"",component:s}];class p{static#t=this.\u0275fac=function(e){return new(e||p)};static#e=this.\u0275mod=t.oAB({type:p});static#a=this.\u0275inj=t.cJS({imports:[d.Bz.forChild(T),d.Bz]})}class c{static#t=this.\u0275fac=function(e){return new(e||c)};static#e=this.\u0275mod=t.oAB({type:c});static#a=this.\u0275inj=t.cJS({imports:[Z.ez,p,i.XJ,i.i7,i.Tk]})}}}]);