@operato/input 2.0.0-alpha.81 → 2.0.0-alpha.85

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.81",
+  "version": "2.0.0-alpha.85",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -197,8 +197,8 @@
     "@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.81",
-    "@operato/styles": "^2.0.0-alpha.81",
+    "@operato/popup": "^2.0.0-alpha.85",
+    "@operato/styles": "^2.0.0-alpha.85",
     "@operato/utils": "^2.0.0-alpha.68",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "df2dbdf533ea883e0c4d924a66ef9c0fcab833c3"
+  "gitHead": "e38d6a553d665c8ceb6b54adce81f8234b7352bd"
 }

package/src/ox-checkbox.ts

@@ -15,12 +15,10 @@ import { OxFormField } from './ox-form-field'
 export class OxCheckbox extends OxFormField {
   static styles = [
     css`
-      :host {
-        display: flex;
-      }
-
       div {
         display: flex;
+        gap: var(--input-intra-gap, 7px);
+
         align-items: center;
         cursor: pointer;
       }
@@ -65,7 +63,6 @@ export class OxCheckbox extends OxFormField {
       }
 
       [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
@@ -78,16 +75,22 @@ export class OxCheckbox extends OxFormField {
   @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false
   @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false
   @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false
+  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false
 
   @state() _hasInner: boolean = !!this.innerHTML.trim().length
 
   render() {
     return html`
       <div @click=${this.onClick} ?disabled=${this.disabled}>
+        ${this._hasInner && this.left
+          ? html` <span label>
+              <slot></slot>
+            </span>`
+          : ''}
         <a href="#" @click=${(e: Event) => e.preventDefault()} checkbox>
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
-        ${this._hasInner
+        ${this._hasInner && !this.left
           ? html` <span label>
               <slot></slot>
             </span>`

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

@@ -35,17 +35,18 @@ export class OxInputI18nLabels extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      gap: 10px;
     }
 
     [data-record] {
       display: flex;
       flex-direction: row;
+      align-items: center;
       gap: 10px;
     }
 
     label {
       width: 80px;
-      align-self: center;
       text-align: end;
     }
 

package/src/ox-input-search.ts

@@ -31,6 +31,7 @@ export class OxInputSearch extends OxFormField {
         padding-left: 25px;
         font: var(--input-search-font, var(--input-font));
         color: var(--primary-text-color);
+        overflow: hidden;
       }
 
       [type='text']:focus {

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

@@ -98,10 +98,10 @@ export class OxInputValueMap extends OxFormField {
     }
 
     ox-input-color {
-      --ox-input-color-input-color: {
+      --input-color-input-color: {
         margin: 1px;
       }
-      --ox-input-color-input-span: {
+      --input-color-input-span: {
         width: 10px;
         height: 10px;
       }

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

@@ -111,11 +111,15 @@ export class OxInputValueRange extends OxFormField {
       }
     }
 
-    [placeholder='value'],
-    [value='default'] {
+    [placeholder='value'] {
       flex: 2;
     }
 
+    [filler] {
+      padding: var(--input-padding);
+      flex: 1;
+    }
+
     input[type='checkbox'] {
       flex: none;
       width: initial;
@@ -204,6 +208,7 @@ export class OxInputValueRange extends OxFormField {
           )}
 
       <div data-record>
+        <span filler></span>
         <input type="text" data-from data-default="" disabled value="default" />
         <input type="text" data-to placeholder="&gt;" value="" hidden ?disabled=${this.disabled} />
 

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

@@ -83,9 +83,6 @@ export class OxInputWorkShift extends OxFormField {
     input:required:invalid {
       border: 1px dashed red;
     }
-    input[type='time'] {
-      padding: 2px var(--padding-default);
-    }
 
     button {
       border: var(--button-border);

package/src/ox-select.ts

@@ -35,6 +35,12 @@ export class Select extends OxFormField {
         display: block;
         position: relative;
         border-bottom: var(--border-dark-color);
+
+        --ox-select-padding: var(--input-padding);
+        --ox-select-font: var(--input-font);
+        --ox-select-color: var(--input-color);
+        --ox-select-icon-color: var(--theme-primary-text-color, #3c3938);
+        --ox-select-icon-hover-color: var(--primary-color, #3c3938);
       }
 
       div {
@@ -46,9 +52,9 @@ export class Select extends OxFormField {
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        padding: var(--input-padding);
-        font: var(--input-font);
-        color: var(--primary-text-color);
+        padding: var(--ox-select-padding);
+        font: var(--ox-select-font);
+        color: var(--ox-select-color);
       }
 
       span {
@@ -56,14 +62,14 @@ export class Select extends OxFormField {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        gap: 4px;
       }
 
       md-icon {
+        --md-icon-size: 16px;
         display: block;
-        width: 24px;
         text-align: right;
-        font-size: 18px;
-        color: var(--theme-primary-text-color, #3c3938);
+        color: var(--ox-select-icon-color);
         opacity: 0.7;
       }
 

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

@@ -161,7 +161,7 @@ const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
       --label-color: var(--secondary-color);
       --label-text-transform: capitalize;
       --input-margin: var(--margin-narrow) 0;
-      --input-padding: var(--padding-default);
+      --input-padding: 6px 2px;
       --input-min-width: 200px;
       --input-font: normal var(--fontsize-default) var(--theme-font);
       --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/themes/app-theme.css

@@ -124,7 +124,7 @@ body {
   --label-color: var(--secondary-color);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
-  --input-padding: var(--padding-default);
+  --input-padding: 6px 2px;
   --input-min-width: 200px;
   --input-font: normal var(--fontsize-default) var(--theme-font);
   --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/themes/input-theme.css

@@ -1,9 +1,23 @@
 body {
-  --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
-  --ox-input-border-radius: var(--border-radius);
-  --ox-input-padding: var(--input-padding);
-  --ox-input-font: normal 15px var(--theme-font);
-  --ox-input-color: var(--secondary-color);
+  --input-intra-gap: 7px;
+  --input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --input-border-radius: var(--border-radius);
+  --input-font: normal 15px var(--theme-font);
+  --input-color: var(--secondary-color);
+
+  --ox-checkbox-disabled-opacity: 0.5;
+  --ox-checkbox-border-radius: 4px;
+  --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-background-color: #fff;
+  --ox-checkbox-size: 15px;
+  --ox-checkbox-checked-border: 1px solid var(--primary-color);
+  --ox-checkbox-unchecked-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-checked-background-color: #fff;
+  --ox-checkbox-unchecked-background-color: #fff;
+  --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
+  --ox-checkbox-checked-color: var(--primary-color);
+  --ox-checkbox-label-color: var(--label-color);
+  --ox-checkbox-checked-font-weight: bold;
 }
 
 @media screen and (max-width: 480px) {
@@ -13,7 +27,6 @@ body {
 
 @media (min-width: 481px) and (max-width: 1024px) {
   body {
-    --ox-input-font: normal 16px var(--theme-font);
-    --ox-input-padding: 4px 5px;
+    --input-font: normal 16px var(--theme-font);
   }
 }