@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/stories/dropdown.stories.js

@@ -1,47 +1,54 @@
 export default {
   title: 'Components/Dropdown',
 };
-export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
+const simpleOptions = [
+  {
+    label: 'Choice 1',
+    value: 'choice-1',
+  },
+  {
+    label: 'Choice 2',
+    value: 'choice-2',
+    isSelected: true,
+  },
+  {
+    label: 'Choice 3 (disabled example)',
+    value: 'choice-3',
+    isDisabled: true,
+  },
+  {
+    label: 'Choice 4',
+    value: 'choice-4',
+  },
+  {
+    label: 'Choice 5',
+    value: 'choice-5',
+  },
+  {
+    label: 'Choice 6',
+    value: 'choice-6',
+  },
+  {
+    label: 'Choice 7',
+    value: 'choice-7',
+  },
+];
+export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, options, }) => {
   const attributes = {
     'close-on-select': closeOnSelect,
     mode,
     open,
     'select-on-focus': selectOnFocus,
   };
-  const options = [
-    {
-      label: 'Choice 1',
-    },
-    {
-      label: 'Choice 2',
-      isSelected: true,
-    },
-    {
-      label: 'Choice 3 (disabled example)',
-      isDisabled: true,
-    },
-    {
-      label: 'Choice 4',
-    },
-    {
-      label: 'Choice 5',
-    },
-    {
-      label: 'Choice 6',
-    },
-    {
-      label: 'Choice 7',
-    },
-  ];
   return `
         <div style="width:75vw">
-        <div style="position: relative; min-width: 200px; width: 100%">
-            <xpl-dropdown
-                id="xpl-dropdown-simple"
-                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
-            >
-            </xpl-dropdown>
-        </div>
+            <div style="position: relative; min-width: 200px; width: 100%">
+                <xpl-dropdown
+                    id="xpl-dropdown-simple"
+                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
+                >
+                </xpl-dropdown>
+            </div>
         </div>
         <script>
             element = document.querySelector("#xpl-dropdown-simple");
@@ -68,6 +75,7 @@ Simple.args = {
   isOpen: true,
   mode: 'single',
   selectOnFocus: false,
+  options: simpleOptions,
 };
 export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
   const attributes = {
@@ -78,39 +86,39 @@ export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOn
   };
   return `
         <div style="width:75vw">
-        <div style="position: relative; min-width: 200px; width: 100%">
-            <xpl-dropdown
-                id="xpl-dropdown-simple"
-                ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
-            >
-                <xpl-dropdown-option
-                    selected
-                    slot="options"
-                >
-                    <label slot="option">
-                        <input type="radio" name="animal" value="dog"/>
-                        dog
-                    </label>
-                </xpl-dropdown-option>
-                <xpl-dropdown-option
-                    disabled
-                    slot="options"
-                >
-                    <label slot="option">
-                        <input disabled type="radio" name="animal" value="cat"/>
-                        cat (disabled)
-                    </label>
-                </xpl-dropdown-option>
-                <xpl-dropdown-option
-                    slot="options"
+            <div style="position: relative; min-width: 200px; width: 100%">
+                <xpl-dropdown
+                    id="xpl-dropdown-simple-w-children"
+                    ${Object.keys(attributes).reduce((acc, curr) => `${acc} ${curr}="${attributes[curr]}"`, '')}
                 >
-                    <label slot="option">
-                        <input type="radio" name="animal" value="fish"/>
-                        fish (selected)
-                    </label>
-                </xpl-dropdown-option>
-            </xpl-dropdown>
-        </div>
+                    <xpl-dropdown-option
+                        selected
+                        slot="options"
+                    >
+                        <label slot="option">
+                            <input type="radio" name="animal" value="dog"/>
+                            dog
+                        </label>
+                    </xpl-dropdown-option>
+                    <xpl-dropdown-option
+                        disabled
+                        slot="options"
+                    >
+                        <label slot="option">
+                            <input disabled type="radio" name="animal" value="cat"/>
+                            cat (disabled)
+                        </label>
+                    </xpl-dropdown-option>
+                    <xpl-dropdown-option
+                        slot="options"
+                    >
+                        <label slot="option">
+                            <input type="radio" name="animal" value="fish"/>
+                            fish (selected)
+                        </label>
+                    </xpl-dropdown-option>
+                </xpl-dropdown>
+            </div>
         </div>
     `;
 };
@@ -375,3 +383,4 @@ GroupSubComponent.parameters = {
 GroupSubComponent.args = {
   groupName: 'Choice 1',
 };
+//# sourceMappingURL=dropdown.stories.js.map

package/dist/stories/dropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../src/stories/dropdown.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { Components } from '../../src/components/components.d';\n\nexport default {\n    title: 'Components/Dropdown',\n};\n\nconst simpleOptions = [\n    {\n        label: 'Choice 1',\n        value: 'choice-1',\n    },\n    {\n        label: 'Choice 2',\n        value: 'choice-2',\n        isSelected: true,\n    },\n    {\n        label: 'Choice 3 (disabled example)',\n        value: 'choice-3',\n        isDisabled: true,\n    },\n    {\n        label: 'Choice 4',\n        value: 'choice-4',\n    },\n    {\n        label: 'Choice 5',\n        value: 'choice-5',\n    },\n    {\n        label: 'Choice 6',\n        value: 'choice-6',\n    },\n    {\n        label: 'Choice 7',\n        value: 'choice-7',\n    },\n];\n\nexport const Simple = ({\n    closeOnSelect,\n    isOpen: open,\n    mode,\n    selectOnFocus,\n    options,\n}: Components.XplDropdown): string => {\n    const attributes = {\n        'close-on-select': closeOnSelect,\n        mode,\n        open,\n        'select-on-focus': selectOnFocus,\n    };\n\n    return `\n        <div style=\"width:75vw\">\n            <div style=\"position: relative; min-width: 200px; width: 100%\">\n                <xpl-dropdown\n                    id=\"xpl-dropdown-simple\"\n                    ${Object.keys(attributes).reduce(\n                        (acc, curr) => `${acc} ${curr}=\"${attributes[curr]}\"`,\n                        ''\n                    )}\n                >\n                </xpl-dropdown>\n            </div>\n        </div>\n        <script>\n            element = document.querySelector(\"#xpl-dropdown-simple\");\n            element.options = ${JSON.stringify(options)}\n        </script>\n    `;\n};\n\nSimple.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Simple,\n    },\n};\n\nSimple.argTypes = {\n    mode: {\n        options: ['single', 'multi'],\n        control: {\n            type: 'select',\n        },\n    },\n};\n\nSimple.args = {\n    closeOnSelect: true,\n    isOpen: true,\n    mode: 'single',\n    selectOnFocus: false,\n    options: simpleOptions,\n};\n\nexport const SimpleWithChildren = ({\n    closeOnSelect,\n    isOpen: open,\n    mode,\n    selectOnFocus,\n}: Components.XplDropdown): string => {\n    const attributes = {\n        'close-on-select': closeOnSelect,\n        mode,\n        open,\n        'select-on-focus': selectOnFocus,\n    };\n\n    return `\n        <div style=\"width:75vw\">\n            <div style=\"position: relative; min-width: 200px; width: 100%\">\n                <xpl-dropdown\n                    id=\"xpl-dropdown-simple-w-children\"\n                    ${Object.keys(attributes).reduce(\n                        (acc, curr) => `${acc} ${curr}=\"${attributes[curr]}\"`,\n                        ''\n                    )}\n                >\n                    <xpl-dropdown-option\n                        selected\n                        slot=\"options\"\n                    >\n                        <label slot=\"option\">\n                            <input type=\"radio\" name=\"animal\" value=\"dog\"/>\n                            dog\n                        </label>\n                    </xpl-dropdown-option>\n                    <xpl-dropdown-option\n                        disabled\n                        slot=\"options\"\n                    >\n                        <label slot=\"option\">\n                            <input disabled type=\"radio\" name=\"animal\" value=\"cat\"/>\n                            cat (disabled)\n                        </label>\n                    </xpl-dropdown-option>\n                    <xpl-dropdown-option\n                        slot=\"options\"\n                    >\n                        <label slot=\"option\">\n                            <input type=\"radio\" name=\"animal\" value=\"fish\"/>\n                            fish (selected)\n                        </label>\n                    </xpl-dropdown-option>\n                </xpl-dropdown>\n            </div>\n        </div>\n    `;\n};\n\nSimpleWithChildren.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: SimpleWithChildren,\n    },\n};\n\nSimpleWithChildren.argTypes = {\n    mode: {\n        options: ['single', 'multi'],\n        control: {\n            type: 'select',\n        },\n    },\n};\n\nSimpleWithChildren.args = {\n    closeOnSelect: false,\n    isOpen: true,\n    mode: 'single',\n    selectOnFocus: false,\n};\n\nexport const Groups = ({\n    closeOnSelect,\n    isOpen: open,\n    mode,\n    selectOnFocus,\n}: Components.XplDropdown): string => {\n    const attributes = {\n        'close-on-select': closeOnSelect,\n        mode,\n        open,\n        'select-on-focus': selectOnFocus,\n    };\n\n    const options = [\n        {\n            label: 'Choice 1',\n        },\n        {\n            label: 'Choice 2',\n            isSelected: mode === 'multi' ? true : false,\n        },\n        {\n            groupName: 'Group 1',\n            options: [\n                {\n                    label: 'Choice 3',\n                    isSelected: true,\n                },\n                {\n                    label: 'Choice 4',\n                    isSelected: false,\n                },\n                {\n                    label: 'Choice 5',\n                    isSelected: mode === 'multi' ? true : false,\n                },\n            ],\n        },\n        {\n            groupName: 'Group 2',\n            options: [\n                {\n                    label: 'Choice 6',\n                    isSelected: mode === 'multi' ? true : false,\n                },\n                {\n                    label: 'Choice 7',\n                    isSelected: mode === 'multi' ? true : false,\n                },\n                {\n                    label: 'Choice 8',\n                    isSelected: false,\n                },\n            ],\n        },\n    ];\n\n    return `\n        <div style=\"width:75vw\">\n        <div style=\"position: relative; min-width: 200px; width: 100%\">\n            <xpl-dropdown\n                id=\"xpl-dropdown-groups\"\n                ${Object.keys(attributes).reduce(\n                    (acc, curr) => `${acc} ${curr}=\"${attributes[curr]}\"`,\n                    ''\n                )}\n            >\n            </xpl-dropdown>\n        </div>\n        </div>\n        <script>\n            element = document.querySelector(\"#xpl-dropdown-groups\");\n            element.options = ${JSON.stringify(options)}\n        </script>\n    `;\n};\n\nGroups.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Groups,\n    },\n};\nGroups.argTypes = {\n    mode: {\n        options: ['single', 'multi'],\n        control: {\n            type: 'select',\n        },\n    },\n};\nGroups.args = {\n    closeOnSelect: true,\n    isOpen: true,\n    mode: 'single',\n    selectOnFocus: false,\n};\n\nexport const GroupsWithChildren = ({\n    closeOnSelect,\n    isOpen: open,\n    mode,\n    selectOnFocus,\n}: Components.XplDropdown): string => {\n    const attributes = {\n        'close-on-select': closeOnSelect,\n        mode,\n        open,\n        'select-on-focus': selectOnFocus,\n    };\n\n    return `\n        <div style=\"width:75vw\">\n        <div style=\"position: relative; min-width: 200px; width: 100%\">\n            <xpl-dropdown\n                id=\"xpl-dropdown-groups\"\n                ${Object.keys(attributes).reduce(\n                    (acc, curr) => `${acc} ${curr}=\"${attributes[curr]}\"`,\n                    ''\n                )}\n            >\n                <xpl-dropdown-group\n                    label=\"Group Component Heading A\"\n                    slot=\"options\"\n                >\n                <xpl-dropdown-option\n                    label=\"Choice 1\"\n                    slot=\"options\"\n                ></xpl-dropdown-option>\n                <xpl-dropdown-option\n                    label=\"Choice 2 (disabled)\"\n                    disabled\n                    slot=\"options\"\n                ></xpl-dropdown-option>\n                <xpl-dropdown-heading\n                    slot=\"options\"\n                >\n                    Sub Heading B\n                    <svg\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"black\"\n                        height=\"16\"\n                    >\n                        <path\n                            d=\"M10.7 5.3a.3.3 0 1 0 0 .7.3.3 0 0 0 0-.7Zm2.7-2.5a1 1 0 0 0-1 .1l-.9.8h-.3l-.9-.8a1 1 0 0 0-1.6.8V6.3l-1 .1c-1.4.2-2.6 1-3.4 2V6.5c0-1-.8-1.8-1.8-1.8a.5.5 0 1 0 0 1c.5 0 .8.4.8.9V11c0 1.5.9 2.3 1.9 2.3H9c.2 0 .3-.1.3-.3 0-.4-.3-.7-.6-.7h-.4V12l1.7-1v1.8c0 .3.3.6.7.6H12c.4 0 .7-.3.7-.6V8.3C13.5 7.8 14 7 14 6V3.7a1 1 0 0 0-.6-1Zm-1.7 9.5H11v-2a.7.7 0 0 0-1-.6L8 11c-.3-.5-.6-1-1.1-1.3-.2-.1-.4 0-.5.1l-.1.3c-.1.1-.1.3 0 .4.6.5 1 1.2 1 2H5.2a.8.8 0 0 1-.9-.9c0-2 1.5-3.8 3.6-4.1l1-.2c.5.9 1.4 1.5 2.4 1.5h.4v3.6ZM13 6a1.7 1.7 0 0 1-3.3 0V3.7l1 1H12l1.1-1V6Zm-1.3-.3a.3.3 0 1 0 .6 0 .3.3 0 0 0-.6 0Z\"\n                        />\n                    </svg>\n                </xpl-dropdown-heading>\n                <xpl-dropdown-option\n                    label=\"Choice 3 (selected)\"\n                    selected\n                    slot=\"options\"\n                ></xpl-dropdown-option>\n                </xpl-dropdown-group>\n            </xpl-dropdown>\n        </div>\n        </div>\n    `;\n};\n\nGroupsWithChildren.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: GroupsWithChildren,\n    },\n};\nGroupsWithChildren.argTypes = {\n    mode: {\n        options: ['single', 'multi'],\n        control: {\n            type: 'select',\n        },\n    },\n};\nGroupsWithChildren.args = {\n    closeOnSelect: true,\n    isOpen: true,\n    mode: 'single',\n    selectOnFocus: false,\n};\n\nexport const OptionSubcomponent = ({\n    isDisabled: disabled,\n    label,\n    isSelected: selected,\n}: Components.XplDropdownOption): string => {\n    const attributes = { disabled, selected };\n\n    return `\n        <xpl-dropdown-option\n            label=\"${label}\"\n            ${Object.keys(attributes).reduce(\n                (acc, curr) => `${acc} ${curr}=\"${attributes[curr]}\"`,\n                ''\n            )}\n        ></xpl-dropdown-option>\n    `;\n};\n\nOptionSubcomponent.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: OptionSubcomponent,\n    },\n};\n\nOptionSubcomponent.args = {\n    isSelected: false,\n    isDisabled: false,\n    label: 'Choice 1',\n};\n\nexport const HeadingSubcomponent = ({\n    label,\n}: Components.XplDropdownHeading): string => {\n    return `\n        <xpl-dropdown-heading\n            label=\"${label}\"\n        ></xpl-dropdown-heading>\n    `;\n};\n\nHeadingSubcomponent.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: HeadingSubcomponent,\n    },\n};\n\nHeadingSubcomponent.args = {\n    label: 'Choice 1',\n};\n\nexport const GroupSubComponent = ({\n    groupName,\n}: Components.XplDropdownGroup): string => {\n    const options = [\n        {\n            label: 'Choice 1',\n        },\n        {\n            label: 'Choice 2',\n            isSelected: true,\n        },\n        {\n            label: 'Choice 3 (disabled example)',\n            isDisabled: true,\n        },\n        {\n            label: 'Choice 4',\n        },\n        {\n            label: 'Choice 5',\n        },\n        {\n            label: 'Choice 6',\n        },\n        {\n            label: 'Choice 7',\n        },\n    ];\n\n    return `\n        <xpl-dropdown-group\n            id=\"xpl-option-group\"\n            label=\"${groupName}\"\n        ></xpl-dropdown-group>\n        <script>\n            element = document.querySelector(\"#xpl-option-group\");\n            element.options = ${JSON.stringify(options)}\n        </script>\n    `;\n};\n\nGroupSubComponent.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: GroupSubComponent,\n    },\n};\n\nGroupSubComponent.args = {\n    groupName: 'Choice 1',\n};\n"]}

