vviinn-widgets 2.7.2 → 2.8.0

package/dist/components/cropper-handler.js

@@ -0,0 +1,6 @@
+import { C as CropperHandler$1, d as defineCustomElement$1 } from './cropper-handler2.js';
+
+const CropperHandler = CropperHandler$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CropperHandler, defineCustomElement };

package/dist/components/cropper-handler2.js

@@ -0,0 +1,39 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as getCursorValue } from './Handler.js';
+
+const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid #fff;box-sizing:content-box;display:block;height:var(--size);position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--size);z-index:1}:host(.disabled){opacity:.25}:host(.nw-resize){border-bottom:none;border-right:none;left:0;top:0}:host(.ne-resize){border-bottom:none;border-left:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;bottom:0;left:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";
+
+let CropperHandler = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.disabled = false;
+  }
+  render() {
+    return (h(Host, { part: `handle ${getCursorValue(this.handler.direction)}`, class: {
+        disabled: this.disabled,
+        [getCursorValue(this.handler.direction)]: true,
+      }, style: {
+        "--size": "20px",
+        cursor: getCursorValue(this.handler.direction),
+      }, draggable: false }));
+  }
+  static get style() { return cropperHandlerCss; }
+};
+CropperHandler = /*@__PURE__*/ proxyCustomElement(CropperHandler, [1, "cropper-handler", {
+    "handler": [16],
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  const components = ["cropper-handler"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cropper-handler":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CropperHandler);
+      }
+      break;
+  } });
+}
+
+export { CropperHandler as C, defineCustomElement as d };

package/dist/{cjs/customized-slots-06ca4007.js → components/customized-slots.js}

@@ -1,6 +1,4 @@
-'use strict';
-
-const index = require('./index-3c3ab815.js');
+import { h } from '@stencil/core/internal/client';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",
@@ -19,7 +17,7 @@ const defaultSlotsNames = [
   "vviinn-image-upload-button-text",
   "vviinn-privacy-badge-text"
 ];
-const renderNamedSlot = (name) => index.h("slot", { name: name });
+const renderNamedSlot = (name) => h("slot", { name: name });
 const SlotSkeleton = () => defaultSlotsNames.map(renderNamedSlot);
 const getSlots = (element) => Array.from(element.shadowRoot.querySelectorAll("slot"));
 const getNameAttribute = (element) => element.getAttribute("name");
@@ -49,5 +47,4 @@ const slotChangeListener = (component, element) => {
   component.connectedCallback.call(component);
 };
 
-exports.SlotSkeleton = SlotSkeleton;
-exports.slotChangeListener = slotChangeListener;
+export { SlotSkeleton as S, slotChangeListener as s };

package/dist/components/highlight-box.js

@@ -0,0 +1,6 @@
+import { H as HighlightBox$1, d as defineCustomElement$1 } from './highlight-box2.js';
+
+const HighlightBox = HighlightBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HighlightBox, defineCustomElement };

package/dist/components/highlight-box2.js

@@ -0,0 +1,52 @@
+import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { O as Option, s as sequenceToOption } from './NonEmptyArray.js';
+import { p as pipe } from './Handler.js';
+import { i as imageSearchState } from './imageSearch.store.js';
+
+const fromRectangle = (shape, target) => {
+  const top = `${shape.y}px`;
+  const left = `${shape.x}px`;
+  const right = `${target.width - (shape.x + shape.width)}px`;
+  const bottom = `${target.height - (shape.y + shape.height)}px`;
+  return {
+    top,
+    right,
+    bottom,
+    left,
+  };
+};
+const printClip = (clip) => `inset(${clip.top} ${clip.right} ${clip.bottom} ${clip.left})`;
+const getClipValue = (shape, target) => printClip(fromRectangle(shape, target));
+
+const highlightBoxCss = ":host{--size:10px;--x-position:0;--y-position:0;border:none;box-sizing:border-box;display:grid;height:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}img{-webkit-user-select:none;-moz-user-select:none;user-select:none}.pointer{-webkit-animation:i .25s linear;animation:i .25s linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;background:#000;border-radius:50%;position:absolute;transform:translate(var(--x-position),var(--y-position)) scale(0);z-index:1}.pointer,.pointer:after{cursor:pointer;height:var(--size);width:var(--size)}.pointer:after{border:5px solid #000;border-radius:50%;content:\"\";display:block;opacity:.75;padding:calc(var(--size)*.5);transform:translate(calc(-50% + var(--size)*.5),calc(-50% + var(--size)*.5))}@-webkit-keyframes i{0%{transform:translate(var(--x-position),var(--y-position)) scale(0)}to{transform:translate(var(--x-position),var(--y-position)) scale(1)}}@keyframes i{0%{transform:translate(var(--x-position),var(--y-position)) scale(0)}to{transform:translate(var(--x-position),var(--y-position)) scale(1)}}";
+
+let HighlightBox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+  }
+  getInsetValue() {
+    return pipe(sequenceToOption(imageSearchState.searchArea, imageSearchState.imageBounds), Option.map(([selection, image]) => getClipValue(selection, image)), Option.getOrElse(() => ""));
+  }
+  renderImage() {
+    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.imageBounds), Option.map(([url, bounds]) => (h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), Option.getOrElse(() => ""));
+  }
+  render() {
+    return h(Host, null, this.renderImage());
+  }
+  static get style() { return highlightBoxCss; }
+};
+HighlightBox = /*@__PURE__*/ proxyCustomElement(HighlightBox, [1, "highlight-box"]);
+function defineCustomElement() {
+  const components = ["highlight-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "highlight-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HighlightBox);
+      }
+      break;
+  } });
+}
+
+export { HighlightBox as H, defineCustomElement as d };

