import{a}from"./chunk-ILLDEPHH.js";import{Hd as m,Wb as d,Xb as t,Yb as o,tc as e,yb as n}from"./chunk-AQ27DSQO.js";import"./chunk-EQDQRRRY.js";var r=class l{routes=a;static \u0275fac=function(i){return new(i||l)};static \u0275cmp=n({type:l,selectors:[["app-ui-placeholders"]],decls:129,vars:0,consts:[[1,"page-header"],[1,"page-title"],[1,"row"],[1,"col-xl-6"],[1,"card"],[1,"card-body","card-buttons","pb-0"],[1,"header-title"],[1,"text-muted"],[1,"col-md-6"],[1,"card","border","shadow-none"],["src","assets/img/img-1.jpg","alt","...",1,"card-img-top"],[1,"card-body"],[1,"card-title"],[1,"card-text"],["href","javascript:void(0);",1,"btn","btn-primary"],["aria-hidden","true",1,"card","border","shadow-none","mb-0"],["src","assets/img/img-2.jpg","alt","...",1,"card-img-top"],[1,"card-title","placeholder-glow"],[1,"placeholder","col-6"],[1,"card-text","placeholder-glow"],[1,"placeholder","col-7"],[1,"placeholder","col-4"],[1,"placeholder","col-8"],["href","javascript:void(0);","tabindex","-1",1,"btn","btn-primary","disabled","placeholder","col-6"],[1,"card-body","card-buttons"],[1,"placeholder","w-75"],[1,"placeholder",2,"width","25%"],[1,"placeholder","col-12","placeholder-lg"],[1,"placeholder","col-12"],[1,"placeholder","col-12","placeholder-sm"],[1,"placeholder","col-12","placeholder-xs"],[1,"placeholder","col-12","bg-primary"],[1,"placeholder","col-12","bg-secondary"],[1,"placeholder","col-12","bg-success"],[1,"placeholder","col-12","bg-danger"],[1,"placeholder","col-12","bg-warning"],[1,"placeholder","col-12","bg-info"],[1,"placeholder","col-12","bg-light"],[1,"placeholder","col-12","bg-dark"],["aria-hidden","true"],["href","javascript:void(0);","aria-hidden","true",1,"btn","btn-primary","disabled","placeholder","col-4"],[1,"placeholder-glow"],[1,"placeholder-wave","mb-0"]],template:function(i,p){i&1&&(d(0,"div",0)(1,"div",1)(2,"h4"),e(3,"Placeholders"),t()()(),d(4,"div",2)(5,"div",3)(6,"div",4)(7,"div",5)(8,"h4",6),e(9,"Placeholders"),t(),d(10,"p",7),e(11,"In the example below, we take a typical card component and recreate it with placeholders applied to create a \u201Cloading card\u201D. Size and proportions are the same between the two."),t(),d(12,"div",2)(13,"div",8)(14,"div",9),o(15,"img",10),d(16,"div",11)(17,"h5",12),e(18,"Card title"),t(),d(19,"p",13),e(20,"Some quick example text to build on the card title and make up the bulk of the card's content."),t(),d(21,"a",14),e(22,"Go somewhere"),t()()()(),d(23,"div",8)(24,"div",15),o(25,"img",16),d(26,"div",11)(27,"p",17),o(28,"span",18),t(),d(29,"p",19),o(30,"span",20)(31,"span",21)(32,"span",21)(33,"span",18)(34,"span",22),t(),o(35,"a",23),t()()()()()(),d(36,"div",4)(37,"div",24)(38,"h4",6),e(39,"Width"),t(),d(40,"p",7),e(41,"You can change the "),d(42,"code"),e(43,"width"),t(),e(44," through grid column classes, width utilities, or inline styles."),t(),o(45,"span",18)(46,"span",25)(47,"span",26),t()(),d(48,"div",4)(49,"div",24)(50,"h4",6),e(51,"Sizing"),t(),d(52,"p",7),e(53,"The size of "),d(54,"code"),e(55,".placeholder"),t(),e(56,"s are based on the typographic style of the parent element. Customize them with sizing modifiers: "),d(57,"code"),e(58,".placeholder-lg"),t(),e(59,", "),d(60,"code"),e(61,".placeholder-sm"),t(),e(62,", or "),d(63,"code"),e(64,".placeholder-xs"),t(),e(65,"."),t(),o(66,"span",27)(67,"span",28)(68,"span",29)(69,"span",30),t()()(),d(70,"div",3)(71,"div",4)(72,"div",24)(73,"h4",6),e(74,"Color"),t(),d(75,"p",7),e(76,"By default, the "),d(77,"code"),e(78,"placeholder"),t(),e(79," uses "),d(80,"code"),e(81,"currentColor"),t(),e(82,". This can be overriden with a custom color or utility class."),t(),o(83,"span",28)(84,"span",31)(85,"span",32)(86,"span",33)(87,"span",34)(88,"span",35)(89,"span",36)(90,"span",37)(91,"span",38),t()(),d(92,"div",4)(93,"div",24)(94,"h4",6),e(95,"How it works"),t(),d(96,"p",7),e(97,"Create placeholders with the "),d(98,"code"),e(99,".placeholder"),t(),e(100," class and a grid column class (e.g., "),d(101,"code"),e(102,".col-6"),t(),e(103,") to set the "),d(104,"code"),e(105,"width"),t(),e(106,". They can replace the text inside an element or as be added as a modifier class to an existing component."),t(),d(107,"p",39),o(108,"span",18),t(),o(109,"a",40),t()(),d(110,"div",4)(111,"div",24)(112,"h4",6),e(113,"Animation"),t(),d(114,"p",7),e(115,"Animate placehodlers with "),d(116,"code"),e(117,".placeholder-glow"),t(),e(118," or "),d(119,"code"),e(120,".placeholder-wave"),t(),e(121," to better convey the perception of something being "),d(122,"em"),e(123,"actively"),t(),e(124," loaded."),t(),d(125,"p",41),o(126,"span",28),t(),d(127,"p",42),o(128,"span",28),t()()()()())},dependencies:[m],encapsulation:2})};export{r as UiPlaceholdersComponent};