package/dist/stories/grid.stories.js

@@ -98,3 +98,4 @@ Grid.args = {
   unit4Sm: 6,
   unit4Xs: 6,
 };
+//# sourceMappingURL=grid.stories.js.map

package/dist/stories/grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../src/stories/grid.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Grid',\n    argTypes: {\n        unit1Lg: { control: { type: 'number' } },\n        unit1Md: { control: { type: 'number' } },\n        unit1Sm: { control: { type: 'number' } },\n        unit1Xs: { control: { type: 'number' } },\n        unit2Lg: { control: { type: 'number' } },\n        unit2Md: { control: { type: 'number' } },\n        unit2Sm: { control: { type: 'number' } },\n        unit2Xs: { control: { type: 'number' } },\n        unit3Lg: { control: { type: 'number' } },\n        unit3Md: { control: { type: 'number' } },\n        unit3Sm: { control: { type: 'number' } },\n        unit3Xs: { control: { type: 'number' } },\n        unit4Lg: { control: { type: 'number' } },\n        unit4Md: { control: { type: 'number' } },\n        unit4Sm: { control: { type: 'number' } },\n        unit4Xs: { control: { type: 'number' } },\n    },\n};\n\nexport const Grid = ({\n    unit1Lg,\n    unit1Md,\n    unit1Sm,\n    unit1Xs,\n    unit2Lg,\n    unit2Md,\n    unit2Sm,\n    unit2Xs,\n    unit3Lg,\n    unit3Md,\n    unit3Sm,\n    unit3Xs,\n    unit4Lg,\n    unit4Md,\n    unit4Sm,\n    unit4Xs,\n}) => {\n    return `<xpl-grid>\n    <xpl-grid-item lg=\"${unit1Lg}\" md=\"${unit1Md}\" sm=\"${unit1Sm}\" xs=\"${unit1Xs}\" style=\"border: 1px solid red;\">\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit2Lg}\" md=\"${unit2Md}\" sm=\"${unit2Sm}\" xs=\"${unit2Xs}\" style=\"border: 1px solid red;\">\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit3Lg}\" md=\"${unit3Md}\" sm=\"${unit3Sm}\" xs=\"${unit3Xs}\" style=\"border: 1px solid red;\">\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit4Lg}\" md=\"${unit4Md}\" sm=\"${unit4Sm}\" xs=\"${unit4Xs}\" style=\"border: 1px solid red;\">\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.\n    </xpl-grid-item>\n  </xpl-grid>`;\n};\n\nGrid.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render({\n            unit1Lg,\n            unit1Md,\n            unit1Sm,\n            unit1Xs,\n            unit2Lg,\n            unit2Md,\n            unit2Sm,\n            unit2Xs,\n            unit3Lg,\n            unit3Md,\n            unit3Sm,\n            unit3Xs,\n            unit4Lg,\n            unit4Md,\n            unit4Sm,\n            unit4Xs,\n        }) {\n            return `<xpl-grid>\n    <xpl-grid-item lg=\"${unit1Lg}\" md=\"${unit1Md}\" sm=\"${unit1Sm}\" xs=\"${unit1Xs}\">\n        Lorem ipsum...\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit2Lg}\" md=\"${unit2Md}\" sm=\"${unit2Sm}\" xs=\"${unit2Xs}\">\n        Lorem ipsum...\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit3Lg}\" md=\"${unit3Md}\" sm=\"${unit3Sm}\" xs=\"${unit3Xs}\">\n        Lorem ipsum...\n    </xpl-grid-item>\n    <xpl-grid-item lg=\"${unit4Lg}\" md=\"${unit4Md}\" sm=\"${unit4Sm}\" xs=\"${unit4Xs}\">\n        Lorem ipsum...\n    </xpl-grid-item>\n</xpl-grid>`;\n        },\n    },\n    html: {\n        render() {\n            //         const columns = layout.split(\",\").map(c => +c);\n            //         return `<div class=\"xpl-grid\" id=\"grid-id\">\n            //     <style>\n            //         @media screen and (max-width: ${breakpoint}px) {\n            //         #grid-id {\n            //           display: block;\n            //         }\n            //         #grid-id [class^=\"xpl-grid__col\"] {\n            //           margin-bottom: 1.5rem;\n            //           margin-right: 0;\n            //           width: 100%;\n            //         }\n            //       }\n            //     </style>${columns.map(c => {\n            //         return `\n            //     <div class=\"xpl-grid__col-${c}\">\n            //         Lorem ipsum...\n            //     </div>`;\n            //     }).join(\"\")}\n            // </div>`\n        },\n    },\n};\n\nGrid.args = {\n    unit1Lg: 4,\n    unit1Md: 3,\n    unit1Sm: 3,\n    unit1Xs: 6,\n    unit2Lg: 2,\n    unit2Md: 3,\n    unit2Sm: 3,\n    unit2Xs: 6,\n    unit3Lg: 2,\n    unit3Md: 3,\n    unit3Sm: 6,\n    unit3Xs: 6,\n    unit4Lg: 4,\n    unit4Md: 3,\n    unit4Sm: 6,\n    unit4Xs: 6,\n};\n"]}

