@operato/input 2.0.0-alpha.145 → 2.0.0-alpha.148

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-alpha.145",
+  "version": "2.0.0-alpha.148",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -196,9 +196,9 @@
     "@lit/localize": "^0.12.1",
     "@material/web": "^1.4.0",
     "@operato/color-picker": "^2.0.0-alpha.111",
-    "@operato/i18n": "^2.0.0-alpha.111",
-    "@operato/popup": "^2.0.0-alpha.145",
-    "@operato/styles": "^2.0.0-alpha.142",
+    "@operato/i18n": "^2.0.0-alpha.148",
+    "@operato/popup": "^2.0.0-alpha.148",
+    "@operato/styles": "^2.0.0-alpha.148",
     "@operato/utils": "^2.0.0-alpha.145",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c56054ea85315ee52caa16387b54ce73fa4bb2bf"
+  "gitHead": "469b2e97392a3766bc7e2bc4807b77406c19c676"
 }

package/src/ox-buttons-radio.ts

@@ -12,18 +12,50 @@ import { OxFormField } from './ox-form-field'
 
 Example:
 
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div value="top"></div>
-    <div value="middle"></div>
-    <div value="bottom"></div>
+  <ox-buttons-radio
+    class="light"
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+    value="1"
+  >
+    <md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
+    <md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
+    <md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
   </ox-buttons-radio>
 */
 @customElement('ox-buttons-radio')
-export class PropertyButtonsRadio extends OxFormField {
+export class OxButtonsRadio extends OxFormField {
   static styles = [
     css`
       :host {
         display: inline-block;
+        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
+
+        --md-outlined-button-label-text-color:var(--md-sys-color-on-surface-variant);
+        --md-outlined-button-label-text-size:var(--md-sys-typescale-label-medium-size);
+        --md-outlined-button-container-height:var(--form-element-height-medium);
+        --md-outlined-button-container-shape:var(--md-sys-shape-corner-small);
+        --md-outlined-button-leading-space:var(--spacing-large);
+        --md-outlined-button-trailing-space:var(--spacing-large);
+        --md-outlined-button-hover-label-text-color:var(--md-sys-color-primary);
+        --md-outlined-button-pressed-outline-color:var(--md-sys-color-primary);
+        --md-outlined-button-pressed-label-text-color:var(--md-sys-color-primary);
+
+        --md-filled-button-container-color: var(--md-sys-color-primary);
+        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size);
+        --md-filled-button-container-height: var(--form-element-height-medium);
+        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+        --md-filled-button-leading-space: var(--spacing-large);
+        --md-filled-button-trailing-space: var(--spacing-large);
+        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
+        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
+        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
+
+        --md-text-button-container-height: var(--form-element-height-medium);
+        --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+
+        --md-elevated-button-container-height: var(--form-element-height-medium);
+        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
       }
     `
   ]

package/src/ox-checkbox.ts

@@ -28,33 +28,36 @@ export class OxCheckbox extends OxFormField {
         cursor: auto;
       }
 
-      [checkbox] {
+      .checkbox {
         display: flex;
         border-radius: var(--ox-checkbox-border-radius, 4px);
-        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
-        background-color: var(--ox-checkbox-background-color, #fff);
+        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));
+        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));
         width: var(--ox-checkbox-size, 15px);
         height: var(--ox-checkbox-size, 15px);
         align-items: center;
         justify-content: center;
       }
 
