vviinn-widgets 2.18.21 → 2.19.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.js","sourceRoot":"","sources":["../../../../../src/components/image-search/image-view/image-cropper/image-cropper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  State,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { HandlerDirection } from \"../../../../cropper/Handler\";\nimport { move, Rectangle, transform } from \"../../../../geometry/Rectangle\";\nimport {\n  Point,\n  fromMouseEvent,\n  pointDiffSemigroup,\n} from \"../../../../geometry/Point\";\nimport {\n  imageSearchState,\n  makeRectangularSearchRequest,\n} from \"../../../../store/imageSearch.store\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport * as O from \"fp-ts/lib/Option\";\nimport { findTarget } from \"../../../../dom\";\nimport styles from \"./image-cropper.css\";\nimport { BasicEventData } from \"../../../../recommendation/events\";\n\nconst MIN_SEARCHAREA_SIZE = 40;\n\n@Component({\n  tag: \"image-cropper\",\n  shadow: true,\n  styles,\n})\nexport class ImageCropper {\n  @Element() el: HTMLElement;\n\n  @Prop() disabled: boolean = false;\n  @Prop() basicEventData: BasicEventData;\n\n  @State() handleMove: boolean = false;\n\n  @Event() vviinnImageCrop: EventEmitter<BasicEventData>;\n\n  private handlerMoveDirection: HandlerDirection | null;\n  private mouseStartPoint: Point | undefined = undefined;\n  private pointerMoveListener: EventListener;\n  private pointerReleaseListener: EventListener;\n  private bounds: DOMRect | undefined = undefined;\n  private resizeObserver = new ResizeObserver(() => {\n    this.bounds = this.el.getBoundingClientRect();\n  });\n\n  componentDidLoad() {\n    this.resizeObserver.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  private handleHandlerMove(event: PointerEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const destination = fromMouseEvent(event);\n    const distance = pointDiffSemigroup.concat(\n      destination,\n      this.mouseStartPoint\n    );\n\n    const transformedHandler = {\n      position: distance,\n      direction: this.handlerMoveDirection,\n    };\n\n    pipe(\n      imageSearchState.searchArea,\n      O.map((area) => {\n        const newSearchArea = transform(area, transformedHandler);\n\n        if (this.outOfBounds(newSearchArea)) return;\n\n        imageSearchState.searchArea = O.some(newSearchArea);\n        this.mouseStartPoint = destination;\n        imageSearchState.detectedObject = undefined;\n      })\n    );\n  }\n\n  private outOfBounds(area: Rectangle): boolean {\n    return (\n      area.width < MIN_SEARCHAREA_SIZE ||\n      area.height < MIN_SEARCHAREA_SIZE ||\n      area.x < 0 ||\n      area.y < 0 ||\n      this.bounds.height - (area.y + area.height) < 0 ||\n      this.bounds.width - (area.x + area.width) < 0\n    );\n  }\n\n  private handleCropperMove(ev: MouseEvent) {\n    ev.preventDefault();\n    ev.stopPropagation();\n    const destination = fromMouseEvent(ev);\n\n    const distance = pointDiffSemigroup.concat(\n      destination,\n      this.mouseStartPoint\n    );\n\n    pipe(\n      imageSearchState.searchArea,\n      O.map((searchArea) => {\n        const newSearchArea = move(searchArea, distance);\n\n        if (\n          newSearchArea.x < 0 ||\n          newSearchArea.y < 0 ||\n          this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||\n          this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0\n        )\n          return;\n\n        imageSearchState.detectedObject = undefined;\n        imageSearchState.searchArea = O.some(newSearchArea);\n        this.mouseStartPoint = destination;\n      })\n    );\n  }\n\n  private handlePointerDown(event: PointerEvent) {\n    event.stopPropagation();\n    this.mouseStartPoint = fromMouseEvent(event);\n\n    // should be htmlelement or handler\n    const target = findTarget(event) as any;\n\n    if (target.localName === \"cropper-handler\") {\n      this.handlerMoveDirection = target.handler.direction;\n      this.pointerMoveListener = this.handleHandlerMove.bind(this);\n    } else {\n      this.pointerMoveListener = this.handleCropperMove.bind(this);\n    }\n\n    this.pointerReleaseListener = this.handleSearchAreaRelease.bind(this);\n\n    this.el.addEventListener(\"pointermove\", this.pointerMoveListener);\n    window.addEventListener(\"pointerup\", this.pointerReleaseListener, {\n      once: true,\n    });\n  }\n\n  private handleSearchAreaRelease() {\n    this.el.removeEventListener(\"pointermove\", this.pointerMoveListener);\n    document.removeEventListener(\"pointerup\", this.pointerReleaseListener);\n    this.mouseStartPoint = undefined;\n    makeRectangularSearchRequest();\n    this.vviinnImageCrop.emit(this.basicEventData);\n  }\n\n  private getStyleMap() {\n    return pipe(\n      imageSearchState.searchArea,\n      O.map((rectangle) => {\n        return {\n          width: `${rectangle.width}px`,\n          height: `${rectangle.height}px`,\n          transform: `translate3d(${rectangle.x}px, ${rectangle.y}px, 0)`,\n          cursor: this.handleMove ? \"move\" : \"default\",\n        };\n      }),\n      O.getOrElse(() => {\n        return {};\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize\">\n        <div\n          class={{\n            \"crop-area\": true,\n            active: this.handleMove,\n            disabled: this.disabled,\n          }}\n          draggable={false}\n          style={this.getStyleMap()}\n          onContextMenu={() => false}\n          onPointerDown={(ev) => this.handlePointerDown(ev)}\n        >\n          {imageSearchState.cropperHandlers.map((handler) => (\n            <cropper-handler\n              disabled={this.disabled}\n              handler={handler}\n              onPointerDown={(ev) => this.handlePointerDown(ev)}\n            ></cropper-handler>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -12,21 +12,16 @@
 
 .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;
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+  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;
@@ -36,7 +31,6 @@
   transition-timing-function: ease-in-out;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   padding: 6px 16px;
 }