package/dist/stories/input.stories.js

@@ -266,3 +266,4 @@ Password.args = {
   error: false,
   errorMessage: '',
 };
+//# sourceMappingURL=input.stories.js.map

package/dist/stories/input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../src/stories/input.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Input',\n    argTypes: {\n        label: {\n            type: { name: 'string', required: true },\n        },\n        description: {\n            type: { name: 'string', required: false },\n        },\n        disabled: {\n            type: {\n                name: 'boolean',\n            },\n        },\n        error: {\n            type: {\n                name: 'boolean',\n            },\n        },\n        errorMessage: {\n            type: { name: 'string', required: false },\n        },\n        type: {\n            options: ['text', 'number'],\n            control: {\n                type: 'select',\n            },\n        },\n    },\n};\n\nexport const Input = ({\n    label,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    pre,\n    post,\n    type,\n}) => {\n    let attrs = '';\n    if (label) attrs += ` label=\"${label}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (pre) attrs += ` pre=\"${pre}\"`;\n    if (post) attrs += ` post=\"${post}\"`;\n    if (type !== 'text') attrs += ` type=${type}`;\n    return `<xpl-input${attrs} name=\"input-name\" placeholder=\"Placeholder\"></xpl-input>`;\n};\n\nInput.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Input,\n    },\n    html: {\n        render({\n            label,\n            description,\n            disabled,\n            error,\n            errorMessage,\n            pre,\n            post,\n            type,\n        }) {\n            const output = [];\n\n            let className = 'xpl-input';\n            if (disabled) className += ' xpl-input--disabled';\n            if (error) className += ' xpl-input--error';\n            output.push(`<div class=\"${className}\">\n    <label for=\"id\">\n        ${label}${\n                description\n                    ? `\n        <small>${description}</small>`\n                    : ''\n            }\n    </label>\n    <div class=\"xpl-input-wrapper\">${\n        pre\n            ? `\n        <label class=\"xpl-input-pre\" for=\"id\">${pre}</label>`\n            : ''\n    }\n        ${`<input ${\n            disabled ? 'disabled ' : ''\n        }id=\"id\" name=\"input-name\" placeholder=\"Placeholder\" type=\"${type}\" />`}${\n                post\n                    ? `\n        <label class=\"xpl-input-post\" for=\"id\">${post}</label>`\n                    : ''\n            }\n    </div>${\n        errorMessage\n            ? `\n    <label class=\"xpl-input-error\" for=\"id\">\n        ${`<svg width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z\" /></svg>`}\n        ${errorMessage}\n    </label>`\n            : ''\n    }\n</div>`);\n\n            return output;\n        },\n    },\n};\n\nInput.args = {\n    label: 'Input',\n    description: 'A brief description',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n    pre: '',\n    post: '',\n    type: 'text',\n};\n\nexport const Multiline = ({\n    label,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    maxCharacterCount,\n}) => {\n    let attrs = ' multiline';\n    if (label) attrs += ` label=\"${label}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (maxCharacterCount >= 0)\n        attrs += ` max-character-count=\"${maxCharacterCount}\"`;\n    return `<xpl-input${attrs} name=\"input-name\" placeholder=\"Placeholder\"></xpl-input>`;\n};\n\nMultiline.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Multiline,\n    },\n    html: {\n        render({\n            disabled,\n            error,\n            errorMessage,\n            label,\n            description,\n            maxCharacterCount,\n        }) {\n            const output: string[] = [];\n            if (maxCharacterCount > 0)\n                output.push(`WARNING: For multiline inputs with a max. character count,\nthere is JS interactivity that is provided only by\nthe web component. The code shown below does not\nreflect the additional markup and interactivity.`);\n\n            let className = 'xpl-input';\n            if (disabled) className += ' xpl-input--disabled';\n            if (error) className += ' xpl-input--error';\n            output.push(`<div class=\"${className}\">\n    <label for=\"id\">\n        ${label}${\n                description\n                    ? `\n        <small>${description}</small>`\n                    : ''\n            }\n    </label>\n    <div class=\"xpl-input-wrapper\">\n        ${`<textarea ${\n            disabled ? 'disabled ' : ''\n        }id=\"id\" name=\"input-name\" placeholder=\"Placeholder\"></textarea>`}\n    </div>${\n        errorMessage\n            ? `\n    <label class=\"xpl-input-error\" for=\"id\">\n        ${`<svg width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z\" /></svg>`}\n        ${errorMessage}\n    </label>`\n            : ''\n    }\n</div>`);\n\n            return output;\n        },\n    },\n};\n\nMultiline.args = {\n    label: 'Multiline Input',\n    description: 'A brief description',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n    maxCharacterCount: 50,\n};\n\nexport const Datepicker = ({\n    label,\n    dateFormat,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    min,\n    mode,\n    max,\n}) => {\n    let attrs = ` type=\"date\"`;\n    if (label) attrs += ` label=\"${label}\"`;\n    if (dateFormat) attrs += ` date-format=\"${dateFormat}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (min) attrs += ` min=\"${min}\"`;\n    if (max) attrs += ` max=\"${max}\"`;\n    if (mode) attrs += ` mode=\"${mode}\"`;\n\n    return `<xpl-input${attrs} name=\"input-name\" placeholder=\"Placeholder\"></xpl-input>`;\n};\n\nDatepicker.argTypes = {\n    mode: {\n        options: ['single', /* \"multiple\", */ 'range'],\n        control: {\n            type: 'select',\n        },\n    },\n};\n\nDatepicker.args = {\n    mode: 'single',\n    label: 'Datepicker',\n    dateFormat: 'm/d/Y',\n    description: 'A brief description',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n    min: '01/01/2000',\n    max: '12/31/2099',\n};\n\nDatepicker.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Datepicker,\n    },\n    html: {\n        render({\n            label,\n            description,\n            disabled,\n            error,\n            errorMessage,\n            min,\n            max,\n        }) {\n            const output = [\n                `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is inlcuded here:`,\n            ];\n\n            let className = 'xpl-input';\n            if (disabled) className += ' xpl-input--disabled';\n            if (error) className += ' xpl-input--error';\n            output.push(`<div class=\"${className}\">\n    <label for=\"id\">\n        ${label}${\n                description\n                    ? `\n        <small>${description}</small>`\n                    : ''\n            }\n    </label>\n    <div class=\"xpl-input-wrapper\">\n        ${`<input ${disabled ? 'disabled ' : ''}id=\"id\"${\n            min ? ` min=\"${min}\"` : ''\n        }${\n            max ? ` max=\"${max}\"` : ''\n        } name=\"input-name\" placeholder=\"Placeholder\" type=\"date\" />`}\n    </div>${\n        errorMessage\n            ? `\n    <label class=\"xpl-input-error\" for=\"id\">\n        ${`<svg width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z\" /></svg>`}\n        ${errorMessage}\n    </label>`\n            : ''\n    }\n</div>`);\n\n            return output;\n        },\n    },\n};\n\nexport const Password = ({\n    label,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    pre,\n    post,\n}) => {\n    let attrs = '';\n    if (label) attrs += ` label=\"${label}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (pre) attrs += ` pre=\"${pre}\"`;\n    if (post) attrs += ` post=\"${post}\"`;\n    return `<xpl-input type=\"password\"${attrs} name=\"input-name\"></xpl-input>`;\n};\n\nPassword.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Password,\n    },\n    html: {\n        render() {\n            return `Sorry, the Password Input only supports web component usage.`;\n        },\n    },\n};\n\nPassword.args = {\n    label: 'Password',\n    description: 'Enter a password:',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n};\n"]}

package/dist/stories/list.stories.js

@@ -152,3 +152,4 @@ List.args = {
   title: 'List Item',
   subtext: '',
 };
+//# sourceMappingURL=list.stories.js.map

