@operato/input 2.0.0-alpha.9 → 2.0.0-alpha.92

package/src/ox-input-privilege.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -33,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;
@@ -66,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-search.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import debounce from 'lodash-es/debounce'
 import { css, html } from 'lit'
@@ -19,7 +19,7 @@ export class OxInputSearch extends OxFormField {
         position: relative;
         align-items: center;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
       }
 
       [type='text'] {
@@ -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 {
@@ -38,7 +39,7 @@ export class OxInputSearch extends OxFormField {
         border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         color: var(--secondary-color);
       }
@@ -54,7 +55,7 @@ export class OxInputSearch extends OxFormField {
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
+      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>
       <input
         type="text"
         .value=${this.value || ''}

package/src/ox-input-select-buttons.ts

@@ -21,7 +21,7 @@ export class OxInputSelectButtons extends OxFormField {
 
     span {
       border-radius: 9999px;
-      background-color: #efefef;
+      background-color: rgba(255, 255, 255, 0.7);
       padding: 2px 10px;
     }
 

package/src/ox-input-table.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@polymer/paper-item/paper-item'
 import '@operato/i18n/ox-i18n.js'
@@ -74,7 +74,7 @@ class OxInputTable extends OxFormField {
           line-height: 1.5;
         }
 
-        #border-set > mwc-icon {
+        #border-set > md-icon {
           grid-column: span 2;
           margin: 0 0 0 8px;
           width: 32px;
@@ -216,16 +216,16 @@ class OxInputTable extends OxFormField {
           border-style-btn"
           @click=${(e: Event) => this._onClickType(e)}
         >
-          <mwc-icon data-value="out">border_outer</mwc-icon>
-          <mwc-icon data-value="in">border_inner</mwc-icon>
-          <mwc-icon data-value="all">border_all</mwc-icon>
-          <mwc-icon data-value="left">border_left</mwc-icon>
-          <mwc-icon data-value="center">border_vertical</mwc-icon>
-          <mwc-icon data-value="right">border_right</mwc-icon>
-          <mwc-icon data-value="top">border_top</mwc-icon>
-          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
-          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
-          <mwc-icon data-value="clear">border_clear</mwc-icon>
+          <md-icon data-value="out">border_outer</md-icon>
+          <md-icon data-value="in">border_inner</md-icon>
+          <md-icon data-value="all">border_all</md-icon>
+          <md-icon data-value="left">border_left</md-icon>
+          <md-icon data-value="center">border_vertical</md-icon>
+          <md-icon data-value="right">border_right</md-icon>
+          <md-icon data-value="top">border_top</md-icon>
+          <md-icon data-value="middle">border_horizontal</md-icon>
+          <md-icon data-value="bottom">border_bottom</md-icon>
+          <md-icon data-value="clear">border_clear</md-icon>
         </div>
 
         <div class="property-grid">

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

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -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 {
@@ -217,8 +219,7 @@ export class OxInputUnitNumber extends OxFormField {
         min-width: 24px;
       }
 
-      mwc-icon {
-        font-size: 18px;
+      md-icon {
         color: var(--primary-color, #3c3938);
         margin-left: auto;
       }
@@ -272,7 +273,7 @@ export class OxInputUnitNumber extends OxFormField {
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
           ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
         </ox-popup-list>
-        <mwc-icon>expand_more</mwc-icon>
+        <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,7 +41,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>
     #root {
       height: 500px;

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 {
     }