text: "use strict";(self.webpackChunkprimeng=self.webpackChunkprimeng||[]).push([[9233],{1254:(z,U,d)=>{d.d(U,{s:()=>L,Q:()=>Q});var i=d(3668),T=d(6019),q=d(3392),y=d(5989),c=d(9814),w=d(1197);function I(l,u){if(1&l&&(i.TgZ(0,"span",10),i._uU(1),i.qZA()),2&l){const t=i.oxw(2);i.uIk("id",t.id+"_header"),i.xp6(1),i.Oqu(t.header)}}function C(l,u){1&l&&i.GkF(0)}function k(l,u){}function b(l,u){1&l&&i.YNc(0,k,0,0,"ng-template")}function x(l,u){if(1&l){const t=i.EpF();i.TgZ(0,"button",11),i.NdJ("click",function(Z){return i.CHM(t),i.oxw(2).onIconClick(Z)})("keydown.enter",function(Z){return i.CHM(t),i.oxw(2).onIconClick(Z)}),i._UZ(1,"span"),i.qZA()}if(2&l){const t=i.oxw(2);i.uIk("id",t.id+"-label")("aria-controls",t.id+"-content")("aria-expanded",!t.collapsed),i.xp6(1),i.Tol(t.collapsed?t.expandIcon:t.collapseIcon)}}function e(l,u){if(1&l){const t=i.EpF();i.TgZ(0,"div",6),i.NdJ("click",function(Z){return i.CHM(t),i.oxw().onHeaderClick(Z)}),i.YNc(1,I,2,2,"span",7),i.Hsn(2,1),i.YNc(3,C,1,0,"ng-container",4),i.TgZ(4,"div",8),i.YNc(5,b,1,0,void 0,4),i.YNc(6,x,2,5,"button",9),i.qZA(),i.qZA()}if(2&l){const t=i.oxw();i.uIk("id",t.id+"-titlebar"),i.xp6(1),i.Q6J("ngIf",t.header),i.xp6(2),i.Q6J("ngTemplateOutlet",t.headerTemplate),i.xp6(2),i.Q6J("ngTemplateOutlet",t.iconTemplate),i.xp6(1),i.Q6J("ngIf",t.toggleable)}}function v(l,u){1&l&&i.GkF(0)}function B(l,u){1&l&&i.GkF(0)}function _(l,u){if(1&l&&(i.TgZ(0,"div",12),i.Hsn(1,2),i.YNc(2,B,1,0,"ng-container",4),i.qZA()),2&l){const t=i.oxw();i.xp6(2),i.Q6J("ngTemplateOutlet",t.footerTemplate)}}const h=["*",[["p-header"]],[["p-footer"]]],g=function(l){return{"p-panel p-component":!0,"p-panel-toggleable":l}},M=function(l){return{transitionParams:l,height:"0",opacity:"0"}},F=function(l){return{value:"hidden",params:l}},P=function(l){return{transitionParams:l,height:"*",opacity:"1"}},f=function(l){return{value:"visible",params:l}},S=["*","p-header","p-footer"];let D=0,L=(()=>{class l{constructor(t){this.el=t,this.collapsed=!1,this.expandIcon="pi pi-plus",this.collapseIcon="pi pi-minus",this.showHeader=!0,this.toggler="icon",this.collapsedChange=new i.vpe,this.onBeforeToggle=new i.vpe,this.onAfterToggle=new i.vpe,this.transitionOptions="400ms cubic-bezier(0.86, 0, 0.07, 1)",this.id="p-panel-"+D++}ngAfterContentInit(){this.templates.forEach(t=>{switch(t.getType()){case"header":this.headerTemplate=t.template;break;default:this.contentTemplate=t.template;break;case"footer":this.footerTemplate=t.template;break;case"icons":this.iconTemplate=t.template}})}onHeaderClick(t){"header"===this.toggler&&this.toggle(t)}onIconClick(t){"icon"===this.toggler&&this.toggle(t)}toggle(t){if(this.animating)return!1;this.animating=!0,this.onBeforeToggle.emit({originalEvent:t,collapsed:this.collapsed}),this.toggleable&&(this.collapsed?this.expand(t):this.collapse(t)),t.preventDefault()}expand(t){this.collapsed=!1,this.collapsedChange.emit(this.collapsed)}collapse(t){this.collapsed=!0,this.collapsedChange.emit(this.collapsed)}getBlockableElement(){return this.el.nativeElement.children[0]}onToggleDone(t){this.animating=!1,this.onAfterToggle.emit({originalEvent:t,collapsed:this.collapsed})}}return l.\u0275fac=function(t){return new(t||l)(i.Y36(i.SBq))},l.\u0275cmp=i.Xpm({type:l,selectors:[["p-panel"]],contentQueries:function(t,p,Z){if(1&t&&(i.Suo(Z,q.$_,5),i.Suo(Z,q.jx,4)),2&t){let m;i.iGM(m=i.CRH())&&(p.footerFacet=m.first),i.iGM(m=i.CRH())&&(p.templates=m)}},hostAttrs:[1,"p-element"],inputs:{toggleable:"toggleable",header:"header",collapsed:"collapsed",style:"style",styleClass:"styleClass",expandIcon:"expandIcon",collapseIcon:"collapseIcon",showHeader:"showHeader",toggler:"toggler",transitionOptions:"transitionOptions"},outputs:{collapsedChange:"collapsedChange",onBeforeToggle:"onBeforeToggle",onAfterToggle:"onAfterToggle"},ngContentSelectors:S,decls:7,vars:22,consts:[[3,"ngClass","ngStyle"],["class","p-panel-header",3,"click",4,"ngIf"],["role","region",1,"p-toggleable-content"],[1,"p-panel-content"],[4,"ngTemplateOutlet"],["class","p-panel-footer",4,"ngIf"],[1,"p-panel-header",3,"click"],["class","p-panel-title",4,"ngIf"],[1,"p-panel-icons"],["type","button","class","p-panel-header-icon p-panel-toggler p-link","pRipple","","role","tab",3,"click","keydown.enter",4,"ngIf"],[1,"p-panel-title"],["type","button","pRipple","","role","tab",1,"p-panel-header-icon","p-panel-toggler","p-link",3,"click","keydown.enter"],[1,"p-panel-footer"]],template:function(t,p){1&t&&(i.F$t(h),i.TgZ(0,"div",0),i.YNc(1,e,7,5,"div",1),i.TgZ(2,"div",2),i.NdJ("@panelContent.done",function(m){return p.onToggleDone(m)}),i.TgZ(3,"div",3),i.Hsn(4),i.YNc(5,v,1,0,"ng-container",4),i.qZA(),i.YNc(6,_,3,1,"div",5),i.qZA(),i.qZA()),2&t&&(i.Tol(p.styleClass),i.Q6J("ngClass",i.VKq(12,g,p.toggleable))("ngStyle",p.style),i.uIk("id",p.id),i.xp6(1),i.Q6J("ngIf",p.showHeader),i.xp6(1),i.Q6J("@panelContent",p.collapsed?i.VKq(16,F,i.VKq(14,M,p.animating?p.transitionOptions:"0ms")):i.VKq(20,f,i.VKq(18,P,p.animating?p.transitionOptions:"0ms"))),i.uIk("id",p.id+"-content")("aria-hidden",p.collapsed)("aria-labelledby",p.id+"-titlebar"),i.xp6(3),i.Q6J("ngTemplateOutlet",p.contentTemplate),i.xp6(1),i.Q6J("ngIf",p.footerFacet||p.footerTemplate))},directives:[T.mk,T.PC,T.O5,T.tP,w.H],styles:[".p-panel-header{display:flex;justify-content:space-between;align-items:center}.p-panel-title{line-height:1}.p-panel-header-icon{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}\n"],encapsulation:2,data:{animation:[(0,c.X$)("panelContent",[(0,c.SB)("hidden",(0,c.oB)({height:"0",overflow:"hidden"})),(0,c.SB)("void",(0,c.oB)({height:"{{height}}"}),{params:{height:"0"}}),(0,c.SB)("visible",(0,c.oB)({height:"*"})),(0,c.eR)("visible <=> hidden",[(0,c.oB)({overflow:"hidden"}),(0,c.jt)("{{transitionParams}}")]),(0,c.eR)("void => hidden",(0,c.jt)("{{transitionParams}}")),(0,c.eR)("void => visible",(0,c.jt)("{{transitionParams}}"))])]},changeDetection:0}),l})(),Q=(()=>{class l{}return l.\u0275fac=function(t){return new(t||l)},l.\u0275mod=i.oAB({type:l}),l.\u0275inj=i.cJS({imports:[[T.ez,q.m8,y.T],q.m8]}),l})()},2239:(z,U,d)=>{d.d(U,{Q:()=>i.Q});var i=d(1254)},9233:(z,U,d)=>{d.r(U),d.d(U,{PrimeFlexDemoModule:()=>J});var i=d(6019),T=d(7537),q=d(4466),y=d(5472),c=d(7718),w=d(3274),I=d(2239),C=d(9990),k=d(5989),b=d(9180),x=d(1120),e=d(3668),v=d(7290);let B=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:113,vars:0,consts:[[1,"content-section","documentation"],["href","https://www.npmjs.com/package/primeflex"],["lang","markup"],["lang","typescript"],[1,"doc-tablewrapper"],[1,"doc-table"],["lang","css"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"h1"),e._uU(2,"PrimeFlex"),e.qZA(),e.TgZ(3,"p"),e._uU(4,"PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeNG."),e.qZA(),e.TgZ(5,"h5"),e._uU(6,"Download"),e.qZA(),e.TgZ(7,"p"),e._uU(8,"PrimeFlex is available at "),e.TgZ(9,"a",1),e._uU(10,"npm"),e.qZA(),e._uU(11,", if you have an existing application begin with the installation first."),e.qZA(),e.TgZ(12,"app-code",2),e.IAx(),e._uU(13,"\nnpm install primeflex --save\n"),e.fQ9(),e.qZA(),e.TgZ(14,"h5"),e._uU(15,"Import"),e.qZA(),e.TgZ(16,"p"),e._uU(17,"Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead."),e.qZA(),e.TgZ(18,"h6"),e._uU(19,"angular.json"),e.qZA(),e.TgZ(20,"app-code",3),e.IAx(),e._uU(21,'\n"styles": [\n    "src/styles.scss",\n    "./node_modules/primeflex/primeflex.css"\n],\n'),e.fQ9(),e.qZA(),e.TgZ(22,"p"),e._uU(23,"PrimeFlex is a lightweight library still if you have an application such as one based on angular-cli that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller."),e.qZA(),e.TgZ(24,"h6"),e._uU(25,"angular.json"),e.qZA(),e.TgZ(26,"app-code",3),e.IAx(),e._uU(27,'\n"styles": [\n    "src/styles.scss",\n    "./node_modules/primeflex/src/_variables.scss",\n    "./node_modules/primeflex/src/_grid.scss",\n    "./node_modules/primeflex/src/_formlayout.scss",\n    "./node_modules/primeflex/src/_display.scss",\n    "./node_modules/primeflex/src/_text.scss",\n    "./node_modules/primeflex/src/flexbox/_flexbox.scss",\n    "./node_modules/primeflex/src/_spacing.scss",\n    "./node_modules/primeflex/src/_elevation.scss"\n],\n'),e.fQ9(),e.qZA(),e.TgZ(28,"h5"),e._uU(29,"Variables"),e.qZA(),e.TgZ(30,"div",4),e.TgZ(31,"table",5),e.TgZ(32,"thead"),e.TgZ(33,"tr"),e.TgZ(34,"th"),e._uU(35,"Variable"),e.qZA(),e.TgZ(36,"th"),e._uU(37,"Description"),e.qZA(),e.TgZ(38,"th"),e._uU(39,"Default"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(40,"tbody"),e.TgZ(41,"tr"),e.TgZ(42,"td"),e._uU(43,"$sm"),e.qZA(),e.TgZ(44,"td"),e._uU(45,"Breakpoint of screens such as phones."),e.qZA(),e.TgZ(46,"td"),e._uU(47,"576px"),e.qZA(),e.qZA(),e.TgZ(48,"tr"),e.TgZ(49,"td"),e._uU(50,"$md"),e.qZA(),e.TgZ(51,"td"),e._uU(52,"Breakpoint of screens such as tablets."),e.qZA(),e.TgZ(53,"td"),e._uU(54,"768px"),e.qZA(),e.qZA(),e.TgZ(55,"tr"),e.TgZ(56,"td"),e._uU(57,"$lg"),e.qZA(),e.TgZ(58,"td"),e._uU(59,"Breakpoint of screens such as notebook monitors."),e.qZA(),e.TgZ(60,"td"),e._uU(61,"992px"),e.qZA(),e.qZA(),e.TgZ(62,"tr"),e.TgZ(63,"td"),e._uU(64,"$xl"),e.qZA(),e.TgZ(65,"td"),e._uU(66,"Breakpoint of smaller screens such as desktop monitors."),e.qZA(),e.TgZ(67,"td"),e._uU(68,"1200px"),e.qZA(),e.qZA(),e.TgZ(69,"tr"),e.TgZ(70,"td"),e._uU(71,"$gutter"),e.qZA(),e.TgZ(72,"td"),e._uU(73,"Padding of a grid column."),e.qZA(),e.TgZ(74,"td"),e._uU(75,".5rem"),e.qZA(),e.qZA(),e.TgZ(76,"tr"),e.TgZ(77,"td"),e._uU(78,"$fieldMargin"),e.qZA(),e.TgZ(79,"td"),e._uU(80,"Spacing of a field. Can be vertical of horizontal depending on form layout."),e.qZA(),e.TgZ(81,"td"),e._uU(82,".5rem"),e.qZA(),e.qZA(),e.TgZ(83,"tr"),e.TgZ(84,"td"),e._uU(85,"$fieldLabelMargin"),e.qZA(),e.TgZ(86,"td"),e._uU(87,"Spacing of a field label. Can be vertical of horizontal depending on form layout."),e.qZA(),e.TgZ(88,"td"),e._uU(89,".5rem"),e.qZA(),e.qZA(),e.TgZ(90,"tr"),e.TgZ(91,"td"),e._uU(92,"$helperTextMargin"),e.qZA(),e.TgZ(93,"td"),e._uU(94,"Top spacing of a helper text."),e.qZA(),e.TgZ(95,"td"),e._uU(96,".5rem"),e.qZA(),e.qZA(),e.TgZ(97,"tr"),e.TgZ(98,"td"),e._uU(99,"$spacer"),e.qZA(),e.TgZ(100,"td"),e._uU(101,"Base value to use in spacing utilities, view spacing documentation for details."),e.qZA(),e.TgZ(102,"td"),e._uU(103,".5rem"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(104,"p"),e._uU(105,"There are two ways to use these variables, one option is getting the source code of PrimeFlex from github, compile your own primeflex and importing the css file. Other alternative is importing your own variables to override the defaults if your application can import scss files. Example below overrides breakpoints; "),e.qZA(),e.TgZ(106,"p"),e.TgZ(107,"b"),e._uU(108,"_overrides.scss"),e.qZA(),e.qZA(),e.TgZ(109,"app-code",6),e.IAx(),e._uU(110,"\n$sm:640px;\n$md:720px;\n$lg:960px;\n$xl:1080px;\n"),e.fQ9(),e.qZA(),e.TgZ(111,"app-code",3),e.IAx(),e._uU(112,'\n"styles": [\n    "src/styles.scss",\n    "src/_overrides.scss",\n    "./node_modules/primeflex/src/_variables.scss",\n    "./node_modules/primeflex/src/_grid.scss",\n    "./node_modules/primeflex/src/_formlayout.scss",\n    "./node_modules/primeflex/src/_display.scss",\n    "./node_modules/primeflex/src/_text.scss",\n    "./node_modules/primeflex/src/flexbox/_flexbox.scss",\n    "./node_modules/primeflex/src/_spacing.scss",\n    "./node_modules/primeflex/src/_elevation.scss"\n],\n'),e.fQ9(),e.qZA(),e.qZA())},directives:[v.h],encapsulation:2}),n})();var _=d(2060),h=d(1919),g=d(3622);let M=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:109,vars:0,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["href","https://github.com/primefaces/primeflex"],["github","primeflex","stackblitz","primeflex-display-demo"],[1,"content-section","implementation"],[1,"card"],["type","text","pInputText","",1,"p-mr-2","p-d-inline"],["type","text","pInputText","",1,"p-d-inline"],["type","text","pInputText","",1,"p-mb-2","p-d-block"],["type","text","pInputText","",1,"p-d-block"],["type","button","icon","pi pi-bars","styleClass","p-button-rounded p-d-md-none"],["type","button","icon","pi pi-search","styleClass","p-button-rounded p-button-success p-d-none p-d-md-inline-flex"],[1,"p-d-none","p-d-print-block"],[1,"p-d-block","p-d-print-none"],[1,"content-section","documentation"],["header","Documentation"],["lang","markup"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/","target","_blank",1,"btn-viewsource"],["href","https://stackblitz.com/edit/primeng-primeflex-display-demo","target","_blank",1,"btn-viewsource",2,"margin-left",".5em"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Display"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Efficiently configure the display of the component with "),e.TgZ(6,"a",2),e._uU(7,"PrimeFlex"),e.qZA(),e._uU(8," display utilities."),e.qZA(),e.qZA(),e._UZ(9,"app-demoActions",3),e.qZA(),e.TgZ(10,"div",4),e.TgZ(11,"div",5),e.TgZ(12,"h5"),e._uU(13,"Inline"),e.qZA(),e._UZ(14,"input",6),e._UZ(15,"input",7),e.TgZ(16,"h5"),e._uU(17,"Block"),e.qZA(),e._UZ(18,"input",8),e._UZ(19,"input",9),e.TgZ(20,"h5"),e._uU(21,"Visible on a Small Screen"),e.qZA(),e.TgZ(22,"p"),e._uU(23,"Resize to view."),e.qZA(),e._UZ(24,"p-button",10),e.TgZ(25,"h5"),e._uU(26,"Hidden on a Small Screen"),e.qZA(),e.TgZ(27,"p"),e._uU(28,"Resize to hide."),e.qZA(),e._UZ(29,"p-button",11),e.TgZ(30,"h5"),e._uU(31,"Visible to Print, Invisible for Screen"),e.qZA(),e.TgZ(32,"p",12),e._uU(33,"Only visible when printed."),e.qZA(),e.TgZ(34,"h5"),e._uU(35,"Visible to Screen, Invisible for Print"),e.qZA(),e.TgZ(36,"p",13),e._uU(37,"Not available for printing."),e.qZA(),e.qZA(),e.qZA(),e.TgZ(38,"div",14),e.TgZ(39,"p-tabView"),e.TgZ(40,"p-tabPanel",15),e.TgZ(41,"h5"),e._uU(42,"Getting Started"),e.qZA(),e.TgZ(43,"p"),e._uU(44,"The display classes use the "),e.TgZ(45,"i"),e._uU(46,"p-d-{value}"),e.qZA(),e._uU(47," format and "),e.TgZ(48,"i"),e._uU(49,"p-d-{breakpoint}-{value}"),e.qZA(),e._uU(50," format for responsive design."),e.qZA(),e.TgZ(51,"h5"),e._uU(52,"Values"),e.qZA(),e.TgZ(53,"p"),e._uU(54,"Value field can be one of the following options."),e.qZA(),e.TgZ(55,"ul"),e.TgZ(56,"li"),e._uU(57,"none"),e.qZA(),e.TgZ(58,"li"),e._uU(59,"inline"),e.qZA(),e.TgZ(60,"li"),e._uU(61,"inline-block"),e.qZA(),e.TgZ(62,"li"),e._uU(63,"block"),e.qZA(),e.TgZ(64,"li"),e._uU(65,"flex"),e.qZA(),e.TgZ(66,"li"),e._uU(67,"inline-flex"),e.qZA(),e.qZA(),e.TgZ(68,"h5"),e._uU(69,"Breakpoint"),e.qZA(),e.TgZ(70,"p"),e._uU(71,"Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined."),e.qZA(),e.TgZ(72,"ul"),e.TgZ(73,"li"),e.TgZ(74,"b"),e._uU(75,"sm"),e.qZA(),e._uU(76,": small screens e.g. phones"),e.qZA(),e.TgZ(77,"li"),e.TgZ(78,"b"),e._uU(79,"md"),e.qZA(),e._uU(80,": medium screens e.g. tablets"),e.qZA(),e.TgZ(81,"li"),e.TgZ(82,"b"),e._uU(83,"lg"),e.qZA(),e._uU(84,": large screens e.g. notebooks"),e.qZA(),e.TgZ(85,"li"),e.TgZ(86,"b"),e._uU(87,"xl"),e.qZA(),e._uU(88,": larger screens .e.g monitors"),e.qZA(),e.qZA(),e.TgZ(89,"h5"),e._uU(90,"Examples"),e.qZA(),e.TgZ(91,"app-code",16),e.IAx(),e._uU(92,'\n<div class="p-d-inline">Displayed as inline.</div>\n<div class="p-d-flex">Displayed as a flexbox container.</div>\n<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>\n<div class="p-d-md-none">Visible on a Small Screen</div>\n<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>\n<div class="p-d-none p-d-print-block">Only visible when printed.</div>\n<div class="p-d-block p-d-print-none">Not available for printing.</div>\n'),e.fQ9(),e.qZA(),e.TgZ(93,"h5"),e._uU(94,"Customization"),e.qZA(),e.TgZ(95,"p"),e._uU(96,"A custom build with different values can be obtained from "),e.TgZ(97,"a",2),e._uU(98,"PrimeFlex"),e.qZA(),e._uU(99," using the _variables.scss file."),e.qZA(),e.qZA(),e.TgZ(100,"p-tabPanel",17),e.TgZ(101,"a",18),e.TgZ(102,"span"),e._uU(103,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(104,"a",19),e.TgZ(105,"span"),e._uU(106,"Edit in StackBlitz"),e.qZA(),e.qZA(),e.TgZ(107,"app-code",16),e.IAx(),e._uU(108,'\n<h5>Inline</h5>\n<input type="text" pInputText class="p-mr-2 p-d-inline" />\n<input type="text" pInputText class="p-d-inline" />\n\n<h5>Block</h5>\n<input type="text" pInputText class="p-mb-2 p-d-block" />\n<input type="text" pInputText class="p-d-block" />\n\n<h5>Visible on a Small Screen</h5>\n<p>Resize to view.</p>\n<p-button type="button" icon="pi pi-bars" styleClass="p-button-rounded p-d-md-none"></p-button>\n\n<h5>Hidden on a Small Screen</h5>\n<p>Resize to hide.</p>\n<p-button type="button" icon="pi pi-search" styleClass="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button>\n\n<h5>Visible to Print, Invisible for Screen</h5>\n<p class="p-d-none p-d-print-block">Only visible when printed.</p>\n\n<h5>Visible to Screen, Invisible for Print</h5>\n<p class="p-d-block p-d-print-none">Not available for printing.</p>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA())},directives:[_.P,q.o,h.zx,g.xf,g.x4,v.h],encapsulation:2}),n})();function F(n,o){if(1&n&&(e.TgZ(0,"div",14),e.TgZ(1,"div"),e._uU(2),e.qZA(),e.qZA()),2&n){const a=o.index;e.xp6(1),e.Tol("box p-shadow-"+(a+1)),e.xp6(1),e.hij(" p-shadow-",a+1," ")}}let P=(()=>{class n{constructor(){this.boxes=new Array(24)}}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:46,vars:1,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["href","https://github.com/primefaces/primeflex"],["github","primeflex","stackblitz","primeflex-elevation-demo"],[1,"content-section","implementation"],[1,"p-grid"],["class","p-col",4,"ngFor","ngForOf"],[1,"content-section","documentation"],["header","Documentation"],["lang","markup"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/","target","_blank",1,"btn-viewsource"],["href","https://stackblitz.com/edit/primeng-primeflex-elevation-demo","target","_blank",1,"btn-viewsource",2,"margin-left",".5em"],["lang","typescript"],[1,"p-col"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Elevation"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Elevation is an add-on utility of "),e.TgZ(6,"a",2),e._uU(7,"PrimeFlex"),e.qZA(),e._uU(8," and used to specify the separation between surfaces and elements along the z-axis."),e.qZA(),e.qZA(),e._UZ(9,"app-demoActions",3),e.qZA(),e.TgZ(10,"div",4),e.TgZ(11,"div",5),e.YNc(12,F,3,3,"div",6),e.qZA(),e.qZA(),e.TgZ(13,"div",7),e.TgZ(14,"p-tabView"),e.TgZ(15,"p-tabPanel",8),e.TgZ(16,"h5"),e._uU(17,"Getting Started"),e.qZA(),e.TgZ(18,"p"),e._uU(19,"Elevation is added to an element using the "),e.TgZ(20,"i"),e._uU(21,".p-shadow-{level}"),e.qZA(),e._uU(22," class."),e.qZA(),e.TgZ(23,"app-code",9),e.IAx(),e._uU(24,'\n<div class="p-shadow-1" />\n'),e.fQ9(),e.qZA(),e.TgZ(25,"h5"),e._uU(26,"Levels"),e.qZA(),e.TgZ(27,"p"),e._uU(28,"There are 24 depths available varying from 1 to 24."),e.qZA(),e.TgZ(29,"app-code",9),e.IAx(),e._uU(30,'\n<div class="p-shadow-1" />\n<div class="p-shadow-24" />\n'),e.fQ9(),e.qZA(),e.TgZ(31,"h5"),e._uU(32,"Dependencies"),e.qZA(),e.TgZ(33,"p"),e._uU(34,"PrimeFlex."),e.qZA(),e.qZA(),e.TgZ(35,"p-tabPanel",10),e.TgZ(36,"a",11),e.TgZ(37,"span"),e._uU(38,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(39,"a",12),e.TgZ(40,"span"),e._uU(41,"Edit in StackBlitz"),e.qZA(),e.qZA(),e.TgZ(42,"app-code",9),e.IAx(),e._uU(43,'\n<div class="p-grid">\n    <div class="p-col" *ngFor="let box of boxes; index as i">\n        <div [class]="\'box p-shadow-\' + (i + 1)">\n            p-shadow-{{i + 1}}\n        </div>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(44,"app-code",13),e.IAx(),e._uU(45,"\nexport class ElevationDemo {\n\n    boxes: Array<number> = new Array(24);\n    \n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&a&&(e.xp6(12),e.Q6J("ngForOf",s.boxes))},directives:[_.P,i.sg,g.xf,g.x4,v.h],styles:[".box[_ngcontent-%COMP%]{min-height:100px;min-width:150px;display:flex;align-items:center;justify-content:center;font-weight:600;margin:2rem;border-radius:4px}"]}),n})();var f=d(1197);const S=function(){return["/primeflex/spacing"]};let D=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:698,vars:2,consts:[[1,"content-section","introduction"],[1,"feature-intro"],[1,"content-section","documentation"],["lang","markup"],[1,"box","p-d-flex","p-mb-3"],[1,"box","p-d-inline-flex"],[1,"p-d-flex"],[1,"p-mr-2"],[1,"p-d-flex","p-flex-column"],[1,"p-mb-2"],[1,"p-d-flex","p-flex-column","p-flex-md-row"],[1,"p-mb-2","p-mr-2"],[1,"p-mr-2","p-order-3"],[1,"p-mr-2","p-order-1"],[1,"p-mr-2","p-order-2"],[1,"p-mr-2","p-order-3","p-order-md-2"],[1,"p-mr-2","p-order-1","p-order-md-3"],[1,"p-mr-2","p-order-2","p-order-md-1"],[1,"p-mr-2","p-mb-2"],[1,"p-d-flex","p-flex-wrap"],[1,"p-d-flex","p-flex-wrap-reverse"],[1,"p-d-flex","p-jc-between"],[1,"p-d-flex","p-jc-center"],[1,"p-d-flex","p-ai-start"],[1,"p-mr-2",2,"height","100px"],[2,"height","50px"],[1,"p-d-flex","p-ai-center"],[1,"p-d-flex",2,"height","150px"],[1,"p-mr-2","p-as-start"],[1,"p-mr-2","p-as-center"],[1,"p-mr-2","p-as-end"],[1,"p-mr-2","p-as-stretch"],[3,"routerLink"],[1,"p-d-flex","p-p-3","card"],["pButton","","pRipple","","type","button","icon","pi pi-check",1,"p-mr-2"],["pButton","","pRipple","","type","button","icon","pi pi-trash",1,"p-button-danger"],["pButton","","pRipple","","type","button","icon","pi pi-search",1,"p-ml-auto","p-button-help"],[1,"p-d-flex","p-flex-column",2,"height","150px"],[1,"p-mt-auto"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"FlexBox"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Easily manage the layout of your components with the responsive FlexBox utilities. "),e.qZA(),e.qZA(),e.qZA(),e.TgZ(6,"div",2),e.TgZ(7,"h5"),e._uU(8,"Flex Container"),e.qZA(),e.TgZ(9,"p"),e._uU(10,"An element can configured as a flexbox container using the "),e.TgZ(11,"i"),e._uU(12,"p-d-flex"),e.qZA(),e._uU(13," or "),e.TgZ(14,"i"),e._uU(15,"p-d-inline-flex"),e.qZA(),e._uU(16," classes."),e.qZA(),e.TgZ(17,"app-code",3),e.IAx(),e._uU(18,'\n<div class="p-d-flex">Flex Container</div>\n<div class="p-d-inline-flex">Inline Flex Container</div>\n'),e.fQ9(),e.qZA(),e.TgZ(19,"div",4),e._uU(20,"Flex Container"),e.qZA(),e.TgZ(21,"div",5),e._uU(22,"Inline Flex Container"),e.qZA(),e.TgZ(23,"h5"),e._uU(24,"Direction"),e.qZA(),e.TgZ(25,"p"),e._uU(26,"Default is applied using the "),e.TgZ(27,"i"),e._uU(28,"p-flex-{direction}"),e.qZA(),e._uU(29," class where direction can be either of the following."),e.qZA(),e.TgZ(30,"ul"),e.TgZ(31,"li"),e._uU(32,"row (default)"),e.qZA(),e.TgZ(33,"li"),e._uU(34,"row-reverse"),e.qZA(),e.TgZ(35,"li"),e._uU(36,"column"),e.qZA(),e.TgZ(37,"li"),e._uU(38,"column-reverse"),e.qZA(),e.qZA(),e.TgZ(39,"h6"),e._uU(40,"Row"),e.qZA(),e.TgZ(41,"app-code",3),e.IAx(),e._uU(42,'\n<div class="p-d-flex">\n    <div class="p-mr-2">Item 1</div>\n    <div class="p-mr-2">Item 2</div>\n    <div>Item 3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(43,"div",6),e.TgZ(44,"div",7),e._uU(45,"Item 1"),e.qZA(),e.TgZ(46,"div",7),e._uU(47,"Item 2"),e.qZA(),e.TgZ(48,"div"),e._uU(49,"Item 3"),e.qZA(),e.qZA(),e.TgZ(50,"h6"),e._uU(51,"Column"),e.qZA(),e.TgZ(52,"app-code",3),e.IAx(),e._uU(53,'\n<div class="p-d-flex p-flex-column">\n    <div class="p-mb-2">Item 1</div>\n    <div class="p-mb-2">Item 2</div>\n    <div>Item 3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(54,"div",8),e.TgZ(55,"div",9),e._uU(56,"Item 1"),e.qZA(),e.TgZ(57,"div",9),e._uU(58,"Item 2"),e.qZA(),e.TgZ(59,"div"),e._uU(60,"Item 3"),e.qZA(),e.qZA(),e.TgZ(61,"h6"),e._uU(62,"Responsive"),e.qZA(),e.TgZ(63,"p"),e._uU(64,"Row direction for larger screens and column for smaller."),e.qZA(),e.TgZ(65,"app-code",3),e.IAx(),e._uU(66,'\n<div class="p-d-flex p-flex-column p-flex-md-row">\n    <div class="p-mb-2 p-mr-2">Item 1</div>\n    <div class="p-mb-2 p-mr-2">Item 2</div>\n    <div class="p-mb-2 p-mr-2">Item 3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(67,"div",10),e.TgZ(68,"div",11),e._uU(69,"Item 1"),e.qZA(),e.TgZ(70,"div",11),e._uU(71,"Item 2"),e.qZA(),e.TgZ(72,"div",11),e._uU(73,"Item 3"),e.qZA(),e.qZA(),e.TgZ(74,"h6"),e._uU(75,"Direction Classes"),e.qZA(),e.TgZ(76,"ul"),e.TgZ(77,"li"),e._uU(78,"p-flex-row"),e.qZA(),e.TgZ(79,"li"),e._uU(80,"p-flex-row-reverse"),e.qZA(),e.TgZ(81,"li"),e._uU(82,"p-flex-column"),e.qZA(),e.TgZ(83,"li"),e._uU(84,"p-flex-column-reverse"),e.qZA(),e.TgZ(85,"li"),e._uU(86,"p-flex-sm-row"),e.qZA(),e.TgZ(87,"li"),e._uU(88,"p-flex-sm-row-reverse"),e.qZA(),e.TgZ(89,"li"),e._uU(90,"p-flex-sm-column"),e.qZA(),e.TgZ(91,"li"),e._uU(92,"p-flex-sm-column-reverse"),e.qZA(),e.TgZ(93,"li"),e._uU(94,"p-flex-md-row"),e.qZA(),e.TgZ(95,"li"),e._uU(96,"p-flex-md-row-reverse"),e.qZA(),e.TgZ(97,"li"),e._uU(98,"p-flex-md-column"),e.qZA(),e.TgZ(99,"li"),e._uU(100,"p-flex-md-column-reverse"),e.qZA(),e.TgZ(101,"li"),e._uU(102,"p-flex-lg-row"),e.qZA(),e.TgZ(103,"li"),e._uU(104,"p-flex-lg-row-reverse"),e.qZA(),e.TgZ(105,"li"),e._uU(106,"p-flex-lg-column"),e.qZA(),e.TgZ(107,"li"),e._uU(108,"p-flex-lg-column-reverse"),e.qZA(),e.TgZ(109,"li"),e._uU(110,"p-flex-xl-row"),e.qZA(),e.TgZ(111,"li"),e._uU(112,"p-flex-xl-row-reverse"),e.qZA(),e.TgZ(113,"li"),e._uU(114,"p-flex-xl-column"),e.qZA(),e.TgZ(115,"li"),e._uU(116,"p-flex-xl-column-reverse"),e.qZA(),e.qZA(),e.TgZ(117,"h5"),e._uU(118,"Order"),e.qZA(),e.TgZ(119,"p"),e._uU(120,"Order configures the way in which they appear in the flex container. "),e.TgZ(121,"i"),e._uU(122,"p-order-{value}"),e.qZA(),e._uU(123," format is used where value can be a number from 0 to 6."),e.qZA(),e.TgZ(124,"h6"),e._uU(125,"Customized"),e.qZA(),e.TgZ(126,"app-code",3),e.IAx(),e._uU(127,'\n<div class="p-d-flex">\n    <div class="p-mr-2 p-order-3">Item 1</div>\n    <div class="p-mr-2 p-order-1">Item 2</div>\n    <div class="p-mr-2 p-order-2">Item 3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(128,"div",6),e.TgZ(129,"div",12),e._uU(130,"Item 1"),e.qZA(),e.TgZ(131,"div",13),e._uU(132,"Item 2"),e.qZA(),e.TgZ(133,"div",14),e._uU(134,"Item 3"),e.qZA(),e.qZA(),e.TgZ(135,"h6"),e._uU(136,"Responsive"),e.qZA(),e.TgZ(137,"p"),e._uU(138,"Orders change depending on the screen size."),e.qZA(),e.TgZ(139,"app-code",3),e.IAx(),e._uU(140,'\n<div class="p-d-flex">\n    <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>\n    <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>\n    <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(141,"div",6),e.TgZ(142,"div",15),e._uU(143,"Item 1"),e.qZA(),e.TgZ(144,"div",16),e._uU(145,"Item 2"),e.qZA(),e.TgZ(146,"div",17),e._uU(147,"Item 3"),e.qZA(),e.qZA(),e.TgZ(148,"h6"),e._uU(149,"Order Classes"),e.qZA(),e.TgZ(150,"ul"),e.TgZ(151,"li"),e._uU(152,"p-order-0"),e.qZA(),e.TgZ(153,"li"),e._uU(154,"p-order-1"),e.qZA(),e.TgZ(155,"li"),e._uU(156,"p-order-2"),e.qZA(),e.TgZ(157,"li"),e._uU(158,"p-order-3"),e.qZA(),e.TgZ(159,"li"),e._uU(160,"p-order-4"),e.qZA(),e.TgZ(161,"li"),e._uU(162,"p-order-5"),e.qZA(),e.TgZ(163,"li"),e._uU(164,"p-order-6"),e.qZA(),e.TgZ(165,"li"),e._uU(166,"p-order-sm-0"),e.qZA(),e.TgZ(167,"li"),e._uU(168,"p-order-sm-1"),e.qZA(),e.TgZ(169,"li"),e._uU(170,"p-order-sm-2"),e.qZA(),e.TgZ(171,"li"),e._uU(172,"p-order-sm-3"),e.qZA(),e.TgZ(173,"li"),e._uU(174,"p-order-sm-4"),e.qZA(),e.TgZ(175,"li"),e._uU(176,"p-order-sm-5"),e.qZA(),e.TgZ(177,"li"),e._uU(178,"p-order-sm-6"),e.qZA(),e.TgZ(179,"li"),e._uU(180,"p-order-md-0"),e.qZA(),e.TgZ(181,"li"),e._uU(182,"p-order-md-1"),e.qZA(),e.TgZ(183,"li"),e._uU(184,"p-order-md-2"),e.qZA(),e.TgZ(185,"li"),e._uU(186,"p-order-md-3"),e.qZA(),e.TgZ(187,"li"),e._uU(188,"p-order-md-4"),e.qZA(),e.TgZ(189,"li"),e._uU(190,"p-order-md-5"),e.qZA(),e.TgZ(191,"li"),e._uU(192,"p-order-md-6"),e.qZA(),e.TgZ(193,"li"),e._uU(194,"p-order-lg-0"),e.qZA(),e.TgZ(195,"li"),e._uU(196,"p-order-lg-1"),e.qZA(),e.TgZ(197,"li"),e._uU(198,"p-order-lg-2"),e.qZA(),e.TgZ(199,"li"),e._uU(200,"p-order-lg-3"),e.qZA(),e.TgZ(201,"li"),e._uU(202,"p-order-lg-4"),e.qZA(),e.TgZ(203,"li"),e._uU(204,"p-order-lg-5"),e.qZA(),e.TgZ(205,"li"),e._uU(206,"p-order-lg-6"),e.qZA(),e.TgZ(207,"li"),e._uU(208,"p-order-xl-0"),e.qZA(),e.TgZ(209,"li"),e._uU(210,"p-order-xl-1"),e.qZA(),e.TgZ(211,"li"),e._uU(212,"p-order-xl-2"),e.qZA(),e.TgZ(213,"li"),e._uU(214,"p-order-xl-3"),e.qZA(),e.TgZ(215,"li"),e._uU(216,"p-order-xl-4"),e.qZA(),e.TgZ(217,"li"),e._uU(218,"p-order-xl-5"),e.qZA(),e.TgZ(219,"li"),e._uU(220,"p-order-xl-6"),e.qZA(),e.qZA(),e.TgZ(221,"h5"),e._uU(222,"Wrap"),e.qZA(),e.TgZ(223,"p"),e._uU(224,"Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is "),e.TgZ(225,"i"),e._uU(226,"p-flex-{value}"),e.qZA(),e._uU(227," and the value field can be either of the listed alternatives."),e.qZA(),e.TgZ(228,"ul"),e.TgZ(229,"li"),e._uU(230,"nowrap (default)"),e.qZA(),e.TgZ(231,"li"),e._uU(232,"wrap"),e.qZA(),e.TgZ(233,"li"),e._uU(234,"wrap-reverse"),e.qZA(),e.qZA(),e.TgZ(235,"h6"),e._uU(236,"No Wrap"),e.qZA(),e.TgZ(237,"app-code",3),e.IAx(),e._uU(238,'\n<div class="p-d-flex">\n    <div class="p-mr-2 p-mb-2">Item 1</div>\n    <div class="p-mr-2 p-mb-2">Item 2</div>\n    <div class="p-mr-2 p-mb-2">Item 3</div>\n    <div class="p-mr-2 p-mb-2">Item 4</div>\n    <div class="p-mr-2 p-mb-2">Item 5</div>\n    <div class="p-mr-2 p-mb-2">Item 6</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(239,"div",6),e.TgZ(240,"div",18),e._uU(241,"Item 1"),e.qZA(),e.TgZ(242,"div",18),e._uU(243,"Item 2"),e.qZA(),e.TgZ(244,"div",18),e._uU(245,"Item 3"),e.qZA(),e.TgZ(246,"div",18),e._uU(247,"Item 4"),e.qZA(),e.TgZ(248,"div",18),e._uU(249,"Item 5"),e.qZA(),e.TgZ(250,"div",18),e._uU(251,"Item 6"),e.qZA(),e.qZA(),e.TgZ(252,"h6"),e._uU(253,"Wrap"),e.qZA(),e.TgZ(254,"app-code",3),e.IAx(),e._uU(255,'\n<div class="p-d-flex p-flex-wrap">\n    <div class="p-mr-2 p-mb-2">Item 1</div>\n    <div class="p-mr-2 p-mb-2">Item 2</div>\n    <div class="p-mr-2 p-mb-2">Item 3</div>\n    <div class="p-mr-2 p-mb-2">Item 4</div>\n    <div class="p-mr-2 p-mb-2">Item 5</div>\n    <div class="p-mr-2 p-mb-2">Item 6</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(256,"div",19),e.TgZ(257,"div",18),e._uU(258,"Item 1"),e.qZA(),e.TgZ(259,"div",18),e._uU(260,"Item 2"),e.qZA(),e.TgZ(261,"div",18),e._uU(262,"Item 3"),e.qZA(),e.TgZ(263,"div",18),e._uU(264,"Item 4"),e.qZA(),e.TgZ(265,"div",18),e._uU(266,"Item 5"),e.qZA(),e.TgZ(267,"div",18),e._uU(268,"Item 6"),e.qZA(),e.qZA(),e.TgZ(269,"h6"),e._uU(270,"Wrap Reverse"),e.qZA(),e.TgZ(271,"app-code",3),e.IAx(),e._uU(272,'\n<div class="p-d-flex p-flex-wrap-reverse">\n    <div class="p-mr-2 p-mb-2">Item 1</div>\n    <div class="p-mr-2 p-mb-2">Item 2</div>\n    <div class="p-mr-2 p-mb-2">Item 3</div>\n    <div class="p-mr-2 p-mb-2">Item 4</div>\n    <div class="p-mr-2 p-mb-2">Item 5</div>\n    <div class="p-mr-2 p-mb-2">Item 6</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(273,"div",20),e.TgZ(274,"div",18),e._uU(275,"Item 1"),e.qZA(),e.TgZ(276,"div",18),e._uU(277,"Item 2"),e.qZA(),e.TgZ(278,"div",18),e._uU(279,"Item 3"),e.qZA(),e.TgZ(280,"div",18),e._uU(281,"Item 4"),e.qZA(),e.TgZ(282,"div",18),e._uU(283,"Item 5"),e.qZA(),e.TgZ(284,"div",18),e._uU(285,"Item 6"),e.qZA(),e.qZA(),e.TgZ(286,"h6"),e._uU(287,"Wrap Classes"),e.qZA(),e.TgZ(288,"ul"),e.TgZ(289,"li"),e._uU(290,"p-flex-nowrap"),e.qZA(),e.TgZ(291,"li"),e._uU(292,"p-flex-wrap"),e.qZA(),e.TgZ(293,"li"),e._uU(294,"p-flex-wrap-reverse"),e.qZA(),e.TgZ(295,"li"),e._uU(296,"p-flex-sm-nowrap"),e.qZA(),e.TgZ(297,"li"),e._uU(298,"p-flex-sm-wrap"),e.qZA(),e.TgZ(299,"li"),e._uU(300,"p-flex-sm-wrap-reverse"),e.qZA(),e.TgZ(301,"li"),e._uU(302,"p-flex-md-nowrap"),e.qZA(),e.TgZ(303,"li"),e._uU(304,"p-flex-md-wrap"),e.qZA(),e.TgZ(305,"li"),e._uU(306,"p-flex-md-wrap-reverse"),e.qZA(),e.TgZ(307,"li"),e._uU(308,"p-flex-lg-nowrap"),e.qZA(),e.TgZ(309,"li"),e._uU(310,"p-flex-lg-wrap"),e.qZA(),e.TgZ(311,"li"),e._uU(312,"p-flex-lg-wrap-reverse"),e.qZA(),e.TgZ(313,"li"),e._uU(314,"p-flex-xl-nowrap"),e.qZA(),e.TgZ(315,"li"),e._uU(316,"p-flex-xl-wrap"),e.qZA(),e.TgZ(317,"li"),e._uU(318,"p-flex-xl-wrap-reverse"),e.qZA(),e.qZA(),e.TgZ(319,"h5"),e._uU(320,"Justify Content"),e.qZA(),e.TgZ(321,"p"),e._uU(322,"Justify content is the alignment along the main axis and defined using the "),e.TgZ(323,"i"),e._uU(324,"p-jc-{value}"),e.qZA(),e._uU(325," format with responsive alternatives. Value field accepts the options below."),e.qZA(),e.TgZ(326,"ul"),e.TgZ(327,"li"),e._uU(328,"start"),e.qZA(),e.TgZ(329,"li"),e._uU(330,"end"),e.qZA(),e.TgZ(331,"li"),e._uU(332,"center"),e.qZA(),e.TgZ(333,"li"),e._uU(334,"between"),e.qZA(),e.TgZ(335,"li"),e._uU(336,"around"),e.qZA(),e.TgZ(337,"li"),e._uU(338,"evenly"),e.qZA(),e.qZA(),e.TgZ(339,"h6"),e._uU(340,"Between"),e.qZA(),e.TgZ(341,"app-code",3),e.IAx(),e._uU(342,'\n<div class="p-d-flex p-jc-between">\n    <div>Item 1</div>\n    <div>Item 2</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(343,"div",21),e.TgZ(344,"div"),e._uU(345,"Item 1"),e.qZA(),e.TgZ(346,"div"),e._uU(347,"Item 2"),e.qZA(),e.qZA(),e.TgZ(348,"h6"),e._uU(349,"Center"),e.qZA(),e.TgZ(350,"app-code",3),e.IAx(),e._uU(351,'\n<div class="p-d-flex p-jc-center">\n    <div class="p-mr-2">Item 1</div>\n    <div>Item 2</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(352,"div",22),e.TgZ(353,"div",7),e._uU(354,"Item 1"),e.qZA(),e.TgZ(355,"div"),e._uU(356,"Item 2"),e.qZA(),e.qZA(),e.TgZ(357,"h6"),e._uU(358,"Justify Content Classes"),e.qZA(),e.TgZ(359,"ul"),e.TgZ(360,"li"),e._uU(361,"p-jc-start"),e.qZA(),e.TgZ(362,"li"),e._uU(363,"p-jc-end"),e.qZA(),e.TgZ(364,"li"),e._uU(365,"p-jc-center"),e.qZA(),e.TgZ(366,"li"),e._uU(367,"p-jc-between"),e.qZA(),e.TgZ(368,"li"),e._uU(369,"p-jc-around"),e.qZA(),e.TgZ(370,"li"),e._uU(371,"p-jc-evenly"),e.qZA(),e.TgZ(372,"li"),e._uU(373,"p-jc-sm-start"),e.qZA(),e.TgZ(374,"li"),e._uU(375,"p-jc-sm-end"),e.qZA(),e.TgZ(376,"li"),e._uU(377,"p-jc-sm-center"),e.qZA(),e.TgZ(378,"li"),e._uU(379,"p-jc-sm-between"),e.qZA(),e.TgZ(380,"li"),e._uU(381,"p-jc-sm-around"),e.qZA(),e.TgZ(382,"li"),e._uU(383,"p-jc-sm-evenly"),e.qZA(),e.TgZ(384,"li"),e._uU(385,"p-jc-md-start"),e.qZA(),e.TgZ(386,"li"),e._uU(387,"p-jc-md-end"),e.qZA(),e.TgZ(388,"li"),e._uU(389,"p-jc-md-center"),e.qZA(),e.TgZ(390,"li"),e._uU(391,"p-jc-md-between"),e.qZA(),e.TgZ(392,"li"),e._uU(393,"p-jc-md-around"),e.qZA(),e.TgZ(394,"li"),e._uU(395,"p-jc-md-evenly"),e.qZA(),e.TgZ(396,"li"),e._uU(397,"p-jc-lg-start"),e.qZA(),e.TgZ(398,"li"),e._uU(399,"p-jc-lg-end"),e.qZA(),e.TgZ(400,"li"),e._uU(401,"p-jc-lg-center"),e.qZA(),e.TgZ(402,"li"),e._uU(403,"p-jc-lg-between"),e.qZA(),e.TgZ(404,"li"),e._uU(405,"p-jc-lg-around"),e.qZA(),e.TgZ(406,"li"),e._uU(407,"p-jc-lg-evenly"),e.qZA(),e.TgZ(408,"li"),e._uU(409,"p-jc-xl-start"),e.qZA(),e.TgZ(410,"li"),e._uU(411,"p-jc-xl-end"),e.qZA(),e.TgZ(412,"li"),e._uU(413,"p-jc-xl-center"),e.qZA(),e.TgZ(414,"li"),e._uU(415,"p-jc-xl-between"),e.qZA(),e.TgZ(416,"li"),e._uU(417,"p-jc-xl-around"),e.qZA(),e.TgZ(418,"li"),e._uU(419,"p-jc-xl-evenly"),e.qZA(),e.qZA(),e.TgZ(420,"h5"),e._uU(421,"Align Items"),e.qZA(),e.TgZ(422,"p"),e._uU(423,"Align Items configuration is the alignment along the cross axis and defined using the "),e.TgZ(424,"i"),e._uU(425,"p-ai-{value}"),e.qZA(),e._uU(426," format with responsive alternatives. Value field accepts the options below."),e.qZA(),e.TgZ(427,"ul"),e.TgZ(428,"li"),e._uU(429,"start"),e.qZA(),e.TgZ(430,"li"),e._uU(431,"end"),e.qZA(),e.TgZ(432,"li"),e._uU(433,"center"),e.qZA(),e.TgZ(434,"li"),e._uU(435,"baseline"),e.qZA(),e.TgZ(436,"li"),e._uU(437,"stretch (default)"),e.qZA(),e.qZA(),e.TgZ(438,"h6"),e._uU(439,"Start"),e.qZA(),e.TgZ(440,"app-code",3),e.IAx(),e._uU(441,'\n<div class="p-d-flex p-ai-start">\n    <div class="p-mr-2" style="height:100px">Item 1</div>\n    <div style="height:50px">Item 2</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(442,"div",23),e.TgZ(443,"div",24),e._uU(444,"Item 1"),e.qZA(),e.TgZ(445,"div",25),e._uU(446,"Item 2"),e.qZA(),e.qZA(),e.TgZ(447,"h6"),e._uU(448,"Center"),e.qZA(),e.TgZ(449,"app-code",3),e.IAx(),e._uU(450,'\n<div class="p-d-flex p-ai-center">\n    <div class="p-mr-2" style="height:100px">Item 1</div>\n    <div style="height:50px">Item 2</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(451,"div",26),e.TgZ(452,"div",24),e._uU(453,"Item 1"),e.qZA(),e.TgZ(454,"div",25),e._uU(455,"Item 2"),e.qZA(),e.qZA(),e.TgZ(456,"h6"),e._uU(457,"Align Items Classes"),e.qZA(),e.TgZ(458,"ul"),e.TgZ(459,"li"),e._uU(460,"p-ai-start"),e.qZA(),e.TgZ(461,"li"),e._uU(462,"p-ai-end"),e.qZA(),e.TgZ(463,"li"),e._uU(464,"p-ai-center"),e.qZA(),e.TgZ(465,"li"),e._uU(466,"p-ai-baseline"),e.qZA(),e.TgZ(467,"li"),e._uU(468,"p-ai-strech"),e.qZA(),e.TgZ(469,"li"),e._uU(470,"p-ai-sm-start"),e.qZA(),e.TgZ(471,"li"),e._uU(472,"p-ai-sm-end"),e.qZA(),e.TgZ(473,"li"),e._uU(474,"p-ai-sm-center"),e.qZA(),e.TgZ(475,"li"),e._uU(476,"p-ai-sm-baseline"),e.qZA(),e.TgZ(477,"li"),e._uU(478,"p-ai-sm-strech"),e.qZA(),e.TgZ(479,"li"),e._uU(480,"p-ai-md-start"),e.qZA(),e.TgZ(481,"li"),e._uU(482,"p-ai-md-end"),e.qZA(),e.TgZ(483,"li"),e._uU(484,"p-ai-md-center"),e.qZA(),e.TgZ(485,"li"),e._uU(486,"p-ai-md-baseline"),e.qZA(),e.TgZ(487,"li"),e._uU(488,"p-ai-md-strech"),e.qZA(),e.TgZ(489,"li"),e._uU(490,"p-ai-lg-start"),e.qZA(),e.TgZ(491,"li"),e._uU(492,"p-ai-lg-end"),e.qZA(),e.TgZ(493,"li"),e._uU(494,"p-ai-lg-center"),e.qZA(),e.TgZ(495,"li"),e._uU(496,"p-ai-lg-baseline"),e.qZA(),e.TgZ(497,"li"),e._uU(498,"p-ai-lg-strech"),e.qZA(),e.TgZ(499,"li"),e._uU(500,"p-ai-xl-start"),e.qZA(),e.TgZ(501,"li"),e._uU(502,"p-ai-xl-end"),e.qZA(),e.TgZ(503,"li"),e._uU(504,"p-ai-xl-center"),e.qZA(),e.TgZ(505,"li"),e._uU(506,"p-ai-xl-baseline"),e.qZA(),e.TgZ(507,"li"),e._uU(508,"p-ai-xl-strech"),e.qZA(),e.qZA(),e.TgZ(509,"h5"),e._uU(510,"Align Self"),e.qZA(),e.TgZ(511,"p"),e._uU(512,"Align self configuration is the alignment along the cross axis for a particular element and defined using the "),e.TgZ(513,"i"),e._uU(514,"p-as-{value}"),e.qZA(),e._uU(515," format with responsive alternatives. Value field accepts the options below."),e.qZA(),e.TgZ(516,"ul"),e.TgZ(517,"li"),e._uU(518,"start"),e.qZA(),e.TgZ(519,"li"),e._uU(520,"end"),e.qZA(),e.TgZ(521,"li"),e._uU(522,"center"),e.qZA(),e.TgZ(523,"li"),e._uU(524,"baseline"),e.qZA(),e.TgZ(525,"li"),e._uU(526,"stretch (default)"),e.qZA(),e.qZA(),e.TgZ(527,"app-code",3),e.IAx(),e._uU(528,'\n<div class="p-d-flex" style="height: 150px;">\n    <div class="p-mr-2 p-as-start">Start</div>\n    <div class="p-mr-2 p-as-center">Center</div>\n    <div class="p-mr-2 p-as-end">End</div>\n    <div class="p-mr-2 p-as-stretch">Stretch</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(529,"div",27),e.TgZ(530,"div",28),e._uU(531,"Start"),e.qZA(),e.TgZ(532,"div",29),e._uU(533,"Center"),e.qZA(),e.TgZ(534,"div",30),e._uU(535,"End"),e.qZA(),e.TgZ(536,"div",31),e._uU(537,"Stretch"),e.qZA(),e.qZA(),e.TgZ(538,"h6"),e._uU(539,"Align Items Classes"),e.qZA(),e.TgZ(540,"ul"),e.TgZ(541,"li"),e._uU(542,"p-as-start"),e.qZA(),e.TgZ(543,"li"),e._uU(544,"p-as-end"),e.qZA(),e.TgZ(545,"li"),e._uU(546,"p-as-center"),e.qZA(),e.TgZ(547,"li"),e._uU(548,"p-as-baseline"),e.qZA(),e.TgZ(549,"li"),e._uU(550,"p-as-strech"),e.qZA(),e.TgZ(551,"li"),e._uU(552,"p-as-sm-start"),e.qZA(),e.TgZ(553,"li"),e._uU(554,"p-as-sm-end"),e.qZA(),e.TgZ(555,"li"),e._uU(556,"p-as-sm-center"),e.qZA(),e.TgZ(557,"li"),e._uU(558,"p-as-sm-baseline"),e.qZA(),e.TgZ(559,"li"),e._uU(560,"p-as-sm-strech"),e.qZA(),e.TgZ(561,"li"),e._uU(562,"p-as-md-start"),e.qZA(),e.TgZ(563,"li"),e._uU(564,"p-as-md-end"),e.qZA(),e.TgZ(565,"li"),e._uU(566,"p-as-md-center"),e.qZA(),e.TgZ(567,"li"),e._uU(568,"p-as-md-baseline"),e.qZA(),e.TgZ(569,"li"),e._uU(570,"p-as-md-strech"),e.qZA(),e.TgZ(571,"li"),e._uU(572,"p-as-lg-start"),e.qZA(),e.TgZ(573,"li"),e._uU(574,"p-as-lg-end"),e.qZA(),e.TgZ(575,"li"),e._uU(576,"p-as-lg-center"),e.qZA(),e.TgZ(577,"li"),e._uU(578,"p-as-lg-baseline"),e.qZA(),e.TgZ(579,"li"),e._uU(580,"p-as-lg-strech"),e.qZA(),e.TgZ(581,"li"),e._uU(582,"p-as-xl-start"),e.qZA(),e.TgZ(583,"li"),e._uU(584,"p-as-xl-end"),e.qZA(),e.TgZ(585,"li"),e._uU(586,"p-as-xl-center"),e.qZA(),e.TgZ(587,"li"),e._uU(588,"p-as-xl-baseline"),e.qZA(),e.TgZ(589,"li"),e._uU(590,"p-as-xl-strech"),e.qZA(),e.qZA(),e.TgZ(591,"h5"),e._uU(592,"Align Content"),e.qZA(),e.TgZ(593,"p"),e._uU(594,"Align content is the alignment along the cross axis and defined using the "),e.TgZ(595,"i"),e._uU(596,"p-ac-{value}"),e.qZA(),e._uU(597," format with responsive alternatives. Value field accepts the options below."),e.qZA(),e.TgZ(598,"ul"),e.TgZ(599,"li"),e._uU(600,"start"),e.qZA(),e.TgZ(601,"li"),e._uU(602,"end"),e.qZA(),e.TgZ(603,"li"),e._uU(604,"center"),e.qZA(),e.TgZ(605,"li"),e._uU(606,"around"),e.qZA(),e.TgZ(607,"li"),e._uU(608,"stretch"),e.qZA(),e.TgZ(609,"li"),e._uU(610,"between"),e.qZA(),e.qZA(),e.TgZ(611,"h6"),e._uU(612,"Align Content Classes"),e.qZA(),e.TgZ(613,"ul"),e.TgZ(614,"li"),e._uU(615,"p-ac-start"),e.qZA(),e.TgZ(616,"li"),e._uU(617,"p-ac-end"),e.qZA(),e.TgZ(618,"li"),e._uU(619,"p-ac-center"),e.qZA(),e.TgZ(620,"li"),e._uU(621,"p-ac-around"),e.qZA(),e.TgZ(622,"li"),e._uU(623,"p-ac-stretch"),e.qZA(),e.TgZ(624,"li"),e._uU(625,"p-ac-between"),e.qZA(),e.TgZ(626,"li"),e._uU(627,"p-ac-sm-start"),e.qZA(),e.TgZ(628,"li"),e._uU(629,"p-ac-sm-end"),e.qZA(),e.TgZ(630,"li"),e._uU(631,"p-ac-sm-center"),e.qZA(),e.TgZ(632,"li"),e._uU(633,"p-ac-sm-around"),e.qZA(),e.TgZ(634,"li"),e._uU(635,"p-ac-sm-stretch"),e.qZA(),e.TgZ(636,"li"),e._uU(637,"p-ac-sm-between"),e.qZA(),e.TgZ(638,"li"),e._uU(639,"p-ac-md-start"),e.qZA(),e.TgZ(640,"li"),e._uU(641,"p-ac-md-end"),e.qZA(),e.TgZ(642,"li"),e._uU(643,"p-ac-md-center"),e.qZA(),e.TgZ(644,"li"),e._uU(645,"p-ac-md-around"),e.qZA(),e.TgZ(646,"li"),e._uU(647,"p-ac-md-stretch"),e.qZA(),e.TgZ(648,"li"),e._uU(649,"p-ac-md-between"),e.qZA(),e.TgZ(650,"li"),e._uU(651,"p-ac-lg-start"),e.qZA(),e.TgZ(652,"li"),e._uU(653,"p-ac-lg-end"),e.qZA(),e.TgZ(654,"li"),e._uU(655,"p-ac-lg-center"),e.qZA(),e.TgZ(656,"li"),e._uU(657,"p-ac-lg-around"),e.qZA(),e.TgZ(658,"li"),e._uU(659,"p-ac-lg-stretch"),e.qZA(),e.TgZ(660,"li"),e._uU(661,"p-ac-lg-between"),e.qZA(),e.TgZ(662,"li"),e._uU(663,"p-ac-xl-start"),e.qZA(),e.TgZ(664,"li"),e._uU(665,"p-ac-xl-end"),e.qZA(),e.TgZ(666,"li"),e._uU(667,"p-ac-xl-center"),e.qZA(),e.TgZ(668,"li"),e._uU(669,"p-ac-xl-around"),e.qZA(),e.TgZ(670,"li"),e._uU(671,"p-ac-xl-stretch"),e.qZA(),e.TgZ(672,"li"),e._uU(673,"p-ac-xl-between"),e.qZA(),e.qZA(),e.TgZ(674,"h5"),e._uU(675,"Margin with FlexBox"),e.qZA(),e.TgZ(676,"p"),e._uU(677,"When combined with "),e.TgZ(678,"a",32),e._uU(679,"spacing utilities"),e.qZA(),e._uU(680,", flexbox offers endless possibilities."),e.qZA(),e.TgZ(681,"h6"),e._uU(682,"Horizontal Spacing"),e.qZA(),e.TgZ(683,"app-code",3),e.IAx(),e._uU(684,'\n<div class="p-d-flex p-p-3 card">\n    <button pButton pRipple type="button" icon="pi pi-check" class="p-mr-2"></button>\n    <button pButton pRipple type="button" icon="pi pi-trash" class="p-button-danger"></button>\n    <button pButton pRipple  type="button" icon="pi pi-search" class="p-ml-auto p-button-help"></button>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(685,"div",33),e._UZ(686,"button",34),e._UZ(687,"button",35),e._UZ(688,"button",36),e.qZA(),e.TgZ(689,"h6"),e._uU(690,"Vertical Spacing"),e.qZA(),e.TgZ(691,"app-code",3),e.IAx(),e._uU(692,'\n<div class="p-d-flex p-flex-column" style="height:150px">\n    <div>Item 1</div>\n    <div class="p-mt-auto">Item 2</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(693,"div",37),e.TgZ(694,"div"),e._uU(695,"Item 1"),e.qZA(),e.TgZ(696,"div",38),e._uU(697,"Item 2"),e.qZA(),e.qZA(),e.qZA()),2&a&&(e.xp6(678),e.Q6J("routerLink",e.DdM(1,S)))},directives:[v.h,x.yS,h.Hq,f.H],styles:[".p-d-flex[_ngcontent-%COMP%] > div[_ngcontent-%COMP%], .box[_ngcontent-%COMP%]{background-color:var(--surface-e);text-align:center;padding:1rem;border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.p-d-flex[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{width:8rem}"]}),n})();var L=d(2867),Q=d(462),l=d(6078),u=d(3362);function t(n,o){1&n&&e._UZ(0,"iframe",83)}let p=(()=>{class n{constructor(){this.selectedState=null,this.states=[{name:"Arizona",code:"Arizona"},{name:"California",value:"California"},{name:"Florida",code:"Florida"},{name:"Ohio",code:"Ohio"},{name:"Washington",code:"Washington"}],this.cities1=[],this.cities2=[],this.city1=null,this.city2=null}}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:290,vars:10,consts:[[1,"content-section","introduction"],["href","https://github.com/primefaces/primeflex"],["github","primeflex","stackblitz","primeflex-formlayout-demo"],[1,"content-section","implementation"],[1,"card"],[1,"p-fluid"],[1,"p-field"],["for","firstname1"],["id","firstname1","type","text","pInputText",""],["for","lastname1"],["id","lastname1","type","text","pInputText",""],[1,"p-fluid","p-formgrid","p-grid"],[1,"p-field","p-col"],["for","firstname2"],["id","firstname2","type","text","pInputText",""],["for","lastname2"],["id","lastname2","type","text","pInputText",""],[1,"p-field","p-grid"],["for","firstname3",1,"p-col-fixed",2,"width","100px"],[1,"p-col"],["id","firstname3","type","text","pInputText",""],["for","lastname3",1,"p-col-fixed",2,"width","100px"],["id","lastname3","type","text","pInputText",""],["for","firstname4",1,"p-col-12","p-mb-2","p-md-2","p-mb-md-0"],[1,"p-col-12","p-md-10"],["id","firstname4","type","text","pInputText",""],["for","lastname4",1,"p-col-12","p-mb-2","p-md-2","p-mb-md-0"],["id","lastname4","type","text","pInputText",""],[1,"p-formgroup-inline"],["for","firstname5",1,"p-sr-only"],["id","firstname5","type","text","pInputText","","placeholder","Firstname"],["for","lastname5",1,"p-sr-only"],["id","lastname5","type","text","pInputText","","placeholder","Lastname"],["pButton","","pRipple","","type","button","label","Submit"],[1,"p-field-checkbox"],["name","city1","value","Chicago","inputId","city1",3,"ngModel","ngModelChange"],["for","city1"],["name","city2","value","Los Angeles","inputId","city2",3,"ngModel","ngModelChange"],["for","city2"],["name","city3","value","Chicago","inputId","city3",3,"ngModel","ngModelChange"],["for","city3"],["name","city4","value","Los Angeles","inputId","city4",3,"ngModel","ngModelChange"],["for","city4"],[1,"p-field-radiobutton"],["name","city5","value","Chicago","inputId","city5",3,"ngModel","ngModelChange"],["for","city5"],["name","city6","value","Los Angeles","inputId","city6",3,"ngModel","ngModelChange"],["for","city6"],["name","city7","value","Chicago","inputId","city7",3,"ngModel","ngModelChange"],["for","city7"],["name","city8","value","Los Angeles","inputId","city8",3,"ngModel","ngModelChange"],["for","city8"],[1,"p-field","p-fluid"],["for","username"],["id","username","type","username","pInputText","","aria-describedby","username-help"],["id","username-help"],[1,"p-field","p-col-12","p-md-6"],["for","firstname6"],["id","firstname6","type","text","pInputText",""],["for","lastname6"],["id","lastname6","type","text","pInputText",""],[1,"p-field","p-col-12"],["for","address"],["id","address","type","text","rows","4","pInputTextarea",""],["for","city"],["id","city","type","text","pInputText",""],[1,"p-field","p-col-12","p-md-3"],["for","state"],["inputId","state","placeholder","Select","optionLabel","name",3,"options","ngModel","ngModelChange"],["for","zip"],["id","zip","type","text","pInputText",""],[1,"content-section","documentation"],["header","Documentation"],["lang","markup"],["href","https://github.com/primefaces/primeflex/blob/master/primeflex.scss"],[1,"doc-tablewrapper"],[1,"doc-table"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex","target","_blank",1,"btn-viewsource"],["href","https://stackblitz.com/edit/primeng-formlayout-demo","target","_blank",1,"btn-viewsource",2,"margin-left",".5em"],["lang","typescript"],["header","StackBlitz"],["pTemplate","content"],["src","https://stackblitz.com/edit/primeng-formlayout-demo?embed=1",2,"width","100%","height","768px","border","none"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div"),e.TgZ(2,"h1"),e._uU(3,"Form Layout"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeNG as it is provided by "),e.TgZ(6,"a",1),e._uU(7,"PrimeFlex"),e.qZA(),e._uU(8,", a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects."),e.qZA(),e.qZA(),e._UZ(9,"app-demoActions",2),e.qZA(),e.TgZ(10,"div",3),e.TgZ(11,"div",4),e.TgZ(12,"h5"),e._uU(13,"Vertical"),e.qZA(),e.TgZ(14,"div",5),e.TgZ(15,"div",6),e.TgZ(16,"label",7),e._uU(17,"Firstname"),e.qZA(),e._UZ(18,"input",8),e.qZA(),e.TgZ(19,"div",6),e.TgZ(20,"label",9),e._uU(21,"Lastname"),e.qZA(),e._UZ(22,"input",10),e.qZA(),e.qZA(),e.qZA(),e.TgZ(23,"div",4),e.TgZ(24,"h5"),e._uU(25,"Vertical and Grid"),e.qZA(),e.TgZ(26,"div",11),e.TgZ(27,"div",12),e.TgZ(28,"label",13),e._uU(29,"Firstname"),e.qZA(),e._UZ(30,"input",14),e.qZA(),e.TgZ(31,"div",12),e.TgZ(32,"label",15),e._uU(33,"Lastname"),e.qZA(),e._UZ(34,"input",16),e.qZA(),e.qZA(),e.qZA(),e.TgZ(35,"div",4),e.TgZ(36,"h5"),e._uU(37,"Horizontal and Fixed Width"),e.qZA(),e.TgZ(38,"div",17),e.TgZ(39,"label",18),e._uU(40,"Firstname"),e.qZA(),e.TgZ(41,"div",19),e._UZ(42,"input",20),e.qZA(),e.qZA(),e.TgZ(43,"div",17),e.TgZ(44,"label",21),e._uU(45,"Lastname"),e.qZA(),e.TgZ(46,"div",19),e._UZ(47,"input",22),e.qZA(),e.qZA(),e.qZA(),e.TgZ(48,"div",4),e.TgZ(49,"h5"),e._uU(50,"Horizontal and Fluid"),e.qZA(),e.TgZ(51,"div",5),e.TgZ(52,"div",17),e.TgZ(53,"label",23),e._uU(54,"Firstname"),e.qZA(),e.TgZ(55,"div",24),e._UZ(56,"input",25),e.qZA(),e.qZA(),e.TgZ(57,"div",17),e.TgZ(58,"label",26),e._uU(59,"Lastname"),e.qZA(),e.TgZ(60,"div",24),e._UZ(61,"input",27),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(62,"div",4),e.TgZ(63,"h5"),e._uU(64,"Inline"),e.qZA(),e.TgZ(65,"div",28),e.TgZ(66,"div",6),e.TgZ(67,"label",29),e._uU(68,"Firstname"),e.qZA(),e._UZ(69,"input",30),e.qZA(),e.TgZ(70,"div",6),e.TgZ(71,"label",31),e._uU(72,"Lastname"),e.qZA(),e._UZ(73,"input",32),e.qZA(),e._UZ(74,"button",33),e.qZA(),e.qZA(),e.TgZ(75,"div",4),e.TgZ(76,"h5"),e._uU(77,"Vertical Checkbox"),e.qZA(),e.TgZ(78,"div",34),e.TgZ(79,"p-checkbox",35),e.NdJ("ngModelChange",function(r){return s.cities1=r}),e.qZA(),e.TgZ(80,"label",36),e._uU(81,"Chicago"),e.qZA(),e.qZA(),e.TgZ(82,"div",34),e.TgZ(83,"p-checkbox",37),e.NdJ("ngModelChange",function(r){return s.cities1=r}),e.qZA(),e.TgZ(84,"label",38),e._uU(85,"Los Angeles"),e.qZA(),e.qZA(),e.TgZ(86,"h5"),e._uU(87,"Horizontal Checkbox"),e.qZA(),e.TgZ(88,"div",28),e.TgZ(89,"div",34),e.TgZ(90,"p-checkbox",39),e.NdJ("ngModelChange",function(r){return s.cities2=r}),e.qZA(),e.TgZ(91,"label",40),e._uU(92,"Chicago"),e.qZA(),e.qZA(),e.TgZ(93,"div",34),e.TgZ(94,"p-checkbox",41),e.NdJ("ngModelChange",function(r){return s.cities2=r}),e.qZA(),e.TgZ(95,"label",42),e._uU(96,"Los Angeles"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(97,"div",4),e.TgZ(98,"h5"),e._uU(99,"Vertical RadioButton"),e.qZA(),e.TgZ(100,"div",43),e.TgZ(101,"p-radioButton",44),e.NdJ("ngModelChange",function(r){return s.city1=r}),e.qZA(),e.TgZ(102,"label",45),e._uU(103,"Chicago"),e.qZA(),e.qZA(),e.TgZ(104,"div",43),e.TgZ(105,"p-radioButton",46),e.NdJ("ngModelChange",function(r){return s.city1=r}),e.qZA(),e.TgZ(106,"label",47),e._uU(107,"Los Angeles"),e.qZA(),e.qZA(),e.TgZ(108,"h5"),e._uU(109,"Horizontal RadioButton"),e.qZA(),e.TgZ(110,"div",28),e.TgZ(111,"div",43),e.TgZ(112,"p-radioButton",48),e.NdJ("ngModelChange",function(r){return s.city2=r}),e.qZA(),e.TgZ(113,"label",49),e._uU(114,"Chicago"),e.qZA(),e.qZA(),e.TgZ(115,"div",43),e.TgZ(116,"p-radioButton",50),e.NdJ("ngModelChange",function(r){return s.city2=r}),e.qZA(),e.TgZ(117,"label",51),e._uU(118,"Los Angeles"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(119,"div",4),e.TgZ(120,"h5"),e._uU(121,"Help Text"),e.qZA(),e.TgZ(122,"div",52),e.TgZ(123,"label",53),e._uU(124,"Username"),e.qZA(),e._UZ(125,"input",54),e.TgZ(126,"small",55),e._uU(127,"Enter your username to reset your password."),e.qZA(),e.qZA(),e.qZA(),e.TgZ(128,"div",4),e.TgZ(129,"h5"),e._uU(130,"Advanced"),e.qZA(),e.TgZ(131,"div",11),e.TgZ(132,"div",56),e.TgZ(133,"label",57),e._uU(134,"Firstname"),e.qZA(),e._UZ(135,"input",58),e.qZA(),e.TgZ(136,"div",56),e.TgZ(137,"label",59),e._uU(138,"Lastname"),e.qZA(),e._UZ(139,"input",60),e.qZA(),e.TgZ(140,"div",61),e.TgZ(141,"label",62),e._uU(142,"Address"),e.qZA(),e._UZ(143,"textarea",63),e.qZA(),e.TgZ(144,"div",56),e.TgZ(145,"label",64),e._uU(146,"City"),e.qZA(),e._UZ(147,"input",65),e.qZA(),e.TgZ(148,"div",66),e.TgZ(149,"label",67),e._uU(150,"State"),e.qZA(),e.TgZ(151,"p-dropdown",68),e.NdJ("ngModelChange",function(r){return s.selectedState=r}),e.qZA(),e.qZA(),e.TgZ(152,"div",66),e.TgZ(153,"label",69),e._uU(154,"Zip"),e.qZA(),e._UZ(155,"input",70),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(156,"div",71),e.TgZ(157,"p-tabView"),e.TgZ(158,"p-tabPanel",72),e.TgZ(159,"h5"),e._uU(160,"Getting Started"),e.qZA(),e.TgZ(161,"p"),e._uU(162,"Core member of the FormLayout is the "),e.TgZ(163,"i"),e._uU(164,".p-field"),e.qZA(),e._uU(165," class that wraps the input field and the associated label."),e.qZA(),e.TgZ(166,"app-code",73),e.IAx(),e._uU(167,'\n<div class="p-field">\n    <label for="fieldId">Label</label>\n    <input id="fieldId" type="text" pInputText> \n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(168,"h5"),e._uU(169,"Vertical Layout"),e.qZA(),e.TgZ(170,"p"),e._uU(171,"In its simplest form, a vertical layout is created when used within "),e.TgZ(172,"i"),e._uU(173,".p-fluid"),e.qZA(),e._uU(174," that makes the components use all available width."),e.qZA(),e.TgZ(175,"app-code",73),e.IAx(),e._uU(176,'\n<div class="p-fluid">\n    <div class="p-field">\n        <label for="firstname1">Firstname</label>\n        <input id="firstname1" type="text" pInputText> \n    </div>\n    <div class="p-field">\n        <label for="lastname1">Lastname</label>\n        <input id="lastname1" type="text" pInputText> \n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(177,"h5"),e._uU(178,"Vertical Layout with Grid"),e.qZA(),e.TgZ(179,"p"),e._uU(180,"This is where FormLayout actually hooks-in to PrimeFlex with the help of "),e.TgZ(181,"i"),e._uU(182,".p-formgrid"),e.qZA(),e._uU(183," class to optimize the content for form design. Example below arranges two fields to be displayed next two each other."),e.qZA(),e.TgZ(184,"app-code",73),e.IAx(),e._uU(185,'\n<div class="p-fluid p-formgrid p-grid">\n    <div class="p-field p-col">\n        <label for="firstname1">Firstname</label>\n        <input id="firstname1" type="text" pInputText> \n    </div>\n    <div class="p-field p-col">\n        <label for="lastname1">Lastname</label>\n        <input id="lastname1" type="text" pInputText> \n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(186,"h5"),e._uU(187,"Horizontal and Fixed Width"),e.qZA(),e.TgZ(188,"p"),e._uU(189,"In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this example, label has a fixed width where container of the inputs gets the remaining space. "),e.qZA(),e.TgZ(190,"app-code",73),e.IAx(),e._uU(191,'\n<div class="p-field p-grid">\n    <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>\n    <div class="p-col">\n        <input id="firstname3" type="text" pInputText> \n    </div>\n</div>\n<div class="p-field p-grid">\n    <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>\n    <div class="p-col">\n        <input id="lastname3" type="text" pInputText> \n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(192,"h5"),e._uU(193,"Horizontal and Fluid"),e.qZA(),e.TgZ(194,"p"),e._uU(195,"Wrapping the form in the previous example with "),e.TgZ(196,"i"),e._uU(197,".p-fluid"),e.qZA(),e._uU(198," and removing the fixed width results in a fluid layout."),e.qZA(),e.TgZ(199,"app-code",73),e.IAx(),e._uU(200,'\n<div class="p-fluid">\n    <div class="p-field p-grid">\n        <label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>\n        <div class="p-col-12 p-md-10">\n            <input id="firstname" type="text" pInputText> \n        </div>\n    </div>\n    <div class="p-field p-grid">\n        <label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>\n        <div class="p-col-12 p-md-10">\n            <input id="lastname" type="text" pInputText> \n        </div>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(201,"h5"),e._uU(202,"Inline"),e.qZA(),e.TgZ(203,"p"),e._uU(204,"Inline forms are used to display the content on the same row and can simply be implemented by adding "),e.TgZ(205,"i"),e._uU(206,".p-formgroup-inline"),e.qZA(),e._uU(207," to the form container. Note that per design requirements, if labels are not visually hidden, it is suggested to use "),e.TgZ(208,"i"),e._uU(209,".p-sr-only"),e.qZA(),e._uU(210," to still support screen readers."),e.qZA(),e.TgZ(211,"app-code",73),e.IAx(),e._uU(212,'\n<div class="p-formgroup-inline">\n    <div class="p-field">\n        <label for="firstname" class="p-sr-only">Firstname</label>\n        <input id="firstname" type="text" pInputText placeholder="Firstname"> \n    </div>\n    <div class="p-field">\n        <label for="lastname" class="p-sr-only">Lastname</label>\n        <input id="lastname" type="text" pInputText placeholder="Lastname"> \n    </div>\n    <button pButton type="button" label="Submit"></button>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(213,"h5"),e._uU(214,"Checkbox and RadioButton"),e.qZA(),e.TgZ(215,"p"),e._uU(216,"Checkbox and RadioButton have exclusive layout support via "),e.TgZ(217,"i"),e._uU(218,".p-field-checkbox"),e.qZA(),e._uU(219," and "),e.TgZ(220,"i"),e._uU(221,".p-field-radiobutton"),e.qZA(),e._uU(222," classes respectively. Examples here demonstrates vertical and horizontal layout alternatives."),e.qZA(),e.TgZ(223,"app-code",73),e.IAx(),e._uU(224,'\n<h3>Vertical Checkbox</h3>\n<div class="p-field-checkbox">\n    <p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"></p-checkbox>\n    <label for="city1">Chicago</label>\n</div>\n<div class="p-field-checkbox">\n    <p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"></p-checkbox>\n    <label for="city2">Los Angeles</label>\n</div>\n\n<h3>Horizontal Checkbox</h3>\n<div class="p-formgroup-inline">\n    <div class="p-field-checkbox">\n        <p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"></p-checkbox>\n        <label for="city3">Chicago</label>\n    </div>\n    <div class="p-field-checkbox">\n        <p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"></p-checkbox>\n        <label for="city4">Los Angeles</label>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(225,"app-code",73),e.IAx(),e._uU(226,'\n<h3>Vertical RadioButton</h3>\n<div class="p-field-radiobutton">\n    <p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"></p-radioButton>\n    <label for="city5">Chicago</label>\n</div>\n<div class="p-field-radiobutton">\n    <p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"></p-radioButton>\n    <label for="city6">Los Angeles</label>\n</div>\n\n<h3>Horizontal RadioButton</h3>\n<div class="p-formgroup-inline">\n    <div class="p-field-checkbox">\n    <p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"></p-radioButton>\n    <label for="city7">Chicago</label>\n    </div>\n    <div class="p-field-checkbox">\n        <p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"></p-radioButton>\n        <label for="city8">Los Angeles</label>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(227,"h5"),e._uU(228,"Helper text"),e.qZA(),e.TgZ(229,"p"),e._uU(230,"Helper text is an optional element defined with the "),e.TgZ(231,"i"),e._uU(232,"small"),e.qZA(),e._uU(233," tag to display additional information about the input field."),e.qZA(),e.TgZ(234,"app-code",73),e.IAx(),e._uU(235,'\n<div class="p-field p-fluid">\n    <label for="username">Username</label>\n    <input id="username" type="username" pInputText aria-describedby="username-help"> \n    <small id="username-help">Enter your username to reset your password.</small>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(236,"h5"),e._uU(237,"Advanced Forms"),e.qZA(),e.TgZ(238,"p"),e._uU(239,"A responsive form with various input fields can easily be implemented using a combination of "),e.TgZ(240,"i"),e._uU(241,".p-field"),e.qZA(),e._uU(242,", "),e.TgZ(243,"i"),e._uU(244,".p-formgrid"),e.qZA(),e._uU(245," and "),e.TgZ(246,"i"),e._uU(247,".p-fluid"),e.qZA(),e._uU(248,"."),e.qZA(),e.TgZ(249,"app-code",73),e.IAx(),e._uU(250,'\n<div class="p-fluid p-formgrid p-grid">\n    <div class="p-field p-col-12 p-md-6">\n        <label for="firstname">Firstname</label>\n        <input id="firstname" type="text" pInputText> \n    </div>\n    <div class="p-field p-col-12 p-md-6">\n        <label for="lastname">Lastname</label>\n        <input id="lastname" type="text" pInputText> \n    </div>\n    <div class="p-field p-col-12">\n        <label for="address">Address</label>\n        <textarea id="address" type="text" rows="4" pInputTextarea></textarea>\n    </div>\n    <div class="p-field p-col-12 p-md-6">\n        <label for="city">City</label>\n        <input id="city" type="text" pInputText> \n    </div>\n    <div class="p-field p-col-12 p-md-3">\n        <label for="state">State</label>\n        <p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"></p-dropdown>\n    </div>\n    <div class="p-field p-col-12 p-md-3">\n        <label for="zip">Zip</label>\n        <input id="zip" type="text" pInputText> \n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(251,"h5"),e._uU(252,"Customization"),e.qZA(),e.TgZ(253,"p"),e._uU(254,"FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building "),e.TgZ(255,"a",74),e._uU(256,"primeflex.scss"),e.qZA(),e._uU(257," with your on variables."),e.qZA(),e.TgZ(258,"div",75),e.TgZ(259,"table",76),e.TgZ(260,"thead"),e.TgZ(261,"tr"),e.TgZ(262,"th"),e._uU(263,"Variable"),e.qZA(),e.TgZ(264,"th"),e._uU(265,"Default"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(266,"tbody"),e.TgZ(267,"tr"),e.TgZ(268,"td"),e._uU(269,"$fieldMargin"),e.qZA(),e.TgZ(270,"td"),e._uU(271,"1em"),e.qZA(),e.qZA(),e.TgZ(272,"tr"),e.TgZ(273,"td"),e._uU(274,"$fieldLabelMargin"),e.qZA(),e.TgZ(275,"td"),e._uU(276,".5em"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(277,"p-tabPanel",77),e.TgZ(278,"a",78),e.TgZ(279,"span"),e._uU(280,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(281,"a",79),e.TgZ(282,"span"),e._uU(283,"Edit in StackBlitz"),e.qZA(),e.qZA(),e.TgZ(284,"app-code",73),e.IAx(),e._uU(285,'\n<div class="card">\n    <h5>Vertical</h5>\n    <div class="p-fluid">\n        <div class="p-field">\n            <label for="firstname1">Firstname</label>\n            <input id="firstname1" type="text" pInputText> \n        </div>\n        <div class="p-field">\n            <label for="lastname1">Lastname</label>\n            <input id="lastname1" type="text" pInputText> \n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Vertical and Grid</h5>\n    <div class="p-fluid p-formgrid p-grid">\n            <div class="p-field p-col">\n            <label for="firstname2">Firstname</label>\n            <input id="firstname2" type="text" pInputText> \n        </div>\n        <div class="p-field p-col">\n            <label for="lastname2">Lastname</label>\n            <input id="lastname2" type="text" pInputText> \n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Horizontal and Fixed Width</h5>\n    <div class="p-field p-grid">\n        <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>\n        <div class="p-col">\n            <input id="firstname3" type="text" pInputText> \n        </div>\n    </div>\n    <div class="p-field p-grid">\n        <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>\n        <div class="p-col">\n            <input id="lastname3" type="text" pInputText> \n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Horizontal and Fluid</h5>\n    <div class="p-fluid">\n        <div class="p-field p-grid">\n            <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>\n            <div class="p-col-12 p-md-10">\n                <input id="firstname4" type="text" pInputText> \n            </div>\n        </div>\n        <div class="p-field p-grid">\n            <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>\n            <div class="p-col-12 p-md-10">\n                <input id="lastname4" type="text" pInputText> \n            </div>\n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Inline</h5>\n    <div class="p-formgroup-inline">\n        <div class="p-field">\n            <label for="firstname5" class="p-sr-only">Firstname</label>\n            <input id="firstname5" type="text" pInputText placeholder="Firstname"> \n        </div>\n        <div class="p-field">\n            <label for="lastname5" class="p-sr-only">Lastname</label>\n            <input id="lastname5" type="text" pInputText placeholder="Lastname"> \n        </div>\n        <button pButton pRipple type="button" label="Submit"></button>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Vertical Checkbox</h5>\n    <div class="p-field-checkbox">\n        <p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"></p-checkbox>\n        <label for="city1">Chicago</label>\n    </div>\n    <div class="p-field-checkbox">\n        <p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"></p-checkbox>\n        <label for="city2">Los Angeles</label>\n    </div>\n\n    <h5>Horizontal Checkbox</h5>\n    <div class="p-formgroup-inline">\n        <div class="p-field-checkbox">\n            <p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"></p-checkbox>\n            <label for="city3">Chicago</label>\n        </div>\n        <div class="p-field-checkbox">\n            <p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"></p-checkbox>\n            <label for="city4">Los Angeles</label>\n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Vertical RadioButton</h5>\n    <div class="p-field-radiobutton">\n        <p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"></p-radioButton>\n        <label for="city5">Chicago</label>\n    </div>\n    <div class="p-field-radiobutton">\n        <p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"></p-radioButton>\n        <label for="city6">Los Angeles</label>\n    </div>\n\n    <h5>Horizontal RadioButton</h5>\n    <div class="p-formgroup-inline">\n        <div class="p-field-checkbox">\n        <p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"></p-radioButton>\n        <label for="city7">Chicago</label>\n        </div>\n        <div class="p-field-checkbox">\n            <p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"></p-radioButton>\n            <label for="city8">Los Angeles</label>\n        </div>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Help Text</h5>\n    <div class="p-field p-fluid">\n        <label for="username">Username</label>\n        <input id="username" type="username" pInputText aria-describedby="username-help"> \n        <small id="username-help">Enter your username to reset your password.</small>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Advanced</h5>\n    <div class="p-fluid p-formgrid p-grid">\n        <div class="p-field p-col-12 p-md-6">\n            <label for="firstname6">Firstname</label>\n            <input id="firstname6" type="text" pInputText> \n        </div>\n        <div class="p-field p-col-12 p-md-6">\n            <label for="lastname6">Lastname</label>\n            <input id="lastname6" type="text" pInputText> \n        </div>\n        <div class="p-field p-col-12">\n            <label for="address">Address</label>\n            <textarea id="address" type="text" rows="4" pInputTextarea></textarea>\n        </div>\n        <div class="p-field p-col-12 p-md-6">\n            <label for="city">City</label>\n            <input id="city" type="text" pInputText> \n        </div>\n        <div class="p-field p-col-12 p-md-3">\n            <label for="state">State</label>\n            <p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"></p-dropdown>\n        </div>\n        <div class="p-field p-col-12 p-md-3">\n            <label for="zip">Zip</label>\n            <input id="zip" type="text" pInputText> \n        </div>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(286,"app-code",80),e.IAx(),e._uU(287,"\n    export class FormLayoutDemo {\n\n        selectedState: any = null;\n    \n        states: any[] = [\n            {name: 'Arizona', code: 'Arizona'},\n            {name: 'California', value: 'California'},\n            {name: 'Florida', code: 'Florida'},\n            {name: 'Ohio', code: 'Ohio'},\n            {name: 'Washington', code: 'Washington'}\n        ];\n    \n        cities1: any[] = [];\n        \n        cities2: any[] = [];\n        \n        city1:any = null;\n    \n        city2:any = null;\n\n    }\n    "),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(288,"p-tabPanel",81),e.YNc(289,t,1,0,"ng-template",82),e.qZA(),e.qZA(),e.qZA()),2&a&&(e.xp6(79),e.Q6J("ngModel",s.cities1),e.xp6(4),e.Q6J("ngModel",s.cities1),e.xp6(7),e.Q6J("ngModel",s.cities2),e.xp6(4),e.Q6J("ngModel",s.cities2),e.xp6(7),e.Q6J("ngModel",s.city1),e.xp6(4),e.Q6J("ngModel",s.city1),e.xp6(7),e.Q6J("ngModel",s.city2),e.xp6(4),e.Q6J("ngModel",s.city2),e.xp6(35),e.Q6J("options",s.states)("ngModel",s.selectedState))},directives:[_.P,q.o,h.Hq,f.H,L.XZ,T.JJ,T.On,Q.EU,b.g,l.Lt,g.xf,g.x4,v.h,u.jx],styles:["@media screen and (max-width: 489px){.p-formgroup-inline[_ngcontent-%COMP%]   .p-field[_ngcontent-%COMP%]{margin-bottom:1em!important}}.layout-content[_ngcontent-%COMP%]   .content-section.implementation[_ngcontent-%COMP%] > h3[_ngcontent-%COMP%]{font-weight:600}textarea[_ngcontent-%COMP%]{resize:none}"]}),n})();var Z=d(9814),m=d(1254);function R(n,o){if(1&n&&(e.TgZ(0,"div",5),e.TgZ(1,"div",6),e._uU(2),e.qZA(),e.qZA()),2&n){const a=o.index;e.Q6J("@animation","visible"),e.xp6(2),e.Oqu(a+1)}}let E=(()=>{class n{ngOnInit(){this.columns=[0,1,2,3,4,5]}addColumn(){this.columns.push(this.columns.length)}removeColumn(){this.columns.splice(-1,1)}}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:628,vars:3,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","primeflex","stackblitz","primeflex-gridsystem-demo"],[1,"content-section"],[1,"p-grid"],[1,"p-col"],[1,"box"],["pButton","","pRipple","","type","button","icon","pi pi-plus","title","Add Column",1,"p-mr-2",3,"disabled","click"],["pButton","","pRipple","","type","button","icon","pi pi-minus","title","Remove Column",3,"disabled","click"],[1,"p-grid","p-mt-2"],["class","p-col",4,"ngFor","ngForOf"],[1,"p-grid","p-flex-row-reverse"],[1,"p-grid","p-flex-column"],[1,"p-grid","p-flex-column-reverse"],[1,"p-col-4"],[1,"p-col-2"],[1,"p-col-6"],[1,"p-col-8"],[1,"p-col-fixed",2,"width","100px"],[1,"p-col-12","p-md-6","p-lg-3"],[1,"p-grid","p-jc-start"],[1,"p-col-1"],[1,"p-grid","p-jc-end"],[1,"p-grid","p-jc-center"],[1,"p-grid","p-jc-between"],[1,"p-grid","p-jc-around"],[1,"p-grid","p-jc-evenly"],[1,"p-grid","p-ai-start","vertical-container"],[1,"p-grid","p-ai-end","vertical-container"],[1,"p-grid","p-ai-center","vertical-container"],[1,"p-grid","p-ai-stretch","vertical-container"],[1,"box","box-stretched"],[1,"p-grid","vertical-container"],[1,"p-col","p-as-start"],[1,"p-col","p-as-center"],[1,"p-col","p-as-end"],[1,"p-col-6","p-offset-3"],[1,"p-col-4","p-offset-4"],[1,"p-grid","nested-grid"],[1,"p-col-12"],["header","Header"],[1,"p-m-0"],[1,"content-section","documentation"],["header","Documentation"],["href","https://css-tricks.com/snippets/css/a-guide-to-flexbox/"],["lang","markup"],[1,"doc-tablewrapper"],[1,"doc-table"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/","target","_blank",1,"btn-viewsource"],["lang","typescript"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Grid System"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops."),e.qZA(),e.qZA(),e._UZ(6,"app-demoActions",2),e.qZA(),e.TgZ(7,"div",3),e.TgZ(8,"h5"),e._uU(9,"Basic"),e.qZA(),e.TgZ(10,"div",4),e.TgZ(11,"div",5),e.TgZ(12,"div",6),e._uU(13,"1"),e.qZA(),e.qZA(),e.TgZ(14,"div",5),e.TgZ(15,"div",6),e._uU(16,"2"),e.qZA(),e.qZA(),e.TgZ(17,"div",5),e.TgZ(18,"div",6),e._uU(19,"3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(20,"h5"),e._uU(21,"Dynamic"),e.qZA(),e.TgZ(22,"button",7),e.NdJ("click",function(){return s.addColumn()}),e.qZA(),e.TgZ(23,"button",8),e.NdJ("click",function(){return s.removeColumn()}),e.qZA(),e.TgZ(24,"div",9),e.YNc(25,R,3,2,"div",10),e.qZA(),e.TgZ(26,"h5"),e._uU(27,"Reverse Direction"),e.qZA(),e.TgZ(28,"div",11),e.TgZ(29,"div",5),e.TgZ(30,"div",6),e._uU(31,"1"),e.qZA(),e.qZA(),e.TgZ(32,"div",5),e.TgZ(33,"div",6),e._uU(34,"2"),e.qZA(),e.qZA(),e.TgZ(35,"div",5),e.TgZ(36,"div",6),e._uU(37,"3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(38,"h5"),e._uU(39,"Column Direction"),e.qZA(),e.TgZ(40,"div",12),e.TgZ(41,"div",5),e.TgZ(42,"div",6),e._uU(43,"1"),e.qZA(),e.qZA(),e.TgZ(44,"div",5),e.TgZ(45,"div",6),e._uU(46,"2"),e.qZA(),e.qZA(),e.TgZ(47,"div",5),e.TgZ(48,"div",6),e._uU(49,"3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(50,"h5"),e._uU(51,"Reverse Column Direction"),e.qZA(),e.TgZ(52,"div",13),e.TgZ(53,"div",5),e.TgZ(54,"div",6),e._uU(55,"1"),e.qZA(),e.qZA(),e.TgZ(56,"div",5),e.TgZ(57,"div",6),e._uU(58,"2"),e.qZA(),e.qZA(),e.TgZ(59,"div",5),e.TgZ(60,"div",6),e._uU(61,"3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(62,"h5"),e._uU(63,"12 Column Grid"),e.qZA(),e.TgZ(64,"div",4),e.TgZ(65,"div",14),e.TgZ(66,"div",6),e._uU(67,"4"),e.qZA(),e.qZA(),e.TgZ(68,"div",5),e.TgZ(69,"div",6),e._uU(70,"1"),e.qZA(),e.qZA(),e.TgZ(71,"div",5),e.TgZ(72,"div",6),e._uU(73,"1"),e.qZA(),e.qZA(),e.TgZ(74,"div",5),e.TgZ(75,"div",6),e._uU(76,"1"),e.qZA(),e.qZA(),e.TgZ(77,"div",5),e.TgZ(78,"div",6),e._uU(79,"1"),e.qZA(),e.qZA(),e.TgZ(80,"div",5),e.TgZ(81,"div",6),e._uU(82,"1"),e.qZA(),e.qZA(),e.TgZ(83,"div",5),e.TgZ(84,"div",6),e._uU(85,"1"),e.qZA(),e.qZA(),e.TgZ(86,"div",5),e.TgZ(87,"div",6),e._uU(88,"1"),e.qZA(),e.qZA(),e.TgZ(89,"div",5),e.TgZ(90,"div",6),e._uU(91,"1"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(92,"div",4),e.TgZ(93,"div",15),e.TgZ(94,"div",6),e._uU(95,"2"),e.qZA(),e.qZA(),e.TgZ(96,"div",16),e.TgZ(97,"div",6),e._uU(98,"6"),e.qZA(),e.qZA(),e.TgZ(99,"div",14),e.TgZ(100,"div",6),e._uU(101,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(102,"div",4),e.TgZ(103,"div",17),e.TgZ(104,"div",6),e._uU(105,"8"),e.qZA(),e.qZA(),e.TgZ(106,"div",15),e.TgZ(107,"div",6),e._uU(108,"2"),e.qZA(),e.qZA(),e.TgZ(109,"div",15),e.TgZ(110,"div",6),e._uU(111,"2"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(112,"h5"),e._uU(113,"MultiLine"),e.qZA(),e.TgZ(114,"div",4),e.TgZ(115,"div",16),e.TgZ(116,"div",6),e._uU(117,"6"),e.qZA(),e.qZA(),e.TgZ(118,"div",16),e.TgZ(119,"div",6),e._uU(120,"6"),e.qZA(),e.qZA(),e.TgZ(121,"div",16),e.TgZ(122,"div",6),e._uU(123,"6"),e.qZA(),e.qZA(),e.TgZ(124,"div",16),e.TgZ(125,"div",6),e._uU(126,"6"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(127,"h5"),e._uU(128,"Fixed Width Column"),e.qZA(),e.TgZ(129,"div",4),e.TgZ(130,"div",18),e.TgZ(131,"div",6),e._uU(132,"100px"),e.qZA(),e.qZA(),e.TgZ(133,"div",5),e.TgZ(134,"div",6),e._uU(135,"auto"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(136,"h5"),e._uU(137,"Responsive"),e.qZA(),e.TgZ(138,"div",4),e.TgZ(139,"div",19),e.TgZ(140,"div",6),e._uU(141,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(142,"div",19),e.TgZ(143,"div",6),e._uU(144,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(145,"div",19),e.TgZ(146,"div",6),e._uU(147,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(148,"div",19),e.TgZ(149,"div",6),e._uU(150,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(151,"h5"),e._uU(152,"Horizontal Alignment - Start"),e.qZA(),e.TgZ(153,"div",20),e.TgZ(154,"div",15),e.TgZ(155,"div",6),e._uU(156,"2"),e.qZA(),e.qZA(),e.TgZ(157,"div",21),e.TgZ(158,"div",6),e._uU(159,"1"),e.qZA(),e.qZA(),e.TgZ(160,"div",14),e.TgZ(161,"div",6),e._uU(162,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(163,"h5"),e._uU(164,"Horizontal Alignment - End"),e.qZA(),e.TgZ(165,"div",22),e.TgZ(166,"div",15),e.TgZ(167,"div",6),e._uU(168,"2"),e.qZA(),e.qZA(),e.TgZ(169,"div",21),e.TgZ(170,"div",6),e._uU(171,"1"),e.qZA(),e.qZA(),e.TgZ(172,"div",14),e.TgZ(173,"div",6),e._uU(174,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(175,"h5"),e._uU(176,"Horizontal Alignment - Center"),e.qZA(),e.TgZ(177,"div",23),e.TgZ(178,"div",15),e.TgZ(179,"div",6),e._uU(180,"2"),e.qZA(),e.qZA(),e.TgZ(181,"div",21),e.TgZ(182,"div",6),e._uU(183,"1"),e.qZA(),e.qZA(),e.TgZ(184,"div",14),e.TgZ(185,"div",6),e._uU(186,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(187,"h5"),e._uU(188,"Horizontal Alignment - Between"),e.qZA(),e.TgZ(189,"div",24),e.TgZ(190,"div",15),e.TgZ(191,"div",6),e._uU(192,"2"),e.qZA(),e.qZA(),e.TgZ(193,"div",21),e.TgZ(194,"div",6),e._uU(195,"1"),e.qZA(),e.qZA(),e.TgZ(196,"div",14),e.TgZ(197,"div",6),e._uU(198,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(199,"h5"),e._uU(200,"Horizontal Alignment - Around"),e.qZA(),e.TgZ(201,"div",25),e.TgZ(202,"div",15),e.TgZ(203,"div",6),e._uU(204,"2"),e.qZA(),e.qZA(),e.TgZ(205,"div",21),e.TgZ(206,"div",6),e._uU(207,"1"),e.qZA(),e.qZA(),e.TgZ(208,"div",14),e.TgZ(209,"div",6),e._uU(210,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(211,"h5"),e._uU(212,"Horizontal Alignment - Even"),e.qZA(),e.TgZ(213,"div",26),e.TgZ(214,"div",15),e.TgZ(215,"div",6),e._uU(216,"2"),e.qZA(),e.qZA(),e.TgZ(217,"div",21),e.TgZ(218,"div",6),e._uU(219,"1"),e.qZA(),e.qZA(),e.TgZ(220,"div",14),e.TgZ(221,"div",6),e._uU(222,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(223,"h5"),e._uU(224,"Vertical Alignment - Start"),e.qZA(),e.TgZ(225,"div",27),e.TgZ(226,"div",5),e.TgZ(227,"div",6),e._uU(228,"4"),e.qZA(),e.qZA(),e.TgZ(229,"div",5),e.TgZ(230,"div",6),e._uU(231,"4"),e.qZA(),e.qZA(),e.TgZ(232,"div",5),e.TgZ(233,"div",6),e._uU(234,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(235,"h5"),e._uU(236,"Vertical Alignment - End"),e.qZA(),e.TgZ(237,"div",28),e.TgZ(238,"div",5),e.TgZ(239,"div",6),e._uU(240,"4"),e.qZA(),e.qZA(),e.TgZ(241,"div",5),e.TgZ(242,"div",6),e._uU(243,"4"),e.qZA(),e.qZA(),e.TgZ(244,"div",5),e.TgZ(245,"div",6),e._uU(246,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(247,"h5"),e._uU(248,"Vertical Alignment - Center"),e.qZA(),e.TgZ(249,"div",29),e.TgZ(250,"div",5),e.TgZ(251,"div",6),e._uU(252,"4"),e.qZA(),e.qZA(),e.TgZ(253,"div",5),e.TgZ(254,"div",6),e._uU(255,"4"),e.qZA(),e.qZA(),e.TgZ(256,"div",5),e.TgZ(257,"div",6),e._uU(258,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(259,"h5"),e._uU(260,"Vertical Alignment - Stretch"),e.qZA(),e.TgZ(261,"div",30),e.TgZ(262,"div",5),e.TgZ(263,"div",31),e._uU(264,"4"),e.qZA(),e.qZA(),e.TgZ(265,"div",5),e.TgZ(266,"div",31),e._uU(267,"4"),e.qZA(),e.qZA(),e.TgZ(268,"div",5),e.TgZ(269,"div",31),e._uU(270,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(271,"h5"),e._uU(272,"Vertical Alignment - Per Column"),e.qZA(),e.TgZ(273,"div",32),e.TgZ(274,"div",33),e.TgZ(275,"div",6),e._uU(276,"4"),e.qZA(),e.qZA(),e.TgZ(277,"div",34),e.TgZ(278,"div",6),e._uU(279,"4"),e.qZA(),e.qZA(),e.TgZ(280,"div",35),e.TgZ(281,"div",6),e._uU(282,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(283,"h5"),e._uU(284,"Offset"),e.qZA(),e.TgZ(285,"div",4),e.TgZ(286,"div",36),e.TgZ(287,"div",6),e._uU(288,"6"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(289,"div",4),e.TgZ(290,"div",14),e.TgZ(291,"div",6),e._uU(292,"4"),e.qZA(),e.qZA(),e.TgZ(293,"div",37),e.TgZ(294,"div",6),e._uU(295,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(296,"h5"),e._uU(297,"Nested"),e.qZA(),e.TgZ(298,"div",38),e.TgZ(299,"div",17),e.TgZ(300,"div",4),e.TgZ(301,"div",16),e.TgZ(302,"div",6),e._uU(303,"6"),e.qZA(),e.qZA(),e.TgZ(304,"div",16),e.TgZ(305,"div",6),e._uU(306,"6"),e.qZA(),e.qZA(),e.TgZ(307,"div",39),e.TgZ(308,"div",6),e._uU(309,"12"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(310,"div",14),e.TgZ(311,"div",31),e._uU(312,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(313,"h5"),e._uU(314,"Panels"),e.qZA(),e.TgZ(315,"div",4),e.TgZ(316,"div",5),e.TgZ(317,"p-panel",40),e.TgZ(318,"p",41),e._uU(319,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),e.qZA(),e.qZA(),e.qZA(),e.TgZ(320,"div",5),e.TgZ(321,"p-panel",40),e.TgZ(322,"p",41),e._uU(323,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),e.qZA(),e.qZA(),e.qZA(),e.TgZ(324,"div",5),e.TgZ(325,"p-panel",40),e.TgZ(326,"p",41),e._uU(327,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(328,"div",42),e.TgZ(329,"p-tabView"),e.TgZ(330,"p-tabPanel",43),e.TgZ(331,"h5"),e._uU(332,"Getting Started"),e.qZA(),e.TgZ(333,"p"),e._uU(334,"FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit "),e.TgZ(335,"a",44),e._uU(336,"A Complete Guide to Flexbox"),e.qZA(),e._uU(337,". A basic grid is defined by giving a container "),e.TgZ(338,"i"),e._uU(339,"p-grid"),e.qZA(),e._uU(340," class and children the "),e.TgZ(341,"i"),e._uU(342,"p-col"),e.qZA(),e._uU(343," class. Children of the grid will have the same width and scale according to the width of the parent."),e.qZA(),e.TgZ(344,"app-code",45),e.IAx(),e._uU(345,'\n<div class="p-grid">\n    <div class="p-col">1</div>\n    <div class="p-col">2</div>\n    <div class="p-col">3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(346,"div",4),e.TgZ(347,"div",5),e.TgZ(348,"div",6),e._uU(349,"1"),e.qZA(),e.qZA(),e.TgZ(350,"div",5),e.TgZ(351,"div",6),e._uU(352,"2"),e.qZA(),e.qZA(),e.TgZ(353,"div",5),e.TgZ(354,"div",6),e._uU(355,"3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(356,"h5"),e._uU(357,"12 Column Grid"),e.qZA(),e.TgZ(358,"p"),e._uU(359,"FlexGrid includes a 12 column based layout utility where width of a column is defined with the "),e.TgZ(360,"i"),e._uU(361,"p-col-{number}"),e.qZA(),e._uU(362," style class. Columns with prefined widths can be used with columns with auto width (p-col) as well. "),e.qZA(),e.TgZ(363,"p"),e._uU(364,"In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units. "),e.qZA(),e.TgZ(365,"app-code",45),e.IAx(),e._uU(366,'\n<div class="p-grid">\n    <div class="p-col-4">4</div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n    <div class="p-col">1 </div>\n</div>\n\n<div class="p-grid">\n    <div class="p-col-2">2</div>\n    <div class="p-col-6">6</div>\n    <div class="p-col-4">4</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(367,"div",4),e.TgZ(368,"div",14),e.TgZ(369,"div",6),e._uU(370,"4"),e.qZA(),e.qZA(),e.TgZ(371,"div",5),e.TgZ(372,"div",6),e._uU(373,"1"),e.qZA(),e.qZA(),e.TgZ(374,"div",5),e.TgZ(375,"div",6),e._uU(376,"1"),e.qZA(),e.qZA(),e.TgZ(377,"div",5),e.TgZ(378,"div",6),e._uU(379,"1"),e.qZA(),e.qZA(),e.TgZ(380,"div",5),e.TgZ(381,"div",6),e._uU(382,"1"),e.qZA(),e.qZA(),e.TgZ(383,"div",5),e.TgZ(384,"div",6),e._uU(385,"1"),e.qZA(),e.qZA(),e.TgZ(386,"div",5),e.TgZ(387,"div",6),e._uU(388,"1"),e.qZA(),e.qZA(),e.TgZ(389,"div",5),e.TgZ(390,"div",6),e._uU(391,"1"),e.qZA(),e.qZA(),e.TgZ(392,"div",5),e.TgZ(393,"div",6),e._uU(394,"1"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(395,"div",4),e.TgZ(396,"div",15),e.TgZ(397,"div",6),e._uU(398,"2"),e.qZA(),e.qZA(),e.TgZ(399,"div",16),e.TgZ(400,"div",6),e._uU(401,"6"),e.qZA(),e.qZA(),e.TgZ(402,"div",14),e.TgZ(403,"div",6),e._uU(404,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(405,"h5"),e._uU(406,"MultiLine"),e.qZA(),e.TgZ(407,"p"),e._uU(408,"When the number of columns exceed 12, columns wrap to a new line."),e.qZA(),e.TgZ(409,"app-code",45),e.IAx(),e._uU(410,'\n<div class="p-grid">\n    <div class="p-col-6">6</div>\n    <div class="p-col-6">6</div>\n    <div class="p-col-6">6</div>\n    <div class="p-col-6">6</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(411,"div",4),e.TgZ(412,"div",16),e.TgZ(413,"div",6),e._uU(414,"6"),e.qZA(),e.qZA(),e.TgZ(415,"div",16),e.TgZ(416,"div",6),e._uU(417,"6"),e.qZA(),e.qZA(),e.TgZ(418,"div",16),e.TgZ(419,"div",6),e._uU(420,"6"),e.qZA(),e.qZA(),e.TgZ(421,"div",16),e.TgZ(422,"div",6),e._uU(423,"6"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(424,"h5"),e._uU(425,"Fixed Width Column"),e.qZA(),e.TgZ(426,"p"),e._uU(427,"A column can have a fixed width while siblings having auto width. Apply "),e.TgZ(428,"i"),e._uU(429,"p-col-fixed"),e.qZA(),e._uU(430," class to fix a column width."),e.qZA(),e.TgZ(431,"app-code",45),e.IAx(),e._uU(432,'\n<div class="p-grid">\n    <div class="p-col-fixed" style="width:100px">Fixed</div>\n    <div class="p-col">Auto</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(433,"div",4),e.TgZ(434,"div",18),e.TgZ(435,"div",6),e._uU(436,"100px"),e.qZA(),e.qZA(),e.TgZ(437,"div",5),e.TgZ(438,"div",6),e._uU(439,"auto"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(440,"h5"),e._uU(441,"Responsive"),e.qZA(),e.TgZ(442,"p"),e._uU(443,"Responsive layout is achieved by applying breakpoint specific classes to the columns whereas "),e.TgZ(444,"i"),e._uU(445,"p-col-*"),e.qZA(),e._uU(446," define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints."),e.qZA(),e.TgZ(447,"div",46),e.TgZ(448,"table",47),e.TgZ(449,"thead"),e.TgZ(450,"tr"),e.TgZ(451,"th"),e._uU(452,"Prefix"),e.qZA(),e.TgZ(453,"th"),e._uU(454,"Devices"),e.qZA(),e.TgZ(455,"th"),e._uU(456,"Media Query"),e.qZA(),e.TgZ(457,"th"),e._uU(458,"Example"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(459,"tbody"),e.TgZ(460,"tr"),e.TgZ(461,"td"),e._uU(462,"p-sm-*"),e.qZA(),e.TgZ(463,"td"),e._uU(464,"Small devices"),e.qZA(),e.TgZ(465,"td"),e._uU(466,"min-width: 576px"),e.qZA(),e.TgZ(467,"td"),e._uU(468,"p-sm-6, p-sm-4"),e.qZA(),e.qZA(),e.TgZ(469,"tr"),e.TgZ(470,"td"),e._uU(471,"p-md-*"),e.qZA(),e.TgZ(472,"td"),e._uU(473,"Medium sized devices such as tablets"),e.qZA(),e.TgZ(474,"td"),e._uU(475,"min-width: 768px"),e.qZA(),e.TgZ(476,"td"),e._uU(477,"p-md-2, p-md-8"),e.qZA(),e.qZA(),e.TgZ(478,"tr"),e.TgZ(479,"td"),e._uU(480,"p-lg-*"),e.qZA(),e.TgZ(481,"td"),e._uU(482,"Devices with large screen like desktops"),e.qZA(),e.TgZ(483,"td"),e._uU(484,"min-width: 992px"),e.qZA(),e.TgZ(485,"td"),e._uU(486,"p-lg-6, p-lg-12"),e.qZA(),e.qZA(),e.TgZ(487,"tr"),e.TgZ(488,"td"),e._uU(489,"p-xl-*"),e.qZA(),e.TgZ(490,"td"),e._uU(491,"Big screen monitors"),e.qZA(),e.TgZ(492,"td"),e._uU(493,"min-width: 1200px"),e.qZA(),e.TgZ(494,"td"),e._uU(495,"p-xl-2, p-xl-10"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(496,"p"),e._uU(497,"In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked."),e.qZA(),e.TgZ(498,"app-code",45),e.IAx(),e._uU(499,'\n<div class="p-grid">\n    <div class="p-col-12 p-md-6 p-lg-3">A</div>\n    <div class="p-col-12 p-md-6 p-lg-3">B</div>\n    <div class="p-col-12 p-md-6 p-lg-3">C</div>\n    <div class="p-col-12 p-md-6 p-lg-3">D</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(500,"div",4),e.TgZ(501,"div",19),e.TgZ(502,"div",6),e._uU(503,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(504,"div",19),e.TgZ(505,"div",6),e._uU(506,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(507,"div",19),e.TgZ(508,"div",6),e._uU(509,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.TgZ(510,"div",19),e.TgZ(511,"div",6),e._uU(512,"p-col-12 p-md-6 p-lg-3"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(513,"h5"),e._uU(514,"Offset"),e.qZA(),e.TgZ(515,"p"),e._uU(516,"Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing."),e.qZA(),e.TgZ(517,"app-code",45),e.IAx(),e._uU(518,'\n<div class="p-grid">\n    <div class="p-col-6 p-offset-3">6</div>\n</div>\n\n<div class="p-grid">\n    <div class="p-col-4">4 </div>\n    <div class="p-col-4 p-offset-4">4</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(519,"div",4),e.TgZ(520,"div",36),e.TgZ(521,"div",6),e._uU(522,"6"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(523,"div",4),e.TgZ(524,"div",14),e.TgZ(525,"div",6),e._uU(526,"4"),e.qZA(),e.qZA(),e.TgZ(527,"div",37),e.TgZ(528,"div",6),e._uU(529,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(530,"p"),e._uU(531,"The list of offset classes varying within a range of 1 to 12."),e.qZA(),e.TgZ(532,"div",46),e.TgZ(533,"table",47),e.TgZ(534,"thead"),e.TgZ(535,"tr"),e.TgZ(536,"th"),e._uU(537,"Prefix"),e.qZA(),e.TgZ(538,"th"),e._uU(539,"Devices"),e.qZA(),e.TgZ(540,"th"),e._uU(541,"Media Query"),e.qZA(),e.TgZ(542,"th"),e._uU(543,"Example"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(544,"tbody"),e.TgZ(545,"tr"),e.TgZ(546,"td"),e._uU(547,"p-col-offset-*"),e.qZA(),e.TgZ(548,"td"),e._uU(549,"All devices"),e.qZA(),e.TgZ(550,"td"),e._uU(551,"All screens"),e.qZA(),e.TgZ(552,"td"),e._uU(553,"p-col-offset-6, p-col-offset-4"),e.qZA(),e.qZA(),e.TgZ(554,"tr"),e.TgZ(555,"td"),e._uU(556,"p-sm-offset-*"),e.qZA(),e.TgZ(557,"td"),e._uU(558,"Small devices"),e.qZA(),e.TgZ(559,"td"),e._uU(560,"min-width: 576px"),e.qZA(),e.TgZ(561,"td"),e._uU(562,"p-sm-offset-6, p-sm-offset-4"),e.qZA(),e.qZA(),e.TgZ(563,"tr"),e.TgZ(564,"td"),e._uU(565,"p-md-offset-*"),e.qZA(),e.TgZ(566,"td"),e._uU(567,"Medium sized devices such as tablets"),e.qZA(),e.TgZ(568,"td"),e._uU(569,"min-width: 768px"),e.qZA(),e.TgZ(570,"td"),e._uU(571,"p-md-offset-6, p-md-offset-4"),e.qZA(),e.qZA(),e.TgZ(572,"tr"),e.TgZ(573,"td"),e._uU(574,"p-lg-offset-*"),e.qZA(),e.TgZ(575,"td"),e._uU(576,"Devices with large screen like desktops"),e.qZA(),e.TgZ(577,"td"),e._uU(578,"min-width: 992px"),e.qZA(),e.TgZ(579,"td"),e._uU(580,"p-lg-offset-6, p-lg-offset-4"),e.qZA(),e.qZA(),e.TgZ(581,"tr"),e.TgZ(582,"td"),e._uU(583,"p-xl-offset-*"),e.qZA(),e.TgZ(584,"td"),e._uU(585,"Big screen monitors"),e.qZA(),e.TgZ(586,"td"),e._uU(587,"min-width: 1200px"),e.qZA(),e.TgZ(588,"td"),e._uU(589,"p-xl-offset-6, p-xl-offset-4"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(590,"h5"),e._uU(591,"Nested"),e.qZA(),e.TgZ(592,"p"),e._uU(593,"Columns can be nested to create more complex layouts."),e.qZA(),e.TgZ(594,"app-code",45),e.IAx(),e._uU(595,'\n<div class="p-grid">\n    <div class="p-col-8">\n        <div class="p-grid">\n            <div class="p-col-6">\n                6\n            </div>\n            <div class="p-col-6">\n                6\n            </div>\n            <div class="p-col-12">\n                12\n            </div>\n        </div>\n    </div>\n    <div class="p-col-4">\n        4\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(596,"div",38),e.TgZ(597,"div",17),e.TgZ(598,"div",4),e.TgZ(599,"div",16),e.TgZ(600,"div",6),e._uU(601,"6"),e.qZA(),e.qZA(),e.TgZ(602,"div",16),e.TgZ(603,"div",6),e._uU(604,"6"),e.qZA(),e.qZA(),e.TgZ(605,"div",39),e.TgZ(606,"div",6),e._uU(607,"12"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(608,"div",14),e.TgZ(609,"div",31),e._uU(610,"4"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(611,"h5"),e._uU(612,"Gutter"),e.qZA(),e.TgZ(613,"p"),e._uU(614,"A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply "),e.TgZ(615,"i"),e._uU(616,".p-nogutter"),e.qZA(),e._uU(617," class to the container. Gutters can also be removed on an ndividual columns with the same class name. "),e.qZA(),e.TgZ(618,"app-code",45),e.IAx(),e._uU(619,'\n<div class="p-grid p-nogutter">\n    <div class="p-col">1</div>\n    <div class="p-col p-nogutter">2</div>\n    <div class="p-col">3</div>\n</div>\n'),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(620,"p-tabPanel",48),e.TgZ(621,"a",49),e.TgZ(622,"span"),e._uU(623,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(624,"app-code",45),e.IAx(),e._uU(625,'\n<h5>Basic</h5>\n<div class="p-grid">\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col">\n        <div class="box">3</div>\n    </div>\n</div>\n\n<h5>Dynamic</h5>\n<button pButton pRipple type="button" icon="pi pi-plus" title="Add Column" (click)="addColumn()" [disabled]="columns.length === 20" class="p-mr-2"></button>\n<button pButton pRipple type="button" icon="pi pi-minus" title="Remove Column" (click)="removeColumn()"[disabled]="columns.length === 1"></button>\n\n<div class="p-grid p-mt-2">\n    <div class="p-col" *ngFor="let col of columns; let i=index" [@animation]="\'visible\'">\n        <div class="box">{{i + 1}}</div>\n    </div>\n</div>\n\n<h5>Reverse Direction</h5>\n<div class="p-grid p-flex-row-reverse">\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col">\n        <div class="box">3</div>\n    </div>\n</div>\n\n<h5>Column Direction</h5>\n<div class="p-grid p-flex-column">\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col">\n        <div class="box">3</div>\n    </div>\n</div>\n\n<h5>Reverse Column Direction</h5>\n<div class="p-grid p-flex-column-reverse">\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col">\n        <div class="box">3</div>\n    </div>\n</div>\n\n<h5>12 Column Grid</h5>\n<div class="p-grid">\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col">\n        <div class="box">1</div>\n    </div>\n</div>\n\n<div class="p-grid">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-6">\n        <div class="box">6</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<div class="p-grid">\n    <div class="p-col-8">\n        <div class="box">8</div>\n    </div>\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n</div>\n\n<h5>MultiLine</h5>\n<div class="p-grid">\n    <div class="p-col-6">\n        <div class="box">6</div>\n    </div>\n    <div class="p-col-6">\n        <div class="box">6</div>\n    </div>\n    <div class="p-col-6">\n        <div class="box">6</div>\n    </div>\n    <div class="p-col-6">\n        <div class="box">6</div>\n    </div>\n</div>\n\n<h5>Fixed Width Column</h5>\n<div class="p-grid">\n    <div class="p-col-fixed" style="width:100px">\n        <div class="box">100px</div>\n    </div>\n    <div class="p-col">\n        <div class="box">auto</div>\n    </div>\n</div>\n\n<h5>Responsive</h5>\n<div class="p-grid">\n    <div class="p-col-12 p-md-6 p-lg-3">\n        <div class="box">p-col-12 p-md-6 p-lg-3</div>\n    </div>\n    <div class="p-col-12 p-md-6 p-lg-3">\n        <div class="box">p-col-12 p-md-6 p-lg-3</div>\n    </div>\n    <div class="p-col-12 p-md-6 p-lg-3">\n        <div class="box">p-col-12 p-md-6 p-lg-3</div>\n    </div>\n    <div class="p-col-12 p-md-6 p-lg-3">\n        <div class="box">p-col-12 p-md-6 p-lg-3</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - Start</h5>\n<div class="p-grid p-jc-start">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - End</h5>\n<div class="p-grid p-jc-end">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - Center</h5>\n<div class="p-grid p-jc-center">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - Between</h5>\n<div class="p-grid p-jc-between">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - Around</h5>\n<div class="p-grid p-jc-around">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Horizontal Alignment - Even</h5>\n<div class="p-grid p-jc-evenly">\n    <div class="p-col-2">\n        <div class="box">2</div>\n    </div>\n    <div class="p-col-1">\n        <div class="box">1</div>\n    </div>\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Vertical Alignment - Start</h5>\n<div class="p-grid p-ai-start vertical-container">\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Vertical Alignment - End</h5>\n<div class="p-grid p-ai-end vertical-container">\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Vertical Alignment - Center</h5>\n<div class="p-grid p-ai-center vertical-container">\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Vertical Alignment - Stretch</h5>\n<div class="p-grid p-ai-stretch vertical-container">\n    <div class="p-col">\n        <div class="box box-stretched">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box box-stretched">4</div>\n    </div>\n    <div class="p-col">\n        <div class="box box-stretched">4</div>\n    </div>\n</div>\n\n<h5>Vertical Alignment - Per Column</h5>\n<div class="p-grid vertical-container">\n    <div class="p-col p-as-start">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col p-as-center">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col p-as-end">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Offset</h5>\n<div class="p-grid">\n    <div class="p-col-6 p-offset-3">\n        <div class="box">6</div>\n    </div>\n</div>\n\n<div class="p-grid">\n    <div class="p-col-4">\n        <div class="box">4</div>\n    </div>\n    <div class="p-col-4 p-offset-4">\n        <div class="box">4</div>\n    </div>\n</div>\n\n<h5>Nested</h5>\n<div class="p-grid nested-grid">\n    <div class="p-col-8">\n        <div class="p-grid">\n            <div class="p-col-6">\n                <div class="box">6</div>\n            </div>\n            <div class="p-col-6">\n                <div class="box">6</div>\n            </div>\n            <div class="p-col-12">\n                <div class="box">12</div>\n            </div>\n        </div>\n    </div>\n    <div class="p-col-4">\n        <div class="box box-stretched">4</div>\n    </div>\n</div>\n\n<h5>Panels</h5>\n<div class="p-grid">\n    <div class="p-col">\n        <p-panel header="Header">\n            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        </p-panel>\n    </div>\n    <div class="p-col">\n        <p-panel header="Header">\n            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        </p-panel>\n    </div>\n    <div class="p-col">\n        <p-panel header="Header">\n            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        </p-panel>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(626,"app-code",50),e.IAx(),e._uU(627,"\nimport {Component} from '@angular/core';\nimport {trigger,state,style,transition,animate} from '@angular/animations';\n\n@Component ({\n    styles:[`\n        .box {\n            background-color: var(--surface-e);\n            text-align: center;\n            padding-top: 1rem;\n            padding-bottom: 1rem;\n            border-radius: 4px;\n            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n        }\n\n        .box-stretched {\n            height: 100%;\n        }\n\n        .vertical-container {\n            margin: 0;\n            height: 200px;\n            background: var(--surface-d);\n            border-radius: 4px;\n        }\n\n        .nested-grid .p-col-4 {\n            padding-bottom: 1rem;\n        }\n    `],\n    templateUrl: './griddemo.html',\n    animations: [\n        trigger('animation', [\n            state('visible', style({\n                transform: 'translateX(0)',\n                opacity: 1\n            })),\n            transition('void => *', [\n                style({transform: 'translateX(50%)', opacity: 0}),\n                animate('300ms ease-out')\n            ]),\n            transition('* => void', [\n                animate(('250ms ease-in'), style({\n                    height: 0,\n                    opacity: 0,\n                    transform: 'translateX(50%)'\n                }))\n            ])\n        ])\n    ]\n})\nexport class GridDemo {\n\n    columns: number[];\n\n    ngOnInit() {\n        this.columns = [0, 1, 2, 3, 4, 5];\n    }\n\n    addColumn() {\n        this.columns.push(this.columns.length);\n    }\n\n    removeColumn() {\n        this.columns.splice(-1, 1);\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&a&&(e.xp6(22),e.Q6J("disabled",20===s.columns.length),e.xp6(1),e.Q6J("disabled",1===s.columns.length),e.xp6(2),e.Q6J("ngForOf",s.columns))},directives:[_.P,h.Hq,f.H,i.sg,m.s,g.xf,g.x4,v.h],styles:[".box[_ngcontent-%COMP%]{background-color:var(--surface-e);text-align:center;padding-top:1rem;padding-bottom:1rem;border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.box-stretched[_ngcontent-%COMP%]{height:100%}.vertical-container[_ngcontent-%COMP%]{margin:0;height:200px;background:var(--surface-d);border-radius:4px}.nested-grid[_ngcontent-%COMP%]   .p-col-4[_ngcontent-%COMP%]{padding-bottom:1rem}.content-section[_ngcontent-%COMP%]{background-color:var(--surface-b);color:var(--text-color)}"],data:{animation:[(0,Z.X$)("animation",[(0,Z.SB)("visible",(0,Z.oB)({transform:"translateX(0)",opacity:1})),(0,Z.eR)("void => *",[(0,Z.oB)({transform:"translateX(50%)",opacity:0}),(0,Z.jt)("300ms ease-out")]),(0,Z.eR)("* => void",[(0,Z.jt)("250ms ease-in",(0,Z.oB)({height:0,opacity:0,transform:"translateX(50%)"}))])])]}}),n})(),O=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:198,vars:0,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["href","https://github.com/primefaces/primeflex"],["github","primeflex","stackblitz","primeflex-spacing-demo"],[1,"content-section","implementation"],[1,"card"],["pButton","","pRipple","","type","button","label","Button 1",2,"width","20rem"],["pButton","","pRipple","","type","button","label","Button 2",2,"width","20rem"],["pButton","","pRipple","","type","button","label","Button 1",1,"p-mr-2","p-mb-2",2,"width","20rem"],["pButton","","pRipple","","type","button","label","Button 2",1,"p-mb-2",2,"width","20rem"],[1,"p-grid","p-formgrid","p-fluid"],[1,"p-col-12","p-lg-4"],["type","text","pInputText",""],[1,"p-col-12","p-mb-2","p-lg-4","p-mb-lg-0"],[1,"demo-container","p-p-4"],["pButton","","pRipple","","type","button","label","Button",1,"p-d-block","p-mx-auto"],[1,"demo-container"],["pButton","","pRipple","","type","button","label","Button"],[1,"demo-container","p-p-3"],[1,"demo-container","p-p-0","p-p-sm-1","p-p-md-2","p-p-lg-3"],[1,"content-section","documentation"],["header","Documentation"],["lang","markup"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/","target","_blank",1,"btn-viewsource"],["href","https://stackblitz.com/edit/primeng-primeflex-spacing-demo","target","_blank",1,"btn-viewsource",2,"margin-left",".5em"],["lang","typescript"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Spacing"),e.qZA(),e.TgZ(4,"p"),e.TgZ(5,"a",2),e._uU(6,"PrimeFlex"),e.qZA(),e._uU(7," provides various spacing utilities to modify an element's layout."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",3),e.qZA(),e.TgZ(9,"div",4),e.TgZ(10,"div",5),e.TgZ(11,"h5"),e._uU(12,"Margin"),e.qZA(),e.TgZ(13,"h6"),e._uU(14,"Without Spacing"),e.qZA(),e._UZ(15,"button",6),e._UZ(16,"button",7),e.TgZ(17,"h6"),e._uU(18,"With Spacing"),e.qZA(),e._UZ(19,"button",8),e._UZ(20,"button",9),e.TgZ(21,"h5"),e._uU(22,"Responsive Margin"),e.qZA(),e.TgZ(23,"h6"),e._uU(24,"Without Spacing"),e.qZA(),e.TgZ(25,"div",10),e.TgZ(26,"div",11),e._UZ(27,"input",12),e.qZA(),e.TgZ(28,"div",11),e._UZ(29,"input",12),e.qZA(),e.TgZ(30,"div",11),e._UZ(31,"input",12),e.qZA(),e.qZA(),e.TgZ(32,"h6"),e._uU(33,"With Spacing"),e.qZA(),e.TgZ(34,"div",10),e.TgZ(35,"div",13),e._UZ(36,"input",12),e.qZA(),e.TgZ(37,"div",13),e._UZ(38,"input",12),e.qZA(),e.TgZ(39,"div",13),e._UZ(40,"input",12),e.qZA(),e.qZA(),e.TgZ(41,"h6"),e._uU(42,"Center"),e.qZA(),e.TgZ(43,"div",14),e._UZ(44,"button",15),e.qZA(),e.qZA(),e.TgZ(45,"div",5),e.TgZ(46,"h5"),e._uU(47,"Padding"),e.qZA(),e.TgZ(48,"h6"),e._uU(49,"Without Spacing"),e.qZA(),e.TgZ(50,"div",16),e._UZ(51,"button",17),e.qZA(),e.TgZ(52,"h6"),e._uU(53,"With Spacing"),e.qZA(),e.TgZ(54,"div",18),e._UZ(55,"button",17),e.qZA(),e.TgZ(56,"h6"),e._uU(57,"Responsive Spacing"),e.qZA(),e.TgZ(58,"div",19),e._UZ(59,"button",17),e.qZA(),e.qZA(),e.qZA(),e.TgZ(60,"div",20),e.TgZ(61,"p-tabView"),e.TgZ(62,"p-tabPanel",21),e.TgZ(63,"h5"),e._uU(64,"Getting Started"),e.qZA(),e.TgZ(65,"p"),e._uU(66,"The spacing classes use the "),e.TgZ(67,"i"),e._uU(68,"p-{property}{position}-{value}"),e.qZA(),e._uU(69," syntax whereas for responsive values "),e.TgZ(70,"i"),e._uU(71,"p-{property}{position}-{breakpoint}-{value}"),e.qZA(),e._uU(72," format is used."),e.qZA(),e.TgZ(73,"h5"),e._uU(74,"Property"),e.qZA(),e.TgZ(75,"p"),e._uU(76,"Property can either be a margin or a padding."),e.qZA(),e.TgZ(77,"ul"),e.TgZ(78,"li"),e.TgZ(79,"b"),e._uU(80,"m"),e.qZA(),e._uU(81,": margin"),e.qZA(),e.TgZ(82,"li"),e.TgZ(83,"b"),e._uU(84,"p"),e.qZA(),e._uU(85,": padding"),e.qZA(),e.qZA(),e.TgZ(86,"h5"),e._uU(87,"Position"),e.qZA(),e.TgZ(88,"p"),e._uU(89,"Position are available for the individual sides, the x-y axis or blank for the shortand of all sides."),e.qZA(),e.TgZ(90,"ul"),e.TgZ(91,"li"),e.TgZ(92,"b"),e._uU(93,"t"),e.qZA(),e._uU(94,": top"),e.qZA(),e.TgZ(95,"li"),e.TgZ(96,"b"),e._uU(97,"b"),e.qZA(),e._uU(98,": bottom"),e.qZA(),e.TgZ(99,"li"),e.TgZ(100,"b"),e._uU(101,"l"),e.qZA(),e._uU(102,": left"),e.qZA(),e.TgZ(103,"li"),e.TgZ(104,"b"),e._uU(105,"r"),e.qZA(),e._uU(106,": right"),e.qZA(),e.TgZ(107,"li"),e.TgZ(108,"b"),e._uU(109,"x"),e.qZA(),e._uU(110,": left and right"),e.qZA(),e.TgZ(111,"li"),e.TgZ(112,"b"),e._uU(113,"y"),e.qZA(),e._uU(114,": top and bottom"),e.qZA(),e.TgZ(115,"li"),e.TgZ(116,"b"),e._uU(117,"blank"),e.qZA(),e._uU(118,": all sides"),e.qZA(),e.qZA(),e.TgZ(119,"h5"),e._uU(120,"Value"),e.qZA(),e.TgZ(121,"p"),e._uU(122,"Value field varies from 0 to 6 where default value of the "),e.TgZ(123,"i"),e._uU(124,"$spacer"),e.qZA(),e._uU(125," is 1rem. The special "),e.TgZ(126,"i"),e._uU(127,"auto"),e.qZA(),e._uU(128," value is available to margins only and used to center elements."),e.qZA(),e.TgZ(129,"ul"),e.TgZ(130,"li"),e.TgZ(131,"b"),e._uU(132,"0"),e.qZA(),e._uU(133,": $spacer * 0"),e.qZA(),e.TgZ(134,"li"),e.TgZ(135,"b"),e._uU(136,"1"),e.qZA(),e._uU(137,": $spacer * .25"),e.qZA(),e.TgZ(138,"li"),e.TgZ(139,"b"),e._uU(140,"2"),e.qZA(),e._uU(141,": $spacer * .5"),e.qZA(),e.TgZ(142,"li"),e.TgZ(143,"b"),e._uU(144,"3"),e.qZA(),e._uU(145,": $spacer * 1"),e.qZA(),e.TgZ(146,"li"),e.TgZ(147,"b"),e._uU(148,"4"),e.qZA(),e._uU(149,": $spacer * 1.5"),e.qZA(),e.TgZ(150,"li"),e.TgZ(151,"b"),e._uU(152,"5"),e.qZA(),e._uU(153,": $spacer * 2"),e.qZA(),e.TgZ(154,"li"),e.TgZ(155,"b"),e._uU(156,"6"),e.qZA(),e._uU(157,": $spacer * 3"),e.qZA(),e.TgZ(158,"li"),e.TgZ(159,"b"),e._uU(160,"auto"),e.qZA(),e._uU(161,": auto margin"),e.qZA(),e.qZA(),e.TgZ(162,"h5"),e._uU(163,"Breakpoint"),e.qZA(),e.TgZ(164,"p"),e._uU(165,"Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined."),e.qZA(),e.TgZ(166,"ul"),e.TgZ(167,"li"),e.TgZ(168,"b"),e._uU(169,"sm"),e.qZA(),e._uU(170,": small screens e.g. phones"),e.qZA(),e.TgZ(171,"li"),e.TgZ(172,"b"),e._uU(173,"md"),e.qZA(),e._uU(174,": medium screens e.g. tablets"),e.qZA(),e.TgZ(175,"li"),e.TgZ(176,"b"),e._uU(177,"lg"),e.qZA(),e._uU(178,": large screens e.g. notebooks"),e.qZA(),e.TgZ(179,"li"),e.TgZ(180,"b"),e._uU(181,"xl"),e.qZA(),e._uU(182,": larger screens .e.g monitors"),e.qZA(),e.qZA(),e.TgZ(183,"h5"),e._uU(184,"Examples"),e.qZA(),e.TgZ(185,"app-code",22),e.IAx(),e._uU(186,'\n<div class="p-mb-2">Margin bottom with level 2</div>\n<div class="p-mt-4">Margin top with level 4</div>\n<div class="p-m-2">Margin for all sides with level 2</div>\n<div class="p-mx-auto">Auto margins for left and right side</div>\n<div class="p-pb-4">Padding bottom with level 4</div>\n<div class="p-p-1">Padding for all sides with level 1</div>\n<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>\n'),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(187,"p-tabPanel",23),e.TgZ(188,"a",24),e.TgZ(189,"span"),e._uU(190,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(191,"a",25),e.TgZ(192,"span"),e._uU(193,"Edit in StackBlitz"),e.qZA(),e.qZA(),e.TgZ(194,"app-code",22),e.IAx(),e._uU(195,'\n<div class="card">\n    <h5>Margin</h5>\n    <h6>Without Spacing</h6>\n    <button pButton pRipple type="button" label="Button 1" style="width:20rem"></button><button pButton pRipple type="button" label="Button 2" style="width:20rem"></button>\n\n    <h6>With Spacing</h6>\n    <button pButton pRipple type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2"></button><button pButton pRipple type="button" label="Button 2" style="width:20rem" class="p-mb-2"></button>\n\n    <h5>Responsive Margin</h5>\n    <h6>Without Spacing</h6>\n    <div class="p-grid p-formgrid p-fluid">\n        <div class="p-col-12 p-lg-4">\n            <input type="text" pInputText>\n        </div>\n        <div class="p-col-12 p-lg-4">\n            <input type="text" pInputText>\n        </div>\n        <div class="p-col-12 p-lg-4">\n            <input type="text" pInputText>\n        </div>\n    </div>\n\n    <h6>With Spacing</h6>\n    <div class="p-grid p-formgrid p-fluid">\n        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">\n            <input type="text" pInputText>\n        </div>\n        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">\n            <input type="text" pInputText>\n        </div>\n        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">\n            <input type="text" pInputText>\n        </div>\n    </div>\n\n    <h6>Center</h6>\n    <div class="demo-container p-p-4">\n        <button pButton pRipple type="button" label="Button" class="p-d-block p-mx-auto"></button>\n    </div>\n</div>\n\n<div class="card">\n    <h5>Padding</h5>\n    <h6>Without Spacing</h6>\n    <div class="demo-container">\n        <button pButton pRipple type="button" label="Button"></button>\n    </div>\n\n    <h6>With Spacing</h6>\n    <div class="demo-container p-p-3">\n        <button pButton pRipple type="button" label="Button"></button>\n    </div>\n\n    <h6>Responsive Spacing</h6>\n    <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">\n        <button pButton pRipple type="button" label="Button"></button>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(196,"app-code",26),e.IAx(),e._uU(197,"\nimport {Component} from '@angular/core';\n\n@Component ({\n    styles: [`\n        .demo-container {\n            border: 1px solid var(--surface-d);\n        }\n    `]\n})\nexport class GridDemo {}\n"),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA())},directives:[_.P,h.Hq,f.H,q.o,g.xf,g.x4,v.h],styles:[".demo-container[_ngcontent-%COMP%]{border:1px solid var(--surface-d)}"]}),n})(),j=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275cmp=e.Xpm({type:n,selectors:[["ng-component"]],decls:123,vars:0,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["href","https://github.com/primefaces/primeflex"],["github","primeflex","stackblitz","primeflex-text-demo"],[1,"content-section","implementation"],[1,"card"],[1,"p-mb-3","p-text-left"],[1,"p-mb-3","p-text-center"],[1,"p-text-right"],[1,"p-mb-3","demo-container",2,"width","10rem"],[1,"p-mb-3","demo-container","p-text-nowrap",2,"width","10rem"],[1,"p-mb-3","demo-container","p-text-nowrap","p-text-truncate",2,"width","10rem"],[1,"p-mb-3","p-text-lowercase"],[1,"p-mb-3","p-text-uppercase"],[1,"p-text-capitalize"],[1,"p-mb-3","p-text-bold"],[1,"p-mb-3","p-text-normal"],[1,"p-mb-3","p-text-light"],[1,"p-mb-3","p-text-italic"],[1,"content-section","documentation"],["header","Documentation"],["lang","markup"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/","target","_blank",1,"btn-viewsource"],["href","https://stackblitz.com/edit/primeng-primeflex-text-demo","target","_blank",1,"btn-viewsource",2,"margin-left",".5em"],["lang","typescript"]],template:function(a,s){1&a&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Text"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Manage the alignment and the styling of a text with "),e.TgZ(6,"a",2),e._uU(7,"PrimeFlex"),e.qZA(),e._uU(8," text utilities."),e.qZA(),e.qZA(),e._UZ(9,"app-demoActions",3),e.qZA(),e.TgZ(10,"div",4),e.TgZ(11,"div",5),e.TgZ(12,"h5"),e._uU(13,"Alignment"),e.qZA(),e.TgZ(14,"div",6),e._uU(15,"Left"),e.qZA(),e.TgZ(16,"div",7),e._uU(17,"Center"),e.qZA(),e.TgZ(18,"div",8),e._uU(19,"Right"),e.qZA(),e.TgZ(20,"h5"),e._uU(21,"Wrap"),e.qZA(),e.TgZ(22,"div",9),e._uU(23,"Long text wraps and does not overlow."),e.qZA(),e.TgZ(24,"div",10),e._uU(25,"Long text does not wrap and overflows the parent."),e.qZA(),e.TgZ(26,"div",11),e._uU(27,"Long text does not wrap and overflows the parent."),e.qZA(),e.TgZ(28,"h5"),e._uU(29,"Transform"),e.qZA(),e.TgZ(30,"div",12),e._uU(31,"LOWERCASE"),e.qZA(),e.TgZ(32,"div",13),e._uU(33,"uppercase"),e.qZA(),e.TgZ(34,"div",14),e._uU(35,"capitalize"),e.qZA(),e.TgZ(36,"h5"),e._uU(37,"Style"),e.qZA(),e.TgZ(38,"div",15),e._uU(39,"Bold"),e.qZA(),e.TgZ(40,"div",16),e._uU(41,"Normal"),e.qZA(),e.TgZ(42,"div",17),e._uU(43,"Light"),e.qZA(),e.TgZ(44,"div",18),e._uU(45,"Italic"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(46,"div",19),e.TgZ(47,"p-tabView"),e.TgZ(48,"p-tabPanel",20),e.TgZ(49,"h5"),e._uU(50,"Getting Started"),e.qZA(),e.TgZ(51,"p"),e._uU(52,"The text classes use the "),e.TgZ(53,"i"),e._uU(54,"p-text-{value}"),e.qZA(),e._uU(55," syntax."),e.qZA(),e.TgZ(56,"h5"),e._uU(57,"Alignment"),e.qZA(),e.TgZ(58,"p"),e._uU(59,"Four options are available for alignment."),e.qZA(),e.TgZ(60,"ul"),e.TgZ(61,"li"),e._uU(62,"left"),e.qZA(),e.TgZ(63,"li"),e._uU(64,"center"),e.qZA(),e.TgZ(65,"li"),e._uU(66,"right"),e.qZA(),e.TgZ(67,"li"),e._uU(68,"justify"),e.qZA(),e.qZA(),e.TgZ(69,"app-code",21),e.IAx(),e._uU(70,'\n<div class="p-text-left">Left</div>\n<div class="p-text-center">Center</div>\n<div class="p-text-right">Right</div>\n<div class="p-text-justify">Justify</div>\n'),e.fQ9(),e.qZA(),e.TgZ(71,"h5"),e._uU(72,"Wrap"),e.qZA(),e.TgZ(73,"p"),e._uU(74,"Text wrapping defines how the text would be displayed when it exceeds the size of its container."),e.qZA(),e.TgZ(75,"ul"),e.TgZ(76,"li"),e._uU(77,"nowrap"),e.qZA(),e.TgZ(78,"li"),e._uU(79,"wrap"),e.qZA(),e.TgZ(80,"li"),e._uU(81,"truncate"),e.qZA(),e.qZA(),e.TgZ(82,"app-code",21),e.IAx(),e._uU(83,'\n<div style="width: 10rem">Long text wraps and does not overlow.</div>\n<div class="p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>\n<div class="p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>\n'),e.fQ9(),e.qZA(),e.TgZ(84,"h5"),e._uU(85,"Transform"),e.qZA(),e.TgZ(86,"p"),e._uU(87,"Transform property changes the case of the text."),e.qZA(),e.TgZ(88,"ul"),e.TgZ(89,"li"),e._uU(90,"lowercase"),e.qZA(),e.TgZ(91,"li"),e._uU(92,"uppercase"),e.qZA(),e.TgZ(93,"li"),e._uU(94,"capitalize"),e.qZA(),e.qZA(),e.TgZ(95,"app-code",21),e.IAx(),e._uU(96,'\n<div class="p-text-lowercase">LOWERCASE</div>\n<div class="p-text-uppercase">uppercase</div>\n<div class="p-text-capitalize">capitalize</div>\n'),e.fQ9(),e.qZA(),e.TgZ(97,"h5"),e._uU(98,"Style"),e.qZA(),e.TgZ(99,"p"),e._uU(100,"Text styling applies to font weight and style."),e.qZA(),e.TgZ(101,"ul"),e.TgZ(102,"li"),e._uU(103,"bold"),e.qZA(),e.TgZ(104,"li"),e._uU(105,"normal"),e.qZA(),e.TgZ(106,"li"),e._uU(107,"light"),e.qZA(),e.TgZ(108,"li"),e._uU(109,"italic"),e.qZA(),e.qZA(),e.TgZ(110,"app-code",21),e.IAx(),e._uU(111,'\n<div class="p-text-bold">Bold</div>\n<div class="p-text-normal">Normal</div>\n<div class="p-text-light">Light</div>\n<div class="p-text-italic">Italic</div>\n'),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(112,"p-tabPanel",22),e.TgZ(113,"a",23),e.TgZ(114,"span"),e._uU(115,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(116,"a",24),e.TgZ(117,"span"),e._uU(118,"Edit in StackBlitz"),e.qZA(),e.qZA(),e.TgZ(119,"app-code",21),e.IAx(),e._uU(120,'\n<div class="card">\n    <h5>Alignment</h5>\n    <div class="p-mb-3 p-text-left">Left</div>\n    <div class="p-mb-3 p-text-center">Center</div>\n    <div class="p-text-right">Right</div>\n\n    <h5>Wrap</h5>\n    <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>\n    <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>\n    <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>\n\n    <h5>Transform</h5>\n    <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>\n    <div class="p-mb-3 p-text-uppercase">uppercase</div>\n    <div class="p-text-capitalize">capitalize</div>\n\n    <h5>Style</h5>\n    <div class="p-mb-3 p-text-bold">Bold</div>\n    <div class="p-mb-3 p-text-normal">Normal</div>\n    <div class="p-mb-3 p-text-light">Light</div>\n    <div class="p-mb-3 p-text-italic">Italic</div>\n</div>\n'),e.fQ9(),e.qZA(),e.TgZ(121,"app-code",25),e.IAx(),e._uU(122,"\nimport {Component} from '@angular/core';\n\n@Component ({\n    styles: [`\n        .demo-container {\n            border: 1px solid var(--surface-d);\n        }\n    `]\n})\nexport class GridDemo {}\n    "),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA())},directives:[_.P,g.xf,g.x4,v.h],styles:[".demo-container[_ngcontent-%COMP%]{border:1px solid var(--surface-d)}"]}),n})(),H=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275mod=e.oAB({type:n}),n.\u0275inj=e.cJS({imports:[[x.Bz.forChild([{path:"",component:B},{path:"display",component:M},{path:"elevation",component:P},{path:"flexbox",component:D},{path:"formlayout",component:p},{path:"grid",component:E},{path:"spacing",component:O},{path:"text",component:j}])],x.Bz]}),n})();var V=d(2340);let J=(()=>{class n{}return n.\u0275fac=function(a){return new(a||n)},n.\u0275mod=e.oAB({type:n}),n.\u0275inj=e.cJS({imports:[[i.ez,T.u5,q.j,y.hJ,c.nD,w.cc,I.Q,C.kW,b.A,k.T,H,V.LU,v.a,_.L]]}),n})()}}]);