@operato/input 1.11.13 → 1.12.3

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

@@ -79,14 +79,18 @@ export class OxInputMultipleColors extends OxFormField {
         ${(this.value || []).map(
           (item, index) => html`
             <div>
-              <button @click=${() => this._appendEditorColor()} data-index=${index}>
+              <button @click=${() => this._appendEditorColor()} data-index=${index} ?disabled=${this.disabled}>
                 <mwc-icon>add</mwc-icon>
               </button>
-              <ox-input-color .value=${item}> </ox-input-color>
+              <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
 
               ${(this.value || []).length > 1
                 ? html`
-                    <button @click=${(e: Event) => this._removeEditorColor(e)} data-index=${index}>
+                    <button
+                      @click=${(e: Event) => this._removeEditorColor(e)}
+                      data-index=${index}
+                      ?disabled=${this.disabled}
+                    >
                       <mwc-icon>remove</mwc-icon>
                     </button>
                   `

package/src/ox-input-options.ts

@@ -4,7 +4,7 @@
 
 import '@material/mwc-icon'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
@@ -83,21 +83,30 @@ export class OxInputOptions extends OxFormField {
       ${(options || []).map(
         item => html`
           <div data-record>
-            <input type="text" data-text="" placeholder="text" .value=${item.text} />
-            <input type="text" data-value="" placeholder="value" .value=${item.value} />
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+            <input type="text" data-text="" placeholder="text" .value=${item.text} ?disabled=${this.disabled} />
+            <input type="text" data-value="" placeholder="value" .value=${item.value} ?disabled=${this.disabled} />
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-      <div data-record-new>
-        <input type="text" data-text="" placeholder="text" value="" />
-        <input type="text" data-value="" placeholder="value" value="" @change=${(e: Event) => this._add()} />
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-      </div>
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <input type="text" data-text="" placeholder="text" value="" />
+              <input type="text" data-value="" placeholder="value" value="" @change=${(e: Event) => this._add()} />
+              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+            </div>
+          `}
     `
   }
 

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

@@ -4,7 +4,7 @@
 
 import '@material/mwc-icon'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
@@ -94,30 +94,55 @@ export class OxInputPartitionKeys extends OxFormField {
       ${this._toArray(value).map(
         item => html`
           <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} />
-            <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+            <input type="text" data-key placeholder="key" .value=${item.key} ?disabled=${this.disabled} />
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              .value=${item.value}
+              list="value-template"
+              ?disabled=${this.disabled}
+            />
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._up(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_upward</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._down(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_downward</mwc-icon>
             </button>
           </div>
         `
       )}
-
-      <div data-record-new>
-        <input type="text" data-key placeholder="key" value="" />
-        <input type="text" data-value placeholder="value" value="" list="value-template" />
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-      </div>
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <input type="text" data-key placeholder="key" value="" />
+              <input type="text" data-value placeholder="value" value="" list="value-template" />
+              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+            </div>
+          `}
 
       <datalist id="value-template">
         <option value="%YYYY">year</option>

package/src/ox-input-privilege.ts

@@ -122,7 +122,8 @@ export class OxInputPrivilege extends OxFormField {
       <form @change=${this.onChange.bind(this)}>
         <div values>
           <label for="privilege" col1>${i18next.t('label.privilege')}</label>
-          <select id="privilege" name="privilege" value=${ifDefined(privilege)}>
+          <select id="privilege" name="privilege" value=${ifDefined(privilege)}
+                      ?disabled=${this.disabled}>
             <option value="">&nbsp;</option>
             ${privileges.map(
               p =>
@@ -136,10 +137,12 @@ export class OxInputPrivilege extends OxFormField {
           </select>
 
           <label for="owner" col1>${i18next.t('label.domain-owner')}</label>
-          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2></input>
+          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2 
+                      ?disabled=${this.disabled}></input>
 
           <label for="super" col1>${i18next.t('label.superuser')}</label>
-          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2></input>
+          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2
+                      ?disabled=${this.disabled}></input>
         </div>
       </form>
     `

package/src/ox-input-quantifier.ts

@@ -45,9 +45,9 @@ export class OxInputQuantifier extends OxFormField {
 
     return html`
       <span>
-        <input type="number" .value=${min} @change=${(e: Event) => this.onChange(e)} />
+        <input type="number" .value=${min} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />
         -
-        <input type="number" .value=${max} @change=${(e: Event) => this.onChange(e)} />
+        <input type="number" .value=${max} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />
       </span>
     `
   }

package/src/ox-input-range.ts

@@ -125,6 +125,7 @@ class OxInputRange extends OxFormField {
           this.value = Number((e.target as HTMLInputElement).value)
           this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
         }}
+        ?disabled=${this.disabled}
       />
 
       <input
@@ -138,6 +139,7 @@ class OxInputRange extends OxFormField {
           this.value = Number((e.target as HTMLInputElement).value)
           this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
         }}
+        ?disabled=${this.disabled}
       />
     `
   }

package/src/ox-input-scene-component-id.ts

@@ -41,6 +41,7 @@ export class OxInputId extends OxFormField {
         @change=${(e: InputEvent) => this._onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
         list="ids"
+        ?disabled=${this.disabled}
       />
 
       <datalist id="ids">${ids.map(id => html` <option value=${id}></option> `)}</datalist>

package/src/ox-input-search.ts

@@ -54,7 +54,7 @@ export class OxInputSearch extends OxFormField {
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => this._onClickSearch(e)}>search</mwc-icon>
+      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
       <input
         type="text"
         .value=${this.value || ''}
@@ -78,6 +78,7 @@ export class OxInputSearch extends OxFormField {
             }
           }
         }}
+        ?disabled=${this.disabled}
       />
     `
   }

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

