@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -1,317 +1,334 @@
 import { h, Host, } from "@stencil/core";
 export class ContentSlider {
-  constructor() {
-    this._items = [];
-    this._shouldCheckLocation = false;
-    this.hideMobileIndicator = false;
-    this.disableDrag = false;
-    this.disableAutoCenter = false;
-    this.disableIndicatorClick = false;
-    this._visibleIndex = undefined;
-    this._outerHeight = 0;
-    this._totalWidth = 0;
-    this._dragging = false;
-  }
-  componentWillRender() {
-    const items = this._el.querySelectorAll(':scope > *');
-    this._items = Array.from(items);
-  }
-  componentDidLoad() {
-    this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
-    this._calculateWidth();
-    this._calculateIndicator();
-  }
-  disconnectedCallback() {
-    if (this._innerSliderResizeObserver) {
-      this._innerSliderResizeObserver.disconnect();
+    constructor() {
+        this.hideMobileIndicator = false;
+        this.disableDrag = false;
+        this.disableAutoCenter = false;
+        this.disableIndicatorClick = false;
+        this._visibleIndex = undefined;
+        this._outerHeight = 0;
+        this._totalWidth = 0;
+        this._dragging = false;
     }
-  }
-  render() {
-    return (h(Host, { class: "p-content-slider" }, h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
-        height: `${this._outerHeight}px`,
-      }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("p-slider-indicator", { active: i === this._visibleIndex })))))));
-  }
-  _mouseDownHandler(e) {
-    var _a;
-    if (this.disableDrag || this._dragging) {
-      return;
+    /**
+     * The host element
+     */
+    _el;
+    _sliderRef;
+    _innerSliderRef;
+    _items = [];
+    _innerSliderResizeObserver;
+    // mouse movement stuff
+    _startX;
+    _startMouseX;
+    _lastMouseX;
+    _lastIndex;
+    _shouldCheckLocation = false;
+    componentWillRender() {
+        const items = this._el.querySelectorAll(':scope > *');
+        this._items = Array.from(items);
     }
-    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
-    if (innerSliderStyle.flexWrap === 'wrap') {
-      return;
+    componentDidLoad() {
+        this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+        this._calculateWidth();
+        this._calculateIndicator();
     }
-    this._startMouseX = e.x;
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    if (e.type === 'touchstart') {
-      this._startMouseX = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
+    disconnectedCallback() {
+        if (this._innerSliderResizeObserver) {
+            this._innerSliderResizeObserver.disconnect();
+        }
     }
-    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
-    const offsetLeft = innerSliderRect.x - sliderRect.x;
-    this._startX = this._startMouseX - sliderRect.x - offsetLeft;
-    this._lastIndex = this._visibleIndex;
-    this._dragging = true;
-  }
-  _mouseMoveHandler(e) {
-    var _a, _b;
-    if (!e || !this._dragging || this.disableDrag) {
-      return;
+    render() {
+        return (h(Host, { key: 'e996c635c0cf4b6079e446ce63d73f1b9852726b', class: "p-content-slider" }, h("div", { key: '184859d7f3cc545fed4b2cd81ec40f1faf231a14', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+                height: `${this._outerHeight}px`,
+            }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { key: 'cbeab030c9c898ee3f13b18c542673057113a74d', class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '3a750b867b7abd33b4ad25dd08b7e634fbddd957' }))), h("div", { key: '6fb3c9c1bfcaf67067858c71de4058be1e6fd8b8', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("p-slider-indicator", { active: i === this._visibleIndex })))))));
     }
-    e.preventDefault();
-    this._shouldCheckLocation = true;
-    if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
-      this._innerSliderRef.style.pointerEvents = 'none';
+    _mouseDownHandler(e) {
+        if (this.disableDrag || this._dragging) {
+            return;
+        }
+        const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+        if (innerSliderStyle.flexWrap === 'wrap') {
+            return;
+        }
+        this._startMouseX = e.x;
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        if (e.type === 'touchstart') {
+            this._startMouseX = e.touches?.[0].clientX;
+        }
+        const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+        const offsetLeft = innerSliderRect.x - sliderRect.x;
+        this._startX = this._startMouseX - sliderRect.x - offsetLeft;
+        this._lastIndex = this._visibleIndex;
+        this._dragging = true;
     }
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    let x = e.clientX - sliderRect.left;
-    this._lastMouseX = e.x;
-    if (e.type === 'touchmove') {
-      x = ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX) - sliderRect.left;
-      this._lastMouseX = (_b = e.touches) === null || _b === void 0 ? void 0 : _b[0].clientX;
+    _mouseMoveHandler(e) {
+        if (!e || !this._dragging || this.disableDrag) {
+            return;
+        }
+        e.preventDefault();
+        this._shouldCheckLocation = true;
+        if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
+            this._innerSliderRef.style.pointerEvents = 'none';
+        }
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        let x = e.clientX - sliderRect.left;
+        this._lastMouseX = e.x;
+        if (e.type === 'touchmove') {
+            x = e.touches?.[0].clientX - sliderRect.left;
+            this._lastMouseX = e.touches?.[0].clientX;
+        }
+        this._innerSliderRef.style.setProperty('--tw-translate-x', `${x - this._startX}px`);
+        this._checkBoundary();
+        this._calculateIndicator();
     }
