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

package/stories/table-elements.stories.js

@@ -1,53 +1,4 @@
-/* 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';
-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'],
-            },
-        },
-    },
-};
-export const elements = () => {
-    return html `
+import{html as e}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";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"]}}}};export const elements=()=>e`
         <sp-table size="m">
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -82,10 +33,7 @@ export const elements = () => {
                 </sp-table-row>
             </sp-table-body>
         </sp-table>
-    `;
-};
-export const small = () => {
-    return html `
+    `,small=()=>e`
         <sp-table size="s">
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -120,18 +68,12 @@ export const small = () => {
                 </sp-table-row>
             </sp-table-body>
         </sp-table>
-    `;
-};
-export const selectsSingle = () => {
-    return html `
+    `,selectsSingle=()=>e`
         <sp-table
             size="m"
             selects="single"
-            .selected=${['row1']}
-            @change=${({ target }) => {
-        const next = target.nextElementSibling;
-        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
-    }}
+            .selected=${["row1"]}
+            @change=${({target:l})=>{const t=l.nextElementSibling;t.textContent=`Selected: ${JSON.stringify(l.selected)}`}}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -167,11 +109,8 @@ export const selectsSingle = () => {
             </sp-table-body>
         </sp-table>
         <div>Selected: ["row1"]</div>
-    `;
-};
-export const noSelectsSpecified = () => {
-    return html `
-        <sp-table size="m" .selected=${['row1', 'row2']}>
+    `,noSelectsSpecified=()=>e`
+        <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>
@@ -205,20 +144,12 @@ export const noSelectsSpecified = () => {
                 </sp-table-row>
             </sp-table-body>
         </sp-table>
-    `;
-};
-export const selectsMultiple = () => {
-    return html `
+    `,selectsMultiple=()=>e`
         <sp-table
             size="m"
             selects="multiple"
-            .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}`;
-    }}
+            .selected=${["row1","row2"]}
+            @change=${({target:l})=>{const t=l.nextElementSibling;t.textContent=`Selected: ${JSON.stringify(l.selected,null," ")}`;const a=t.nextElementSibling;a.textContent=`Selected Count: ${l.selected.length}`}}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -256,45 +187,4 @@ export const selectsMultiple = () => {
         <div>Selected: ["row1", "row2"]</div>
         <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 '../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"],
+  "mappings": "AAWA,qDAEA,uBACA,qCACA,4BACA,iCACA,4BACA,2BACA,4BAGA,cAAe,CACX,MAAO,QACP,UAAW,WACX,KAAM,CACF,SAAU,CAAC,EACX,QAAS,EACb,EACA,SAAU,CACN,SAAU,CACN,KAAM,WACN,YAAa,iDACb,QAAS,CACL,KAAM,MACV,CACJ,EACA,QAAS,CACL,KAAM,UACN,YACI,kFACJ,MAAO,CACH,KAAM,CAAE,QAAS,QAAS,EAC1B,aAAc,CAAE,QAAS,EAAG,CAChC,EACA,QAAS,CACL,KAAM,eACN,QAAS,CAAC,GAAI,SAAU,UAAU,CACtC,CACJ,CACJ,CACJ,EAEO,YAAM,UAAW,IACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsCE,MAAQ,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsCE,cAAgB,IAClB;AAAA;AAAA;AAAA;AAAA,wBAIa,CAAC,MAAM;AAAA,sBACT,CAAC,CAAE,YAAwC,CACjD,KAAM,GAAO,EAAO,mBACpB,EAAK,YAAc,aAAa,KAAK,UACjC,EAAO,QACX,GACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsCC,mBAAqB,IACvB;AAAA,uCAC4B,CAAC,OAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqCzC,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA,wBAIa,CAAC,OAAQ,MAAM;AAAA,sBACjB,CAAC,CAAE,YAAwC,CACjD,KAAM,GAAO,EAAO,mBACpB,EAAK,YAAc,aAAa,KAAK,UACjC,EAAO,SACP,KACA,GACJ,IACA,KAAM,GAAW,EAAK,mBACtB,EAAS,YAAc,mBAAmB,EAAO,SAAS,QAC9D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/stories/table-virtualized.stories.js

@@ -1,89 +1,12 @@
-import { __decorate } from "tslib";
-/* 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, SpectrumElement, } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-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';
-import { makeItems, renderItem } from './index.js';
-export default {
-    title: 'Table/Virtualized',
-    component: 'sp-table',
-    argTypes: {
-        onChange: { action: 'change' },
-        selected: {
-            name: 'selected',
-            description: 'The array of item values selected by the Table.',
-            type: { name: '', required: false },
-            control: 'text',
-        },
-        selects: {
-            name: 'selects',
-            description: 'If the Table accepts a "single" or "multiple" selection.',
-            control: {
-                type: 'inline-radio',
-                options: ['', 'single', 'multiple'],
-            },
-        },
-    },
-    args: {
-        selects: '',
-        selected: [],
-    },
-};
-class VirtualTable extends SpectrumElement {
-    constructor() {
-        super();
-        this.items = makeItems(50);
-        this.compareItems = (sortKey, sortDirection) => (a, b) => {
-            const doSortKey = sortKey;
-            if (!isNaN(Number(a[doSortKey]))) {
-                const first = Number(a[doSortKey]);
-                const second = Number(b[doSortKey]);
-                return sortDirection === 'asc'
-                    ? first - second
-                    : second - first;
-            }
-            else {
-                const first = String(a[doSortKey]);
-                const second = String(b[doSortKey]);
-                return sortDirection === 'asc'
-                    ? first.localeCompare(second)
-                    : second.localeCompare(first);
-            }
-        };
-        this.items.sort(this.compareItems('name', 'desc'));
-    }
-    render() {
-        return html `
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=(l,t,e,s)=>{for(var a=s>1?void 0:s?h(t,e):t,n=l.length-1,i;n>=0;n--)(i=l[n])&&(a=(s?i(t,e,a):i(a))||a);return s&&a&&u(t,e,a),a};import{html as r,SpectrumElement as C}from"@spectrum-web-components/base";import{property as g}from"@spectrum-web-components/base/src/decorators.js";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";import{makeItems as m,renderItem as c}from"./index.js";export default{title:"Table/Virtualized",component:"sp-table",argTypes:{onChange:{action:"change"},selected:{name:"selected",description:"The array of item values selected by the Table.",type:{name:"",required:!1},control:"text"},selects:{name:"selects",description:'If the Table accepts a "single" or "multiple" selection.',control:{type:"inline-radio",options:["","single","multiple"]}}},args:{selects:"",selected:[]}};class b extends C{constructor(){super();this.items=m(50);this.compareItems=(t,e)=>(s,a)=>{const n=t;if(isNaN(Number(s[n]))){const i=String(s[n]),o=String(a[n]);return e==="asc"?i.localeCompare(o):o.localeCompare(i)}else{const i=Number(s[n]),o=Number(a[n]);return e==="asc"?i-o:o-i}};this.items.sort(this.compareItems("name","desc"))}render(){return r`
             <sp-table
                 aria-rowcount="50"
                 .items=${this.items}
-                .renderItem=${renderItem}
+                .renderItem=${c}
                 size="m"
                 scroller="true"
                 style="height: 200px"
-                @sorted=${(event) => {
-            const { sortKey, sortDirection } = event.detail; // leveraged CustomEvent().detail, works across shadow boundaries
-            const items = [...this.items];
-            // depending on the column, sort asc or desc depending on the arrow direction
-            items.sort(this.compareItems(sortKey, sortDirection));
-            this.items = items;
-        }}
+                @sorted=${t=>{const{sortKey:e,sortDirection:s}=t.detail,a=[...this.items];a.sort(this.compareItems(e,s)),this.items=a}}
             >
                 <sp-table-head>
                     <sp-table-head-cell
@@ -99,47 +22,20 @@ class VirtualTable extends SpectrumElement {
                     <sp-table-head-cell>Column Title</sp-table-head-cell>
                 </sp-table-head>
             </sp-table>
-        `;
-    }
-}
-__decorate([
-    property({ type: Array })
-], VirtualTable.prototype, "items", void 0);
-customElements.define('virtual-table', VirtualTable);
-const virtualItems = makeItems(50);
-export const virtualized = () => {
-    return html `
+        `}}p([g({type:Array})],b.prototype,"items",2),customElements.define("virtual-table",b);const d=m(50);export const virtualized=()=>r`
         <virtual-table></virtual-table>
-    `;
-};
-export const virtualizedSingle = (args) => {
-    const onChange = args.onChange ||
-        (() => {
-            return;
-        });
-    return html `
+    `,virtualizedSingle=l=>{const t=l.onChange||(()=>{});return r`
         <sp-table
             size="m"
             scroller="true"
             style="height: 200px"
-            selects=${args.selects}
-            .selected=${args.selected}
-            @change=${({ target }) => {
-        const next = target.nextElementSibling;
-        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
-    }}
-            .items=${virtualItems}
-            .renderItem=${renderItem}
-            @visibilityChanged=${(event) => onChange({
-        first: event.first,
-        last: event.last,
-        type: 'visibility',
-    })}
-            @rangeChanged=${(event) => onChange({
-        first: event.first,
-        last: event.last,
-        type: 'range',
-    })}
+            selects=${l.selects}
+            .selected=${l.selected}
+            @change=${({target:e})=>{const s=e.nextElementSibling;s.textContent=`Selected: ${JSON.stringify(e.selected)}`}}
+            .items=${d}
+            .renderItem=${c}
+            @visibilityChanged=${e=>t({first:e.first,last:e.last,type:"visibility"})}
+            @rangeChanged=${e=>t({first:e.first,last:e.last,type:"range"})}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -148,29 +44,17 @@ export const virtualizedSingle = (args) => {
             </sp-table-head>
         </sp-table>
         <div>Selected: ["49"]</div>
-    `;
-};
-virtualizedSingle.args = {
-    selects: 'single',
-    selected: ['49'],
-};
-export const virtualizedMultiple = (args) => {
-    return html `
+    `};virtualizedSingle.args={selects:"single",selected:["49"]};export const virtualizedMultiple=l=>r`
         <sp-table
             size="m"
             scroller="true"
             style="height: 200px"
-            selects=${args.selects}
-            .selected=${args.selected}
-            @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}`;
-    }}
+            selects=${l.selects}
+            .selected=${l.selected}
+            @change=${({target:t})=>{const e=t.nextElementSibling;e.textContent=`Selected: ${JSON.stringify(t.selected,null," ")}`;const s=e.nextElementSibling;s.textContent=`Selected Count: ${t.selected.length}`}}
             scroller?="false"
-            .items=${virtualItems}
-            .renderItem=${renderItem}
+            .items=${d}
+            .renderItem=${c}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -180,24 +64,17 @@ export const virtualizedMultiple = (args) => {
         </sp-table>
         <div>Selected: ["0", "48"]</div>
         <div>Selected Count: 2</div>
-    `;
-};
-virtualizedMultiple.args = {
-    selects: 'multiple',
-    selected: ['0', '48'],
-};
-export const virtualizedCustomValue = (args) => {
-    return html `
+    `;virtualizedMultiple.args={selects:"multiple",selected:["0","48"]};export const virtualizedCustomValue=l=>r`
         <sp-table
             size="m"
             scroller="true"
             style="height: 200px"
-            selects=${args.selects}
-            .selected=${args.selected}
-            @change=${args.onChange}
-            .items=${virtualItems}
-            .itemValue=${(item) => 'applied-' + item.date}
-            .renderItem=${renderItem}
+            selects=${l.selects}
+            .selected=${l.selected}
+            @change=${l.onChange}
+            .items=${d}
+            .itemValue=${t=>"applied-"+t.date}
+            .renderItem=${c}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -208,36 +85,17 @@ export const virtualizedCustomValue = (args) => {
         </sp-table>
         <div>Selected: ["0", "48", "applied-47"]</div>
         <div>Selected Count: 2</div>
-    `;
-};
-virtualizedCustomValue.args = {
-    selected: ['0', '48', 'applied-47'],
-    selects: 'multiple',
-    onChange: ({ target }) => {
-        const next = target.nextElementSibling;
-        next.textContent = `Selected: ${JSON.stringify(target.selected, null, ' ')}`;
-        const nextNext = next.nextElementSibling;
-        nextNext.textContent = `Selected Count: ${target.selected.length}`;
-    },
-};
-export const virtualizedCustomRow = (args) => {
-    virtualItems.splice(3, 1, { name: 'Scoobert', date: 2, _$rowType$: 1 });
-    return html `
+    `;virtualizedCustomValue.args={selected:["0","48","applied-47"],selects:"multiple",onChange:({target:l})=>{const t=l.nextElementSibling;t.textContent=`Selected: ${JSON.stringify(l.selected,null," ")}`;const e=t.nextElementSibling;e.textContent=`Selected Count: ${l.selected.length}`}};export const virtualizedCustomRow=l=>(d.splice(3,1,{name:"Scoobert",date:2,_$rowType$:1}),r`
         <sp-table
             size="m"
             scroller="true"
             style="height: 200px"
-            selects=${args.selects}
-            .selected=${args.selected}
-            @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}`;
-    }}
+            selects=${l.selects}
+            .selected=${l.selected}
+            @change=${({target:t})=>{const e=t.nextElementSibling;e.textContent=`Selected: ${JSON.stringify(t.selected,null," ")}`;const s=e.nextElementSibling;s.textContent=`Selected Count: ${t.selected.length}`}}
             scroller?="false"
-            .items=${virtualItems}
-            .renderItem=${renderItem}
+            .items=${d}
+            .renderItem=${c}
         >
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -247,15 +105,8 @@ export const virtualizedCustomRow = (args) => {
         </sp-table>
         <div>Selected: ["0", "48"]</div>
         <div>Selected Count: 2</div>
-    `;
-};
-virtualizedCustomRow.args = {
-    selects: 'multiple',
-    selected: ['0', '48'],
-};
-export const virtualizedNoScroller = () => {
-    return html `
-        <sp-table size="m" .items=${virtualItems} .renderItem=${renderItem}>
+    `);virtualizedCustomRow.args={selects:"multiple",selected:["0","48"]};export const virtualizedNoScroller=()=>r`
+        <sp-table size="m" .items=${d} .renderItem=${c}>
             <sp-table-head>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
                 <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -263,5 +114,4 @@ export const virtualizedNoScroller = () => {
             </sp-table-head>
         </sp-table>
     `;
-};
-//# sourceMappingURL=table-virtualized.stories.js.map
+//# sourceMappingURL=table-virtualized.stories.js.map