vviinn-widgets 2.18.21 → 2.19.1

package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Event, Prop } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import * as E from "fp-ts/Either";
 import { pipe } from "fp-ts/lib/function";
 import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.store";
@@ -6,6 +6,11 @@ import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.
  * @part button -  button look and feel
  */
 export class VviinnImageSelector {
+  constructor() {
+    this.basicEventData = undefined;
+    this.startUpload = undefined;
+    this.resetVpsButton = undefined;
+  }
   async handleInputChange(event) {
     const input = event.target;
     const processingResult = await processSelectedFile(input.files[0]);
@@ -15,82 +20,130 @@ export class VviinnImageSelector {
   isLoading() {
     return imageSearchState.loading;
   }
+  startUploadWatcher(upload) {
+    if (upload) {
+      this.fileInput.click();
+      this.resetVpsButton();
+    }
+  }
   render() {
-    return (h(Host, { exportparts: "button" },
-      this.isLoading() ? h("vviinn-preloader", null) : null,
-      this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" },
-        h("slot", { name: "upload-button-text" }, "Upload image"))),
-      h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event) })));
+    return (h(Host, { exportparts: "button" }, this.isLoading() ? h("vviinn-preloader", null) : null, this.isLoading() ? null : (h("label", { htmlFor: "fileInput", part: "button" }, h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
   }
   static get is() { return "vviinn-image-selector"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-image-selector.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-image-selector.css"]
-  }; }
-  static get properties() { return {
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-image-selector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-image-selector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get events() { return [{
-      "method": "vviinnImageUpload",
-      "name": "vviinnImageUpload",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file"
+      "startUpload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start-upload",
+        "reflect": false
       },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
-          }
+      "resetVpsButton": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       }
-    }, {
-      "method": "vviinnNoResult",
-      "name": "vviinnNoResult",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file that no .jpg, .jpeg or png"
-      },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnImageUpload",
+        "name": "vviinnImageUpload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }, {
+        "method": "vviinnNoResult",
+        "name": "vviinnNoResult",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fires when user select file that no .jpg, .jpeg or png"
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "startUpload",
+        "methodName": "startUploadWatcher"
+      }];
+  }
 }

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop, Event, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { foldValueObject } from "../../../network/ion/ValueObject";
@@ -7,6 +7,8 @@ import { fromAlt, scaleWithSized, center } from "../../../geometry/Rectangle";
 import { imageSearchState, makeRectangularSearchRequest, } from "../../../store/imageSearch.store";
 export class VviinnDetectedObject {
   constructor() {
+    this.detectedObject = undefined;
+    this.basicEventData = undefined;
     this.position = ["0", "0"];
   }
   getObjectPosition() {
@@ -46,80 +48,90 @@ export class VviinnDetectedObject {
   }
   static get is() { return "vviinn-detected-object"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-detected-object.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-detected-object.css"]
-  }; }
-  static get properties() { return {
-    "detectedObject": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ValueObject<DetectedObject>",
-        "resolved": "Valueable<DetectedObject> & Partial<MemberObject> & Partial<Linked>",
-        "references": {
-          "ValueObject": {
-            "location": "import",
-            "path": "../../../network/ion/ValueObject"
-          },
-          "DetectedObject": {
-            "location": "import",
-            "path": "../../../searchSession/searchSession"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-detected-object.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-detected-object.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "detectedObject": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ValueObject<DetectedObject>",
+          "resolved": "Valueable<DetectedObject> & Partial<MemberObject> & Partial<Linked>",
+          "references": {
+            "ValueObject": {
+              "location": "import",
+              "path": "../../../network/ion/ValueObject"
+            },
+            "DetectedObject": {
+              "location": "import",
+              "path": "../../../searchSession/searchSession"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
-  static get states() { return {
-    "position": {}
-  }; }
-  static get events() { return [{
-      "method": "vviinnSelectObject",
-      "name": "vviinnSelectObject",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "SelectObjectEventData",
-        "resolved": "BasicEventData & { detectedObject: ValueObject<DetectedObject>; }",
-        "references": {
-          "SelectObjectEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "position": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnSelectObject",
+        "name": "vviinnSelectObject",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectObjectEventData",
+          "resolved": "BasicEventData & { detectedObject: ValueObject<DetectedObject>; }",
+          "references": {
+            "SelectObjectEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }

package/dist/collection/components/vviinn-image-view/vviinn-image-view.css

@@ -11,7 +11,6 @@ img {
   position: relative;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   z-index: -1;
 }

package/dist/collection/components/vviinn-image-view/vviinn-image-view.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { imageSearchState } from "../../store/imageSearch.store";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
@@ -14,6 +14,9 @@ const getImageSizes = (i) => {
   return [sizes[0], sizes[1]];
 };
 export class VviinnImageView {
+  constructor() {
+    this.basicEventData = undefined;
+  }
   handleInitialImageLoad(ev) {
     const target = ev.target;
     const imageBounds = fromImage(target);
@@ -42,38 +45,34 @@ export class VviinnImageView {
     return pipe(imageSearchState.imageUrl, O.map(() => h("image-cropper", { basicEventData: this.basicEventData })), O.getOrElse(() => null));
   }
   render() {
-    return (h(Host, null,
-      imageSearchState.loading ||
-        imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" },
-        h("vviinn-preloader", null))) : null,
-      h("highlight-box", null),
-      this.renderImage(),
-      this.renderCropper(),
-      imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
+    return (h(Host, null, imageSearchState.loading ||
+      imageSearchState.objectDetectionInProgress ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("highlight-box", null), this.renderImage(), this.renderCropper(), imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))));
   }
   static get is() { return "vviinn-image-view"; }
   static get encapsulation() { return "shadow"; }
   static get styles() { return styles; }
-  static get properties() { return {
-    "basicEventData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../recommendation/events"
+  static get properties() {
+    return {
+      "basicEventData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
+    };
+  }
 }

package/dist/collection/components/vviinn-modal/vviinn-modal.css

@@ -3,7 +3,6 @@
   border-radius: 4px;
   box-sizing: border-box;
   display: grid;
-  grid-template-rows: -webkit-min-content auto;
   grid-template-rows: min-content auto;
   max-width: 960px;
   overflow: auto;
@@ -11,19 +10,14 @@
 
 @media (max-width: 415px) {
   :host {
-    -webkit-animation-name: fade-in;
-            animation-name: fade-in;
-    -webkit-animation-duration: 0.5s;
-            animation-duration: 0.5s;
-    -webkit-animation-fill-mode: forwards;
-            animation-fill-mode: forwards;
+    animation-name: fade-in;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
   }
 
   :host(.closed) {
-    -webkit-animation-name: fade-out;
-            animation-name: fade-out;
-    -webkit-animation-fill-mode: none;
-            animation-fill-mode: none;
+    animation-name: fade-out;
+    animation-fill-mode: none;
   }
 
   .body {
@@ -40,11 +34,7 @@
 .head {
   align-items: center;
   border-bottom: 1px solid #f4f4f4;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: -webkit-min-content auto -webkit-min-content;
-  grid-template-columns: min-content auto min-content;
-  justify-items: center;
+  display: flex;
   padding: 16px;
 }
 
@@ -52,6 +42,7 @@
   font-weight: 600;
   font-size: 18px;
   line-height: 24px;
+  margin: 0 auto;
 }
 
 button {
@@ -65,16 +56,6 @@ button {
   padding: unset;
 }
 
-@-webkit-keyframes fade-in {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
 @keyframes fade-in {
   from {
     transform: translateY(100%);
@@ -85,16 +66,6 @@ button {
   }
 }
 
-@-webkit-keyframes fade-out {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
 @keyframes fade-out {
   from {
     transform: translateY(0);