-      a {
-        background-color: var(--ox-checkbox-unchecked-background-color, #fff);
-        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
+      :host([indeterminate]) .checkbox {
+        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
       }
 
-      :host([checked]) a {
-        background-color: var(--ox-checkbox-checked-background-color, #fff);
-        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
+      :host([checked]) .checkbox {
+        background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));
       }
 
       path {
-        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
+        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));
+      }
+
+      :host([indeterminate]) line {
+        fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
+        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
       }
 
       :host([checked]) path {
-        fill: var(--ox-checkbox-checked-color, #38a25b);
+        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));
       }
 
       svg {
@@ -62,12 +65,13 @@ export class OxCheckbox extends OxFormField {
         height: var(--ox-checkbox-size, 15px);
       }
 
-      [label] {
-        color: var(--ox-checkbox-label-color, #3a5877);
+      .label {
+        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
+        font-size:var(--md-sys-typescale-label-medium-size);
+        line-height:var(--md-sys-typescale-label-medium-line-height);
       }
-
-      :host([checked]) [label] {
-        font-weight: var(--ox-checkbox-checked-font-weight, bold);
+      :host([checked]) .label{
+        font-weight:700;
       }
     `
   ]
@@ -87,11 +91,11 @@ export class OxCheckbox extends OxFormField {
               <slot></slot>
             </span>`
           : ''}
-        <a href="#" @click=${(e: Event) => e.preventDefault()} checkbox>
+        <a href="#" @click=${(e: Event) => e.preventDefault()} class="checkbox">
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
         ${this._hasInner && !this.left
-          ? html` <span label>
+          ? html` <span class="label">
               <slot></slot>
             </span>`
           : ''}
@@ -155,7 +159,7 @@ export class OxCheckbox extends OxFormField {
   get indeterminateIcon() {
     return html`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <line x1="4" x2="20" y1="12" y2="12" stroke="rgba(0, 0, 0, 0.7)" stroke-width="2" stroke-linecap="round" />
+        <line x1="4" x2="20" y1="12" y2="12" stroke-width="2" stroke-linecap="round" />
       </svg>
     `
   }

package/src/ox-input-3axis.ts

@@ -18,13 +18,24 @@ export class OxInput3Axis extends OxFormField {
         display: flex;
       }
 
+      input{
+        box-sizing:border-box;
+        padding:0 var(--spacing-small);
+        height:var(--form-element-height-medium);
+        border:1px solid var(--md-sys-color-outline);
+        border-radius:var(--md-sys-shape-corner-small);
+        background-color:var(--md-sys-color-on-primary);
+        font-size:var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
+      }
+
       input:not(:last-child) {
         margin-right: var(--margin-default, 2px);
       }
 
       input:focus {
-        outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        outline:none;
+        border-color:var(--md-sys-color-secondary-fixed-dim)
       }
     `
   ]

package/src/ox-input-3dish.ts

@@ -20,14 +20,14 @@ export class OxInput3Dish extends OxFormField {
       :host {
         display: grid;
         grid-template-columns: repeat(7, minmax(50px, 1fr));
-        grid-gap: var(--margin-default);
+        grid-gap: var(--spacing-medium);
       }
 
       label {
         text-align: right;
         align-self: center;
-        font: var(--label-font);
-        color: var(--label-color);
+        font-size:var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
         text-transform: var(--label-text-transform);
         grid-column: span 1;
       }
@@ -35,18 +35,23 @@ export class OxInput3Dish extends OxFormField {
       span {
         grid-column: span 2;
         text-align: center;
-        font: var(--label-font);
-        color: var(--legend-color);
+        font-size:var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-surface-tint);
+        font-weight:var(--md-sys-typescale-label-medium-weight)
       }
 
       input,
       ox-input-angle {
         grid-column: span 2;
-        border: 0;
-        border-bottom: var(--border-dark-color);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        color: var(--primary-text-color);
+        box-sizing:border-box;
+        padding:0 var(--spacing-small);
+        height:var(--form-element-height-medium);
+        border:1px solid var(--md-sys-color-outline);
+        border-radius:var(--md-sys-shape-corner-small);
+        overflow:hidden;
+        background-color:var(--md-sys-color-on-primary);
+        font-size:var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
       }
 
       ox-input-angle {
@@ -55,7 +60,7 @@ export class OxInput3Dish extends OxFormField {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-color:var(--md-sys-color-secondary-fixed-dim)
       }
     `
   ]

package/src/ox-input-angle.ts

@@ -17,13 +17,20 @@ export class OxInputAngle extends OxFormField {
 
       input {
         width: 100%;
-        height: 100%;
+        height:100%;
+        min-height:var(--form-element-height-medium);
+        padding:0 var(--spacing-small);
         box-sizing: border-box;
-        border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+        border: var(--input-border, 1px solid var(--md-sys-color-outline));
+        border-radius:var(--md-sys-shape-corner-small);
+        background-color:var(--md-sys-color-on-primary);
+        font-size:var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
       }
 
       input:focus {
         outline: var(--input-focus-outline, inherit);
+        border-color:var(--md-sys-color-secondary-fixed-dim)
       }
     `
   ]

package/src/ox-input-barcode.ts

@@ -60,23 +60,27 @@ export class OxInputBarcode extends OxFormField {
 
       input {
         flex: 1;
-        border: 0;
-        border-bottom: var(--border-dark-color);
-        padding: var(--input-padding);
+        width: 10px; /* intentionally width set */
+        box-sizing: border-box;
+        padding: 0 var(--spacing-small);
         padding-right: 35px;
-        font: var(--input-font);
-        color: var(--primary-text-color);
-        background-color: inherit;
+        height: var(--form-element-height-medium);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
+
+        background-color: var(--md-sys-color-on-primary);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
       }
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-color: var(--md-sys-color-secondary-fixed-dim);
       }
 
       #scan-button {
         display: block;
         position: relative;
-        margin-left: -30px;
+        margin-left: -35px;
         width: 30px;
         border: none;
         background: var(--barcodescan-input-button-icon) no-repeat center center;

package/src/ox-input-code.ts

@@ -40,10 +40,13 @@ export class OxInputCode extends OxFormField {
         position: relative;
         background: white;
         overflow: auto;
+        border:1px solid var(--md-sys-color-outline);
+        border-radius:var(--md-sys-shape-corner-small);
       }
 
       .cm-editor {
         flex: 1;
+        
       }
     `
   ]

package/src/ox-input-color.ts

@@ -183,15 +183,15 @@ export class OxInputColor extends OxFormField {
     input[type='text'] {
       width: 100%;
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       padding-right: 35px;
     }
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     a {
@@ -208,7 +208,7 @@ export class OxInputColor extends OxFormField {
     span {
       width: 80%;
       height: 60%;
-      border: var(--border-dark-color);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       border-radius: var(--border-radius);
     }
 
@@ -216,7 +216,9 @@ export class OxInputColor extends OxFormField {
       background-color: #fefefe;
       background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
         linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
-      background-position: 0 0, 9px 9px;
+      background-position:
+        0 0,
+        9px 9px;
       background-size: 18px 18px;
     }
   `

package/src/ox-input-crontab.ts

@@ -110,47 +110,50 @@ export class OxInputCrontab extends OxFormField {
     label[for='example'] {
       text-align: right;
       grid-column: 3;
-      font: normal 1em var(--theme-font);
-      color: var(--secondary-color);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
       text-transform: capitalize;
     }
 
     #example {
       grid-column: 4 / span 3;
       width: 100%;
-      height: 100%;
-      padding: var(--input-padding);
-      border: 0;
-      border-bottom: var(--border-dark-color);
+      box-sizing:border-box;
+      padding:0 var(--spacing-small);
+      height:var(--form-element-height-medium);
+      border:1px solid var(--md-sys-color-outline);
+      border-radius:var(--md-sys-shape-corner-small);
+      background-color:var(--md-sys-color-on-primary);
       text-transform: capitalize;
-      font: var(--label-font);
-      color: var(--label-color);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     input {
       width: 100%;
-      margin-top: var(--margin-default);
-      padding: 5px;
-      border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
-      font: var(--input-font);
-      color: var(--primary-text-color);
+      box-sizing:border-box;
+      padding:0 var(--spacing-small);
+      height:var(--form-element-height-medium);
+      border:1px solid var(--md-sys-color-outline);
+      border-radius:var(--md-sys-shape-corner-small);
+      background-color:var(--md-sys-color-on-primary);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
     }
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-color:var(--md-sys-color-secondary-fixed-dim)
     }
 
     input:invalid {
-      border-bottom: 1px solid var(--status-danger-color);
+      border-color:var(--md-sys-color-error);
       color: var(--status-danger-color);
     }
 
     label {
       width: 100%;
-      font: normal 0.8em var(--theme-font);
-      color: var(--primary-color);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     label:not([for='example']) {
@@ -168,7 +171,7 @@ export class OxInputCrontab extends OxFormField {
       flex: 1;
       display: grid;
       grid-template-rows: 1fr auto;
-      grid-gap: 0.5rem;
+      grid-gap: var(--spacing-small);
       min-width: 60px;
       max-width: 33%;
       margin: 0.25rem;
@@ -187,18 +190,19 @@ export class OxInputCrontab extends OxFormField {
 
     #tooltip > div {
       padding: 0.25rem 0.5rem;
-      border-bottom: #ccc 1px dashed;
-      font: normal 0.9em var(--theme-font);
+      border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     #tooltip > .crontab-value {
       text-align: right;
-      color: var(--secondary-color);
+      color: var(--md-sys-color-surface-tint);
     }
 
     #tooltip > .crontab-description {
       text-align: left;
-      color: #585858;
+      color: var(--md-sys-color-on-primary-container);
     }
 
     #button-wrapper {
@@ -215,7 +219,7 @@ export class OxInputCrontab extends OxFormField {
     }
     button:hover,
     button:active {
-      background-color: var(--primary-color);
+      background-color: var(--md-sys-color-on-primary-container);
     }
   `
 

package/src/ox-input-data.ts

@@ -30,16 +30,25 @@ export class OxInputData extends OxFormField {
         position: relative;
       }
 
-      div[datatype] {
+      div.datatype {
         display: flex;
         align-items: center;
-        padding: 2px;
-        background-color: rgba(0, 0, 0, 0.08);
-        font-size: small;
+        margin-bottom: var(--spacing-small);
+        padding: var(--spacing-small);
+        background-color: var(--md-sys-color-primary-container);
+        border:1px solid var(--md-sys-color-primary-fixed-dim);
+        border-radius:var(--md-sys-shape-corner-small);
+        font-size: var(--md-sys-typescale-label-medium-size);
+        color: var(--md-sys-color-on-primary-container);
       }
 
-      div[datatype] md-icon {
+      div.datatype md-icon {
         margin-left: auto;
+        color:var(--md-sys-color-primary);
+        cursor:pointer
+      }
+      div.datatype label{
+        margin-right:var(--spacing-small)
       }
 
       ox-input-code {
@@ -54,7 +63,7 @@ export class OxInputData extends OxFormField {
     const valueType = typeof this.value
 
     return html`
-      <div datatype>
+      <div class="datatype">
         <input
           id="string"
           type="radio"

package/src/ox-input-duration.ts

@@ -15,6 +15,8 @@ export class OxInputDuration extends OxFormField {
     :host {
       text-align: center;
       padding: 10px;
+      --md-filled-icon-button-container-height:var(--form-element-height-medium);
+      --md-filled-icon-button-container-shape:var(--md-sys-shape-corner-small);
     }
 
     :host * {
@@ -37,19 +39,20 @@ export class OxInputDuration extends OxFormField {
     }
 
     input {
-      border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
-      padding-right: 0;
+      box-sizing:border-box;
+      padding:0 var(--spacing-small);
+      height:var(--form-element-height-medium);
+      border:1px solid var(--md-sys-color-outline);
+      border-radius:var(--md-sys-shape-corner-small);
       max-width: 70px;
-      font: var(--input-font);
-      color: var(--primary-text-color);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
       text-align: right;
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-color:var(--md-sys-color-secondary-fixed-dim)
     }
 
     input:invalid {
@@ -59,31 +62,9 @@ export class OxInputDuration extends OxFormField {
 
     label {
       width: 100%;
-      margin-right: var(--margin-default);
-      font: normal 0.8em var(--theme-font);
-      color: var(--primary-color);
-    }
-
-    button {
-      border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
-      min-height: 35px;
-      line-height: 0.8;
-      color: var(--button-color);
-      cursor: pointer;
-    }
-
-    button + button {
-      margin-left: -5px;
-    }
-
-    button:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      margin-right: var(--spacing-medium);
+      font-size:var(--md-sys-typescale-label-medium-size);
+      color: var(--md-sys-color-on-primary-container);
     }
   `
 
@@ -132,7 +113,7 @@ export class OxInputDuration extends OxFormField {
         />
         <label for="second">${i18next.t('label.seconds')}</label>
 
-        <button
+        <md-filled-icon-button
           type="button"
           @click=${(e: Event) => {
             e.preventDefault()
@@ -151,7 +132,7 @@ export class OxInputDuration extends OxFormField {
           ?disabled=${this.disabled}
         >
           <md-icon>backspace</md-icon>
-        </button>
+        </md-filled-icon-button>
         <div padding></div>
       </form>
     `