vviinn-widgets 2.18.21 → 2.19.0

package/dist/collection/components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.js

@@ -1,39 +1,45 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class VviinnWrongFormat {
+  constructor() {
+    this.handler = undefined;
+  }
   render() {
-    return (h(Host, null,
-      h("vviinn-error", null,
-        h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"),
-        h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."),
-        h("button", { slot: "action", onClick: this.handler }, "Neues Bild hochladen"))));
+    return (h(Host, null, h("vviinn-error", null, h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), h("button", { slot: "action", onClick: this.handler }, "Neues Bild hochladen"))));
   }
   static get is() { return "vviinn-wrong-format"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-wrong-format.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-wrong-format.css"]
-  }; }
-  static get properties() { return {
-    "handler": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "VoidFunction",
-        "resolved": "VoidFunction",
-        "references": {
-          "VoidFunction": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-wrong-format.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-wrong-format.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "handler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VoidFunction",
+          "resolved": "VoidFunction",
+          "references": {
+            "VoidFunction": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
+    };
+  }
 }
+//# sourceMappingURL=vviinn-wrong-format.js.map

package/dist/collection/components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-wrong-format.js","sourceRoot":"","sources":["../../../../src/components/vviinn-error/vviinn-wrong-format/vviinn-wrong-format.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;;;EAG5B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH;QACE,UAAI,IAAI,EAAC,OAAO,2CAAqC;QACrD,YAAM,IAAI,EAAC,MAAM,mHAGV;QACP,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,2BAElC,CACI,CACV,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"vviinn-wrong-format\",\n  styleUrl: \"vviinn-wrong-format.css\",\n  shadow: true,\n})\nexport class VviinnWrongFormat {\n  @Prop() handler: VoidFunction;\n\n  render() {\n    return (\n      <Host>\n        <vviinn-error>\n          <h4 slot=\"title\">Dateityp wird nicht unterstützt</h4>\n          <span slot=\"text\">\n            Leider unterstützen wir dieses Format nicht. Bitte laden Sie eine\n            .jpg, .png oder .webp Bilddatei hoch.\n          </span>\n          <button slot=\"action\" onClick={this.handler}>\n            Neues Bild hochladen\n          </button>\n        </vviinn-error>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, State, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import { toFile } from "../../../Image/toFile";
 import { imageSearchState, processSelectedFile, } from "../../../store/imageSearch.store";
@@ -8,6 +8,7 @@ export class VviinnExampleImage {
     this.src = "";
     this.width = 0;
     this.height = 0;
+    this.basicEventData = undefined;
     this.selected = false;
   }
   async selectImage() {
@@ -28,137 +29,145 @@ export class VviinnExampleImage {
       this.selected);
   }
   render() {
-    return (h(Host, { onClick: () => this.selectImage(), onKeyUp: (ev) => this.handleKeyPress(ev) },
-      this.showPreloader() ? (h("div", { class: "image-preloader" },
-        h("vviinn-preloader", null))) : null,
-      h("img", { src: this.src, width: this.width, height: this.height, tabindex: 1 })));
+    return (h(Host, { onClick: () => this.selectImage(), onKeyUp: (ev) => this.handleKeyPress(ev) }, this.showPreloader() ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null, h("img", { src: this.src, width: this.width, height: this.height, tabindex: 1 })));
   }
   static get is() { return "vviinn-example-image"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-example-image.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-example-image.css"]
-  }; }
-  static get properties() { return {
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "src",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-example-image.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-example-image.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "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 {
-    "selected": {}
-  }; }
-  static get events() { return [{
-      "method": "vviinnImageUpload",
-      "name": "vviinnImageUpload",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "BasicEventData",
-        "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
-        "references": {
-          "BasicEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "selected": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnImageUpload",
+        "name": "vviinnImageUpload",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": ""
-      },
-      "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": ""
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }
+//# sourceMappingURL=vviinn-example-image.js.map

package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-example-image.js","sourceRoot":"","sources":["../../../../src/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAQtC,MAAM,OAAO,kBAAkB;;eACP,EAAE;iBACA,CAAC;kBACA,CAAC;;oBAGG,KAAK;;EAK1B,KAAK,CAAC,WAAW;IACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpC,MAAM,aAAa,GAAG,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAEtD,IAAI,CACF,aAAa,EACb,CAAC,CAAC,KAAK,CACL,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,EACnD,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CACvD,CACF,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAEO,cAAc,CAAC,EAAE,GAAG,EAAiB;IAC3C,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG;MAAE,OAAO;IAC3C,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAEO,aAAa;IACnB,OAAO,CACL,CAAC,gBAAgB,CAAC,yBAAyB;MACzC,gBAAgB,CAAC,OAAO,CAAC;MAC3B,IAAI,CAAC,QAAQ,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,OAAO,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;MAEtD,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CACtB,WAAK,KAAK,EAAC,iBAAiB;QAC1B,2BAAoB,CAChB,CACP,CAAC,CAAC,CAAC,IAAI;MACR,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,GACX,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport { toFile } from \"../../../Image/toFile\";\nimport {\n  imageSearchState,\n  processSelectedFile,\n} from \"../../../store/imageSearch.store\";\nimport * as E from \"fp-ts/lib/Either\";\nimport { BasicEventData } from \"../../../recommendation/events\";\n\n@Component({\n  tag: \"vviinn-example-image\",\n  styleUrl: \"vviinn-example-image.css\",\n  shadow: true,\n})\nexport class VviinnExampleImage {\n  @Prop() src: string = \"\";\n  @Prop() width: number = 0;\n  @Prop() height: number = 0;\n  @Prop() basicEventData: BasicEventData;\n\n  @State() selected: boolean = false;\n\n  @Event() vviinnImageUpload: EventEmitter<BasicEventData>;\n  @Event() vviinnNoResult: EventEmitter<BasicEventData>;\n\n  private async selectImage() {\n    this.selected = true;\n\n    const file = await toFile(this.src);\n    const processResult = await processSelectedFile(file);\n\n    pipe(\n      processResult,\n      E.match(\n        () => this.vviinnNoResult.emit(this.basicEventData),\n        () => this.vviinnImageUpload.emit(this.basicEventData)\n      )\n    );\n\n    this.selected = false;\n  }\n\n  private handleKeyPress({ key }: KeyboardEvent) {\n    if (key !== \"Enter\" && key !== \" \") return;\n    this.selectImage();\n  }\n\n  private showPreloader(): boolean {\n    return (\n      (imageSearchState.objectDetectionInProgress ||\n        imageSearchState.loading) &&\n      this.selected\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={() => this.selectImage()}\n        onKeyUp={(ev: KeyboardEvent) => this.handleKeyPress(ev)}\n      >\n        {this.showPreloader() ? (\n          <div class=\"image-preloader\">\n            <vviinn-preloader />\n          </div>\n        ) : null}\n        <img\n          src={this.src}\n          width={this.width}\n          height={this.height}\n          tabindex={1}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -1,6 +1,9 @@
-import { Component, Host, h, Event, Element, Prop, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnExampleImages {
+  constructor() {
+    this.basicEventData = undefined;
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
@@ -10,89 +13,87 @@ export class VviinnExampleImages {
     firstExampleImage.focus();
   }
   render() {
-    return (h(Host, { onFocus: () => this.delegateFocus() },
-      h("slot", { name: "vviinn-example-images-title" },
-        h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
-      h("div", { class: "images", ref: (el) => (this.imagesBlock = el) },
-        h("slot", { name: "vviinn-example-images-1" },
-          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })),
-        h("slot", { name: "vviinn-example-images-2" },
-          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })),
-        h("slot", { name: "vviinn-example-images-3" },
-          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })),
-        h("slot", { name: "vviinn-example-images-4" },
-          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
+    return (h(Host, { onFocus: () => this.delegateFocus() }, h("slot", { name: "vviinn-example-images-title" }, h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")), h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, h("slot", { name: "vviinn-example-images-1" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-2" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-3" }, h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), h("slot", { name: "vviinn-example-images-4" }, h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
   }
   static get is() { return "vviinn-example-images"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-example-images.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-example-images.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-example-images.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-example-images.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": ""
-      },
-      "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": ""
+        },
+        "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": ""
-      },
-      "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": ""
+        },
+        "complexType": {
+          "original": "BasicEventData",
+          "resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
+          "references": {
+            "BasicEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=vviinn-example-images.js.map

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-example-images.js","sourceRoot":"","sources":["../../../src/components/vviinn-example-images/vviinn-example-images.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAQzD,MAAM,OAAO,mBAAmB;;;;EAU9B,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;EACpC,CAAC;EAEO,aAAa;IACnB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAEjD,iBAAiC,CAAC,KAAK,EAAE,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;MACvC,YAAM,IAAI,EAAC,6BAA6B;QACtC,sEAA8D,CACzD;MACP,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC;QAEtD,YAAM,IAAI,EAAC,yBAAyB;UAClC,4BACE,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAC,kHAAkH,EACtH,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACG;QACP,YAAM,IAAI,EAAC,yBAAyB;UAClC,4BACE,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAC,kHAAkH,EACtH,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACG;QACP,YAAM,IAAI,EAAC,yBAAyB;UAClC,4BACE,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAC,kHAAkH,EACtH,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACG;QACP,YAAM,IAAI,EAAC,yBAAyB;UAClC,4BACE,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAC,kHAAkH,EACtH,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACG,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Element,\n  Prop,\n} from \"@stencil/core\";\nimport { slotChangeListener } from \"../customized-slots\";\nimport { BasicEventData } from \"../../recommendation/events\";\n\n@Component({\n  tag: \"vviinn-example-images\",\n  styleUrl: \"vviinn-example-images.css\",\n  shadow: true,\n})\nexport class VviinnExampleImages {\n  @Element() el: HTMLElement;\n\n  @Event() vviinnImageUpload: EventEmitter<BasicEventData>;\n  @Event() vviinnNoResult: EventEmitter<BasicEventData>;\n\n  @Prop() basicEventData: BasicEventData;\n\n  private imagesBlock!: HTMLDivElement;\n\n  componentWillLoad() {\n    slotChangeListener(this, this.el);\n  }\n\n  private delegateFocus() {\n    const firstSlot = this.imagesBlock.childNodes[0];\n    const firstExampleImage = firstSlot.childNodes[0];\n\n    (firstExampleImage as HTMLElement).focus();\n  }\n\n  render() {\n    return (\n      <Host onFocus={() => this.delegateFocus()}>\n        <slot name=\"vviinn-example-images-title\">\n          <h3>Mit den Beispielbildern die Suche direkt ausprobieren</h3>\n        </slot>\n        <div\n          class=\"images\"\n          ref={(el) => (this.imagesBlock = el as HTMLDivElement)}\n        >\n          <slot name=\"vviinn-example-images-1\">\n            <vviinn-example-image\n              width={480}\n              height={640}\n              src=\"https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=\"\n              basicEventData={this.basicEventData}\n            />\n          </slot>\n          <slot name=\"vviinn-example-images-2\">\n            <vviinn-example-image\n              width={280}\n              height={480}\n              src=\"https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=\"\n              basicEventData={this.basicEventData}\n            />\n          </slot>\n          <slot name=\"vviinn-example-images-3\">\n            <vviinn-example-image\n              width={280}\n              height={480}\n              src=\"https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=\"\n              basicEventData={this.basicEventData}\n            />\n          </slot>\n          <slot name=\"vviinn-example-images-4\">\n            <vviinn-example-image\n              width={480}\n              height={640}\n              src=\"https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=\"\n              basicEventData={this.basicEventData}\n            />\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}