package/dist/stories/list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.stories.js","sourceRoot":"","sources":["../../src/stories/list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\n\nexport default {\n    title: 'Components/List',\n    argTypes: {\n        avatar: {\n            options: ['none', 'image', 'placeholder'],\n            control: {\n                type: 'select',\n            },\n        },\n        avatars: {\n            type: { name: 'boolean' },\n        },\n        badges: {\n            type: { name: 'boolean' },\n        },\n        link: {\n            type: { name: 'boolean' },\n        },\n        metadata: {\n            type: { name: 'boolean' },\n        },\n        title: {\n            type: { name: 'string' },\n        },\n        subtext: {\n            type: { name: 'string' },\n        },\n    },\n};\n\nconst script = ({\n    id,\n    avatar,\n    avatars,\n    badges,\n    metadata,\n    link,\n    title,\n    subtext,\n}) => `\n    (function() {\n        const list = document.getElementById(\"${id}\");\n        const item = ${JSON.stringify({\n            avatar:\n                avatar === 'image'\n                    ? 'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg'\n                    : avatar === 'placeholder'\n                    ? 'ABC'\n                    : null,\n            avatars: avatars\n                ? [\n                      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',\n                      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',\n                      'https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg',\n                  ]\n                : null,\n            badges: badges\n                ? [\n                      'Badge',\n                      {\n                          dot: 'true',\n                          text: 'With Dot',\n                      },\n                      {\n                          variant: 'error',\n                          text: 'Error',\n                      },\n                  ]\n                : null,\n            href: link ? '#' : null,\n            metadata: metadata\n                ? [\n                      'Metadata',\n                      {\n                          icon: 'envelope',\n                          text: 'Metadata w/ Icon',\n                      },\n                  ]\n                : null,\n            title,\n            subtext,\n        })};\n        list.items = [item, item, item];\n    })();\n`;\n\nexport const List = (props) => {\n    const id = uuid();\n    return `<xpl-list id=\"${id}\"></xpl-list>\n    <script>${script({ id, ...props })}</script>`;\n};\n\nList.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render({ avatar, avatars, badges, metadata, link, title, subtext }) {\n            return [\n                `<xpl-list id=\"list-id\"></xpl-list>`,\n                `<script>\nconst item = {${\n                    avatar !== 'none'\n                        ? `\n    avatar: ${avatar === 'placeholder' ? '\"ABC\"' : '\"https://example.jpg\"'},`\n                        : ''\n                }${\n                    avatars\n                        ? `\n    avatars: [\n        \"https://example.jpg\",\n        \"https://example.jpg\",\n        \"https://example.jpg\",\n    ],`\n                        : ''\n                }${\n                    badges\n                        ? `\n    badges: [\n        \"Badge\",\n        {\n            dot: true,\n            text: \"With Dot\",\n        },\n        {\n            variant: \"error\",\n            text: \"Error\",\n        },\n    ],`\n                        : ''\n                }${\n                    metadata\n                        ? `\n    metadata: [\n        \"Metadata\",\n        {\n            icon: \"envelope\",\n            text: \"Metadata w/ Icon\",\n        },\n    ],`\n                        : ''\n                }${\n                    link\n                        ? `\n    link: \"https://example.com\",`\n                        : ''\n                },\n    title: ${title},${\n                    subtext\n                        ? `\n    subtext: \"${subtext}\",`\n                        : ''\n                }\n};\ndocument.getElementById(\"list-id\").items = [\n    item,\n    item,\n    item\n];`,\n            ];\n        },\n    },\n    html: {\n        render() {\n            // let className = \"xpl-badge\";\n            // if (dot) className += \" xpl-badge--dot\";\n            // if (variant !== \"default\") className += \" xpl-badge--\" + variant;\n            // return `<div class=\"${className}\">${text}</div>`;\n        },\n    },\n};\n\nList.args = {\n    avatar: 'none',\n    avatars: false,\n    badges: false,\n    link: true,\n    metadata: false,\n    title: 'List Item',\n    subtext: '',\n};\n"]}

package/dist/stories/main-nav.stories.js

@@ -306,3 +306,4 @@ MainNav.parameters = {
 MainNav.args = {
   width: 'default',
 };
+//# sourceMappingURL=main-nav.stories.js.map

package/dist/stories/main-nav.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-nav.stories.js","sourceRoot":"","sources":["../../src/stories/main-nav.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,KAAK,EAAE,gCAAgC;EACvC,QAAQ,EAAE;IACN,KAAK,EAAE;MACH,OAAO,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC;MAChC,OAAO,EAAE;QACL,IAAI,EAAE,QAAQ;OACjB;KACJ;GACJ;CACJ,CAAC;AAMF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAU,EAAE,CAAC;uBACrC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwI3B,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAU,EAAE,CAAC;yCAChB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJ7C,CAAC;AAEF,OAAO,CAAC,UAAU,GAAG;EACjB,MAAM,EAAE,UAAU;EAClB,eAAe,EAAE;IACb,MAAM,EAAE,OAAO;GAClB;EACD,IAAI,EAAE;IACF,MAAM,EAAE,WAAW;GACtB;CACJ,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG;EACX,KAAK,EAAE,SAAS;CACnB,CAAC","sourcesContent":["export default {\n    title: 'Components/Navigation/Main Nav',\n    argTypes: {\n        width: {\n            options: ['default', 'sm', 'md'],\n            control: {\n                type: 'select',\n            },\n        },\n    },\n};\n\ninterface MainNavProps {\n    width: 'string';\n}\n\nexport const MainNav = ({ width }: MainNavProps): string => `\n<xpl-main-nav width=\"${width}\">\n    <svg\n        slot=\"logo\"\n        width=\"42\"\n        height=\"42\"\n        viewBox=\"0 0 42 42\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M0 4C0 1.79086 1.79086 0 4 0H38C40.2091 0 42 1.79086 42 4V38C42 40.2091 40.2091 42 38 42H4C1.79086 42 0 40.2091 0 38V4Z\"\n            fill=\"white\"\n        />\n        <g clip-path=\"url(#clip0_1237:41953)\">\n            <path\n                d=\"M33.6029 8.55469C26.4683 8.88391 19.9116 12.5273 15.9331 18.3875C13.266 17.9266 10.5321 18.5851 8.39844 20.2092V21.7895C14.9107 21.7895 20.1783 26.9913 20.2005 33.4002V33.4221H21.8008C23.4455 31.3151 24.1345 28.6154 23.6456 25.9816C29.5799 22.0748 33.2695 15.6001 33.6029 8.55469ZM22.3564 16.8731C22.3564 15.3367 23.6233 14.0857 25.1792 14.0857C26.735 14.0857 28.0019 15.3367 28.0019 16.8731C28.0019 18.4095 26.735 19.6605 25.1792 19.6605C23.6233 19.6605 22.3564 18.4095 22.3564 16.8731Z\"\n                fill=\"#F44E27\"\n            />\n            <path\n                d=\"M12.3762 27.431C10.7314 26.9701 8.9978 27.8919 8.53105 29.538C8.44215 29.8014 8.41992 30.0867 8.41992 30.3721V33.4448H11.5316C11.7983 33.4448 12.0428 33.4229 12.2873 33.357C13.9542 32.94 14.9544 31.2719 14.5321 29.6258C14.2432 28.5503 13.4208 27.7383 12.3762 27.431Z\"\n                fill=\"#F44E27\"\n            />\n        </g>\n        <defs>\n            <clipPath id=\"clip0_1237:41953\">\n                <rect\n                    width=\"25.3165\"\n                    height=\"25\"\n                    fill=\"white\"\n                    transform=\"translate(8.3418 8.5)\"\n                />\n            </clipPath>\n        </defs>\n    </svg>\n    <p slot=\"brand-name\">Client Name</p>\n    <ul slot=\"navigation\">\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M13.8795 7.82083L12.6661 6.82312V4.83311C12.6661 4.7889 12.6486 4.74651 12.6173 4.71525C12.5861 4.684 12.5437 4.66644 12.4995 4.66644H11.8328C11.7892 4.66671 11.7474 4.68404 11.7165 4.71473C11.6855 4.74542 11.6678 4.78702 11.6672 4.83061V6.00186L8.74673 3.60393C8.5369 3.42922 8.27248 3.33356 7.99944 3.33356C7.72639 3.33356 7.46198 3.42922 7.25214 3.60393L2.1194 7.82083C2.08583 7.84893 2.05812 7.88336 2.03786 7.92217C2.01759 7.96097 2.00517 8.00339 2.0013 8.047C1.99744 8.0906 2.00219 8.13454 2.01531 8.17631C2.02842 8.21808 2.04963 8.25685 2.07773 8.29042L2.29107 8.54667C2.3478 8.61441 2.42912 8.65685 2.51713 8.66466C2.60515 8.67248 2.69266 8.64502 2.76045 8.58834L3.33274 8.11833V11.9998C3.33324 12.1765 3.40363 12.3458 3.52855 12.4707C3.65347 12.5956 3.82275 12.666 3.99941 12.6665H6.66609C6.84275 12.666 7.01204 12.5956 7.13696 12.4707C7.26187 12.3458 7.33227 12.1765 7.33277 11.9998V9.83314H8.66611V11.9998C8.6666 12.1765 8.737 12.3458 8.86192 12.4707C8.98683 12.5956 9.15612 12.666 9.33278 12.6665H11.9995C12.1753 12.6661 12.3439 12.5964 12.4687 12.4726C12.5935 12.3487 12.6644 12.1806 12.6661 12.0048V8.11792L13.2397 8.58917C13.3075 8.64586 13.395 8.67331 13.483 8.6655C13.571 8.65768 13.6523 8.61524 13.7091 8.5475L13.9222 8.29146C13.9504 8.2578 13.9717 8.2189 13.9848 8.17699C13.9979 8.13509 14.0026 8.091 13.9986 8.04727C13.9947 8.00354 13.9821 7.96102 13.9616 7.92216C13.9412 7.8833 13.9133 7.84887 13.8795 7.82083V7.82083ZM11.663 11.6665H9.66611V9.4998C9.66562 9.32314 9.59522 9.15386 9.4703 9.02894C9.34539 8.90402 9.1761 8.83363 8.99944 8.83313H6.99943C6.82277 8.83363 6.65349 8.90402 6.52857 9.02894C6.40365 9.15386 6.33325 9.32314 6.33276 9.4998V11.6665H4.33275V7.29708L7.99944 4.28414L11.6661 7.29583L11.663 11.6665Z\"\n                    />\n                </svg>\n                <p>Dashboard</p>\n            </a>\n        </xpl-nav-item>\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M13.4375 4.25H11.1875C10.877 4.25 10.625 4.50172 10.625 4.8125V7.0625C10.625 7.37305 10.877 7.625 11.1875 7.625H13.4375C13.748 7.625 14 7.37305 14 7.0625V4.8125C14 4.50172 13.748 4.25 13.4375 4.25ZM12.875 6.5H11.75V5.375H12.875V6.5ZM13.4375 8.375H11.1875C10.877 8.375 10.625 8.62672 10.625 8.9375V11.1875C10.625 11.498 10.877 11.75 11.1875 11.75H13.4375C13.748 11.75 14 11.498 14 11.1875V8.9375C14 8.62672 13.748 8.375 13.4375 8.375ZM12.875 10.625H11.75V9.5H12.875V10.625ZM4.8125 4.25H2.5625C2.25195 4.25 2 4.50172 2 4.8125V7.0625C2 7.37305 2.25195 7.625 2.5625 7.625H4.8125C5.12305 7.625 5.375 7.37305 5.375 7.0625V4.8125C5.375 4.50172 5.12305 4.25 4.8125 4.25ZM4.25 6.5H3.125V5.375H4.25V6.5ZM4.8125 8.375H2.5625C2.25195 8.375 2 8.62672 2 8.9375V11.1875C2 11.498 2.25195 11.75 2.5625 11.75H4.8125C5.12305 11.75 5.375 11.498 5.375 11.1875V8.9375C5.375 8.62672 5.12305 8.375 4.8125 8.375ZM4.25 10.625H3.125V9.5H4.25V10.625ZM9.125 4.25H6.875C6.56445 4.25 6.3125 4.50172 6.3125 4.8125V7.0625C6.3125 7.37305 6.56445 7.625 6.875 7.625H9.125C9.43555 7.625 9.6875 7.37305 9.6875 7.0625V4.8125C9.6875 4.50172 9.43555 4.25 9.125 4.25ZM8.5625 6.5H7.4375V5.375H8.5625V6.5ZM9.125 8.375H6.875C6.56445 8.375 6.3125 8.62672 6.3125 8.9375V11.1875C6.3125 11.498 6.56445 11.75 6.875 11.75H9.125C9.43555 11.75 9.6875 11.498 9.6875 11.1875V8.9375C9.6875 8.62672 9.43555 8.375 9.125 8.375ZM8.5625 10.625H7.4375V9.5H8.5625V10.625Z\"\n                    />\n                </svg>\n                <p>Classes</p>\n            </a>\n        </xpl-nav-item>\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\" class=\"active\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M8 2C5.51335 2 3.5 4.01595 3.5 6.5C3.5 8.16681 4.06229 8.68768 7.04542 13.4709C7.48569 14.1768 8.51481 14.176 8.95457 13.4709C11.9393 8.68518 12.5 8.16648 12.5 6.5C12.5 4.01335 10.4841 2 8 2ZM8 12.875C5.0135 8.08639 4.625 7.7841 4.625 6.5C4.625 4.63604 6.13604 3.125 8 3.125C9.86396 3.125 11.375 4.63604 11.375 6.5C11.375 7.77859 11.0196 8.0334 8 12.875ZM6.125 6.5C6.125 5.46446 6.96446 4.625 8 4.625C9.03554 4.625 9.875 5.46446 9.875 6.5C9.875 7.53554 9.03554 8.375 8 8.375C6.96446 8.375 6.125 7.53554 6.125 6.5Z\"\n                    />\n                </svg>\n\n                <p>Locations</p>\n            </a>\n        </xpl-nav-item>\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M12.125 3.5H11V2.28125C11 2.12656 10.8734 2 10.7188 2H9.78125C9.62656 2 9.5 2.12656 9.5 2.28125V3.5H6.5V2.28125C6.5 2.12656 6.37344 2 6.21875 2H5.28125C5.12656 2 5 2.12656 5 2.28125V3.5H3.875C3.25391 3.5 2.75 4.00391 2.75 4.625V12.875C2.75 13.4961 3.25391 14 3.875 14H12.125C12.7461 14 13.25 13.4961 13.25 12.875V4.625C13.25 4.00391 12.7461 3.5 12.125 3.5ZM11.9844 12.875H4.01562C3.93828 12.875 3.875 12.8117 3.875 12.7344V5.75H12.125V12.7344C12.125 12.8117 12.0617 12.875 11.9844 12.875Z\"\n                    />\n                </svg>\n\n                <p>Schedule</p>\n            </a>\n        </xpl-nav-item>\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M11.3 10.25H11.825C11.975 10.25 12.125 10.1 12.125 9.95V4.55C12.125 4.4 11.975 4.25 11.825 4.25H11.3C11.15 4.25 11 4.4 11 4.55V9.95C11 10.1 11.15 10.25 11.3 10.25ZM6.8 10.25H7.325C7.475 10.25 7.625 10.1 7.625 9.95V5.3C7.625 5.15 7.475 5 7.325 5H6.8C6.65 5 6.5 5.15 6.5 5.3V9.95C6.5 10.1 6.65 10.25 6.8 10.25ZM9.05 10.25H9.575C9.725 10.25 9.875 10.1 9.875 9.95V6.8C9.875 6.65 9.725 6.5 9.575 6.5H9.05C8.9 6.5 8.75 6.65 8.75 6.8V9.95C8.75 10.1 8.9 10.25 9.05 10.25ZM13.625 11.375H3.125V3.875C3.125 3.66781 2.95719 3.5 2.75 3.5H2.375C2.16781 3.5 2 3.66781 2 3.875V11.75C2 12.1641 2.33586 12.5 2.75 12.5H13.625C13.8322 12.5 14 12.3322 14 12.125V11.75C14 11.5428 13.8322 11.375 13.625 11.375ZM4.55 10.25H5.075C5.225 10.25 5.375 10.1 5.375 9.95V8.3C5.375 8.15 5.225 8 5.075 8H4.55C4.4 8 4.25 8.15 4.25 8.3V9.95C4.25 10.1 4.4 10.25 4.55 10.25Z\"\n                    />\n                </svg>\n                <p>Reports</p>\n            </a>\n        </xpl-nav-item>\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 16 16\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                    <path\n                        d=\"M10.6667 5.33329C10.4825 5.33329 10.3333 5.48246 10.3333 5.66663C10.3333 5.85079 10.4825 5.99996 10.6667 5.99996C10.8508 5.99996 11 5.85079 11 5.66663C11 5.48246 10.8508 5.33329 10.6667 5.33329ZM13.4069 2.75308C13.2789 2.69608 13.1403 2.66662 13.0002 2.66663C12.7577 2.66663 12.5183 2.75475 12.331 2.92329L11.5052 3.66663H11.1617L10.3358 2.92329C10.1921 2.79401 10.014 2.70913 9.82301 2.67892C9.63205 2.64872 9.43642 2.67447 9.25979 2.75308C8.89917 2.91392 8.66667 3.27163 8.66667 3.66663V5.99996C8.66667 6.08829 8.68438 6.17163 8.69271 6.25788L7.71354 6.40621C6.30771 6.61933 5.11729 7.37288 4.33333 8.43788V6.49996C4.33333 5.48892 3.51104 4.66663 2.5 4.66663C2.22396 4.66663 2 4.89058 2 5.16663C2 5.44725 2.23167 5.67433 2.51417 5.66642C2.97958 5.6535 3.33333 6.09517 3.33333 6.56079V10.9854C3.33333 12.5148 4.15417 13.3333 5.16667 13.3333H9C9.18417 13.3333 9.33333 13.1841 9.33333 13C9.33333 12.6318 9.03479 12.3333 8.66667 12.3333H8.33042C8.32812 12.1798 8.31417 12.0285 8.29188 11.8789L10 10.8739V12.6666C10 13.0348 10.2985 13.3333 10.6667 13.3333H12C12.3681 13.3333 12.6667 13.0348 12.6667 12.6666V8.29579C13.4598 7.83329 14 6.98267 14 6.00017V3.66663C14 3.27183 13.7675 2.91392 13.4069 2.75308ZM11.6667 12.3333H11V10.2912C11 10.0527 10.8717 9.831 10.6648 9.71267C10.4583 9.59413 10.2019 9.59558 9.99563 9.71663L7.98833 10.8975C7.73667 10.377 7.35854 9.92079 6.87479 9.58267C6.71813 9.47308 6.49833 9.53663 6.40542 9.70371L6.25042 9.98267C6.16771 10.1316 6.19729 10.3262 6.33521 10.4262C6.94396 10.8673 7.31167 11.5729 7.3275 12.3333H5.16667C4.70708 12.3333 4.33333 11.9595 4.33333 11.5C4.33333 9.43163 5.81771 7.70496 7.86333 7.39517L8.97938 7.226C9.425 8.07788 10.3073 8.66663 11.3333 8.66663C11.4475 8.66663 11.5563 8.64683 11.6667 8.63288V12.3333ZM13 5.99996C13 6.92038 12.2537 7.66663 11.3333 7.66663C10.4129 7.66663 9.66667 6.92038 9.66667 5.99996V3.66663L10.7777 4.66663H11.8888L13 3.66663V5.99996ZM11.6667 5.66663C11.6667 5.85079 11.8158 5.99996 12 5.99996C12.1842 5.99996 12.3333 5.85079 12.3333 5.66663C12.3333 5.48246 12.1842 5.33329 12 5.33329C11.8158 5.33329 11.6667 5.48246 11.6667 5.66663Z\"\n                    />\n                </svg>\n                <p>Cats</p>\n            </a>\n        </xpl-nav-item>\n    </ul>\n    <ul slot=\"footer\">\n        <xpl-nav-item>\n            <a slot=\"link\" href=\"javascript:;\">\n                <xpl-avatar name=\"Jean-Luc Picard\">JP</xpl-avatar>\n                <div>\n                <p>Jean-Luc Picard</p>\n                <p>jl@picard.space</p>\n                </div>\n            </a>\n        </xpl-nav-item>\n    </ul>\n</xpl-main-nav>\n`;\n\nconst HtmlMainNav = ({ width }: MainNavProps): string => `\n<div class=\"xpl-main-nav xpl-main-nav--${width}\">\n    <nav aria-label=\"Sidebar\">\n        <header aria-label=\"Sidebar Header\">\n            <svg\n                slot=\"logo\"\n                width=\"42\"\n                height=\"42\"\n                viewBox=\"0 0 42 42\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                <path\n                    d=\"M0 4C0 1.79086 1.79086 0 4 0H38C40.2091 0 42 1.79086 42 4V38C42 40.2091 40.2091 42 38 42H4C1.79086 42 0 40.2091 0 38V4Z\"\n                    fill=\"white\"\n                />\n                <g clip-path=\"url(#clip0_1237:41953)\">\n                    <path\n                        d=\"M33.6029 8.55469C26.4683 8.88391 19.9116 12.5273 15.9331 18.3875C13.266 17.9266 10.5321 18.5851 8.39844 20.2092V21.7895C14.9107 21.7895 20.1783 26.9913 20.2005 33.4002V33.4221H21.8008C23.4455 31.3151 24.1345 28.6154 23.6456 25.9816C29.5799 22.0748 33.2695 15.6001 33.6029 8.55469ZM22.3564 16.8731C22.3564 15.3367 23.6233 14.0857 25.1792 14.0857C26.735 14.0857 28.0019 15.3367 28.0019 16.8731C28.0019 18.4095 26.735 19.6605 25.1792 19.6605C23.6233 19.6605 22.3564 18.4095 22.3564 16.8731Z\"\n                        fill=\"#F44E27\"\n                    />\n                    <path\n                        d=\"M12.3762 27.431C10.7314 26.9701 8.9978 27.8919 8.53105 29.538C8.44215 29.8014 8.41992 30.0867 8.41992 30.3721V33.4448H11.5316C11.7983 33.4448 12.0428 33.4229 12.2873 33.357C13.9542 32.94 14.9544 31.2719 14.5321 29.6258C14.2432 28.5503 13.4208 27.7383 12.3762 27.431Z\"\n                        fill=\"#F44E27\"\n                    />\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_1237:41953\">\n                        <rect\n                            width=\"25.3165\"\n                            height=\"25\"\n                            fill=\"white\"\n                            transform=\"translate(8.3418 8.5)\"\n                        />\n                    </clipPath>\n                </defs>\n            </svg>\n            <p slot=\"brand-name\">Client Name</p>\n        </header>\n        <ul>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M13.8795 7.82083L12.6661 6.82312V4.83311C12.6661 4.7889 12.6486 4.74651 12.6173 4.71525C12.5861 4.684 12.5437 4.66644 12.4995 4.66644H11.8328C11.7892 4.66671 11.7474 4.68404 11.7165 4.71473C11.6855 4.74542 11.6678 4.78702 11.6672 4.83061V6.00186L8.74673 3.60393C8.5369 3.42922 8.27248 3.33356 7.99944 3.33356C7.72639 3.33356 7.46198 3.42922 7.25214 3.60393L2.1194 7.82083C2.08583 7.84893 2.05812 7.88336 2.03786 7.92217C2.01759 7.96097 2.00517 8.00339 2.0013 8.047C1.99744 8.0906 2.00219 8.13454 2.01531 8.17631C2.02842 8.21808 2.04963 8.25685 2.07773 8.29042L2.29107 8.54667C2.3478 8.61441 2.42912 8.65685 2.51713 8.66466C2.60515 8.67248 2.69266 8.64502 2.76045 8.58834L3.33274 8.11833V11.9998C3.33324 12.1765 3.40363 12.3458 3.52855 12.4707C3.65347 12.5956 3.82275 12.666 3.99941 12.6665H6.66609C6.84275 12.666 7.01204 12.5956 7.13696 12.4707C7.26187 12.3458 7.33227 12.1765 7.33277 11.9998V9.83314H8.66611V11.9998C8.6666 12.1765 8.737 12.3458 8.86192 12.4707C8.98683 12.5956 9.15612 12.666 9.33278 12.6665H11.9995C12.1753 12.6661 12.3439 12.5964 12.4687 12.4726C12.5935 12.3487 12.6644 12.1806 12.6661 12.0048V8.11792L13.2397 8.58917C13.3075 8.64586 13.395 8.67331 13.483 8.6655C13.571 8.65768 13.6523 8.61524 13.7091 8.5475L13.9222 8.29146C13.9504 8.2578 13.9717 8.2189 13.9848 8.17699C13.9979 8.13509 14.0026 8.091 13.9986 8.04727C13.9947 8.00354 13.9821 7.96102 13.9616 7.92216C13.9412 7.8833 13.9133 7.84887 13.8795 7.82083V7.82083ZM11.663 11.6665H9.66611V9.4998C9.66562 9.32314 9.59522 9.15386 9.4703 9.02894C9.34539 8.90402 9.1761 8.83363 8.99944 8.83313H6.99943C6.82277 8.83363 6.65349 8.90402 6.52857 9.02894C6.40365 9.15386 6.33325 9.32314 6.33276 9.4998V11.6665H4.33275V7.29708L7.99944 4.28414L11.6661 7.29583L11.663 11.6665Z\"\n                        />\n                    </svg>\n                    <p>Dashboard</p>\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M13.4375 4.25H11.1875C10.877 4.25 10.625 4.50172 10.625 4.8125V7.0625C10.625 7.37305 10.877 7.625 11.1875 7.625H13.4375C13.748 7.625 14 7.37305 14 7.0625V4.8125C14 4.50172 13.748 4.25 13.4375 4.25ZM12.875 6.5H11.75V5.375H12.875V6.5ZM13.4375 8.375H11.1875C10.877 8.375 10.625 8.62672 10.625 8.9375V11.1875C10.625 11.498 10.877 11.75 11.1875 11.75H13.4375C13.748 11.75 14 11.498 14 11.1875V8.9375C14 8.62672 13.748 8.375 13.4375 8.375ZM12.875 10.625H11.75V9.5H12.875V10.625ZM4.8125 4.25H2.5625C2.25195 4.25 2 4.50172 2 4.8125V7.0625C2 7.37305 2.25195 7.625 2.5625 7.625H4.8125C5.12305 7.625 5.375 7.37305 5.375 7.0625V4.8125C5.375 4.50172 5.12305 4.25 4.8125 4.25ZM4.25 6.5H3.125V5.375H4.25V6.5ZM4.8125 8.375H2.5625C2.25195 8.375 2 8.62672 2 8.9375V11.1875C2 11.498 2.25195 11.75 2.5625 11.75H4.8125C5.12305 11.75 5.375 11.498 5.375 11.1875V8.9375C5.375 8.62672 5.12305 8.375 4.8125 8.375ZM4.25 10.625H3.125V9.5H4.25V10.625ZM9.125 4.25H6.875C6.56445 4.25 6.3125 4.50172 6.3125 4.8125V7.0625C6.3125 7.37305 6.56445 7.625 6.875 7.625H9.125C9.43555 7.625 9.6875 7.37305 9.6875 7.0625V4.8125C9.6875 4.50172 9.43555 4.25 9.125 4.25ZM8.5625 6.5H7.4375V5.375H8.5625V6.5ZM9.125 8.375H6.875C6.56445 8.375 6.3125 8.62672 6.3125 8.9375V11.1875C6.3125 11.498 6.56445 11.75 6.875 11.75H9.125C9.43555 11.75 9.6875 11.498 9.6875 11.1875V8.9375C9.6875 8.62672 9.43555 8.375 9.125 8.375ZM8.5625 10.625H7.4375V9.5H8.5625V10.625Z\"\n                        />\n                    </svg>\n\n                    <p>Classes</p>\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\" class=\"active\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M8 2C5.51335 2 3.5 4.01595 3.5 6.5C3.5 8.16681 4.06229 8.68768 7.04542 13.4709C7.48569 14.1768 8.51481 14.176 8.95457 13.4709C11.9393 8.68518 12.5 8.16648 12.5 6.5C12.5 4.01335 10.4841 2 8 2ZM8 12.875C5.0135 8.08639 4.625 7.7841 4.625 6.5C4.625 4.63604 6.13604 3.125 8 3.125C9.86396 3.125 11.375 4.63604 11.375 6.5C11.375 7.77859 11.0196 8.0334 8 12.875ZM6.125 6.5C6.125 5.46446 6.96446 4.625 8 4.625C9.03554 4.625 9.875 5.46446 9.875 6.5C9.875 7.53554 9.03554 8.375 8 8.375C6.96446 8.375 6.125 7.53554 6.125 6.5Z\"\n                        />\n                    </svg>\n\n                    <p>Locations</p>\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M12.125 3.5H11V2.28125C11 2.12656 10.8734 2 10.7188 2H9.78125C9.62656 2 9.5 2.12656 9.5 2.28125V3.5H6.5V2.28125C6.5 2.12656 6.37344 2 6.21875 2H5.28125C5.12656 2 5 2.12656 5 2.28125V3.5H3.875C3.25391 3.5 2.75 4.00391 2.75 4.625V12.875C2.75 13.4961 3.25391 14 3.875 14H12.125C12.7461 14 13.25 13.4961 13.25 12.875V4.625C13.25 4.00391 12.7461 3.5 12.125 3.5ZM11.9844 12.875H4.01562C3.93828 12.875 3.875 12.8117 3.875 12.7344V5.75H12.125V12.7344C12.125 12.8117 12.0617 12.875 11.9844 12.875Z\"\n                        />\n                    </svg>\n\n                    <p>Schedule</p>\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M11.3 10.25H11.825C11.975 10.25 12.125 10.1 12.125 9.95V4.55C12.125 4.4 11.975 4.25 11.825 4.25H11.3C11.15 4.25 11 4.4 11 4.55V9.95C11 10.1 11.15 10.25 11.3 10.25ZM6.8 10.25H7.325C7.475 10.25 7.625 10.1 7.625 9.95V5.3C7.625 5.15 7.475 5 7.325 5H6.8C6.65 5 6.5 5.15 6.5 5.3V9.95C6.5 10.1 6.65 10.25 6.8 10.25ZM9.05 10.25H9.575C9.725 10.25 9.875 10.1 9.875 9.95V6.8C9.875 6.65 9.725 6.5 9.575 6.5H9.05C8.9 6.5 8.75 6.65 8.75 6.8V9.95C8.75 10.1 8.9 10.25 9.05 10.25ZM13.625 11.375H3.125V3.875C3.125 3.66781 2.95719 3.5 2.75 3.5H2.375C2.16781 3.5 2 3.66781 2 3.875V11.75C2 12.1641 2.33586 12.5 2.75 12.5H13.625C13.8322 12.5 14 12.3322 14 12.125V11.75C14 11.5428 13.8322 11.375 13.625 11.375ZM4.55 10.25H5.075C5.225 10.25 5.375 10.1 5.375 9.95V8.3C5.375 8.15 5.225 8 5.075 8H4.55C4.4 8 4.25 8.15 4.25 8.3V9.95C4.25 10.1 4.4 10.25 4.55 10.25Z\"\n                        />\n                    </svg>\n                    <p>Reports</p>\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <svg\n                        slot=\"icon\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path\n                            d=\"M10.6667 5.33329C10.4825 5.33329 10.3333 5.48246 10.3333 5.66663C10.3333 5.85079 10.4825 5.99996 10.6667 5.99996C10.8508 5.99996 11 5.85079 11 5.66663C11 5.48246 10.8508 5.33329 10.6667 5.33329ZM13.4069 2.75308C13.2789 2.69608 13.1403 2.66662 13.0002 2.66663C12.7577 2.66663 12.5183 2.75475 12.331 2.92329L11.5052 3.66663H11.1617L10.3358 2.92329C10.1921 2.79401 10.014 2.70913 9.82301 2.67892C9.63205 2.64872 9.43642 2.67447 9.25979 2.75308C8.89917 2.91392 8.66667 3.27163 8.66667 3.66663V5.99996C8.66667 6.08829 8.68438 6.17163 8.69271 6.25788L7.71354 6.40621C6.30771 6.61933 5.11729 7.37288 4.33333 8.43788V6.49996C4.33333 5.48892 3.51104 4.66663 2.5 4.66663C2.22396 4.66663 2 4.89058 2 5.16663C2 5.44725 2.23167 5.67433 2.51417 5.66642C2.97958 5.6535 3.33333 6.09517 3.33333 6.56079V10.9854C3.33333 12.5148 4.15417 13.3333 5.16667 13.3333H9C9.18417 13.3333 9.33333 13.1841 9.33333 13C9.33333 12.6318 9.03479 12.3333 8.66667 12.3333H8.33042C8.32812 12.1798 8.31417 12.0285 8.29188 11.8789L10 10.8739V12.6666C10 13.0348 10.2985 13.3333 10.6667 13.3333H12C12.3681 13.3333 12.6667 13.0348 12.6667 12.6666V8.29579C13.4598 7.83329 14 6.98267 14 6.00017V3.66663C14 3.27183 13.7675 2.91392 13.4069 2.75308ZM11.6667 12.3333H11V10.2912C11 10.0527 10.8717 9.831 10.6648 9.71267C10.4583 9.59413 10.2019 9.59558 9.99563 9.71663L7.98833 10.8975C7.73667 10.377 7.35854 9.92079 6.87479 9.58267C6.71813 9.47308 6.49833 9.53663 6.40542 9.70371L6.25042 9.98267C6.16771 10.1316 6.19729 10.3262 6.33521 10.4262C6.94396 10.8673 7.31167 11.5729 7.3275 12.3333H5.16667C4.70708 12.3333 4.33333 11.9595 4.33333 11.5C4.33333 9.43163 5.81771 7.70496 7.86333 7.39517L8.97938 7.226C9.425 8.07788 10.3073 8.66663 11.3333 8.66663C11.4475 8.66663 11.5563 8.64683 11.6667 8.63288V12.3333ZM13 5.99996C13 6.92038 12.2537 7.66663 11.3333 7.66663C10.4129 7.66663 9.66667 6.92038 9.66667 5.99996V3.66663L10.7777 4.66663H11.8888L13 3.66663V5.99996ZM11.6667 5.66663C11.6667 5.85079 11.8158 5.99996 12 5.99996C12.1842 5.99996 12.3333 5.85079 12.3333 5.66663C12.3333 5.48246 12.1842 5.33329 12 5.33329C11.8158 5.33329 11.6667 5.48246 11.6667 5.66663Z\"\n                        />\n                    </svg>\n\n                    <p>Cats</p>\n                </a>\n            </li>\n        </ul>\n    </nav>\n    <footer aria-label=\"Sidebar Header\">\n        <ul>\n            <div class=\"xpl-nav-item\">\n                <a slot=\"link\" href=\"javascript:;\">\n                    <xpl-avatar name=\"Jean-Luc Picard\">JP</xpl-avatar>\n                    <div>\n                        <p>Jean-Luc Picard</p>\n                        <p>jlp@enterprise.space</p>\n                    </div>\n                </a>\n            </div>\n        </ul>\n    </footer>\n</div>\n\n`;\n\nMainNav.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: MainNav,\n    },\n    html: {\n        render: HtmlMainNav,\n    },\n};\n\nMainNav.args = {\n    width: 'default',\n};\n"]}