package/dist/components/image-cropper.js

@@ -0,0 +1,6 @@
+import { I as ImageCropper$1, d as defineCustomElement$1 } from './image-cropper2.js';
+
+const ImageCropper = ImageCropper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ImageCropper, defineCustomElement };

package/dist/components/image-cropper2.js

@@ -0,0 +1,138 @@
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { i as imageSearchState, t as transform, m as move, a as makeRectangularSearchRequest } from './imageSearch.store.js';
+import { k as pointDiffSemigroup, m as fromMouseEvent } from './Handler.js';
+import { _ as _function, O as Option } from './NonEmptyArray.js';
+import { d as defineCustomElement$1 } from './cropper-handler2.js';
+
+const findTarget = (ev) => {
+  return ev.target;
+};
+
+const imageCropperCss = ":host{display:block;height:100%;left:0;position:absolute;top:0;width:100%}:host(.hidden){visibility:hidden}.crop-area{border:1px solid #fff;box-sizing:border-box;position:absolute;position:relative;touch-action:none;transition-duration:.25s;transition-property:border-color,opacity;transition-timing-function:ease-in-out;will-change:transform;z-index:1}.crop-area.active{border-color:#f5f5f5}.crop-area.disabled{opacity:.25}";
+
+const MIN_SEARCHAREA_SIZE = 40;
+let ImageCropper = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.cropperChanged = createEvent(this, "cropperChanged", 7);
+    this.disabled = false;
+    this.handleMove = false;
+    this.mouseStartPoint = undefined;
+    this.bounds = undefined;
+  }
+  componentDidLoad() {
+    this.bounds = this.el.getBoundingClientRect();
+  }
+  handleHandlerMove(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const destination = fromMouseEvent(event);
+    const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    const transformedHandler = {
+      position: distance,
+      direction: this.handlerMoveDirection,
+    };
+    _function.pipe(imageSearchState.searchArea, Option.map((area) => {
+      const newSearchArea = transform(area, transformedHandler);
+      if (this.outOfBounds(newSearchArea))
+        return;
+      imageSearchState.searchArea = Option.some(newSearchArea);
+      this.mouseStartPoint = destination;
+      imageSearchState.detectedObject = undefined;
+    }));
+  }
+  outOfBounds(area) {
+    return (area.width < MIN_SEARCHAREA_SIZE ||
+      area.height < MIN_SEARCHAREA_SIZE ||
+      area.x < 0 ||
+      area.y < 0 ||
+      this.bounds.height - (area.y + area.height) < 0 ||
+      this.bounds.width - (area.x + area.width) < 0);
+  }
+  handleCropperMove(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const destination = fromMouseEvent(ev);
+    const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    _function.pipe(imageSearchState.searchArea, Option.map((searchArea) => {
+      const newSearchArea = move(searchArea, distance);
+      if (newSearchArea.x < 0 ||
+        newSearchArea.y < 0 ||
+        this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
+        this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
+        return;
+      imageSearchState.detectedObject = undefined;
+      imageSearchState.searchArea = Option.some(newSearchArea);
+      this.mouseStartPoint = destination;
+    }));
+  }
+  handlePointerDown(event) {
+    event.stopPropagation();
+    this.mouseStartPoint = fromMouseEvent(event);
+    // should be htmlelement or handler
+    const target = findTarget(event);
+    if (target.localName === "cropper-handler") {
+      this.handlerMoveDirection = target.handler.direction;
+      this.pointerMoveListener = this.handleHandlerMove.bind(this);
+    }
+    else {
+      this.pointerMoveListener = this.handleCropperMove.bind(this);
+    }
+    this.pointerReleaseListener = this.handleSearchAreaRelease.bind(this);
+    this.el.addEventListener("pointermove", this.pointerMoveListener);
+    window.addEventListener("pointerup", this.pointerReleaseListener, {
+      once: true,
+    });
+  }
+  handleSearchAreaRelease() {
+    this.el.removeEventListener("pointermove", this.pointerMoveListener);
+    document.removeEventListener("pointerup", this.pointerReleaseListener);
+    this.mouseStartPoint = undefined;
+    makeRectangularSearchRequest();
+    this.cropperChanged.emit();
+  }
+  getStyleMap() {
+    return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
+      return {
+        width: `${rectangle.width}px`,
+        height: `${rectangle.height}px`,
+        transform: `translate3d(${rectangle.x}px, ${rectangle.y}px, 0)`,
+        cursor: this.handleMove ? "move" : "default",
+      };
+    }), Option.getOrElse(() => {
+      return {};
+    }));
+  }
+  render() {
+    return (h(Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" }, h("div", { class: {
+        "crop-area": true,
+        active: this.handleMove,
+        disabled: this.disabled,
+      }, draggable: false, style: this.getStyleMap(), onContextMenu: () => false, onPointerDown: (ev) => this.handlePointerDown(ev) }, imageSearchState.cropperHandlers.map((handler) => (h("cropper-handler", { disabled: this.disabled, handler: handler, onPointerDown: (ev) => this.handlePointerDown(ev) }))))));
+  }
+  get el() { return this; }
+  static get style() { return imageCropperCss; }
+};
+ImageCropper = /*@__PURE__*/ proxyCustomElement(ImageCropper, [1, "image-cropper", {
+    "disabled": [4],
+    "handleMove": [32]
+  }]);
+function defineCustomElement() {
+  const components = ["image-cropper", "cropper-handler"];
+  components.forEach(tagName => { switch (tagName) {
+    case "image-cropper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ImageCropper);
+      }
+      break;
+    case "cropper-handler":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ImageCropper as I, defineCustomElement as d };