@operato/input 1.0.0-alpha.45 → 1.0.0-alpha.48

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

@@ -0,0 +1,251 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-input-color'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+type WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }
+
+/**
+work-shift array value editor element
+
+Example:
+
+  <ox-input-work-shift
+    .value=${value}
+  </ox-input-work-shift>
+*/
+
+@customElement('ox-input-work-shift')
+export class OxInputWorkShift extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #ccc;
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+
+    div > * {
+      min-width: 0px;
+      margin: 2px;
+      padding: 0;
+    }
+
+    button,
+    empty-element {
+      width: 20px;
+      text-align: center;
+    }
+
+    input,
+    select,
+    span {
+      flex: 1;
+    }
+
+    input:required:invalid {
+      border: 1px dashed red;
+    }
+
+    [placeholder='value'] {
+      flex: 2;
+    }
+
+    div {
+      border-bottom: 1px solid #c0c0c0;
+    }
+
+    div:last-child {
+      border-bottom: none;
+    }
+  `
+
+  @property({ type: Object }) value: WorkShift[] = []
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    return html`
+      <div data-header>
+        <span>name</span>
+        <span>from date</span>
+        <span>from time</span>
+        <span>to date</span>
+        <span>to time</span>
+        <empty-element></empty-element>
+      </div>
+
+      ${this.value.map(
+        item => html`
+          <div data-record>
+            <input type="text" data-name .value=${item.name} required />
+
+            <select data-from-date .value=${item.fromDate || 0}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">The day after</option>
+            </select>
+            <input type="time" data-from-time .value=${item.fromTime} step="1800" required />
+
+            <select data-to-date .value=${item.toDate || 0}>
+              <option value="-1">The day before</option>
+              <option value="0">The day</option>
+              <option value="1">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">-</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-name />
+
+        <select data-from-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-from-time step="1800" />
+
+        <select data-to-date>
+          <option value="-1">The day before</option>
+          <option value="0" selected>The day</option>
+          <option value="+1">The day after</option>
+        </select>
+        <input type="time" data-to-time step="1800" />
+
+        <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">+</button>
+      </div>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const div = input.parentElement as HTMLDivElement
+
+    if (div.hasAttribute('data-record')) {
+      this._build()
+    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: boolean) {
+    if (includeNewRecord) {
+      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]')
+    }
+
+    var value: WorkShift[] = []
+    for (var i = 0; i < records.length; i++) {
+      const record = records[i]
+
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+
+      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value
+      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value
+      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value
+      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value
+
+      if (!name) {
+        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromDate) {
+        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!fromTime) {
+        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toDate) {
+        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (!toTime) {
+        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()
+        return
+      }
+
+      if (name) {
+        value.push({
+          name,
+          fromDate: Number(fromDate),
+          fromTime,
+          toDate: Number(toDate),
+          toTime
+        })
+      }
+    }
+
+    this.value = value
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any; type: string }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: Event) {
+    const record = (e.target as Element).parentElement
+
+    const dataName = record!.querySelector('[data-name]') as HTMLInputElement
+    dataName.name = ''
+
+    this._build()
+  }
+}

package/dist/src/ox-input-id.d.ts

@@ -1,11 +0,0 @@
-import { OxFormField } from './ox-form-field';
-export declare class OxInputId extends OxFormField {
-    static styles: import("lit").CSSResult;
-    property: {
-        component?: string;
-    } | null | undefined;
-    _ids: Array<string>;
-    render(): import("lit-html").TemplateResult<1>;
-    _onInputFocused(e: FocusEvent): void;
-    _onInputChanged(e: InputEvent): void;
-}

package/dist/src/ox-input-id.js

@@ -1,68 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
-let OxInputId = class OxInputId extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this._ids = [];
-    }
-    static { this.styles = css `
-    :host {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    input {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-  `; }
-    render() {
-        const ids = this._ids || [];
-        return html `
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ''}
-        @focusin=${(e) => this._onInputFocused(e)}
-        @change=${(e) => this._onInputChanged(e)}
-        .placeholder=${this.getAttribute('placeholder') || ''}
-        list="ids"
-      />
-
-      <datalist id="ids">${ids.map(id => html ` <option value=${id}></option> `)}</datalist>
-    `;
-    }
-    _onInputFocused(e) {
-        var { component } = this.property || {};
-        document.dispatchEvent(new CustomEvent('get-all-scene-component-ids', {
-            detail: {
-                component,
-                callback: (ids) => {
-                    this._ids = ids;
-                }
-            }
-        }));
-    }
-    _onInputChanged(e) {
-        e.stopPropagation();
-        this.value = e.target.value;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-};
-__decorate([
-    property({ type: Object })
-], OxInputId.prototype, "property", void 0);
-__decorate([
-    state()
-], OxInputId.prototype, "_ids", void 0);
-OxInputId = __decorate([
-    customElement('ox-input-id')
-], OxInputId);
-export { OxInputId };
-//# sourceMappingURL=ox-input-id.js.map

package/dist/src/ox-input-id.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-id.js","sourceRoot":"","sources":["../../src/ox-input-id.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAmBW,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;aA5DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,CAAA;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;;2BAIlC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA5C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoD;AAEtE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6DrB;SA7DY,SAAS","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: string } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}