@operato/ocr 0.2.15 → 0.2.19

package/src/{ocr-helper.ts → ox-ocr-helper.ts}

@@ -1,12 +1,11 @@
-import './camera-capturer'
 import '@material/mwc-button'
+import './ox-camera-capturer'
+import './ox-ocr-result-image'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { gql } from 'graphql-tag'
-
-@customElement('ocr-helper')
+@customElement('ox-ocr-helper')
 export class OcrHelper extends LitElement {
   static styles = [
     css`
@@ -23,7 +22,7 @@ export class OcrHelper extends LitElement {
 
       #images {
         flex: 1;
-        background-color: black;
+        background-color: var(--main-section-background-color, #f4f7fb);
         color: white;
 
         display: flex;
@@ -37,24 +36,20 @@ export class OcrHelper extends LitElement {
 
       [i] {
         min-width: 50px;
-        background-color: black;
+        background-color: var(--secondary-color, #394e64);
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
+        padding: var(--padding-narrow, 4px);
         text-align: center;
+        height: 1.4em;
       }
 
       [i][active] {
-        background-color: red;
+        background-color: var(--primary-color, #22a6a7);
+        font-weight: bold;
       }
 
-      [image] {
+      ox-ocr-result-image {
         flex: 1;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      img {
-        style=width: 100%;
       }
     `
   ]
@@ -69,14 +64,10 @@ export class OcrHelper extends LitElement {
     const files = this._files || []
     const index = this.index || 0
     const file = files[index]
-    const image = file && URL.createObjectURL(file)
-    if (image) {
-      requestAnimationFrame(() => URL.revokeObjectURL(image))
-    }
 
     return html`
       <div attachment-wrap>
-        <camera-capturer
+        <ox-camera-capturer
           name="scanner"
           id="capturer"
           label="Capture Images"
@@ -85,10 +76,10 @@ export class OcrHelper extends LitElement {
           ?hidden=${false}
           custom-input
           @files-change=${(e: Event) => this.fileschange(e)}
-        ></camera-capturer>
+        ></ox-camera-capturer>
       </div>
       <div buttons>
-        <mwc-button @click=${(e: Event) => this.upload()}>submit</mwc-button>
+        <mwc-button @click=${(e: Event) => this.submit()}>submit</mwc-button>
         <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>
       </div>
       <div id="images">
@@ -104,8 +95,9 @@ export class OcrHelper extends LitElement {
         >
           ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}
         </div>
-        <div image>${file ? html` <img src=${URL.createObjectURL(file)} /> ` : html``}</div>
+        <ox-ocr-result-image .file=${file} @selected=${(e: CustomEvent) => this.onSelected(e)}></ox-ocr-result-image>
       </div>
+
       <div id="result"></div>
     `
   }
@@ -119,7 +111,16 @@ export class OcrHelper extends LitElement {
     this.result.textContent = ''
   }
 
-  async upload() {
+  onSelected(e: CustomEvent) {
+    navigator.clipboard.writeText(e.detail)
+  }
+
+  async submit() {
+    this.dispatchEvent(
+      new CustomEvent('attached', {
+        detail: this.fileUploader?.files
+      })
+    )
     // const response = await client.query({
     //   query: gql`
     //     query ocrRequest($images: [Upload!]!) {