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

package/dist/stories/select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../src/stories/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\n\nexport default {\n    title: 'Components/Select',\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        mode: {\n            options: ['single', 'multi'],\n            control: {\n                type: 'select',\n            },\n        },\n        truncate: {\n            type: {\n                name: 'boolean',\n            },\n        },\n    },\n};\n\nconst script = (choices, { id }) => `\n    (function() {\n        const select = document.getElementById(\"${id}\");\n        select.choices = ${JSON.stringify(choices)};\n    })();\n`;\n\nexport const Select = ({\n    label,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    mode,\n    truncate,\n}) => {\n    const choices = [\n        {\n            groupName: 'Group 1',\n            options: [\n                {\n                    label: 'Choice 1',\n                },\n                {\n                    label: 'Choice 2',\n                },\n                {\n                    label: 'Choice 3',\n                },\n            ],\n        },\n        {\n            groupName: 'Group 2',\n            options: [\n                {\n                    label: 'Choice 4',\n                },\n                {\n                    label: 'Choice 5',\n                },\n                {\n                    label: 'Choice 6',\n                },\n            ],\n        },\n    ];\n    const id = uuid();\n    let attrs = ` id=${id}`;\n    if (label) attrs += ` label=\"${label}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (mode !== 'single') attrs += ` mode=\"${mode}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (mode === 'multi' && !truncate) attrs += ` truncate=\"false\"`;\n    return `\n        <div style=\"width:75vw\">\n            <div style=\"position: relative; min-width: 200px; width: 100%\">\n                <xpl-select${attrs} placeholder=\"Choose ${\n        mode === 'multi' ? 'Multiple' : 'One'\n    }\">\n                </xpl-select>\n            <div>\n        <div>\n    <script>${script(choices, { id })}</script>`;\n};\n\nSelect.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Select,\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\nSelect.args = {\n    label: 'Select',\n    description: 'Lorem ipsum dolor sit amet',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n    mode: 'single',\n    truncate: true,\n};\n\nexport const SelectWValues = ({\n    label,\n    description,\n    disabled,\n    error,\n    errorMessage,\n    mode,\n    truncate,\n}) => {\n    const choices = [\n        {\n            label: 'Choice 1',\n            value: 'choice-1',\n        },\n        {\n            label: 'Choice 2',\n            value: 'choice-2',\n        },\n        {\n            label: 'Choice 3',\n            value: 'choice-3',\n        },\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    const id = uuid();\n    let attrs = ` id=${id}`;\n    if (label) attrs += ` label=\"${label}\"`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (mode !== 'single') attrs += ` mode=\"${mode}\"`;\n    if (disabled) attrs += ` disabled`;\n    if (error)\n        attrs += ` error${errorMessage ? '=\"' + errorMessage + '\"' : ''}`;\n    if (mode === 'multi' && !truncate) attrs += ` truncate=\"false\"`;\n    return `\n        <div style=\"width:75vw\">\n            <div style=\"position: relative; min-width: 200px; width: 100%\">\n                <xpl-select${attrs} placeholder=\"Choose ${\n        mode === 'multi' ? 'Multiple' : 'One'\n    }\">\n                </xpl-select>\n            <div>\n        <div>\n    <script>${script(choices, { id })}</script>`;\n};\n\nSelectWValues.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Select,\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    actions: {\n        handles: ['selectChange'],\n    },\n};\n\nSelectWValues.args = {\n    label: 'Select',\n    description: 'Lorem ipsum dolor sit amet',\n    disabled: false,\n    error: false,\n    errorMessage: '',\n    mode: 'single',\n    truncate: true,\n};\n"]}

package/dist/stories/table.stories.js

@@ -105,3 +105,4 @@ Table.args = {
   multiselect: false,
   striped: false,
 };
+//# sourceMappingURL=table.stories.js.map

