6111.124c4199c6a989be.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[6111],{6111:(f,g,r)=>{r.r(g),r.d(g,{NpAccordionDemoModule:()=>c});var m=r(6895),Z=r(8379),e=r(4650),u=r(433),a=r(5499);const h=["accordionDemo"];function A(p,n){1&p&&(e._UZ(0,"i",17),e._uU(1,"Paragraph 1 "))}function T(p,n){1&p&&(e.TgZ(0,"p"),e._uU(1," A paragraph 1 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. "),e.qZA())}function _(p,n){1&p&&(e.TgZ(0,"p"),e._uU(1," A paragraph 2 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. "),e.qZA())}class s{constructor(){this.importText="import { NpAccordionModule } from 'np-ui-lib';",this.htmlText='<np-accordion>\n  <np-accordion-item [title]="\'Details\'" [isOpen]="true">\n      Panel 1 Content\n  </np-accordion-item>\n  <np-accordion-item [title]="\'Specifications\'">\n    Panel 2 Content\n  </np-accordion-item>\n  ...\n</np-accordion>',this.lazyLoadText="<np-accordion-item [title]=\"'Details'\">\n  <ng-template npAccordionContent>\n  ...lazy load content\n  </ng-tempalte>\n</np-accordion-item>",this.allowMultipleOpen=!1,this.item2Disabled=!1}ngOnInit(){}openItem2(){this.accordionDemo.expandById("item2")}openItem3(){this.accordionDemo.expandByIndex(2)}toggleItem2Disabled(){this.item2Disabled=!this.item2Disabled}onExpand(n){console.log(`Expand item ${n.inputId}`)}onCollapse(n){console.log(`Collpase item ${n.inputId}`)}static#e=this.\u0275fac=function(o){return new(o||s)};static#t=this.\u0275cmp=e.Xpm({type:s,selectors:[["app-np-accordion-demo"]],viewQuery:function(o,t){if(1&o&&e.Gf(h,7),2&o){let i;e.iGM(i=e.CRH())&&(t.accordionDemo=i.first)}},decls:261,vars:21,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],[3,"title","isOpen"],[3,"defaultOpenIndex","allowMultipleOpen","onExpand","onCollapse"],["accordionDemo",""],["inputId","item1",3,"title"],["para1Header",""],["npAccordionContent",""],["inputId","item2",3,"title","disabled","iconCss"],["inputId","item3",3,"title","height","iconCss"],[3,"title"],[3,"ngModel","ngModelChange"],[1,"np-btn-group"],[1,"np-btn",3,"click"],[1,"fa","fa-home"]],template:function(o,t){if(1&o&&(e.TgZ(0,"h2",0),e._uU(1,"Accordion"),e.qZA(),e.TgZ(2,"np-tabs")(3,"np-tab",1)(4,"np-card")(5,"np-card-body")(6,"b"),e._uU(7,"Module to import"),e.qZA(),e.TgZ(8,"div")(9,"pre"),e._UZ(10,"code",2),e.qZA()()()(),e.TgZ(11,"np-card")(12,"np-card-body")(13,"b"),e._uU(14,"HTML"),e.qZA(),e.TgZ(15,"div")(16,"pre"),e._UZ(17,"code",2),e.qZA()(),e.TgZ(18,"b"),e._uU(19,"How to set lazy loading for accordion?"),e.qZA(),e.TgZ(20,"div")(21,"pre"),e._UZ(22,"code",2),e.qZA()()()(),e.TgZ(23,"np-card")(24,"np-card-body")(25,"b"),e._uU(26,"<np-accordion>"),e.qZA(),e.TgZ(27,"table",3)(28,"tr")(29,"th"),e._uU(30,"Property"),e.qZA(),e.TgZ(31,"th"),e._uU(32,"Description"),e.qZA(),e.TgZ(33,"th"),e._uU(34,"Type"),e.qZA(),e.TgZ(35,"th"),e._uU(36,"Default"),e.qZA()(),e.TgZ(37,"tr")(38,"td"),e._uU(39,"defaultOpenIndex"),e.qZA(),e.TgZ(40,"td"),e._uU(41,"Set which panel will be default open at load time"),e.qZA(),e.TgZ(42,"td"),e._uU(43,"number"),e.qZA(),e._UZ(44,"td"),e.qZA(),e.TgZ(45,"tr")(46,"td"),e._uU(47,"allowMultipleOpen"),e.qZA(),e.TgZ(48,"td"),e._uU(49," Allow multiple panels to be open, if set to false, then when open new panel, other panels will be close "),e.qZA(),e.TgZ(50,"td"),e._uU(51,"boolean"),e.qZA(),e.TgZ(52,"td"),e._uU(53,"false"),e.qZA()(),e.TgZ(54,"tr")(55,"td"),e._uU(56,"styleClass"),e.qZA(),e.TgZ(57,"td"),e._uU(58,"Set extra class on component"),e.qZA(),e.TgZ(59,"td"),e._uU(60,"string"),e.qZA(),e._UZ(61,"td"),e.qZA(),e.TgZ(62,"tr")(63,"td"),e._uU(64,"inputId"),e.qZA(),e.TgZ(65,"td"),e._uU(66,"Set id attribute"),e.qZA(),e.TgZ(67,"td"),e._uU(68,"string"),e.qZA(),e._UZ(69,"td"),e.qZA()()()(),e.TgZ(70,"np-card")(71,"np-card-body")(72,"b"),e._uU(73,"<np-accordion-item>"),e.qZA(),e.TgZ(74,"table",3)(75,"tr")(76,"th"),e._uU(77,"Property"),e.qZA(),e.TgZ(78,"th"),e._uU(79,"Description"),e.qZA(),e.TgZ(80,"th"),e._uU(81,"Type"),e.qZA(),e.TgZ(82,"th"),e._uU(83,"Default"),e.qZA()(),e.TgZ(84,"tr")(85,"td"),e._uU(86,"title"),e.qZA(),e.TgZ(87,"td"),e._uU(88,"Title of panel"),e.qZA(),e.TgZ(89,"td"),e._uU(90,"string | TemplateRef <any>"),e.qZA(),e._UZ(91,"td"),e.qZA(),e.TgZ(92,"tr")(93,"td"),e._uU(94,"isOpen"),e.qZA(),e.TgZ(95,"td"),e._uU(96,"Set default open"),e.qZA(),e.TgZ(97,"td"),e._uU(98,"boolean"),e.qZA(),e.TgZ(99,"td"),e._uU(100,"false"),e.qZA()(),e.TgZ(101,"tr")(102,"td"),e._uU(103,"height"),e.qZA(),e.TgZ(104,"td"),e._uU(105,"Set height for accordion item in px"),e.qZA(),e.TgZ(106,"td"),e._uU(107,"number"),e.qZA(),e._UZ(108,"td"),e.qZA(),e.TgZ(109,"tr")(110,"td"),e._uU(111,"disabled"),e.qZA(),e.TgZ(112,"td"),e._uU(113,"Set disabled"),e.qZA(),e.TgZ(114,"td"),e._uU(115,"boolean"),e.qZA(),e.TgZ(116,"td"),e._uU(117,"false"),e.qZA()(),e.TgZ(118,"tr")(119,"td"),e._uU(120,"iconCss"),e.qZA(),e.TgZ(121,"td"),e._uU(122,"Set CSS for icon like 'fa fa-home'"),e.qZA(),e.TgZ(123,"td"),e._uU(124,"string"),e.qZA(),e._UZ(125,"td"),e.qZA(),e.TgZ(126,"tr")(127,"td"),e._uU(128,"styleClass"),e.qZA(),e.TgZ(129,"td"),e._uU(130,"Set extra class on component"),e.qZA(),e.TgZ(131,"td"),e._uU(132,"string"),e.qZA(),e._UZ(133,"td"),e.qZA(),e.TgZ(134,"tr")(135,"td"),e._uU(136,"inputId"),e.qZA(),e.TgZ(137,"td"),e._uU(138,"Set id attribute"),e.qZA(),e.TgZ(139,"td"),e._uU(140,"string"),e.qZA(),e._UZ(141,"td"),e.qZA()()()(),e.TgZ(142,"np-card")(143,"np-card-body")(144,"b"),e._uU(145,"<np-accordion>"),e.qZA(),e.TgZ(146,"table",3)(147,"tr")(148,"th"),e._uU(149,"Method"),e.qZA(),e.TgZ(150,"th"),e._uU(151,"Description"),e.qZA(),e.TgZ(152,"th"),e._uU(153,"Parameters"),e.qZA()(),e.TgZ(154,"tr")(155,"td"),e._uU(156,"onExpand($event)"),e.qZA(),e.TgZ(157,"td"),e._uU(158,"Callback on expanding panel."),e.qZA(),e.TgZ(159,"td"),e._uU(160,"$event"),e.qZA()(),e.TgZ(161,"tr")(162,"td"),e._uU(163,"onCollapse($event)"),e.qZA(),e.TgZ(164,"td"),e._uU(165,"Callback on collapsing panel."),e.qZA(),e.TgZ(166,"td"),e._uU(167,"$event"),e.qZA()()()()(),e.TgZ(168,"np-card")(169,"np-card-body")(170,"b"),e._uU(171,"<np-accordion>"),e.qZA(),e.TgZ(172,"table",3)(173,"tr")(174,"th"),e._uU(175,"Api"),e.qZA(),e.TgZ(176,"th"),e._uU(177,"Description"),e.qZA(),e.TgZ(178,"th"),e._uU(179,"Parameters"),e.qZA()(),e.TgZ(180,"tr")(181,"td"),e._uU(182,"expandByIndex(idx: number)"),e.qZA(),e.TgZ(183,"td"),e._uU(184,"Expand by index, start with 0."),e.qZA(),e.TgZ(185,"td"),e._uU(186,"idx: number"),e.qZA()(),e.TgZ(187,"tr")(188,"td"),e._uU(189,"expandById(id: string)"),e.qZA(),e.TgZ(190,"td"),e._uU(191,"Expand by inputId of panel."),e.qZA(),e.TgZ(192,"td"),e._uU(193,"id: string"),e.qZA()(),e.TgZ(194,"tr")(195,"td"),e._uU(196,"collapseByIndex(idx: number)"),e.qZA(),e.TgZ(197,"td"),e._uU(198,"Collapse by index, start with 0."),e.qZA(),e.TgZ(199,"td"),e._uU(200,"idx: number"),e.qZA()(),e.TgZ(201,"tr")(202,"td"),e._uU(203,"collapseById(id: string)"),e.qZA(),e.TgZ(204,"td"),e._uU(205,"Collapse by inputId of panel."),e.qZA(),e.TgZ(206,"td"),e._uU(207,"id: string"),e.qZA()()()()()(),e.TgZ(208,"np-tab",4)(209,"fieldset")(210,"legend"),e._uU(211,"Basic"),e.qZA(),e.TgZ(212,"np-accordion")(213,"np-accordion-item",5)(214,"p"),e._uU(215,"Content A"),e.qZA()(),e.TgZ(216,"np-accordion-item",5)(217,"p"),e._uU(218,"Content B"),e.qZA()(),e.TgZ(219,"np-accordion-item",5)(220,"p"),e._uU(221,"Content C"),e.qZA()()()(),e.TgZ(222,"fieldset")(223,"np-accordion",6,7),e.NdJ("onExpand",function(d){return t.onExpand(d)})("onCollapse",function(d){return t.onCollapse(d)}),e.TgZ(225,"np-accordion-item",8),e.YNc(226,A,2,0,"ng-template",null,9,e.W1O),e.YNc(228,T,2,0,"ng-template",10),e.qZA(),e.TgZ(229,"np-accordion-item",11),e.YNc(230,_,2,0,"ng-template",10),e.qZA(),e.TgZ(231,"np-accordion-item",12)(232,"np-accordion")(233,"np-accordion-item",13)(234,"p"),e._uU(235," 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. "),e.qZA(),e.TgZ(236,"p"),e._uU(237," 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. "),e.qZA(),e.TgZ(238,"p"),e._uU(239," 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. "),e.qZA(),e.TgZ(240,"p"),e._uU(241," 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. "),e.qZA()(),e.TgZ(242,"np-accordion-item",13)(243,"p"),e._uU(244," 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. "),e.qZA(),e.TgZ(245,"p"),e._uU(246," 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. "),e.qZA(),e.TgZ(247,"p"),e._uU(248," 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. "),e.qZA(),e.TgZ(249,"p"),e._uU(250," 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. "),e.qZA()()()()(),e.TgZ(251,"p"),e._uU(252," Allow multiple panels to be open: "),e.TgZ(253,"np-switch",14),e.NdJ("ngModelChange",function(d){return t.allowMultipleOpen=d}),e.qZA()(),e.TgZ(254,"div",15)(255,"button",16),e.NdJ("click",function(){return t.toggleItem2Disabled()}),e._uU(256," Toggle paragraph 2's disabled flag "),e.qZA(),e.TgZ(257,"button",16),e.NdJ("click",function(){return t.openItem2()}),e._uU(258," Open paragraph 2 by Id "),e.qZA(),e.TgZ(259,"button",16),e.NdJ("click",function(){return t.openItem3()}),e._uU(260," Open paragraph 3 by index "),e.qZA()()()()()),2&o){const i=e.MAs(227);e.xp6(10),e.Q6J("innerText",t.importText),e.xp6(7),e.Q6J("innerText",t.htmlText),e.xp6(5),e.Q6J("innerText",t.lazyLoadText),e.xp6(191),e.Q6J("title","Title A")("isOpen",!0),e.xp6(3),e.Q6J("title","Title B")("isOpen",!1),e.xp6(3),e.Q6J("title","Title C")("isOpen",!1),e.xp6(4),e.Q6J("defaultOpenIndex",1)("allowMultipleOpen",t.allowMultipleOpen),e.xp6(2),e.Q6J("title",i),e.xp6(4),e.Q6J("title","Paragraph 2")("disabled",t.item2Disabled)("iconCss","fa fa-bars"),e.xp6(2),e.Q6J("title","Paragraph 3")("height",200)("iconCss","fa fa-table"),e.xp6(2),e.Q6J("title","Paragraph 3.1"),e.xp6(9),e.Q6J("title","Paragraph 3.2"),e.xp6(11),e.Q6J("ngModel",t.allowMultipleOpen)}},dependencies:[u.JJ,u.On,a.Xq,a.wA,a.Tc,a.Mc,a.KA,a.Qk,a.c0,a.El],encapsulation:2})}const U=[{path:"",component:s}];class l{static#e=this.\u0275fac=function(o){return new(o||l)};static#t=this.\u0275mod=e.oAB({type:l});static#a=this.\u0275inj=e.cJS({imports:[Z.Bz.forChild(U),Z.Bz]})}class c{static#e=this.\u0275fac=function(o){return new(o||c)};static#t=this.\u0275mod=e.oAB({type:c});static#a=this.\u0275inj=e.cJS({imports:[m.ez,u.u5,l,a.w6,a.Mq,a.kH,a.i7,a.Tk]})}}}]);