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

package/dist/cjs/p-content-slider.cjs.entry.js

@@ -2,210 +2,216 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 
 const contentSliderComponentCss = ".absolute{position:absolute!important}.relative{position:relative!important}.mt-3{margin-top:.75rem!important}.flex{display:flex!important}.w-0{width:0!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-grab{cursor:grab!important}.cursor-grabbing{cursor:grabbing!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.overflow-visible{overflow:visible!important}.p-16{padding:4rem!important}.pt-1{padding-top:.25rem!important}.will-change-transform{will-change:transform!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;margin:-4rem;overflow:hidden;padding:4rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:auto}}:host .slider.draggable.dragging .inner-slider{transition-property:none}:host .slider .inner-slider{--tw-translate-x:0px;align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;will-change:transform}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap;gap:1rem}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:calc(50% - .5rem)}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:0}}:host .indicator{align-items:center;display:flex;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}:host .indicator .item{margin-top:.75rem;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:gap-4{gap:1rem!important}}.visible{visibility:visible!important}.static{position:static!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}";
+const PContentSliderStyle0 = contentSliderComponentCss;
 
 const ContentSlider = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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();
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: "p-content-slider" }, index.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) }, index.h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, index.h("slot", null))), index.h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (index.h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, index.h("p-slider-indicator", { active: i === this._visibleIndex })))))));
-  }
-  _mouseDownHandler(e) {
-    var _a;
-    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 = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[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;
-  }
-  _mouseMoveHandler(e) {
-    var _a, _b;
-    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 = ((_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;
-    }
-    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();
-    }
-  }
-  _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;
-    }
-    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();
-  }
-  _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`);
-    }
-  }
-  _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;
-      }
-    }
-  }
-  _checkLocation() {
-    var _a;
-    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 !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
-        scrollToIndex = this._lastIndex + 1;
-      }
-    }
-    if (scrollToIndex !== null) {
-      this._shouldCheckLocation = false;
-      setTimeout(() => this._scrollTo(scrollToIndex), 100);
-    }
-  }
-  _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));
-  }
-  _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;
-  }
-  _calculateHeight() {
-    const outerHeight = this._items.at(0).getBoundingClientRect().height;
-    if (outerHeight != this._outerHeight) {
-      this._outerHeight = outerHeight;
-    }
-  }
-  _isMobile(el) {
-    if (!el) {
-      el = this._items.at(0);
-    }
-    const elRect = el.getBoundingClientRect();
-    const sliderRect = this._sliderRef.getBoundingClientRect();
-    return sliderRect.width - elRect.width < 10;
-  }
-  get _el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hideMobileIndicator = false;
+        this.disableDrag = false;
+        this.disableAutoCenter = false;
+        this.disableIndicatorClick = false;
+        this._visibleIndex = undefined;
+        this._outerHeight = 0;
+        this._totalWidth = 0;
+        this._dragging = false;
+    }
+    get _el() { return index.getElement(this); }
+    _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);
+    }
+    componentDidLoad() {
+        this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
+        this._calculateWidth();
+        this._calculateIndicator();
+    }
+    disconnectedCallback() {
+        if (this._innerSliderResizeObserver) {
+            this._innerSliderResizeObserver.disconnect();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e996c635c0cf4b6079e446ce63d73f1b9852726b', class: "p-content-slider" }, index.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) }, index.h("div", { key: 'cbeab030c9c898ee3f13b18c542673057113a74d', class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, index.h("slot", { key: '3a750b867b7abd33b4ad25dd08b7e634fbddd957' }))), index.h("div", { key: '6fb3c9c1bfcaf67067858c71de4058be1e6fd8b8', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (index.h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, index.h("p-slider-indicator", { active: i === this._visibleIndex })))))));
+    }
+    _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;
+    }
+    _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();
+    }
+    _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();
+        }
+    }
+    _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;
+        }
+        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();
+    }
+    _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`);
+        }
+    }
+    _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;
+            }
+        }
+    }
+    _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);
+        }
+    }
+    _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));
+    }
+    _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;
+    }
+    _calculateHeight() {
+        const outerHeight = this._items.at(0).getBoundingClientRect().height;
+        if (outerHeight != this._outerHeight) {
+            this._outerHeight = outerHeight;
+        }
+    }
+    _isMobile(el) {
+        if (!el) {
+            el = this._items.at(0);
+        }
+        const elRect = el.getBoundingClientRect();
+        const sliderRect = this._sliderRef.getBoundingClientRect();
+        return sliderRect.width - elRect.width < 10;
+    }
 };