package/dist/stories/table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../src/stories/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuid } from 'uuid';\n\nexport default {\n    title: 'Components/Table',\n    argTypes: {\n        freeze: { control: { type: 'boolean' } },\n        multiselect: { control: { type: 'boolean' } },\n        striped: { control: { type: 'boolean' } },\n    },\n};\n\nconst columns = [\n    'Name',\n    'Total Days Played',\n    'Average Days Played',\n    'Seasons',\n    'Individual Immunity Wins',\n    'Votes Against',\n];\nconst data = [\n    ['Boston Rob Mariano', '152', '30.4', 'S4, S8, S20, S22, S40', '9', '24'],\n    ['Parvati Shallow', '149', '37.25', 'S13, S16, S20', '4', '17'],\n    ['Ozzy Lusth', '128', '32.0', 'S13, S16, S23, S34', '7', '34'],\n    ['Cirie Fields', '121', '30.25', 'S12, S16, S20, S34', '2', '9'],\n    ['Tyson Apostol', '116.5', '29.1', 'S18, S20, S27, S40', '4', '22'],\n];\n\nconst script = ({ id }) => `\n    (function() {\n        const table = document.getElementById(\"${id}\");\n        table.columns = ${JSON.stringify(columns)};\n        table.data = ${JSON.stringify(data)};\n    })();\n`;\n\nexport const Table = ({ freeze, multiselect, striped }) => {\n    const id = uuid();\n    let attrs = '';\n    if (freeze) attrs += ' freeze';\n    if (multiselect) attrs += ' multiselect';\n    if (striped) attrs += ' striped';\n    return `<div style=\"max-width: 600px;\"><xpl-table id=\"${id}\"${attrs}></xpl-table></div><script>${script(\n        {\n            id,\n        }\n    )}</script>`;\n};\n\nTable.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render({ freeze, multiselect, striped }) {\n            let attrs = '';\n            if (freeze) attrs += ' freeze';\n            if (multiselect) attrs += ' multiselect';\n            if (striped) attrs += ' striped';\n            return [\n                `<xpl-table${attrs}></xpl-table>`,\n                `table.columns = [\n                    \"Name\", \"Total Days Played\", ...\n                ];`,\n                `table.data = [\n                    [\"Boston Rob Mariano\", ...],\n                    [\"Parvati Shallow\", ...],\n                    ...\n                ];`,\n            ];\n        },\n    },\n    html: {\n        render({ freeze, striped }) {\n            let className = 'xpl-table';\n            if (striped) className += ' xpl-table--striped';\n            if (freeze) className += ' xpl-table--freeze';\n            return [\n                `WARNING: For \\`multiselect\\` tables, there is JS interactivity that is provided only by the web component. The code shown below does not reflect the additional \\`multiselect\\` table markup and interactivity.`,\n                `<div class=\"xpl-table-container\">\n                    <table class=\"${className}\">\n                        <thead>\n                            <th>Name</th>\n                            <th>Total Days Played</th>\n                            ...\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Boston Rob Mariano</td>\n                                <td>152</td>\n                                ...\n                            </tr>\n                            <tr>\n                                <td>Parvati Shallow</td>\n                                <td>149</td>\n                                ...\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>`,\n            ];\n        },\n    },\n};\n\nTable.args = {\n    freeze: true,\n    multiselect: false,\n    striped: false,\n};\n"]}

package/dist/stories/tabs.stories.js

@@ -22,3 +22,4 @@ export const Tabs = () =>
     </nav>
   </div>`;
 */
+//# sourceMappingURL=tabs.stories.js.map

package/dist/stories/tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../src/stories/tabs.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE","sourcesContent":["/* export default {\n  title: \"Components/Tabs\",\n};\n\nexport const Tabs = () =>\n  `<div class=\"xpl-tabs\">\n    <nav aria-label=\"Tabs\">\n      <a href=\"#\" class=\"current\" aria-current=\"page\">\n        Applied\n        <span>52</span>\n      </a>\n      <a href=\"#\">\n        Phone Screening\n        <span>6</span>\n      </a>\n      <a href=\"#\">\n        Interview\n        <span>4</span>\n      </a>\n      <a href=\"#\">Offer</a>\n      <a href=\"#\">Disqualified</a>\n    </nav>\n  </div>`;\n*/\n"]}

package/dist/stories/toggle.stories.js

@@ -82,3 +82,4 @@ Toggle.args = {
   description: 'Lorem ipsum dolor sit amet',
   disabled: false,
 };
+//# sourceMappingURL=toggle.stories.js.map

