7969.0de95a320db7c77a.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[7969],{7969:(q,p,l)=>{l.r(p),l.d(p,{NpTagsDemoModule:()=>_});var m=l(6895),c=l(8379),i=l(1135),e=l(4650),d=l(433),o=l(5499);function h(g,r){if(1&g&&(e.TgZ(0,"div"),e._UZ(1,"span",19),e.ALo(2,"npHighlight"),e._uU(3),e.qZA()),2&g){const a=r.item,t=r.keyword;e.xp6(1),e.Q6J("innerHTML",e.xi3(2,2,a.name,t),e.oJD),e.xp6(2),e.hij(" ( ",a.vitamin," ) ")}}function T(g,r){if(1&g){const a=e.EpF();e.TgZ(0,"fieldset")(1,"legend"),e._uU(2," searchResult as string[] + isServerSide + orderDir + onSearch "),e.qZA(),e.TgZ(3,"np-tags",8),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags1=n)})("onCreateNewTag",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onCreateNewTag(n))})("onSearch",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onSearch1(n))}),e.qZA(),e.TgZ(4,"div"),e._uU(5),e.ALo(6,"json"),e.qZA()(),e.TgZ(7,"fieldset")(8,"legend"),e._uU(9,"searchResult as any[] + displayKey + orderBy + orderDir"),e.qZA(),e.TgZ(10,"np-tags",9),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags2=n)}),e.qZA(),e.TgZ(11,"div"),e._uU(12),e.ALo(13,"json"),e.qZA()(),e.TgZ(14,"fieldset")(15,"legend"),e._uU(16,"searchResult as any[] + displayKey + valueKey"),e.qZA(),e.TgZ(17,"np-tags",10),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags8=n)}),e.qZA(),e.TgZ(18,"div"),e._uU(19),e.ALo(20,"json"),e.qZA()(),e.TgZ(21,"fieldset")(22,"legend"),e._uU(23,"forceToSelect"),e.qZA(),e.TgZ(24,"np-tags",11),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags3=n)})("onSearch",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onSearch3(n))}),e.qZA(),e.TgZ(25,"div"),e._uU(26),e.ALo(27,"json"),e.qZA()(),e.TgZ(28,"fieldset")(29,"legend"),e._uU(30,"displayKey + itemTemplate"),e.qZA(),e.TgZ(31,"np-tags",12),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags4=n)}),e.qZA(),e.TgZ(32,"div"),e._uU(33),e.ALo(34,"json"),e.qZA(),e.YNc(35,h,4,5,"ng-template",null,13,e.W1O),e.qZA(),e.TgZ(37,"fieldset")(38,"legend"),e._uU(39,"disabled and readOnly"),e.qZA(),e.TgZ(40,"np-tags",14),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags5=n)}),e.qZA(),e._UZ(41,"br"),e.TgZ(42,"np-tags",15),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags5=n)}),e.qZA()(),e.TgZ(43,"fieldset")(44,"legend"),e._uU(45,"required"),e.qZA(),e.TgZ(46,"np-tags",16),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags6=n)}),e.qZA()(),e.TgZ(47,"fieldset")(48,"legend"),e._uU(49,"maxResultLimit + minSearchCharLimit + maxSelectLimit"),e.qZA(),e.TgZ(50,"np-tags",17),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags7=n)})("onSearch",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onSearch7(n))}),e.qZA()(),e.TgZ(51,"fieldset")(52,"legend"),e._uU(53,"onChange and onCreateNewTag"),e.qZA(),e._uU(54," Check console for onCreateNewTag event. "),e.TgZ(55,"np-tags",18),e.NdJ("ngModelChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.tags9=n)})("onChange",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onChange9(n))})("onCreateNewTag",function(n){e.CHM(a);const s=e.oxw();return e.KtG(s.onCreateNewTag(n))}),e.qZA()()}if(2&g){const a=e.MAs(36),t=e.oxw();e.xp6(3),e.Q6J("ngModel",t.tags1)("searchResult",t.searchResult1)("isServerSide",!0)("orderDir","asc"),e.xp6(2),e.hij("Selected value : ",e.lcZ(6,47,t.tags1),""),e.xp6(5),e.Q6J("ngModel",t.tags2)("displayKey","name")("searchResult",t.searchResult2)("orderBy","name")("orderDir","desc"),e.xp6(2),e.hij("Selected value : ",e.lcZ(13,49,t.tags2),""),e.xp6(5),e.Q6J("ngModel",t.tags8)("displayKey","name")("searchResult",t.searchResult8)("valueKey","id"),e.xp6(2),e.hij("Selected value : ",e.lcZ(20,51,t.tags8),""),e.xp6(5),e.Q6J("ngModel",t.tags3)("searchResult",t.searchResult3)("isServerSide",!0)("forceToSelect",!0),e.xp6(2),e.hij("Selected value : ",e.lcZ(27,53,t.tags3),""),e.xp6(5),e.Q6J("ngModel",t.tags4)("displayKey","name")("searchResult",t.searchResult4)("itemTemplate",a),e.xp6(2),e.hij("Selected value : ",e.lcZ(34,55,t.tags4),""),e.xp6(7),e.Q6J("ngModel",t.tags5)("displayKey","name")("searchResult",t.searchResult5),e.xp6(2),e.Q6J("ngModel",t.tags5)("displayKey","name")("searchResult",t.searchResult5)("readOnly",!0),e.xp6(4),e.Q6J("ngModel",t.tags6)("displayKey","name")("searchResult",t.searchResult6)("required",!0),e.xp6(4),e.Q6J("ngModel",t.tags7)("isServerSide",!0)("displayKey","name")("searchResult",t.searchResult7)("maxResultLimit",3)("minSearchCharLimit",3)("maxSelectLimit",3),e.xp6(5),e.Q6J("ngModel",t.tags9)("displayKey","name")("searchResult",t.searchResult9)}}class u{constructor(){this.importText="import { NpTagsModule } from 'np-ui-lib';",this.htmlText='<np-tags [(ngModel)]="value" [searchResult]="items" [isServerSide]="true" (onSearch)="onSearchName($event)">\n</np-tags>',this.templateText='<ng-template #itemTemplate let-item="item" let-keyword="keyword">\n  <div [innerHTML]="item.name | npHighlight : keyword"></div>\n</ng-template>',this.onSearchText="onSearchName(keyword: string) {\n    ...Search data\n    this.searchResult.next(searchData);\n}",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.tags2=[{id:6,name:"Strawberry",vitamin:"iron, copper, B6"},{id:7,name:"Watermelon",vitamin:" A, B6 and C"}],this.tags5=[{id:6,name:"Strawberry",vitamin:"iron, copper, B6"},{id:7,name:"Watermelon",vitamin:" A, B6 and C"}],this.searchResult1=new i.X(null),this.searchResult2=new i.X(this.dataFull),this.searchResult8=new i.X(this.dataFull),this.searchResult3=new i.X(null),this.searchResult4=new i.X(this.dataFull),this.searchResult5=new i.X(this.dataFull),this.searchResult6=new i.X(this.dataFull),this.searchResult7=new i.X(null),this.searchResult9=new i.X(this.dataFull)}onSearch1(r){setTimeout(()=>{const a=this.data.filter(t=>t.toLowerCase().indexOf(r.toLowerCase())>-1);this.searchResult1.next(a)},1e3)}onSearch3(r){setTimeout(()=>{const a=this.data.filter(t=>t.toLowerCase().indexOf(r.toLowerCase())>-1);this.searchResult3.next(a)},1e3)}onSearch7(r){setTimeout(()=>{const a=this.dataFull.filter(t=>{if(t.name.toLowerCase().indexOf(r.toLowerCase())>-1)return t});this.searchResult7.next(a)},1e3)}ngOnInit(){}onChange9(r){alert(JSON.stringify(r))}onCreateNewTag(r){console.log(JSON.stringify(r))}static#e=this.\u0275fac=function(a){return new(a||u)};static#t=this.\u0275cmp=e.Xpm({type:u,selectors:[["app-np-tags-demo"]],decls:290,vars:4,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["routerLink","/np-directives-demo#linkHighLightPipe"],["type","info"],["title","Examples"],["npTabContent",""],[3,"ngModel","searchResult","isServerSide","orderDir","ngModelChange","onCreateNewTag","onSearch"],[3,"ngModel","displayKey","searchResult","orderBy","orderDir","ngModelChange"],[3,"ngModel","displayKey","searchResult","valueKey","ngModelChange"],[3,"ngModel","searchResult","isServerSide","forceToSelect","ngModelChange","onSearch"],[3,"ngModel","displayKey","searchResult","itemTemplate","ngModelChange"],["itemTemplate",""],["disabled","",3,"ngModel","displayKey","searchResult","ngModelChange"],[3,"ngModel","displayKey","searchResult","readOnly","ngModelChange"],[3,"ngModel","displayKey","searchResult","required","ngModelChange"],[3,"ngModel","isServerSide","displayKey","searchResult","maxResultLimit","minSearchCharLimit","maxSelectLimit","ngModelChange","onSearch"],[3,"ngModel","displayKey","searchResult","ngModelChange","onChange","onCreateNewTag"],[3,"innerHTML"]],template:function(a,t){1&a&&(e.TgZ(0,"h2",0),e._uU(1,"Tags"),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,"searchResult"),e.qZA(),e.TgZ(41,"td"),e._uU(42,"List of data"),e.qZA(),e.TgZ(43,"td"),e._uU(44,"BehaviorSubject<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 "),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 selected as value "),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,"a",4),e._uU(77,"How to use npHighlight pipe?"),e.qZA()(),e.TgZ(78,"td"),e._uU(79,"TemplateRef<any>"),e.qZA(),e._UZ(80,"td"),e.qZA(),e.TgZ(81,"tr")(82,"td"),e._uU(83,"orderBy"),e.qZA(),e.TgZ(84,"td"),e._uU(85,"Set order by property"),e.qZA(),e.TgZ(86,"td"),e._uU(87,"string"),e.qZA(),e._UZ(88,"td"),e.qZA(),e.TgZ(89,"tr")(90,"td"),e._uU(91,"orderDir"),e.qZA(),e.TgZ(92,"td"),e._uU(93," Set order direction 'asc' or 'desc'. Default value is 'asc'. "),e._UZ(94,"br"),e._uU(95," If data is type of string[], then only use orderDir. "),e.qZA(),e.TgZ(96,"td"),e._uU(97,"string"),e.qZA(),e._UZ(98,"td"),e.qZA(),e.TgZ(99,"tr")(100,"td"),e._uU(101,"forceToSelect"),e.qZA(),e.TgZ(102,"td"),e._uU(103," Allow to create new item, enter key will create new tag if set to true "),e.qZA(),e.TgZ(104,"td"),e._uU(105,"boolean"),e.qZA(),e.TgZ(106,"td"),e._uU(107,"false"),e.qZA()(),e.TgZ(108,"tr")(109,"td"),e._uU(110,"maxResultLimit"),e.qZA(),e.TgZ(111,"td"),e._uU(112,"Maximum number of search items to display"),e.qZA(),e.TgZ(113,"td"),e._uU(114,"number"),e.qZA(),e._UZ(115,"td"),e.qZA(),e.TgZ(116,"tr")(117,"td"),e._uU(118,"minSearchCharLimit"),e.qZA(),e.TgZ(119,"td"),e._uU(120,"Minimum search character required to search"),e.qZA(),e.TgZ(121,"td"),e._uU(122,"number"),e.qZA(),e._UZ(123,"td"),e.qZA(),e.TgZ(124,"tr")(125,"td"),e._uU(126,"maxSelectLimit"),e.qZA(),e.TgZ(127,"td"),e._uU(128,"Maximum tags to select"),e.qZA(),e.TgZ(129,"td"),e._uU(130,"number"),e.qZA(),e._UZ(131,"td"),e.qZA(),e.TgZ(132,"tr")(133,"td"),e._uU(134,"isServerSide"),e.qZA(),e.TgZ(135,"td"),e._uU(136," If fetching items from server then set this to true, so on input change it will call "),e.TgZ(137,"b"),e._uU(138,"onSearch"),e.qZA(),e._uU(139," method "),e.qZA(),e.TgZ(140,"td"),e._uU(141,"boolean"),e.qZA(),e.TgZ(142,"td"),e._uU(143,"false"),e.qZA()(),e.TgZ(144,"tr")(145,"td"),e._uU(146,"searchDelay"),e.qZA(),e.TgZ(147,"td"),e._uU(148,"Set delay in search, in milliseconds"),e.qZA(),e.TgZ(149,"td"),e._uU(150,"number"),e.qZA(),e.TgZ(151,"td"),e._uU(152,"1000"),e.qZA()(),e.TgZ(153,"tr")(154,"td"),e._uU(155,"placeholder"),e.qZA(),e.TgZ(156,"td"),e._uU(157,"Set placeholder"),e.qZA(),e.TgZ(158,"td"),e._uU(159,"string"),e.qZA(),e._UZ(160,"td"),e.qZA(),e.TgZ(161,"tr")(162,"td"),e._uU(163,"disabled"),e.qZA(),e.TgZ(164,"td"),e._uU(165,"Set disabled"),e.qZA(),e.TgZ(166,"td"),e._uU(167,"boolean"),e.qZA(),e.TgZ(168,"td"),e._uU(169,"false"),e.qZA()(),e.TgZ(170,"tr")(171,"td"),e._uU(172,"required"),e.qZA(),e.TgZ(173,"td"),e._uU(174,"Set required"),e.qZA(),e.TgZ(175,"td"),e._uU(176,"boolean"),e.qZA(),e.TgZ(177,"td"),e._uU(178,"false"),e.qZA()(),e.TgZ(179,"tr")(180,"td"),e._uU(181,"readOnly"),e.qZA(),e.TgZ(182,"td"),e._uU(183,"Set readonly"),e.qZA(),e.TgZ(184,"td"),e._uU(185,"boolean"),e.qZA(),e.TgZ(186,"td"),e._uU(187,"false"),e.qZA()(),e.TgZ(188,"tr")(189,"td"),e._uU(190,"autoFocus"),e.qZA(),e.TgZ(191,"td"),e._uU(192,"Set autofocus"),e.qZA(),e.TgZ(193,"td"),e._uU(194,"boolean"),e.qZA(),e.TgZ(195,"td"),e._uU(196,"false"),e.qZA()(),e.TgZ(197,"tr")(198,"td"),e._uU(199,"tabIndex"),e.qZA(),e.TgZ(200,"td"),e._uU(201,"Set tabindex attribute"),e.qZA(),e.TgZ(202,"td"),e._uU(203,"number"),e.qZA(),e._UZ(204,"td"),e.qZA(),e.TgZ(205,"tr")(206,"td"),e._uU(207,"styleClass"),e.qZA(),e.TgZ(208,"td"),e._uU(209,"Set extra class on component"),e.qZA(),e.TgZ(210,"td"),e._uU(211,"string"),e.qZA(),e._UZ(212,"td"),e.qZA(),e.TgZ(213,"tr")(214,"td"),e._uU(215,"inputId"),e.qZA(),e.TgZ(216,"td"),e._uU(217,"Set id attribute"),e.qZA(),e.TgZ(218,"td"),e._uU(219,"string"),e.qZA(),e._UZ(220,"td"),e.qZA()(),e.TgZ(221,"np-alert",5),e._uU(222," Press Enter to create new tag(Only if forceToSelect is false), press Backspace to remove last selected tag. "),e.qZA()()(),e.TgZ(223,"np-card")(224,"np-card-body")(225,"table",3)(226,"tr")(227,"th"),e._uU(228,"Method"),e.qZA(),e.TgZ(229,"th"),e._uU(230,"Description"),e.qZA(),e.TgZ(231,"th"),e._uU(232,"Parameters"),e.qZA()(),e.TgZ(233,"tr")(234,"td"),e._uU(235,"onChange(v: any)"),e.qZA(),e.TgZ(236,"td"),e._uU(237,"Callback event on value change."),e.qZA(),e.TgZ(238,"td"),e._uU(239,"Value"),e.qZA()(),e.TgZ(240,"tr")(241,"td"),e._uU(242,"onSearch(v: any)"),e.qZA(),e.TgZ(243,"td"),e._uU(244," Callback event on search"),e._UZ(245,"br"),e.TgZ(246,"pre")(247,"code"),e._uU(248),e.qZA()()(),e.TgZ(249,"td"),e._uU(250,"Search keyword"),e.qZA()(),e.TgZ(251,"tr")(252,"td"),e._uU(253,"onCreateNewTag(v: any)"),e.qZA(),e.TgZ(254,"td"),e._uU(255,"Callback event on new tag created"),e.qZA(),e.TgZ(256,"td"),e._uU(257,"New created tag"),e.qZA()(),e.TgZ(258,"tr")(259,"td"),e._uU(260,"onFocus($event)"),e.qZA(),e.TgZ(261,"td"),e._uU(262,"Callback event on input focus."),e.qZA(),e.TgZ(263,"td"),e._uU(264,"Browser event"),e.qZA()(),e.TgZ(265,"tr")(266,"td"),e._uU(267,"onBlur($event)"),e.qZA(),e.TgZ(268,"td"),e._uU(269,"Callback event on input blur."),e.qZA(),e.TgZ(270,"td"),e._uU(271,"Browser event"),e.qZA()()()()(),e.TgZ(272,"np-card")(273,"np-card-body")(274,"table",3)(275,"tr")(276,"th"),e._uU(277,"Api"),e.qZA(),e.TgZ(278,"th"),e._uU(279,"Description"),e.qZA(),e.TgZ(280,"th"),e._uU(281,"Parameters"),e.qZA()(),e.TgZ(282,"tr")(283,"td"),e._uU(284,"focus()"),e.qZA(),e.TgZ(285,"td"),e._uU(286," Set focus on control. If not setting focus properly then use timeout of 500ms. "),e.qZA(),e._UZ(287,"td"),e.qZA()()()()(),e.TgZ(288,"np-tab",6),e.YNc(289,T,56,57,"ng-template",7),e.qZA()()),2&a&&(e.xp6(10),e.Q6J("innerText",t.importText),e.xp6(7),e.Q6J("innerText",t.htmlText),e.xp6(58),e.Oqu(t.templateText),e.xp6(173),e.Oqu(t.onSearchText))},dependencies:[d.JJ,d.Q7,d.On,c.rH,o.aS,o.KA,o.Qk,o.Bl,o.c0,o.El,o.r5,m.Ts,o.wQ],encapsulation:2})}const A=[{path:"",component:u}];class Z{static#e=this.\u0275fac=function(a){return new(a||Z)};static#t=this.\u0275mod=e.oAB({type:Z});static#a=this.\u0275inj=e.cJS({imports:[c.Bz.forChild(A),c.Bz]})}class _{static#e=this.\u0275fac=function(a){return new(a||_)};static#t=this.\u0275mod=e.oAB({type:_});static#a=this.\u0275inj=e.cJS({imports:[m.ez,d.u5,Z,o.B_,o.i7,o.Tk,o.qp,o.bc]})}}}]);