@spectrum-web-components/table 0.0.2-table.2695 → 0.1.0

package/stories/table-elements.stories.js

@@ -1,53 +1,43 @@
-/* STORIES
-Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '../sp-table.js';
-import '../sp-table-checkbox-cell.js';
-import '../sp-table-head.js';
-import '../sp-table-head-cell.js';
-import '../sp-table-body.js';
-import '../sp-table-row.js';
-import '../sp-table-cell.js';
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/table/sp-table.js";
+import "@spectrum-web-components/table/sp-table-checkbox-cell.js";
+import "@spectrum-web-components/table/sp-table-head.js";
+import "@spectrum-web-components/table/sp-table-head-cell.js";
+import "@spectrum-web-components/table/sp-table-body.js";
+import "@spectrum-web-components/table/sp-table-row.js";
+import "@spectrum-web-components/table/sp-table-cell.js";
 export default {
-    title: 'Table',
-    component: 'sp-table',
-    args: {
-        selected: [],
-        selects: '',
-    },
-    argTypes: {
-        selected: {
-            name: 'selected',
-            description: 'The value of the selected `<sp-table-row>`(s).',
-            control: {
-                type: 'text',
-            },
-        },
-        selects: {
-            name: 'selects',
-            description: 'Whether the elements selects its children and how many it can select at a time.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: '' },
-            },
-            control: {
-                type: 'inline-radio',
-                options: ['', 'single', 'multiple'],
-            },
-        },
+  title: "Table",
+  component: "sp-table",
+  args: {
+    selected: [],
+    selects: ""
+  },
+  argTypes: {
+    selected: {
+      name: "selected",
+      description: "The value of the selected `<sp-table-row>`(s).",
+      control: {
+        type: "text"
+      }
     },
+    selects: {
+      name: "selects",
+      description: "Whether the elements selects its children and how many it can select at a time.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["", "single", "multiple"]
+      }
+    }
+  }
 };
 export const elements = () => {
-    return html `
+  return html`
         <sp-table size="m">
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -85,7 +75,7 @@ export const elements = () => {
     `;
 };
 export const small = () => {
-    return html `
+  return html`
         <sp-table size="s">
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -123,15 +113,17 @@ export const small = () => {
     `;
 };
 export const selectsSingle = () => {
-    return html `
+  return html`
         <sp-table
             size="m"
             selects="single"
-            .selected=${['row1']}
+            .selected=${["row1"]}
             @change=${({ target }) => {
-        const next = target.nextElementSibling;
-        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
-    }}
+    const next = target.nextElementSibling;
+    next.textContent = `Selected: ${JSON.stringify(
+      target.selected
+    )}`;
+  }}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -170,8 +162,8 @@ export const selectsSingle = () => {
     `;
 };
 export const noSelectsSpecified = () => {
-    return html `
-        <sp-table size="m" .selected=${['row1', 'row2']}>
+  return html`
+        <sp-table size="m" .selected=${["row1", "row2"]}>
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -208,17 +200,21 @@ export const noSelectsSpecified = () => {
     `;
 };
 export const selectsMultiple = () => {
-    return html `
+  return html`
         <sp-table
             size="m"
             selects="multiple"
-            .selected=${['row1', 'row2']}
+            .selected=${["row1", "row2"]}
             @change=${({ target }) => {
-        const next = target.nextElementSibling;
-        next.textContent = `Selected: ${JSON.stringify(target.selected, null, ' ')}`;
-        const nextNext = next.nextElementSibling;
-        nextNext.textContent = `Selected Count: ${target.selected.length}`;
-    }}
+    const next = target.nextElementSibling;
+    next.textContent = `Selected: ${JSON.stringify(
+      target.selected,
+      null,
+      " "
+    )}`;
+    const nextNext = next.nextElementSibling;
+    nextNext.textContent = `Selected Count: ${target.selected.length}`;
+  }}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -257,44 +253,4 @@ export const selectsMultiple = () => {
         <div>Selected Count: 2</div>
     `;
 };
-// export const selectsMultipleAttributes = (): TemplateResult => {
-//     return html`
-//         <sp-table size="m" selects="multiple">
-//             <sp-table-head>
-//                 <sp-table-head-cell>
-//                     Column Title
-//                 </sp-table-head-cell>
-//                 <sp-table-head-cell>Column Title</sp-table-head-cell>
-//                 <sp-table-head-cell>Column Title</sp-table-head-cell>
-//             </sp-table-head>
-//             <sp-table-body style="height: 120px">
-//                 <sp-table-row value="row1" selected>
-//                     <sp-table-cell>Row Item Alpha</sp-table-cell>
-//                     <sp-table-cell>Row Item Alpha</sp-table-cell>
-//                     <sp-table-cell>Row Item Alpha</sp-table-cell>
-//                 </sp-table-row>
-//                 <sp-table-row value="row2">
-//                     <sp-table-cell>Row Item Bravo</sp-table-cell>
-//                     <sp-table-cell>Row Item Bravo</sp-table-cell>
-//                     <sp-table-cell>Row Item Bravo</sp-table-cell>
-//                 </sp-table-row>
-//                 <sp-table-row value="row3" selected>
-//                     <sp-table-cell>Row Item Charlie</sp-table-cell>
-//                     <sp-table-cell>Row Item Charlie</sp-table-cell>
-//                     <sp-table-cell>Row Item Charlie</sp-table-cell>
-//                 </sp-table-row>
-//                 <sp-table-row value="row4">
-//                     <sp-table-cell>Row Item Delta</sp-table-cell>
-//                     <sp-table-cell>Row Item Delta</sp-table-cell>
-//                     <sp-table-cell>Row Item Delta</sp-table-cell>
-//                 </sp-table-row>
-//                 <sp-table-row value="row5">
-//                     <sp-table-cell>Row Item Echo</sp-table-cell>
-//                     <sp-table-cell>Row Item Echo</sp-table-cell>
-//                     <sp-table-cell>Row Item Echo</sp-table-cell>
-//                 </sp-table-row>
-//             </sp-table-body>
-//         </sp-table>
-//     `;
-// };
-//# sourceMappingURL=table-elements.stories.js.map
+//# sourceMappingURL=table-elements.stories.js.map

package/stories/table-elements.stories.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"table-elements.stories.js","sourceRoot":"","sources":["table-elements.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/* STORIES\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-table.js';\nimport '../sp-table-checkbox-cell.js';\nimport '../sp-table-head.js';\nimport '../sp-table-head-cell.js';\nimport '../sp-table-body.js';\nimport '../sp-table-row.js';\nimport '../sp-table-cell.js';\nimport { Table } from '../src/Table.js';\n\nexport default {\n    title: 'Table',\n    component: 'sp-table',\n    args: {\n        selected: [],\n        selects: '',\n    },\n    argTypes: {\n        selected: {\n            name: 'selected',\n            description: 'The value of the selected `<sp-table-row>`(s).',\n            control: {\n                type: 'text',\n            },\n        },\n        selects: {\n            name: 'selects',\n            description:\n                'Whether the elements selects its children and how many it can select at a time.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['', 'single', 'multiple'],\n            },\n        },\n    },\n};\n\nexport const elements = (): TemplateResult => {\n    return html`\n        <sp-table size=\"m\">\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const small = (): TemplateResult => {\n    return html`\n        <sp-table size=\"s\">\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const selectsSingle = (): TemplateResult => {\n    return html`\n        <sp-table\n            size=\"m\"\n            selects=\"single\"\n            .selected=${['row1']}\n            @change=${({ target }: Event & { target: Table }) => {\n                const next = target.nextElementSibling as HTMLDivElement;\n                next.textContent = `Selected: ${JSON.stringify(\n                    target.selected\n                )}`;\n            }}\n        >\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n        <div>Selected: [\"row1\"]</div>\n    `;\n};\nexport const noSelectsSpecified = (): TemplateResult => {\n    return html`\n        <sp-table size=\"m\" .selected=${['row1', 'row2']}>\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const selectsMultiple = (): TemplateResult => {\n    return html`\n        <sp-table\n            size=\"m\"\n            selects=\"multiple\"\n            .selected=${['row1', 'row2']}\n            @change=${({ target }: Event & { target: Table }) => {\n                const next = target.nextElementSibling as HTMLDivElement;\n                next.textContent = `Selected: ${JSON.stringify(\n                    target.selected,\n                    null,\n                    ' '\n                )}`;\n                const nextNext = next.nextElementSibling as HTMLDivElement;\n                nextNext.textContent = `Selected Count: ${target.selected.length}`;\n            }}\n        >\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n        <div>Selected: [\"row1\", \"row2\"]</div>\n        <div>Selected Count: 2</div>\n    `;\n};\n\n// export const selectsMultipleAttributes = (): TemplateResult => {\n//     return html`\n//         <sp-table size=\"m\" selects=\"multiple\">\n//             <sp-table-head>\n//                 <sp-table-head-cell>\n//                     Column Title\n//                 </sp-table-head-cell>\n//                 <sp-table-head-cell>Column Title</sp-table-head-cell>\n//                 <sp-table-head-cell>Column Title</sp-table-head-cell>\n//             </sp-table-head>\n//             <sp-table-body style=\"height: 120px\">\n//                 <sp-table-row value=\"row1\" selected>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row2\">\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row3\" selected>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row4\">\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row5\">\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                 </sp-table-row>\n//             </sp-table-body>\n//         </sp-table>\n//     `;\n// };\n"]}
+{
+  "version": 3,
+  "sources": ["table-elements.stories.ts"],
+  "sourcesContent": ["/* STORIES\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/table/sp-table.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport '@spectrum-web-components/table/sp-table-head.js';\nimport '@spectrum-web-components/table/sp-table-head-cell.js';\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-cell.js';\nimport type { Table } from '@spectrum-web-components/table';\n\nexport default {\n    title: 'Table',\n    component: 'sp-table',\n    args: {\n        selected: [],\n        selects: '',\n    },\n    argTypes: {\n        selected: {\n            name: 'selected',\n            description: 'The value of the selected `<sp-table-row>`(s).',\n            control: {\n                type: 'text',\n            },\n        },\n        selects: {\n            name: 'selects',\n            description:\n                'Whether the elements selects its children and how many it can select at a time.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['', 'single', 'multiple'],\n            },\n        },\n    },\n};\n\nexport const elements = (): TemplateResult => {\n    return html`\n        <sp-table size=\"m\">\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const small = (): TemplateResult => {\n    return html`\n        <sp-table size=\"s\">\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const selectsSingle = (): TemplateResult => {\n    return html`\n        <sp-table\n            size=\"m\"\n            selects=\"single\"\n            .selected=${['row1']}\n            @change=${({ target }: Event & { target: Table }) => {\n                const next = target.nextElementSibling as HTMLDivElement;\n                next.textContent = `Selected: ${JSON.stringify(\n                    target.selected\n                )}`;\n            }}\n        >\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n        <div>Selected: [\"row1\"]</div>\n    `;\n};\nexport const noSelectsSpecified = (): TemplateResult => {\n    return html`\n        <sp-table size=\"m\" .selected=${['row1', 'row2']}>\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n    `;\n};\n\nexport const selectsMultiple = (): TemplateResult => {\n    return html`\n        <sp-table\n            size=\"m\"\n            selects=\"multiple\"\n            .selected=${['row1', 'row2']}\n            @change=${({ target }: Event & { target: Table }) => {\n                const next = target.nextElementSibling as HTMLDivElement;\n                next.textContent = `Selected: ${JSON.stringify(\n                    target.selected,\n                    null,\n                    ' '\n                )}`;\n                const nextNext = next.nextElementSibling as HTMLDivElement;\n                nextNext.textContent = `Selected Count: ${target.selected.length}`;\n            }}\n        >\n            <sp-table-head>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n                <sp-table-head-cell>Column Title</sp-table-head-cell>\n            </sp-table-head>\n            <sp-table-body style=\"height: 120px\">\n                <sp-table-row value=\"row1\" class=\"row1\">\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                    <sp-table-cell>Row Item Alpha</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row2\" class=\"row2\">\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                    <sp-table-cell>Row Item Bravo</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row3\" class=\"row3\">\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                    <sp-table-cell>Row Item Charlie</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row4\" class=\"row4\">\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                    <sp-table-cell>Row Item Delta</sp-table-cell>\n                </sp-table-row>\n                <sp-table-row value=\"row5\" class=\"row5\">\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                    <sp-table-cell>Row Item Echo</sp-table-cell>\n                </sp-table-row>\n            </sp-table-body>\n        </sp-table>\n        <div>Selected: [\"row1\", \"row2\"]</div>\n        <div>Selected Count: 2</div>\n    `;\n};\n\n// export const selectsMultipleAttributes = (): TemplateResult => {\n//     return html`\n//         <sp-table size=\"m\" selects=\"multiple\">\n//             <sp-table-head>\n//                 <sp-table-head-cell>\n//                     Column Title\n//                 </sp-table-head-cell>\n//                 <sp-table-head-cell>Column Title</sp-table-head-cell>\n//                 <sp-table-head-cell>Column Title</sp-table-head-cell>\n//             </sp-table-head>\n//             <sp-table-body style=\"height: 120px\">\n//                 <sp-table-row value=\"row1\" selected>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                     <sp-table-cell>Row Item Alpha</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row2\">\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                     <sp-table-cell>Row Item Bravo</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row3\" selected>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                     <sp-table-cell>Row Item Charlie</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row4\">\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                     <sp-table-cell>Row Item Delta</sp-table-cell>\n//                 </sp-table-row>\n//                 <sp-table-row value=\"row5\">\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                     <sp-table-cell>Row Item Echo</sp-table-cell>\n//                 </sp-table-row>\n//             </sp-table-body>\n//         </sp-table>\n//     `;\n// };\n"],
+  "mappings": "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",
+  "names": []
+}