package/dist/stories/toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../src/stories/toggle.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,KAAK,EAAE,mBAAmB;EAC1B,QAAQ,EAAE;IACN,OAAO,EAAE;MACL,OAAO,EAAE;QACL,IAAI,EAAE,SAAS;OAClB;KACJ;IACD,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;MAC7B,OAAO,EAAE;QACL,IAAI,EAAE,QAAQ;OACjB;KACJ;IACD,OAAO,EAAE;MACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC3C;IACD,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,QAAQ,EAAE;MACN,OAAO,EAAE;QACL,IAAI,EAAE,SAAS;OAClB;KACJ;GACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACnB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAO,GACV,EAAE,EAAE;EACD,IAAI,KAAK,GAAG,EAAE,CAAC;EACf,IAAI,OAAO;IAAE,KAAK,IAAI,UAAU,CAAC;EACjC,IAAI,WAAW;IAAE,KAAK,IAAI,iBAAiB,WAAW,GAAG,CAAC;EAC1D,IAAI,OAAO;IAAE,KAAK,IAAI,aAAa,OAAO,GAAG,CAAC;EAC9C,IAAI,KAAK;IAAE,KAAK,IAAI,WAAW,KAAK,GAAG,CAAC;EACxC,IAAI,OAAO,KAAK,OAAO;IAAE,KAAK,IAAI,kBAAkB,CAAC;EACrD,IAAI,QAAQ;IAAE,KAAK,IAAI,WAAW,CAAC;EACnC,OAAO,cAAc,KAAK,gBAAgB,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,UAAU,GAAG;EAChB,MAAM,EAAE,UAAU;EAClB,eAAe,EAAE;IACb,MAAM,EAAE,MAAM;GACjB;EACD,IAAI,EAAE;IACF,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE;MAC9D,IAAI,KAAK,GAAG,EAAE,CAAC;MACf,IAAI,QAAQ;QAAE,KAAK,IAAI,WAAW,CAAC;MACnC,IAAI,OAAO;QAAE,KAAK,IAAI,UAAU,CAAC;MACjC,IAAI,SAAS,GAAG,YAAY,CAAC;MAC7B,IAAI,OAAO,KAAK,OAAO;QAAE,SAAS,IAAI,oBAAoB,CAAC;MAC3D,OAAO,qCACH,OAAO,IAAI,WAAW;QAClB,CAAC,CAAC;;UAEZ,OAAO,GACS,WAAW;UACP,CAAC,CAAC;iBACf,WAAW,UAAU;UACR,CAAC,CAAC,EACV;aACT;QACO,CAAC,CAAC,EACV;oBACQ,SAAS,4BAA4B,KAAK;sBACxC,KAAK;OACpB,CAAC;IACA,CAAC;GACJ;CACJ,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG;EACV,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,gBAAgB;EACzB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,4BAA4B;EACzC,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["export default {\n    title: 'Components/Toggle',\n    argTypes: {\n        checked: {\n            control: {\n                type: 'boolean',\n            },\n        },\n        variant: {\n            options: ['default', 'small'],\n            control: {\n                type: 'select',\n            },\n        },\n        heading: {\n            type: { name: 'string', required: true },\n        },\n        label: {\n            type: { name: 'string', required: true },\n        },\n        description: {\n            type: { name: 'string', required: false },\n        },\n        disabled: {\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\nexport const Toggle = ({\n    checked,\n    description,\n    disabled,\n    label,\n    heading,\n    variant,\n}) => {\n    let attrs = '';\n    if (checked) attrs += ` checked`;\n    if (description) attrs += ` description=\"${description}\"`;\n    if (heading) attrs += ` heading=\"${heading}\"`;\n    if (label) attrs += ` label=\"${label}\"`;\n    if (variant === 'small') attrs += ' variant=\"small\"';\n    if (disabled) attrs += ` disabled`;\n    return `<xpl-toggle${attrs}></xpl-toggle>`;\n};\n\nToggle.parameters = {\n    layout: 'centered',\n    'web-component': {\n        render: Toggle,\n    },\n    html: {\n        render({ label, heading, checked, description, disabled, variant }) {\n            let attrs = '';\n            if (disabled) attrs += ` disabled`;\n            if (checked) attrs += ` checked`;\n            let className = 'xpl-toggle';\n            if (variant === 'small') className += ' xpl-toggle--small';\n            return `<div class=\"xpl-toggle-container\">${\n                heading || description\n                    ? `\n    <label for=\"id\">\n        ${heading}${\n                          description\n                              ? `\n        <small>${description}</small>`\n                              : ''\n                      }\n    </label>`\n                    : ''\n            }\n    <input class=\"${className}\" id=\"id\" type=\"checkbox\"${attrs}></input>\n    <label for=\"id\">${label}</label>\n</div>`;\n        },\n    },\n};\n\nToggle.args = {\n    checked: false,\n    heading: 'Toggle Heading',\n    label: 'Label',\n    variant: 'default',\n    description: 'Lorem ipsum dolor sit amet',\n    disabled: false,\n};\n"]}

