@operato/input 2.0.0-alpha.0 → 2.0.0-alpha.100

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

@@ -2,6 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import '@material/web/icon/icon.js'
+
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -169,13 +171,15 @@ const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) =>
 }
 
 @customElement('ox-input-unit-number')
-export class OxInputUnit extends OxFormField {
+export class OxInputUnitNumber extends OxFormField {
   static styles = [
     css`
       :host {
         display: flex;
         flex-direction: row;
         align-items: center;
+
+        --md-icon-size: var(--fontsize-default, 14px);
       }
 
       input {
@@ -205,13 +209,24 @@ export class OxInputUnit extends OxFormField {
       }
 
       #unit {
-        display: inline;
+        flex: 1;
+        display: flex;
+        align-items: center;
         position: relative;
         margin-left: var(--margin-narrow);
         font: var(--label-font);
         color: var(--label-color);
         min-width: 24px;
       }
+
+      md-icon {
+        color: var(--primary-color, #3c3938);
+        margin-left: auto;
+      }
+
+      ox-popup-list {
+        right: 0;
+      }
     `
   ]
 
@@ -258,6 +273,7 @@ export class OxInputUnit extends OxFormField {
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
           ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
         </ox-popup-list>
+        <md-icon>expand_more</md-icon>
       </div>
     `
   }

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 {
@@ -63,9 +65,7 @@ export class OxInputValueMap extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -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;
       }
@@ -144,17 +144,17 @@ export class OxInputValueMap extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -170,7 +170,7 @@ export class OxInputValueMap extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -185,7 +185,7 @@ export class OxInputValueMap extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
@@ -196,7 +196,7 @@ export class OxInputValueMap extends OxFormField {
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${() => this._sort()} tabindex="-1">
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </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 {
@@ -63,9 +65,7 @@ export class OxInputValueRange extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -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;
@@ -153,17 +157,17 @@ export class OxInputValueRange extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -181,7 +185,7 @@ export class OxInputValueRange extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -197,19 +201,20 @@ export class OxInputValueRange extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
           )}
 
       <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} />
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${(e: Event) => this._sort()} ?disabled=${this.disabled}>
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </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 {
@@ -81,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);
@@ -94,9 +93,6 @@ export class OxInputWorkShift extends OxFormField {
       color: var(--button-color);
       cursor: pointer;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -156,7 +152,7 @@ export class OxInputWorkShift extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -182,7 +178,7 @@ export class OxInputWorkShift extends OxFormField {
               <input type="time" data-to-time step="1800" />
 
               <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
             </div>
           `}

package/src/ox-select.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, PropertyValues } from 'lit'
@@ -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,18 +62,18 @@ export class Select extends OxFormField {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        gap: 4px;
       }
 
-      mwc-icon {
+      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;
       }
 
-      div:hover mwc-icon {
+      div:hover md-icon {
         color: var(--primary-color);
       }
 
@@ -92,7 +98,7 @@ export class Select extends OxFormField {
     return html`
       <div @click=${this.expand}>
         <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
-        <mwc-icon>expand_more</mwc-icon>
+        <md-icon>expand_more</md-icon>
       </div>
 
       <slot></slot>

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

@@ -25,7 +25,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

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

@@ -27,7 +27,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-input-angle.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-barcode.stories.ts

@@ -41,8 +41,24 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
+    #root {
+      height: 500px;
+    }
+
     ox-input-barcode {
       font-size: 80px;
       --input-font: initial;

package/stories/ox-input-code.stories.ts

@@ -9,6 +9,7 @@ export default {
     value: { control: 'text' },
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
+    showLineNumbers: { control: 'boolean' },
     disabled: { control: 'boolean' }
   }
 }
@@ -23,12 +24,31 @@ interface ArgTypes {
   name?: string
   value?: string
   language: 'javascript' | 'sql' | 'json'
+  showLineNumbers?: boolean
   disabled?: boolean
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', value = '', disabled }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  name = 'code',
+  language = 'javascript',
+  value = '',
+  showLineNumbers,
+  disabled
+}: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }
@@ -44,6 +64,7 @@ const Template: Story<ArgTypes> = ({ name = 'code', language = 'javascript', val
     name=${name}
     language=${language}
     .value=${value}
+    ?show-line-numbers=${showLineNumbers}
     ?disabled=${disabled}
   >
   </ox-input-code>
@@ -53,5 +74,6 @@ export const Regular = Template.bind({})
 Regular.args = {
   name: 'code',
   value: '',
-  language: 'javascript'
+  language: 'javascript',
+  showLineNumbers: true
 }

package/stories/ox-input-crontab.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-data.stories.ts

@@ -0,0 +1,65 @@
+import '../src/ox-input-data.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-data',
+  component: 'ox-input-data',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string | number | object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+    }
+    ox-input-data {
+      height: 300px;
+    }
+  </style>
+
+  <ox-input-data
+    @change=${(e: Event) => {
+      const value = (e.target as HTMLInputElement).value
+      console.log('value : ', value, typeof value)
+    }}
+    name=${name}
+    .value=${value}
+    ?disabled=${disabled}
+  >
+  </ox-input-data>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'data'
+}

package/stories/ox-input-duration.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-file.stories.ts

@@ -48,7 +48,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-hashtags.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }