@operato/input 0.4.3 → 1.0.0-alpha.11

package/src/ox-input-range.ts

@@ -0,0 +1,147 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+@customElement('ox-input-range')
+class OxInputRange extends OxFormField {
+  static styles = css`
+    :host {
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      padding: 1px 0;
+
+      width: 100%;
+      user-select: text;
+    }
+
+    input[type='number'] {
+      width: 48px;
+      overflow: hidden;
+    }
+
+    input[type='number'] {
+      color: black;
+      border: none;
+      font-weight: 300;
+      background: white;
+      padding: 1px 2px;
+    }
+
+    input[type='range'] {
+      -webkit-appearance: none;
+      border: none;
+      outline: none;
+      width: 100%;
+      flex: 1;
+      height: 16px;
+      background-color: transparent;
+    }
+    input[type='range']::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border: none;
+      border-radius: 5px;
+    }
+    input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      border: none;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+      margin-top: -5px;
+    }
+    input[type='range']:focus {
+      outline: none;
+    }
+    input[type='range']:focus::-webkit-slider-runnable-track {
+      background: black;
+    }
+
+    input[type='range']::-moz-range-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border: none;
+      border-radius: 5px;
+    }
+    input[type='range']::-moz-range-thumb {
+      border: none;
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+    }
+
+    input[type='range']:-moz-focusring {
+      outline: 1px solid black;
+      outline-offset: -1px;
+    }
+
+    input[type='range']::-ms-track {
+      width: 100%;
+      height: 1px;
+      background: black;
+      border-radius: 10px;
+      color: transparent;
+      border: none;
+      outline: none;
+    }
+    input[type='range']::-ms-thumb {
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: black;
+      border: none;
+      outline: none;
+      margin-top: 2px;
+    }
+
+    input:focus {
+      outline: none;
+      opacity: 1;
+    }
+  `
+
+  @property({ type: Number }) value: number = 0
+  @property({ type: Number }) step: number = 1
+  @property({ type: Number }) min: number = -100
+  @property({ type: Number }) max: number = 100
+
+  render() {
+    return html`
+      <input
+        type="range"
+        .value=${this.value}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        @input=${(e: InputEvent) => {
+          e.stopPropagation()
+          this.value = Number((e.target as HTMLInputElement).value)
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        }}
+      />
+
+      <input
+        type="number"
+        .value=${this.value}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        @change=${(e: Event) => {
+          e.stopPropagation()
+          this.value = Number((e.target as HTMLInputElement).value)
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        }}
+      />
+    `
+  }
+}

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

@@ -4,19 +4,19 @@
 
 import { LitElement, html, css } from 'lit'
 
-import './things-editor-color'
+import './ox-input-color'
 
 /**
 range value editor element
 
 Example:
 
-  <things-editor-value-range range=${range}
+  <ox-input-value-range range=${range}
                             rangetype=${type}
                             valuetype=${valuetype}>
-  </things-editor-value-range>
+  </ox-input-value-range>
 */
-export default class ThingsEditorValueRange extends LitElement {
+export  class ThingsEditorValueRange extends LitElement {
   static get is() {
     return 'things-editor-value-range'
   }
@@ -65,15 +65,15 @@ export default class ThingsEditorValueRange extends LitElement {
         }
 
         input,
-        things-editor-color {
+        ox-input-color {
           flex: 1;
         }
 
-        things-editor-color {
-          --things-editor-color-input-color: {
+        ox-input-color {
+          --ox-input-color-input-color: {
             margin: 2px;
           }
-          --things-editor-color-input-span: {
+          --ox-input-color-input-span: {
             width: 12px;
             height: 12px;
           }
@@ -121,7 +121,7 @@ export default class ThingsEditorValueRange extends LitElement {
             ${this.valuetype == 'boolean'
               ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
               : this.valuetype == 'color'
-              ? html` <things-editor-color data-value .value=${item.value}> </things-editor-color> `
+              ? html` <ox-input-color data-value .value=${item.value}> </ox-input-color> `
               : html`
                   <input
                     type="text"
@@ -142,7 +142,7 @@ export default class ThingsEditorValueRange extends LitElement {
         ${this.valuetype == 'boolean'
           ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
           : this.valuetype == 'color'
-          ? html` <things-editor-color data-value value="" placeholder="value"> </things-editor-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 => this._add(e)} tabindex="-1">+</button>
       </div>
@@ -162,8 +162,8 @@ export default class ThingsEditorValueRange extends LitElement {
             `
           : this.valuetype == 'color'
           ? html`
-              <things-editor-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
-              </things-editor-color>
+              <ox-input-color data-value .value=${(this.value && this.value.default) || ''} placeholder="value">
+              </ox-input-color>
             `
           : html`
               <input

package/src/{ox-input-id.ts → ox-input-scene-component-id.ts}

@@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
 
-@customElement('ox-input-id')
+@customElement('ox-input-scene-component-id')
 export class OxInputId extends OxFormField {
   static styles = css`
     :host {

package/src/ox-input-stack.ts

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { OxFormField } from './ox-form-field'
 
 @customElement('ox-input-stack')
-export default class OxInputStack extends OxFormField {
+export class OxInputStack extends OxFormField {
   static styles = [
     css`
       :host {

package/test/property-angle.test.ts.backup

@@ -13,7 +13,7 @@ describe('OxInputAngle', () => {
 
   it('increases the angle on button click', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
-    el.shadowRoot!.querySelector('button')!.click()
+    el.renderRoot!.querySelector('button')!.click()
 
     expect(el.value).to.equal(6)
   })

package/translations/en.json

@@ -0,0 +1 @@
+{}

package/translations/ko.json

@@ -0,0 +1 @@
+{}

package/translations/ms.json

@@ -0,0 +1 @@
+{}

package/translations/zh.json

@@ -0,0 +1 @@
+{}

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"]}