@@ -42,7 +42,10 @@ export class OxInputSelectButtons extends OxFormField {
     return html`
       ${(options || []).map(
         ({ display, value }) => html`
-          <span data-value=${value} ?selected=${values.includes(value)} @click=${(e: MouseEvent) => this.onClick(e)}
+          <span
+            data-value=${value}
+            ?selected=${values.includes(value)}
+            @click=${(e: MouseEvent) => !this.disabled && this.onClick(e)}
             >${display}</span
           >
         `

package/src/ox-input-stack.ts

@@ -57,12 +57,18 @@ export class OxInputStack extends OxFormField {
     const length = stack.length
 
     return html`
-      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>
+      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>
 
       ${stack.map(
         (item, index) => html`
-          <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>
-            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
+          <div
+            floor
+            ?active=${item.active}
+            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}
+            idx=${length - index - 1}
+          >
+            ${item.name}
+            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>
           </div>
         `
       )}

package/src/ox-input-textarea.ts

@@ -42,6 +42,7 @@ export class OxInputTextarea extends OxFormField {
         @input=${this.onInput.bind(this)}
         @keydown=${this.onKeydown.bind(this)}
         @change=${this.onChange.bind(this)}
+        ?disabled=${this.disabled}
       ></textarea>
     `
   }

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

@@ -232,10 +232,15 @@ export class OxInputUnit extends OxFormField {
         .value=${this._toUserUnit(this.value)}
         placeholder=${ifDefined(this.placeholder)}
         @change=${(e: Event) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
       <div
         id="unit"
         @click=${(e: Event) => {
+          if (this.disabled) {
+            return
+          }
+
           const target = e.currentTarget as HTMLElement
           this.popup.open({
             right: 0,

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

@@ -4,7 +4,7 @@
 
 import './ox-input-color'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -134,9 +134,17 @@ export class OxInputValueMap extends OxFormField {
 
   valueInputTemplate(value?: any) {
     return this.valuetype == 'boolean'
-      ? html` <input type="checkbox" data-value .checked=${!!value} data-value-type=${this.valuetype} /> `
+      ? html`
+          <input
+            type="checkbox"
+            data-value
+            .checked=${!!value}
+            data-value-type=${this.valuetype}
+            ?disabled=${this.disabled}
+          />
+        `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)}> </ox-input-color> `
+      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
       : html`
           <input
             type="text"
@@ -144,6 +152,7 @@ export class OxInputValueMap extends OxFormField {
             placeholder="value"
             value=${ifDefined(value)}
             data-value-type=${this.valuetype}
+            ?disabled=${this.disabled}
           />
         `
   }
@@ -153,27 +162,34 @@ export class OxInputValueMap extends OxFormField {
       ${this._toArray(this.value).map(
         item => html`
           <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} />
+            <input type="text" data-key placeholder="key" .value=${item.key} ?disabled=${this.disabled} />
             ${this.valueInputTemplate(item.value)}
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-      ${keyed(
-        Date.now(),
-        html`
-          <div data-record-new>
-            <input type="text" data-key placeholder="key" value="" />
-
-            ${this.valueInputTemplate()}
-            <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-              <mwc-icon>add</mwc-icon>
-            </button>
-          </div>
-        `
-      )}
+      ${this.disabled
+        ? nothing
+        : keyed(
+            Date.now(),
+            html`
+              <div data-record-new>
+                <input type="text" data-key placeholder="key" value="" />
+
+                ${this.valueInputTemplate()}
+                <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                  <mwc-icon>add</mwc-icon>
+                </button>
+              </div>
+            `
+          )}
 
       <div data-record>
         <input type="text" data-key data-default="" value="default" disabled />

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

@@ -4,7 +4,7 @@
 
 import './ox-input-color'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -138,14 +138,22 @@ export class OxInputValueRange extends OxFormField {
       HTMLInputElement & { value: any }
     >
 
-    inputs[0].focus()
+    inputs[0]?.focus()
   }
 
   valueInputTemplate(value?: any) {
     return this.valuetype == 'boolean'
-      ? html` <input type="checkbox" data-value .checked=${!!value} data-value-type=${this.valuetype} /> `
+      ? html`
+          <input
+            type="checkbox"
+            data-value
+            .checked=${!!value}
+            data-value-type=${this.valuetype}
+            ?disabled=${this.disabled}
+          />
+        `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)}> </ox-input-color> `
+      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
       : html`
           <input
             type="text"
@@ -153,6 +161,7 @@ export class OxInputValueRange extends OxFormField {
             placeholder="value"
             value=${ifDefined(value)}
             data-value-type=${this.valuetype}
+            ?disabled=${this.disabled}
           />
         `
   }
@@ -162,37 +171,46 @@ export class OxInputValueRange extends OxFormField {
       ${this._toArray(this.value).map(
         item => html`
           <div data-record>
-            <input type="text" data-from placeholder="<=" .value=${item.from} />
-            <input type="text" data-to placeholder="&gt;" .value=${item.to} />
+            <input type="text" data-from placeholder="<=" .value=${item.from} ?disabled=${this.disabled} />
+            <input type="text" data-to placeholder="&gt;" .value=${item.to} ?disabled=${this.disabled} />
 
             ${this.valueInputTemplate(item.value)}
-            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: Event) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-      ${keyed(
-        Date.now(),
-        html`
-          <div data-record-new>
-            <input type="text" data-from placeholder="<=" value="" />
-            <input type="text" data-to placeholder="&gt;" value="" />
-
-            ${this.valueInputTemplate()}
-            <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-              <mwc-icon>add</mwc-icon>
-            </button>
-          </div>
-        `
-      )}
+      ${this.disabled
+        ? nothing
+        : keyed(
+            Date.now(),
+            html`
+              <div data-record-new>
+                <input type="text" data-from placeholder="<=" value="" />
+                <input type="text" data-to placeholder="&gt;" value="" />
+
+                ${this.valueInputTemplate()}
+                <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+                  <mwc-icon>add</mwc-icon>
+                </button>
+              </div>
+            `
+          )}
 
       <div data-record>
         <input type="text" data-from data-default="" disabled value="default" />
-        <input type="text" data-to placeholder="&gt;" value="" hidden />
+        <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()}><mwc-icon>chevron_right</mwc-icon></button>
+        <button class="record-action" @click=${(e: Event) => this._sort()} ?disabled=${this.disabled}>
+          <mwc-icon>chevron_right</mwc-icon>
+        </button>
       </div>
     `
   }

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

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { localized, msg } from '@lit/localize'
@@ -110,7 +110,7 @@ export class OxInputWorkShift extends OxFormField {
     }
   `
 
-  @property({ type: Object }) value: WorkShift[] = []
+  @property({ type: Array }) value: WorkShift[] = []
 
   private _changingNow: boolean = false
 
@@ -134,50 +134,58 @@ export class OxInputWorkShift extends OxFormField {
       ${workshifts.map(
         item => html`
           <div data-record>
-            <input type="text" data-name .value=${item.name} required />
+            <input type="text" data-name .value=${item.name} required ?disabled=${this.disabled} />
 
-            <select data-from-date .value=${String(item.fromDate || 0)}>
+            <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>
               <option value="-1">${msg('The day before')}</option>
               <option value="0">${msg('The day')}</option>
               <option value="1">${msg('The day after')}</option>
             </select>
-            <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
+            <input type="time" data-from-time .value=${item.fromTime} step="1800" required ?disabled=${this.disabled} />
 
-            <select data-to-date .value=${String(item.toDate || 0)}>
+            <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>
               <option value="-1">${msg('The day before')}</option>
               <option value="0">${msg('The day')}</option>
               <option value="1">${msg('The day after')}</option>
             </select>
-            <input type="time" data-to-time .value=${item.toTime} step="1800" required />
-
-            <button class="record-action" @click=${(e: Event) => this._delete(e)} tabindex="-1">
+            <input type="time" data-to-time .value=${item.toTime} step="1800" required ?disabled=${this.disabled} />
+
+            <button
+              class="record-action"
+              @click=${(e: Event) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
           </div>
         `
       )}
-
-      <div data-record-new>
-        <input type="text" data-name />
-
-        <select data-from-date>
-          <option value="-1">${msg('The day before')}</option>
-          <option value="0" selected>${msg('The day')}</option>
-          <option value="+1">${msg('The day after')}</option>
-        </select>
-        <input type="time" data-from-time step="1800" />
-
-        <select data-to-date>
-          <option value="-1">${msg('The day before')}</option>
-          <option value="0" selected>${msg('The day')}</option>
-          <option value="+1">${msg('The day after')}</option>
-        </select>
-        <input type="time" data-to-time step="1800" />
-
-        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-      </div>
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <input type="text" data-name />
+
+              <select data-from-date>
+                <option value="-1">${msg('The day before')}</option>
+                <option value="0" selected>${msg('The day')}</option>
+                <option value="+1">${msg('The day after')}</option>
+              </select>
+              <input type="time" data-from-time step="1800" />
+
+              <select data-to-date>
+                <option value="-1">${msg('The day before')}</option>
+                <option value="0" selected>${msg('The day')}</option>
+                <option value="+1">${msg('The day after')}</option>
+              </select>
+              <input type="time" data-to-time step="1800" />
+
+              <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+            </div>
+          `}
     `
   }
 

package/src/ox-select.ts

@@ -140,6 +140,10 @@ export class Select extends OxFormField {
   }
 
   expand() {
+    if (this.disabled) {
+      return
+    }
+
     const popupList = this.querySelector('ox-popup-list') as OxPopupList
 
     if (popupList) {

package/stories/ox-checkbox.stories.ts

@@ -10,7 +10,8 @@ export default {
     name: { control: 'text' },
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
-    indeterminate: { control: 'boolean' }
+    indeterminate: { control: 'boolean' },
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,6 +27,7 @@ interface ArgTypes {
   value?: boolean
   indeterminatable?: boolean
   indeterminate?: boolean
+  disabled?: boolean
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,7 +35,8 @@ const Template: Story<ArgTypes> = ({
   name = 'hello',
   value = true,
   indeterminatable = false,
-  indeterminate = false
+  indeterminate = false,
+  disabled
 }: ArgTypes) => html`
   <ox-checkbox
     @click=${(e: MouseEvent) => console.log('clicked')}
@@ -41,6 +44,7 @@ const Template: Story<ArgTypes> = ({
     .checked=${value}
     ?indeterminatable=${indeterminatable}
     ?indeterminate=${indeterminate}
+    ?disabled=${disabled}
   >
     ${label}
   </ox-checkbox>