package/dist/stories/pagination.stories.js

@@ -82,3 +82,4 @@ export const NumberedPaging = ({ currentPage }) => {
     </div>`;
 };
 */
+//# sourceMappingURL=pagination.stories.js.map

package/dist/stories/pagination.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../src/stories/pagination.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFE","sourcesContent":["/* export default {\n  title: \"Components/Pagination\",\n  argTypes: {\n    currentPage: {\n      name: \"Current Page\",\n      defaultValue: 1,\n      control: {\n        type: \"number\",\n        min: 1,\n        max: 10,\n      },\n    },\n  },\n};\n\nexport const NumberedPaging = ({ currentPage }) => {\n  let showing = [];\n  switch (currentPage) {\n    case 1:\n    case 2:\n    case 3:\n    case 8:\n    case 9:\n    case 10:\n      showing = [1, 2, 3, \"...\", 8, 9, 10];\n      break;\n    case 4:\n      showing = [1, \"...\", 3, 4, 5, \"...\", 10];\n      break;\n    case 5:\n      showing = [1, \"...\", 4, 5, 6, \"...\", 10];\n      break;\n    case 6:\n      showing = [1, \"...\", 5, 6, 7, \"...\", 10];\n      break;\n    case 7:\n      showing = [1, \"...\", 6, 7, 8, \"...\", 10];\n      break;\n  }\n\n  const innerMarkup = showing\n    .map((n) => {\n      if (n === \"...\")\n        return `<span class=\"xpl-pagination-ellipsis\">...</span>`;\n      const attrs =\n        n === currentPage\n          ? ' aria-current=\"page\" class=\"xpl-pagination-current\"'\n          : \"\";\n      return `<a href=\"#\"${attrs}>${n}</a>`;\n    })\n    .join(\"\\n\");\n\n  return `<div class=\"xpl-pagination\">\n      <div>\n        <p>\n          Showing\n          <span>1</span>\n          to\n          <span>10</span>\n          of\n          <span>97</span>\n          results\n        </p>\n      </div>\n      <div>\n        <nav aria-label=\"Pagination\">\n          <a href=\"#\" class=\"xpl-pagination-prev\">\n            <span>Previous</span>\n            <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n            </svg>\n          </a>\n          ${innerMarkup}\n          <a href=\"#\" class=\"xpl-pagination-next\">\n            <span>Next</span>\n            <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\n            </svg>\n          </a>\n        </nav>\n      </div>\n    </div>`;\n};\n*/\n"]}

