// import { Component, h } from '@stencil/core';
// @Component({
//   tag: 'dga-grid-usage',
//   styleUrl: 'dga-grid-usage.scss',
// })
// export class DgaGridUsage {
//   render() {
//     return (
//       <div class="filteration-usage" style={{
//         display: 'flex',
//         flexDirection: 'column',
//         gap: '20px',
//       }}>
//         <h2>Filteration Component Examples</h2>
//         {/* <!-- Basic Grid Layout Example --> */}
//         <dga-grid-container spacing={2}>
//           <dga-grid-item xs={12} sm={6} md={4}>
//             <div class="demo-content">Item 1</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6} md={4}>
//             <div class="demo-content">Item 2</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6} md={4}>
//             <div class="demo-content">Item 3</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Responsive Grid with Different Column Widths --> */}
//         <dga-grid-container spacing={3}>
//           <dga-grid-item xs={12} sm={6} md={4} lg={3}>
//             <div class="demo-content">Full width on mobile, half width on tablet, 1/3 on laptop, 1/4 on desktop</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6} md={4} lg={3}>
//             <div class="demo-content">Responsive Item 2</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6} md={4} lg={3}>
//             <div class="demo-content">Responsive Item 3</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6} md={12} lg={3}>
//             <div class="demo-content">Responsive Item 4</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Different Spacing at Different Breakpoints --> */}
//         <dga-grid-container spacingXs={1} spacingSm={2} spacingMd={3} spacingLg={4}>
//           <dga-grid-item xs={6}>
//             <div class="demo-content">Different spacing at different screen sizes</div>
//           </dga-grid-item>
//           <dga-grid-item xs={6}>
//             <div class="demo-content">Different spacing at different screen sizes</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Auto-layout Grid --> */}
//         <dga-grid-container spacing={2}>
//           <dga-grid-item xs>
//             <div class="demo-content">Auto width 1</div>
//           </dga-grid-item>
//           <dga-grid-item xs>
//             <div class="demo-content">Auto width 2</div>
//           </dga-grid-item>
//           <dga-grid-item xs>
//             <div class="demo-content">Auto width 3</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Nested Grids --> */}
//         <dga-grid-container spacing={2}>
//           <dga-grid-item xs={12} sm={6}>
//             <div class="demo-content">
//               <h3>Nested Grid</h3>
//               <dga-grid-container spacing={1}>
//                 <dga-grid-item xs={6}>
//                   <div class="demo-content nested">Nested item 1</div>
//                 </dga-grid-item>
//                 <dga-grid-item xs={6}>
//                   <div class="demo-content nested">Nested item 2</div>
//                 </dga-grid-item>
//               </dga-grid-container>
//             </div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} sm={6}>
//             <div class="demo-content">Regular item</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Item Alignment Example --> */}
//         <dga-grid-container spacing={2} style={{height: "200px"}}>
//           <dga-grid-item xs={4} alignSelf="flex-start">
//             <div class="demo-content">Align start</div>
//           </dga-grid-item>
//           <dga-grid-item xs={4} alignSelf="center">
//             <div class="demo-content">Align center</div>
//           </dga-grid-item>
//           <dga-grid-item xs={4} alignSelf="flex-end">
//             <div class="demo-content">Align end</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Growing and Shrinking Items --> */}
//         <dga-grid-container spacing={2}>
//           <dga-grid-item xs={3}>
//             <div class="demo-content">Fixed width</div>
//           </dga-grid-item>
//           <dga-grid-item xs grow>
//             <div class="demo-content">Grow to fill space</div>
//           </dga-grid-item>
//           <dga-grid-item xs={3}>
//             <div class="demo-content">Fixed width</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Item Ordering Example --> */}
//         <dga-grid-container spacing={2}>
//           <dga-grid-item xs={4} orderXs={3} orderMd={1}>
//             <div class="demo-content">First on desktop, last on mobile</div>
//           </dga-grid-item>
//           <dga-grid-item xs={4} orderXs={1} orderMd={2}>
//             <div class="demo-content">Second on desktop, first on mobile</div>
//           </dga-grid-item>
//           <dga-grid-item xs={4} orderXs={2} orderMd={3}>
//             <div class="demo-content">Third on desktop, second on mobile</div>
//           </dga-grid-item>
//         </dga-grid-container>
//         {/* <!-- Fluid Container with No Gutters --> */}
//         <dga-grid-container fluid disableGutters spacing={0}>
//           <dga-grid-item xs={12} md={6}>
//             <div class="demo-content">Full-width fluid container with no gutters</div>
//           </dga-grid-item>
//           <dga-grid-item xs={12} md={6}>
//             <div class="demo-content">Full-width fluid container with no gutters</div>
//           </dga-grid-item>
//         </dga-grid-container>
//       </div>
//     );
//   }
// }
import { h } from "@stencil/core";
export class DgaGridUsage {
    render() {
        return (h("div", { key: '94646bafd8dbd3b99404b29a4de3bede1c19168f', class: "flexible-gap-usage", style: {
                display: 'flex',
                flexDirection: 'column',
                gap: '20px',
            } }, h("h2", { key: '90c0a524c1b5a10dc7f2665fe5bd1d5165a32207' }, "Grid Component with Flexible Gap Examples"), h("section", { key: 'ebc25fad500a3efedfa1e2f8a03a91c9fe083942' }, h("h3", { key: '2ef006de7fbd09969f76affcb18bb989b86bac03' }, "Simple String Gap"), h("dga-grid-container", { key: '2210167759a132d278f262317a7d46ec0977c56b', gap: "16px" }, h("dga-grid-item", { key: '984f3ce961141b6452a235f018c80fbc8ca89eae', xs: 12, sm: 6, md: 4 }, h("div", { key: '5e697d9f61e061d3b613ea14a6ebaf0cebae120f', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'ec40e7618d67dc307d783cdd9e222a3387377f11', xs: 12, sm: 6, md: 4 }, h("div", { key: '8cae811db9208553d21cb5e75c7dcdcade6f85c1', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'eebbd20c22ebc53d4611038d8022f5bb6c9ed0bd', xs: 12, sm: 6, md: 4 }, h("div", { key: '25ccb9cd35a807413583a0828a96230826799ecf', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '86fe2d482cebba3c4bfd59129edb1f3305cd4ee7', xs: 12, sm: 6 }, h("div", { key: 'a274d249a91ea7d80744ffaaca744e1babd450be', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: 'a091f337f2a6998c33583fe5921e7a02f8c6e99f', xs: 12, sm: 6 }, h("div", { key: '77704b57c94beea9547c72be23d73c9c8eee2486', class: "demo-content" }, "16px gap between all items")), h("dga-grid-item", { key: '3b8d8d2d3a25da0259ff93c766ccd700e29ef020', xs: 12 }, h("div", { key: '38466fe1565c2b9719b9622be9918aeb00944d38', class: "demo-content" }, "16px gap between all items"))))));
    }
    static get is() { return "dga-grid-usage"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-grid-usage.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-grid-usage.css"]
        };
    }
}
