@operato/input 2.0.0-beta.24 → 2.0.0-beta.26

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-beta.24",
+  "version": "2.0.0-beta.26",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -203,11 +203,12 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
+    "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
     "@material/web": "^1.5.0",
     "@operato/color-picker": "^2.0.0-beta.23",
-    "@operato/i18n": "^2.0.0-beta.23",
-    "@operato/popup": "^2.0.0-beta.24",
+    "@operato/i18n": "^2.0.0-beta.26",
+    "@operato/popup": "^2.0.0-beta.26",
     "@operato/styles": "^2.0.0-beta.23",
     "@operato/utils": "^2.0.0-beta.23",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -253,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f9c8a5a062f3ba213cd0f146cabf54369f7b1c1e"
+  "gitHead": "7985e734b326247f804b6e0a7ef00154db31f0bb"
 }

package/src/ox-checkbox.ts

@@ -40,7 +40,7 @@ export class OxCheckbox extends OxFormField {
       }
 
       :host([checked]) .checkbox {
-        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));
+        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));
       }
 
       path {
@@ -61,11 +61,12 @@ export class OxCheckbox extends OxFormField {
       }
 
       .label {
-        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));
+        font-size: var(--md-sys-typescale-label-medium-size, 1rem);
         line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
       }
       :host([checked]) .label {
+        color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));
         font-weight: 700;
       }
     `

package/src/ox-input-multiple-colors.ts

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputColor } from './ox-input-color.js'
@@ -38,29 +39,32 @@ export class OxInputMultipleColors extends OxFormField {
       grid-gap: var(--spacing-medium);
       align-items: center;
       justify-content: left;
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-tiny, 2px);
     }
 
     ox-input-color {
       width: 100%;
     }
 
+    md-icon {
+      pointer-events: none;
+    }
+
     button {
       height: 100%;
       border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
+      border-radius: 0;
+      background-color: transparent;
       line-height: 0.8;
-      color: var(--button-color);
+      color: var(--md-sys-color-on-surface);
       cursor: pointer;
     }
 
-    button:focus,
     button:hover,
     button:active {
       border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--md-sys-color-primary-container);
+      background-color: var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-primary);
     }
   `
 
@@ -79,7 +83,7 @@ export class OxInputMultipleColors extends OxFormField {
         ${(this.value || []).map(
           (item, index) => html`
             <div>
-              <button @click=${() => this._appendEditorColor()} data-index=${index} ?disabled=${this.disabled}>
+              <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
                 <md-icon>add</md-icon>
               </button>
               <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
@@ -87,7 +91,7 @@ export class OxInputMultipleColors extends OxFormField {
               ${(this.value || []).length > 1
                 ? html`
                     <button
-                      @click=${(e: Event) => this._removeEditorColor(e)}
+                      @tap=${(e: Event) => this._removeEditorColor(e)}
                       data-index=${index}
                       ?disabled=${this.disabled}
                     >
@@ -106,8 +110,11 @@ export class OxInputMultipleColors extends OxFormField {
     this.value = Array.from(this.colors).map(color => color.value!)
   }
 
-  _appendEditorColor() {
-    this.value = [...this.value, 'black']
+  _appendEditorColor(e: Event) {
+    const idx = Number((e.target as HTMLElement).getAttribute('data-index'))
+    const hue = this.value[idx] || '#fff'
+    this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())
+    this.value = [...this.value]
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
@@ -115,8 +122,11 @@ export class OxInputMultipleColors extends OxFormField {
   _removeEditorColor(e: Event) {
     var values = []
     for (var i = 0; i < this.value.length; i++) {
-      if (i == Number((e.target as HTMLElement).dataset.index)) continue
-      else values.push(this.value[i])
+      if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {
+        continue
+      } else {
+        values.push(this.value[i])
+      }
     }
 
     this.value = values