@operato/data-grist 2.0.0-alpha.11 → 2.0.0-alpha.110

package/CHANGELOG.md

@@ -3,6 +3,470 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.108](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.107...v2.0.0-alpha.108) (2024-05-02)
+
+
+### :rocket: New Features
+
+* add reset method to ox-search-form and ox-filters-form to clear fields ([b41c48f](https://github.com/hatiolab/operato/commit/b41c48f93f3b1c947724b5f888cc17e6d2e1a385))
+
+
+
+## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
+
+
+### :bug: Bug Fix
+
+* form related stories ([e722c51](https://github.com/hatiolab/operato/commit/e722c51d1d26809e36a113574d848085386b24cd))
+
+
+
+## [2.0.0-alpha.106](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.105...v2.0.0-alpha.106) (2024-04-26)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.105](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.104...v2.0.0-alpha.105) (2024-04-26)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.104](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.103...v2.0.0-alpha.104) (2024-04-26)
+
+
+### :bug: Bug Fix
+
+* time-calculator help document ([cbd2543](https://github.com/hatiolab/operato/commit/cbd254317e6132473b0efa7d2f49b2a1748227ac))
+
+
+
+## [2.0.0-alpha.103](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.102...v2.0.0-alpha.103) (2024-04-26)
+
+
+### :bug: Bug Fix
+
+* ox-filter-form과 ox-search-form에서 필터들간에 연관 기능 지원 ([bc081f8](https://github.com/hatiolab/operato/commit/bc081f8dfbb303f8aa219f0b776aa0cc4b18e9cd))
+
+
+### :mega: Other
+
+* missing types ([ba44d36](https://github.com/hatiolab/operato/commit/ba44d36f525c0fc4cf48ebde54ff442e26a3e725))
+
+
+
+## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.98](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.97...v2.0.0-alpha.98) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* set grid-setting z-index to 1 ([2da04e5](https://github.com/hatiolab/operato/commit/2da04e59195a37a126e36c3d065983aa685b73d3))
+
+
+
+## [2.0.0-alpha.95](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.94...v2.0.0-alpha.95) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* add styles for CSStyles property into PropertySpec ([1c18564](https://github.com/hatiolab/operato/commit/1c185645c2f8e8b0c8a654d15e3b7603b80d2864))
+
+
+
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.93](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.92...v2.0.0-alpha.93) (2024-04-19)
+
+
+### :bug: Bug Fix
+
+* grid body border-bottom style ([708a937](https://github.com/hatiolab/operato/commit/708a93789d23417a318e2ac9f499bec85d7e4776))
+
+
+
+## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
+
+
+### :bug: Bug Fix
+
+* common styles for grist ([6683ec7](https://github.com/hatiolab/operato/commit/6683ec7b21515b49d43420e6a5ef890ff882a96b))
+
+
+
+## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
+
+
+### :bug: Bug Fix
+
+* style for data-grid setting slot ([862b9b9](https://github.com/hatiolab/operato/commit/862b9b908b2fb09ce263897b4e9d704724b6e6d4))
+
+
+
+## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.88](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.87...v2.0.0-alpha.88) (2024-04-18)
+
+
+### :bug: Bug Fix
+
+* put together data-grid setting slot ([b4b6c7d](https://github.com/hatiolab/operato/commit/b4b6c7d5cacfcd0191876e91a96d7c06c26fedee))
+
+
+
+## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
+
+
+### :bug: Bug Fix
+
+* data-grist filters-form stories ([5b46629](https://github.com/hatiolab/operato/commit/5b466290d70885b468fb17b7e294b361de058a2f))
+* data-grist headroom stories ([fc4a193](https://github.com/hatiolab/operato/commit/fc4a193a1e50b5d63a4d7de2dec606d726cc4852))
+
+
+
+## [2.0.0-alpha.86](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.85...v2.0.0-alpha.86) (2024-04-16)
+
+
+### :bug: Bug Fix
+
+* tweak filters-form style ([79e1f68](https://github.com/hatiolab/operato/commit/79e1f68f224770c8ad97d87e3f79327743a3d84d))
+
+
+
+## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
+
+
+### :bug: Bug Fix
+
+* tweak filters-form style ([6fb293d](https://github.com/hatiolab/operato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
+
+
+
+## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
+## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
+
+
+### :bug: Bug Fix
+
+* sorting option desc order를 명확하게 함 ([deae3e0](https://github.com/hatiolab/operato/commit/deae3e06e982fb645d1fd06e9ab5d60bb6e91970))
+
+
+
+## [2.0.0-alpha.61](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
+
+
+### :bug: Bug Fix
+
+* sorters option 의 변경시 새로운 sorter 오브젝트로 리플레이스함 ([644336f](https://github.com/hatiolab/operato/commit/644336f2b643bc67c541c250ef5d5a548a88b030))
+
+
+
+## [2.0.0-alpha.60](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
+
+
+### :bug: Bug Fix
+
+* escape null from filters-form ([f5e1507](https://github.com/hatiolab/operato/commit/f5e1507c759910bf670918a4c251f2d939cf188a))
+
+
+
+## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.54](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.53...v2.0.0-alpha.54) (2024-04-01)
+
+
+### :bug: Bug Fix
+
+* 0값 null처리 되는 현상 수정 ([5e560c3](https://github.com/hatiolab/operato/commit/5e560c369dde7f446155aa7c408d13f346583c71))
+
+
+
+## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
+
+
+### :bug: Bug Fix
+
+* upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
+
+
+
+## [2.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
+
+
+### :bug: Bug Fix
+
+* 모바일 디테일 버튼 클릭 쉽도록 스타일 수정 ([f7b9a34](https://github.com/hatiolab/operato/commit/f7b9a34a0c0d05f1806e6bc862249f2dafefbe7e))
+* 헤더 z-index 수정 (fixed컬럼이랑 동일해야함) ([9ece220](https://github.com/hatiolab/operato/commit/9ece2201c765850ee9869ede2718d2986e0936ce))
+
+
+
+## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.43...v2.0.0-alpha.44) (2024-03-24)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
+
+
+### :bug: Bug Fix
+
+* 리팩토링 grist editor 인라인에디터 ([a8922c4](https://github.com/hatiolab/operato/commit/a8922c40f960596ac58aea885fd7501267fd2d8b))
+
+
+
+## [2.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
+
+
+### :bug: Bug Fix
+
+* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
+
+
+
+## [2.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-02-17)
+
+
+### :bug: Bug Fix
+
+* boolean값 붙여넣기시 true/false로 들어가게 수정 ([b2b371a](https://github.com/hatiolab/operato/commit/b2b371a52a472ffdd29f2e34d7550f6569f0a5eb))
+* parameters 타입도 오브젝트 형식으로 체크 ([81369a0](https://github.com/hatiolab/operato/commit/81369a011fdd4f28befab1bcfddf9168934e830f))
+
+
+
+## [2.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.22...v2.0.0-alpha.23) (2024-02-10)
+
+
+### :bug: Bug Fix
+
+* time-calculator relativeDate(s) => relativeDays ([1ad965e](https://github.com/hatiolab/operato/commit/1ad965e59232bdfe5d90938b95e1085a5e28a527))
+
+
+
+## [2.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.21...v2.0.0-alpha.22) (2024-02-10)
+
+
+### :bug: Bug Fix
+
+* add time-calculator module for data-grist and form ([4d26d22](https://github.com/hatiolab/operato/commit/4d26d22b89e2c34cffe15eb0cc8520962644e8a1))
+
+
+
+## [2.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
+
+**Note:** Version bump only for package @operato/data-grist
+
+
+
+
+
+## [2.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2024-02-03)
+
+
+### :bug: Bug Fix
+
+* rows.editable option for card and list (클릭시 레코드팝업을 보이지 않도록 하기위함) ([f353960](https://github.com/hatiolab/operato/commit/f35396037a7a6747348fc20089c139d5210e37c2))
+
+
+
+## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
+
+
+### :bug: Bug Fix
+
+* accumulator tag, 별도의 텍스트로 변경 ([a82ad24](https://github.com/hatiolab/operato/commit/a82ad24e09485b274d26a5767f4caf2edfc386e4))
+* css-variable --grid-record-padding ([b057312](https://github.com/hatiolab/operato/commit/b0573120fcb46c71b6b283065f08ae926e9f826f))
+* 그리드 필드타입 integer, float도 숫자 처리, 빈값일시 0 처리 추가 ([e964027](https://github.com/hatiolab/operato/commit/e9640270786cefe391f6b785e22a07176fc744f0))
+* 스토리 테스트파일 수정 ([eab4645](https://github.com/hatiolab/operato/commit/eab4645a25c8949634d74e59975bcb4ecf503b16))
+* 한글 입력 보정 ([3572600](https://github.com/hatiolab/operato/commit/3572600370b03c69eb2738640f8702d4fec424d8))
+
+
+
+## [2.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2024-01-24)
+
+
+### :bug: Bug Fix
+
+* contextmenu-tree-mutation ([a2fec38](https://github.com/hatiolab/operato/commit/a2fec3894267f2b572d336297a5a50e84637fb9a))
+
+
+
 ## [2.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
 
 **Note:** Version bump only for package @operato/data-grist

package/demo/data-grist-test.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -38,7 +38,18 @@
       }
     </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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/oops-theme.css" rel="stylesheet" />
@@ -53,7 +64,7 @@
       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 '@material/web/icon/icon.js'
       import { CommonGristStyles } from '@operato/styles'
 
       const fetchHandler = async ({ page, limit, sorters = [] }) => {
@@ -91,10 +102,10 @@
                   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 */,
+                      ? `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),
@@ -411,7 +422,7 @@
 
                 <div id="sorters">
                   Sort
-                  <mwc-icon
+                  <md-icon
                     @click=${e => {
                       const target = e.currentTarget
                       this.renderRoot.querySelector('#sorter-control').open({
@@ -419,7 +430,7 @@
                         top: target.offsetTop + target.offsetHeight
                       })
                     }}
-                    >expand_more</mwc-icon
+                    >expand_more</md-icon
                   >
                   <ox-popup id="sorter-control">
                     <ox-sorters-control> </ox-sorters-control>
@@ -427,16 +438,16 @@
                 </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>
+                  <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+                  <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+                  <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
                 </div>
 
                 <ox-record-creator id="add" light-popup>
-                  <button><mwc-icon>add</mwc-icon></button>
+                  <button><md-icon>add</md-icon></button>
                 </ox-record-creator>
 
-                <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
+                <button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
               </div>
             </ox-grist>
           `

package/demo/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -39,7 +39,18 @@
       }
     </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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/oops-theme.css" rel="stylesheet" />
@@ -54,7 +65,7 @@
       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 '@material/web/icon/icon.js'
       import { CommonGristStyles } from '@operato/styles'
 
       const fetchHandler = async ({ page, limit, sorters = [], filters }) => {
@@ -93,10 +104,10 @@
                   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 */,
+                      ? `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 */,
                 file: 'abce.txt',
                 number: 100200300,
                 role: ['admin', 'worker', 'tester'][idx % 3],
@@ -484,7 +495,7 @@
 
                 <div id="sorters">
                   Sort
-                  <mwc-icon
+                  <md-icon
                     @click=${e => {
                       const target = e.currentTarget
                       this.renderRoot.querySelector('#sorter-control').open({
@@ -492,7 +503,7 @@
                         top: target.offsetTop + target.offsetHeight
                       })
                     }}
-                    >expand_more</mwc-icon
+                    >expand_more</md-icon
                   >
                   <ox-popup id="sorter-control">
                     <ox-sorters-control> </ox-sorters-control>
@@ -500,16 +511,16 @@
                 </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>
+                  <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+                  <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+                  <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
                 </div>
 
                 <ox-record-creator id="add" light-popup>
-                  <button><mwc-icon>add</mwc-icon></button>
+                  <button><md-icon>add</md-icon></button>
                 </ox-record-creator>
 
-                <button @click=${e => this.grist.cloneSelectedRecords()}><mwc-icon>add</mwc-icon></button>
+                <button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
               </div>
             </ox-grist>
           `

package/demo/report-test.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -35,7 +35,18 @@
       }
     </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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/oops-theme.css" rel="stylesheet" />