@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/components/form/form-hotzones-creator/form-hotzones-creator.js

@@ -0,0 +1,344 @@
+import { getCssColor, hexToRgbArray, translate, translateMulti } from '@shared/utils';
+import { Component, Element, Event, forceUpdate, h, Host, Prop } from '@stencil/core';
+import { 
+//  Editor factory method
+appendDefaultEditor, 
+// Default image reader and writer
+createDefaultImageReader, createDefaultImageWriter, 
+// User interface and plugin locale objects
+locale_en_gb, 
+// Because we use the annotate plugin we also need
+// to import the markup editor locale and the shape preprocessor
+markup_editor_locale_en_gb, 
+// Plugins we want to use
+plugin_annotate, plugin_annotate_locale_en_gb, 
+// Method used to register the plugins
+setPlugins } from '../image-cropper-dialog/pintura/pintura';
+// This registers the plugins with Pintura Image Editor
+setPlugins(plugin_annotate);
+const DEFAULT_SHAPE = {
+  x: '30%',
+  y: '30%',
+  width: '40%',
+  height: '40%'
+};
+export class YooFormHotzonesCreatorComponent {
+  constructor() {
+    this.value = {};
+  }
+  get isHotZones() {
+    return this.type === 'hotzone';
+  }
+  componentWillLoad() {
+    this.value.hotzonesColor = this.value.hotzonesColor || getCssColor('app-color');
+    this.hotzonesColorRgb = hexToRgbArray(this.value.hotzonesColor);
+    this.value.hotzones = this.value.hotzones || [];
+  }
+  componentDidLoad() {
+    this.value.image && this.initEditor();
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeIntersectionObserver();
+    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  removeIntersectionObserver() {
+    if (this.observer) {
+      this.observer.unobserve(this.host);
+      this.observer.disconnect();
+      this.observer = undefined;
+    }
+  }
+  initEditor() {
+    var _a, _b, _c, _d, _e;
+    const locale = {
+      ...locale_en_gb,
+      ...plugin_annotate_locale_en_gb,
+      ...markup_editor_locale_en_gb
+    };
+    this.editor = appendDefaultEditor(this.previewElement, {
+      src: this.value.image,
+      imageReader: createDefaultImageReader(),
+      imageWriter: createDefaultImageWriter({
+        targetSize: {
+          fit: 'contain',
+          upscale: true
+        }
+      }),
+      locale,
+      util: 'annotate',
+      enableToolbar: false,
+      enableUtils: false,
+      enableButtonClose: false,
+      enableButtonExport: false,
+      enableNavigateHistory: false,
+      // Disable shape controls
+      markupEditorShapeStyleControls: {},
+      annotateActiveTool: 'rectangle',
+      willRenderCanvas: (shapes, _state) => {
+        shapes.annotationShapes.forEach(s => {
+          s.backgroundColor = [...this.hotzonesColorRgb, 0.4];
+          s.strokeColor = this.hotzonesColorRgb;
+          s.strokeWidth = 2;
+          s.cornerRadius = 12;
+          s.disableReorder = true;
+          s.disableRotate = this.isHotZones;
+        });
+        return {
+          ...shapes
+        };
+      }
+    });
+    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.on('load', () => {
+      var _a, _b;
+      this.editorContainer.hidden = !this.value.image;
+      this.editor.imageAnnotation = ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.hotzones) === null || _b === void 0 ? void 0 : _b.map(hotzone => {
+        if (hotzone['percentRect']) {
+          const { x, y, width, height } = hotzone['percentRect'];
+          return { x: `${x}%`, y: `${y}%`, width: `${width}%`, height: `${height}%` };
+        }
+        return hotzone.style;
+      })) || [];
+    });
+    (_b = this.editor) === null || _b === void 0 ? void 0 : _b.on('addshape', () => {
+      this.emitValues();
+    });
+    (_c = this.editor) === null || _c === void 0 ? void 0 : _c.on('updateshape', () => {
+      this.emitValues();
+    });
+    (_d = this.editor) === null || _d === void 0 ? void 0 : _d.on('removeshape', ({ id }) => {
+      var _a;
+      this.editor.imageAnnotation = (_a = this.editor.imageAnnotation) === null || _a === void 0 ? void 0 : _a.filter(annotation => annotation['id'] !== id);
+      this.emitValues();
+    });
+    (_e = this.editor) === null || _e === void 0 ? void 0 : _e.on('selectshape', () => {
+      forceUpdate(this);
+    });
+  }
+  selectShape(index) {
+    var _a, _b;
+    if ((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.imageAnnotation) === null || _b === void 0 ? void 0 : _b.length) {
+      this.editor.imageAnnotation = this.editor.imageAnnotation.map((a, i) => ({ ...a, isSelected: i === index }));
+    }
+  }
+  emitValues(event) {
+    var _a;
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if ((_a = this.editor.imageAnnotation) === null || _a === void 0 ? void 0 : _a.length) {
+      this.value = {
+        ...this.value,
+        hotzones: this.editor.imageAnnotation.map((annotation, index) => {
+          var _a, _b, _c, _d, _e, _f;
+          const { x, y, left, top, width, height } = annotation || {};
+          ((_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.hotzones) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c['percentRect']) && delete this.value.hotzones[index]['percentRect'];
+          ((_d = this.value) === null || _d === void 0 ? void 0 : _d['hotspots']) && delete this.value['hotspots'];
+          return { ...((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e.hotzones) === null || _f === void 0 ? void 0 : _f[index]) || {}, style: { left: x || left, top: y || top, width, height } };
+        })
+      };
+      this.inputChanged.emit(this.value);
+    }
+  }
+  onImageUpdated(ev) {
+    this.value.image = ev.detail;
+    this.editorContainer.hidden = !this.value.image;
+    this.value.hotzones = null;
+    this.initEditor();
+    this.emitValues(ev);
+  }
+  onHotspotImageUpdated(ev, index) {
+    this.value.hotzones[index].image = ev.detail;
+    this.emitValues(ev);
+  }
+  onHotspotDescriptionUpdated(ev, index) {
+    this.value.hotzones[index].description = ev.detail;
+    this.emitValues(ev);
+  }
+  addHotzone() {
+    this.editor.imageAnnotation = this.editor.imageAnnotation || [];
+    this.editor.imageAnnotation.push({ ...DEFAULT_SHAPE, disableReorder: true, isSelected: true });
+    this.selectShape(this.editor.imageAnnotation.length - 1);
+    this.emitValues();
+  }
+  deleteHotzone(index) {
+    this.value.hotzones.splice(index, 1);
+    this.editor.imageAnnotation[index].isSelected = false;
+    this.editor.imageAnnotation.splice(index, 1);
+    this.emitValues();
+  }
+  updateColorPicker(ev) {
+    const color = ev.detail.substring(0, 7); // remove alpha
+    this.value.hotzonesColor = color;
+    this.hotzonesColorRgb = hexToRgbArray(color);
+    this.emitValues(ev);
+  }
+  renderColorPicker() {
+    return (h("div", { class: "color-picker-container" },
+      h("h2", null, translate('HOTZONESCOLOUR')),
+      h("yoo-form-color-field", { value: this.value.hotzonesColor, allowOther: true, rteColors: true, onInputChanged: (ev) => this.updateColorPicker(ev) })));
+  }
+  renderAddHotZoneHeader() {
+    return h("section", { id: "add-hotzone-header" },
+      h("yoo-button", { color: "app-color", onClick: () => this.addHotzone() },
+        h("yoo-icon", { name: "circle-plus", color: "light", slot: "start", size: "small" }),
+        translate('ADDHOTZONE')),
+      h("yoo-info-text", { icon: "info", text: translate('CLICKHOTZONETOEDIT') }));
+  }
+  renderHotzoneImageUploader(i) {
+    return h("div", { class: "image-container" },
+      h("h2", null, translate('IMAGE')),
+      h("yoo-form-capture", { required: true, allowLibrary: true, allowUnsplash: true, value: this.value.hotzones[i].image, onInputChanged: (ev) => { this.onHotspotImageUpdated(ev, i); } }));
+  }
+  renderMainImageUploader() {
+    var _a;
+    return (h("div", { class: "image-picker-container" },
+      h("h2", null, translate('IMAGE')),
+      h("yoo-form-capture", { required: true, allowLibrary: true, allowUnsplash: true, value: (_a = this.value.image) !== null && _a !== void 0 ? _a : null, onInputChanged: (ev) => this.onImageUpdated(ev) })));
+  }
+  renderCollapsibleContent(index) {
+    return h("section", { id: "collapsible-content" },
+      this.renderHotzoneImageUploader(index),
+      h("div", { class: "description-container" },
+        h("header", null,
+          h("h2", null,
+            translate('DESCRIPTION'),
+            h("span", { class: "optional" }, translate('IMAGE'))),
+          h("yoo-tooltip", { content: translateMulti('HELPERIMAGEMAPDESCRIPTION') },
+            h("yoo-icon", { name: "help", size: "small", color: "stable-alt" }))),
+        h("yoo-form-text-area", { value: this.value.hotzones[index].description, onInputChanged: (ev) => this.onHotspotDescriptionUpdated(ev, index), onTranslationValueUpdated: (ev) => {
+            ev.stopImmediatePropagation();
+            this.translationValueUpdated.emit(ev.detail);
+          }, translations: this.translations })));
+  }
+  renderHotspotEditor() {
+    var _a;
+    return !this.isHotZones && ((_a = this.value.hotzones) === null || _a === void 0 ? void 0 : _a.map((_, index) => {
+      var _a, _b, _c;
+      return [
+        h("yoo-collapsible", { class: "form", collapsed: !((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.imageAnnotation[index]) === null || _b === void 0 ? void 0 : _b.isSelected), onContentShown: (ev) => this.selectShape(ev.detail && index), header: `${translate('HOTZONE')} ${(index + 1)}`, isDeletable: ((_c = this.value.hotzones) === null || _c === void 0 ? void 0 : _c.length) >= 1, onDeleteClicked: () => this.deleteHotzone(index) }, this.renderCollapsibleContent(index)),
+        this.value.hotzones[index + 1] && h("hr", null)
+      ];
+    }));
+  }
+  renderHeader() {
+    return h("header", null,
+      this.renderMainImageUploader(),
+      this.renderColorPicker());
+  }
+  renderPreview() {
+    return !this.disconnected && h("main", { ref: (el) => (this.editorContainer = el), hidden: true },
+      h("h2", null, translate('PREVIEW')),
+      h("section", { id: "preview", ref: (el) => (this.previewElement = el) }),
+      this.renderAddHotZoneHeader(),
+      this.renderHotspotEditor());
+  }
+  render() {
+    return this.value && h(Host, null,
+      this.renderHeader(),
+      this.renderPreview());
+  }
+  static get is() { return "yoo-form-hotzones-creator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-hotzones-creator.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-hotzones-creator.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IHotzoneValues",
+        "resolved": "IHotzoneValues",
+        "references": {
+          "IHotzoneValues": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{}"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'imagemap' | 'hotzone'",
+        "resolved": "\"hotzone\" | \"imagemap\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "translations": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ITranslation[]",
+        "resolved": "ITranslation[]",
+        "references": {
+          "ITranslation": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "inputChanged",
+      "name": "inputChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "IHotzoneValues",
+        "resolved": "IHotzoneValues",
+        "references": {
+          "IHotzoneValues": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "translationValueUpdated",
+      "name": "translationValueUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ key: string, value: string }",
+        "resolved": "{ key: string; value: string; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/form/form-image-collection/form-image-collection.css

@@ -204,32 +204,31 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host {
   width: 100%;
 }
-:host .image-grid {
+:host #gallery {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin: 0 auto;
-  padding: var(--spacing-16, 1rem);
   column-gap: var(--spacing-16, 1rem);
   row-gap: var(--spacing-16, 1rem);
 }
-:host .image-grid .image-container {
+:host #gallery .image {
   position: relative;
   cursor: pointer;
 }
-:host .image-grid .image-container .image {
+:host #gallery .image yoo-img {
   background-position: center;
   background-size: cover;
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
 }
-:host .image-grid .image-container .image:before {
+:host #gallery .image yoo-img:before {
   display: block;
   width: 0;
   height: 0;
   padding-bottom: 75%;
   content: "";
 }
-:host .image-grid .image-container yoo-icon {
+:host #gallery .image yoo-icon {
   position: absolute;
   top: var(--spacing-08, 0.5rem);
   right: var(--spacing-08, 0.5rem);
@@ -237,7 +236,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--light, #ffffff);
   border-radius: 50%;
 }
-:host .image-grid .image-container .overlay {
+:host #gallery .image #overlay {
   position: absolute;
   top: 0;
   z-index: 2;
@@ -264,10 +263,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   content: "";
 }
 
-:host(.web) .image-grid {
+:host(.web) #gallery {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   max-width: 82rem;
-  padding: var(--spacing-24, 1.5rem);
 }
 :host(.web) .main-container {
   width: 40%;
@@ -298,11 +296,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
 }
 
-:host([animated]) .image-container {
+:host([animated]) .image {
   --image-index: 0;
   transform: translateY(100vh);
   animation-name: slide-up;
-  animation-duration: 0.4s;
+  animation-duration: 0.75s;
   animation-timing-function: var(--ease-out-quad);
   animation-delay: calc(0.5s + var(--image-index) * 0.1s);
   animation-fill-mode: forwards;

package/dist/collection/components/form/form-image-collection/form-image-collection.js

@@ -1,4 +1,4 @@
-import { closeModal, getMedia, getModalAnimation, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
+import { closeModal, getMedia, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache';
 export class YooFormImageCollectionComponent {
@@ -9,49 +9,36 @@ export class YooFormImageCollectionComponent {
     this.imagesRevealed = 0;
     this.images = [];
   }
-  async onValuesChanged() {
-    this.images = [];
-    await this.prepareImages();
-  }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
+  async onValuesChanged() {
+    await this.prepareImages();
+  }
   async componentWillLoad() {
     await this.prepareImages();
   }
   async prepareImages() {
     var _a;
     if ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) {
-      const newImages = [];
-      for (const imagePair of this.values) {
-        imagePair.image = await getFromOfflineStorage(imagePair.image);
-        newImages.push(imagePair);
-      }
-      this.images = newImages;
+      this.images = await Promise.all(this.values.map(async (v) => ({ ...v, image: await getFromOfflineStorage(v.image) })));
     }
   }
-  updateValidity() {
-    const _validity = this.imagesRevealed === this.values.length;
-    if (this.validity !== _validity) {
-      this.validity = _validity;
+  async imageClicked(imagePair, index) {
+    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+    if (!this.images[index].revealed) {
+      this.imagesRevealed += 1;
+      this.images[index].revealed = true;
+      this.validity = this.imagesRevealed === this.values.length;
     }
   }
-  imageClicked(imagePair, index) {
-    showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', getModalAnimation('Enter', 'X', true), getModalAnimation('Leave', 'X', true), true).then(() => {
-      if (!this.images[index].revealed) {
-        this.imagesRevealed += 1;
-        this.images[index].revealed = true;
-        this.updateValidity();
-      }
-    });
-  }
   renderImages() {
     var _a;
-    return (h("div", { class: "image-grid" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map((imagePair, index) => {
-      return (h("div", { class: "image-container", style: this.animated ? { '--image-index': index.toString() } : {}, onClick: () => this.imageClicked(imagePair, index) },
-        h("div", { class: "image", style: { 'background-image': `url(${getMedia(imagePair.image)})` } }),
-        imagePair.revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { class: "overlay" })]));
-    })));
+    return h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map(({ revealed, image, description }, i) => {
+      return h("section", { class: "image", ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.imageClicked({ revealed, image, description }, i) },
+        h("yoo-img", { src: getMedia(image), type: "background" }),
+        revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { id: "overlay" })]);
+    }));
   }
   renderDetailedView() {
     var _a, _b;
@@ -104,7 +91,7 @@ export class YooFormImageCollectionComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -121,7 +108,7 @@ export class YooFormImageCollectionComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -143,7 +130,7 @@ export class YooFormImageCollectionComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -158,7 +145,7 @@ export class YooFormImageCollectionComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -169,7 +156,7 @@ export class YooFormImageCollectionComponent {
     },
     "values": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "ICollectionProducts[]",
         "resolved": "ICollectionProducts[]",
@@ -181,7 +168,7 @@ export class YooFormImageCollectionComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -190,7 +177,8 @@ export class YooFormImageCollectionComponent {
     }
   }; }
   static get states() { return {
-    "imagesRevealed": {}
+    "imagesRevealed": {},
+    "images": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",
@@ -210,10 +198,10 @@ export class YooFormImageCollectionComponent {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
       "propName": "validity",
       "methodName": "onValidityChanged"
+    }, {
+      "propName": "values",
+      "methodName": "onValuesChanged"
     }]; }
 }

package/dist/collection/components/form/form-image-tagging/form-image-tagging.css

@@ -229,7 +229,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s;
 }
 :host .image .inner-container .flip-box-front, :host .image .inner-container .flip-box-back {
-  position: absolute;
   width: 100%;
   height: 100%;
   background-color: var(--light, #ffffff);
@@ -239,6 +238,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   z-index: 1;
   transform: rotateY(180deg);
 }
+:host .image .inner-container .image-overlay,
 :host .image .inner-container yoo-img {
   border-radius: var(--border-radius-08, 0.5rem);
 }
@@ -274,11 +274,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--app-color, #5a30f4);
 }
 :host p {
-  margin: var(--spacing-32, 2rem) 0 0;
   color: var(--stable, #adadad);
 }
 :host section.tags {
-  margin-top: var(--spacing-16, 1rem);
   white-space: nowrap;
 }
 :host section.tags .dropzone {