8024.43e1d1b57216131b.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[8024],{8024:(U,u,d)=>{d.r(u),d.d(u,{NpColorPickerDemoModule:()=>p});var Z=d(8379),e=d(4650),l=d(5499),s=d(6895),i=d(433);function T(_,c){1&_&&(e.TgZ(0,"div",20),e._uU(1," Color is required. "),e.qZA())}function m(_,c){1&_&&(e.TgZ(0,"div",20),e._uU(1," Color is required. "),e.qZA())}const q=function(){return[]};function C(_,c){if(1&_){const n=e.EpF();e.TgZ(0,"div")(1,"fieldset")(2,"legend"),e._uU(3,"Basic"),e.qZA(),e.TgZ(4,"np-color-picker",6),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color1=t)}),e.qZA(),e.TgZ(5,"div"),e._uU(6),e.qZA(),e.TgZ(7,"button",7),e.NdJ("click",function(){e.CHM(n);const t=e.oxw();return e.KtG(t.color1="#ed5a0f")}),e._uU(8," Set color #ed5a0f "),e.qZA()()(),e.TgZ(9,"div")(10,"fieldset")(11,"legend"),e._uU(12,"disabled and readOnly"),e.qZA(),e.TgZ(13,"np-color-picker",8),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color2=t)}),e.qZA(),e._UZ(14,"br"),e.TgZ(15,"np-color-picker",9),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color2=t)}),e.qZA()()(),e.TgZ(16,"div")(17,"form",null,10)(19,"fieldset")(20,"legend"),e._uU(21,"required and format 'rgb'"),e.qZA(),e.TgZ(22,"np-color-picker",11,12),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color3=t)}),e.qZA(),e.YNc(24,T,2,0,"div",13),e.TgZ(25,"div"),e._uU(26),e.qZA(),e.TgZ(27,"div"),e._uU(28),e.qZA()()()(),e.TgZ(29,"div")(30,"fieldset")(31,"legend"),e._uU(32,"defaultOpen"),e.qZA(),e.TgZ(33,"np-color-picker",14,15),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color4=t)}),e.qZA(),e.YNc(35,m,2,0,"div",13),e.TgZ(36,"div",16)(37,"button",7),e.NdJ("click",function(){e.CHM(n);const t=e.oxw();return e.KtG(t.color4Disabled=!t.color4Disabled)}),e._uU(38," Toggle Disable "),e.qZA(),e.TgZ(39,"button",7),e.NdJ("click",function(){e.CHM(n);const t=e.oxw();return e.KtG(t.color4Required=!t.color4Required)}),e._uU(40," Toggle required "),e.qZA()()()(),e.TgZ(41,"div")(42,"fieldset")(43,"legend"),e._uU(44,"Pre-defined colors in picker"),e.qZA(),e.TgZ(45,"np-color-picker",17),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color5=t)}),e.qZA()()(),e.TgZ(46,"div")(47,"fieldset")(48,"legend"),e._uU(49,"styleClass"),e.qZA(),e.TgZ(50,"np-color-picker",18),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color8=t)}),e.qZA()()(),e.TgZ(51,"div")(52,"fieldset")(53,"legend"),e._uU(54,"No pre-defined colors"),e.qZA(),e.TgZ(55,"np-color-picker",17),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color9=t)}),e.qZA()()(),e.TgZ(56,"div")(57,"fieldset")(58,"legend"),e._uU(59,"onChange"),e.qZA(),e.TgZ(60,"np-color-picker",19),e.NdJ("ngModelChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.color10=t)})("onChange",function(t){e.CHM(n);const o=e.oxw();return e.KtG(o.onChangeColor(t))}),e.qZA()()()}if(2&_){const n=e.MAs(18),r=e.MAs(23),t=e.MAs(34),o=e.oxw();e.xp6(4),e.Q6J("ngModel",o.color1)("inputId","txtColor")("autoFocus",!0),e.xp6(2),e.hij("Selected value is: ",o.color1,""),e.xp6(7),e.Q6J("ngModel",o.color2),e.xp6(2),e.Q6J("ngModel",o.color2)("readOnly",!0),e.xp6(7),e.Q6J("ngModel",o.color3),e.xp6(2),e.Q6J("ngIf",r.control.touched&&(null==r.control.errors?null:r.control.errors.required)),e.xp6(2),e.hij("Form valid: ",n.valid,""),e.xp6(2),e.hij("Selected color code: ",o.color3,""),e.xp6(5),e.Q6J("ngModel",o.color4)("defaultOpen",!0)("disabled",o.color4Disabled)("required",o.color4Required),e.xp6(2),e.Q6J("ngIf",t.control.touched&&(null==t.control.errors?null:t.control.errors.required)),e.xp6(10),e.Q6J("ngModel",o.color5)("colors",o.existingColors5),e.xp6(5),e.Q6J("ngModel",o.color8)("styleClass","myClass"),e.xp6(5),e.Q6J("ngModel",o.color9)("colors",e.DdM(23,q)),e.xp6(5),e.Q6J("ngModel",o.color10)}}class g{constructor(){this.color1="#5fe64b",this.color2="#5fe64b",this.color4="#5fe64b",this.color4Required=!1,this.color4Disabled=!1,this.existingColors5=["#FFFFFF","#C0C0C0","#808080","#000000"],this.importText="import { NpColorPickerModule } from 'np-ui-lib';",this.htmlText='<np-color-picker [(ngModel)]="value"></np-color-picker>'}ngOnInit(){}onChangeColor(c){alert("Selected color is "+c)}static#e=this.\u0275fac=function(n){return new(n||g)};static#o=this.\u0275cmp=e.Xpm({type:g,selectors:[["app-np-color-picker-demo"]],decls:173,vars:2,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples","id","tabExample"],["npTabContent",""],[3,"ngModel","inputId","autoFocus","ngModelChange"],["type","button",1,"np-btn",3,"click"],["disabled","",3,"ngModel","ngModelChange"],[3,"ngModel","readOnly","ngModelChange"],["form","ngForm"],["format","rgb","required","","name","colorPicker3",3,"ngModel","ngModelChange"],["validations","ngModel"],["class","np-text-danger",4,"ngIf"],[3,"ngModel","defaultOpen","disabled","required","ngModelChange"],["validations4","ngModel"],[1,"np-btn-group"],[3,"ngModel","colors","ngModelChange"],[3,"ngModel","styleClass","ngModelChange"],[3,"ngModel","ngModelChange","onChange"],[1,"np-text-danger"]],template:function(n,r){1&n&&(e.TgZ(0,"h2",0),e._uU(1,"Color Picker"),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,"string"),e.qZA(),e._UZ(37,"td"),e.qZA(),e.TgZ(38,"tr")(39,"td"),e._uU(40,"format"),e.qZA(),e.TgZ(41,"td"),e._uU(42,"Set color format 'hex' or 'rgb'"),e.qZA(),e.TgZ(43,"td"),e._uU(44,"string"),e.qZA(),e.TgZ(45,"td"),e._uU(46,"hex"),e.qZA()(),e.TgZ(47,"tr")(48,"td"),e._uU(49,"defaultOpen"),e.qZA(),e.TgZ(50,"td"),e._uU(51,"Set default open"),e.qZA(),e.TgZ(52,"td"),e._uU(53,"boolean"),e.qZA(),e.TgZ(54,"td"),e._uU(55,"false"),e.qZA()(),e.TgZ(56,"tr")(57,"td"),e._uU(58,"colors"),e.qZA(),e.TgZ(59,"td"),e._uU(60," List of predefined colors, Color format must be same as format "),e.qZA(),e.TgZ(61,"td"),e._uU(62,"string[]"),e.qZA(),e._UZ(63,"td"),e.qZA(),e.TgZ(64,"tr")(65,"td"),e._uU(66,"disabled"),e.qZA(),e.TgZ(67,"td"),e._uU(68,"Set disabled"),e.qZA(),e.TgZ(69,"td"),e._uU(70,"boolean"),e.qZA(),e.TgZ(71,"td"),e._uU(72,"false"),e.qZA()(),e.TgZ(73,"tr")(74,"td"),e._uU(75,"required"),e.qZA(),e.TgZ(76,"td"),e._uU(77,"Set required"),e.qZA(),e.TgZ(78,"td"),e._uU(79,"boolean"),e.qZA(),e.TgZ(80,"td"),e._uU(81,"false"),e.qZA()(),e.TgZ(82,"tr")(83,"td"),e._uU(84,"readOnly"),e.qZA(),e.TgZ(85,"td"),e._uU(86,"Set readonly"),e.qZA(),e.TgZ(87,"td"),e._uU(88,"boolean"),e.qZA(),e.TgZ(89,"td"),e._uU(90,"false"),e.qZA()(),e.TgZ(91,"tr")(92,"td"),e._uU(93,"autoFocus"),e.qZA(),e.TgZ(94,"td"),e._uU(95,"Set autofocus"),e.qZA(),e.TgZ(96,"td"),e._uU(97,"boolean"),e.qZA(),e.TgZ(98,"td"),e._uU(99,"false"),e.qZA()(),e.TgZ(100,"tr")(101,"td"),e._uU(102,"tabIndex"),e.qZA(),e.TgZ(103,"td"),e._uU(104,"Set tabindex attribute"),e.qZA(),e.TgZ(105,"td"),e._uU(106,"number"),e.qZA(),e._UZ(107,"td"),e.qZA(),e.TgZ(108,"tr")(109,"td"),e._uU(110,"styleClass"),e.qZA(),e.TgZ(111,"td"),e._uU(112,"Set extra class on component"),e.qZA(),e.TgZ(113,"td"),e._uU(114,"string"),e.qZA(),e._UZ(115,"td"),e.qZA(),e.TgZ(116,"tr")(117,"td"),e._uU(118,"inputId"),e.qZA(),e.TgZ(119,"td"),e._uU(120,"Set id attribute"),e.qZA(),e.TgZ(121,"td"),e._uU(122,"string"),e.qZA(),e._UZ(123,"td"),e.qZA()()()(),e.TgZ(124,"np-card")(125,"np-card-body")(126,"table",3)(127,"tr")(128,"th"),e._uU(129,"Method"),e.qZA(),e.TgZ(130,"th"),e._uU(131,"Description"),e.qZA(),e.TgZ(132,"th"),e._uU(133,"Parameters"),e.qZA()(),e.TgZ(134,"tr")(135,"td"),e._uU(136,"onChange(v: any)"),e.qZA(),e.TgZ(137,"td"),e._uU(138,"Callback event on value change."),e.qZA(),e.TgZ(139,"td"),e._uU(140,"Value"),e.qZA()(),e.TgZ(141,"tr")(142,"td"),e._uU(143,"onFocus($event)"),e.qZA(),e.TgZ(144,"td"),e._uU(145,"Callback event on input focus."),e.qZA(),e.TgZ(146,"td"),e._uU(147,"Browser event"),e.qZA()(),e.TgZ(148,"tr")(149,"td"),e._uU(150,"onBlur($event)"),e.qZA(),e.TgZ(151,"td"),e._uU(152,"Callback event on input blur."),e.qZA(),e.TgZ(153,"td"),e._uU(154,"Browser event"),e.qZA()()()()(),e.TgZ(155,"np-card")(156,"np-card-body")(157,"table",3)(158,"tr")(159,"th"),e._uU(160,"Api"),e.qZA(),e.TgZ(161,"th"),e._uU(162,"Description"),e.qZA(),e.TgZ(163,"th"),e._uU(164,"Parameters"),e.qZA()(),e.TgZ(165,"tr")(166,"td"),e._uU(167,"focus()"),e.qZA(),e.TgZ(168,"td"),e._uU(169," Set focus on control. If not setting focus properly then use timeout of 500ms. "),e.qZA(),e._UZ(170,"td"),e.qZA()()()()(),e.TgZ(171,"np-tab",4),e.YNc(172,C,61,24,"ng-template",5),e.qZA()()),2&n&&(e.xp6(10),e.Q6J("innerText",r.importText),e.xp6(7),e.Q6J("innerText",r.htmlText))},dependencies:[l.ay,s.O5,i._Y,i.JJ,i.JL,i.Q7,i.On,i.F,l.c0,l.El,l.KA,l.Qk,l.Bl],encapsulation:2})}const A=[{path:"",component:g}];class a{static#e=this.\u0275fac=function(n){return new(n||a)};static#o=this.\u0275mod=e.oAB({type:a});static#t=this.\u0275inj=e.cJS({imports:[Z.Bz.forChild(A),Z.Bz]})}class p{static#e=this.\u0275fac=function(n){return new(n||p)};static#o=this.\u0275mod=e.oAB({type:p});static#t=this.\u0275inj=e.cJS({imports:[l.bQ,a,s.ez,i.u5,l.Tk,l.i7]})}}}]);