1import{a as F}from"./chunk-OOV4P5UE.js";import"./chunk-YLGERXK5.js";import{a as m}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{b as A}from"./chunk-7ZGOLTZD.js";import{b as L,c as z,d as W}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{Ca as r,Da as C,Ga as D,Oc as M,Rc as N,Ta as c,U as T,Ua as e,Va as i,Wa as a,ck as B,pc as w,qb as k,ra as s,tb as t}from"./chunk-MFI2B7BD.js";var H=` 2<table class="table"> 3 <thead> 4 <tr> 5 <th>Decimal</th> 6 <th>Hexadecimal</th> 7 <th>Binary</th> 8 <th>Roman Numeral</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td>1</td> 14 <td>1</td> 15 <td>1</td> 16 <td>I</td> 17 </tr> 18 <tr> 19 <td>5</td> 20 <td>5</td> 21 <td>101</td> 22 <td>V</td> 23 </tr> 24 <tr> 25 <td>10</td> 26 <td>A</td> 27 <td>1010</td> 28 <td>X</td> 29 </tr> 30 <tr> 31 <td>15</td> 32 <td>F</td> 33 <td>1111</td> 34 <td>XV</td> 35 </tr> 36 </tbody> 37</table> 38`,b=(()=>{class l{constructor(){this.example=H}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-basic-demo"]],decls:49,vars:1,consts:[["cds-text","body",1,"table"],[1,"hidden-xs-down"],["name","table basic example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"thead")(2,"tr")(3,"th"),t(4,"Decimal"),i(),e(5,"th"),t(6,"Hexadecimal"),i(),e(7,"th"),t(8,"Binary"),i(),e(9,"th",1),t(10,"Roman Numeral"),i()()(),e(11,"tbody")(12,"tr")(13,"td"),t(14,"1"),i(),e(15,"td"),t(16,"1"),i(),e(17,"td"),t(18,"1"),i(),e(19,"td",1),t(20,"I"),i()(),e(21,"tr")(22,"td"),t(23,"5"),i(),e(24,"td"),t(25,"5"),i(),e(26,"td"),t(27,"101"),i(),e(28,"td",1),t(29,"V"),i()(),e(30,"tr")(31,"td"),t(32,"10"),i(),e(33,"td"),t(34,"A"),i(),e(35,"td"),t(36,"1010"),i(),e(37,"td",1),t(38,"X"),i()(),e(39,"tr")(40,"td"),t(41,"15"),i(),e(42,"td"),t(43,"F"),i(),e(44,"td"),t(45,"1111"),i(),e(46,"td",1),t(47,"XV"),i()()()(),a(48,"app-stackblitz-example",2)),n&2&&(s(48),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var O=` 39<table class="table table-compact"> 40 <thead> 41 <tr> 42 <th class="left">Monster</th> 43 <th>Home</th> 44 <th>Likes Cookies</th> 45 <th class="left">Fun to Play With</th> 46 </tr> 47 </thead> 48 <tbody> 49 <tr> 50 <td class="left">Wolfman</td> 51 <td>Nondisclosed countryside</td> 52 <td>Sometimes</td> 53 <td class="left">Not really</td> 54 </tr> 55 <tr> 56 <td class="left">Mothra</td> 57 <td>Tropical island</td> 58 <td>No</td> 59 <td class="left">Only if you have a flashlight</td> 60 </tr> 61 <tr> 62 <td class="left">Oscar the Grouch</td> 63 <td>Sesame Street</td> 64 <td>No</td> 65 <td class="left">No</td> 66 </tr> 67 <tr> 68 <td class="left">Cookie Monster</td> 69 <td>Sesame Street</td> 70 <td>Definitely yes</td> 71 <td class="left">Only if you have no cookies</td> 72 </tr> 73 </tbody> 74</table> 75`,h=(()=>{class l{constructor(){this.example=O}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-compact-demo"]],decls:49,vars:1,consts:[["cds-text","body",1,"table","table-compact"],[1,"left"],[1,"hidden-xs-down"],[1,"left","hidden-xs-down"],["name","table compact example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"thead")(2,"tr")(3,"th",1),t(4,"Monster"),i(),e(5,"th",2),t(6,"Home"),i(),e(7,"th"),t(8,"Likes Cookies"),i(),e(9,"th",3),t(10,"Fun to Play With"),i()()(),e(11,"tbody")(12,"tr")(13,"td",1),t(14,"Wolfman"),i(),e(15,"td",2),t(16,"Nondisclosed countryside"),i(),e(17,"td"),t(18,"Sometimes"),i(),e(19,"td",3),t(20,"Not really"),i()(),e(21,"tr")(22,"td",1),t(23,"Mothra"),i(),e(24,"td",2),t(25,"Tropical island"),i(),e(26,"td"),t(27,"No"),i(),e(28,"td",3),t(29,"Only if you have a flashlight"),i()(),e(30,"tr")(31,"td",1),t(32,"Oscar the Grouch"),i(),e(33,"td",2),t(34,"Sesame Street"),i(),e(35,"td"),t(36,"No"),i(),e(37,"td",3),t(38,"No"),i()(),e(39,"tr")(40,"td",1),t(41,"Cookie Monster"),i(),e(42,"td",2),t(43,"Ses
75ame Street"),i(),e(44,"td"),t(45,"Definitely yes"),i(),e(46,"td",3),t(47,"Only if you have no cookies"),i()()()(),a(48,"app-stackblitz-example",4)),n&2&&(s(48),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var q=` 76<table class="table table-compact table-noborder"> 77 <thead> 78 <tr> 79 <th class="left">Monster</th> 80 <th>Home</th> 81 <th>Likes Cookies</th> 82 <th class="left">Fun to Play With</th> 83 </tr> 84 </thead> 85 <tbody> 86 <tr> 87 <td class="left">Wolfman</td> 88 <td>Nondisclosed countryside</td> 89 <td>Sometimes</td> 90 <td class="left">Not really</td> 91 </tr> 92 <tr> 93 <td class="left">Mothra</td> 94 <td>Tropical island</td> 95 <td>No</td> 96 <td class="left">Only if you have a flashlight</td> 97 </tr> 98 <tr> 99 <td class="left">Oscar the Grouch</td> 100 <td>Sesame Street</td> 101 <td>No</td> 102 <td class="left">No</td> 103 </tr> 104 <tr> 105 <td class="left">Cookie Monster</td> 106 <td>Sesame Street</td> 107 <td>Definitely yes</td> 108 <td class="left">Only if you have no cookies</td> 109 </tr> 110 </tbody> 111</table> 112`,p=(()=>{class l{constructor(){this.example=q}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-compact-noborder-demo"]],decls:49,vars:1,consts:[["cds-text","body",1,"table","table-compact","table-noborder"],[1,"left"],[1,"hidden-xs-down"],[1,"left","hidden-xs-down"],["name","table compact example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"thead")(2,"tr")(3,"th",1),t(4,"Monster"),i(),e(5,"th",2),t(6,"Home"),i(),e(7,"th"),t(8,"Likes Cookies"),i(),e(9,"th",3),t(10,"Fun to Play With"),i()()(),e(11,"tbody")(12,"tr")(13,"td",1),t(14,"Wolfman"),i(),e(15,"td",2),t(16,"Nondisclosed countryside"),i(),e(17,"td"),t(18,"Sometimes"),i(),e(19,"td",3),t(20,"Not really"),i()(),e(21,"tr")(22,"td",1),t(23,"Mothra"),i(),e(24,"td",2),t(25,"Tropical island"),i(),e(26,"td"),t(27,"No"),i(),e(28,"td",3),t(29,"Only if you have a flashlight"),i()(),e(30,"tr")(31,"td",1),t(32,"Oscar the Grouch"),i(),e(33,"td",2),t(34,"Sesame Street"),i(),e(35,"td"),t(36,"No"),i(),e(37,"td",3),t(38,"No"),i()(),e(39,"tr")(40,"td",1),t(41,"Cookie Monster"),i(),e(42,"td",2),t(43,"Sesame Street"),i(),e(44,"td"),t(45,"Definitely yes"),i(),e(46,"td",3),t(47,"Only if you have no cookies"),i()()()(),a(48,"app-stackblitz-example",4)),n&2&&(s(48),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var P=` 113<table class="table"> 114 <thead> 115 <tr> 116 <th class="left">Wizard</th> 117 <th>Allegiance</th> 118 <th>Triwizard Champion?</th> 119 <th>Can Cast Fireball</th> 120 </tr> 121 </thead> 122 <tbody> 123 <tr> 124 <td class="left">Harry</td> 125 <td>Gryffindor</td> 126 <td>Yes</td> 127 <td>No</td> 128 </tr> 129 <tr> 130 <td class="left">Gandalf</td> 131 <td>Hobbits</td> 132 <td>Maybe?</td> 133 <td>I don't think so...</td> 134 </tr> 135 <tr> 136 <td class="left">Obi-Wan Kenobi</td> 137 <td>Republic/Rebellion</td> 138 <td>No</td> 139 <td>No</td> 140 </tr> 141 <tr> 142 <td class="left">Merlin</td> 143 <td>King Arthur</td> 144 <td>Probably invented the tournament</td> 145 <td>Solid maybe</td> 146 </tr> 147 </tbody> 148</table> 149`,S=(()=>{class l{constructor(){this.example=P}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-leftcell-demo"]],decls:49,vars:1,consts:[["cds-text","body",1,"table"],[1,"left"],[1,"hidden-xs-down"],["name","table left cell example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"thead")(2,"tr")(3,"th",1),t(4,"Wizard"),i(),e(5,"th"),t(6,"Allegiance"),i(),e(7,"th",2),t(8,"Triwizard Champion?"),i(),e(9,"th"),t(10,"Can Cast Fireball"),i()()(),e(11,"tbody")(12,"tr")(13,"td",1),t(14,"Harry"),i(),e(15,"td"),t(16,"Gryffindor"),i(),e(17,"td",2),t(18,"Yes"),i(),e(19,"td"),t(20,"No"),i()(),e(21,"tr")(22,"td",1),t(23,"Gandalf"),i(),e(24,"td"),t(25,"Hobbits"),i(),e(26,"td",2),t(27,"Maybe?"),i(),e(28,"td"),t(29,"I don't think so..."),i()(),e(30,"tr")(31,"td",1),t(32,"Obi-Wan Kenobi"),i(),e(33,"td"),t(34,"Republic/Rebellion"),i(),e(35,"td",2),t(36,"No"),i(),e(37,"td"),t(38,"No"),i()(),e(39,"tr")(40,"td",1),t(41,"Merlin"),i(),e(42,"td"),t(43,"King Arthur"),i(),e(44,"td",2),t(45,"Probably invented the tournament"),i(),e(46,"td"),t(47,"Solid maybe"),i()()()(),a(48,"app-stackblitz-example",3)),n&2&&(s(48),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var V=` 150<table class="table"> 151 <thead> 152 <tr> 153 <th class="left">Name</th> 154 <th>A/B</th> 155 <th class="left">Comment</th> 156 </tr> 157 </thead> 158 <tbody> 159 <tr> 160 <td class="left">Beetlejuice</td> 161 <td>B</td> 162 <td class="left"> 163 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 164 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 165 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 166 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 167 non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 168 </td> 169 </tr> 170 <tr> 171 <td class="left">Mytzlplk</td> 172 <td>A</td> 173 <td class="left">Excepteur sint occaecat cupidatat non proident.</td> 174 </tr> 175 <tr> 176 <td class="left">Q</td> 177 <td>A</td> 178 <td class="left"> 179 Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 180 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 181 voluptate velit esse cillum dolore eu fugiat nulla pariatur. 182 </td> 183 </tr> 184 </tbody> 185</table> 186`,E=(()=>{class l{constructor(){this.example=V}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-multiline-demo"]],decls:34,vars:1,consts:[[1,"clr-row"],[1,"clr-col-12","clr-col-lg-10","clr-col-xl-8"],["cds-text","body",1,"table"],[1,"left"],[1,"hidden-xs-down"],["name","table multiline example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"div",0)(1,"div",1)(2,"table",2)(3,"thead")(4,"tr")(
1865,"th",3),t(6,"Name"),i(),e(7,"th",4),t(8,"A/B"),i(),e(9,"th",3),t(10,"Comment"),i()()(),e(11,"tbody")(12,"tr")(13,"td",3),t(14,"Beetlejuice"),i(),e(15,"td",4),t(16,"B"),i(),e(17,"td",3),t(18," Lorem ipsum dolor sit amet, consectetur adipisicing 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. "),i()(),e(19,"tr")(20,"td",3),t(21,"Mytzlplk"),i(),e(22,"td",4),t(23,"A"),i(),e(24,"td",3),t(25,"Excepteur sint occaecat cupidatat non proident."),i()(),e(26,"tr")(27,"td",3),t(28,"Q"),i(),e(29,"td",4),t(30,"A"),i(),e(31,"td",3),t(32," 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. "),i()()()()()(),a(33,"app-stackblitz-example",5)),n&2&&(s(33),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var G=` 187<table class="table table-noborder"> 188 <thead> 189 <tr> 190 <th class="left">Monster</th> 191 <th>Home</th> 192 <th>Likes Cookies</th> 193 <th class="left">Fun to Play With</th> 194 </tr> 195 </thead> 196 <tbody> 197 <tr> 198 <td class="left">Wolfman</td> 199 <td>Nondisclosed countryside</td> 200 <td>Sometimes</td> 201 <td class="left">Not really</td> 202 </tr> 203 <tr> 204 <td class="left">Mothra</td> 205 <td>Tropical island</td> 206 <td>No</td> 207 <td class="left">Only if you have a flashlight</td> 208 </tr> 209 <tr> 210 <td class="left">Oscar the Grouch</td> 211 <td>Sesame Street</td> 212 <td>No</td> 213 <td class="left">No</td> 214 </tr> 215 <tr> 216 <td class="left">Cookie Monster</td> 217 <td>Sesame Street</td> 218 <td>Definitely yes</td> 219 <td class="left">Only if you have no cookies</td> 220 </tr> 221 </tbody> 222</table> 223`,u=(()=>{class l{constructor(){this.example=G}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-noborder-demo"]],decls:49,vars:1,consts:[["cds-text","body",1,"table","table-noborder"],[1,"left"],[1,"hidden-xs-down"],[1,"left","hidden-xs-down"],["name","table no border example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"thead")(2,"tr")(3,"th",1),t(4,"Monster"),i(),e(5,"th",2),t(6,"Home"),i(),e(7,"th"),t(8,"Likes Cookies"),i(),e(9,"th",3),t(10,"Fun to Play With"),i()()(),e(11,"tbody")(12,"tr")(13,"td",1),t(14,"Wolfman"),i(),e(15,"td",2),t(16,"Nondisclosed countryside"),i(),e(17,"td"),t(18,"Sometimes"),i(),e(19,"td",3),t(20,"Not really"),i()(),e(21,"tr")(22,"td",1),t(23,"Mothra"),i(),e(24,"td",2),t(25,"Tropical island"),i(),e(26,"td"),t(27,"No"),i(),e(28,"td",3),t(29,"Only if you have a flashlight"),i()(),e(30,"tr")(31,"td",1),t(32,"Oscar the Grouch"),i(),e(33,"td",2),t(34,"Sesame Street"),i(),e(35,"td"),t(36,"No"),i(),e(37,"td",3),t(38,"No"),i()(),e(39,"tr")(40,"td",1),t(41,"Cookie Monster"),i(),e(42,"td",2),t(43,"Sesame Street"),i(),e(44,"td"),t(45,"Definitely yes"),i(),e(46,"td",3),t(47,"Only if you have no cookies"),i()()()(),a(48,"app-stackblitz-example",4)),n&2&&(s(48),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var U=` 224<table class="table table-vertical"> 225 <tbody> 226 <tr> 227 <th>Basic table</th> 228 <td>.table</td> 229 <td>The classname used to apply general styling of Clarity tables to an HTML table.</td> 230 </tr> 231 <tr> 232 <th>Left-aligned table cells</th> 233 <td>.left</td> 234 <td> 235 Use this classname on a 236 <code cds-text="code">td</code> 237 to align its contents to the left edge of the table data cell. 238 <br /> 239 This is not necessary for vertical tables. 240 </td> 241 </tr> 242 <tr> 243 <th>Tables without borders</th> 244 <td>.table-noborder</td> 245 <td> 246 This classname will remove borders between table rows as well as the border around the edge of 247 the table. 248 <br /> 249 Also removes the background so that the table will be transparent over the background its 250 container has. 251 </td> 252 </tr> 253 <tr> 254 <th>Compact tables</th> 255 <td>.table-compact</td> 256 <td>This classname changes is the height of the table rows from 36px to 24px.</td> 257 </tr> 258 <tr> 259 <th>Vertical tables</th> 260 <td>.table-vertical</td> 261 <td> 262 This classname removes the table header and applies table header styles to the left-most column. 263 </td> 264 </tr> 265 </tbody> 266</table> 267`,f=(()=>{class l{constructor(){this.example=U}static{this.\u0275fac=function(n){return new(n||l)}}
267static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-vertical-demo"]],decls:45,vars:1,consts:[["cds-text","body",1,"table","table-vertical"],["cds-text","code"],["name","table vertical example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"tbody")(2,"tr")(3,"th"),t(4,"Basic table"),i(),e(5,"td"),t(6,".table"),i(),e(7,"td"),t(8,"The classname used to apply general styling of Clarity tables to an HTML table."),i()(),e(9,"tr")(10,"th"),t(11,"Left-aligned table cells"),i(),e(12,"td"),t(13,".left"),i(),e(14,"td"),t(15," Use this classname on a "),e(16,"code",1),t(17,"td"),i(),t(18," to align its contents to the left edge of the table data cell."),a(19,"br"),t(20,"This is not necessary for vertical tables. "),i()(),e(21,"tr")(22,"th"),t(23,"Tables without borders"),i(),e(24,"td"),t(25,".table-noborder"),i(),e(26,"td"),t(27," This classname will remove borders between table rows as well as the border around the edge of the table."),a(28,"br"),t(29,"Also removes the background so that the table will be transparent over the background its container has. "),i()(),e(30,"tr")(31,"th"),t(32,"Compact tables"),i(),e(33,"td"),t(34,".table-compact"),i(),e(35,"td"),t(36,"This classname changes is the height of the table rows from 36px to 24px."),i()(),e(37,"tr")(38,"th"),t(39,"Vertical tables"),i(),e(40,"td"),t(41,".table-vertical"),i(),e(42,"td"),t(43,"This classname removes the table header and applies table header styles to the left-most column."),i()()()(),a(44,"app-stackblitz-example",2)),n&2&&(s(44),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var X=` 268<table class="table table-vertical table-noborder table-compact"> 269 <tbody> 270 <tr> 271 <th>Basic table</th> 272 <td>.table</td> 273 <td>The classname for applying general styling of Clarity tables to an HTML table.</td> 274 </tr> 275 <tr> 276 <th>Left-aligned table cells</th> 277 <td>.left</td> 278 <td> 279 This classname on a 280 <code cds-text="code">td</code> 281 aligns content to the left edge of the table cell. 282 <br /> 283 This is not necessary for vertical tables. 284 </td> 285 </tr> 286 <tr> 287 <th>Tables without borders</th> 288 <td>.table-noborder</td> 289 <td> 290 This classname removes borders between table rows and the border around the table. 291 <br /> 292 It also removes the background so that the table is transparent over its container background. 293 </td> 294 </tr> 295 <tr> 296 <th>Compact tables</th> 297 <td>.table-compact</td> 298 <td>This classname changes the height of the table rows from 36px to 24px.</td> 299 </tr> 300 <tr> 301 <th>Vertical tables</th> 302 <td>.table-vertical</td> 303 <td> 304 This classname removes the table header and applies table header styles to the left-most column. 305 </td> 306 </tr> 307 </tbody> 308</table> 309`,y=(()=>{class l{constructor(){this.example=X}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-vertical-noborder-compact-demo"]],decls:45,vars:1,consts:[["cds-text","body",1,"table","table-vertical","table-noborder","table-compact"],["cds-text","code"],["name","table vertical no border example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"table",0)(1,"tbody")(2,"tr")(3,"th"),t(4,"Basic table"),i(),e(5,"td"),t(6,".table"),i(),e(7,"td"),t(8,"The classname for applying general styling of Clarity tables to an HTML table."),i()(),e(9,"tr")(10,"th"),t(11,"Left-aligned table cells"),i(),e(12,"td"),t(13,".left"),i(),e(14,"td"),t(15," This classname on a "),e(16,"code",1),t(17,"td"),i(),t(18," aligns content to the left edge of the table cell."),a(19,"br"),t(20,"This is not necessary for vertical tables. "),i()(),e(21,"tr")(22,"th"),t(23,"Tables without borders"),i(),e(24,"td"),t(25,".table-noborder"),i(),e(26,"td"),t(27," This classname removes borders between table rows and the border around the table."),a(28,"br"),t(29,"It also removes the background so that the table is transparent over its container background. "),i()(),e(30,"tr")(31,"th"),t(32,"Compact tables"),i(),e(33,"td"),t(34,".table-compact"),i(),e(35,"td"),t(36,"This classname changes the height of the table rows from 36px to 24px."),i()(),e(37,"tr")(38,"th"),t(39,"Vertical tables"),i(),e(40,"td"),t(41,".table-vertical"),i(),e(42,"td"),t(43,"This classname removes the table header and applies table header styles to the left-most column."),i()()()(),a(44,"app-stackblitz-example",2)),n&2&&(s(44),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var R=` 310<div class="clr-row"> 311 <div class="clr-col-12 clr-col-lg-6 clr-col-xl-4"> 312 <table cds-text="body" class="table"> 313 <thead> 314 <tr> 315 <th class="left">Language</th> 316 <th>Foo</th> 317 <th>Baz</th> 318 </tr> 319 </thead> 320 <tbody> 321 <tr> 322 <td class="left">Pig Latin</td> 323 <td>Oofay</td> 324 <td>Azbay</td> 325 </tr> 326 <tr> 327 <td class="left">Bizarro</td> 328 <td>Bar</td> 329 <td>Bang</td> 330 </tr> 331 <tr> 332 <td class="left">Hodor</td> 333 <td>Hodor</td> 334 <td>Hodor</td> 335 </tr> 336 </tbody> 337 </table> 338 </div> 339 <div class="clr-col-12 clr-col-lg-6 clr-col-xl-4"> 340 <table class="table"> 341 <thead> 342 <tr> 343 <th class="left">Color</th> 344 <th>R</th> 345 <th>G</th> 346 <th>B</th> 347 </tr> 348 </thead> 349 <tbody> 350 <tr> 351 <td class="left">Black</td> 352 <td>0</td> 353 <td>0</td> 354 <td>0</td> 355 </tr> 356 <tr> 357 <td class="left">New Black</td> 358 <td>255</td> 359 <td>165</td> 360 <td>0</td> 361 </tr> 362 <tr> 363 <td class="left">Pantone 292</td> 364 <td>98</td> 365 <td>168</td> 366 <td>229</td> 367 </tr> 368 </tbody> 369 </table> 370 </div> 371 <div class="clr-col-12 clr-col-lg-6 clr-col-xl-4"> 372 <table class="table"> 373 <thead> 374 <tr> 375 <th class="left">Name</th> 376 <th class="left">Weakness</th> 377 </tr> 378 </thead> 379 <tbody> 380 <tr> 381 <td class="left">Frankenstein</td> 382 <td class="left">Fire</td> 383 </tr> 384 <tr> 385 <td class="left">Dracula</td> 386 <td class="left">Garlic</td> 387 </tr> 388 <tr> 389 <td class="left">Wolfman</td> 390 <td class="left">Squirrels</td> 391 </tr> 392 </tbody> 393 </table> 394 </div> 395</div> 396`,v=(()=>{class l{constructor(){this.example=R}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-width-demo"]],decls:98,vars:1,consts:[[1,"clr-row"],[1,"clr-col-12","clr-col-lg-6","clr-col-xl-4"],["cds-text","body",1,"table"],[1,"left"],[1,"table"],["name","table width example",3,"componentTemplate"]],template:function(n,o){n&1&&(e(0,"div",0)(1,"div",1)(2,"table",2)(3,"thead")(4,"tr")(
3965,"th",3),t(6,"Language"),i(),e(7,"th"),t(8,"Foo"),i(),e(9,"th"),t(10,"Baz"),i()()(),e(11,"tbody")(12,"tr")(13,"td",3),t(14,"Pig Latin"),i(),e(15,"td"),t(16,"Oofay"),i(),e(17,"td"),t(18,"Azbay"),i()(),e(19,"tr")(20,"td",3),t(21,"Bizarro"),i(),e(22,"td"),t(23,"Bar"),i(),e(24,"td"),t(25,"Bang"),i()(),e(26,"tr")(27,"td",3),t(28,"Hodor"),i(),e(29,"td"),t(30,"Hodor"),i(),e(31,"td"),t(32,"Hodor"),i()()()()(),e(33,"div",1)(34,"table",4)(35,"thead")(36,"tr")(37,"th",3),t(38,"Color"),i(),e(39,"th"),t(40,"R"),i(),e(41,"th"),t(42,"G"),i(),e(43,"th"),t(44,"B"),i()()(),e(45,"tbody")(46,"tr")(47,"td",3),t(48,"Black"),i(),e(49,"td"),t(50,"0"),i(),e(51,"td"),t(52,"0"),i(),e(53,"td"),t(54,"0"),i()(),e(55,"tr")(56,"td",3),t(57,"New Black"),i(),e(58,"td"),t(59,"255"),i(),e(60,"td"),t(61,"165"),i(),e(62,"td"),t(63,"0"),i()(),e(64,"tr")(65,"td",3),t(66,"Pantone 292"),i(),e(67,"td"),t(68,"98"),i(),e(69,"td"),t(70,"168"),i(),e(71,"td"),t(72,"229"),i()()()()(),e(73,"div",1)(74,"table",4)(75,"thead")(76,"tr")(77,"th",3),t(78,"Name"),i(),e(79,"th",3),t(80,"Weakness"),i()()(),e(81,"tbody")(82,"tr")(83,"td",3),t(84,"Frankenstein"),i(),e(85,"td",3),t(86,"Fire"),i()(),e(87,"tr")(88,"td",3),t(89,"Dracula"),i(),e(90,"td",3),t(91,"Garlic"),i()(),e(92,"tr")(93,"td",3),t(94,"Wolfman"),i(),e(95,"td",3),t(96,"Squirrels"),i()()()()()(),a(97,"app-stackblitz-example",5)),n&2&&(s(97),c("componentTemplate",o.example))},dependencies:[m],encapsulation:2})}}return l})();var g=(()=>{class l extends W{constructor(){super("table")}static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275cmp=r({type:l,selectors:[["clr-tables-demo"]],hostVars:4,hostBindings:function(n,o){n&2&&k("content-area",!0)("dox-content-panel",!0)},features:[D],decls:600,vars:0,consts:[["tab","overview"],[1,"component-summary"],["id","usage","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["routerLink","/documentation/datagrid"],["id","table-styles","cds-text","title",1,"clr-mt-48px"],["cds-text","section","id","basic-tables",1,"clr-mt-32px"],[1,"table","clr-mt-24px"],["cds-text","section","id","borderless-tables",1,"clr-mt-32px"],[1,"table","table-noborder","clr-mt-24px"],[1,"left"],["cds-text","section","id","compact-tables",1,"clr-mt-32px"],["cds-text","code"],[1,"table","table-compact","clr-mt-24px"],["cds-text","section","id","combining-table-styles",1,"clr-mt-32px"],[1,"table","table-compact","table-noborder","clr-mt-24px"],["cds-text","section","id","vertical-tables",1,"clr-mt-32px"],[1,"table","table-vertical","clr-mt-24px"],["cds-text","body",1,"clr-mt-24px"],[1,"table","table-vertical","table-noborder","table-compact","clr-mt-24px"],["id","cell-styles","cds-text","title",1,"clr-mt-48px"],["cds-text","section","id","left-aligned-table-cells",1,"clr-mt-32px"],["cds-text","section","id","multiline-table-cells",1,"clr-mt-32px"],[1,"clr-row"],[1,"clr-col-12","clr-col-lg-10","clr-col-xl-8"],[1,"hidden-xs-down"],["cds-text","section","id","grid-columns",1,"clr-mt-32px"],[1,"clr-col-12","clr-col-lg-6","clr-col-xl-4"],["tab","code"],["cds-text","title","id","basic-tables",1,"clr-mt-48px"],["cds-text","title","id","left-aligned-table-cells",1,"clr-mt-48px"],["cds-text","title","id","multiline-table-cells",1,"clr-mt-48px"],["cds-text","title","id","non-bordered-tables",1,"clr-mt-48px"],["cds-text","title","id","compact-tables",1,"clr-mt-48px"],["cds-text","title","id","compact-non-bordered-tables",1,"clr-mt-48px"],["cds-text","title","id","vertical-tables",1,"clr-mt-48px"],["cds-text","title","id","vertical-compact-non-bordered-tables",1,"clr-mt-48px"],["cds-text","title","id","table-container-widths",1,"clr-mt-48px"],["tab","api"],["styleDocsKey","Table"]],template:function(n,o){n&1&&(e(0,"app-doc-tabs")(1,"app-doc-tab",0)(2,"p",1),t(3," Tables are components that use rows and columns to display information in a grid view. "),i(),e(4,"h2",2),t(5,"Usage"),i(),e(6,"p",3),t(7," Use the tables wherever you need to present static data in a tabular format."),a(8,"br"),t(9," For advanced features like sorting, filtering, pagination, and so on, see "),e(10,"a",4),t(11,"Datagrid."),i()(),e(12,"h2",5),t(13,"Table Styles"),i(),e(14,"h3",6),t(15,"Basic Tables"),i(),e(16,"p",3),t(17," Basic tables take up the full width of their container. Values in table cells are center-aligned by default. "),i(),e(18,"table",7)(19,"thead")(20,"tr")(21,"th"),t(22,"Decimal"),i(),e(23,"th"),t(24,"Hexadecimal"),i(),e(25,"th"),t(26,"Binary"),i(),e(27,"th"),t(28,"Roman Numeral"),i()()(),e(29,"tbody")(30,"tr")(31,"td"),t(32,"1"),i(),e(33,"td"),t(34,"1"),i(),e(35,"td"),t(36,"1"),i(),e(37,"td"),t(38,"I"),i()(),e(39,"tr")(40,"td"),t(41,"5"),i(),e(42,"td"),t(43,"5"),i(),e(44,"td"),t(45,"101"),i(),e(46,"td"),t(47,"V"),i()(),e(48,"tr")(49,"td"),t(50,"10"),i(),e(51,"td"),t(52,"A"),i(),e(53,"td"),t(54,"1010"),i(),e(55,"td"),t(56,"X"),i()(),e(57,"tr")(58,"td"),t(59,"15"),i(),e(60,"td"),t(61,"F"),i(),e(62,"td"),t(63,"1111"),i(),e(64,"td"),t(65,"XV"),i()()()(),e(66,"h3",8),t(67,"Borderless Tables"),i(),e(68,"p",3),t(69,"Tables don\u2019t require borders."),i(),e(70,"table",9)(71,"thead")(72,"tr")(73,"th",10),t(74,"Monster"),i(),e(75,"th"),t(76,"Home"),i(),e(77,"th"),t(78,"Likes Cookies"),i(),e(79,"th",10),t(80,"Fun to Play With"),i()()(),e(81,"tbody")(82,"tr")(83,"td",10),t(84,"Wolfman"),i(),e(85,"td"),t(86,"Nondisclosed countryside"),i(),e(87,"td"),t(88,"Sometimes"),i(),e(89,"td",10),t(90,"Not really"),i()(),e(91,"tr")(92,"td",10),t(93,"Mothra"),i(),e(94,"td"),t(95,"Tropical island"),i(),e(96,"td"),t(97,"No"),i(),e(98,"td",10),t(99,"Only if you have a flashlight"),i()(),e(100,"tr")(101,"td",10),t(102,"Oscar the Grouch"),i(),e(103,"td"),t(104,"Sesame Street"),i(),e(105,"td"),t(106,"No"),i(),e(107,"td",10),t(108,"No"),i()(),e(109,"tr")(110,"td",10),t(111,"Cookie Monster"),i(),e(112,"td"),t(113,"Sesame Street"),i(),e(114,"td"),t(115,"Definitely yes"),i(),e(116,"td",10),t(117,"Only if you have no cookies"),i()()()(),e(118,"h3",11),t(119,"Compact Tables"),i(),e(120,"p",3),t(121," Table row heights can be reduced by using the "),e(122,"code",12),t(123,"compact"),i(),t(124," class. "),i(),e(125,"table",13)(126,"thead")(127,"tr")(128,"th",10),t(129,"Monster"),i(),e(130,"th"),t(131,"Home"),i(),e(132,"th"),t(133,"Likes Cookies"),i(),e(134,"th",10),t(135,"Fun to Play With"),i()()(),e(136,"tbody")(137,"tr")(138,"td",10),t(139,"Wolfman"),i(),e(140,"td"),t(141,"Nondisclosed countryside"),i(),e(142,"td"),t(143,"Sometimes"),i(),e(144,"td",10),t(145,"Not really"),i()(),e(146,"tr")(147,"td",10),t(148,"Mothra"),i(),e(149,"td"),t(150,"Tro
396pical island"),i(),e(151,"td"),t(152,"No"),i(),e(153,"td",10),t(154,"Only if you have a flashlight"),i()(),e(155,"tr")(156,"td",10),t(157,"Oscar the Grouch"),i(),e(158,"td"),t(159,"Sesame Street"),i(),e(160,"td"),t(161,"No"),i(),e(162,"td",10),t(163,"No"),i()(),e(164,"tr")(165,"td",10),t(166,"Cookie Monster"),i(),e(167,"td"),t(168,"Sesame Street"),i(),e(169,"td"),t(170,"Definitely yes"),i(),e(171,"td",10),t(172,"Only if you have no cookies"),i()()()(),e(173,"h3",14),t(174,"Combining Table Styles"),i(),e(175,"p",3),t(176," Table classes can be combined."),a(177,"br"),t(178," The following table examples uses the "),e(179,"code",12),t(180,"noborder"),i(),t(181," and "),e(182,"code",12),t(183,"compact"),i(),t(184," classes. "),i(),e(185,"table",15)(186,"thead")(187,"tr")(188,"th",10),t(189,"Monster"),i(),e(190,"th"),t(191,"Home"),i(),e(192,"th"),t(193,"Likes Cookies"),i(),e(194,"th",10),t(195,"Fun to Play With"),i()()(),e(196,"tbody")(197,"tr")(198,"td",10),t(199,"Wolfman"),i(),e(200,"td"),t(201,"Nondisclosed countryside"),i(),e(202,"td"),t(203,"Sometimes"),i(),e(204,"td",10),t(205,"Not really"),i()(),e(206,"tr")(207,"td",10),t(208,"Mothra"),i(),e(209,"td"),t(210,"Tropical island"),i(),e(211,"td"),t(212,"No"),i(),e(213,"td",10),t(214,"Only if you have a flashlight"),i()(),e(215,"tr")(216,"td",10),t(217,"Oscar the Grouch"),i(),e(218,"td"),t(219,"Sesame Street"),i(),e(220,"td"),t(221,"No"),i(),e(222,"td",10),t(223,"No"),i()(),e(224,"tr")(225,"td",10),t(226,"Cookie Monster"),i(),e(227,"td"),t(228,"Sesame Street"),i(),e(229,"td"),t(230,"Definitely yes"),i(),e(231,"td",10),t(232,"Only if you have no cookies"),i()()()(),e(233,"h3",16),t(234,"Vertical Tables"),i(),e(235,"p",3),t(236," You can orient the table vertically using the "),e(237,"code",12),t(238,"vertical"),i(),t(239," class. Cells in a vertical table default to left alignment. Note that we have no use cases for center alignment at this time."),a(240,"br"),t(241," The left-most cells can be either table data cells or table header cells."),a(242,"br"),t(243," In the following table example, the left-most column serves as the table header. "),i(),e(244,"table",17)(245,"tbody")(246,"tr")(247,"th"),t(248,"Basic table"),i(),e(249,"td"),t(250,".table"),i(),e(251,"td"),t(252,"The classname used to apply general styling of Clarity tables to an HTML table."),i()(),e(253,"tr")(254,"th"),t(255,"Left-aligned table cells"),i(),e(256,"td"),t(257,".left"),i(),e(258,"td"),t(259," Use this classname on a "),e(260,"code",12),t(261,"td"),i(),t(262," to align its contents to the left edge of the table data cell."),a(263,"br"),t(264,"This is not necessary for vertical tables. "),i()(),e(265,"tr")(266,"th"),t(267,"Tables without borders"),i(),e(268,"td"),t(269,".table-noborder"),i(),e(270,"td"),t(271," This classname will remove borders between table rows as well as the border around the edge of the table."),a(272,"br"),t(273,"Also removes the background so that the table will be transparent over the background its container has. "),i()(),e(274,"tr")(275,"th"),t(276,"Compact tables"),i(),e(277,"td"),t(278,".table-compact"),i(),e(279,"td"),t(280,"This classname changes the height of the table rows from 36px to 24px."),i()(),e(281,"tr")(282,"th"),t(283,"Vertical tables"),i(),e(284,"td"),t(285,".table-vertical"),i(),e(286,"td"),t(287,"This classname removes the table header and applies table header styles to the left-most column."),i()()()(),e(288,"p",18),t(289," The following table example shows a vertical, compact, and borderless table. "),i(),e(290,"table",19)(291,"tbody")(292,"tr")(293,"th"),t(294,"Basic table"),i(),e(295,"td"),t(296,".table"),i(),e(297,"td"),t(298,"The classname for applying general styling of Clarity tables to an HTML table."),i()(),e(299,"tr")(300,"th"),t(301,"Left-aligned table cells"),i(),e(302,"td"),t(303,".left"),i(),e(304,"td"),t(305," This classname on a "),e(306,"code",12),t(307,"td"),i(),t(308," aligns content to the left edge of the table cell."),a(309,"br"),t(310,"This is not necessary for vertical tables. "),i()(),e(311,"tr")(312,"th"),t(313,"Tables without borders"),i(),e(314,"td"),t(315,".table-noborder"),i(),e(316,"td"),t(317," This classname removes borders between table rows and the border around the table."),a(318,"br"),t(319,"It also removes the background so that the table is transparent over its container background. "),i()(),e(320,"tr")(321,"th"),t(322,"Compact tables"),i(),e(323,"td"),t(324,".table-compact"),i(),e(325,"td"),t(326,"This classname changes the height of the table rows from 36px to 24px."),i()(),e(327,"tr")(328,"th"),t(329,"Vertical tables"),i(),e(330,"td"),t(331,".table-vertical"),i(),e(332,"td"),t(333,"This classname removes the table header and applies table header styles to the left-most column."),i()()()(),e(334,"h2",20),t(335,"Cell Styles"),i(),e(336,"h3",21),t(337,"Left-Aligned Table Cells"),i(),e(338,"p",3),t(339," If you choose not to use the center alignment default, values within cells can be left-aligned."),a(340,"br"),t(341," The following table shows that the first column cells have a left alignment class applied to them. The cells in the remaining columns use the default. "),i(),e(342,"table",7)(343,"thead")(344,"tr")(345,"th",10),t(346,"Wizard"),i(),e(347,"th"),t(348,"Allegiance"),i(),e(349,"th"),t(350,"Triwizard Champion?"),i(),e(351,"th"),t(352,"Can Cast Fireball"),i()()(),e(353,"tbody")(354,"tr")(355,"td",10),t(356,"Harry"),i(),e(357,"td"),t(358,"Gryffindor"),i(),e(359,"td"),t(360,"Yes"),i(),e(361,"td"),t(362,"No"),i()(),e(363,"tr")(364,"td",10),t(365,"Gandalf"),i(),e(366,"td"),t(367,"Hobbits"),i(),e(368,"td"),t(369,"Maybe?"),i(),e(370,"td"),t(371,"I don't think so..."),i()(),e(372,"tr")(373,"td",10),t(374,"Obi-Wan Kenobi"),i(),e(375,"td"),t(376,"Republic/Rebellion"),i(),e(377,"td"),t(378,"No"),i(),e(379,"td"),t(380,"No"),i()(),e(381,"tr")(382,"td",10),t(383,"Merlin"),i(),e(384,"td"),t(385,"King Arthur"),i(),e(386,"td"),t(387,"Probably invented the tournament"),i(),e(388,"td"),t(389,"Solid maybe"),i()()()(),e(390,"h3",22),t(391,"Multiline Table Cells"),i(),e(392,"p",3),t(393,"Table cells automatically wrap text."),i(),e(394,"div",23)(395,"div",24)(396,"table",7)(397,"thead")(398,"tr")(399,"th",10),t(400,"Name"),i(),e(401,"th",25),t(402,"A/B"),i(),e(403,"th",10),t(404,"Comment"),i()()(),e(405,"tbody")(406,"tr")(407,"td",10),t(408,"Beetlejuice"),i(),e(409,"td",25),t(410,"B"),i(),e(411,"td",10),t(412," Lorem ipsum dolor sit amet, consectetur adipisicing 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. "),i()(),e(413,"tr")(414,"td",10),t(415,"Mytzlplk"),i(),e(416,"td",25),t(417,"A"),i(),e(418,"td",10),t(419,"Excepteur sint occaecat cupidatat non proident."),i()(),e(420,"tr")(421,"td",10),t(422,"Q"),i(),e(423,"td",25),t(424,"A"),i(),e(425,"td",10),t(426," 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. "),i()()()()()(),e(427,"h3",26),t(428,"Grid columns"),i(),e(429,"p",3),t(430,"Tables can exist inside grid columns."),i(),e(431,"div",23)(432,"div",27)(433,"table",7)(434,"thead")(435,"tr")(436,"th",10),t(437,"Language"),i(),e(438,"th"),t(439,"Foo"),i(),e(440,"th"),t(441,"Baz"),i()()(),e(442,"tbody")(443,"tr")(444,"td",10),t(445,"Pig Latin"),i(),e(446,"td"),t(447,"Oofay"),i(),e(448,"td"),t(449,"Azbay"),i()(),e(450,"tr")(451,"td",10),t(452,"Bizarro"),i(),e(453,"td"),t(454,"Bar"),i(),e(455,"td"),t(456,"Bang"),i()(),e(457,"tr")(458,"td",10),t(459,"Hodor"),i(),e(460,"td"),t(461,"Hodor"),i(),e(462,"td"),t(463,"Hodor"),i()()()()(),e(464,"div",27)(465,"table",7)(466,"thead")(467,"tr")(468,"th",10),t(469,"Name"),i(),e(470,"th",10),t(471,"Weakness"),i()()(),e(472,"tbody")(473,"tr")(474,"td",10),t(475,"Frankenstein"),i(),e(476,"td",10),t(477,"Fire"),i()(),e(478,"tr")(479,"td",10),t(480,"Dracula"),i(),e(481,"td",10),t(482,"Garlic"),i()(),e(483,"tr")(484,"td",10),t(485,"Wolfman"),i(),e(486,"td",10),t(487,"Squirrels"),i()()()()(),e(488,"div",27)(489,"table",7)(490,"thead")(491,"tr")(492,"th",10),t(493,"Color"),i(),e(494,"th"),t(495,"R"),i(),e(496,"th"),t(497,"G"),i(),e(498,"th"),t(499,"B"),i()()(),e(500,"tbody")(501,"tr")(502,"td",10),t(503,"Black"),i(),e(504,"td"),t(505,"0"),i(),e(506,"td"),t(507,"0"),i(),e(508,"td"),t(509,"0"),i()(),e(510,"tr")(511,"td",10),t(512,"New Black"),i(),e(513,"td"),t(514,"255"),i(),e(515,"td"),t(516,"165"),i(),e(517,"td"),t(518,"0"),i()(),e(519,"tr")(52
3960,"td",10),t(521,"Pantone 292"),i(),e(522,"td"),t(523,"98"),i(),e(524,"td"),t(525,"168"),i(),e(526,"td"),t(527,"229"),i()()()()()()(),e(528,"app-doc-tab",28)(529,"h2",29),t(530,"Basic Tables"),i(),e(531,"p",3),t(532," Tables take up the full width of their container. Values in table cells are center-aligned by default. "),i(),a(533,"clr-tables-basic-demo"),e(534,"h2",30),t(535,"Left-Aligned Table Cells"),i(),e(536,"p",3),t(537," Values within cells can be left-aligned by adding the "),e(538,"code",12),t(539,".left"),i(),t(540," classname to the table cell. "),i(),a(541,"clr-tables-leftcell-demo"),e(542,"h2",31),t(543,"Multiline Table Cells"),i(),e(544,"p",3),t(545,"Table cells automatically wrap text."),i(),a(546,"clr-tables-multiline-demo"),e(547,"h2",32),t(548,"Non-Bordered Tables"),i(),e(549,"p",3),t(550," Tables can be displayed without borders by using the "),e(551,"code",12),t(552,".table-noborder"),i(),t(553," classname. "),i(),a(554,"clr-tables-noborder-demo"),e(555,"h2",33),t(556,"Compact Tables"),i(),e(557,"p",3),t(558," Table row heights can be reduced with the "),e(559,"code",12),t(560,".table-compact"),i(),t(561," classname. "),i(),a(562,"clr-tables-compact-demo"),e(563,"h2",34),t(564,"Compact, Non-Bordered Tables"),i(),e(565,"p",3),t(566," The "),e(567,"code",12),t(568,".table-compact"),i(),t(569," and "),e(570,"code",12),t(571,".table-noborder"),i(),t(572," classnames can be combined. "),i(),a(573,"clr-tables-compact-noborder-demo"),e(574,"h2",35),t(575,"Vertical Tables"),i(),e(576,"p",3),t(577," Using the "),e(578,"code",12),t(579,".table-vertical"),i(),t(580," classname orients the table vertically. The left-most column serves as the table header. The left-most cell can be either a "),e(581,"code",12),t(582,"td"),i(),t(583," or "),e(584,"code",12),t(585,"th"),i(),t(586," element. "),i(),e(587,"p",3),t(588," Cells in a vertical table default to left alignment. We have no use cases for center alignment at this time. "),i(),a(589,"clr-tables-vertical-demo"),e(590,"h2",36),t(591," Vertical, Compact, Non-bordered Tables "),i(),a(592,"clr-tables-vertical-noborder-compact-demo"),e(593,"h2",37),t(594,"Table Container Widths"),i(),e(595,"p",3),t(596,"Tables can exist inside grid columns."),i(),a(597,"clr-tables-width-demo"),i(),e(598,"app-doc-tab",38),a(599,"app-style-docs",39),i()())},dependencies:[L,z,M,b,S,E,u,h,p,f,y,v,F],encapsulation:2})}}return l})();var Gt=(()=>{class l{static{this.\u0275fac=function(n){return new(n||l)}}static{this.\u0275mod=C({type:l})}static{this.\u0275inj=T({imports:[w,B,A,N.forChild([{path:"",component:g}]),m,b,S,E,u,h,p,f,y,v,g]})}}return l})();export{Gt as TablesDemoModule};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.