package/dist/stories/utility-bar.stories.js

@@ -92,3 +92,4 @@ UtilityBarDesktop.args = {
 UtilityBarDesktop.parameters = Object.assign({}, globalParams);
 UtilityBarDesktop.storyName = 'Desktop';
 // END: Story for Utility Bar on Desktop
+//# sourceMappingURL=utility-bar.stories.js.map

package/dist/stories/utility-bar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-bar.stories.js","sourceRoot":"","sources":["../../src/stories/utility-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACX,KAAK,EAAE,mCAAmC;EAC1C,QAAQ,EAAE;IACN,QAAQ,EAAE;MACN,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;KAC5C;IACD,SAAS,EAAE;MACP,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;KAC5C;GACJ;CACJ,CAAC;AAOF,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAmB,EAAU,EAAE,CAAC;;;;kBAIlD,QAAQ;;;kBAGR,SAAS;;;;CAI1B,CAAC;AAEF,iKAAiK;AACjK,mGAAmG;AACnG,MAAM,IAAI,GAAG;;CAEZ,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,IAAI,OAAO,CAAC;AAE7C,MAAM,YAAY,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC;;;;;cAK9B,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;;;;;;;;;;;;CAYpD,CAAC;AAEF,MAAM,YAAY,GAAG;EACjB,MAAM,EAAE,UAAU;EAClB,eAAe,EAAE;IACb,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAmB,EAAU,EAAE,CAAC;;;sBAGhD,QAAQ;;;sBAGR,SAAS;;;SAGtB;GACJ;EACD,IAAI,EAAE;IACF,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAmB,EAAU,EAAE,CAAC;;;sBAGhD,QAAQ;;;sBAGR,SAAS;;;SAGtB;GACJ;CACJ,CAAC;AAEF,yCAAyC;AACzC,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,gBAAgB,CAAC,IAAI,GAAG;EACpB,QAAQ,EAAE,WAAW,EAAE;EACvB,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC;CAChC,CAAC;AAEF,gBAAgB,CAAC,UAAU,mCACpB,YAAY,KACf,QAAQ,EAAE;IACN,eAAe,EAAE,UAAU;GAC9B,GACJ,CAAC;AAEF,gBAAgB,CAAC,SAAS,GAAG,QAAQ,CAAC;AACtC,uCAAuC;AAEvC,0CAA0C;AAC1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,iBAAiB,CAAC,IAAI,GAAG;EACrB,QAAQ,EAAE,WAAW,EAAE;EACvB,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC;CACjC,CAAC;AAEF,iBAAiB,CAAC,UAAU,qBAAQ,YAAY,CAAE,CAAC;AAEnD,iBAAiB,CAAC,SAAS,GAAG,SAAS,CAAC;AACxC,wCAAwC","sourcesContent":["export default {\n    title: 'Components/Navigation/Utility Bar',\n    argTypes: {\n        mainSlot: {\n            type: { name: 'string', required: false },\n        },\n        asideSlot: {\n            type: { name: 'string', required: false },\n        },\n    },\n};\n\ninterface UtilityBarSlots {\n    mainSlot: 'string';\n    asideSlot: 'string';\n}\n\nconst Story = ({ mainSlot, asideSlot }: UtilityBarSlots): string => `\n    <div style=\"width: 85vw;\">\n        <xpl-utility-bar>\n            <ul slot=\"main\">\n                ${mainSlot}\n            </ul>\n            <ul slot=\"aside\">\n                ${asideSlot}\n            </ul>\n        </xpl-utility-bar>\n    </div>\n`;\n\n// This is a temporary hack to include a fontawesome icon as an example in this story. Icons will eventually be their own apollo component (or pure fontawesome).\n// When that happens we should update this story to use the component instead of the following svg.\nconst bars = `\n    <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"bars\" class=\"svg-inline--fa fa-bars fa-w-14\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\"></path></svg>\n`;\n\nconst setMainSlot = () => `<li>${bars}</li>`;\n\nconst setAsideSlot = (isMobile: boolean) => `\n    <li>\n        <xpl-button\n            type=\"submit\"\n            variant=\"outline\"\n            ${isMobile ? 'icon-only' : 'icon-leading'}\n            icon=\"user-circle\"\n            >Find Customer</xpl-button\n        >\n    </li>\n    <li>\n        <xpl-avatar\n            name=\"Jeremy\"\n            src=\"https://pbs.twimg.com/profile_images/1388990311637127168/njwE8QEa_reasonably_small.jpg\"\n            status=\"inactive\"\n        ></xpl-avatar>\n    </li>\n`;\n\nconst globalParams = {\n    layout: 'centered',\n    'web-component': {\n        render: ({ mainSlot, asideSlot }: UtilityBarSlots): string => `\n            <xpl-utility-bar>\n                <ul slot=\"main\">\n                    ${mainSlot}\n                </ul>\n                <ul slot=\"main\">\n                    ${asideSlot}\n                </ul>\n            </xpl-utility-bar>\n        `,\n    },\n    html: {\n        render: ({ mainSlot, asideSlot }: UtilityBarSlots): string => `\n            <nav class=\"xpl-utility-bar\">\n                <ul slot=\"main\">\n                    ${mainSlot}\n                </ul>\n                <ul slot=\"main\">\n                    ${asideSlot}\n                </ul>\n            </nav>\n        `,\n    },\n};\n\n// BEGIN: Story for Utility Bar on Mobile\nexport const UtilityBarMobile = Story.bind({});\n\nUtilityBarMobile.args = {\n    mainSlot: setMainSlot(),\n    asideSlot: setAsideSlot(true),\n};\n\nUtilityBarMobile.parameters = {\n    ...globalParams,\n    viewport: {\n        defaultViewport: 'iphone12',\n    },\n};\n\nUtilityBarMobile.storyName = 'Mobile';\n// END: Story for Utility Bar on Mobile\n\n// BEGIN: Story for Utility Bar on Desktop\nexport const UtilityBarDesktop = Story.bind({});\n\nUtilityBarDesktop.args = {\n    mainSlot: setMainSlot(),\n    asideSlot: setAsideSlot(false),\n};\n\nUtilityBarDesktop.parameters = { ...globalParams };\n\nUtilityBarDesktop.storyName = 'Desktop';\n// END: Story for Utility Bar on Desktop\n"]}

package/dist/types/Users/roc/Sites/apollo/.stencil/stories/dropdown.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Simple: {
-  ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }: Components.XplDropdown): string;
+  ({ closeOnSelect, isOpen: open, mode, selectOnFocus, options, }: Components.XplDropdown): string;
   parameters: {
     layout: string;
     'web-component': {
@@ -24,6 +24,22 @@ export declare const Simple: {
     isOpen: boolean;
     mode: string;
     selectOnFocus: boolean;
+    options: ({
+      label: string;
+      value: string;
+      isSelected?: undefined;
+      isDisabled?: undefined;
+    } | {
+      label: string;
+      value: string;
+      isSelected: boolean;
+      isDisabled?: undefined;
+    } | {
+      label: string;
+      value: string;
+      isDisabled: boolean;
+      isSelected?: undefined;
+    })[];
   };
 };
 export declare const SimpleWithChildren: {

package/dist/types/Users/roc/Sites/apollo/.stencil/stories/select.stories.d.ts

@@ -72,3 +72,63 @@ export declare const Select: {
     truncate: boolean;
   };
 };
+export declare const SelectWValues: {
+  ({ label, description, disabled, error, errorMessage, mode, truncate, }: {
+    label: any;
+    description: any;
+    disabled: any;
+    error: any;
+    errorMessage: any;
+    mode: any;
+    truncate: any;
+  }): string;
+  parameters: {
+    layout: string;
+    'web-component': {
+      render: {
+        ({ label, description, disabled, error, errorMessage, mode, truncate, }: {
+          label: any;
+          description: any;
+          disabled: any;
+          error: any;
+          errorMessage: any;
+          mode: any;
+          truncate: any;
+        }): string;
+        parameters: {
+          layout: string;
+          'web-component': {
+            render: any;
+          };
+          html: {
+            render(): void;
+          };
+        };
+        args: {
+          label: string;
+          description: string;
+          disabled: boolean;
+          error: boolean;
+          errorMessage: string;
+          mode: string;
+          truncate: boolean;
+        };
+      };
+    };
+    html: {
+      render(): void;
+    };
+    actions: {
+      handles: string[];
+    };
+  };
+  args: {
+    label: string;
+    description: string;
+    disabled: boolean;
+    error: boolean;
+    errorMessage: string;
+    mode: string;
+    truncate: boolean;
+  };
+};

package/dist/types/components/xpl-dropdown/dropdownoption.d.ts

@@ -1,9 +1,10 @@
 export interface DropdownOption {
   label: string;
+  value?: string;
   isSelected?: boolean;
   isDisabled?: boolean;
 }
-export declare type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
+export type DropdownItem = Partial<DropdownOption & DropdownOptionGroup>;
 export interface DropdownOptionGroup {
   groupName: string;
   options: DropdownItem[];

package/dist/types/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.d.ts

@@ -1,8 +1,14 @@
 export declare class XplDropdownOption {
   /** whether option is disabled */
   isDisabled?: boolean;
-  /** text to display for option */
+  /**
+   * text to display for option
+   */
   label: string;
+  /**
+   * The selected options value to be submitted with the form, should this option be selected.
+   */
+  value?: string;
   /** whether option is selected */
   isSelected?: boolean;
   hostElement: HTMLXplDropdownOptionElement;

package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts

@@ -19,14 +19,14 @@ export declare class XplDropdown {
    * @param {Object} options - component
    */
   /** call back function invoked when a selection is made */
-  update?: (e: Event, { component }: {
+  update?: (e: any, { component }: {
     component: XplDropdown;
   }) => void;
   hostElement: HTMLXplDropdownElement;
   /**
    * called on dropdown option click and keydown events to update isSelected states
    */
-  handleSelect(e: Event, { component }: {
+  handleSelect(e: any, { component }: {
     component: XplDropdownOption;
   }): Promise<void>;
   private handleClickOutside;

package/dist/types/components/xpl-select/xpl-select.d.ts

@@ -1,4 +1,5 @@
-import type { SelectChoice } from './selectchoice';
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { DropdownItem } from '../xpl-dropdown/dropdownoption';
 export declare class XplSelect {
   /**
    * An array of choices for the user to choose from.
@@ -10,7 +11,7 @@ export declare class XplSelect {
    *   isGroupHeading?: boolean;
    * }
    */
-  choices?: SelectChoice[];
+  choices?: DropdownItem[];
   /**
    * Optional text that appears below the input label.
    */
@@ -23,11 +24,18 @@ export declare class XplSelect {
    * the value as an error message.
    */
   error?: string;
+  /**
+   * The label that appears above the select dropdown
+   */
   label?: string;
   /**
    * Whether to allow a single choice or multiple choices.
    */
   mode?: 'single' | 'multi';
+  /**
+   * The name of the hidden input field that contains the selected option's value(s)
+   */
+  name?: string;
   placeholder: string;
   /**
    * Only used in multi-choice selects. If `true`,
@@ -37,6 +45,11 @@ export declare class XplSelect {
    * adjust to show all badges representing selections.
    */
   truncate?: boolean;
+  selectedValues?: string | string[];
+  /**
+   * Emits the value of the selected option in the select menu on change
+   */
+  selectChange: EventEmitter<string>;
   active: boolean;
   id: string;
   keepFocus: boolean;
@@ -53,5 +66,6 @@ export declare class XplSelect {
   private getDisplayValue;
   private getActualValue;
   private update;
+  handleValueStateChange(newValue: any): void;
   render(): any;
 }

package/dist/types/components/xpl-table/xpl-table.d.ts

@@ -19,6 +19,8 @@ export declare class XplTable {
    * TODO: Need to figure out how this interplays with data
    * received from an API/server
    */
+  private setData;
+  watchData(): void;
   componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -9,7 +9,10 @@ import { Choice } from "./components/xpl-choicelist/choice";
 import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdownoption";
 import { XplDropdownOption } from "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option";
 import { ListItem } from "./components/xpl-list/listitem";
-import { SelectChoice } from "./components/xpl-select/selectchoice";
+export { Choice } from "./components/xpl-choicelist/choice";
+export { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdownoption";
+export { XplDropdownOption } from "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option";
+export { ListItem } from "./components/xpl-list/listitem";
 export namespace Components {
     interface XplApplicationShell {
         /**
@@ -166,7 +169,7 @@ export namespace Components {
         /**
           * called on dropdown option click and keydown events to update isSelected states
          */
-        "handleSelect": (e: Event, { component }: { component: XplDropdownOption; }) => Promise<void>;
+        "handleSelect": (e: any, { component }: { component: XplDropdownOption; }) => Promise<void>;
         /**
           * text to display as heading
          */
@@ -190,10 +193,7 @@ export namespace Components {
         /**
           * call back function invoked when a selection is made
          */
-        "update"?: (
-        e: Event,
-        { component }: { component: XplDropdown }
-    ) => void;
+        "update"?: (e, { component }: { component: XplDropdown }) => void;
     }
     interface XplDropdownGroup {
         /**
@@ -224,6 +224,10 @@ export namespace Components {
           * text to display for option
          */
         "label": string;
+        /**
+          * The selected options value to be submitted with the form, should this option be selected.
+         */
+        "value"?: string;
     }
     interface XplGrid {
     }
@@ -338,7 +342,7 @@ export namespace Components {
         /**
           * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean; }
          */
-        "choices"?: SelectChoice[];
+        "choices"?: DropdownItem[];
         /**
           * Optional text that appears below the input label.
          */
@@ -348,12 +352,20 @@ export namespace Components {
           * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
          */
         "error"?: string;
+        /**
+          * The label that appears above the select dropdown
+         */
         "label"?: string;
         /**
           * Whether to allow a single choice or multiple choices.
          */
         "mode"?: 'single' | 'multi';
+        /**
+          * The name of the hidden input field that contains the selected option's value(s)
+         */
+        "name"?: string;
         "placeholder": string;
+        "selectedValues"?: string | string[];
         /**
           * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
          */
@@ -400,6 +412,46 @@ export namespace Components {
         "navControl"?: boolean;
     }
 }
+export interface XplButtonRowCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplButtonRowElement;
+}
+export interface XplCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplCheckboxElement;
+}
+export interface XplMainNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplMainNavElement;
+}
+export interface XplNavItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplNavItemElement;
+}
+export interface XplPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplPaginationElement;
+}
+export interface XplRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplRadioElement;
+}
+export interface XplSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSelectElement;
+}
+export interface XplTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTableElement;
+}
+export interface XplTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTagElement;
+}
+export interface XplUtilityBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplUtilityBarElement;
+}
 declare global {
     interface HTMLXplApplicationShellElement extends Components.XplApplicationShell, HTMLStencilElement {
     }
@@ -704,15 +756,15 @@ declare namespace LocalJSX {
         /**
           * Fires on the primary button. If not set, the button can act as a standard submit button for a form.
          */
-        "onClickPrimary"?: (event: CustomEvent<any>) => void;
+        "onClickPrimary"?: (event: XplButtonRowCustomEvent<any>) => void;
         /**
           * Adds an event listener to the secondary button.
          */
-        "onClickSecondary"?: (event: CustomEvent<any>) => void;
+        "onClickSecondary"?: (event: XplButtonRowCustomEvent<any>) => void;
         /**
           * Adds an event listener to the tertiary button.
          */
-        "onClickTertiary"?: (event: CustomEvent<any>) => void;
+        "onClickTertiary"?: (event: XplButtonRowCustomEvent<any>) => void;
         /**
           * The text for the primary button.
          */
@@ -735,7 +787,7 @@ declare namespace LocalJSX {
         /**
           * @private
          */
-        "onCheckboxChange"?: (event: CustomEvent<any>) => void;
+        "onCheckboxChange"?: (event: XplCheckboxCustomEvent<any>) => void;
         "required"?: boolean;
         "styled"?: boolean;
         "value"?: string;
@@ -806,10 +858,7 @@ declare namespace LocalJSX {
         /**
           * call back function invoked when a selection is made
          */
-        "update"?: (
-        e: Event,
-        { component }: { component: XplDropdown }
-    ) => void;
+        "update"?: (e, { component }: { component: XplDropdown }) => void;
     }
     interface XplDropdownGroup {
         /**
@@ -840,6 +889,10 @@ declare namespace LocalJSX {
           * text to display for option
          */
         "label"?: string;
+        /**
+          * The selected options value to be submitted with the form, should this option be selected.
+         */
+        "value"?: string;
     }
     interface XplGrid {
     }
@@ -921,7 +974,7 @@ declare namespace LocalJSX {
         /**
           * @event {string} navWidth - Emits the `nav-width` prop set by the user when the component is attached to the DOM and when the component is updated.
          */
-        "onNavWidth"?: (event: CustomEvent<string>) => void;
+        "onNavWidth"?: (event: XplMainNavCustomEvent<string>) => void;
         /**
           * @property {string}  width  - The width of the Main Nav.
          */
@@ -935,10 +988,10 @@ declare namespace LocalJSX {
         /**
           * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
          */
-        "onNavOpen"?: (event: CustomEvent<boolean>) => void;
+        "onNavOpen"?: (event: XplNavItemCustomEvent<boolean>) => void;
     }
     interface XplPagination {
-        "onPage"?: (event: CustomEvent<any>) => void;
+        "onPage"?: (event: XplPaginationCustomEvent<any>) => void;
         "perPage"?: number;
         "total"?: number;
         "waitForCallback"?: boolean;
@@ -951,7 +1004,7 @@ declare namespace LocalJSX {
         /**
           * @private
          */
-        "onRadioChange"?: (event: CustomEvent<any>) => void;
+        "onRadioChange"?: (event: XplRadioCustomEvent<any>) => void;
         "required"?: boolean;
         "styled"?: boolean;
         "value"?: string;
@@ -962,7 +1015,7 @@ declare namespace LocalJSX {
         /**
           * An array of choices for the user to choose from. Each choice should be of the form: {   label: string;   href?: string;   value?: string;   isGroupHeading?: boolean; }
          */
-        "choices"?: SelectChoice[];
+        "choices"?: DropdownItem[];
         /**
           * Optional text that appears below the input label.
          */
@@ -972,12 +1025,24 @@ declare namespace LocalJSX {
           * If an empty string (attribute present with no value), will display visually as an error. If a string is included, will display visually as an error and include the value as an error message.
          */
         "error"?: string;
+        /**
+          * The label that appears above the select dropdown
+         */
         "label"?: string;
         /**
           * Whether to allow a single choice or multiple choices.
          */
         "mode"?: 'single' | 'multi';
+        /**
+          * The name of the hidden input field that contains the selected option's value(s)
+         */
+        "name"?: string;
+        /**
+          * Emits the value of the selected option in the select menu on change
+         */
+        "onSelectChange"?: (event: XplSelectCustomEvent<string>) => void;
         "placeholder"?: string;
+        "selectedValues"?: string | string[];
         /**
           * Only used in multi-choice selects. If `true`, badges representing selections that would overflow the container are replaced with "+x more" (where x is the number not shown). If `false`, the container's height will adjust to show all badges representing selections.
          */
@@ -988,11 +1053,11 @@ declare namespace LocalJSX {
         "data"?: string[][];
         "freeze"?: boolean;
         "multiselect"?: boolean;
-        "onTableSelect"?: (event: CustomEvent<any>) => void;
+        "onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
         "striped"?: boolean;
     }
     interface XplTag {
-        "onClose"?: (event: CustomEvent<any>) => void;
+        "onClose"?: (event: XplTagCustomEvent<any>) => void;
     }
     interface XplToggle {
         "checked"?: boolean;
@@ -1027,7 +1092,7 @@ declare namespace LocalJSX {
         /**
           * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)
          */
-        "onNavOpen"?: (event: CustomEvent<boolean>) => void;
+        "onNavOpen"?: (event: XplUtilityBarCustomEvent<boolean>) => void;
     }
     interface IntrinsicElements {
         "xpl-application-shell": XplApplicationShell;