7434.8919ff28f68265e8.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[7434],{7434:(q,u,r)=>{r.r(u),r.d(u,{NpDropdownDemoModule:()=>g});var s=r(6895),m=r(8379),e=r(4650),l=r(433),a=r(5499);function T(_,i){if(1&_&&(e.TgZ(0,"div"),e._uU(1),e.qZA()),2&_){const o=i.item;e.xp6(1),e.AsE("",o.name," ( ",o.vitamin," )")}}class p{constructor(){this.importText="import { NpDropdownModule } from 'np-ui-lib';",this.htmlText='<np-dropdown [(ngModel)]="value" [items]="data"></np-dropdown>',this.templateText='<ng-template #itemTemplate let-item="item">\n  <span [innerHTML]="item.name></span><span> ({{item.id}})</span>\n</ng-template>',this.data=["Apple","Banana","Orange","Mango","Graps","Strawberry","Watermelon","Kiwi","Blackberries","Blueberries","Cherries","Cranberries","Guava","Java-Plum","Lychee","Papaya"],this.dataFull=[{id:1,name:"Apple",vitamin:"A, B1, B6"},{id:2,name:"Banana",vitamin:"A, B1, B6"},{id:3,name:"Orange",vitamin:"C, Folate, Potassium"},{id:4,name:"Mango",vitamin:"A, C"},{id:5,name:"Grapes",vitamin:"C"},{id:6,name:"Strawberry",vitamin:"iron, copper, B6"},{id:7,name:"Watermelon",vitamin:" A, B6 and C"},{id:8,name:"Kiwi",vitamin:"C, K , E"},{id:9,name:"Blackberries",vitamin:"Folate, Magnesium, C"},{id:10,name:"Blueberries",vitamin:"Folate, Magnesium, C"},{id:11,name:"Cherries",vitamin:"A and folic acid"},{id:12,name:"Cranberries",vitamin:"C, E, and K1"},{id:13,name:"Guava",vitamin:"C"},{id:14,name:"Java-Plum",vitamin:"A, K"},{id:15,name:"Lychee",vitamin:"C, B"},{id:16,name:"Papaya",vitamin:"C and fiber"}],this.dropdownVal1="Mango",this.dropdownVal4="Mango",this.dropdownVal7="Mango",this.dropdownVal8=3}ngOnInit(){}changeValue(){this.dropdownVal1="Banana"}onChange(i){alert(i)}static#e=this.\u0275fac=function(o){return new(o||p)};static#n=this.\u0275cmp=e.Xpm({type:p,selectors:[["app-np-dropdown-demo"]],decls:261,vars:44,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],[3,"ngModel","items","orderDir","ngModelChange"],[1,"np-btn",3,"click"],[3,"ngModel","items","displayKey","orderBy","orderDir","ngModelChange"],[3,"ngModel","items","displayKey","valueKey","ngModelChange"],[3,"ngModel","items","required","placeholder","ngModelChange"],[3,"ngModel","items","disabled","ngModelChange"],[3,"ngModel","items","readOnly","ngModelChange"],[3,"ngModel","items","displayKey","itemTemplate","ngModelChange"],["itemTemplate",""],[3,"ngModel","valueKey","displayKey","items","ngModelChange","onChange"],[3,"ngModel","items","styleClass","ngModelChange"]],template:function(o,n){if(1&o&&(e.TgZ(0,"h2",0),e._uU(1,"Dropdown"),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,"ngModel"),e.qZA(),e.TgZ(33,"td"),e._uU(34,"Value"),e.qZA(),e.TgZ(35,"td"),e._uU(36,"any"),e.qZA(),e._UZ(37,"td"),e.qZA(),e.TgZ(38,"tr")(39,"td"),e._uU(40,"items"),e.qZA(),e.TgZ(41,"td"),e._uU(42,"Array of data"),e.qZA(),e.TgZ(43,"td"),e._uU(44,"any[]"),e.qZA(),e._UZ(45,"td"),e.qZA(),e.TgZ(46,"tr")(47,"td"),e._uU(48,"displayKey"),e.qZA(),e.TgZ(49,"td"),e._uU(50," If "),e.TgZ(51,"b"),e._uU(52,"items"),e.qZA(),e._uU(53," is type of any[], then set property name which needs to display in dropdown. "),e.qZA(),e.TgZ(54,"td"),e._uU(55,"string"),e.qZA(),e._UZ(56,"td"),e.qZA(),e.TgZ(57,"tr")(58,"td"),e._uU(59,"valueKey"),e.qZA(),e.TgZ(60,"td"),e._uU(61," If "),e.TgZ(62,"b"),e._uU(63,"items"),e.qZA(),e._uU(64," is type of any[], then set unique property name which needs to be value in dropdown. "),e.qZA(),e.TgZ(65,"td"),e._uU(66,"string"),e.qZA(),e._UZ(67,"td"),e.qZA(),e.TgZ(68,"tr")(69,"td"),e._uU(70,"itemTemplate"),e.qZA(),e.TgZ(71,"td"),e._uU(72,' Set template for item. Use var let-item="item" in template to access item. '),e.TgZ(73,"pre")(74,"code"),e._uU(75),e.qZA()()(),e.TgZ(76,"td"),e._uU(77,"TemplateRef<any>"),e.qZA(),e._UZ(78,"td"),e.qZA(),e.TgZ(79,"tr")(80,"td"),e._uU(81,"orderBy"),e.qZA(),e.TgZ(82,"td"),e._uU(83,"Set order by property"),e.qZA(),e.TgZ(84,"td"),e._uU(85,"string"),e.qZA(),e._UZ(86,"td"),e.qZA(),e.TgZ(87,"tr")(88,"td"),e._uU(89,"orderDir"),e.qZA(),e.TgZ(90,"td"),e._uU(91," Set order direction 'asc' or 'desc'. Default value is 'asc'. "),e._UZ(92,"br"),e._uU(93," If data is type of string[], then only use orderDir. "),e.qZA(),e.TgZ(94,"td"),e._uU(95,"string"),e.qZA(),e._UZ(96,"td"),e.qZA(),e.TgZ(97,"tr")(98,"td"),e._uU(99,"placeholder"),e.qZA(),e.TgZ(100,"td"),e._uU(101,"Set placeholder"),e.qZA(),e.TgZ(102,"td"),e._uU(103,"string"),e.qZA(),e._UZ(104,"td"),e.qZA(),e.TgZ(105,"tr")(106,"td"),e._uU(107,"disabled"),e.qZA(),e.TgZ(108,"td"),e._uU(109,"Set disabled"),e.qZA(),e.TgZ(110,"td"),e._uU(111,"boolean"),e.qZA(),e.TgZ(112,"td"),e._uU(113,"false"),e.qZA()(),e.TgZ(114,"tr")(115,"td"),e._uU(116,"required"),e.qZA(),e.TgZ(117,"td"),e._uU(118,"Set required"),e.qZA(),e.TgZ(119,"td"),e._uU(120,"boolean"),e.qZA(),e.TgZ(121,"td"),e._uU(122,"false"),e.qZA()(),e.TgZ(123,"tr")(124,"td"),e._uU(125,"readOnly"),e.qZA(),e.TgZ(126,"td"),e._uU(127,"Set readonly"),e.qZA(),e.TgZ(128,"td"),e._uU(129,"boolean"),e.qZA(),e.TgZ(130,"td"),e._uU(131,"false"),e.qZA()(),e.TgZ(132,"tr")(133,"td"),e._uU(134,"autoFocus"),e.qZA(),e.TgZ(135,"td"),e._uU(136,"Set autofocus"),e.qZA(),e.TgZ(137,"td"),e._uU(138,"boolean"),e.qZA(),e.TgZ(139,"td"),e._uU(140,"false"),e.qZA()(),e.TgZ(141,"tr")(142,"td"),e._uU(143,"tabIndex"),e.qZA(),e.TgZ(144,"td"),e._uU(145,"Set tabindex attribute"),e.qZA(),e.TgZ(146,"td"),e._uU(147,"number"),e.qZA(),e._UZ(148,"td"),e.qZA(),e.TgZ(149,"tr")(150,"td"),e._uU(151,"styleClass"),e.qZA(),e.TgZ(152,"td"),e._uU(153,"Set extra class on component"),e.qZA(),e.TgZ(154,"td"),e._uU(155,"string"),e.qZA(),e._UZ(156,"td"),e.qZA(),e.TgZ(157,"tr")(158,"td"),e._uU(159,"inputId"),e.qZA(),e.TgZ(160,"td"),e._uU(161,"Set id attribute"),e.qZA(),e.TgZ(162,"td"),e._uU(163,"string"),e.qZA(),e._UZ(164,"td"),e.qZA()()()(),e.TgZ(165,"np-card")(166,"np-card-body")(167,"table",3)(168,"tr")(169,"th"),e._uU(170,"Method"),e.qZA(),e.TgZ(171,"th"),e._uU(172,"Description"),e.qZA(),e.TgZ(173,"th"),e._uU(174,"Parameters"),e.qZA()(),e.TgZ(175,"tr")(176,"td"),e._uU(177,"onChange(v: any)"),e.qZA(),e.TgZ(178,"td"),e._uU(179,"Callback event on value change."),e.qZA(),e.TgZ(180,"td"),e._uU(181,"Value"),e.qZA()(),e.TgZ(182,"tr")(183,"td"),e._uU(184,"onFocus($event)"),e.qZA(),e.TgZ(185,"td"),e._uU(186,"Callback event on input focus."),e.qZA(),e.TgZ(187,"td"),e._uU(188,"Browser event"),e.qZA()(),e.TgZ(189,"tr")(190,"td"),e._uU(191,"onBlur($event)"),e.qZA(),e.TgZ(192,"td"),e._uU(193,"Callback event on input blur."),e.qZA(),e.TgZ(194,"td"),e._uU(195,"Browser event"),e.qZA()()()()(),e.TgZ(196,"np-card")(197,"np-card-body")(198,"table",3)(199,"tr")(200,"th"),e._uU(201,"Api"),e.qZA(),e.TgZ(202,"th"),e._uU(203,"Description"),e.qZA(),e.TgZ(204,"th"),e._uU(205,"Parameters"),e.qZA()(),e.TgZ(206,"tr")(207,"td"),e._uU(208,"focus()"),e.qZA(),e.TgZ(209,"td"),e._uU(210," Set focus on control. If not setting focus properly then use timeout of 500ms. "),e.qZA(),e._UZ(211,"td"),e.qZA()()()()(),e.TgZ(212,"np-tab",4)(213,"fieldset")(214,"legend"),e._uU(215,"items : string[] + orderDir"),e.qZA(),e.TgZ(216,"np-dropdown",5),e.NdJ("ngModelChange",function(t){return n.dropdownVal1=t}),e.qZA(),e.TgZ(217,"div"),e._uU(218),e.qZA(),e.TgZ(219,"button",6),e.NdJ("click",function(){return n.changeValue()}),e._uU(220,"Change value"),e.qZA()(),e.TgZ(221,"fieldset")(222,"legend"),e._uU(223,"items : any[] + displayKey + orderBy + orderDir"),e.qZA(),e.TgZ(224,"np-dropdown",7),e.NdJ("ngModelChange",function(t){return n.dropdownVal2=t}),e.qZA(),e.TgZ(225,"div"),e._uU(226),e.ALo(227,"json"),e.qZA()(),e.TgZ(228,"fieldset")(229,"legend"),e._uU(230,"items : any[] + displayKey + valueKey"),e.qZA(),e.TgZ(231,"np-dropdown",8),e.NdJ("ngModelChange",function(t){return n.dropdownVal8=t}),e.qZA(),e.TgZ(232,"div"),e._uU(233),e.qZA()(),e.TgZ(234,"fieldset")(235,"legend"),e._uU(236,"required + placeholder"),e.qZA(),e.TgZ(237,"np-dropdown",9),e.NdJ("ngModelChange",function(t){return n.dropdownVal3=t}),e.qZA()(),e.TgZ(238,"fieldset")(239,"legend"),e._uU(240,"disabled + readOnly"),e.qZA(),e.TgZ(241,"np-dropdown",10),e.NdJ("ngModelChange",function(t){return n.dropdownVal4=t}),e.qZA(),e._UZ(242,"br"),e.TgZ(243,"np-dropdown",11),e.NdJ("ngModelChange",function(t){return n.dropdownVal4=t}),e.qZA()(),e.TgZ(244,"fieldset")(245,"legend"),e._uU(246,"itemTemplate + displayKey"),e.qZA(),e.TgZ(247,"np-dropdown",12),e.NdJ("ngModelChange",function(t){return n.dropdownVal5=t}),e.qZA(),e.YNc(248,T,2,2,"ng-template",null,13,e.W1O),e.TgZ(250,"div"),e._uU(251),e.ALo(252,"json"),e.qZA()(),e.TgZ(253,"fieldset")(254,"legend"),e._uU(255,"onChange"),e.qZA(),e.TgZ(256,"np-dropdown",14),e.NdJ("ngModelChange",function(t){return n.dropdownVal6=t})("onChange",function(t){return n.onChange(t)}),e.qZA()(),e.TgZ(257,"fieldset")(258,"legend"),e._uU(259,"styleClass"),e.qZA(),e.TgZ(260,"np-dropdown",15),e.NdJ("ngModelChange",function(t){return n.dropdownVal7=t}),e.qZA()()()()),2&o){const d=e.MAs(249);e.xp6(10),e.Q6J("innerText",n.importText),e.xp6(7),e.Q6J("innerText",n.htmlText),e.xp6(58),e.Oqu(n.templateText),e.xp6(141),e.Q6J("ngModel",n.dropdownVal1)("items",n.data)("orderDir","asc"),e.xp6(2),e.hij("Selected value: ",n.dropdownVal1,""),e.xp6(6),e.Q6J("ngModel",n.dropdownVal2)("items",n.dataFull)("displayKey","name")("orderBy","name")("orderDir","desc"),e.xp6(2),e.hij("Selected value: ",e.lcZ(227,40,n.dropdownVal2),""),e.xp6(5),e.Q6J("ngModel",n.dropdownVal8)("items",n.dataFull)("displayKey","name")("valueKey","id"),e.xp6(2),e.hij("Selected value: ",n.dropdownVal8,""),e.xp6(4),e.Q6J("ngModel",n.dropdownVal3)("items",n.data)("required",!0)("placeholder","Select from dropdown"),e.xp6(4),e.Q6J("ngModel",n.dropdownVal4)("items",n.data)("disabled",!0),e.xp6(2),e.Q6J("ngModel",n.dropdownVal4)("items",n.data)("readOnly",!0),e.xp6(4),e.Q6J("ngModel",n.dropdownVal5)("items",n.dataFull)("displayKey","name")("itemTemplate",d),e.xp6(4),e.hij("Selected value: ",e.lcZ(252,42,n.dropdownVal5),""),e.xp6(5),e.Q6J("ngModel",n.dropdownVal6)("valueKey","id")("displayKey","name")("items",n.dataFull),e.xp6(4),e.Q6J("ngModel",n.dropdownVal7)("items",n.data)("styleClass","myClass")}},dependencies:[l.JJ,l.Q7,l.On,a.aV,a.c0,a.El,a.KA,a.Qk,s.Ts],encapsulation:2})}const A=[{path:"",component:p}];class Z{static#e=this.\u0275fac=function(o){return new(o||Z)};static#n=this.\u0275mod=e.oAB({type:Z});static#t=this.\u0275inj=e.cJS({imports:[m.Bz.forChild(A),m.Bz]})}class g{static#e=this.\u0275fac=function(o){return new(o||g)};static#n=this.\u0275mod=e.oAB({type:g});static#t=this.\u0275inj=e.cJS({imports:[s.ez,l.u5,Z,a.C3,a.Tk,a.i7]})}}}]);