@operato/input 1.0.0-beta.25 → 1.0.0-beta.28

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

@@ -29,23 +29,18 @@ export class OxInputValueRange extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      align-content: center;
-
-      width: 100%;
-      overflow: hidden;
-      border: 1px solid #ccc;
+      border: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
     }
 
     div {
       display: flex;
       flex-flow: row nowrap;
-      align-items: center;
-
-      border-bottom: 1px solid #c0c0c0;
+      gap: var(--padding-default);
     }
 
     div:last-child {
-      border-bottom: none;
+      margin-bottom: var(--margin-narrow);
     }
 
     div > * {
@@ -55,14 +50,47 @@ export class OxInputValueRange extends OxFormField {
     }
 
     button {
-      width: 20px;
-      text-align: center;
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
     }
 
     input,
     ox-input-color {
       flex: 1;
     }
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
 
     ox-input-color {
       --things-editor-color-input-color: {
@@ -74,18 +102,11 @@ export class OxInputValueRange extends OxFormField {
       }
     }
 
-    [placeholder='value'] {
+    [placeholder='value'],
+    [value='default'] {
       flex: 2;
     }
 
-    div {
-      border-bottom: 1px solid #c0c0c0;
-    }
-
-    div:last-child {
-      border-bottom: none;
-    }
-
     input[type='checkbox'] {
       width: initial;
     }
@@ -121,7 +142,10 @@ export class OxInputValueRange extends OxFormField {
                     .value=${item.value}
                     data-value-type=${this.valuetype}
                   />
-                `} <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">-</button>
+                `}
+            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -135,7 +159,9 @@ export class OxInputValueRange extends OxFormField {
           : this.valuetype == 'color'
           ? html` <ox-input-color data-value value="" placeholder="value"> </ox-input-color> `
           : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
       </div>
 
       <div data-record>
@@ -165,7 +191,8 @@ export class OxInputValueRange extends OxFormField {
                 class="default-value"
                 data-value-type=${this.valuetype}
               />
-            `} <button class="record-action" @click=${(e: Event) => this._sort()}>&gt;</button>
+            `}
+        <button class="record-action" @click=${(e: Event) => this._sort()}><mwc-icon>chevron_right</mwc-icon></button>
       </div>
     `
   }

package/src/ox-select.ts

@@ -34,6 +34,7 @@ export class Select extends OxFormField {
       :host {
         display: block;
         position: relative;
+        border-bottom: var(--border-dark-color);
       }
 
       div {
@@ -42,11 +43,10 @@ export class Select extends OxFormField {
         align-items: center;
         justify-content: center;
         cursor: pointer;
-
-        border-bottom: var(--border-dark-color);
         padding: var(--input-padding);
         font: var(--input-font);
         color: var(--primary-text-color);
+        max-height: 17px;
       }
 
       span {
@@ -55,9 +55,6 @@ export class Select extends OxFormField {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      div:hover {
-        border-bottom: 1px solid var(--primary-color);
-      }
 
       mwc-icon {
         display: block;

package/themes/input-theme.css

@@ -1,7 +1,7 @@
 body {
   --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
   --ox-input-border-radius: var(--border-radius);
-  --ox-input-padding: 4px 9px;
+  --ox-input-padding: var(--input-padding);
   --ox-input-font: normal 15px var(--theme-font);
   --ox-input-color: var(--secondary-color);
 }

package/dist/stories/ox-input-conntab.stories.d.ts

@@ -1,26 +0,0 @@
-import '../src/ox-input-crontab.js';
-import '../src/locale/locale-picker.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        value: {
-            control: string;
-        };
-        name: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    name?: string;
-    value?: string;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-conntab.stories.js

@@ -1,37 +0,0 @@
-import '../src/ox-input-crontab.js';
-import '../src/locale/locale-picker.js';
-import { html } from 'lit';
-export default {
-    title: 'ox-input-crontab',
-    component: 'ox-input-crontab',
-    argTypes: {
-        value: { control: 'text' },
-        name: { control: 'text' }
-    }
-};
-const Template = ({ name = 'crontab', value = '* * * * * *' }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-  <style>
-    body {
-    }
-  </style>
-
-  <locale-picker></locale-picker>
-  <br /><br />
-
-  <ox-input-crontab
-    @change=${(e) => {
-    console.log(e.target.value);
-}}
-    name=${name}
-    .value=${value}
-  >
-  </ox-input-crontab>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    name: 'crontab',
-    value: '* * * * * *'
-};
-//# sourceMappingURL=ox-input-conntab.stories.js.map

package/dist/stories/ox-input-conntab.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-conntab.stories.js","sourceRoot":"","sources":["../../stories/ox-input-conntab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,aAAa,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;cAYnF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,aAAa;CACrB,CAAA","sourcesContent":["import '../src/ox-input-crontab.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-crontab',\n  component: 'ox-input-crontab',\n  argTypes: {\n    value: { control: 'text' },\n    name: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-crontab\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-crontab>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'crontab',\n  value: '* * * * * *'\n}\n"]}