863.10ee3a37b9d77a38.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[863],{863:(f,m,a)=>{a.r(m),a.d(m,{NpTimelineDemoModule:()=>l});var d=a(6895),c=a(8379),e=a(4650),i=a(5499);function Z(n,s){if(1&n&&(e.TgZ(0,"h3"),e._uU(1),e.qZA(),e._UZ(2,"p",2)),2&n){const t=s.item;e.xp6(1),e.Oqu(t.year),e.xp6(1),e.Q6J("innerText",t.desc)}}function u(n,s){1&n&&e._UZ(0,"p",2),2&n&&e.Q6J("innerText",s.item)}class r{constructor(){this.importText="import { NpTimelineModule } from 'np-ui-lib';",this.htmlText='<np-timeline [items]="items" [itemTemplate]="timelineTemp"></np-timeline>\n<ng-template #timelineTemp let-item="item">\n  <h3>{{item.year}}</h3>\n  <p [innerText]="item.desc"></p>\n</ng-template>',this.itemSample="items = [{\n    iconCss: 'fa fa-check',\n    styleClass: 'success',\n    ...  \n  }, ...];",this.items=[{iconCss:"fa fa-check",year:2015,desc:"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."},{iconCss:"fa fa-check",styleClass:"success",year:2016,desc:"A paragraph is a series of related sentences developing a central idea, called the topic."},{iconCss:"fa fa-times",styleClass:"in-progress",year:2017,desc:"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."}],this.orderItems=["Order placed","Order confirmed","Order shipped","Order delivered"]}ngOnInit(){}static#e=this.\u0275fac=function(t){return new(t||r)};static#t=this.\u0275cmp=e.Xpm({type:r,selectors:[["app-np-timeline-demo"]],decls:88,vars:10,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],[3,"items","itemTemplate"],["timelineTemp",""],[3,"items","itemTemplate","height","styleClass","inputId"],["orderTemp",""]],template:function(t,p){if(1&t&&(e.TgZ(0,"h2",0),e._uU(1,"Timeline"),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,"np-card")(19,"np-card-body")(20,"table",3)(21,"tr")(22,"th"),e._uU(23,"Property"),e.qZA(),e.TgZ(24,"th"),e._uU(25,"Description"),e.qZA(),e.TgZ(26,"th"),e._uU(27,"Type"),e.qZA(),e.TgZ(28,"th"),e._uU(29,"Default"),e.qZA()(),e.TgZ(30,"tr")(31,"td"),e._uU(32,"items"),e.qZA(),e.TgZ(33,"td"),e._uU(34,"Array of items"),e._UZ(35,"br"),e._uU(36," Pass iconCss to add icon for specific item. Pass styleClass to add CSS class on specific item. "),e.TgZ(37,"pre"),e._UZ(38,"code",2),e.qZA()(),e.TgZ(39,"td"),e._uU(40,"any[]"),e.qZA(),e.TgZ(41,"td"),e._uU(42,"false"),e.qZA()(),e.TgZ(43,"tr")(44,"td"),e._uU(45,"itemTemplate"),e.qZA(),e.TgZ(46,"td"),e._uU(47,'Template to display item, with variable let-item="item"'),e.qZA(),e.TgZ(48,"td"),e._uU(49,"TemplateRef<any>"),e.qZA(),e._UZ(50,"td"),e.qZA(),e.TgZ(51,"tr")(52,"td"),e._uU(53,"height"),e.qZA(),e.TgZ(54,"td"),e._uU(55,"Set height of list in px"),e.qZA(),e.TgZ(56,"td"),e._uU(57,"number"),e.qZA(),e._UZ(58,"td"),e.qZA(),e.TgZ(59,"tr")(60,"td"),e._uU(61,"styleClass"),e.qZA(),e.TgZ(62,"td"),e._uU(63,"Set extra class on component"),e.qZA(),e.TgZ(64,"td"),e._uU(65,"string"),e.qZA(),e._UZ(66,"td"),e.qZA(),e.TgZ(67,"tr")(68,"td"),e._uU(69,"inputId"),e.qZA(),e.TgZ(70,"td"),e._uU(71,"Set id attribute"),e.qZA(),e.TgZ(72,"td"),e._uU(73,"string"),e.qZA(),e._UZ(74,"td"),e.qZA()()()()(),e.TgZ(75,"np-tab",4)(76,"fieldset")(77,"legend"),e._uU(78,"Basic"),e.qZA(),e._UZ(79,"np-timeline",5),e.YNc(80,Z,3,2,"ng-template",null,6,e.W1O),e.qZA(),e.TgZ(82,"fieldset")(83,"legend"),e._uU(84,"height + styleClass + inputId"),e.qZA(),e._UZ(85,"np-timeline",7),e.YNc(86,u,1,1,"ng-template",null,8,e.W1O),e.qZA()()()),2&t){const g=e.MAs(81),h=e.MAs(87);e.xp6(10),e.Q6J("innerText",p.importText),e.xp6(7),e.Q6J("innerText",p.htmlText),e.xp6(21),e.Q6J("innerText",p.itemSample),e.xp6(41),e.Q6J("items",p.items)("itemTemplate",g),e.xp6(6),e.Q6J("items",p.orderItems)("itemTemplate",h)("height",200)("styleClass","myClass")("inputId","orderTimeline")}},dependencies:[i.mj,i.KA,i.Qk,i.c0,i.El],encapsulation:2})}const T=[{path:"",component:r}];class o{static#e=this.\u0275fac=function(t){return new(t||o)};static#t=this.\u0275mod=e.oAB({type:o});static#i=this.\u0275inj=e.cJS({imports:[c.Bz.forChild(T),c.Bz]})}class l{static#e=this.\u0275fac=function(t){return new(t||l)};static#t=this.\u0275mod=e.oAB({type:l});static#i=this.\u0275inj=e.cJS({imports:[d.ez,o,i.n1,i.i7,i.Tk]})}}}]);