vviinn-widgets 2.1.0 → 2.2.2

package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.css

@@ -0,0 +1,71 @@
+:host {
+  display: grid;
+  position: absolute;
+  box-sizing: border-box;
+  border: none;
+  width: 100%;
+  height: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+
+  --size: 10px;
+  --x-position: 0;
+  --y-position: 0;
+}
+
+img {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.pointer {
+  position: absolute;
+  width: var(--size);
+  height: var(--size);
+  background: black;
+  border-radius: 50%;
+  z-index: 2;
+  cursor: pointer;
+  transform: translate(var(--x-position), var(--y-position)) scale(0);
+  -webkit-animation: 0.25s linear fadein;
+          animation: 0.25s linear fadein;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+.pointer::after {
+  content: "";
+  cursor: pointer;
+  border: 5px solid black;
+  border-radius: 50%;
+  width: var(--size);
+  height: var(--size);
+  display: block;
+  transform: translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));
+  padding: calc(var(--size) * 0.5);
+  opacity: .75;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    transform: translate(var(--x-position), var(--y-position)) scale(0);
+  }
+
+  to {
+    transform: translate(var(--x-position), var(--y-position)) scale(1);
+  }
+}
+
+@keyframes fadein {
+  from {
+    transform: translate(var(--x-position), var(--y-position)) scale(0);
+  }
+
+  to {
+    transform: translate(var(--x-position), var(--y-position)) scale(1);
+  }
+}

package/dist/collection/components/image-search/image-view/highlight-box/highlight-box.js

@@ -0,0 +1,25 @@
+import { Component, Host, h } from "@stencil/core";
+import { getClipValue } from "../../../../geometry/Clip";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/function";
+import { imageSearchState } from "../../../../store/imageSearch.store";
+import { sequenceToOption } from "../../../../utils/option/option";
+export class HighlightBox {
+  getInsetValue() {
+    return pipe(sequenceToOption(imageSearchState.searchArea, imageSearchState.imageBounds), O.map(([selection, image]) => getClipValue(selection, image)), O.getOrElse(() => ""));
+  }
+  renderImage() {
+    return pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.imageBounds), O.map(([url, bounds]) => (h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), O.getOrElse(() => ""));
+  }
+  render() {
+    return h(Host, null, this.renderImage());
+  }
+  static get is() { return "highlight-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["highlight-box.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["highlight-box.css"]
+  }; }
+}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.css

