vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,129 +0,0 @@
-import { Component, Host, h, Prop, Event, State, } from "@stencil/core";
-import { pipe } from "fp-ts/lib/function";
-import { toFile } from "../../../Image/toFile";
-import { imageSearchState, processSelectedFile, } from "../../../store/imageSearch.store";
-import * as E from "fp-ts/lib/Either";
-export class VviinnExampleImage {
-  constructor() {
-    this.src = "";
-    this.width = 0;
-    this.height = 0;
-    this.selected = false;
-  }
-  async selectImage(_event) {
-    this.selected = true;
-    const file = await toFile(this.src);
-    const processResult = await processSelectedFile(file);
-    pipe(processResult, E.match(() => this.exampleImageError.emit(), () => this.exampleImageSelected.emit()));
-    this.selected = false;
-  }
-  showPreloader() {
-    return ((imageSearchState.objectDetectionInProgress ||
-      imageSearchState.loading) &&
-      this.selected);
-  }
-  render() {
-    return (h(Host, null,
-      this.showPreloader() ? (h("div", { class: "image-preloader" },
-        h("vviinn-preloader", null))) : null,
-      h("img", { onClick: (ev) => this.selectImage(ev), src: this.src, width: this.width, height: this.height })));
-  }
-  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": ""
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "0"
-    }
-  }; }
-  static get states() { return {
-    "selected": {}
-  }; }
-  static get events() { return [{
-      "method": "exampleImageSelected",
-      "name": "exampleImageSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "exampleImageError",
-      "name": "exampleImageError",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-}

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

@@ -1,19 +0,0 @@
-:host {
-}
-
-h3 {
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 32px;
-  margin: 0;
-  margin-bottom: 16px;
-  text-align: center;
-}
-
-.images {
-  display: block;
-  -moz-column-count: 2;
-       column-count: 2;
-  -moz-column-gap: 16px;
-       column-gap: 16px;  
-}

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

@@ -1,80 +0,0 @@
-import { Component, Host, h, Event, Listen, Element } from "@stencil/core";
-import { slotChangeListener } from "../customized-slots";
-export class VviinnExampleImages {
-  handleImageSelection() {
-    this.imageSelected.emit();
-  }
-  handleImageSelectionError() {
-    this.imageSelectedError.emit();
-  }
-  componentWillLoad() {
-    slotChangeListener(this, this.el);
-  }
-  render() {
-    return (h(Host, null,
-      h("slot", { name: "vviinn-example-images-title" },
-        h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
-      h("div", { class: "images" },
-        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=" })),
-        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=" })),
-        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=" })),
-        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=" })))));
-  }
-  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 events() { return [{
-      "method": "imageSelected",
-      "name": "imageSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "imageSelectedError",
-      "name": "imageSelectedError",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "exampleImageSelected",
-      "method": "handleImageSelection",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "exampleImageError",
-      "method": "handleImageSelectionError",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

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

@@ -1,25 +0,0 @@
-:host {
-  display: block;
-}
-
-:host(::hover) {
-  background: whitesmoke;  
-}
-
-.visually-hidden {
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-label {
-  cursor: pointer;
-  display: grid;
-  padding: 0.5rem;
-  transition: background 0.1s ease-in-out;
-}

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

@@ -1,64 +0,0 @@
-import { Component, Host, h, Event } from "@stencil/core";
-import * as E from "fp-ts/Either";
-import { pipe } from "fp-ts/lib/function";
-import { imageSearchState, processSelectedFile, } from "../../store/imageSearch.store";
-/**
- * @part button -  button look and feel
- */
-export class VviinnImageSelector {
-  async handleInputChange(event) {
-    const input = event.target;
-    const processingResult = await processSelectedFile(input.files[0]);
-    pipe(processingResult, E.match(() => this.imageSelectedError.emit(), () => this.imageSelected.emit()));
-    input.value = null;
-  }
-  isLoading() {
-    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
-  }
-  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) })));
-  }
-  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 events() { return [{
-      "method": "imageSelected",
-      "name": "imageSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "imageSelectedError",
-      "name": "imageSelectedError",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fires when user select file that no .jpg, .jpeg or png"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-}

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

@@ -1,47 +0,0 @@
-:host {
-  --color-primary-system: #0F62FE;
-  --color-primary-hover-system: #014CDA;
-  --color-icons-system: #2F8EDF;
-  --spacer: 8px;
-}
-
-
-:host {
-  --size: 32px;
-  --x-position: 0;
-  --y-position: 0;
-
-  background: rgba(22, 22, 22, 0.5);
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-  display: block;
-  height: var(--size);
-  position: absolute;
-  transition: opacity 0.25s;
-  width: var(--size);
-  z-index: 2;
-  transform: translate(calc(var(--x-position) - (var(--size) * 0.5)), calc(var(--y-position) - (var(--size) * 0.5)));
-  transition: background 0.1 ease-in-out;
-}
-
-:host(:hover) {
-  background: rgba(22, 22, 22, 0.75);
-}
-
-:host(.active) {
-  background: var(--color-primary, var(--color-primary-system))!important;
-  border: 2px solid white;
-}
-
-:host::after {
-  --size: 32px;
-  border-radius: 50%;
-  content: "";
-  cursor: pointer;
-  display: block;
-  height: calc(var(--size) * 0.25);
-  transform: translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));
-  width: calc(var(--size) * 0.25);
-  background: white;
-}

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

@@ -1,100 +0,0 @@
-import { Component, Host, h, State, Prop, Event } from "@stencil/core";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { foldValueObject } from "../../../network/ion/ValueObject";
-import { detectedObjectEq, } from "../../../searchSession/searchSession";
-import { fromAlt, scaleWithSized, center } from "../../../geometry/Rectangle";
-import { imageSearchState, makeRectangularSearchRequest, } from "../../../store/imageSearch.store";
-export class VviinnDetectedObject {
-  constructor() {
-    this.position = ["0", "0"];
-  }
-  getObjectPosition() {
-    return pipe(imageSearchState.imageBounds, O.map((bounds) => {
-      const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
-      const { x, y } = pipe(objectRectangle, scaleWithSized(bounds), center);
-      return [`${x}px`, `${y}px`];
-    }), O.getOrElse(() => ["0", "0"]));
-  }
-  selectDetectedObject() {
-    pipe(imageSearchState.imageBounds, O.map((bounds) => {
-      const rectangle = foldValueObject(this.detectedObject).rectangle;
-      const transformedRect = fromAlt(rectangle);
-      const scaledRect = scaleWithSized(bounds)(transformedRect);
-      imageSearchState.detectedObject = this.detectedObject;
-      imageSearchState.searchArea = O.some(scaledRect);
-    }));
-    makeRectangularSearchRequest();
-    this.detectedObjectClicked.emit();
-  }
-  isActive() {
-    if (!this.detectedObject)
-      return false;
-    if (!imageSearchState.detectedObject)
-      return false;
-    const thisObject = foldValueObject(this.detectedObject);
-    const savedObject = foldValueObject(imageSearchState.detectedObject);
-    return detectedObjectEq.equals(thisObject, savedObject);
-  }
-  render() {
-    return (h(Host, { class: {
-        active: this.isActive(),
-      }, onClick: () => this.selectDetectedObject(), style: {
-        "--x-position": this.getObjectPosition()[0],
-        "--y-position": this.getObjectPosition()[1],
-      } }));
-  }
-  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"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "position": {}
-  }; }
-  static get events() { return [{
-      "method": "detectedObjectClicked",
-      "name": "detectedObjectClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}

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

@@ -1,31 +0,0 @@
-:host {
-  display: grid;
-  position: relative;
-  justify-self: center;
-}
-
-img {
-  box-sizing: border-box;
-  filter: brightness(60%);
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  z-index: -1;
-}
-
-.image-preloader {
-    background: rgba(0, 0, 0, 0.25);
-    border-radius: 4px;
-    bottom: 18px;
-    padding: 4px 6px;
-    pointer-events: none;
-    position: absolute;
-    right: 18px;
-    z-index: 4;
-}
-
-vviinn-preloader {
-    --preloader-size: 12px;
-}

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

@@ -1,61 +0,0 @@
-import { Component, 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";
-import { sequenceToOption } from "../../utils/option/option";
-import { fromImage, move } from "../../geometry/Rectangle";
-import { dimensionsFromImage, scaleByLargestSide } from "../../Image/sizing";
-const getImageSizes = (i) => {
-  const dimensions = dimensionsFromImage(i);
-  const resize = scaleByLargestSide(288);
-  const newDimensions = resize(dimensions);
-  const sizes = newDimensions.map(d => d.size);
-  return [sizes[0], sizes[1]];
-};
-export class VviinnImageView {
-  handleInitialImageLoad(ev) {
-    const target = ev.target;
-    const imageBounds = fromImage(target);
-    const padding = 12;
-    const { x, y } = move(imageBounds, { x: padding, y: padding });
-    const searchArea = {
-      x,
-      y,
-      width: imageBounds.width - padding * 2,
-      height: imageBounds.height - padding * 2,
-    };
-    imageSearchState.imageBounds = O.some(imageBounds);
-    imageSearchState.searchArea = O.some(searchArea);
-  }
-  renderDetectedObject(object) {
-    return h("vviinn-detected-object", { detectedObject: object });
-  }
-  renderImage() {
-    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), O.map(([url, refImage]) => {
-      const [width, height] = getImageSizes(refImage);
-      const image = (h("img", { decoding: "async", width: width, height: height, src: url, onLoad: (el) => this.handleInitialImageLoad(el), draggable: false }));
-      return image;
-    }), O.getOrElse(() => null));
-  }
-  renderCropper() {
-    return pipe(imageSearchState.imageUrl, O.map(() => h("image-cropper", null)), 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))));
-  }
-  static get is() { return "vviinn-image-view"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-image-view.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-image-view.css"]
-  }; }
-}

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

@@ -1,105 +0,0 @@
-:host {
-  background: white;
-  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;
-}
-
-@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;
-  }
-
-  :host(.closed) {
-    -webkit-animation-name: fade-out;
-            animation-name: fade-out;
-    -webkit-animation-fill-mode: none;
-            animation-fill-mode: none;
-  }
-
-  .body {
-    overflow-y: auto;
-  }
-}
-
-@media (max-width: 640px) and (min-width: 415px) {
-  :host {
-    max-width: 80%;
-  }
-}
-
-.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;
-  padding: 16px;
-}
-
-.title {
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: grid;
-  padding: unset;
-}
-
-@-webkit-keyframes fade-in {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes fade-out {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes fade-out {
-  from {
-    transform: translateY(0);
-  }
-
-  to {
-    transform: translateY(100%);
-  }
-}