@operato/input 2.0.0-alpha.62 → 2.0.0-alpha.68

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.62",
+  "version": "2.0.0-alpha.68",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -197,9 +197,9 @@
     "@material/web": "^1.4.0",
     "@operato/color-picker": "^2.0.0-alpha.57",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/popup": "^2.0.0-alpha.62",
-    "@operato/styles": "^2.0.0-alpha.62",
-    "@operato/utils": "^2.0.0-alpha.57",
+    "@operato/popup": "^2.0.0-alpha.68",
+    "@operato/styles": "^2.0.0-alpha.68",
+    "@operato/utils": "^2.0.0-alpha.68",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0265a1407b7a20729845d67410297cc50975e2a8"
+  "gitHead": "147f2ca9e09180c6851dccacf340fc660e7548ab"
 }

package/src/ox-input-duration.ts

@@ -26,9 +26,14 @@ export class OxInputDuration extends OxFormField {
     }
 
     form {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+    }
+
+    [padding] {
+      min-width: 100px;
     }
 
     input {
@@ -63,7 +68,6 @@ export class OxInputDuration extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       min-height: 35px;
       line-height: 0.8;
       color: var(--button-color);
@@ -97,6 +101,7 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
+        <div padding></div>
         <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
@@ -147,6 +152,7 @@ export class OxInputDuration extends OxFormField {
         >
           <md-icon>backspace</md-icon>
         </button>
+        <div padding></div>
       </form>
     `
   }

package/src/ox-input-file.ts

@@ -32,6 +32,7 @@ export class OxInputFile extends OxFormField {
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }
+
       :host > md-icon {
         color: var(--file-uploader-icon-color);
         --md-icon-size: var(--file-uploader-icon-size, 36px);

package/src/ox-input-key-values.ts

@@ -29,6 +29,8 @@ export class OxInputKeyValues extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: 14px;
     }
 
     div {
@@ -50,9 +52,6 @@ export class OxInputKeyValues extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button md-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {

package/src/ox-input-mass-fraction.ts

@@ -43,19 +43,26 @@ export class OxInputMassFraction extends OxFormField {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+
+        --md-icon-size: var(--fontsize-default, 14px);
       }
 
       [records] {
         flex: 1;
 
         overflow: overlay;
-      }
 
-      [records] > div {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var(--mass-fraction-gap, 3px);
-        margin-bottom: var(--margin-narrow);
+        > div {
+          display: flex;
+          flex-flow: row nowrap;
+          gap: var(--mass-fraction-gap, 3px);
+          margin-bottom: var(--margin-narrow);
+        }
+
+        > [nofraction] {
+          display: block;
+          text-align: center;
+        }
       }
 
       [data-record-new] {
@@ -74,13 +81,14 @@ export class OxInputMassFraction extends OxFormField {
         padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);
         color: var(--button-color);
         cursor: pointer;
-      }
-      button:focus,
-      button:hover,
-      button:active {
-        border: var(--button-active-border);
-        background-color: var(--button-background-focus-color);
-        color: var(--theme-white-color);
+
+        &:focus,
+        &:hover,
+        &:active {
+          border: var(--button-active-border, 1px solid rgba(0, 0, 0, 0.2));
+          background-color: var(--button-background-focus-color);
+          color: var(--theme-white-color);
+        }
       }
 
       input,
@@ -93,10 +101,15 @@ export class OxInputMassFraction extends OxFormField {
         min-width: 50px;
       }
 
-      input {
+      input,
+      label {
         padding: var(--input-padding);
       }
 
+      label {
+        text-align: center;
+      }
+
       ox-select {
         padding: 0;
       }
@@ -125,11 +138,6 @@ export class OxInputMassFraction extends OxFormField {
         left: 0;
       }
 
-      [records] > [nofraction] {
-        display: block;
-        text-align: center;
-      }
-
       [right-end] {
         margin-left: auto;
       }
@@ -164,6 +172,7 @@ export class OxInputMassFraction extends OxFormField {
           <label data-value>체적비(몰분율)</label>
           <button hidden><md-icon>remove</md-icon></button>
           <button hidden><md-icon>remove</md-icon></button>
+          ${this.composable ? html` <button hidden><md-icon>remove</md-icon></button>` : nothing}
         </div>
         ${arrayed.length
           ? arrayed.map(

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

@@ -28,7 +28,10 @@ export class OxInputMultipleColors extends OxFormField {
   static styles = css`
     :host {
       display: inline-block;
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
+
     #colors-container > div {
       display: grid;
       grid-template-columns: 34px 1fr 34px;

package/src/ox-input-options.ts

@@ -19,6 +19,8 @@ export class OxInputOptions extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {

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

@@ -29,6 +29,8 @@ export class OxInputPartitionKeys extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {

package/src/ox-input-privilege.ts

@@ -31,6 +31,21 @@ export class OxInputPrivilege extends OxFormField {
       height: 100%;
     }
 
+    select {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+
+      max-height: 35px;
+    }
+
+    select:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
     div[values] {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -64,41 +79,11 @@ export class OxInputPrivilege extends OxFormField {
       border-bottom: 1px solid var(--primary-color);
     }
 
-    input:invalid {
-      border-bottom: 1px solid var(--status-danger-color);
-      color: var(--status-danger-color);
-    }
-
     label {
       margin-right: var(--margin-default);
       font: normal 0.8em var(--theme-font);
       color: var(--primary-color);
     }
-
-    div[buttons] {
-      display: flex;
-      flex-direction: row;
-      justify-content: left;
-      padding: 10px;
-    }
-
-    button {
-      border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
-      min-height: 35px;
-      line-height: 0.8;
-      color: var(--button-color);
-      cursor: pointer;
-    }
-    button:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
-    }
   `
 
   @property({ type: Object }) value?: {

package/src/ox-input-unit-number.ts

@@ -178,6 +178,8 @@ export class OxInputUnitNumber extends OxFormField {
         display: flex;
         flex-direction: row;
         align-items: center;
+
+        --md-icon-size: var(--fontsize-default, 14px);
       }
 
       input {
@@ -218,7 +220,6 @@ export class OxInputUnitNumber extends OxFormField {
       }
 
       md-icon {
-        font-size: 18px;
         color: var(--primary-color, #3c3938);
         margin-left: auto;
       }

package/src/ox-input-value-map.ts

@@ -33,6 +33,8 @@ export class OxInputValueMap extends OxFormField {
       flex-direction: column;
       border: var(--border-dark-color);
       padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {

package/src/ox-input-value-ranges.ts

@@ -33,6 +33,8 @@ export class OxInputValueRange extends OxFormField {
       flex-direction: column;
       border: var(--border-dark-color);
       padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {

package/src/ox-input-work-shift.ts

@@ -31,6 +31,8 @@ export class OxInputWorkShift extends OxFormField {
 
       width: 100%;
       overflow: hidden;
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {