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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/grist-editor",
-  "version": "2.0.0-alpha.80",
+  "version": "2.0.0-alpha.81",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -96,13 +96,13 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/data-grist": "^2.0.0-alpha.80",
-    "@operato/help": "^2.0.0-alpha.80",
+    "@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.80",
-    "@operato/popup": "^2.0.0-alpha.80",
-    "@operato/property-editor": "^2.0.0-alpha.80",
-    "@operato/styles": "^2.0.0-alpha.80",
+    "@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": "^3.1.2",
@@ -142,5 +142,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9405ad5252a157db9c9680256a6cb65f764a890b"
+  "gitHead": "df2dbdf533ea883e0c4d924a66ef9c0fcab833c3"
 }

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

@@ -6,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 {
@@ -37,13 +38,6 @@ export class OxPopupCrontabInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -55,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">
-        <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>
+        <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

@@ -6,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 {
@@ -27,13 +28,6 @@ export class OxPopupDurationInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -45,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">
-        <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>
+        <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

@@ -6,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 {
@@ -27,17 +28,10 @@ export class OxPopupHashtagsInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
-  @property({ type: Object }) value: string[] = []
+  @property({ type: Array }) value: string[] = []
   @property({ type: Object }) confirmCallback!: (newval: any) => void
 
   render() {
@@ -45,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">
-        <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>
+        <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

@@ -6,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-i18n-label-input')
 export class OxPopupValueMapInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -38,13 +39,6 @@ export class OxPopupValueMapInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -58,8 +52,10 @@ export class OxPopupValueMapInput extends LitElement {
       </ox-input-i18n-label>
 
       <div class="button-container">
-        <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>
+        <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-parameters-builder.ts

@@ -6,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 {
@@ -37,13 +38,6 @@ export class OxPopupParametersBuilder extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -71,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">
-        <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>
+        <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

@@ -6,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 {
@@ -38,13 +39,6 @@ export class OxPopupPartitionKeysInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -57,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">
-        <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>
+        <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-value-map-input.ts

@@ -7,11 +7,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-value-map-input')
 export class OxPopupValueMapInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -38,13 +39,6 @@ export class OxPopupValueMapInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        gap: 10px;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -65,8 +59,10 @@ export class OxPopupValueMapInput extends LitElement {
       </ox-input-value-map>
 
       <div class="button-container">
-        <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>
+        <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-value-ranges-input.ts

@@ -6,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-value-ranges-input')
 export class OxPopupValueRangesInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -37,11 +38,6 @@ export class OxPopupValueRangesInput extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -62,8 +58,10 @@ export class OxPopupValueRangesInput extends LitElement {
       </ox-input-value-ranges>
 
       <div class="button-container">
-        <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>
+        <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>
     `
   }