@@ -0,0 +1,49 @@
+:host {
+  --size: 20px;
+
+  background: transparent;
+  border: 4px solid white;
+  box-sizing: content-box;
+  display: block;
+  height: var(--size);
+  touch-action: none;
+  position: absolute;
+  width: var(--size);
+  z-index: 4;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+:host(.disabled) {
+  opacity: 0.25;
+}
+
+:host(.nw-resize) {
+  border-bottom: none;
+  border-right: none;
+  top: 0;
+  left: 0;
+}
+
+:host(.ne-resize) {
+  border-left: none;
+  border-bottom: none;
+  right: 0;
+  top: 0;
+}
+
+:host(.sw-resize) {
+  border-right: none;
+  border-top: none;
+  left: 0;
+  bottom: 0;
+}
+
+:host(.se-resize) {
+  border-left: none;
+  border-top: none;
+  bottom: 0;
+  right: 0;
+}

package/dist/collection/components/image-search/image-view/image-cropper/cropper-handler/cropper-handler.js

@@ -0,0 +1,64 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+import { getCursorValue } from "../../../../../cropper/Handler";
+export class CropperHandler {
+  constructor() {
+    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 is() { return "cropper-handler"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cropper-handler.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cropper-handler.css"]
+  }; }
+  static get properties() { return {
+    "handler": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Handler",
+        "resolved": "Handler",
+        "references": {
+          "Handler": {
+            "location": "import",
+            "path": "../../../../../cropper/Handler"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.css

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+:host(.hidden) {
+  visibility: hidden;
+}
+
+.crop-area {
+  border: 1px solid white;
+  box-sizing: border-box;
+  position: absolute;
+  touch-action: none;
+  transition-property: border-color, opacity;
+  transition-duration: .25s;
+  transition-timing-function: ease-in-out;
+  z-index: 2;
+  position: relative;
+  will-change: transform;
+}
+
+.crop-area.active {
+  border-color: whitesmoke;
+}
+
+.crop-area.disabled {
+  opacity: 0.25;
+}

package/dist/{vviinn-widgets/image-cropper.entry.js → collection/components/image-search/image-view/image-cropper/image-cropper.js}

@@ -1,20 +1,13 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-b6d739a9.js';
-import { i as imageSearchState, t as transform, l as move, n as makeRectangularSearchRequest } from './imageSearch.store-407f49f0.js';
-import { O as fromMouseEvent, P as pointDiffSemigroup } from './Handler-47db9890.js';
-import { _ as _function } from './NonEmptyArray-6ef0d207.js';
-import { O as Option } from './number-98d54dd6.js';
-import './Array-4b9f84cf.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 white;box-sizing:border-box;position:absolute;touch-action:none;transition-property:border-color, opacity;transition-duration:.25s;transition-timing-function:ease-in-out;z-index:2;position:relative;will-change:transform}.crop-area.active{border-color:whitesmoke}.crop-area.disabled{opacity:0.25}";
-
+import { Component, Host, h, State, Element, Prop } from "@stencil/core";
+import { move, transform } from "../../../../geometry/Rectangle";
+import { fromMouseEvent, pointDiffSemigroup, } from "../../../../geometry/Point";
+import { imageSearchState, makeRectangularSearchRequest, } from "../../../../store/imageSearch.store";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import { findTarget } from "../../../../dom";
 const MIN_SEARCHAREA_SIZE = 40;
-let ImageCropper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+export class ImageCropper {
+  constructor() {
     this.disabled = false;
     this.handleMove = false;
     this.mouseStartPoint = undefined;
@@ -32,7 +25,7 @@ let ImageCropper = class {
       position: distance,
       direction: this.handlerMoveDirection,
     };
-    _function.pipe(imageSearchState.searchArea, Option.map((area) => {
+    pipe(imageSearchState.searchArea, O.map((area) => {
       const newSearchArea = transform(area, transformedHandler);
       if (newSearchArea.width < MIN_SEARCHAREA_SIZE ||
         newSearchArea.height < MIN_SEARCHAREA_SIZE ||
@@ -41,7 +34,7 @@ let ImageCropper = class {
         this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
         this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
         return;
-      imageSearchState.searchArea = Option.some(newSearchArea);
+      imageSearchState.searchArea = O.some(newSearchArea);
       this.mouseStartPoint = destination;
       imageSearchState.detectedObject = undefined;
     }));
@@ -51,7 +44,7 @@ let ImageCropper = class {
     ev.stopPropagation();
     const destination = fromMouseEvent(ev);
     const distance = pointDiffSemigroup.concat(destination, this.mouseStartPoint);
-    _function.pipe(imageSearchState.searchArea, Option.map((searchArea) => {
+    pipe(imageSearchState.searchArea, O.map((searchArea) => {
       const newSearchArea = move(searchArea, distance);
       if (newSearchArea.x < 0 ||
         newSearchArea.y < 0 ||
@@ -59,7 +52,7 @@ let ImageCropper = class {
         this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
         return;
       imageSearchState.detectedObject = undefined;
-      imageSearchState.searchArea = Option.some(newSearchArea);
+      imageSearchState.searchArea = O.some(newSearchArea);
       this.mouseStartPoint = destination;
     }));
   }
@@ -88,26 +81,55 @@ let ImageCropper = class {
     makeRectangularSearchRequest();
   }
   getStyleMap() {
-    return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
+    return pipe(imageSearchState.searchArea, O.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(() => {
+    }), O.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) }))))));
+    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 getElement(this); }
-};
-ImageCropper.style = imageCropperCss;
-
-export { ImageCropper as image_cropper };
+  static get is() { return "image-cropper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["image-cropper.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image-cropper.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "handleMove": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/image-search/search-filters/search-filters.css

@@ -0,0 +1,120 @@
+:host {
+  display: grid;
+  grid-gap: 1rem;
+}
+
+.filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.filter {
+  align-items: center;
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  -webkit-animation-name: scalein;
+          animation-name: scalein;
+  border: 1px solid lightgray;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  padding: 0.1rem;
+  transform: scale(0);
+  transition-property: background;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 6px 16px;
+}
+
+.filter.active {
+  border: 1px solid black;
+  padding: 6px 8px;
+}
+
+.filter:hover {
+  border: 1px solid gray;
+}
+
+.show-more {
+  display: flex;
+}
+
+.show-more.hidden {
+  display: none;
+}
+
+.show-more::after {
+  content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E");
+  display: block;
+  height: 16px;
+  margin-top: 1px;
+  margin-left: 8px;
+}
+
+.show-more.active::after {
+  transform: rotateX(180deg);
+}
+
+@-webkit-keyframes scalein {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scalein {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 415px) {
+  .show-more::after {
+    transform: rotate(-90deg);
+  }
+
+  .show-more.active::after {
+    transform: rotate(90deg);
+  }
+}
+
+@media (max-width: 800px) {
+  .filters {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: x mandatory;
+    grid-gap: unset;
+  }
+
+  .filter {
+    scroll-snap-align: end;
+    margin-right: 0.5rem;
+  }
+}

package/dist/collection/components/image-search/search-filters/search-filters.js

@@ -0,0 +1,102 @@
+import { Component, Host, h, Prop, State, Element } from "@stencil/core";
+import { imageSearchState } from "../../../store/imageSearch.store";
+import { CheckIcon } from "../../vviinn-icons";
+const FILTERS_COUNT = 5;
+const ACTIVE_FILTER_CLASSNAME = ".filter.active";
+const getFilterId = (filter) => filter.href.split("/").reverse()[0];
+export class SearchFilters {
+  constructor() {
+    this.filter = null;
+    this.selectedCategoryId = null;
+    this.hideFilters = true;
+  }
+  handleFilterSelection(filter) {
+    return this.isFilterSelected(filter)
+      ? this.clearSelectedFilter()
+      : this.selectFilter(filter);
+  }
+  selectFilter(filter) {
+    this.selectedCategoryId = getFilterId(filter);
+    imageSearchState.activeIonLink = filter;
+  }
+  clearSelectedFilter() {
+    this.selectedCategoryId = null;
+    imageSearchState.activeIonLink = undefined;
+    this.findSelectedFilter().blur();
+  }
+  findSelectedFilter() {
+    return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
+  }
+  toggleFilters() {
+    this.hideFilters = !this.hideFilters;
+  }
+  handleEnter(ev, f) {
+    if (ev.key !== "Enter")
+      return;
+    this.handleFilterSelection(f);
+  }
+  isFilterSelected(filterLink) {
+    return this.selectedCategoryId === getFilterId(filterLink);
+  }
+  render() {
+    return (h(Host, { exportparts: "filter, show-more-filters" },
+      h("div", { class: "filters" },
+        this.filter.filters
+          .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+          .map((f, n) => (h("div", { role: "button", tabindex: "0", part: this.isFilterSelected(f) ? "filter active" : "filter", class: {
+            filter: true,
+            active: this.selectedCategoryId === getFilterId(f),
+          }, style: { "animation-delay": `${n * 10}ms` }, onPointerUp: (ev) => {
+            ev.stopPropagation();
+            this.handleFilterSelection(f);
+          }, onKeyPress: (ev) => this.handleEnter(ev, f) },
+          this.isFilterSelected(f) ? h(CheckIcon, null) : null,
+          f.name))),
+        h("div", { class: {
+            filter: true,
+            "show-more": true,
+            hidden: this.filter.filters.length <= FILTERS_COUNT,
+            active: !this.hideFilters,
+          }, role: "button", tabindex: "0", "aria-role": "button", onClick: () => this.toggleFilters(), onKeyPress: (ev) => {
+            if (ev.key === "Enter") {
+              this.toggleFilters();
+            }
+          }, part: "show-more-filters" }, this.hideFilters ? "Zeige mehr" : "Zeige weniger"))));
+  }
+  static get is() { return "search-filters"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["search-filters.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["search-filters.css"]
+  }; }
+  static get properties() { return {
+    "filter": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SearchSessionFilter | null",
+        "resolved": "SearchSessionFilter",
+        "references": {
+          "SearchSessionFilter": {
+            "location": "import",
+            "path": "../../../searchSession/searchSession"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "selectedCategoryId": {},
+    "hideFilters": {}
+  }; }
+  static get elementRef() { return "el"; }
+}