package/dist/stories/radio.stories.js

@@ -66,3 +66,4 @@ Radio.args = {
   disabled: false,
   styled: false,
 };
+//# sourceMappingURL=radio.stories.js.map

package/dist/stories/radio.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../src/stories/radio.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,KAAK,EAAE,kBAAkB;EACzB,QAAQ,EAAE;IACN,KAAK,EAAE;MACH,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC3C;IACD,WAAW,EAAE;MACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;KAC5C;IACD,OAAO,EAAE;MACL,OAAO,EAAE;QACL,IAAI,EAAE,SAAS;OAClB;KACJ;IACD,QAAQ,EAAE;MACN,OAAO,EAAE;QACL,IAAI,EAAE,SAAS;OAClB;KACJ;IACD,MAAM,EAAE;MACJ,OAAO,EAAE;QACL,IAAI,EAAE,SAAS;OAClB;KACJ;GACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;EACvE,IAAI,KAAK,GAAG,EAAE,CAAC;EACf,IAAI,WAAW;IAAE,KAAK,IAAI,iBAAiB,WAAW,GAAG,CAAC;EAC1D,IAAI,OAAO;IAAE,KAAK,IAAI,UAAU,CAAC;EACjC,IAAI,QAAQ;IAAE,KAAK,IAAI,WAAW,CAAC;EACnC,IAAI,MAAM;IAAE,KAAK,IAAI,SAAS,CAAC;EAC/B,OAAO,aAAa,KAAK,IAAI,KAAK,cAAc,CAAC;AACrD,CAAC,CAAC;AAEF,KAAK,CAAC,UAAU,GAAG;EACf,MAAM,EAAE,UAAU;EAClB,eAAe,EAAE;IACb,MAAM,EAAE,KAAK;GAChB;EACD,IAAI,EAAE;IACF,MAAM,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;MACpD,IAAI,KAAK,GAAG,EAAE,CAAC;MACf,IAAI,OAAO;QAAE,KAAK,IAAI,UAAU,CAAC;MACjC,IAAI,QAAQ;QAAE,KAAK,IAAI,WAAW,CAAC;MACnC,OAAO,2CACH,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EACzB,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;mDACS,KAAK;6BAEhD,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EACxC,cAAc,KAAK,GACP,WAAW;QACP,CAAC,CAAC;uCAEV,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAC9C,KAAK,WAAW;KACnB;QACe,CAAC,CAAC,EACV;OACL,CAAC;IACA,CAAC;GACJ;CACJ,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG;EACT,KAAK,EAAE,cAAc;EACrB,WAAW,EAAE,EAAE;EACf,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,KAAK;CAChB,CAAC","sourcesContent":["export default {\n    title: 'Components/Radio',\n    argTypes: {\n        label: {\n            type: { name: 'string', required: true },\n        },\n        description: {\n            type: { name: 'string', required: false },\n        },\n        checked: {\n            control: {\n                type: 'boolean',\n            },\n        },\n        disabled: {\n            control: {\n                type: 'boolean',\n            },\n        },\n        styled: {\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\nexport const Radio = ({ label, description, checked, disabled, styled }) => {\n    let attrs = '';\n    if (description) attrs += ` description=\"${description}\"`;\n    if (checked) attrs += ` checked`;\n    if (disabled) attrs += ` disabled`;\n    if (styled) attrs += ` styled`;\n    return `<xpl-radio${attrs}>${label}</xpl-radio>`;\n};\n\nRadio.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Radio,\n    },\n    html: {\n        render({ label, description, checked, disabled, styled }) {\n            let attrs = '';\n            if (checked) attrs += ` checked`;\n            if (disabled) attrs += ` disabled`;\n            return `<div class=\"xpl-checkbox-radio-container${\n                styled ? ' styled' : ''\n            }${disabled ? ' disabled' : ''}\">\n    <input class=\"xpl-radio\" id=\"id\" type=\"radio\"${attrs}></input>\n    <label class=\"xpl-label${\n        disabled ? ' xpl-label--disabled' : ''\n    }\" for=\"id\">${label}${\n                description\n                    ? `\n        <small class=\"xpl-description${\n            disabled ? ' xpl-description--disabled' : ''\n        }\">${description}</small>\n    `\n                    : ''\n            }</label>\n</div>`;\n        },\n    },\n};\n\nRadio.args = {\n    label: 'Radio Button',\n    description: '',\n    checked: false,\n    disabled: false,\n    styled: false,\n};\n"]}

package/dist/stories/secondary-nav.stories.js

@@ -74,3 +74,4 @@ SecondaryNav.parameters = {
     render: HtmlSecondaryNav,
   },
 };
+//# sourceMappingURL=secondary-nav.stories.js.map

package/dist/stories/secondary-nav.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary-nav.stories.js","sourceRoot":"","sources":["../../src/stories/secondary-nav.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,KAAK,EAAE,qCAAqC;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BnC,CAAC;AAER,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BhC,CAAC;AAER,YAAY,CAAC,UAAU,GAAG;EACtB,MAAM,EAAE,YAAY;EACpB,eAAe,EAAE;IACb,MAAM,EAAE,YAAY;GACvB;EACD,IAAI,EAAE;IACF,MAAM,EAAE,gBAAgB;GAC3B;CACJ,CAAC","sourcesContent":["export default {\n    title: 'Components/Navigation/Secondary Nav',\n};\n\nexport const SecondaryNav = (): string => `\n<div class=\"secondary-nav-storybook-container\">\n    <xpl-secondary-nav>\n        <ul>\n            <xpl-nav-item>\n                <a href=\"javascript:;\">\n                    Dashboard\n                </a>\n            </xpl-nav-item>\n            <xpl-nav-item>\n                <a href=\"javascript:;\">\n                    Board\n                </a>\n            </xpl-nav-item>\n            <xpl-nav-item>\n                <a href=\"javascript:;\">\n                    Dash\n                </a>\n            </xpl-nav-item>\n            <xpl-nav-item>\n                <a href=\"javascript:;\">\n                    Dboard\n                </a>\n            </xpl-nav-item>\n            <xpl-nav-item>\n                <a href=\"javascript:;\">\n                    Dashboard Board\n                </a>\n            </xpl-nav-item>\n        </ul>\n    </xpl-secondary-nav>\n</div>`;\n\nconst HtmlSecondaryNav = (): string => `\n<div class=\"xpl-secondary-nav\">\n    <nav aria-label=\"Secondary Nav\">\n        <ul>\n            <li class=\"xpl-nav-item\">\n                <a href=\"javascript:;\">\n                    Dashboard\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a href=\"javascript:;\">\n                    Board\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a href=\"javascript:;\">\n                    Dash\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a href=\"javascript:;\">\n                    Dboard\n                </a>\n            </li>\n            <li class=\"xpl-nav-item\">\n                <a href=\"javascript:;\">\n                    Dashboard Board\n                </a>\n            </li>\n        </ul>\n    </nav>\n</div>`;\n\nSecondaryNav.parameters = {\n    layout: 'fullscreen',\n    'web-component': {\n        render: SecondaryNav,\n    },\n    html: {\n        render: HtmlSecondaryNav,\n    },\n};\n"]}

package/dist/stories/select.stories.js

@@ -34,43 +34,43 @@ export default {
     },
   },
 };
