@platformscode/core 0.0.49 → 0.0.51

package/dist/collection/usage/dga-codeSnippet-usage.js

@@ -1,46 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaChipUsage {
-    constructor() {
-        this.snippets = {
-            JavaScript: `// Imports
-import mongoose, { Schema } from 'untitled'
-
-// Collection name
-export const collection = 'Design'|
-
-// Schema
-const schema = new Schema({
-  name: {
-    type: String,
-    required: true
-  },
-
-  description: {
-    type: String
-  }
-}, {timestamps: true})
-
-// Model
-export default untitled.model(collection, schema, collection)
-        `,
-            HTML: `<div>
- <h1>Hello, HTML!</h1>
-</div>`,
-            CSS: `body {
-    background-color: lightblue;
-  }
-    
-h1 {
-  color: navy;
-  margin-left: 20px;
-}`,
-        };
-        this.snippetLine = {
-            JavaScript: 'npm install nds-design-system@^0.0.1',
-        };
-    }
-    render() {
-        return (h("div", { key: '71508db8dfb490067312f25348bd3d3fc23917bb', style: { width: '743px', display: 'flex', flexDirection: 'column', gap: '123px', margin: "10px" } }, h("dga-codesnippet", { key: '7ca3e0cc53084ebb835c419cfc7380cb2280eb98', showButton: true, type: "multi-line", showSidebar: true, showTabList: true, snippets: this.snippets }), h("dga-codesnippet", { key: 'a33e39434310c7adb922116be5c4883723401546', showButton: false, type: "single", showSidebar: false, showTabList: false, snippets: this.snippetLine })));
-    }
-    static get is() { return "dga-codesnippet-usage"; }
-}

package/dist/collection/usage/dga-collapse-usage.js