-ContentSlider.style = contentSliderComponentCss;
+ContentSlider.style = PContentSliderStyle0;
 
 exports.p_content_slider = ContentSlider;
 

package/dist/cjs/p-content-slider.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-content-slider.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/molecules/content-slider/content-slider.component.scss?tag=p-content-slider&encapsulation=shadow","src/components/molecules/content-slider/content-slider.component.tsx"],"sourcesContent":[":host {\n\t@apply flex flex-col overflow-hidden;\n\n\t@apply p-16 -m-16;\n\n\t.slider {\n\t\t@apply overflow-visible relative box-content;\n\n\t\t&.draggable {\n\t\t\t@apply cursor-grab desktop-xs:cursor-auto;\n\n\t\t\t&.dragging {\n\t\t\t\t@apply cursor-grabbing desktop-xs:cursor-auto;\n\n\t\t\t\t.inner-slider {\n\t\t\t\t\t@apply transition-none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.inner-slider {\n\t\t\t@apply absolute flex flex-nowrap items-stretch w-full gap-2;\n\n\t\t\t@apply will-change-transform transform-gpu translate-x-0;\n\n\t\t\t@apply desktop-xs:gap-4 desktop-xs:flex-wrap;\n\n\t\t\t@apply transition-all;\n\t\t\ttransition-duration: 0.5s;\n\n\t\t\t> ::slotted(*) {\n\t\t\t\t@apply w-full;\n\t\t\t\t@apply flex-shrink-0 z-10;\n\n\t\t\t\t@screen tablet {\n\t\t\t\t\twidth: calc(50% - 0.5rem);\n\t\t\t\t}\n\n\t\t\t\t@screen desktop-xs {\n\t\t\t\t\t@apply w-0 flex-1;\n\t\t\t\t}\n\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\t}\n\n\t.indicator {\n\t\t@apply flex justify-center items-center desktop-xs:hidden;\n\n\t\t.item {\n\t\t\t@apply mt-3 pt-1 px-1;\n\t\t}\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-content-slider',\n\tstyleUrl: 'content-slider.component.scss',\n\tshadow: true,\n})\nexport class ContentSlider {\n\t/**\n\t * Wether to hide the indicator on mobile\n\t */\n\t@Prop() hideMobileIndicator: boolean = false;\n\n\t/**\n\t * Wether to disable dragging the content\n\t */\n\t@Prop() disableDrag: boolean = false;\n\n\t/**\n\t * Wether to disable auto centering the content\n\t */\n\t@Prop() disableAutoCenter: boolean = false;\n\n\t/**\n\t * Wether to disable clicking the indicator scrolls content\n\t */\n\t@Prop() disableIndicatorClick: boolean = false;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _visibleIndex: number;\n\t@State() private _outerHeight = 0;\n\t@State() private _totalWidth = 0;\n\tprivate _sliderRef: HTMLElement;\n\tprivate _innerSliderRef: HTMLElement;\n\tprivate _items: HTMLElement[] = [];\n\tprivate _innerSliderResizeObserver: ResizeObserver;\n\n\t// mouse movement stuff\n\tprivate _startX: number;\n\tprivate _startMouseX: number;\n\tprivate _lastMouseX: number;\n\tprivate _lastIndex: number;\n\tprivate _shouldCheckLocation = false;\n\t@State() private _dragging = false;\n\n\tcomponentWillRender() {\n\t\tconst items = this._el.querySelectorAll(':scope > *');\n\t\tthis._items = Array.from(items) as HTMLElement[];\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\tthis._calculateWidth();\n\t\tthis._calculateIndicator();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._innerSliderResizeObserver) {\n\t\t\tthis._innerSliderResizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-content-slider\">\n\t\t\t\t<div\n\t\t\t\t\tclass={`slider ${!this.disableDrag && 'draggable'} ${\n\t\t\t\t\t\tthis._dragging && 'dragging'\n\t\t\t\t\t}`}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: `${this._outerHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t\tref={(el) => (this._sliderRef = el)}\n\t\t\t\t\tonMouseDown={(e) => this._mouseDownHandler(e)}\n\t\t\t\t\tonTouchStart={(e) => this._mouseDownHandler(e)}\n\t\t\t\t\tonMouseMove={(e) => this._mouseMoveHandler(e)}\n\t\t\t\t\tonTouchMove={(e) => this._mouseMoveHandler(e)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"inner-slider\"\n\t\t\t\t\t\tref={(ref) => this._setInnerSliderReft(ref)}\n\t\t\t\t\t\tonTransitionEnd={() => this._transitionEndHandler()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={`indicator ${this.hideMobileIndicator && 'hidden'}`}\n\t\t\t\t>\n\t\t\t\t\t{this._items.map((_, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={() => this._scrollTo(i, true)}\n\t\t\t\t\t\t\tclass={`item ${\n\t\t\t\t\t\t\t\t!this.disableIndicatorClick && 'cursor-pointer'\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-slider-indicator\n\t\t\t\t\t\t\t\tactive={i === this._visibleIndex}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _mouseDownHandler(e) {\n\t\tif (this.disableDrag || this._dragging) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerSliderStyle = getComputedStyle(this._innerSliderRef);\n\t\tif (innerSliderStyle.flexWrap === 'wrap') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._startMouseX = e.x;\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tif (e.type === 'touchstart') {\n\t\t\tthis._startMouseX = e.touches?.[0].clientX;\n\t\t}\n\n\t\tconst innerSliderRect = this._innerSliderRef.getBoundingClientRect();\n\t\tconst offsetLeft = innerSliderRect.x - sliderRect.x;\n\n\t\tthis._startX = this._startMouseX - sliderRect.x - offsetLeft;\n\t\tthis._lastIndex = this._visibleIndex;\n\t\tthis._dragging = true;\n\t}\n\n\tprivate _mouseMoveHandler(e) {\n\t\tif (!e || !this._dragging || this.disableDrag) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\n\t\tthis._shouldCheckLocation = true;\n\n\t\tif (\n\t\t\tthis._innerSliderRef.style.getPropertyValue('pointer-events') === ''\n\t\t) {\n\t\t\tthis._innerSliderRef.style.pointerEvents = 'none';\n\t\t}\n\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tlet x = e.clientX - sliderRect.left;\n\t\tthis._lastMouseX = e.x;\n\t\tif (e.type === 'touchmove') {\n\t\t\tx = e.touches?.[0].clientX - sliderRect.left;\n\t\t\tthis._lastMouseX = e.touches?.[0].clientX;\n\t\t}\n\n\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t'--tw-translate-x',\n\t\t\t`${x - this._startX}px`\n\t\t);\n\n\t\tthis._checkBoundary();\n\t\tthis._calculateIndicator();\n\t}\n\n\tprivate _transitionEndHandler() {\n\t\tthis._calculateIndicator();\n\t}\n\n\t@Listen('mouseup', { target: 'window' })\n\t@Listen('touchend', { target: 'window' })\n\tmouseUpHandler() {\n\t\tthis._dragging = false;\n\t\tthis._innerSliderRef.style.removeProperty('pointer-events');\n\n\t\tthis._checkLocation();\n\t}\n\n\t@Listen('resize', { target: 'window' })\n\tresizeHandler() {\n\t\tif (this._innerSliderRef) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', '0px');\n\t\t\tthis._calculateWidth();\n\t\t\tthis._calculateIndicator();\n\t\t}\n\t}\n\n\tprivate _setInnerSliderReft(ref) {\n\t\tthis._innerSliderRef = ref;\n\t\tthis._innerSliderResizeObserver = new ResizeObserver(() =>\n\t\t\tthis._calculateHeight()\n\t\t);\n\t\tthis._innerSliderResizeObserver.observe(this._innerSliderRef);\n\t}\n\n\tprivate _scrollTo(i: number, manual = false) {\n\t\tif (this.disableIndicatorClick && manual) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst el = this._items[i];\n\n\t\tif (i === 0) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tconst innerSliderRect = this._innerSliderRef.getBoundingClientRect();\n\t\tconst elRect = el.getBoundingClientRect();\n\n\t\tconst offsetLeft = elRect.x - innerSliderRect.x;\n\n\t\tconst centerOffset =\n\t\t\toffsetLeft + elRect.width / 2 - sliderRect.width / 2;\n\n\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t'--tw-translate-x',\n\t\t\t`-${centerOffset}px`\n\t\t);\n\n\t\tthis._checkBoundary();\n\t\tthis._calculateIndicator();\n\t}\n\n\tprivate _checkBoundary() {\n\t\tlet outer = this._sliderRef.getBoundingClientRect();\n\n\t\tconst left = parseInt(\n\t\t\tthis._innerSliderRef.style.getPropertyValue('--tw-translate-x')\n\t\t);\n\t\tif (left > 0) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\t}\n\n\t\tconst maxLeft = (this._totalWidth - outer.width) * -1;\n\t\tif (left < maxLeft) {\n\t\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t\t'--tw-translate-x',\n\t\t\t\t`${maxLeft}px`\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate _calculateIndicator() {\n\t\tfor (let i = 0; i < this._items.length; i++) {\n\t\t\tconst item = this._items[i];\n\t\t\tconst visible = this._isVisible(item);\n\n\t\t\tif (visible) {\n\t\t\t\tthis._visibleIndex = i;\n\t\t\t}\n\n\t\t\tif (i === 0 && visible) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _checkLocation() {\n\t\tif (!this._shouldCheckLocation) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet scrollToIndex = null;\n\t\tif (this._lastIndex !== this._visibleIndex) {\n\t\t\tscrollToIndex = this._visibleIndex;\n\t\t}\n\n\t\tif (this._lastIndex === this._visibleIndex) {\n\t\t\tif (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {\n\t\t\t\tscrollToIndex = this._lastIndex - 1;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis._lastMouseX < this._startMouseX &&\n\t\t\t\tthis._lastIndex !== this._items?.length - 1\n\t\t\t) {\n\t\t\t\tscrollToIndex = this._lastIndex + 1;\n\t\t\t}\n\t\t}\n\n\t\tif (scrollToIndex !== null) {\n\t\t\tthis._shouldCheckLocation = false;\n\t\t\tsetTimeout(() => this._scrollTo(scrollToIndex), 100);\n\t\t}\n\t}\n\n\tprivate _isVisible(el: HTMLElement) {\n\t\tif (!this._el || !el) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst elRect = el.getBoundingClientRect();\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\n\t\treturn (\n\t\t\t(elRect.left >= sliderRect.left &&\n\t\t\t\telRect.right <= sliderRect.right) ||\n\t\t\t(this._isMobile(el) &&\n\t\t\t\telRect.left + elRect.width / 2 >= sliderRect.left &&\n\t\t\t\telRect.left + elRect.width / 2 <= sliderRect.right)\n\t\t);\n\t}\n\n\tprivate _calculateWidth() {\n\t\tlet totalWidth = 0;\n\n\t\tfor (let item of this._items) {\n\t\t\tconst rect = item.getBoundingClientRect();\n\t\t\ttotalWidth += rect.width;\n\t\t}\n\n\t\tconst sliderStyle = getComputedStyle(this._sliderRef);\n\t\tconst padding = parseInt(sliderStyle.padding) * 2;\n\n\t\tconst innerSliderStyle = getComputedStyle(this._innerSliderRef);\n\t\tconst gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);\n\n\t\ttotalWidth += padding + gap;\n\n\t\tthis._totalWidth = totalWidth;\n\t}\n\n\tprivate _calculateHeight() {\n\t\tconst outerHeight = this._items.at(0).getBoundingClientRect().height;\n\t\tif (outerHeight != this._outerHeight) {\n\t\t\tthis._outerHeight = outerHeight;\n\t\t}\n\t}\n\n\tprivate _isMobile(el?: HTMLElement) {\n\t\tif (!el) {\n\t\t\tel = this._items.at(0);\n\t\t}\n\n\t\tconst elRect = el.getBoundingClientRect();\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\n\t\treturn sliderRect.width - elRect.width < 10;\n\t}\n}\n"],"version":3}
+{"file":"p-content-slider.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/molecules/content-slider/content-slider.component.scss?tag=p-content-slider&encapsulation=shadow","src/components/molecules/content-slider/content-slider.component.tsx"],"sourcesContent":[":host {\n\t@apply flex flex-col overflow-hidden;\n\n\t@apply p-16 -m-16;\n\n\t.slider {\n\t\t@apply overflow-visible relative box-content;\n\n\t\t&.draggable {\n\t\t\t@apply cursor-grab desktop-xs:cursor-auto;\n\n\t\t\t&.dragging {\n\t\t\t\t@apply cursor-grabbing desktop-xs:cursor-auto;\n\n\t\t\t\t.inner-slider {\n\t\t\t\t\t@apply transition-none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.inner-slider {\n\t\t\t@apply absolute flex flex-nowrap items-stretch w-full gap-2;\n\n\t\t\t@apply will-change-transform transform-gpu translate-x-0;\n\n\t\t\t@apply desktop-xs:gap-4 desktop-xs:flex-wrap;\n\n\t\t\t@apply transition-all;\n\t\t\ttransition-duration: 0.5s;\n\n\t\t\t> ::slotted(*) {\n\t\t\t\t@apply w-full;\n\t\t\t\t@apply flex-shrink-0 z-10;\n\n\t\t\t\t@screen tablet {\n\t\t\t\t\twidth: calc(50% - 0.5rem);\n\t\t\t\t}\n\n\t\t\t\t@screen desktop-xs {\n\t\t\t\t\t@apply w-0 flex-1;\n\t\t\t\t}\n\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\t}\n\n\t.indicator {\n\t\t@apply flex justify-center items-center desktop-xs:hidden;\n\n\t\t.item {\n\t\t\t@apply mt-3 pt-1 px-1;\n\t\t}\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\n\n@Component({\n\ttag: 'p-content-slider',\n\tstyleUrl: 'content-slider.component.scss',\n\tshadow: true,\n})\nexport class ContentSlider {\n\t/**\n\t * Wether to hide the indicator on mobile\n\t */\n\t@Prop() hideMobileIndicator: boolean = false;\n\n\t/**\n\t * Wether to disable dragging the content\n\t */\n\t@Prop() disableDrag: boolean = false;\n\n\t/**\n\t * Wether to disable auto centering the content\n\t */\n\t@Prop() disableAutoCenter: boolean = false;\n\n\t/**\n\t * Wether to disable clicking the indicator scrolls content\n\t */\n\t@Prop() disableIndicatorClick: boolean = false;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _visibleIndex: number;\n\t@State() private _outerHeight = 0;\n\t@State() private _totalWidth = 0;\n\tprivate _sliderRef: HTMLElement;\n\tprivate _innerSliderRef: HTMLElement;\n\tprivate _items: HTMLElement[] = [];\n\tprivate _innerSliderResizeObserver: ResizeObserver;\n\n\t// mouse movement stuff\n\tprivate _startX: number;\n\tprivate _startMouseX: number;\n\tprivate _lastMouseX: number;\n\tprivate _lastIndex: number;\n\tprivate _shouldCheckLocation = false;\n\t@State() private _dragging = false;\n\n\tcomponentWillRender() {\n\t\tconst items = this._el.querySelectorAll(':scope > *');\n\t\tthis._items = Array.from(items) as HTMLElement[];\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\tthis._calculateWidth();\n\t\tthis._calculateIndicator();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._innerSliderResizeObserver) {\n\t\t\tthis._innerSliderResizeObserver.disconnect();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-content-slider\">\n\t\t\t\t<div\n\t\t\t\t\tclass={`slider ${!this.disableDrag && 'draggable'} ${\n\t\t\t\t\t\tthis._dragging && 'dragging'\n\t\t\t\t\t}`}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: `${this._outerHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t\tref={(el) => (this._sliderRef = el)}\n\t\t\t\t\tonMouseDown={(e) => this._mouseDownHandler(e)}\n\t\t\t\t\tonTouchStart={(e) => this._mouseDownHandler(e)}\n\t\t\t\t\tonMouseMove={(e) => this._mouseMoveHandler(e)}\n\t\t\t\t\tonTouchMove={(e) => this._mouseMoveHandler(e)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"inner-slider\"\n\t\t\t\t\t\tref={(ref) => this._setInnerSliderReft(ref)}\n\t\t\t\t\t\tonTransitionEnd={() => this._transitionEndHandler()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass={`indicator ${this.hideMobileIndicator && 'hidden'}`}\n\t\t\t\t>\n\t\t\t\t\t{this._items.map((_, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={() => this._scrollTo(i, true)}\n\t\t\t\t\t\t\tclass={`item ${\n\t\t\t\t\t\t\t\t!this.disableIndicatorClick && 'cursor-pointer'\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-slider-indicator\n\t\t\t\t\t\t\t\tactive={i === this._visibleIndex}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _mouseDownHandler(e) {\n\t\tif (this.disableDrag || this._dragging) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerSliderStyle = getComputedStyle(this._innerSliderRef);\n\t\tif (innerSliderStyle.flexWrap === 'wrap') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._startMouseX = e.x;\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tif (e.type === 'touchstart') {\n\t\t\tthis._startMouseX = e.touches?.[0].clientX;\n\t\t}\n\n\t\tconst innerSliderRect = this._innerSliderRef.getBoundingClientRect();\n\t\tconst offsetLeft = innerSliderRect.x - sliderRect.x;\n\n\t\tthis._startX = this._startMouseX - sliderRect.x - offsetLeft;\n\t\tthis._lastIndex = this._visibleIndex;\n\t\tthis._dragging = true;\n\t}\n\n\tprivate _mouseMoveHandler(e) {\n\t\tif (!e || !this._dragging || this.disableDrag) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\n\t\tthis._shouldCheckLocation = true;\n\n\t\tif (\n\t\t\tthis._innerSliderRef.style.getPropertyValue('pointer-events') === ''\n\t\t) {\n\t\t\tthis._innerSliderRef.style.pointerEvents = 'none';\n\t\t}\n\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tlet x = e.clientX - sliderRect.left;\n\t\tthis._lastMouseX = e.x;\n\t\tif (e.type === 'touchmove') {\n\t\t\tx = e.touches?.[0].clientX - sliderRect.left;\n\t\t\tthis._lastMouseX = e.touches?.[0].clientX;\n\t\t}\n\n\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t'--tw-translate-x',\n\t\t\t`${x - this._startX}px`\n\t\t);\n\n\t\tthis._checkBoundary();\n\t\tthis._calculateIndicator();\n\t}\n\n\tprivate _transitionEndHandler() {\n\t\tthis._calculateIndicator();\n\t}\n\n\t@Listen('mouseup', { target: 'window' })\n\t@Listen('touchend', { target: 'window' })\n\tmouseUpHandler() {\n\t\tthis._dragging = false;\n\t\tthis._innerSliderRef.style.removeProperty('pointer-events');\n\n\t\tthis._checkLocation();\n\t}\n\n\t@Listen('resize', { target: 'window' })\n\tresizeHandler() {\n\t\tif (this._innerSliderRef) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', '0px');\n\t\t\tthis._calculateWidth();\n\t\t\tthis._calculateIndicator();\n\t\t}\n\t}\n\n\tprivate _setInnerSliderReft(ref) {\n\t\tthis._innerSliderRef = ref;\n\t\tthis._innerSliderResizeObserver = new ResizeObserver(() =>\n\t\t\tthis._calculateHeight()\n\t\t);\n\t\tthis._innerSliderResizeObserver.observe(this._innerSliderRef);\n\t}\n\n\tprivate _scrollTo(i: number, manual = false) {\n\t\tif (this.disableIndicatorClick && manual) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst el = this._items[i];\n\n\t\tif (i === 0) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\t\tconst innerSliderRect = this._innerSliderRef.getBoundingClientRect();\n\t\tconst elRect = el.getBoundingClientRect();\n\n\t\tconst offsetLeft = elRect.x - innerSliderRect.x;\n\n\t\tconst centerOffset =\n\t\t\toffsetLeft + elRect.width / 2 - sliderRect.width / 2;\n\n\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t'--tw-translate-x',\n\t\t\t`-${centerOffset}px`\n\t\t);\n\n\t\tthis._checkBoundary();\n\t\tthis._calculateIndicator();\n\t}\n\n\tprivate _checkBoundary() {\n\t\tlet outer = this._sliderRef.getBoundingClientRect();\n\n\t\tconst left = parseInt(\n\t\t\tthis._innerSliderRef.style.getPropertyValue('--tw-translate-x')\n\t\t);\n\t\tif (left > 0) {\n\t\t\tthis._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);\n\t\t}\n\n\t\tconst maxLeft = (this._totalWidth - outer.width) * -1;\n\t\tif (left < maxLeft) {\n\t\t\tthis._innerSliderRef.style.setProperty(\n\t\t\t\t'--tw-translate-x',\n\t\t\t\t`${maxLeft}px`\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate _calculateIndicator() {\n\t\tfor (let i = 0; i < this._items.length; i++) {\n\t\t\tconst item = this._items[i];\n\t\t\tconst visible = this._isVisible(item);\n\n\t\t\tif (visible) {\n\t\t\t\tthis._visibleIndex = i;\n\t\t\t}\n\n\t\t\tif (i === 0 && visible) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _checkLocation() {\n\t\tif (!this._shouldCheckLocation) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet scrollToIndex = null;\n\t\tif (this._lastIndex !== this._visibleIndex) {\n\t\t\tscrollToIndex = this._visibleIndex;\n\t\t}\n\n\t\tif (this._lastIndex === this._visibleIndex) {\n\t\t\tif (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {\n\t\t\t\tscrollToIndex = this._lastIndex - 1;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis._lastMouseX < this._startMouseX &&\n\t\t\t\tthis._lastIndex !== this._items?.length - 1\n\t\t\t) {\n\t\t\t\tscrollToIndex = this._lastIndex + 1;\n\t\t\t}\n\t\t}\n\n\t\tif (scrollToIndex !== null) {\n\t\t\tthis._shouldCheckLocation = false;\n\t\t\tsetTimeout(() => this._scrollTo(scrollToIndex), 100);\n\t\t}\n\t}\n\n\tprivate _isVisible(el: HTMLElement) {\n\t\tif (!this._el || !el) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst elRect = el.getBoundingClientRect();\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\n\t\treturn (\n\t\t\t(elRect.left >= sliderRect.left &&\n\t\t\t\telRect.right <= sliderRect.right) ||\n\t\t\t(this._isMobile(el) &&\n\t\t\t\telRect.left + elRect.width / 2 >= sliderRect.left &&\n\t\t\t\telRect.left + elRect.width / 2 <= sliderRect.right)\n\t\t);\n\t}\n\n\tprivate _calculateWidth() {\n\t\tlet totalWidth = 0;\n\n\t\tfor (let item of this._items) {\n\t\t\tconst rect = item.getBoundingClientRect();\n\t\t\ttotalWidth += rect.width;\n\t\t}\n\n\t\tconst sliderStyle = getComputedStyle(this._sliderRef);\n\t\tconst padding = parseInt(sliderStyle.padding) * 2;\n\n\t\tconst innerSliderStyle = getComputedStyle(this._innerSliderRef);\n\t\tconst gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);\n\n\t\ttotalWidth += padding + gap;\n\n\t\tthis._totalWidth = totalWidth;\n\t}\n\n\tprivate _calculateHeight() {\n\t\tconst outerHeight = this._items.at(0).getBoundingClientRect().height;\n\t\tif (outerHeight != this._outerHeight) {\n\t\t\tthis._outerHeight = outerHeight;\n\t\t}\n\t}\n\n\tprivate _isMobile(el?: HTMLElement) {\n\t\tif (!el) {\n\t\t\tel = this._items.at(0);\n\t\t}\n\n\t\tconst elRect = el.getBoundingClientRect();\n\t\tconst sliderRect = this._sliderRef.getBoundingClientRect();\n\n\t\treturn sliderRect.width - elRect.width < 10;\n\t}\n}\n"],"version":3}

package/dist/cjs/p-counter.cjs.entry.js

@@ -2,21 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02e05522.js');
+const index = require('./index-3f9bbc0c.js');
 
 const counterComponentCss = ".flex{display:flex!important}.h-2{height:.5rem!important}.h-4{height:1rem!important}.w-2{width:.5rem!important}.min-w-0{min-width:0!important}.min-w-\\[1rem\\]{min-width:1rem!important}.items-center{align-items:center!important}.rounded{border-radius:.25rem!important}.rounded-full{border-radius:9999px!important}.rounded-xl{border-radius:.75rem!important}.bg-indigo{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.bg-negative-light{--tw-bg-opacity:1!important;background-color:rgb(255 204 211/var(--tw-bg-opacity,1))!important}.bg-positive-light{--tw-bg-opacity:1!important;background-color:rgb(229 255 242/var(--tw-bg-opacity,1))!important}.bg-unbiased-light{--tw-bg-opacity:1!important;background-color:rgb(255 246 220/var(--tw-bg-opacity,1))!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.uppercase{text-transform:uppercase!important}.leading-3{line-height:.75rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:.75rem;color:rgb(255 255 255/var(--tw-text-opacity,1));display:flex;font-size:.75rem;font-weight:700;height:1rem;justify-content:center;line-height:.75rem;padding-left:.5rem;padding-right:.5rem;text-transform:uppercase}:host(.variant-negative),:host(.variant-positive),:host(.variant-unbiased){border-radius:.25rem;min-width:1rem;padding-left:.25rem;padding-right:.25rem}:host(.variant-positive){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity,1));color:rgb(29 163 96/var(--tw-text-opacity,1))}:host(.variant-unbiased){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity,1));color:rgb(255 162 49/var(--tw-text-opacity,1))}:host(.variant-negative){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity,1));color:rgb(138 15 29/var(--tw-text-opacity,1))}:host(.size-mini){border-radius:9999px;height:.5rem;min-width:0;padding:0;width:.5rem}:host(.size-mini) slot{display:none}.static{position:static!important}";
+const PCounterStyle0 = counterComponentCss;
 
 const Counter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.variant = 'info';
-    this.size = 'default';
-  }
-  render() {
-    return (index.h(index.Host, { class: `p-counter variant-${this.variant} size-${this.size}` }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'info';
+        this.size = 'default';
+    }
+    render() {
+        return (index.h(index.Host, { key: '247b54b5069475c8237a0276e19bae59aa7d7fac', class: `p-counter variant-${this.variant} size-${this.size}` }, index.h("slot", { key: '4bc3b8c5cedc9e522d2c563ffef31fe2b1bbed0b' })));
+    }
 };
-Counter.style = counterComponentCss;
+Counter.style = PCounterStyle0;
 
 exports.p_counter = Counter;
 

package/dist/cjs/p-counter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-counter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,8nEAA8nE;;MCO7oE,OAAO;;;mBAI8C,MAAM;gBAKpC,SAAS;;EAE5C,MAAM;IACL,QACCA,QAACC,UAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,EAAE,IACjED,qBAAQ,CACF,EACN;GACF;;;;;;","names":["h","Host"],"sources":["src/components/atoms/counter/counter.component.scss?tag=p-counter&encapsulation=shadow","src/components/atoms/counter/counter.component.tsx"],"sourcesContent":[":host {\n\t@apply h-4 rounded-xl bg-indigo px-2;\n\t@apply text-xs font-bold uppercase leading-3 text-white;\n\t@apply flex items-center justify-center;\n}\n\n:host(.variant-positive),\n:host(.variant-unbiased),\n:host(.variant-negative) {\n\t@apply min-w-[1rem] rounded px-1;\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light text-positive-dark;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light text-unbiased-dark;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light text-negative-dark;\n}\n\n:host(.size-mini) {\n\t@apply h-2 w-2 min-w-0 rounded-full p-0;\n\n\tslot {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-counter',\n\tstyleUrl: 'counter.component.scss',\n\tshadow: true,\n})\nexport class Counter {\n\t/**\n\t * The variant of the counter\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The size of the counter\n\t */\n\t@Prop() size: 'default' | 'mini' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-counter variant-${this.variant} size-${this.size}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-counter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,8nEAA8nE,CAAC;AAC3pE,uBAAe,mBAAmB;;MCMrB,OAAO;;;uBAI8C,MAAM;oBAKpC,SAAS;;IAE5C,MAAM;QACL,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,OAAO,SAAS,IAAI,CAAC,IAAI,EAAE,IACjED,oEAAQ,CACF,EACN;KACF;;;;;;","names":["h","Host"],"sources":["src/components/atoms/counter/counter.component.scss?tag=p-counter&encapsulation=shadow","src/components/atoms/counter/counter.component.tsx"],"sourcesContent":[":host {\n\t@apply h-4 rounded-xl bg-indigo px-2;\n\t@apply text-xs font-bold uppercase leading-3 text-white;\n\t@apply flex items-center justify-center;\n}\n\n:host(.variant-positive),\n:host(.variant-unbiased),\n:host(.variant-negative) {\n\t@apply min-w-[1rem] rounded px-1;\n}\n\n:host(.variant-positive) {\n\t@apply bg-positive-light text-positive-dark;\n}\n\n:host(.variant-unbiased) {\n\t@apply bg-unbiased-light text-unbiased-dark;\n}\n\n:host(.variant-negative) {\n\t@apply bg-negative-light text-negative-dark;\n}\n\n:host(.size-mini) {\n\t@apply h-2 w-2 min-w-0 rounded-full p-0;\n\n\tslot {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-counter',\n\tstyleUrl: 'counter.component.scss',\n\tshadow: true,\n})\nexport class Counter {\n\t/**\n\t * The variant of the counter\n\t */\n\t@Prop() variant: 'info' | 'negative' | 'positive' | 'unbiased' = 'info';\n\n\t/**\n\t * The size of the counter\n\t */\n\t@Prop() size: 'default' | 'mini' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-counter variant-${this.variant} size-${this.size}`}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}