-    this._innerSliderRef.style.setProperty('--tw-translate-x', `${x - this._startX}px`);
-    this._checkBoundary();
-    this._calculateIndicator();
-  }
-  _transitionEndHandler() {
-    this._calculateIndicator();
-  }
-  mouseUpHandler() {
-    this._dragging = false;
-    this._innerSliderRef.style.removeProperty('pointer-events');
-    this._checkLocation();
-  }
-  resizeHandler() {
-    if (this._innerSliderRef) {
-      this._innerSliderRef.style.setProperty('--tw-translate-x', '0px');
-      this._calculateWidth();
-      this._calculateIndicator();
+    _transitionEndHandler() {
+        this._calculateIndicator();
     }
-  }
-  _setInnerSliderReft(ref) {
-    this._innerSliderRef = ref;
-    this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
-    this._innerSliderResizeObserver.observe(this._innerSliderRef);
-  }
-  _scrollTo(i, manual = false) {
-    if (this.disableIndicatorClick && manual) {
-      return;
+    mouseUpHandler() {
+        this._dragging = false;
+        this._innerSliderRef.style.removeProperty('pointer-events');
+        this._checkLocation();
     }
-    const el = this._items[i];
-    if (i === 0) {
-      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
-      return;
+    resizeHandler() {
+        if (this._innerSliderRef) {
+            this._innerSliderRef.style.setProperty('--tw-translate-x', '0px');
+            this._calculateWidth();
+            this._calculateIndicator();
+        }
     }
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
-    const elRect = el.getBoundingClientRect();
-    const offsetLeft = elRect.x - innerSliderRect.x;
-    const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
-    this._innerSliderRef.style.setProperty('--tw-translate-x', `-${centerOffset}px`);
-    this._checkBoundary();
-    this._calculateIndicator();
-  }
-  _checkBoundary() {
-    let outer = this._sliderRef.getBoundingClientRect();
-    const left = parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
-    if (left > 0) {
-      this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+    _setInnerSliderReft(ref) {
+        this._innerSliderRef = ref;
+        this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
+        this._innerSliderResizeObserver.observe(this._innerSliderRef);
     }
-    const maxLeft = (this._totalWidth - outer.width) * -1;
-    if (left < maxLeft) {
-      this._innerSliderRef.style.setProperty('--tw-translate-x', `${maxLeft}px`);
+    _scrollTo(i, manual = false) {
+        if (this.disableIndicatorClick && manual) {
+            return;
+        }
+        const el = this._items[i];
+        if (i === 0) {
+            this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+            return;
+        }
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const offsetLeft = elRect.x - innerSliderRect.x;
+        const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+        this._innerSliderRef.style.setProperty('--tw-translate-x', `-${centerOffset}px`);
+        this._checkBoundary();
+        this._calculateIndicator();
     }
-  }
-  _calculateIndicator() {
-    for (let i = 0; i < this._items.length; i++) {
-      const item = this._items[i];
-      const visible = this._isVisible(item);
-      if (visible) {
-        this._visibleIndex = i;
-      }
-      if (i === 0 && visible) {
-        break;
-      }
+    _checkBoundary() {
+        let outer = this._sliderRef.getBoundingClientRect();
+        const left = parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
+        if (left > 0) {
+            this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+        }
+        const maxLeft = (this._totalWidth - outer.width) * -1;
+        if (left < maxLeft) {
+            this._innerSliderRef.style.setProperty('--tw-translate-x', `${maxLeft}px`);
+        }
     }
-  }
-  _checkLocation() {
-    var _a;
-    if (!this._shouldCheckLocation) {
-      return;
+    _calculateIndicator() {
+        for (let i = 0; i < this._items.length; i++) {
+            const item = this._items[i];
+            const visible = this._isVisible(item);
+            if (visible) {
+                this._visibleIndex = i;
+            }
+            if (i === 0 && visible) {
+                break;
+            }
+        }
     }
-    let scrollToIndex = null;
-    if (this._lastIndex !== this._visibleIndex) {
-      scrollToIndex = this._visibleIndex;
+    _checkLocation() {
+        if (!this._shouldCheckLocation) {
+            return;
+        }
+        let scrollToIndex = null;
+        if (this._lastIndex !== this._visibleIndex) {
+            scrollToIndex = this._visibleIndex;
+        }
+        if (this._lastIndex === this._visibleIndex) {
+            if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
+                scrollToIndex = this._lastIndex - 1;
+            }
+            if (this._lastMouseX < this._startMouseX &&
+                this._lastIndex !== this._items?.length - 1) {
+                scrollToIndex = this._lastIndex + 1;
+            }
+        }
+        if (scrollToIndex !== null) {
+            this._shouldCheckLocation = false;
+            setTimeout(() => this._scrollTo(scrollToIndex), 100);
+        }
     }
-    if (this._lastIndex === this._visibleIndex) {
-      if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
-        scrollToIndex = this._lastIndex - 1;
-      }
-      if (this._lastMouseX < this._startMouseX &&
-        this._lastIndex !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
-        scrollToIndex = this._lastIndex + 1;
-      }
+    _isVisible(el) {
+        if (!this._el || !el) {
+            return false;
+        }
+        const elRect = el.getBoundingClientRect();
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        return ((elRect.left >= sliderRect.left &&
+            elRect.right <= sliderRect.right) ||
+            (this._isMobile(el) &&
+                elRect.left + elRect.width / 2 >= sliderRect.left &&
+                elRect.left + elRect.width / 2 <= sliderRect.right));
     }
-    if (scrollToIndex !== null) {
-      this._shouldCheckLocation = false;
-      setTimeout(() => this._scrollTo(scrollToIndex), 100);
+    _calculateWidth() {
+        let totalWidth = 0;
+        for (let item of this._items) {
+            const rect = item.getBoundingClientRect();
+            totalWidth += rect.width;
+        }
+        const sliderStyle = getComputedStyle(this._sliderRef);
+        const padding = parseInt(sliderStyle.padding) * 2;
+        const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+        const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+        totalWidth += padding + gap;
+        this._totalWidth = totalWidth;
     }
-  }
-  _isVisible(el) {
-    if (!this._el || !el) {
-      return false;
+    _calculateHeight() {
+        const outerHeight = this._items.at(0).getBoundingClientRect().height;
+        if (outerHeight != this._outerHeight) {
+            this._outerHeight = outerHeight;
+        }
     }
-    const elRect = el.getBoundingClientRect();
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    return ((elRect.left >= sliderRect.left &&
-      elRect.right <= sliderRect.right) ||
-      (this._isMobile(el) &&
-        elRect.left + elRect.width / 2 >= sliderRect.left &&
-        elRect.left + elRect.width / 2 <= sliderRect.right));
-  }
-  _calculateWidth() {
-    let totalWidth = 0;
-    for (let item of this._items) {
-      const rect = item.getBoundingClientRect();
-      totalWidth += rect.width;
+    _isMobile(el) {
+        if (!el) {
+            el = this._items.at(0);
+        }
+        const elRect = el.getBoundingClientRect();
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        return sliderRect.width - elRect.width < 10;
     }
-    const sliderStyle = getComputedStyle(this._sliderRef);
-    const padding = parseInt(sliderStyle.padding) * 2;
-    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
-    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
-    totalWidth += padding + gap;
-    this._totalWidth = totalWidth;
-  }
-  _calculateHeight() {
-    const outerHeight = this._items.at(0).getBoundingClientRect().height;
-    if (outerHeight != this._outerHeight) {
-      this._outerHeight = outerHeight;
+    static get is() { return "p-content-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["content-slider.component.scss"]
+        };
     }
-  }
-  _isMobile(el) {
-    if (!el) {
-      el = this._items.at(0);
+    static get styleUrls() {
+        return {
+            "$": ["content-slider.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hideMobileIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to hide the indicator on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-mobile-indicator",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to disable dragging the content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-drag",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableAutoCenter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to disable auto centering the content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-auto-center",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableIndicatorClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to disable clicking the indicator scrolls content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-indicator-click",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_visibleIndex": {},
+            "_outerHeight": {},
+            "_totalWidth": {},
+            "_dragging": {}
+        };
+    }
+    static get elementRef() { return "_el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "mouseUpHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "mouseUpHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "resizeHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
     }
-    const elRect = el.getBoundingClientRect();
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    return sliderRect.width - elRect.width < 10;
-  }
-  static get is() { return "p-content-slider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["content-slider.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["content-slider.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "hideMobileIndicator": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to hide the indicator on mobile"
-        },
-        "attribute": "hide-mobile-indicator",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableDrag": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to disable dragging the content"
-        },
-        "attribute": "disable-drag",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableAutoCenter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to disable auto centering the content"
-        },
-        "attribute": "disable-auto-center",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableIndicatorClick": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to disable clicking the indicator scrolls content"
-        },
-        "attribute": "disable-indicator-click",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_visibleIndex": {},
-      "_outerHeight": {},
-      "_totalWidth": {},
-      "_dragging": {}
-    };
-  }
-  static get elementRef() { return "_el"; }
-  static get listeners() {
-    return [{
-        "name": "mouseup",
-        "method": "mouseUpHandler",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "touchend",
-        "method": "mouseUpHandler",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "resize",
-        "method": "resizeHandler",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }
 //# sourceMappingURL=content-slider.component.js.map