7081.969bfd3e86165c47.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[7081],{7081:(q,g,s)=>{s.r(g),s.d(g,{NpTabsDemoModule:()=>l});var u=s(6895),c=s(8379),t=s(4650),r=s(5499);const Z=["tabs"],T=["tabs2"];function b(i,o){1&i&&(t.TgZ(0,"h3"),t._uU(1,"Tab 1"),t.qZA(),t.TgZ(2,"p"),t._uU(3," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA())}function _(i,o){if(1&i&&(t._uU(0,"Tab2"),t.TgZ(1,"span",22),t._uU(2),t.qZA()),2&i){const e=t.oxw(2);t.xp6(2),t.Oqu(e.count)}}function h(i,o){1&i&&(t.TgZ(0,"h3"),t._uU(1,"Tab 2"),t.qZA(),t.TgZ(2,"p"),t._uU(3," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA())}function m(i,o){1&i&&(t.TgZ(0,"np-tab",8)(1,"h3"),t._uU(2,"Tab 4"),t.qZA(),t.TgZ(3,"p"),t._uU(4," A first paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(5,"p"),t._uU(6," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(7,"p"),t._uU(8," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(9,"p"),t._uU(10," A last paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA()()),2&i&&t.Q6J("title","Tab4")}function A(i,o){if(1&i){const e=t.EpF();t.TgZ(0,"fieldset")(1,"legend"),t._uU(2,"Tabs basic"),t.qZA(),t.TgZ(3,"np-tabs",6,7)(5,"np-tab",8),t.YNc(6,b,4,0,"ng-template",5),t.qZA(),t.TgZ(7,"np-tab",9),t.YNc(8,_,3,1,"ng-template",null,10,t.W1O),t.YNc(10,h,4,0,"ng-template",5),t.qZA(),t.TgZ(11,"np-tab",11)(12,"h3"),t._uU(13,"Tab 3"),t.qZA(),t.TgZ(14,"p"),t._uU(15," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA()(),t.YNc(16,m,11,1,"np-tab",12),t.qZA(),t.TgZ(17,"div",13)(18,"button",14),t.NdJ("click",function(){t.CHM(e);const a=t.MAs(4);return t.KtG(a.selectTabById("tab2"))}),t._uU(19," Open Tab 2 with Id "),t.qZA(),t.TgZ(20,"button",14),t.NdJ("click",function(){t.CHM(e);const a=t.oxw();return t.KtG(a.changeCount())}),t._uU(21," Change Title of Tab 2 "),t.qZA(),t.TgZ(22,"button",14),t.NdJ("click",function(){t.CHM(e);const a=t.oxw();return t.KtG(a.ToggleTab3Disabled())}),t._uU(23," Toggle Tab 3 disabled "),t.qZA(),t.TgZ(24,"button",14),t.NdJ("click",function(){t.CHM(e);const a=t.MAs(4);return t.KtG(a.selectTabByIndex(3))}),t._uU(25," Open 4th Tab by index "),t.qZA(),t.TgZ(26,"button",14),t.NdJ("click",function(){t.CHM(e);const a=t.oxw();return t.KtG(a.toggleTab4())}),t._uU(27," Add/Remove Tab 4 "),t.qZA()()(),t.TgZ(28,"fieldset")(29,"legend"),t._uU(30,"Stretch labels"),t.qZA(),t.TgZ(31,"np-tabs",15)(32,"np-tab",16),t._uU(33," Tab 1 content "),t.qZA(),t.TgZ(34,"np-tab",17),t._uU(35," Tab 2 content "),t.qZA(),t.TgZ(36,"np-tab",18),t._uU(37," Tab 3 content "),t.qZA()()(),t.TgZ(38,"fieldset")(39,"legend"),t._uU(40,"Vertical tabs"),t.qZA(),t.TgZ(41,"np-tabs",19,20),t.NdJ("onTabChange",function(a){t.CHM(e);const U=t.oxw();return t.KtG(U.onTabChange(a))}),t.TgZ(43,"np-tab",8)(44,"h3"),t._uU(45,"Tab 1 , Check console for isLoadFirstTime flag value."),t.qZA(),t.TgZ(46,"h4"),t._uU(47," This isLoadFirstTime flag is used to know tab is open for first time. This helps in loading data from cache. "),t.qZA(),t.TgZ(48,"p"),t._uU(49," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA()(),t.TgZ(50,"np-tab",21)(51,"h3"),t._uU(52,"Tab 2 , Check console for isLoadFirstTime flag value"),t.qZA(),t.TgZ(53,"h4"),t._uU(54," This isLoadFirstTime flag is used to know tab is open for first time. This helps in loading data from cache. "),t.qZA(),t.TgZ(55,"p"),t._uU(56," A first paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(57,"p"),t._uU(58," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(59,"p"),t._uU(60," A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA(),t.TgZ(61,"p"),t._uU(62," A last paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument. "),t.qZA()()()()}if(2&i){const e=t.MAs(9),n=t.oxw();t.xp6(3),t.Q6J("height",200),t.xp6(2),t.Q6J("title","Tab1"),t.xp6(2),t.Q6J("title",e)("inputId","tab2")("iconCss","fa fa-home"),t.xp6(4),t.Q6J("title","Tab3")("disabled",n.toggleTab3Disabled),t.xp6(5),t.Q6J("ngIf",n.isTab4Available),t.xp6(15),t.Q6J("stretchLabels",!0),t.xp6(10),t.Q6J("verticalTabs",!0)("height",200),t.xp6(2),t.Q6J("title","Tab1"),t.xp6(7),t.Q6J("title","Tab2 title")("active",!0)}}class p{constructor(){this.importText="import { NpTabsModule } from 'np-ui-lib';",this.htmlText='<np-tabs>\n  <np-tab title="Home">\n  </np-tab>\n  <np-tab title="Details">\n  </np-tab>\n  ...\n</np-tabs>',this.htmlLazyLoadText='<np-tab title="Home">\n  <ng-template npTabContent>\n    ...lazy load content\n  </ng-template\n</np-tab>',this.count=5,this.isTab4Available=!0,this.toggleTab3Disabled=!0}ngOnInit(){}onTabChange(o){console.log(`tab changed to ${o.title}, is load first time : ${o.isLoadFirstTime}`)}changeCount(){this.count++}toggleTab4(){this.isTab4Available=!this.isTab4Available}ToggleTab3Disabled(){this.toggleTab3Disabled=!this.toggleTab3Disabled}static#t=this.\u0275fac=function(e){return new(e||p)};static#e=this.\u0275cmp=t.Xpm({type:p,selectors:[["app-np-tabs-demo"]],viewQuery:function(e,n){if(1&e&&(t.Gf(Z,7),t.Gf(T,7)),2&e){let a;t.iGM(a=t.CRH())&&(n.tabs=a.first),t.iGM(a=t.CRH())&&(n.tabs2=a.first)}},decls:207,vars:3,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],["npTabContent",""],[3,"height"],["tabs",""],[3,"title"],[3,"title","inputId","iconCss"],["tab2Title",""],[3,"title","disabled"],[3,"title",4,"ngIf"],[1,"np-btn-group"],["type","button",1,"np-btn",3,"click"],[3,"stretchLabels"],["title","tab 1"],["title","tab 2"],["title","tab 3"],[3,"verticalTabs","height","onTabChange"],["tabs2",""],[3,"title","active"],[1,"np-badge","np-badge-primary"]],template:function(e,n){1&e&&(t.TgZ(0,"h2",0),t._uU(1,"Tabs"),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,"b"),t._uU(19,"How to set lazy loading for tab?"),t.qZA(),t.TgZ(20,"div")(21,"pre"),t._UZ(22,"code",2),t.qZA()()()(),t.TgZ(23,"np-card")(24,"np-card-body")(25,"b"),t._uU(26,"<np-tabs>"),t.qZA(),t.TgZ(27,"table",3)(28,"tr")(29,"th"),t._uU(30,"Property"),t.qZA(),t.TgZ(31,"th"),t._uU(32,"Description"),t.qZA(),t.TgZ(33,"th"),t._uU(34,"Type"),t.qZA(),t.TgZ(35,"th"),t._uU(36,"Default"),t.qZA()(),t.TgZ(37,"tr")(38,"td"),t._uU(39,"verticalTabs"),t.qZA(),t.TgZ(40,"td"),t._uU(41,"Set vertical tabs"),t.qZA(),t.TgZ(42,"td"),t._uU(43,"boolean"),t.qZA(),t.TgZ(44,"td"),t._uU(45,"false"),t.qZA()(),t.TgZ(46,"tr")(47,"td"),t._uU(48,"stretchLabels"),t.qZA(),t.TgZ(49,"td"),t._uU(50,"Set stretched header label"),t.qZA(),t.TgZ(51,"td"),t._uU(52,"boolean"),t.qZA(),t.TgZ(53,"td"),t._uU(54,"false"),t.qZA()(),t.TgZ(55,"tr")(56,"td"),t._uU(57,"height"),t.qZA(),t.TgZ(58,"td"),t._uU(59,"Set height of tabs in px"),t.qZA(),t.TgZ(60,"td"),t._uU(61,"number"),t.qZA(),t._UZ(62,"td"),t.qZA(),t.TgZ(63,"tr")(64,"td"),t._uU(65,"styleClass"),t.qZA(),t.TgZ(66,"td"),t._uU(67,"Set extra class on component"),t.qZA(),t.TgZ(68,"td"),t._uU(69,"string"),t.qZA(),t._UZ(70,"td"),t.qZA(),t.TgZ(71,"tr")(72,"td"),t._uU(73,"inputId"),t.qZA(),t.TgZ(74,"td"),t._uU(75,"Set id attribute"),t.qZA(),t.TgZ(76,"td"),t._uU(77,"string"),t.qZA(),t._UZ(78,"td"),t.qZA()()()(),t.TgZ(79,"np-card")(80,"np-card-body")(81,"b"),t._uU(82,"<np-tab>"),t.qZA(),t.TgZ(83,"table",3)(84,"tr")(85,"th"),t._uU(86,"Property"),t.qZA(),t.TgZ(87,"th"),t._uU(88,"Description"),t.qZA(),t.TgZ(89,"th"),t._uU(90,"Type"),t.qZA(),t.TgZ(91,"th"),t._uU(92,"Default"),t.qZA()(),t.TgZ(93,"tr")(94,"td"),t._uU(95,"title"),t.qZA(),t.TgZ(96,"td"),t._uU(97,"Set title for tab"),t.qZA(),t.TgZ(98,"td"),t._uU(99,"string | TemplateRef<any>"),t.qZA(),t._UZ(100,"td"),t.qZA(),t.TgZ(101,"tr")(102,"td"),t._uU(103,"active"),t.qZA(),t.TgZ(104,"td"),t._uU(105," Get/Set flag for current active tab, only one tab will be active at a time "),t.qZA(),t.TgZ(106,"td"),t._uU(107,"boolean"),t.qZA(),t._UZ(108,"td"),t.qZA(),t.TgZ(109,"tr")(110,"td"),t._uU(111,"disabled"),t.qZA(),t.TgZ(112,"td"),t._uU(113,"Set tab as disabled"),t.qZA(),t.TgZ(114,"td"),t._uU(115,"boolean"),t.qZA(),t.TgZ(116,"td"),t._uU(117,"false"),t.qZA()(),t.TgZ(118,"tr")(119,"td"),t._uU(120,"iconCss"),t.qZA(),t.TgZ(121,"td"),t._uU(122,"Set CSS for icon like 'fa fa-home'"),t.qZA(),t.TgZ(123,"td"),t._uU(124,"string"),t.qZA(),t._UZ(125,"td"),t.qZA(),t.TgZ(126,"tr")(127,"td"),t._uU(128,"isLoadFirstTime"),t.qZA(),t.TgZ(129,"td"),t._uU(130," Internal property, will be true on loading tab first time, after that will be set to false "),t._UZ(131,"br"),t._uU(132," Helpful while making lazy loading tabs, and fetching data on click of tab "),t.qZA(),t.TgZ(133,"td"),t._uU(134,"string"),t.qZA(),t._UZ(135,"td"),t.qZA(),t.TgZ(136,"tr")(137,"td"),t._uU(138,"inputId"),t.qZA(),t.TgZ(139,"td"),t._uU(140,"Set id attribute"),t.qZA(),t.TgZ(141,"td"),t._uU(142,"string"),t.qZA(),t._UZ(143,"td"),t.qZA()()()(),t.TgZ(144,"np-card")(145,"np-card-body")(146,"b"),t._uU(147,"<np-tabs>"),t.qZA(),t.TgZ(148,"table",3)(149,"tr")(150,"th"),t._uU(151,"Method"),t.qZA(),t.TgZ(152,"th"),t._uU(153,"Description"),t.qZA(),t.TgZ(154,"th"),t._uU(155,"Parameters"),t.qZA()(),t.TgZ(156,"tr")(157,"td"),t._uU(158,"onTabChange(tab: NpTabComponent)"),t.qZA(),t.TgZ(159,"td"),t._uU(160," Callback event on change of tab"),t._UZ(161,"br"),t.TgZ(162,"b"),t._uU(163,"isLoadFirstTime"),t.qZA(),t._uU(164," property of tab is used here to add lazy loading in tabs "),t.qZA(),t.TgZ(165,"td"),t._uU(166,"tab: NpTabComponent"),t.qZA()()()()(),t.TgZ(167,"np-card")(168,"np-card-body")(169,"b"),t._uU(170,"<np-tabs>"),t.qZA(),t.TgZ(171,"table",3)(172,"tr")(173,"th"),t._uU(174,"Api"),t.qZA(),t.TgZ(175,"th"),t._uU(176,"Description"),t.qZA(),t.TgZ(177,"th"),t._uU(178,"Parameters"),t.qZA()(),t.TgZ(179,"tr")(180,"td"),t._uU(181,"selectTabByIndex(idx: number)"),t.qZA(),t.TgZ(182,"td"),t._uU(183,"Open tab by index, start with 0"),t.qZA(),t.TgZ(184,"td"),t._uU(185,"idx: number"),t.qZA()(),t.TgZ(186,"tr")(187,"td"),t._uU(188,"selectTabById(id: string)"),t.qZA(),t.TgZ(189,"td"),t._uU(190,"Open tab by inputId"),t.qZA(),t.TgZ(191,"td"),t._uU(192,"id: string"),t.qZA()(),t.TgZ(193,"tr")(194,"td"),t._uU(195,"getSelectedTabIndex()"),t.qZA(),t.TgZ(196,"td"),t._uU(197,"Get selected tab index"),t.qZA(),t._UZ(198,"td"),t.qZA(),t.TgZ(199,"tr")(200,"td"),t._uU(201,"getSelectedTab()"),t.qZA(),t.TgZ(202,"td"),t._uU(203,"Get selected tab"),t.qZA(),t._UZ(204,"td"),t.qZA()()()()(),t.TgZ(205,"np-tab",4),t.YNc(206,A,63,14,"ng-template",5),t.qZA()()),2&e&&(t.xp6(10),t.Q6J("innerText",n.importText),t.xp6(7),t.Q6J("innerText",n.htmlText),t.xp6(5),t.Q6J("innerText",n.htmlLazyLoadText))},dependencies:[u.O5,r.KA,r.Qk,r.Bl,r.c0,r.El],encapsulation:2})}const f=[{path:"",component:p}];class d{static#t=this.\u0275fac=function(e){return new(e||d)};static#e=this.\u0275mod=t.oAB({type:d});static#a=this.\u0275inj=t.cJS({imports:[c.Bz.forChild(f),c.Bz]})}class l{static#t=this.\u0275fac=function(e){return new(e||l)};static#e=this.\u0275mod=t.oAB({type:l});static#a=this.\u0275inj=t.cJS({imports:[u.ez,d,r.i7,r.Tk]})}}}]);