@@ -1,17 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaCollapseUsage {
-    constructor() {
-        this.variant = 'neutral';
-        this.open = false;
-    }
-    render() {
-        return (h("div", { key: '2ee3612aaca78d39f0509089455b256ed86616da' }, h("h1", { key: 'e632757f4ede5bd38c71491618943735941a95be' }, "Collapse Example"), h("div", { key: '5ac52a77124fa68aa5e7f59b400f40d842650600', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'b1d8a410b9726247c0dbd6670dc3fb315398e5f5', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'a934695dff9b9f689b539dc9cdda8e7c2e40dc67', style: { display: "flex", justifyContent: "center" } }, h("button", { key: '1d854b80ec52f66bdeefd3eabd5cc18732914ffa', onClick: () => this.open = true }, "open"), h("button", { key: 'ca6b919dd74e1e5733b06d2a0c31387dec6a5b1e', onClick: () => this.open = false }, "close"))), h("dga-collapse", { key: '9b055bf2339e697e5fb8fad6386989502bfcadee', open: this.open, "transition-duration": "0.1s" }, h("div", { key: 'f24c79aff41ba4c44e52124b297a2451db464b48' }, "Your content here")), h("div", { key: '0807156df64bb7a775e16adc549d719d249adb67', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
-    }
-    static get is() { return "dga-collapse-usage"; }
-    static get states() {
-        return {
-            "variant": {},
-            "open": {}
-        };
-    }
-}

package/dist/collection/usage/dga-content-switcher-usage.js

@@ -1,34 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaContentSwitcherUsage {
-    constructor() {
-        this.value = 0;
-    }
-    render() {
-        return (h("div", { key: '4cb85b34e2b8d1318903616deafd81cd5d2c3444' }, h("h1", { key: '5245eb0bb3f05c5c3e1df24a10a93a21fdd04991' }, "Content Switcher Example"), h("dga-content-switcher", { key: '55b2b5169c8b566621b518e68f77f5953eedf271', size: 'lg' }, h("dga-content-switcher-item", { key: '11639573da16079061d39b0ad2acf1a4687352bf', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: '2a5c18c121d5a4ca250f97180e724c429a57be6e', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: 'c411296cb314406c5280b1b9b5bdb12ab050c6e4', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: 'de3898ff0e648116ecf389fd1d4408515ae3e776', size: 'md' }, h("dga-content-switcher-item", { key: '5cc1d305b663abd84bd31dfc41855351592693ab', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: '94633183eef22393a11b49bc14e69bab68e9b102', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '494ef28c65e3a86ed0774acbbf155732328518f4', label: "Option 3", content: "This is Option 3 content." })), h("dga-content-switcher", { key: 'eed218e7fcb5199e66782827e5011fcd21a11811', size: 'sm', onColor: true }, h("dga-content-switcher-item", { key: 'c4c4242b28793da008d0d15405bff066eab21849', label: "Option 1", content: "This is Option 1 content." }), h("dga-content-switcher-item", { key: 'c6725103058de0b36983dc9aa554e9dcbf9e181e', label: "Option 2", content: "This is Option 2 content." }), h("dga-content-switcher-item", { key: '264a371a856015f795d767690978afb519ede779', label: "Option 3", content: "This is Option 3 content." })), h("h1", { key: '5ca35446456670c023f6bc02420864c6fdb65522' }, this.value), h("dga-content-switcher", { key: '8e99765f72224b41e064dbc6a5ed6d72b27148ee', size: 'lg', value: this.value, onChange: (val) => this.value = val }), h("dga-content-switcher-panel", { key: 'd927e44d96941524863925d5b39a9feb3357fc36', value: this.value, index: 0 }, h("div", { key: '095600338a79faff0533d15a15ae5879861dada2' }, "Content 111111111111111")), h("dga-content-switcher-panel", { key: '2a80d8fb2b362dd2487c5f6bfe27fb007bf695be', value: this.value, index: 1 }, h("div", { key: 'c4a317f2db0b2779a17d14906249df0010f96dd2' }, "Content 2")), h("dga-content-switcher-panel", { key: '78680868aa3263d9e50a90e6304467b330c7dfab', value: this.value, index: 2 }, h("div", { key: '9e93b77b7c7e625cbc1e2790f23d200326294b7c' }, "Content 3"))));
-    }
-    static get is() { return "dga-content-switcher-usage"; }
-    static get properties() {
-        return {
-            "value": {
-                "type": "number",
-                "attribute": "value",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "0"
-            }
-        };
-    }
-}

package/dist/collection/usage/dga-date-field-usage.js

@@ -1,15 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaDateFieldUsage {
-    constructor() {
-        this.value = '';
-    }
-    render() {
-        return (h("div", { key: '880139077b49e41c5d038d9bdbc04d43b7180c8d' }, h("h1", { key: '7d19d3f5bd3475abe0ca4e6c52af9a2bc0aeecca' }, "Date Field Example"), h("div", { key: 'bbd9a425c230db4290480c7ffd920c73825df780', style: { padding: '50px' } }, h("div", { key: '7504da2dfc0971e6610d9d22068ed9a9a53e2c9c', style: { display: "flex", flexDirection: "column", gap: "16px" } }, h("input", { key: '161827836294a5b910ba5df7069865e54c9acc24', type: "date", value: this.value, onChange: (e) => this.value = e.target.value }), h("dga-date-field", { key: '58b25234de5b01b644c99ca84d19f27b839d7fa0', value: this.value, onChange: (e) => this.value = e.target.value })))));
-    }
-    static get is() { return "dga-date-field-usage"; }
-    static get states() {
-        return {
-            "value": {}
-        };
-    }
-}

package/dist/collection/usage/dga-datepicker-usage.js

@@ -1,7 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaPickerUsage {
-    render() {
-        return (h("div", { key: '8fa29622d090a82e263647cde633bd5358b2cfb1' }, h("h1", { key: '368a9f85d0c798ecdb0c3e15fc966be7f373f620' }, "Datepicker Example"), h("div", { key: 'c4d67c8cdc9a0062dafd8b95aa4d9e4802172d26', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f8a45b6dd74b4803e455bad77d8ce9d625611e26', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-datepicker", { key: '070760d61aeb23fa3c3f70df134fa76a17b88298', inputField: false, qickOptions: true }), h("dga-datepicker", { key: '5fa85e9cdb6269ea515801996346412970222111', RTL: true, inputField: true, range: true, qickOptions: true }), h("dga-datepicker", { key: 'f3b2d504414d9a55096120f69d65b28e8d889962', range: true })), h("div", { key: 'cc5d75a313224591921b6cab04f1bf42b6a0cce9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
-    }
-    static get is() { return "dga-datepicker-usage"; }
-}

package/dist/collection/usage/dga-digitalSignature-usage.js

@@ -1,15 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaDigitalSignatureUsage {
-    render() {
-        return (h("div", { key: '23da28f01461adfba68804f24c153489862fb13e', style: { width: '100%' } }, h("dga-digital-signature", { key: 'd57bf2e95d5f84f4fad67fd606c4fcba624c1f7f', language: "en", extension: ".gov.sa" }), h("dga-digital-signature", { key: '595c69f55ad788d3ede78b1b98321d526483b87f', extension: ".gov.sa", language: "en", linkProps: {
-                inline: true,
-                label: '20230103200',
-                size: 'md',
-                target: '_blank',
-                external: true,
-                url: 'https://scrimba.com/fullstack-path-c0fullstack',
-                variant: 'primary'
-            } })));
-    }
-    static get is() { return "dga-digital-signature-usage"; }
-}

package/dist/collection/usage/dga-divider-usage.js

@@ -1,42 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaDividerUsage {
-    render() {
-        return (h("div", { key: '9ce760dff89a284334d382aedb68818bc79041be' }, h("h1", { key: '061802988ab3ecbd30c63ed4d2b5aa572101cd04' }, "Divider Example"), h("div", { key: 'dae434feae45a01fbc96bd91a2c812bf60f074b1', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'e9542dc7024428bcc2921878d5031d0ee8b30bba', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'e3479f78388dd9fa2d857046cccf1be3bb2a8f36', style: {
-                borderRadius: '20px',
-                background: 'gray',
-            } }, h("div", { key: 'dfc17e80a6a74ec565f6c66379c9c39428778764', style: {
-                width: '224px',
-                height: '82px',
-                background: '#fff',
-                padding: '16px',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '40px',
-            } }, h("dga-divider", { key: '750acadb195b36f775d59ea34129e889b8d4747b', color: "neutral" }), h("dga-divider", { key: 'f0036a98f739db3611a335f85ecd110657ff6b97', color: "primary" })), h("div", { key: '491d19a7f126e28f08c0ebaad3455e2452d2ab7d', style: {
-                width: '224px',
-                height: '82px',
-                background: '#fff',
-                padding: '16px',
-                display: 'flex',
-                // flexDirection: 'column',
-                gap: '40px',
-            } }, h("dga-divider", { key: '0704fecc802358dcd2e97720ea040c2630ec0ec9', color: "neutral", orientation: 'vertical' }), h("dga-divider", { key: 'd48c838831e39ee2f530e450af609381fcdac7d8', color: "primary", orientation: 'vertical' })), h("div", { key: '869175ec79f62058493abc4f5f74f296bf587b60', style: {
-                width: '224px',
-                height: '82px',
-                background: '#1B8354',
-                padding: '16px',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '40px',
-            } }, h("dga-divider", { key: 'b5c181497e984d90c6285738dec3205a60f33af7', color: "alpha-white" }), h("dga-divider", { key: 'edba17a6608d63870d59e2b1dc7a281ba8017f24', color: "white" })), h("div", { key: '8dbc94c5035f62229ef2342945c903b711230150', style: {
-                width: '224px',
-                height: '82px',
-                background: '#1B8354',
-                padding: '16px',
-                display: 'flex',
-                // flexDirection: 'column',
-                gap: '40px',
-            } }, h("dga-divider", { key: '4f35c507b82b501ec9b089096990a691e408351f', color: "alpha-white", orientation: 'vertical' }), h("dga-divider", { key: '5e38f39eb7c173c2995bee3107a2f8255d78e31f', color: "white", orientation: 'vertical' })))), h("div", { key: '323801ad3a7764188445e09a1765cc5942f3a565', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
-    }
-    static get is() { return "dga-divider-usage"; }
-}

package/dist/collection/usage/dga-drawer-usage.js

@@ -1,282 +0,0 @@
-import { h } from "@stencil/core";
-// import { IRoute } from './dga-drawer';
-const SidePanelRoutes = [
-    {
-        name: 'Link',
-        path: '/',
-        icon: {
-            name: 'home-01',
-            variant: 'stroke',
-            size: 16,
-        },
-        disabled: false,
-        children: [
-            {
-                name: 'Link',
-                path: '1',
-                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-                // badge: 39,
-            },
-            {
-                name: 'Link',
-                path: '2',
-                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-                // badge: 21,
-            },
-            {
-                name: 'Link',
-                path: '3',
-                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-                // badge: 2,
-            },
-            // {
-            //   name: "Home 4",
-            //   path: "4",
-            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //   badge: 20,
-            // },
-            // {
-            //   name: "Home 5",
-            //   path: "5",
-            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //   badge: 150,
-            //   children: [
-            //     {
-            //       name: "Home 1",
-            //       path: "1",
-            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //       badge: 39,
-            //       level: 2,
-            //     },
-            //     {
-            //       name: "Home 4",
-            //       path: "4",
-            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //       badge: 20,
-            //       level: 2,
-            //     },
-            //     {
-            //       name: "Home 5",
-            //       path: "5",
-            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //       badge: 150,
-            //       level: 2,
-            //     },
-            //     {
-            //       name: "Home 6",
-            //       path: "6",
-            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //       badge: 200,
-            //       level: 2,
-            //     },
-            //     {
-            //       name: "Home 7",
-            //       path: "7",
-            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //       badge: 24,
-            //       level: 2,
-            //     },
-            //   ],
-            // },
-            // {
-            //   name: "Home 6",
-            //   path: "6",
-            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //   badge: 200,
-            // },
-            // {
-            //   name: "Home 7",
-            //   path: "7",
-            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
-            //   badge: 24,
-            // },
-        ],
-    },
-    {
-        name: 'Components',
-        path: '/components',
-        icon: {
-            name: 'home-01',
-            variant: 'stroke',
-            size: 16,
-        },
-        disabled: false,
-        children: [
-            {
-                name: 'Buttons',
-                path: '/buttons',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Badges',
-                path: '/badges',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Paths',
-                path: '/Paths',
-                children: [
-                    {
-                        name: 'Buttons',
-                        path: '/buttons',
-                        icon: {
-                            name: 'home-01',
-                            variant: 'stroke',
-                            size: 16,
-                        },
-                        badge: 100,
-                    },
-                    {
-                        name: 'Badges',
-                        path: '/badges',
-                        icon: {
-                            name: 'home-01',
-                            variant: 'stroke',
-                            size: 16,
-                        },
-                        badge: 100,
-                    },
-                    {
-                        name: 'Paths',
-                        path: '/Paths',
-                        icon: {
-                            name: 'home-01',
-                            variant: 'stroke',
-                            size: 16,
-                        },
-                        badge: 100,
-                    },
-                ],
-            },
-            {
-                name: 'Inputs',
-                path: '/inputs',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Accordions',
-                path: '/accordions',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Tabs',
-                path: '/tabs',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-        ],
-    },
-    {
-        name: 'Components 2',
-        path: '/components',
-        icon: {
-            name: 'home-01',
-            variant: 'stroke',
-            size: 16,
-        },
-        disabled: false,
-        children: [
-            {
-                name: 'Buttons',
-                path: '/buttons',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Badges',
-                path: '/badges',
-                icon: {
-                    name: 'home-01',
-                    variant: 'stroke',
-                    size: 16,
-                },
-                badge: 100,
-            },
-            {
-                name: 'Paths',
-                path: '/Paths',
-                children: [
-                    {
-                        name: 'Buttons',
-                        path: '/buttons',
-                        badge: 100,
-                    },
-                    {
-                        name: 'Badges',
-                        path: '/badges',
-                        badge: 100,
-                    },
-                    {
-                        name: 'Paths',
-                        path: '/Paths',
-                        badge: 100,
-                    },
-                ],
-            },
-            {
-                name: 'Inputs',
-                path: '/inputs',
-                badge: 100,
-            },
-            {
-                name: 'Accordions',
-                path: '/accordions',
-                badge: 100,
-            },
-            {
-                name: 'Tabs',
-                path: '/tabs',
-                badge: 100,
-            },
-        ],
-    },
-];
-export class DgaDrawerUsage {
-    constructor() {
-        this.variant = 'neutral';
-        this.open = false;
-    }
-    render() {
-        return (h("div", { key: '6d9a75684ba3a62978d0a5ff39a492d011cbe785' }, h("h1", { key: '49d3d73e8db3ac69ce97786e8235288a46c2a592' }, "Drawer Example"), h("div", { key: '26c471c159d8532aa0b23ed48fc43f72e73da6a8', style: { padding: '0px', display: 'flex', gap: '20px' } }, h("div", { key: '6b68f920b63f75285625aac035a07dabb5cba3b2', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'f44c65955e3faa77a009130f0dffdcd90131d9eb', style: { display: "flex", justifyContent: "center", width: "100vw" } }, h("button", { key: 'cac2d1baae57e263a7c1bb7fa74aca8b356b12b5', onClick: () => this.open = true }, "open"), h("button", { key: '2e87d5236d5ad00b3b4feb18af0cde06f7997d14', onClick: () => this.open = false }, "close")), h("dga-drawer", { key: '6ed23ca808e47d96fcf4dde421644acce956d3dc', routes: SidePanelRoutes, open: this.open, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
-                "& > .sidepanel": {
-                    top: "112px",
-                    backgroundColor: "red !important",
-                }
-            } })), h("div", { key: '18757bfa3f8b656cbb5898d83ffcf4a97be34b1b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
-    }
-    static get is() { return "dga-drawer-usage"; }
-    static get states() {
-        return {
-            "variant": {},
-            "open": {}
-        };
-    }
-}

package/dist/collection/usage/dga-dropdown-usage.js

@@ -1,115 +0,0 @@
-import { h } from "@stencil/core";
-export class DgaDropdownUsage {
-    constructor() {
-        this.activeStep = 1;
-        this.selectedValue = 'Option-1';
-    }
-    render() {
-        return (h("div", { key: 'd5c7c751434bab47c4090661de9960f6d72ac895' }, h("h1", { key: '7429f907839c2f6ecfd6005020c177c2232b2057' }, "Dropdown Example"), h("div", { key: '3396f8275bde33ed4406a0b0a066a7616b7fef82', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'c207b4da23a291b591298f02e4576039dd4d472e', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-dropdown", { key: 'f71a19323024a83d27f1c9fd875fe81a0255c8cc', placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", value: this.selectedValue, options: [
-                {
-                    label: 'Netherlands Antiles',
-                    value: 'Option-1',
-                },
-                {
-                    label: 'Option 2',
-                    value: 'Option-2',
-                },
-                {
-                    label: 'Option 3',
-                    value: 'Option-3',
-                },
-            ], onChange: (value) => this.selectedValue = value }), this.selectedValue, h("dga-dropdown", { key: 'd25671d29a4a8f81de078ce9e55cf7ddd6766913', placeholder: "Placeholder text", variant: "darker", optionLabel: "label", trackBy: "value", options: [
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option Optionbbb',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-            ] }), h("dga-dropdown", { key: '8e45432bd23e39c9e2150b2e0950145e364e9b5f', placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-            ] }), h("dga-dropdown", { key: 'fc9bb0ec277351b0a6b56294fe5aa89fb55fb9d6', error: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-            ] }), ['lg', 'md'].map((size) => (h("dga-dropdown", { key: size, size: size, placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", options: [
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-            ] }))), h("dga-dropdown", { key: '65a2d7e33d70997ceac98e399c21291e50d4e6e1', multiSelect: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-                {
-                    label: 'Option',
-                    value: 'Option',
-                },
-            ] })), h("div", { key: '7d0732bd74fa5f20403fb1712eae99bec360c648', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
-    }
-    static get is() { return "dga-dropdown-usage"; }
-    static get states() {
-        return {
-            "activeStep": {},
-            "selectedValue": {}
-        };
-    }
-}