@operato/dataset 2.0.0-alpha.64 → 2.0.0-alpha.68

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.64",
+  "version": "2.0.0-alpha.68",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -105,19 +105,17 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.64",
+    "@material/web": "^1.4.0",
+    "@operato/data-grist": "^2.0.0-alpha.68",
     "@operato/graphql": "^2.0.0-alpha.57",
-    "@operato/grist-editor": "^2.0.0-alpha.64",
+    "@operato/grist-editor": "^2.0.0-alpha.68",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.64",
-    "@operato/popup": "^2.0.0-alpha.62",
-    "@operato/property-editor": "^2.0.0-alpha.64",
-    "@operato/shell": "^2.0.0-alpha.63",
-    "@operato/styles": "^2.0.0-alpha.62",
-    "@operato/utils": "^2.0.0-alpha.57",
+    "@operato/input": "^2.0.0-alpha.68",
+    "@operato/popup": "^2.0.0-alpha.68",
+    "@operato/property-editor": "^2.0.0-alpha.68",
+    "@operato/shell": "^2.0.0-alpha.68",
+    "@operato/styles": "^2.0.0-alpha.68",
+    "@operato/utils": "^2.0.0-alpha.68",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -152,5 +150,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "51399aac2553f6a1c2c242295ba9e996f3562067"
+  "gitHead": "147f2ca9e09180c6851dccacf340fc660e7548ab"
 }

package/src/grist-editor/ox-popup-data-item-spec.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '../ox-data-item-spec.js'
 
 import { css, html, LitElement } from 'lit'
