@operato/grist-editor 2.0.0-alpha.8 → 2.0.0-alpha.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/grist-editor",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0-alpha.81",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -17,42 +17,51 @@
   },
   "exports": {
     ".": "./dist/src/index.js",
-    "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
     "./ox-grist-editor-crontab.js": "./dist/src/ox-grist-editor-crontab.js",
+    "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
+    "./ox-grist-editor-hashtags.js": "./dist/src/ox-grist-editor-hashtags.js",
+    "./ox-grist-editor-i18n-label.js": "./dist/src/ox-grist-editor-i18n-label.js",
     "./ox-grist-editor-parameters.js": "./dist/src/ox-grist-editor-parameters.js",
-    "./ox-grist-editor-value-map.js": "./dist/src/ox-grist-editor-value-map.js",
-    "./ox-grist-editor-value-ranges.js": "./dist/src/ox-grist-editor-value-ranges.js",
     "./ox-grist-editor-partition-keys.js": "./dist/src/ox-grist-editor-partition-keys.js",
     "./ox-grist-editor-quantifier.js": "./dist/src/ox-grist-editor-quantifier.js",
+    "./ox-grist-editor-value-map.js": "./dist/src/ox-grist-editor-value-map.js",
+    "./ox-grist-editor-value-ranges.js": "./dist/src/ox-grist-editor-value-ranges.js",
     "./ox-grist-renderer-crontab.js": "./dist/src/ox-grist-renderer-crontab.js",
     "./ox-grist-renderer-duration.js": "./dist/src/ox-grist-renderer-duration.js",
     "./ox-grist-renderer-hashtags.js": "./dist/src/ox-grist-renderer-hashtags.js",
+    "./ox-grist-renderer-i18n-label.js": "./dist/src/ox-grist-renderer-i18n-label.js",
     "./ox-grist-renderer-partition-keys.js": "./dist/src/ox-grist-renderer-partition-keys.js",
     "./ox-grist-renderer-quantifier.js": "./dist/src/ox-grist-renderer-quantifier.js"
   },
   "typesVersions": {
     "*": {
+      "ox-grist-editor-crontab.js": [
+        "dist/src/ox-grist-editor-crontab.d.ts"
+      ],
       "ox-grist-editor-duration.js": [
         "dist/src/ox-grist-editor-duration.d.ts"
       ],
-      "ox-grist-editor-crontab.js": [
-        "dist/src/ox-grist-editor-crontab.d.ts"
+      "ox-grist-editor-hashtags.js": [
+        "dist/src/ox-grist-editor-hashtags.d.ts"
+      ],
+      "ox-grist-editor-i18n-label.js": [
+        "dist/src/ox-grist-editor-i18n-label.d.ts"
       ],
       "ox-grist-editor-parameters.js": [
         "dist/src/ox-grist-editor-parameters.d.ts"
       ],
-      "ox-grist-editor-value-map.js": [
-        "dist/src/ox-grist-editor-value-map.d.ts"
-      ],
-      "ox-grist-editor-value-ranges.js": [
-        "dist/src/ox-grist-editor-value-ranges.d.ts"
-      ],
       "ox-grist-editor-partition-keys.js": [
         "dist/src/ox-grist-editor-partition-keys.d.ts"
       ],
       "ox-grist-editor-quantifier.js": [
         "dist/src/ox-grist-editor-quantifier.d.ts"
       ],
+      "ox-grist-editor-value-map.js": [
+        "dist/src/ox-grist-editor-value-map.d.ts"
+      ],
+      "ox-grist-editor-value-ranges.js": [
+        "dist/src/ox-grist-editor-value-ranges.d.ts"
+      ],
       "ox-grist-renderer-crontab.js": [
         "dist/src/ox-grist-renderer-crontab.d.ts"
       ],
@@ -62,6 +71,9 @@
       "ox-grist-renderer-hashtags.js": [
         "dist/src/ox-grist-renderer-hashtags.d.ts"
       ],
+      "ox-grist-renderer-i18n-label.js": [
+        "dist/src/ox-grist-renderer-i18n-label.d.ts"
+      ],
       "ox-grist-renderer-partition-keys.js": [
         "dist/src/ox-grist-renderer-partition-keys.d.ts"
       ],
@@ -83,41 +95,37 @@
     "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.8",
-    "@operato/help": "^2.0.0-alpha.8",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.8",
-    "@operato/popup": "^2.0.0-alpha.8",
-    "@operato/property-editor": "^2.0.0-alpha.8",
-    "@operato/styles": "^2.0.0-alpha.0",
+    "@material/web": "^1.4.0",
+    "@operato/data-grist": "^2.0.0-alpha.81",
+    "@operato/help": "^2.0.0-alpha.81",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/input": "^2.0.0-alpha.81",
+    "@operato/popup": "^2.0.0-alpha.81",
+    "@operato/property-editor": "^2.0.0-alpha.81",
+    "@operato/styles": "^2.0.0-alpha.81",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
     "@types/w3c-web-usb": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -134,5 +142,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b76564615d73b9da50d13d30d43cdaa0d4a6fa6"
+  "gitHead": "df2dbdf533ea883e0c4d924a66ef9c0fcab833c3"
 }

package/src/index.ts

@@ -12,6 +12,8 @@ import { OxGristRendererQuantifier } from './ox-grist-renderer-quantifier'
 import { OxGristRendererHashtags } from './ox-grist-renderer-hashtags'
 import { OxGristRendererPartitionKeys } from './ox-grist-renderer-partition-keys.js'
 import { OxGristEditorValueRanges } from './ox-grist-editor-value-ranges.js'
+import { OxGristEditorI18nLabel } from './ox-grist-editor-i18n-label.js'
+import { OxGristRendererI18nLabel } from './ox-grist-renderer-i18n-label.js'
 
 /* register grist renderer/editor for id */
 registerEditor('parameters', OxGristEditorParameters)
@@ -22,6 +24,7 @@ registerEditor('crontab', OxGristEditorCrontab)
 registerEditor('duration', OxGristEditorDuration)
 registerEditor('quantifier', OxGristEditorQuantifier)
 registerEditor('hashtags', OxGristEditorHashtags)
+registerEditor('i18n-label', OxGristEditorI18nLabel)
 
 registerRenderer('parameters', OxGristRendererJson5)
 registerRenderer('value-map', OxGristRendererJson5)
@@ -30,3 +33,4 @@ registerRenderer('partition-keys', OxGristRendererPartitionKeys)
 registerRenderer('duration', OxGristRendererDuration)
 registerRenderer('quantifier', OxGristRendererQuantifier)
 registerRenderer('hashtags', OxGristRendererHashtags)
+registerRenderer('i18n-label', OxGristRendererI18nLabel)

package/src/ox-grist-editor-i18n-label.ts

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-popup-i18n-label-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import json5 from 'json5'
+
+import { cloneDeep } from 'lodash-es'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-i18n-label')
+export class OxGristEditorI18nLabel extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get options() {
+    return this.column.record?.options || {}
+  }
+
+  get editorTemplate() {
+    const { displayColumn } = this.column.record.options || {}
+
+    const value =
+      this.value && typeof this.value === 'object'
+        ? this.value[i18next.language || 'en-US']
+        : displayColumn
+          ? this.record[displayColumn]
+          : ''
+
+    return html`<div tabindex="0">${value || ''}</div>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  async openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const { name, help, languages, objectified = false } = this.options || {}
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: !objectified ? JSON.stringify(newval) : newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    try {
+      var value: any =
+        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})
+    } catch (e) {
+      var value: any = {}
+    }
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+    */
+    var template = html`
+      <ox-popup-i18n-label-input .value=${value} .languages=${languages} .confirmCallback=${confirmCallback}>
+      </ox-popup-i18n-label-input>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || i18next.t('title.i18n-label')} `,
+      help
+    })
+  }
+}

package/src/ox-grist-editor-partition-keys.ts

@@ -18,7 +18,7 @@ export class OxGristEditorPartitionKeys extends OxGristEditor {
 
   get editorTemplate() {
     return this.value && this.value instanceof Array && this.value.length > 0
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">key</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">key</md-icon>`
       : html``
   }
 

package/src/ox-grist-renderer-i18n-label.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import i18next from 'i18next'
+
+export const OxGristRendererI18nLabel: FieldRenderer = (value, column, record, rowIndex, field) => {
+  const language = i18next.language || 'en-US'
+  const labels = value || {}
+  const label = labels[language] || labels[language.substring(0, 2)] || labels['en'] || ''
+
+  return html`<span>${label}</span>`
+}

package/src/ox-grist-renderer-partition-keys.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { html } from 'lit'
 import { FieldRenderer } from '@operato/data-grist'
 
@@ -15,11 +15,11 @@ function onmouseout(e: MouseEvent) {
 
 export const OxGristRendererPartitionKeys: FieldRenderer = (value, column, record, rowIndex, field) => {
   return value && value instanceof Array && value.length > 0
-    ? html`<mwc-icon
-        style="--mdc-icon-size:1.3em"
+    ? html`<md-icon
+        style="--md-icon-size:1.3em"
         @mouseover=${(e: MouseEvent) => onmouseover(e, value)}
         @mouseout=${onmouseout}
-        >key</mwc-icon
+        >key</md-icon
       >`
     : html``
 }

package/src/ox-popup-crontab-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-crontab.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-crontab-input')
 export class OxPopupCrontabInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -36,11 +38,6 @@ export class OxPopupCrontabInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -52,8 +49,10 @@ export class OxPopupCrontabInput extends LitElement {
       <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>
 
       <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>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/ox-popup-duration-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-duration.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-duration-input')
 export class OxPopupDurationInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -26,11 +28,6 @@ export class OxPopupDurationInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -42,8 +39,10 @@ export class OxPopupDurationInput extends LitElement {
       <ox-input-duration .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-duration>
 
       <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>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/ox-popup-hashtags-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-hashtags.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-hashtags-input')
 export class OxPopupHashtagsInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -26,15 +28,10 @@ export class OxPopupHashtagsInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
-  @property({ type: Object }) value: string[] = []
+  @property({ type: Array }) value: string[] = []
   @property({ type: Object }) confirmCallback!: (newval: any) => void
 
   render() {
@@ -42,8 +39,10 @@ export class OxPopupHashtagsInput extends LitElement {
       <ox-input-hashtags .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-hashtags>
 
       <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>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/ox-popup-i18n-label-input.ts

@@ -0,0 +1,97 @@
+import '@material/web/button/elevated-button.js'
+import '@operato/input/ox-input-i18n-label.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-popup-i18n-label-input')
+export class OxPopupValueMapInput extends LitElement {
+  static styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-i18n-label {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--padding-default);
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: Array }) languages: { code: string; display: string }[] = []
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  render() {
+    return html`
+      <ox-input-i18n-label .value=${this.value} .languages=${this.languages} @change=${this.onChange.bind(this)}>
+      </ox-input-i18n-label>
+
+      <div class="button-container">
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+      </div>
+    `
+  }
+
+  private onChange(e: CustomEvent) {
+    e.stopPropagation()
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+      => 
+      이런 이유로, Object.assign(...)을 사용하였다.
+    */
+
+    if (!this.value || typeof this.value !== 'object') {
+      this.value = {}
+    }
+
+    for (let key in this.value) {
+      delete this.value[key]
+    }
+
+    Object.assign(this.value, e.detail)
+  }
+
+  private onCancel(e: Event) {
+    closePopup(this)
+  }
+
+  private onConfirm(e: Event) {
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+}

package/src/ox-popup-parameters-builder.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-parameters-builder')
 export class OxPopupParametersBuilder extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -36,11 +38,6 @@ export class OxPopupParametersBuilder extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -68,8 +65,10 @@ export class OxPopupParametersBuilder extends LitElement {
         : html` <span><ox-i18n msgid="text.no properties to set"></ox-i18n></span> `}
 
       <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>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/ox-popup-partition-keys-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-partition-keys.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-partition-keys-input')
 export class OxPopupPartitionKeysInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -37,11 +39,6 @@ export class OxPopupPartitionKeysInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -54,8 +51,10 @@ export class OxPopupPartitionKeysInput extends LitElement {
       <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>
 
       <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>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }