import{a}from"./chunk-ILLDEPHH.js";import{Hd as l,Wb as e,Xb as i,Yb as d,tc as t,yb as o}from"./chunk-AQ27DSQO.js";import"./chunk-EQDQRRRY.js";var E=class n{routes=a;static \u0275fac=function(m){return new(m||n)};static \u0275cmp=o({type:n,selectors:[["app-ui-grid"]],decls:472,vars:0,consts:[[1,"page-header"],[1,"page-title"],[1,"row"],[1,"col-sm-12"],[1,"card"],[1,"card-header"],[1,"card-title"],[1,"mt-1","f-m-light"],[1,"card-body"],[1,"table-responsive"],[1,"table","table-bordered","table-striped"],[1,"text-center"],[1,"digits"],["scope","row",1,"text-nowrap"],["colspan","5"],["colspan","6"],[1,"card-body","grid-showcase"],[1,"col-md-1","text-center"],[1,"col-md-2","text-center"],[1,"col-md-3","text-center"],[1,"col-md-4","text-center"],[1,"col-md-5","text-center"],[1,"col-md-7","text-center"],[1,"col-md-6","text-center"],[1,"col-md-8","text-center"],[1,"col-md-9","text-center"],[1,"col-md-10","text-center"],[1,"col-md-12","text-center"],[1,"card-body","grid-showcase","mb-0"],[1,"col-lg-4"],[1,"row","grid-vertical","align-items-start","m-1","g-2","bg-light"],[1,"col-6"],[1,"bg-white"],[1,"row","grid-vertical","align-items-center","m-1","g-2","bg-light"],[1,"row","grid-vertical","align-items-end","m-1","g-2","bg-light"],[1,"card-body","grid-showcase","grid-align"],[1,"row","justify-content-start","bg-light"],[1,"col-5"],[1,"bg-white","text-dark"],[1,"row","justify-content-center","bg-light"],[1,"row","justify-content-end","bg-light"],[1,"row","g-3"],[1,"col-3"],[1,"col-9"],[1,"grid-wrapper","pb-0"],[1,"row","g-2"],[1,"border","border-2"],[1,"col-7"],[1,"col-8"],[1,"col-sm-2","col-4"],[1,"col-sm-10","col-8"],[1,"col-4"],[1,"col-3","order-3"],[1,"col-5","order-first"],[1,"col-4","order-last"],[1,"col-3","order-2"],[1,"col-sm-2","col-4","order-5"],[1,"col-sm-6","col-4","order-4"],[1,"col-sm-5","col-4","offset-sm-3","offset-2"],[1,"col-sm-2","col-4","offset-sm-2","offset-1"],[1,"col-sm-4","col-5","offset-2"],[1,"col-sm-3","col-4","offset-sm-2","offset-1"],[1,"grid-showcase"],[1,"mb-4"],[1,"text-danger"],[1,"row","mb-3"],[1,"col-md-4"],[1,"col-md-4","ms-auto"],[1,"col-md-3","ms-md-auto"],[1,"col-auto","me-auto"],[1,"col-auto"],[1,"grid-showcase","mb-3"],[1,"col-6","col-sm-3"],[1,"w-100"],[1,"col-6","col-sm-4"],[1,"w-100","d-none","d-md-block"],[1,"col-xl-12"],[1,"col-sm-9"],[1,"col-lg-6"],[1,"clearfix"],["src","assets/img/supplier/edit-supplier.jpg","alt","...",1,"bd-placeholder-img","col-md-6","float-md-end","mb-3","ms-md-3","rounded","img-fluid"]],template:function(m,s){m&1&&(e(0,"div",0)(1,"div",1)(2,"h4"),t(3,"Grid"),i()()(),e(4,"div",2)(5,"div",3)(6,"div",4)(7,"div",5)(8,"h5",6),t(9,"Grid options"),i(),d(10,"p",7),t(11,"Bootstrap grid system allow all six breakpoints, and any breakpoints you can customize. "),i(),e(12,"div",8)(13,"div",9)(14,"table",10)(15,"thead")(16,"tr"),d(17,"th"),e(18,"th",11)(19,"p"),t(20,"Extra small"),i(),e(21,"small"),t(22,"<576px"),i()(),e(23,"th",11)(24,"p"),t(25,"Small"),i(),e(26,"small"),t(27,"\u2265576px"),i()(),e(28,"th",11)(29,"p"),t(30,"Medium"),i(),e(31,"small"),t(32,"\u2265768px"),i()(),e(33,"th",11)(34,"p"),t(35,"Large"),i(),e(36,"small"),t(37,"\u2265992px"),i()(),e(38,"th",11)(39,"p"),t(40,"Extra large"),i(),e(41,"small"),t(42,"\u22651200px"),i()(),e(43,"th",11)(44,"p"),t(45,"Extra extra large"),i(),e(46,"small",12),t(47,"\u22651400px"),i()()()(),e(48,"tbody")(49,"tr")(50,"th",13),t(51,"Grid behavior"),i(),e(52,"td"),t(53,"Horizontal at all times"),i(),e(54,"td",14),t(55,"Collapsed to start, horizontal above breakpoints"),i()(),e(56,"tr")(57,"th",13),t(58,"Max container width"),i(),e(59,"td"),t(60,"None (auto)"),i(),e(61,"td"),t(62,"540px"),i(),e(63,"td"),t(64,"720px"),i(),e(65,"td"),t(66,"960px"),i(),e(67,"td"),t(68,"1140px"),i(),e(69,"td"),t(70,"1320px"),i()(),e(71,"tr")(72,"th",13),t(73,"Class prefix"),i(),e(74,"td")(75,"code"),t(76,".col-"),i()(),e(77,"td")(78,"code"),t(79,".col-sm-"),i()(),e(80,"td")(81,"code"),t(82,".col-md-"),i()(),e(83,"td")(84,"code"),t(85,".col-lg-"),i()(),e(86,"td")(87,"code"),t(88,".col-xl-"),i()(),e(89,"td")(90,"code"),t(91,".col-xxl-"),i()()(),e(92,"tr")(93,"th",13),t(94,"# of columns"),i(),e(95,"td",15),t(96,"12"),i()(),e(97,"tr")(98,"th",13),t(99,"Gutter width"),i(),e(100,"td",15),t(101,"1.5rem (.75rem on left and right)"),i()(),e(102,"tr")(103,"th",13),t(104,"Nestable"),i(),e(105,"td",15),t(106,"Yes"),i()(),e(107,"tr")(108,"th",13),t(109,"Offsets"),i(),e(110,"td",15),t(111,"Yes"),i()(),e(112,"tr")(113,"th",13),t(114,"Column ordering"),i(),e(115,"td",15),t(116,"Yes"),i()()()()()()()(),e(117,"div",3)(118,"div",4)(119,"div",5)(120,"h5",6),t(121,"Grid for column"),i(),e(122,"p",7),t(123,"You may use predefined grid classes. Using "),e(124,"code"),t(125,".col-md-* "),i(),t(126,"you can set the grid system."),i()(),e(127,"div",16)(128,"div",2)(129,"div",17)(130,"span"),t(131,"col-md-1"),i()(),e(132,"div",18)(133,"span"),t(134,"col-md-2"),i()(),e(135,"div",18)(136,"span"),t(137,"col-md-2"),i()(),e(138,"div",19)(139,"span"),t(140,"col-md-3"),i()(),e(141,"div",20)(142,"span"),t(143,"col-md-4"),i()(),e(144,"div",21)(145,"span"),t(146,"col-md-5"),i()(),e(147,"div",22)(148,"span"),t(149,"col-md-7"),i()(),e(150,"div",23)(151,"span"),t(152,"col-md-6"),i()(),e(153,"div",23)(154,"span"),t(155,"col-md-6"),i()(),e(156,"div",24)(157,"span"),t(158,"col-md-8"),i()(),e(159,"div",20)(160,"span"),t(161,"col-md-4"),i()(),e(162,"div",25)(163,"span"),t(164,"col-md-9"),i()(),e(165,"div",19)(166,"span"),t(167,"col-md-3"),i()(),e(168,"div",26)(169,"span"),t(170,"col-md-10"),i()(),e(171,"div",18)(172,"span"),t(173,"col-md-2"),i()(),e(174,"div",27)(175,"span"),t(176,"col-md-12"),i()()()()()(),e(177,"div",3)(178,"div",4)(179,"div",5)(180,"h5",6),t(181,"Vertical alignment"),i(),e(182,"p",7),t(183,"You can use the "),e(184,"code"),t(185,"align-items-*"),i(),t(186," class to set the vertical alignment. "),i()(),e(187,"div",28)(188,"div",2)(189,"div",29)(190,"div",30)(191,"div",31)(192,"span",32),t(193,"one column"),i()(),e(194,"div",31)(195,"span",32),t(196,"two column"),i()()()(),e(197,"div",29)(198,"div",33)(199,"div",31)(200,"span",32),t(201,"one column"),i()(),e(202,"div",31)(203,"span",32),t(204,"two column"),i()()()(),e(205,"div",29)(206,"div",34)(207,"div",31)(208,"span",32),t(209,"one column"),i()(),e(210,"div",31)(211,"span",32),t(212,"two column"),i()()()()()()()(),e(213,"div",3)(214,"div",4)(215,"div",5)(216,"h5",6),t(217,"Horizontal alignment"),i(),e(218,"p",7),t(219,"You can use the "),e(220,"code"),t(221,"justify-content-*"),i(),t(222," class to set the horizontal alignment."),i()(),e(223,"div",35)(224,"div",36)(225,"div",37)(226,"span",38),t(227,"One column"),i()(),e(228,"div",37)(229,"span",38),t(230,"Two column"),i()()(),e(231,"div",39)(232,"div",37)(233,"span",38),t(234,"One column"),i()(),e(235,"div",37)(236,"span",38),t(237,"Two column"),i()()(),e(238,"div",40)(239,"div",37)(240,"span",38),t(241,"One column"),i()(),e(242,"div",37)(243,"span",38),t(244,"Two column"),i()()()()()(),e(245,"div",3)(246,"div",4)(247,"div",5)(248,"h5",6),t(249,"Nesting"),i(),e(250,"p",7),t(251,"To nest your content with the default grid, add a new"),e(252,"code"),t(253,".row"),i(),t(254," and set of "),e(255,"code"),t(256,".col-sm-*"),i(),t(257," columns within an existing "),e(258,"code"),t(259,".col-sm-*"),i(),t(260," column. "),i()(),e(261,"div",16)(262,"div",41)(263,"div",42)(264,"span"),t(265,"Level 1: .col-3"),i()(),e(266,"div",43)(267,"div",44)(268,"div",45)(269,"div",37)(270,"span",46),t(271,"Level 2: .col-5"),i()(),e(272,"div",47)(273,"span",46),t(274,"Level 2: .col-7"),i()()()()(),e(275,"div",48)(276,"div",44)(277,"div",45)(278,"div",49)(279,"span",46),t(280,"Level 1: .col-2"),i()(),e(281,"div",50)(282,"span",46),t(283,"Level 1: .col-10"),i()()()()(),e(284,"div",51)(285,"span"),t(286,"Level 2: .col-4 "),i()()()()()(),e(287,"div",3)(288,"div",4)(289,"div",5)(290,"h5",6),t(291,"Order"),i(),e(292,"p",7),t(293,"Using "),e(294,"code"),t(295,".order "),i(),t(296,"class, you can set the order position."),i()(),e(297,"div",16)(298,"div",45)(299,"div",52)(300,"span"),t(301,"First Item (order-3)"),i()(),e(302,"div",53)(303,"span"),t(304,"Second Item (order-first)"),i()(),e(305,"div",54)(306,"span"),t(307,"Third Item (order-last)"),i()(),e(308,"div",55)(309,"span"),t(310,"Fourth Item (order-2)"),i()(),e(311,"div",56)(312,"span"),t(313,"fifth Item (order-5)"),i()(),e(314,"div",57)(315,"span"),t(316,"sixth Item (order-4)"),i()()()()()(),e(317,"div",3)(318,"div",4)(319,"div",5)(320,"h5",6),t(321,"Offset"),i(),e(322,"p",7),t(323,"You can offset the grid column using "),e(324,"code"),t(325,".offset-*"),i(),t(326," grid class."),i()(),e(327,"div",16)(328,"div",45)(329,"div",58)(330,"span"),t(331,"col-5 offset-3"),i()(),e(332,"div",59)(333,"span"),t(334,"col-2 offset-2"),i()(),e(335,"div",60)(336,"span"),t(337,"col-4 offset-2"),i()(),e(338,"div",61)(339,"span"),t(340,"col-3 offset-2"),i()()()()()(),e(341,"div",3)(342,"div",4)(343,"div",5)(344,"div",6),t(345," Column wrapping "),i()(),e(346,"div",8)(347,"div",62)(348,"div",2)(349,"div",43)(350,"span"),t(351,".col-9"),i()(),e(352,"div",51)(353,"span"),t(354,".col-4"),d(355,"br"),t(356,"Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit."),i()(),e(357,"div",31)(358,"span"),t(359,".col-6"),d(360,"br"),t(361,"Subsequent columns continue along the new line."),i()()()()()()(),e(362,"div",3)(363,"div",4)(364,"div",5)(365,"div",6),t(366," Margin utilities "),i()(),e(367,"div",8)(368,"p",63),t(369,"With the move to flexbox in v4, you can use margin utilities like "),e(370,"span",64),t(371,".me-auto"),i(),t(372,"to force sibling columns away from one another. "),i(),e(373,"div",62)(374,"div",65)(375,"div",66)(376,"span"),t(377,".col-md-4"),i()(),e(378,"div",67)(379,"span"),t(380,".col-md-4 .ms-auto"),i()()(),e(381,"div",65)(382,"div",68)(383,"span"),t(384,".col-md-3 .ms-md-auto"),i()(),e(385,"div",68)(386,"span"),t(387,".col-md-3 .ms-md-auto"),i()()(),e(388,"div",2)(389,"div",69)(390,"span"),t(391,".col-auto .me-auto"),i()(),e(392,"div",70)(393,"span"),t(394,".col-auto"),i()()()()()()(),e(395,"div",3)(396,"div",4)(397,"div",5)(398,"div",6),t(399," Column breaks "),i()(),e(400,"div",8)(401,"div",71)(402,"div",2)(403,"div",72)(404,"span"),t(405,".col-6 .col-sm-3"),i()(),e(406,"div",72)(407,"span"),t(408,".col-6 .col-sm-3"),i()(),d(409,"div",73),e(410,"div",72)(411,"span"),t(412,".col-6 .col-sm-3"),i()(),e(413,"div",72)(414,"span"),t(415,".col-6 .col-sm-3"),i()()()(),e(416,"p"),t(417,"You may also apply this break at specific breakpoints with our "),e(418,"span",64),t(419,"responsive display utilities."),i()(),e(420,"div",62)(421,"div",2)(422,"div",74)(423,"span"),t(424,".col-6 .col-sm-4"),i()(),e(425,"div",74)(426,"span"),t(427,".col-6 .col-sm-4"),i()(),d(428,"div",75),e(429,"div",74)(430,"span"),t(431,".col-6 .col-sm-4"),i()(),e(432,"div",74)(433,"span"),t(434,".col-6 .col-sm-4"),i()()()()()()(),e(435,"div",76)(436,"div",4)(437,"div",5)(438,"div",6),t(439," Standalone column classes "),i()(),e(440,"div",8)(441,"p"),t(442,"The "),e(443,"span",64),t(444,".col-*"),i(),t(445," classes can also be used outside a "),e(446,"span",64),t(447,".row"),i(),t(448," to give an element a specific width. Whenever column classes are used as non direct children of a row,the paddings are omitted."),i(),e(449,"div",62)(450,"div",42)(451,"span"),t(452,".col-3: width of 25%"),i()(),e(453,"div",77)(454,"span"),t(455,".col-sm-9: width of 75% above sm breakpoint"),i()()()()()(),e(456,"div",78)(457,"div",4)(458,"div",8)(459,"P"),t(460,"The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a "),e(461,"span",64),t(462,".clearfix"),i(),t(463," wrapper to clear the float if the text is shorter."),i(),e(464,"div",79),d(465,"img",80),e(466,"p"),t(467," A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. "),i(),e(468,"p"),t(469,"As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read. "),i(),e(470,"p"),t(471,"And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here. "),i()()()()()())},dependencies:[l],encapsulation:2})};export{E as UiGridComponent};