3827.7834f6ab4e0f0aef.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[3827],{3827:(M,r,a)=>{a.r(r),a.d(r,{NpFileUploadDemoModule:()=>_});var s=a(6895),U=a(8379),e=a(4650),u=a(433),o=a(5499);function A(p,d){1&p&&(e.TgZ(0,"div",25),e._uU(1," Invalid extension. "),e.qZA())}function q(p,d){1&p&&(e.TgZ(0,"div",25),e._uU(1," File size exceeds. "),e.qZA())}function m(p,d){1&p&&(e.TgZ(0,"div",25),e._uU(1," Total File size exceeds. "),e.qZA())}function c(p,d){1&p&&(e.TgZ(0,"div",25),e._uU(1," Max 2 files allowed to select. "),e.qZA())}class g{constructor(){this.importText="import { NpFileUploadModule } from 'np-ui-lib';",this.htmlText='<np-file-upload [(ngModel)]="uploadedFiles"></np-file-upload>'}ngOnInit(){}onChange(d){alert("change event occurs.")}SetNullValue(){this.fileUpload1=null}static#e=this.\u0275fac=function(i){return new(i||g)};static#l=this.\u0275cmp=e.Xpm({type:g,selectors:[["app-np-file-upload-demo"]],decls:274,vars:30,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["type","info"],["title","Examples"],[3,"ngModel","showFileSize","ngModelChange"],[1,"np-btn-group"],[1,"np-btn",3,"click"],[3,"ngModel","multiple","ngModelChange"],["required","",3,"ngModel","ngModelChange"],["disabled","",3,"ngModel","ngModelChange"],[3,"ngModel","readOnly","ngModelChange"],[3,"ngModel","extensions","ngModelChange"],["fileUpload5Control","ngModel"],["class","np-text-danger",4,"ngIf"],[3,"ngModel","size","ngModelChange"],["fileUpload6Control","ngModel"],[3,"ngModel","multiple","totalSize","ngModelChange"],["fileUpload7Control","ngModel"],[3,"ngModel","multiple","maxFiles","ngModelChange"],["fileUpload8Control","ngModel"],[3,"ngModel","uploadButtonLabel","ngModelChange"],[3,"ngModel","accept","uploadButtonLabel","ngModelChange"],[3,"ngModel","ngModelChange","onChange"],[1,"np-text-danger"]],template:function(i,l){if(1&i&&(e.TgZ(0,"h2",0),e._uU(1,"File Upload"),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,"File[]"),e.qZA(),e._UZ(37,"td"),e.qZA(),e.TgZ(38,"tr")(39,"td"),e._uU(40,"multiple"),e.qZA(),e.TgZ(41,"td"),e._uU(42,"Allow to upload multiple files"),e.qZA(),e.TgZ(43,"td"),e._uU(44,"boolean"),e.qZA(),e.TgZ(45,"td"),e._uU(46,"false"),e.qZA()(),e.TgZ(47,"tr")(48,"td"),e._uU(49,"extensions"),e.qZA(),e.TgZ(50,"td"),e._uU(51," Set extensions to allow to upload "),e._UZ(52,"br"),e._uU(53,"Multiple extension with comma separated like 'png,jpg,jpeg' "),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,"accept"),e.qZA(),e.TgZ(60,"td"),e._uU(61,"Accept verbs for file selector like 'image/*'"),e.qZA(),e.TgZ(62,"td"),e._uU(63,"string"),e.qZA(),e._UZ(64,"td"),e.qZA(),e.TgZ(65,"tr")(66,"td"),e._uU(67,"size"),e.qZA(),e.TgZ(68,"td"),e._uU(69,"Set individual file size validation in bytes"),e.qZA(),e.TgZ(70,"td"),e._uU(71,"number"),e.qZA(),e._UZ(72,"td"),e.qZA(),e.TgZ(73,"tr")(74,"td"),e._uU(75,"totalSize"),e.qZA(),e.TgZ(76,"td"),e._uU(77," Set total file size validation in bytes. Only for multiple file uploads "),e.qZA(),e.TgZ(78,"td"),e._uU(79,"number"),e.qZA(),e._UZ(80,"td"),e.qZA(),e.TgZ(81,"tr")(82,"td"),e._uU(83,"maxFiles"),e.qZA(),e.TgZ(84,"td"),e._uU(85,"Set maximum number of file to upload validation"),e.qZA(),e.TgZ(86,"td"),e._uU(87,"number"),e.qZA(),e._UZ(88,"td"),e.qZA(),e.TgZ(89,"tr")(90,"td"),e._uU(91,"uploadButtonLabel"),e.qZA(),e.TgZ(92,"td"),e._uU(93,"Set upload button text"),e.qZA(),e.TgZ(94,"td"),e._uU(95,"string"),e.qZA(),e.TgZ(96,"td"),e._uU(97,"Choose file/Choose files"),e.qZA()(),e.TgZ(98,"tr")(99,"td"),e._uU(100,"showFileSize"),e.qZA(),e.TgZ(101,"td"),e._uU(102,"Show selected file size"),e.qZA(),e.TgZ(103,"td"),e._uU(104,"boolean"),e.qZA(),e.TgZ(105,"td"),e._uU(106,"true"),e.qZA()(),e.TgZ(107,"tr")(108,"td"),e._uU(109,"disabled"),e.qZA(),e.TgZ(110,"td"),e._uU(111,"Set disabled"),e.qZA(),e.TgZ(112,"td"),e._uU(113,"boolean"),e.qZA(),e.TgZ(114,"td"),e._uU(115,"false"),e.qZA()(),e.TgZ(116,"tr")(117,"td"),e._uU(118,"required"),e.qZA(),e.TgZ(119,"td"),e._uU(120,"Set required"),e.qZA(),e.TgZ(121,"td"),e._uU(122,"boolean"),e.qZA(),e.TgZ(123,"td"),e._uU(124,"false"),e.qZA()(),e.TgZ(125,"tr")(126,"td"),e._uU(127,"readOnly"),e.qZA(),e.TgZ(128,"td"),e._uU(129,"Set readonly"),e.qZA(),e.TgZ(130,"td"),e._uU(131,"boolean"),e.qZA(),e.TgZ(132,"td"),e._uU(133,"false"),e.qZA()(),e.TgZ(134,"tr")(135,"td"),e._uU(136,"autoFocus"),e.qZA(),e.TgZ(137,"td"),e._uU(138,"Set autofocus"),e.qZA(),e.TgZ(139,"td"),e._uU(140,"boolean"),e.qZA(),e.TgZ(141,"td"),e._uU(142,"false"),e.qZA()(),e.TgZ(143,"tr")(144,"td"),e._uU(145,"tabIndex"),e.qZA(),e.TgZ(146,"td"),e._uU(147,"Set tabindex attribute"),e.qZA(),e.TgZ(148,"td"),e._uU(149,"number"),e.qZA(),e._UZ(150,"td"),e.qZA(),e.TgZ(151,"tr")(152,"td"),e._uU(153,"styleClass"),e.qZA(),e.TgZ(154,"td"),e._uU(155,"Set extra class on component"),e.qZA(),e.TgZ(156,"td"),e._uU(157,"string"),e.qZA(),e._UZ(158,"td"),e.qZA(),e.TgZ(159,"tr")(160,"td"),e._uU(161,"inputId"),e.qZA(),e.TgZ(162,"td"),e._uU(163,"Set id attribute"),e.qZA(),e.TgZ(164,"td"),e._uU(165,"string"),e.qZA(),e._UZ(166,"td"),e.qZA()(),e.TgZ(167,"np-alert",4),e._uU(168," There are four control validations for extensions, size, totalSize, maxFiles. "),e.qZA()()(),e.TgZ(169,"np-card")(170,"np-card-body")(171,"table",3)(172,"tr")(173,"th"),e._uU(174,"Method"),e.qZA(),e.TgZ(175,"th"),e._uU(176,"Description"),e.qZA(),e.TgZ(177,"th"),e._uU(178,"Parameters"),e.qZA()(),e.TgZ(179,"tr")(180,"td"),e._uU(181,"onChange(v: File[])"),e.qZA(),e.TgZ(182,"td"),e._uU(183,"Callback event on value change."),e.qZA(),e.TgZ(184,"td"),e._uU(185,"Value"),e.qZA()(),e.TgZ(186,"tr")(187,"td"),e._uU(188,"onFocus($event)"),e.qZA(),e.TgZ(189,"td"),e._uU(190,"Callback event on input focus."),e.qZA(),e.TgZ(191,"td"),e._uU(192,"Browser event"),e.qZA()(),e.TgZ(193,"tr")(194,"td"),e._uU(195,"onBlur($event)"),e.qZA(),e.TgZ(196,"td"),e._uU(197,"Callback event on input blur."),e.qZA(),e.TgZ(198,"td"),e._uU(199,"Browser event"),e.qZA()()()()(),e.TgZ(200,"np-card")(201,"np-card-body")(202,"table",3)(203,"tr")(204,"th"),e._uU(205,"Api"),e.qZA(),e.TgZ(206,"th"),e._uU(207,"Description"),e.qZA(),e.TgZ(208,"th"),e._uU(209,"Parameters"),e.qZA()(),e.TgZ(210,"tr")(211,"td"),e._uU(212,"focus()"),e.qZA(),e.TgZ(213,"td"),e._uU(214," Set focus on control. If not setting focus properly then use timeout of 500ms. "),e.qZA(),e._UZ(215,"td"),e.qZA()()()()(),e.TgZ(216,"np-tab",5)(217,"fieldset")(218,"legend"),e._uU(219,"Single file upload"),e.qZA(),e.TgZ(220,"np-file-upload",6),e.NdJ("ngModelChange",function(n){return l.fileUpload1=n}),e.qZA(),e.TgZ(221,"div",7)(222,"button",8),e.NdJ("click",function(){return l.SetNullValue()}),e._uU(223,"Set null"),e.qZA()()(),e.TgZ(224,"fieldset")(225,"legend"),e._uU(226,"Multiple file upload"),e.qZA(),e.TgZ(227,"np-file-upload",9),e.NdJ("ngModelChange",function(n){return l.fileUpload2=n}),e.qZA()(),e.TgZ(228,"fieldset")(229,"legend"),e._uU(230,"required"),e.qZA(),e.TgZ(231,"np-file-upload",10),e.NdJ("ngModelChange",function(n){return l.fileUpload3=n}),e.qZA()(),e.TgZ(232,"fieldset")(233,"legend"),e._uU(234,"disabled and readOnly"),e.qZA(),e.TgZ(235,"np-file-upload",11),e.NdJ("ngModelChange",function(n){return l.fileUpload4=n}),e.qZA(),e._UZ(236,"br"),e.TgZ(237,"np-file-upload",12),e.NdJ("ngModelChange",function(n){return l.fileUpload4=n}),e.qZA()(),e.TgZ(238,"fieldset")(239,"legend"),e._uU(240,"File extensions validation for png, jpg, jpeg"),e.qZA(),e.TgZ(241,"np-file-upload",13,14),e.NdJ("ngModelChange",function(n){return l.fileUpload5=n}),e.qZA(),e.YNc(243,A,2,0,"div",15),e.qZA(),e.TgZ(244,"fieldset")(245,"legend"),e._uU(246,"File size for 1000 bytes"),e.qZA(),e.TgZ(247,"np-file-upload",16,17),e.NdJ("ngModelChange",function(n){return l.fileUpload6=n}),e.qZA(),e.YNc(249,q,2,0,"div",15),e.qZA(),e.TgZ(250,"fieldset")(251,"legend"),e._uU(252,"Total file size 1000 bytes for multiple uploads"),e.qZA(),e.TgZ(253,"np-file-upload",18,19),e.NdJ("ngModelChange",function(n){return l.fileUpload7=n}),e.qZA(),e.YNc(255,m,2,0,"div",15),e.qZA(),e.TgZ(256,"fieldset")(257,"legend"),e._uU(258,"Max 2 files allowed to select"),e.qZA(),e.TgZ(259,"np-file-upload",20,21),e.NdJ("ngModelChange",function(n){return l.fileUpload8=n}),e.qZA(),e.YNc(261,c,2,0,"div",15),e.qZA(),e.TgZ(262,"fieldset")(263,"legend"),e._uU(264,"Upload button label"),e.qZA(),e.TgZ(265,"np-file-upload",22),e.NdJ("ngModelChange",function(n){return l.fileUpload9=n}),e.qZA()(),e.TgZ(266,"fieldset")(267,"legend"),e._uU(268,"Accept only images"),e.qZA(),e.TgZ(269,"np-file-upload",23),e.NdJ("ngModelChange",function(n){return l.fileUpload10=n}),e.qZA()(),e.TgZ(270,"fieldset")(271,"legend"),e._uU(272,"onChange event"),e.qZA(),e.TgZ(273,"np-file-upload",24),e.NdJ("ngModelChange",function(n){return l.fileUpload11=n})("onChange",function(n){return l.onChange(n)}),e.qZA()()()()),2&i){const t=e.MAs(242),n=e.MAs(248),f=e.MAs(254),T=e.MAs(260);e.xp6(10),e.Q6J("innerText",l.importText),e.xp6(7),e.Q6J("innerText",l.htmlText),e.xp6(203),e.Q6J("ngModel",l.fileUpload1)("showFileSize",!1),e.xp6(7),e.Q6J("ngModel",l.fileUpload2)("multiple",!0),e.xp6(4),e.Q6J("ngModel",l.fileUpload3),e.xp6(4),e.Q6J("ngModel",l.fileUpload4),e.xp6(2),e.Q6J("ngModel",l.fileUpload4)("readOnly",!0),e.xp6(4),e.Q6J("ngModel",l.fileUpload5)("extensions","png,jpg,jpeg"),e.xp6(2),e.Q6J("ngIf",t.errors&&t.errors.extensions),e.xp6(4),e.Q6J("ngModel",l.fileUpload6)("size",1e3),e.xp6(2),e.Q6J("ngIf",n.errors&&n.errors.size),e.xp6(4),e.Q6J("ngModel",l.fileUpload7)("multiple",!0)("totalSize",1e3),e.xp6(2),e.Q6J("ngIf",f.errors&&f.errors.totalSize),e.xp6(4),e.Q6J("ngModel",l.fileUpload8)("multiple",!0)("maxFiles",2),e.xp6(2),e.Q6J("ngIf",T.errors&&T.errors.maxFiles),e.xp6(4),e.Q6J("ngModel",l.fileUpload9)("uploadButtonLabel","Upload your photo"),e.xp6(4),e.Q6J("ngModel",l.fileUpload10)("accept","image/*")("uploadButtonLabel","Upload your photo"),e.xp6(4),e.Q6J("ngModel",l.fileUpload11)}},dependencies:[s.O5,u.JJ,u.Q7,u.On,o.rt,o.KA,o.Qk,o.c0,o.El,o.r5],encapsulation:2})}const h=[{path:"",component:g}];class Z{static#e=this.\u0275fac=function(i){return new(i||Z)};static#l=this.\u0275mod=e.oAB({type:Z});static#n=this.\u0275inj=e.cJS({imports:[U.Bz.forChild(h),U.Bz]})}class _{static#e=this.\u0275fac=function(i){return new(i||_)};static#l=this.\u0275mod=e.oAB({type:_});static#n=this.\u0275inj=e.cJS({imports:[s.ez,u.u5,Z,o.OX,o.i7,o.Tk,o.qp]})}}}]);