-const choices = [
-  {
-    groupName: 'Group 1',
-    options: [
-      {
-        label: 'Choice 1',
-      },
-      {
-        label: 'Choice 2',
-      },
-      {
-        label: 'Choice 3',
-      },
-    ],
-  },
-  {
-    groupName: 'Group 2',
-    options: [
-      {
-        label: 'Choice 4',
-      },
-      {
-        label: 'Choice 5',
-      },
-      {
-        label: 'Choice 6',
-      },
-    ],
-  },
-];
-const script = ({ id }) => `
+const script = (choices, { id }) => `
     (function() {
         const select = document.getElementById("${id}");
         select.choices = ${JSON.stringify(choices)};
     })();
 `;
 export const Select = ({ label, description, disabled, error, errorMessage, mode, truncate, }) => {
+  const choices = [
+    {
+      groupName: 'Group 1',
+      options: [
+        {
+          label: 'Choice 1',
+        },
+        {
+          label: 'Choice 2',
+        },
+        {
+          label: 'Choice 3',
+        },
+      ],
+    },
+    {
+      groupName: 'Group 2',
+      options: [
+        {
+          label: 'Choice 4',
+        },
+        {
+          label: 'Choice 5',
+        },
+        {
+          label: 'Choice 6',
+        },
+      ],
+    },
+  ];
   const id = uuid();
   let attrs = ` id=${id}`;
   if (label)
@@ -92,7 +92,7 @@ export const Select = ({ label, description, disabled, error, errorMessage, mode
                 </xpl-select>
             <div>
         <div>
-    <script>${script({ id })}</script>`;
+    <script>${script(choices, { id })}</script>`;
 };
 Select.parameters = {
   layout: 'centered',
@@ -117,3 +117,80 @@ Select.args = {
   mode: 'single',
   truncate: true,
 };
+export const SelectWValues = ({ label, description, disabled, error, errorMessage, mode, truncate, }) => {
+  const choices = [
+    {
+      label: 'Choice 1',
+      value: 'choice-1',
+    },
+    {
+      label: 'Choice 2',
+      value: 'choice-2',
+    },
+    {
+      label: 'Choice 3',
+      value: 'choice-3',
+    },
+    {
+      label: 'Choice 4',
+      value: 'choice-4',
+    },
+    {
+      label: 'Choice 5',
+      value: 'choice-5',
+    },
+    {
+      label: 'Choice 6',
+      value: 'choice-6',
+    },
+  ];
+  const id = uuid();
+  let attrs = ` id=${id}`;
+  if (label)
+    attrs += ` label="${label}"`;
+  if (description)
+    attrs += ` description="${description}"`;
+  if (mode !== 'single')
+    attrs += ` mode="${mode}"`;
+  if (disabled)
+    attrs += ` disabled`;
+  if (error)
+    attrs += ` error${errorMessage ? '="' + errorMessage + '"' : ''}`;
+  if (mode === 'multi' && !truncate)
+    attrs += ` truncate="false"`;
+  return `
+        <div style="width:75vw">
+            <div style="position: relative; min-width: 200px; width: 100%">
+                <xpl-select${attrs} placeholder="Choose ${mode === 'multi' ? 'Multiple' : 'One'}">
+                </xpl-select>
+            <div>
+        <div>
+    <script>${script(choices, { id })}</script>`;
+};
+SelectWValues.parameters = {
+  layout: 'centered',
+  'web-component': {
+    render: Select,
+  },
+  html: {
+    render() {
+      // let className = "xpl-badge";
+      // if (dot) className += " xpl-badge--dot";
+      // if (variant !== "default") className += " xpl-badge--" + variant;
+      // return `<div class="${className}">${text}</div>`;
+    },
+  },
+  actions: {
+    handles: ['selectChange'],
+  },
+};
+SelectWValues.args = {
+  label: 'Select',
+  description: 'Lorem ipsum dolor sit amet',
+  disabled: false,
+  error: false,
+  errorMessage: '',
+  mode: 'single',
+  truncate: true,
+};
+//# sourceMappingURL=select.stories.js.map