@@ -70,18 +64,6 @@
   transform: rotateX(180deg);
 }
 
-@-webkit-keyframes scalein {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes scalein {
   from {
     opacity: 0;
@@ -108,8 +90,7 @@
   .filters {
     flex-wrap: nowrap;
     overflow-x: scroll;
-    -ms-scroll-snap-type: x mandatory;
-        scroll-snap-type: x mandatory;
+    scroll-snap-type: x mandatory;
     grid-gap: unset;
   }
 

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Element, Event, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { imageSearchState } from "../../../store/imageSearch.store";
 import { CheckIcon } from "../../vviinn-icons";
 const FILTERS_COUNT = 5;
@@ -7,6 +7,7 @@ const getFilterId = (filter) => filter.href.split("/").reverse()[0];
 export class SearchFilters {
   constructor() {
     this.filter = null;
+    this.basicEventData = undefined;
     this.selectedCategoryId = null;
     this.hideFilters = true;
   }
@@ -41,105 +42,111 @@ export class SearchFilters {
     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"))));
+    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"
+  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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "null"
-    },
-    "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 {
-    "selectedCategoryId": {},
-    "hideFilters": {}
-  }; }
-  static get events() { return [{
-      "method": "vviinnSelectFilter",
-      "name": "vviinnSelectFilter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "SelectFilterEventData",
-        "resolved": "BasicEventData & { action: FilterAction; filterName?: string; }",
-        "references": {
-          "SelectFilterEventData": {
-            "location": "import",
-            "path": "../../../recommendation/events"
+    };
+  }
+  static get states() {
+    return {
+      "selectedCategoryId": {},
+      "hideFilters": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "vviinnSelectFilter",
+        "name": "vviinnSelectFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectFilterEventData",
+          "resolved": "BasicEventData & { action: FilterAction; filterName?: string; }",
+          "references": {
+            "SelectFilterEventData": {
+              "location": "import",
+              "path": "../../../recommendation/events"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=search-filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-filters.js","sourceRoot":"","sources":["../../../../src/components/image-search/search-filters/search-filters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { Link } from \"../../../network/ion/Link\";\nimport { SearchSessionFilter } from \"../../../searchSession/searchSession\";\nimport { imageSearchState } from \"../../../store/imageSearch.store\";\nimport { CheckIcon } from \"../../vviinn-icons\";\nimport {\n  BasicEventData,\n  SelectFilterEventData,\n} from \"../../../recommendation/events\";\n\nconst FILTERS_COUNT: number = 5;\nconst ACTIVE_FILTER_CLASSNAME = \".filter.active\";\n\nconst getFilterId = (filter: Link): string =>\n  filter.href.split(\"/\").reverse()[0];\n\n@Component({\n  tag: \"search-filters\",\n  styleUrl: \"search-filters.css\",\n  shadow: true,\n})\nexport class SearchFilters {\n  @Element() el: HTMLElement;\n\n  @Prop() filter: SearchSessionFilter | null = null;\n  @Prop() basicEventData: BasicEventData;\n\n  @State() selectedCategoryId: string | null = null;\n  @State() hideFilters: boolean = true;\n\n  @Event() vviinnSelectFilter: EventEmitter<SelectFilterEventData>;\n\n  private handleFilterSelection(filter: Link): void {\n    return this.isFilterSelected(filter)\n      ? this.clearSelectedFilter()\n      : this.selectFilter(filter);\n  }\n\n  private selectFilter(filter: Link) {\n    this.selectedCategoryId = getFilterId(filter);\n    imageSearchState.activeIonLink = filter;\n\n    this.vviinnSelectFilter.emit({\n      ...this.basicEventData,\n      action: \"select\",\n      filterName: filter.name,\n    });\n  }\n\n  private clearSelectedFilter() {\n    this.selectedCategoryId = null;\n    imageSearchState.activeIonLink = undefined;\n    this.findSelectedFilter().blur();\n\n    this.vviinnSelectFilter.emit({\n      ...this.basicEventData,\n      action: \"deselect\",\n    });\n  }\n\n  private findSelectedFilter(): HTMLElement {\n    return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);\n  }\n\n  private toggleFilters() {\n    this.hideFilters = !this.hideFilters;\n  }\n\n  private handleEnter(ev: KeyboardEvent, f: Link) {\n    if (ev.key !== \"Enter\") return;\n    this.handleFilterSelection(f);\n  }\n\n  private isFilterSelected(filterLink: Link): boolean {\n    return this.selectedCategoryId === getFilterId(filterLink);\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"filter, show-more-filters\">\n        <div class=\"filters\">\n          {this.filter.filters\n            .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))\n            .map((f, n) => (\n              <div\n                role=\"button\"\n                tabindex=\"0\"\n                part={this.isFilterSelected(f) ? \"filter active\" : \"filter\"}\n                class={{\n                  filter: true,\n                  active: this.selectedCategoryId === getFilterId(f),\n                }}\n                style={{ \"animation-delay\": `${n * 10}ms` }}\n                onPointerUp={(ev) => {\n                  ev.stopPropagation();\n                  this.handleFilterSelection(f);\n                }}\n                onKeyPress={(ev) => this.handleEnter(ev, f)}\n              >\n                {this.isFilterSelected(f) ? <CheckIcon /> : null}\n                {f.name}\n              </div>\n            ))}\n\n          <div\n            class={{\n              filter: true,\n              \"show-more\": true,\n              hidden: this.filter.filters.length <= FILTERS_COUNT,\n              active: !this.hideFilters,\n            }}\n            role=\"button\"\n            tabindex=\"0\"\n            aria-role=\"button\"\n            onClick={() => this.toggleFilters()}\n            onKeyPress={(ev) => {\n              if (ev.key === \"Enter\") {\n                this.toggleFilters();\n              }\n            }}\n            part=\"show-more-filters\"\n          >\n            {this.hideFilters ? \"Zeige mehr\" : \"Zeige weniger\"}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/vviinn-button/vviinn-button.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { VisualSearchIcon } from "../vviinn-icons";
 /**
  *
@@ -9,37 +9,41 @@ export class VviinnButton {
     this.addStyle = true;
   }
   render() {
-    return (h(Host, { exportparts: "button" },
-      h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" },
-        h("slot", null,
-          h(VisualSearchIcon, null)))));
+    return (h(Host, { exportparts: "button" }, h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" }, h("slot", null, h(VisualSearchIcon, null)))));
   }
   static get is() { return "vviinn-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-button.css"]
-  }; }
-  static get properties() { return {
-    "addStyle": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "add-style",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["vviinn-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["vviinn-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "addStyle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-style",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
 }
+//# sourceMappingURL=vviinn-button.js.map

package/dist/collection/components/vviinn-button/vviinn-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-button.js","sourceRoot":"","sources":["../../../src/components/vviinn-button/vviinn-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,YAAY;;oBACK,IAAI;;EAEhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,QAAQ;MACxB,cACE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EACxD,IAAI,EAAC,QAAQ;QAEb;UACE,EAAC,gBAAgB,OAAG,CACf,CACA,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { VisualSearchIcon } from \"../vviinn-icons\";\n\n/**\n *\n * @part button - clickable button element\n */\n@Component({\n  tag: \"vviinn-button\",\n  styleUrl: \"vviinn-button.css\",\n  shadow: true,\n})\nexport class VviinnButton {\n  @Prop() addStyle: boolean = true;\n\n  render() {\n    return (\n      <Host exportparts=\"button\">\n        <button\n          class={this.addStyle ? \"open-button\" : \"raw-open-button\"}\n          part=\"button\"\n        >\n          <slot>\n            <VisualSearchIcon />\n          </slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -56,8 +56,7 @@
   display: flex;
   flex-direction: row;
   grid-gap: 8px;
-  -ms-scroll-snap-type: x mandatory;
-      scroll-snap-type: x mandatory;
+  scroll-snap-type: x mandatory;
   overflow-y: hidden;
   overflow-x: auto;
   flex-grow: 1;