3699.d8909896b594e56d.js

"use strict";(self.webpackChunknp_ui_lib_app=self.webpackChunknp_ui_lib_app||[]).push([[3699],{3699:(U,Z,p)=>{p.r(Z),p.d(Z,{NpTooltipDemoModule:()=>s});var r=p(6895),c=p(8379),t=p(4650),e=p(5499);function T(a,n){if(1&a&&(t.TgZ(0,"u"),t._uU(1),t.qZA()),2&a){const o=n.count;t.xp6(1),t.hij("This is top tooltip. Count pass in context is ",o,"")}}function m(a,n){1&a&&(t.TgZ(0,"i"),t._uU(1,"This is bottom tooltip"),t.qZA())}const d=function(){return{count:5}};class i{constructor(){this.importText="import { NpTooltipModule } from 'np-ui-lib';",this.htmlText="<span [npTooltip]=\"'This is left tooltip.'\" [placement]=\"'left'\">\n  Hover me for left tooltip\n</span>",this.contextText='<span [npTooltip]="tooltipTemp" [context]="{count: 5}">\n  Hover me for top tooltip, with ng-template.\n</span>\n<ng-template #tooltipTemp let-count="count">\n  Count pass in context is {{count}}\n</ng-template>'}ngOnInit(){}static#t=this.\u0275fac=function(o){return new(o||i)};static#o=this.\u0275cmp=t.Xpm({type:i,selectors:[["app-np-tooltip-demo"]],decls:110,vars:17,consts:[[1,"page-header"],["title","Documentation"],[3,"innerText"],[1,"np-table"],["title","Examples"],[3,"npTooltip","placement"],[3,"npTooltip","placement","styleClass"],[3,"npTooltip","placement","context","width"],["tooltipTop",""],["tooltipBottom",""],["type","text","placeholder","Tooltip on focus",1,"np-form-control",2,"width","200px",3,"npTooltip","tooltipOnFocus"]],template:function(o,u){if(1&o&&(t.TgZ(0,"h2",0),t._uU(1,"Tooltip"),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,"npTooltip"),t.qZA(),t.TgZ(33,"td"),t._uU(34,"Text or ng-template reference"),t.qZA(),t.TgZ(35,"td"),t._uU(36,"string | TemplateRef<any>"),t.qZA(),t._UZ(37,"td"),t.qZA(),t.TgZ(38,"tr")(39,"td"),t._uU(40,"width"),t.qZA(),t.TgZ(41,"td"),t._uU(42," Set width. Values should be like '100%', '100px', 200. If pass as number then it will considered as px. "),t.qZA(),t.TgZ(43,"td"),t._uU(44,"number"),t.qZA(),t._UZ(45,"td"),t.qZA(),t.TgZ(46,"tr")(47,"td"),t._uU(48,"context"),t.qZA(),t.TgZ(49,"td"),t._uU(50," Pass data to template "),t.TgZ(51,"pre")(52,"code"),t._uU(53),t.qZA()()(),t.TgZ(54,"td"),t._uU(55,"any"),t.qZA(),t._UZ(56,"td"),t.qZA(),t.TgZ(57,"tr")(58,"td"),t._uU(59,"placement"),t.qZA(),t.TgZ(60,"td"),t._uU(61," Set tooltip position from 'left' | 'right' | 'top' | 'bottom' "),t.qZA(),t.TgZ(62,"td"),t._uU(63,"string"),t.qZA(),t.TgZ(64,"td"),t._uU(65,"bottom"),t.qZA()(),t.TgZ(66,"tr")(67,"td"),t._uU(68,"tooltipOnFocus"),t.qZA(),t.TgZ(69,"td"),t._uU(70,"Show tooltip on focus of input control"),t.qZA(),t.TgZ(71,"td"),t._uU(72,"boolean"),t.qZA(),t.TgZ(73,"td"),t._uU(74,"false"),t.qZA()(),t.TgZ(75,"tr")(76,"td"),t._uU(77,"styleClass"),t.qZA(),t.TgZ(78,"td"),t._uU(79,"Set extra class on component"),t.qZA(),t.TgZ(80,"td"),t._uU(81,"string"),t.qZA(),t._UZ(82,"td"),t.qZA(),t.TgZ(83,"tr")(84,"td"),t._uU(85,"inputId"),t.qZA(),t.TgZ(86,"td"),t._uU(87,"Set id attribute"),t.qZA(),t.TgZ(88,"td"),t._uU(89,"string"),t.qZA(),t._UZ(90,"td"),t.qZA()()()()(),t.TgZ(91,"np-tab",4)(92,"p")(93,"span",5),t._uU(94," Hover me for left tooltip "),t.qZA()(),t.TgZ(95,"p")(96,"span",6),t._uU(97," Hover me for right tooltip, with [styleClass] attribute. "),t.qZA()(),t.TgZ(98,"p")(99,"span",7),t._uU(100," Hover me for top tooltip, with ng-template. "),t.YNc(101,T,2,1,"ng-template",null,8,t.W1O),t.qZA()(),t.TgZ(103,"p")(104,"span",5),t._uU(105," Hover me for bottom tooltip, with ng-template. "),t.YNc(106,m,2,0,"ng-template",null,9,t.W1O),t.qZA()(),t.TgZ(108,"p"),t._UZ(109,"input",10),t.qZA()()()),2&o){const A=t.MAs(102),h=t.MAs(107);t.xp6(10),t.Q6J("innerText",u.importText),t.xp6(7),t.Q6J("innerText",u.htmlText),t.xp6(36),t.Oqu(u.contextText),t.xp6(40),t.Q6J("npTooltip","This is left tooltip.")("placement","left"),t.xp6(3),t.Q6J("npTooltip","This is right tooltip.")("placement","right")("styleClass","myClass"),t.xp6(3),t.Q6J("npTooltip",A)("placement","top")("context",t.DdM(16,d))("width",100),t.xp6(5),t.Q6J("npTooltip",h)("placement","bottom"),t.xp6(5),t.Q6J("npTooltip","Enter your name.")("tooltipOnFocus",!0)}},dependencies:[e.Y2,e.KA,e.Qk,e.c0,e.El],encapsulation:2})}const g=[{path:"",component:i}];class l{static#t=this.\u0275fac=function(o){return new(o||l)};static#o=this.\u0275mod=t.oAB({type:l});static#e=this.\u0275inj=t.cJS({imports:[c.Bz.forChild(g),c.Bz]})}class s{static#t=this.\u0275fac=function(o){return new(o||s)};static#o=this.\u0275mod=t.oAB({type:s});static#e=this.\u0275inj=t.cJS({imports:[r.ez,l,e.Yv,e.i7,e.Tk]})}}}]);