@@ -59,8 +60,8 @@ export class OxPopupDataItemSpec extends LitElement {
       </ox-data-item-spec>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-data-entry-form.ts

@@ -71,7 +71,7 @@ export class OxDataEntryForm extends LitElement {
         vertical-align: middle;
       }
 
-      mwc-icon {
+      md-icon {
         margin-top: -3px;
         font-size: 0.9rem;
       }
@@ -244,7 +244,7 @@ export class OxDataEntryForm extends LitElement {
 
       return html` <div label>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${elements}</div>
       </div>`
     })

package/src/ox-data-entry-view.ts

@@ -39,7 +39,7 @@ export class OxDataEntryView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -87,7 +87,7 @@ export class OxDataEntryView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
@@ -161,7 +161,7 @@ export class OxDataEntryView extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${elements}</div>
       </label>`
     })
@@ -178,7 +178,7 @@ export class OxDataEntryView extends LitElement {
     const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
 
     return html` <h2>${name}</h2>
-      <p page-description><mwc-icon>info_outline</mwc-icon> ${description}<br /></p>
+      <p page-description><md-icon>info</md-icon> ${description}<br /></p>
 
       <form>
         <table>
@@ -205,8 +205,8 @@ export class OxDataEntryView extends LitElement {
                 <td>${unit}</td>
                 <td>${this.buildValue(type, value)}</td>
                 <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
+                <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
               </tr>
             `
           })}

package/src/ox-data-item-spec.ts

@@ -52,7 +52,7 @@ export class OxDataItemSpec extends LitElement {
     div[description] * {
       vertical-align: middle;
     }
-    div[description] mwc-icon {
+    div[description] md-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }
@@ -94,12 +94,13 @@ export class OxDataItemSpec extends LitElement {
   render() {
     return html`<form @property-change=${(e: Event) => this.onChange(e)}>
       ${this.dataItemSpecSets.map(
-        ({ name, description, specs }) => html` <label
-          ><div name>${name}</div>
-          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
-          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
-          </ox-properties-dynamic-view
-        ></label>`
+        ({ name, description, specs }) =>
+          html` <label
+            ><div name>${name}</div>
+            <div description><md-icon>info</md-icon> ${description}</div>
+            <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
+            </ox-properties-dynamic-view
+          ></label>`
       )}
     </form>`
   }

package/src/ox-data-ooc-badge.ts

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -15,7 +15,7 @@ export class OxDataOocBadge extends LitElement {
       text-align: center;
     }
 
-    mwc-icon {
+    md-icon {
       font-size: 80px;
       opacity: 0.4;
       color: var(--primary-background-color);
@@ -56,7 +56,7 @@ export class OxDataOocBadge extends LitElement {
 
     return html`
       <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
+        <md-icon>shield</md-icon>
         <div>DATA OOC <span field-state>${state || ''}</span></div>
       </h3>
     `

package/src/ox-data-ooc-brief-view.ts

@@ -2,7 +2,7 @@ import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
 import './ox-data-ooc-badge'
 import './ox-data-ooc-correction-part'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'

package/src/ox-data-ooc-correction-part.ts

@@ -1,5 +1,5 @@
 import '@operato/input/ox-input-file.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -26,7 +26,7 @@ export class OxDataOocCorrectionPart extends LitElement {
       font-size: 20px;
     }
 
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -49,7 +49,7 @@ export class OxDataOocCorrectionPart extends LitElement {
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;
@@ -85,7 +85,7 @@ export class OxDataOocCorrectionPart extends LitElement {
             <h3>${i18next.t('label.corrective instruction')}</h3>
             <p>
               <span field-info
-                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
+                >${formatter.format(new Date(reviewedAt!))} <md-icon>account_circle</md-icon>${reviewer.name}</span
               >
               <strong>${correctiveInstruction}</strong>
             </p>
@@ -96,7 +96,7 @@ export class OxDataOocCorrectionPart extends LitElement {
             <h3>${i18next.t('label.corrective action')}</h3>
             <p>
               <span field-info
-                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
+                >${formatter.format(new Date(correctedAt!))} <md-icon>account_circle</md-icon>${corrector.name}</span
               >
               <strong>${correctiveAction}</strong>
             </p>

package/src/ox-data-ooc-history.ts

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -10,7 +10,7 @@ import { DataOoc } from './types.js'
 @customElement('ox-data-ooc-history')
 export class OxDataOocHistory extends LitElement {
   static styles = css`
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -33,7 +33,7 @@ export class OxDataOocHistory extends LitElement {
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;
@@ -62,7 +62,7 @@ export class OxDataOocHistory extends LitElement {
           <p page-history>
             <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
             <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+              >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
             >
             <span field-state>${state}</span>
             <strong>${comment}</strong>

package/src/ox-data-ooc-view.ts

@@ -1,7 +1,7 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
 import './ox-data-ooc-history'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'

package/src/ox-data-sample-subgroup-view.ts

@@ -70,7 +70,7 @@ export class OxDataSampleSubgroupView extends LitElement {
       border-left: none;
     }
 
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
@@ -109,19 +109,18 @@ export class OxDataSampleSubgroupView extends LitElement {
           ${subgroupDataItems.map(dataItem => html` <td>${dataItem.description}</td> `)}
         </tr>
         ${Array.from({ length: records }, (_, index) => index).map(
-          index =>
-            html`
-              <tr>
-                <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
-                ${subgroupDataItems.map(dataItem => {
-                  const { tag = '', type } = dataItem
-                  const valueArray = data[tag]
-                  const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
-
-                  return html` <td>${this.buildValue(type, value)}</td> `
-                })}
-              </tr>
-            `
+          index => html`
+            <tr>
+              <td class="label">${records > 1 ? index + 1 : i18next.t('field.value')}</td>
+              ${subgroupDataItems.map(dataItem => {
+                const { tag = '', type } = dataItem
+                const valueArray = data[tag]
+                const value = Array.isArray(valueArray) ? valueArray[index] : index == 0 ? valueArray : undefined
+
+                return html` <td>${this.buildValue(type, value)}</td> `
+              })}
+            </tr>
+          `
         )}
         <tr>
           <td class="label">${i18next.t('field.spec')}</td>
@@ -132,13 +131,13 @@ export class OxDataSampleSubgroupView extends LitElement {
         <tr>
           <td class="label">${i18next.t('field.ooc')}</td>
           ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.ooc ? html`<md-icon>done</md-icon>` : nothing}</td> `
           )}
         </tr>
         <tr>
           <td class="label">${i18next.t('field.oos')}</td>
           ${subgroupDataItems.map(
-            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<mwc-icon>done</mwc-icon>` : nothing}</td> `
+            dataItem => html` <td>${judgment?.[dataItem.tag]?.oos ? html`<md-icon>done</md-icon>` : nothing}</td> `
           )}
         </tr>
       </table>`

package/src/ox-data-sample-view.ts

@@ -40,7 +40,7 @@ export class OxDataSampleView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -88,7 +88,7 @@ export class OxDataSampleView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
@@ -134,9 +134,9 @@ export class OxDataSampleView extends LitElement {
 
     return html` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
-        <mwc-icon>pending_actions</mwc-icon> ${i18next.t('field.collected-at')}:
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
+        <md-icon>pending_actions</md-icon> ${i18next.t('field.collected-at')}:
         ${formatter.format(new Date(collectedAt!))}
       </p>
 
@@ -167,8 +167,8 @@ export class OxDataSampleView extends LitElement {
                       <td>${unit}</td>
                       <td>${this.buildValue(type, value)}</td>
                       <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                      <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-                      <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                      <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
+                      <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
                     </tr>
                   `
                 })}

package/src/ox-data-summary-view.ts

@@ -39,7 +39,7 @@ export class OxDataSummaryView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -86,7 +86,7 @@ export class OxDataSummaryView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
@@ -113,8 +113,8 @@ export class OxDataSummaryView extends LitElement {
 
     return html` <h2>${name}</h2>
       <p page-description>
-        <mwc-icon>info_outline</mwc-icon> ${description}<br />
-        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.date')}: ${date} ${period}
+        <md-icon>info</md-icon> ${description}<br />
+        <md-icon>alarm</md-icon> ${i18next.t('field.date')}: ${date} ${period}
       </p>
 
       <form>

package/stories/ox-data-entry-form.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-entry-form.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -193,7 +193,19 @@ var value = {
 
 const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
   <link href="/themes/app-theme.css" 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"
+  />
+
   <style>
     body {
     }

package/stories/ox-data-item-spec.stories.ts

@@ -1,5 +1,5 @@
 import '@operato/i18n'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/property-editor/ox-property-editor-checkbox.js'
 import '@operato/property-editor/ox-property-editor-number.js'
 import '@operato/property-editor/ox-property-editor-string.js'
@@ -107,7 +107,19 @@ var specB = {
 
 const Template: Story<ArgTypes> = ({}: ArgTypes) =>
   html` <link href="/themes/app-theme.css" 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"
+    />
+
     <style>
       body {
       }

package/stories/ox-data-ooc-brief-view.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-ooc-brief-view.js'
 import '../src/usecase/ccp/index.js' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -263,21 +263,32 @@ var dataOoc = {
   ]
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      body {
-      }
-    </style>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" 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"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-ooc-brief-view
-      .dataSet=${dataSet}
-      .dataOoc=${dataOoc}
-      @change=${(e: CustomEvent) => console.log(e.detail)}
-    ></ox-data-ooc-brief-view>
-  `
+  <ox-data-ooc-brief-view
+    .dataSet=${dataSet}
+    .dataOoc=${dataOoc}
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+  ></ox-data-ooc-brief-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-data-ooc-view.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-ooc-view.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -254,21 +254,32 @@ var dataOoc = {
   ]
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      body {
-      }
-    </style>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" 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"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-ooc-view
-      .dataSet=${dataSet}
-      .dataOoc=${dataOoc}
-      @change=${(e: CustomEvent) => console.log(e.detail)}
-    ></ox-data-ooc-view>
-  `
+  <ox-data-ooc-view
+    .dataSet=${dataSet}
+    .dataOoc=${dataOoc}
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+  ></ox-data-ooc-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-data-sample-view.stories.ts

@@ -1,7 +1,7 @@
 import '@operato/i18n'
 import '../src/ox-data-sample-view.js'
 import '../src/usecase/ccp' /* register usecase CCP */
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -227,17 +227,28 @@ var dataSample = {
   collectedAt: Date.now()
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      body {
-      }
-    </style>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" 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"
+  />
+
+  <style>
+    body {
+    }
+  </style>
 
-    <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view>
-  `
+  <ox-data-sample-view .dataSample=${dataSample}></ox-data-sample-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}