1300.150198b4cf1f0a5f.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[1300],{1300:(A,u,s)=>{s.r(u),s.d(u,{NpModalDemoModule:()=>c});var g=s(6895),Z=s(8379),o=s(5499),n=s(433),e=s(4650);class l{constructor(i){this.ref=i,this.isActive=!0,this.myForm=new n.nJ({firstName:new n.p4("",n.kI.required),lastName:new n.p4("",n.kI.required),birthDate:new n.p4(null,n.kI.required),birthTime:new n.p4("",n.kI.required),isActive:new n.p4(!1,n.kI.required),description:new n.p4("",n.kI.required)})}ngOnInit(){}submit(){this.myForm.invalid?this.markFormGroupTouched(this.myForm):this.close()}markFormGroupTouched(i){Object.values(i.controls).forEach(t=>{t.markAsTouched(),t.controls&&this.markFormGroupTouched(t)})}close(){this.ref.close()}static#e=this.\u0275fac=function(t){return new(t||l)(e.Y36(o.yD))};static#t=this.\u0275cmp=e.Xpm({type:l,selectors:[["app-np-modal-demo-child"]],decls:41,vars:2,consts:[[3,"formGroup"],[1,"np-container"],[1,"np-row"],[1,"np-col-6"],[1,"np-form-group"],[1,"np-form-label","np-required"],["type","text","formControlName","firstName","name","txtFirstName",1,"np-form-control",3,"npAutofocus"],["type","text","formControlName","lastName","name","txtLastName",1,"np-form-control"],["formControlName","birthDate","name","txtBirthDate"],["formControlName","birthTime","name","txtBirthTime"],[1,"np-col-12"],["formControlName","isActive","name","swIsActive"],["rows","3","formControlName","description","name","txtDescription",1,"np-form-control"],[1,"np-btn-group","np-float-right"],["type","submit",1,"np-btn","np-btn-primary",3,"click"],["type","button",1,"np-btn","np-btn-danger",3,"click"]],template:function(t,a){1&t&&(e.TgZ(0,"form",0)(1,"div",1)(2,"div",2)(3,"div",3)(4,"div",4)(5,"div",5),e._uU(6,"First name:"),e.qZA(),e._UZ(7,"input",6),e.qZA()(),e.TgZ(8,"div",3)(9,"div",4)(10,"div",5),e._uU(11,"Last name:"),e.qZA(),e._UZ(12,"input",7),e.qZA()()(),e.TgZ(13,"div",2)(14,"div",3)(15,"div",4)(16,"div",5),e._uU(17,"Birth date:"),e.qZA(),e._UZ(18,"np-date-picker",8),e.qZA()(),e.TgZ(19,"div",3)(20,"div",4)(21,"div",5),e._uU(22,"Birth time:"),e.qZA(),e._UZ(23,"np-time-picker",9),e.qZA()()(),e.TgZ(24,"div",2)(25,"div",10)(26,"div",4)(27,"div",5),e._uU(28,"Is Active:"),e.qZA(),e._UZ(29,"np-switch",11),e.qZA()()(),e.TgZ(30,"div",2)(31,"div",10)(32,"div",4)(33,"div",5),e._uU(34,"Description:"),e.qZA(),e._UZ(35,"textarea",12),e.qZA()()(),e.TgZ(36,"div",13)(37,"button",14),e.NdJ("click",function(){return a.submit()}),e._uU(38," Save "),e.qZA(),e.TgZ(39,"button",15),e.NdJ("click",function(){return a.close()}),e._uU(40," Close "),e.qZA()()()()),2&t&&(e.Q6J("formGroup",a.myForm),e.xp6(7),e.Q6J("npAutofocus",!0))},dependencies:[n._Y,n.Fj,n.JJ,n.JL,n.sg,n.u,o.bg,o.Et,o.Mc,o.db],encapsulation:2})}const h=["modal2"];function T(m,i){if(1&m){const t=e.EpF();e._uU(0),e.TgZ(1,"button",7),e.NdJ("click",function(){const f=e.CHM(t).close;return e.KtG(f())}),e._uU(2,"Close"),e.qZA(),e.TgZ(3,"p"),e._uU(4," A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. "),e.qZA(),e.TgZ(5,"p"),e._uU(6," A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. "),e.qZA(),e.TgZ(7,"p"),e._uU(8," A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. "),e.qZA(),e.TgZ(9,"p"),e._uU(10," A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. "),e.qZA()}2&m&&e.hij(" ",i.data.name," ")}class d{constructor(i){this.modalService=i,this.importText="import { NpModalModule } from 'np-ui-lib';",this.serviceInjectText="constructor(private modalService: NpModalService) { }",this.modalOpenText="this.modalService.open('Modal text', config, null);",this.configText="const config = new NpModalConfig({ height: 400, width: 400, hasBackDrop: false });",this.stringModalText="this.modalService.open('Basic modal with string content', null, null);",this.templateModalText="@ViewChild('modalTemplate', { static: true }) modalTemplate: TemplateRef<any>;\nthis.modalService.open(this.modalTemplate, null, null);",this.componentModalText='<span class="np-text-success">// Where NpModalDemoChildComponent is another component</span>\nthis.modalService.open(NpModalDemoChildComponent, null, null);',this.overlayRefText="constructor(private ref: NpModalRef) { }",this.subscribeText='let reference = this.modalService.open(NpModalDemoChildComponent, null, null);\nreference.onClose.subscribe((data) => { <span class="np-text-success">... // do something on modal close</span> });\nreference.close(data) <span class="np-text-success">// use this method to close modal<span>',this.closeText='this.ref.close(data) <span class="np-text-success">// use this method to close modal</span>'}ngOnInit(){}openModal1(){this.modalService.open("A paragraph is a series of sentences that are organized and coherent,\n     and are all related to a single topic.",new o.Dm({header:"<h4>Modal Header</h4>"}),null)}openModal2(){const i=new o.Dm({height:"50%",width:400,hasBackDrop:!1,header:"<h4>What is paragraph?</h4>",inputId:"templateModal",styleClass:"myClass"});this.modalService.open(this.modal2,i,{name:"This name is passed as context np-ui-lib"})}openModal3(){this.modalService.open(l,new o.Dm({header:"<h4>Personal Details</h4>"}),null).onClose.subscribe(this.onCloseModal3)}onCloseModal3(){alert("Modal closed")}static#e=this.\u0275fac=function(t){return new(t||d)(e.Y36(o.Vu))};static#t=this.\u0275cmp=e.Xpm({type:d,selectors:[["app-np-modal-demo"]],viewQuery:function(t,a){if(1&t&&e.Gf(h,7),2&t){let r;e.iGM(r=e.CRH())&&(a.modal2=r.first)}},decls:221,vars:10,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],[3,"innerHTML"],["title","Examples"],[1,"np-btn-group"],[1,"np-btn",3,"click"],["modal2",""]],template:function(t,a){1&t&&(e.TgZ(0,"h2",0),e._uU(1,"Modal"),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,"NpModalService"),e.qZA(),e.TgZ(15,"p"),e._uU(16,"Inject NpModalService into constructor of component"),e.qZA(),e.TgZ(17,"div")(18,"pre"),e._UZ(19,"code",2),e.qZA()()()(),e.TgZ(20,"np-card")(21,"np-card-body")(22,"b"),e._uU(23,"How to open modal?"),e.qZA(),e.TgZ(24,"div")(25,"pre"),e._UZ(26,"code",2),e.qZA()(),e.TgZ(27,"b"),e._uU(28,"open(content: string | TemplateRef<any> | Type<any>, config: NpModalConfig, data: any): NpModalRef;"),e.qZA(),e.TgZ(29,"p"),e._uU(30," Here open method has 3 parameters, and this method return the overlay reference object of class "),e.TgZ(31,"b"),e._uU(32,"NpModalRef"),e.qZA()(),e.TgZ(33,"table",3)(34,"tr")(35,"th"),e._uU(36,"Parameter"),e.qZA(),e.TgZ(37,"th"),e._uU(38,"Description"),e.qZA(),e.TgZ(39,"th"),e._uU(40,"Type"),e.qZA()(),e.TgZ(41,"tr")(42,"td"),e._uU(43,"content"),e.qZA(),e.TgZ(44,"td"),e._uU(45," Pass content of modal "),e.TgZ(46,"pre"),e._UZ(47,"code",2),e.qZA(),e.TgZ(48,"pre"),e._UZ(49,"code",2),e.qZA(),e._uU(50," Here for modalTemplate, let-data and let-close are available, where data is value passed in open method, and close is a method to close modal. "),e.TgZ(51,"pre"),e._UZ(52,"code",4),e.qZA()(),e.TgZ(53,"td"),e._uU(54,"string | TemplateRef<any> | Type<any>"),e.qZA()(),e.TgZ(55,"tr")(56,"td"),e._uU(57,"config"),e.qZA(),e.TgZ(58,"td"),e._uU(59," Pass modal config with below properties. "),e.TgZ(60,"table",3)(61,"tr")(62,"th"),e._uU(63,"Property"),e.qZA(),e.TgZ(64,"th"),e._uU(65,"Description"),e.qZA(),e.TgZ(66,"th"),e._uU(67,"Type"),e.qZA(),e.TgZ(68,"th"),e._uU(69,"Default"),e.qZA()(),e.TgZ(70,"tr")(71,"td"),e._uU(72,"header"),e.qZA(),e.TgZ(73,"td"),e._uU(74,"Header text"),e.qZA(),e.TgZ(75,"td"),e._uU(76,"string | html"),e.qZA(),e._UZ(77,"td"),e.qZA(),e.TgZ(78,"tr")(79,"td"),e._uU(80,"height"),e.qZA(),e.TgZ(81,"td"),e._uU(82," Set height. Values should be like '100%', '100px', 200. If pass as number then it will considered as px. "),e.qZA(),e.TgZ(83,"td"),e._uU(84,"number | string"),e.qZA(),e._UZ(85,"td"),e.qZA(),e.TgZ(86,"tr")(87,"td"),e._uU(88,"width"),e.qZA(),e.TgZ(89,"td"),e._uU(90," Set width. Values should be like '100%', '100px', 200. If pass as number then it will considered as px. "),e.qZA(),e.TgZ(91,"td"),e._uU(92,"number | string"),e.qZA(),e._UZ(93,"td"),e.qZA(),e.TgZ(94,"tr")(95,"td"),e._uU(96,"hasBackDrop"),e.qZA(),e.TgZ(97,"td"),e._uU(98,"Has backdrop or not"),e.qZA(),e.TgZ(99,"td"),e._uU(100,"boolean"),e.qZA(),e.TgZ(101,"td"),e._uU(102,"true"),e.qZA()(),e.TgZ(103,"tr")(104,"td"),e._uU(105,"backDropClass"),e.qZA(),e.TgZ(106,"td"),e._uU(107,"Backdrop class name"),e.qZA(),e.TgZ(108,"td"),e._uU(109,"string"),e.qZA(),e.TgZ(110,"td"),e._uU(111,"np-modal-backdrop"),e.qZA()(),e.TgZ(112,"tr")(113,"td"),e._uU(114,"showCloseButton"),e.qZA(),e.TgZ(115,"td"),e._uU(116,"Show close button or not"),e.qZA(),e.TgZ(117,"td"),e._uU(118,"boolean"),e.qZA(),e.TgZ(119,"td"),e._uU(120,"true"),e.qZA()(),e.TgZ(121,"tr")(122,"td"),e._uU(123,"closeOnClickOutside"),e.qZA(),e.TgZ(124,"td"),e._uU(125,"Close modal on outside click or not"),e.qZA(),e.TgZ(126,"td"),e._uU(127,"boolean"),e.qZA(),e.TgZ(128,"td"),e._uU(129,"true"),e.qZA()(),e.TgZ(130,"tr")(131,"td"),e._uU(132,"styleClass"),e.qZA(),e.TgZ(133,"td"),e._uU(134,"Set extra class on component"),e.qZA(),e.TgZ(135,"td"),e._uU(136,"string"),e.qZA(),e._UZ(137,"td"),e.qZA(),e.TgZ(138,"tr")(139,"td"),e._uU(140,"inputId"),e.qZA(),e.TgZ(141,"td"),e._uU(142,"Set id attribute"),e.qZA(),e.TgZ(143,"td"),e._uU(144,"string"),e.qZA(),e._UZ(145,"td"),e.qZA()(),e.TgZ(146,"pre"),e._UZ(147,"code",4),e.qZA()(),e.TgZ(148,"td"),e._uU(149,"NpModalConfig"),e.qZA()(),e.TgZ(150,"tr")(151,"td"),e._uU(152,"data"),e.qZA(),e.TgZ(153,"td"),e._uU(154," Pass data to dialog, for template this data is available as context. "),e.qZA(),e.TgZ(155,"td"),e._uU(156,"any"),e.qZA()()()()(),e.TgZ(157,"np-card")(158,"np-card-body")(159,"b"),e._uU(160,"How to subscribe onClose method of modal?"),e.qZA(),e.TgZ(161,"p")(162,"b"),e._uU(163,"open"),e.qZA(),e._uU(164," method returns overlay reference object, which has property "),e.TgZ(165,"b"),e._uU(166,"onClose: Subject<any>"),e.qZA()(),e.TgZ(167,"pre"),e._UZ(168,"code",4),e.qZA()()(),e.TgZ(169,"np-card")(170,"np-card-body")(171,"b"),e._uU(172,"How to access data and NpModalRef object in another component?"),e.qZA(),e.TgZ(173,"p"),e._uU(174," In another component, overlay reference is injected using injector. "),e.qZA(),e.TgZ(175,"pre"),e._UZ(176,"code",4),e.qZA(),e.TgZ(177,"p"),e._uU(178," Here "),e.TgZ(179,"b"),e._uU(180,"ref"),e.qZA(),e._uU(181," object contains "),e.TgZ(182,"b"),e._uU(183,"data: any"),e.qZA(),e._uU(184," and "),e.TgZ(185,"b"),e._uU(186,"close(data: any)"),e.qZA(),e._uU(187," method. Which will close overlay. "),e.qZA(),e.TgZ(188,"p"),e._uU(189," Pass response data in close(data: any) method's parameter, which will be accessible where "),e.TgZ(190,"b"),e._uU(191,"onClose"),e.qZA(),e._uU(192," is subscribed. "),e.qZA(),e.TgZ(193,"p"),e._uU(194," Use overlay reference's "),e.TgZ(195,"b"),e._uU(196,"close()"),e.qZA(),e._uU(197," method to close modal from another component. "),e.qZA(),e.TgZ(198,"pre"),e._UZ(199,"code",4),e.qZA()()()(),e.TgZ(200,"np-tab",5)(201,"fieldset")(202,"legend"),e._uU(203,"Text"),e.qZA(),e.TgZ(204,"div",6)(205,"button",7),e.NdJ("click",function(){return a.openModal1()}),e._uU(206,"Open Modal"),e.qZA()()(),e.TgZ(207,"fieldset")(208,"legend"),e._uU(209,"TemplateRef<any>"),e.qZA(),e.YNc(210,T,11,1,"ng-template",null,8,e.W1O),e.TgZ(212,"div",6)(213,"button",7),e.NdJ("click",function(){return a.openModal2()}),e._uU(214,"Open Modal"),e.qZA()()(),e.TgZ(215,"fieldset")(216,"legend"),e._uU(217,"Type<any>"),e.qZA(),e.TgZ(218,"div",6)(219,"button",7),e.NdJ("click",function(){return a.openModal3()}),e._uU(220,"Open Modal"),e.qZA()()()()()),2&t&&(e.xp6(10),e.Q6J("innerText",a.importText),e.xp6(9),e.Q6J("innerText",a.serviceInjectText),e.xp6(7),e.Q6J("innerText",a.modalOpenText),e.xp6(21),e.Q6J("innerText",a.stringModalText),e.xp6(2),e.Q6J("innerText",a.templateModalText),e.xp6(3),e.Q6J("innerHTML",a.componentModalText,e.oJD),e.xp6(95),e.Q6J("innerHTML",a.configText,e.oJD),e.xp6(21),e.Q6J("innerHTML",a.subscribeText,e.oJD),e.xp6(8),e.Q6J("innerHTML",a.overlayRefText,e.oJD),e.xp6(23),e.Q6J("innerHTML",a.closeText,e.oJD))},dependencies:[o.KA,o.Qk,o.c0,o.El],encapsulation:2})}const _=[{path:"",component:d}];class p{static#e=this.\u0275fac=function(t){return new(t||p)};static#t=this.\u0275mod=e.oAB({type:p});static#o=this.\u0275inj=e.cJS({imports:[Z.Bz.forChild(_),Z.Bz]})}class c{static#e=this.\u0275fac=function(t){return new(t||c)};static#t=this.\u0275mod=e.oAB({type:c});static#o=this.\u0275inj=e.cJS({imports:[g.ez,n.UX,p,o.jj,o.ml,o.nD,o.kH,o.i7,o.Tk,o.h$]})}}}]);