@operato/app 1.0.0-alpha.3 → 1.0.0-alpha.32

package/@types/global/index.d.ts

@@ -0,0 +1,2 @@
+declare module '*.png'
+declare module '*.css'

package/CHANGELOG.md

@@ -3,7 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
+## [1.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.31...v1.0.0-alpha.32) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* typo ([2f2e3fc](https://github.com/hatiolab/operato/commit/2f2e3fcce771dcbfe2f1d09cbd25638094a6dc99))
+
+
+
+## [1.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.30...v1.0.0-alpha.31) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* ox-grist-renderer support class type renderer (refer ox-grist-renderer-progress) ([ad7c8e1](https://github.com/hatiolab/operato/commit/ad7c8e1b453d19af9daa13ae4eb7c2059d85dfbb))
+* partition-keys related ui components ([c21b4d2](https://github.com/hatiolab/operato/commit/c21b4d292ca4a6d6b4bf774a570dbabd349528fc))
+
+
+
+## [1.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.29...v1.0.0-alpha.30) (2022-03-18)
 
 **Note:** Version bump only for package @operato/app
 
@@ -11,7 +30,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-03-10)
+## [1.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.28...v1.0.0-alpha.29) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* datalist in ox-input-partition-keys ([a25e3a6](https://github.com/hatiolab/operato/commit/a25e3a66cf5f7a25bca057be90ef336b29e915a7))
+* typo ([1f8f2da](https://github.com/hatiolab/operato/commit/1f8f2da3b4780df9f747065a457f6cafb5d9e9cf))
+
+
+
+## [1.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.28) (2022-03-17)
+
+
+### :rocket: New Features
+
+* add ox-grist-editor for partition-keys ([7672a27](https://github.com/hatiolab/operato/commit/7672a2729f78475602733a83779f6a7a96e128fd))
+
+
+
+## [1.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.27) (2022-03-17)
+
+
+### :rocket: New Features
+
+* add ox-grist-editor for partition-keys ([7672a27](https://github.com/hatiolab/operato/commit/7672a2729f78475602733a83779f6a7a96e128fd))
+
+
+
+## [1.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.25...v1.0.0-alpha.26) (2022-03-17)
 
 **Note:** Version bump only for package @operato/app
 
@@ -19,31 +66,154 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [1.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v0.4.3...v1.0.0-alpha.1) (2022-03-09)
+## [1.0.0-alpha.25](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.24...v1.0.0-alpha.25) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* typo ([907aceb](https://github.com/hatiolab/operato/commit/907acebaf882613991bce064efea435c2d148543))
+
+
+
+## [1.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.23...v1.0.0-alpha.24) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* refactoring grist-editor, property-editor and input ([bdc3197](https://github.com/hatiolab/operato/commit/bdc31977d148c80a3ac0bea4b33160bac277df1e))
+* refactoring grist-editor, property-editor and input ([ea7431a](https://github.com/hatiolab/operato/commit/ea7431a5e2dfd96ef392c1905e9622df7c2ef88c))
+
 
 
+## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+
 ### :rocket: New Features
 
-* 1.0-alpha ([42f87cf](https://github.com/hatiolab/operato/commit/42f87cf6a3cef0381db91ecb1179e63c64c01370))
+- @operato/ccp module added ([f08ba5a](https://github.com/hatiolab/operato/commit/f08ba5a464c04b7fb132c6f18de975997087846a))
 
+## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
 
+**Note:** Version bump only for package @operato/app
 
-### [0.4.3](https://github.com/hatiolab/operato/compare/v0.4.2...v0.4.3) (2022-03-06)
+## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
+
+### :bug: Bug Fix
+
+- image-selector in ox-input-background-pattern ([b88c6e1](https://github.com/hatiolab/operato/commit/b88c6e141d5d636bff4b29fbae3c790d80b641bc))
+
+## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
+
+### :bug: Bug Fix
+
+- missing font module import ([a5348cf](https://github.com/hatiolab/operato/commit/a5348cf0d567927f18bf31bba09994f3fbf742f6))
+
+## [1.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.16...v1.0.0-alpha.17) (2022-03-13)
+
+### :bug: Bug Fix
+
+- some missings in font module ([6c1ba6d](https://github.com/hatiolab/operato/commit/6c1ba6d89b8ff75b03c6b4ce813f5d3d09c7437b))
+
+## [1.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2022-03-13)
+
+### :bug: Bug Fix
+
+- downgrad graphql related libraries ([d26b80f](https://github.com/hatiolab/operato/commit/d26b80fc31b10bfd3bf31b6473151af52f857c66))
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+### :rocket: New Features
+
+- migrate input, property-editor from things-factory ([dbd5e73](https://github.com/hatiolab/operato/commit/dbd5e73eac328e72c4bb7abd113a819532bc894d))
+
+## [1.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
 
 **Note:** Version bump only for package @operato/app
 
+## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
 
+**Note:** Version bump only for package @operato/app
 
+## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
 
+### :rocket: New Features
 
-### [0.4.2](https://github.com/hatiolab/operato/compare/v0.4.1...v0.4.2) (2022-03-06)
+- migrate input, property-editor from things-factory ([4800d85](https://github.com/hatiolab/operato/commit/4800d859473bf623325233a7f2af851e5d093dcb))
+
+## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
 
+### :bug: Bug Fix
+
+- ox-grist-editor-resource-code for grist ([cb80692](https://github.com/hatiolab/operato/commit/cb80692039e41d7b94b98ac1845822563e179e24))
+- ox-property-editor-attachment-selector ([a1a2d20](https://github.com/hatiolab/operato/commit/a1a2d20640746c891248fdb729097614676c9cff))
+
+## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
 
 ### :rocket: New Features
 
-* add @operato/app module to support productivity for web application ([217d1f2](https://github.com/hatiolab/operato/commit/217d1f2d99ff75dcd8da1293814653f4758c04b8))
+- settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
+
+## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
+
+### :rocket: New Features
+
+- start migration grist editors from things-factory ([8b31c7f](https://github.com/hatiolab/operato/commit/8b31c7f00ae9b32e68f6860c559a768c3d456704))
+
+### :bug: Bug Fix
+
+- migrate parameter-editor from things-factory ([019a30d](https://github.com/hatiolab/operato/commit/019a30df6fd4c8a273d4194d13f5784ed6f8d956))
+
+## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-03-10)
+
+**Note:** Version bump only for package @operato/app
+
+## [1.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v0.4.3...v1.0.0-alpha.1) (2022-03-09)
+
+### :rocket: New Features
+
+- 1.0-alpha ([42f87cf](https://github.com/hatiolab/operato/commit/42f87cf6a3cef0381db91ecb1179e63c64c01370))
+
+### [0.4.3](https://github.com/hatiolab/operato/compare/v0.4.2...v0.4.3) (2022-03-06)
+
+**Note:** Version bump only for package @operato/app
+
+### [0.4.2](https://github.com/hatiolab/operato/compare/v0.4.1...v0.4.2) (2022-03-06)
+
+### :rocket: New Features
 
+- add @operato/app module to support productivity for web application ([217d1f2](https://github.com/hatiolab/operato/commit/217d1f2d99ff75dcd8da1293814653f4758c04b8))
 
 ### :mega: Other
 
-* delete unused ([0c23746](https://github.com/hatiolab/operato/commit/0c237461b67a8b9cc69304ea963cb230e7c143e4))
+- delete unused ([0c23746](https://github.com/hatiolab/operato/commit/0c237461b67a8b9cc69304ea963cb230e7c143e4))

package/demo/data-grist-test.html

@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <style>
+      body {
+        /* box-sizing: border-box; */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      #app {
+        width: 100vw;
+        height: 100vh;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      #demo {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      grist-demo {
+        flex: 1;
+        overflow: auto;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '../dist/index.js'
+      import '../dist/src/filters/filters-form.js'
+      import '../dist/src/sorters/sorters-control.js'
+      import '../dist/src/record-view/record-creator.js'
+      import '@operato/popup/ox-popup-list.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 120993
+        var start = (page - 1) * limit
+
+        await new Promise(resolve => setTimeout(resolve, 500))
+
+        return {
+          total,
+          records: Array(limit * page > total ? total % limit : limit)
+            .fill()
+            .map((item, idx) => {
+              return {
+                id: idx,
+                name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+                description:
+                  idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+                email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
+                active: Math.round(Math.random() * 2) % 2 ? true : false,
+                barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
+                company:
+                  idx % 2
+                    ? {
+                        id: '2',
+                        name: 'HatioLAB',
+                        description: `경기도 성남시-${start + idx + 1}`
+                      }
+                    : {
+                        id: '3',
+                        name: 'HatioSEA',
+                        description: `말레이시아 세티아알람-${start + idx + 1}`
+                      },
+                thumbnail:
+                  idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
+                    ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                    : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+                role: ['admin', 'worker', 'tester'][idx % 3],
+                color: idx % 2 ? `#87f018` : `#180f87`,
+                rate: Math.round(Math.random() * 100),
+                dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
+                dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
+                homepage:
+                  idx % 2
+                    ? `http://hatiolab.com/${start + idx + 1}`
+                    : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+                json5: {
+                  abc: 'abc',
+                  value: 123
+                },
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+
+      const config = {
+        list: {
+          thumbnail: 'thumbnail',
+          fields: ['name', 'description'],
+          details: ['role', 'email']
+        },
+        columns: [
+          {
+            type: 'gutter',
+            gutterName: 'dirty'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'sequence'
+          },
+          {
+            type: 'gutter',
+            gutterName: 'row-selector',
+            multiple: true
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'edit',
+            handlers: {
+              click: function () {
+                console.log('clicked')
+              }
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'link',
+            name: 'name',
+            label: true,
+            header: 'name',
+            record: {
+              editable: true,
+              options: {
+                // href: 'http://hatiolab.com',
+                href: function (column, record, rowIndex) {
+                  return record['homepage']
+                },
+                target: '_blank'
+              }
+            },
+            filter: 'search',
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: 'description',
+            filter: 'search',
+            record: {
+              editable: true,
+              align: 'left'
+            },
+            width: 200,
+            handlers: {
+              click: (columns, data, column, record, rowIndex, target) => {
+                alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+              }
+            }
+          },
+          {
+            type: 'email',
+            name: 'email',
+            label: true,
+            header: 'email',
+            record: {
+              editable: true
+            },
+            filter: 'search',
+            sortable: true,
+            width: 130,
+            validation: function (after, before, record, column) {
+              if (after.indexOf('@') == -1) {
+                document.dispatchEvent(
+                  new CustomEvent('notify', {
+                    detail: {
+                      type: 'error',
+                      message: `invalid value - ${after}`
+                    }
+                  })
+                )
+                return false
+              }
+              return true
+            }
+          },
+          {
+            type: 'boolean',
+            name: 'active',
+            header: 'active',
+            record: {
+              editable: true
+            },
+            filter: true,
+            handlers: {
+              dblclick: () => {
+                const grist = document.querySelector('ox-grist')
+                console.log(grist.dirtyRecords)
+              }
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'select',
+            name: 'role',
+            label: true,
+            header: 'role',
+            record: {
+              options: ['', 'admin', 'worker', 'tester'],
+              editable: true
+            },
+            filter: true,
+            sortable: true,
+            width: 120
+          },
+          {
+            type: 'color',
+            name: 'color',
+            header: 'color',
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'float',
+            name: 'rate',
+            header: 'rate',
+            record: {
+              align: 'right',
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 50
+          },
+          {
+            type: 'json5',
+            name: 'json5',
+            header: 'JSON5',
+            width: 200
+          },
+          {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+              editable: true
+            }
+          },
+          {
+            type: 'datetime',
+            name: 'updatedAt',
+            header: 'updated at',
+            record: {
+              editable: true
+            },
+            filter: 'between',
+            sortable: true,
+            width: 180
+          },
+          {
+            type: 'datetime',
+            name: 'createdAt',
+            header: 'created at',
+            record: {
+              editable: false
+            },
+            sortable: true,
+            width: 180
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          },
+          handlers: {
+            click: 'select-row-toggle'
+          },
+          classifier: function (record, rowIndex) {
+            const rate = record['rate']
+            const emphasized =
+              rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+            return {
+              emphasized
+            }
+          }
+        },
+        sorters: [
+          {
+            name: 'name',
+            desc: true
+          },
+          {
+            name: 'email'
+          }
+        ],
+        pagination: {
+          pages: [20, 30, 50, 100, 200]
+        }
+      }
+
+      class GristDemo extends LitElement {
+        static styles = [
+          CommonGristStyles,
+          css`
+            :host {
+              display: flex;
+              flex-direction: column;
+            }
+
+            #tailer {
+              display: flex;
+              flex-direction: row;
+              margin: 0 var(--margin-default);
+            }
+
+            #tailer a {
+              padding: 0 var(--padding-default) 0 var(--padding-default);
+              margin: 0 var(--margin-narrow);
+              border-right: 1px solid rgba(0, 0, 0, 0.1);
+              font-size: var(--fontsize-default);
+              color: var(--primary-color);
+            }
+          `
+        ]
+
+        static get properties() {
+          return {
+            mode: String
+          }
+        }
+
+        get grist() {
+          return this.renderRoot.querySelector('ox-grist')
+        }
+
+        render() {
+          const mode = this.mode || 'CARD'
+
+          return html`
+            <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+              <div id="filters" slot="headroom">
+                <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
+              </div>
+
+              <div slot="headroom" id="headroom">
+                <div id="tailer">
+                  <a href="./report-test.html">Report Test</a>
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').reset()
+                    }}
+                    >Reset</a
+                  >
+                  <a
+                    href="#"
+                    @click=${() => {
+                      this.renderRoot.querySelector('ox-grist').fetch(true)
+                    }}
+                    >Fetch</a
+                  >
+                </div>
+
+                <div id="sorters">
+                  Sort
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >expand_more</mwc-icon
+                  >
+                  <ox-popup id="sorter-control">
+                    <ox-sorters-control> </ox-sorters-control>
+                  </ox-popup>
+                </div>
+
+                <div id="modes">
+                  <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
+                  <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+                </div>
+
+                <ox-record-creator id="add" light-popup>
+                  <button><mwc-icon>add</mwc-icon></button>
+                </ox-record-creator>
+
+                <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
+              </div>
+            </ox-grist>
+          `
+        }
+      }
+
+      customElements.define('grist-demo', GristDemo)
+
+      setTimeout(() => {
+        render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
+      })
+    </script>
+
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>