3027.009b134ab3d41262.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[3027],{3027:(m,c,r)=>{r.r(c),r.d(c,{NpRichTextDemoModule:()=>Z});var p=r(6895),T=r(8379),t=r(4650),i=r(5499),l=r(433);function h(s,d){1&s&&(t.TgZ(0,"div",10),t._uU(1," Min length 10 characters. "),t.qZA())}function _(s,d){1&s&&(t.TgZ(0,"div",10),t._uU(1," Max length 200 characters. "),t.qZA())}class u{constructor(){this.importText="import { NpRichTextModule } from 'np-ui-lib';",this.htmlText='<np-rich-text [(ngModel)]="value"></np-rich-text>',this.configText="['bold', 'italic', 'underline', 'strikethrough', 'removeformat',\n'formatblock', 'blockquote', 'fontname', 'fontsize', 'forecolor', 'backcolor',\n'subscript', 'superscript', 'justifyleft', 'justifycenter', 'justifyright',\n'indent', 'outdent', 'insertunorderedlist', 'insertorderedlist', 'createlink',\n'undo', 'redo']",this.fontText="['Arial', 'Arial Black', 'Courier New', 'Times New Roman']",this.isDisabled=!1,this.isReadonly=!1,this.required=!1,this.config=["bold","italic","underline","strikethrough","removeformat","formatblock","blockquote","fontname","fontsize"],this.fonts=["Arial","Arial Black"]}ngOnInit(){}setValue(){this.rtf1='<p><h1><font color="#007bff"><a href="http://npmjs.com/np-ui-lib">NP-UI-LIB</a></font></h1><h4>\n    <font color="#007bff"><i>Native Angular UI Components and Design Framework</i></font></h4></p>\n    <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><h3>Why np-ui-lib?</h3></p>\n    </blockquote><p><ul><li>An enterprise level UI design</li><li>50+ components</li>\n    <li>Free and open source</li><li>Fast and easy to implement</li><li>Theming and i18N supported</li><li>No 3rd party dependencies</li>\n    </ul></p><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><p><h3>Best Practices</h3></p>\n    </blockquote><p><ul><li>Followed best coding practices</li><li>Responsive UI design</li>\n    <li>Good documentation</li><li>Flexible to customization</li><li>WAI-ARIA included</li><li>Support modern browsers</li></ul></p>'}static#t=this.\u0275fac=function(o){return new(o||u)};static#e=this.\u0275cmp=t.Xpm({type:u,selectors:[["app-np-rich-text-demo"]],decls:217,vars:20,consts:[[1,"page-header"],[3,"title"],[3,"innerText"],[1,"np-table"],[3,"ngModel","disabled","readOnly","required","height","ngModelChange"],[1,"np-btn-group"],[1,"np-btn",3,"click"],[3,"ngModel","height","config","minLength","maxLength","fonts","ngModelChange"],["rtf2Input","ngModel"],["class","np-text-danger",4,"ngIf"],[1,"np-text-danger"]],template:function(o,e){if(1&o&&(t.TgZ(0,"h2",0),t._uU(1,"Rich Text"),t.qZA(),t.TgZ(2,"np-tabs")(3,"np-tab",1)(4,"np-card")(5,"np-card-body")(6,"b"),t._uU(7,"Module to import"),t.qZA(),t.TgZ(8,"div")(9,"pre"),t._UZ(10,"code",2),t.qZA()()()(),t.TgZ(11,"np-card")(12,"np-card-body")(13,"b"),t._uU(14,"HTML"),t.qZA(),t.TgZ(15,"div")(16,"pre"),t._UZ(17,"code",2),t.qZA()()()(),t.TgZ(18,"np-card")(19,"np-card-body")(20,"table",3)(21,"tr")(22,"th"),t._uU(23,"Property"),t.qZA(),t.TgZ(24,"th"),t._uU(25,"Description"),t.qZA(),t.TgZ(26,"th"),t._uU(27,"Type"),t.qZA(),t.TgZ(28,"th"),t._uU(29,"Default"),t.qZA()(),t.TgZ(30,"tr")(31,"td"),t._uU(32,"ngModel"),t.qZA(),t.TgZ(33,"td"),t._uU(34,"Value in string format"),t.qZA(),t.TgZ(35,"td"),t._uU(36,"string"),t.qZA(),t._UZ(37,"td"),t.qZA(),t.TgZ(38,"tr")(39,"td"),t._uU(40,"config"),t.qZA(),t.TgZ(41,"td"),t._uU(42," Show/hide commands in editor. By default below all are visible. "),t.TgZ(43,"pre")(44,"code"),t._uU(45),t.qZA()(),t._uU(46," Add only commands name which needs to display "),t.qZA(),t.TgZ(47,"td"),t._uU(48,"string[]"),t.qZA(),t._UZ(49,"td"),t.qZA(),t.TgZ(50,"tr")(51,"td"),t._uU(52,"fonts"),t.qZA(),t.TgZ(53,"td"),t._uU(54," Add fonts name in editor. By default below all are available. "),t.TgZ(55,"pre")(56,"code"),t._uU(57),t.qZA()()(),t.TgZ(58,"td"),t._uU(59,"string[]"),t.qZA(),t._UZ(60,"td"),t.qZA(),t.TgZ(61,"tr")(62,"td"),t._uU(63,"minLength"),t.qZA(),t.TgZ(64,"td"),t._uU(65,"Set validation for minimum characters count"),t.qZA(),t.TgZ(66,"td"),t._uU(67,"number"),t.qZA(),t._UZ(68,"td"),t.qZA(),t.TgZ(69,"tr")(70,"td"),t._uU(71,"maxLength"),t.qZA(),t.TgZ(72,"td"),t._uU(73,"Set validation for maximum characters count"),t.qZA(),t.TgZ(74,"td"),t._uU(75,"number"),t.qZA(),t._UZ(76,"td"),t.qZA(),t.TgZ(77,"tr")(78,"td"),t._uU(79,"height"),t.qZA(),t.TgZ(80,"td"),t._uU(81,"Set height in px for contenteditable control"),t.qZA(),t.TgZ(82,"td"),t._uU(83,"number"),t.qZA(),t._UZ(84,"td"),t.qZA(),t.TgZ(85,"tr")(86,"td"),t._uU(87,"disabled"),t.qZA(),t.TgZ(88,"td"),t._uU(89,"Set disabled"),t.qZA(),t.TgZ(90,"td"),t._uU(91,"boolean"),t.qZA(),t.TgZ(92,"td"),t._uU(93,"false"),t.qZA()(),t.TgZ(94,"tr")(95,"td"),t._uU(96,"required"),t.qZA(),t.TgZ(97,"td"),t._uU(98,"Set required"),t.qZA(),t.TgZ(99,"td"),t._uU(100,"boolean"),t.qZA(),t.TgZ(101,"td"),t._uU(102,"false"),t.qZA()(),t.TgZ(103,"tr")(104,"td"),t._uU(105,"readOnly"),t.qZA(),t.TgZ(106,"td"),t._uU(107,"Set readonly"),t.qZA(),t.TgZ(108,"td"),t._uU(109,"boolean"),t.qZA(),t.TgZ(110,"td"),t._uU(111,"false"),t.qZA()(),t.TgZ(112,"tr")(113,"td"),t._uU(114,"autoFocus"),t.qZA(),t.TgZ(115,"td"),t._uU(116,"Set autofocus"),t.qZA(),t.TgZ(117,"td"),t._uU(118,"boolean"),t.qZA(),t.TgZ(119,"td"),t._uU(120,"false"),t.qZA()(),t.TgZ(121,"tr")(122,"td"),t._uU(123,"tabIndex"),t.qZA(),t.TgZ(124,"td"),t._uU(125,"Set tabindex attribute"),t.qZA(),t.TgZ(126,"td"),t._uU(127,"number"),t.qZA(),t._UZ(128,"td"),t.qZA(),t.TgZ(129,"tr")(130,"td"),t._uU(131,"styleClass"),t.qZA(),t.TgZ(132,"td"),t._uU(133,"Set extra class on component"),t.qZA(),t.TgZ(134,"td"),t._uU(135,"string"),t.qZA(),t._UZ(136,"td"),t.qZA(),t.TgZ(137,"tr")(138,"td"),t._uU(139,"inputId"),t.qZA(),t.TgZ(140,"td"),t._uU(141,"Set id attribute"),t.qZA(),t.TgZ(142,"td"),t._uU(143,"string"),t.qZA(),t._UZ(144,"td"),t.qZA()()()(),t.TgZ(145,"np-card")(146,"np-card-body")(147,"table",3)(148,"tr")(149,"th"),t._uU(150,"Method"),t.qZA(),t.TgZ(151,"th"),t._uU(152,"Description"),t.qZA(),t.TgZ(153,"th"),t._uU(154,"Parameters"),t.qZA()(),t.TgZ(155,"tr")(156,"td"),t._uU(157,"onChange(v: any)"),t.qZA(),t.TgZ(158,"td"),t._uU(159,"Callback event on value change."),t.qZA(),t.TgZ(160,"td"),t._uU(161,"Value"),t.qZA()(),t.TgZ(162,"tr")(163,"td"),t._uU(164,"onFocus($event)"),t.qZA(),t.TgZ(165,"td"),t._uU(166,"Callback event on input focus."),t.qZA(),t.TgZ(167,"td"),t._uU(168,"Browser event"),t.qZA()(),t.TgZ(169,"tr")(170,"td"),t._uU(171,"onBlur($event)"),t.qZA(),t.TgZ(172,"td"),t._uU(173,"Callback event on input blur."),t.qZA(),t.TgZ(174,"td"),t._uU(175,"Browser event"),t.qZA()()()()(),t.TgZ(176,"np-card")(177,"np-card-body")(178,"table",3)(179,"tr")(180,"th"),t._uU(181,"Api"),t.qZA(),t.TgZ(182,"th"),t._uU(183,"Description"),t.qZA(),t.TgZ(184,"th"),t._uU(185,"Parameters"),t.qZA()(),t.TgZ(186,"tr")(187,"td"),t._uU(188,"focus()"),t.qZA(),t.TgZ(189,"td"),t._uU(190," Set focus on control. If not setting focus properly then use timeout of 500ms. "),t.qZA(),t._UZ(191,"td"),t.qZA()()()()(),t.TgZ(192,"np-tab",1)(193,"fieldset")(194,"legend"),t._uU(195,"Basic"),t.qZA(),t.TgZ(196,"np-rich-text",4),t.NdJ("ngModelChange",function(g){return e.rtf1=g}),t.qZA(),t.TgZ(197,"div",5)(198,"button",6),t.NdJ("click",function(){return e.setValue()}),t._uU(199,"Set value"),t.qZA(),t.TgZ(200,"button",6),t.NdJ("click",function(){return e.isDisabled=!e.isDisabled}),t._uU(201," Toggle Disabled "),t.qZA(),t.TgZ(202,"button",6),t.NdJ("click",function(){return e.isReadonly=!e.isReadonly}),t._uU(203," Toggle Readonly "),t.qZA(),t.TgZ(204,"button",6),t.NdJ("click",function(){return e.required=!e.required}),t._uU(205," Toggle Required "),t.qZA(),t.TgZ(206,"button",6),t.NdJ("click",function(){return e.height=200}),t._uU(207,"Set height 200px"),t.qZA()(),t.TgZ(208,"div"),t._uU(209),t.qZA()(),t.TgZ(210,"fieldset")(211,"legend"),t._uU(212,"config ,fonts, minLength, maxLength"),t.qZA(),t.TgZ(213,"np-rich-text",7,8),t.NdJ("ngModelChange",function(g){return e.rtf2=g}),t.qZA(),t.YNc(215,h,2,0,"div",9),t.YNc(216,_,2,0,"div",9),t.qZA()()()),2&o){const n=t.MAs(214);t.xp6(3),t.Q6J("title","Documentation"),t.xp6(7),t.Q6J("innerText",e.importText),t.xp6(7),t.Q6J("innerText",e.htmlText),t.xp6(28),t.Oqu(e.configText),t.xp6(12),t.Oqu(e.fontText),t.xp6(135),t.Q6J("title","Examples"),t.xp6(4),t.Q6J("ngModel",e.rtf1)("disabled",e.isDisabled)("readOnly",e.isReadonly)("required",e.required)("height",e.height),t.xp6(13),t.hij("Value: ",e.rtf1,""),t.xp6(4),t.Q6J("ngModel",e.rtf2)("height",200)("config",e.config)("minLength",10)("maxLength",200)("fonts",e.fonts),t.xp6(2),t.Q6J("ngIf",n.errors&&n.errors.minLength),t.xp6(1),t.Q6J("ngIf",n.errors&&n.errors.maxLength)}},dependencies:[p.O5,i.A9,l.JJ,l.Q7,l.On,i.KA,i.Qk,i.c0,i.El],encapsulation:2})}const A=[{path:"",component:u}];class a{static#t=this.\u0275fac=function(o){return new(o||a)};static#e=this.\u0275mod=t.oAB({type:a});static#n=this.\u0275inj=t.cJS({imports:[T.Bz.forChild(A),T.Bz]})}class Z{static#t=this.\u0275fac=function(o){return new(o||Z)};static#e=this.\u0275mod=t.oAB({type:Z});static#n=this.\u0275inj=t.cJS({imports:[p.ez,a,i.Iq,l.u5,i.i7,i.Tk]})}}}]);