@paperless/core 2.0.1-beta.17 → 2.0.1-beta.19

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

@@ -1 +1 @@
-{"version":3,"file":"content-slider.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/content-slider/content-slider.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"content-slider.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/content-slider/content-slider.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/molecules/cropper/cropper.component.js

@@ -2,234 +2,248 @@ import { Host, h, } from "@stencil/core";
 import { clsx } from "clsx";
 import "cropperjs";
 export class Cropper {
-  constructor() {
-    this._maxScale = 0;
-    this._minScale = 0;
-    this.variant = 'user';
-    this.value = undefined;
-    this.returnType = 'base64';
-    this._loaded = false;
-    this._currentScale = 0;
-  }
-  onResize() {
-    if (this._resizeDebounceTimeout) {
-      clearTimeout(this._resizeDebounceTimeout);
-    }
-    this._resizeDebounceTimeout = setTimeout(() => {
-      this._selectionRef.$center();
-      this._imageRef.$center();
-    }, 200);
-  }
-  componentDidLoad() {
-    setTimeout(() => {
-      this._loaded = true;
-    }, 200);
-  }
-  render() {
-    return (h(Host, { class: "p-cropper" }, this._loaded && (h("cropper-canvas", { class: "h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white", onAction: () => this._onAction() }, h("cropper-image", { src: this.value, alt: "Picture", ref: (ref) => this._setImageRef(ref), scalable: true, crossorigin: "anonymous" }), h("cropper-shade", { class: clsx({
-        'rounded-round': this.variant === 'user',
-        rounded: this.variant === 'company',
-      }), "theme-color": "rgba(255, 255, 255, 0.5)", hidden: true }), h("cropper-selection", { "initial-coverage": "0.7", "aspect-ratio": "1", ref: (ref) => (this._selectionRef = ref) }), h("cropper-handle", { action: "move", plain: true }))), h("div", { class: "flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1" }, h("p-icon", { variant: "minus" }), h("input", { class: "p-input w-full", type: "range", min: "0", max: "100", value: this._currentScale, onInput: (ev) => this._onInput(ev.target.value), step: "0.5" }), h("p-icon", { variant: "plus" }))));
-  }
-  _setImageRef(ref) {
-    if (this._imageRef) {
-      return;
-    }
-    this._imageRef = ref;
-    this._imageRef.$ready((image) => setTimeout(() => this._setInitialState(image), 200));
-  }
-  _setInitialState(image) {
-    let scale;
-    if (image.naturalWidth > image.naturalHeight) {
-      // set scale by height
-      scale = 200 / image.naturalHeight;
-    }
-    if (image.naturalHeight >= image.naturalWidth) {
-      // set scale by width
-      scale = 200 / image.naturalWidth;
-    }
-    const current = this._imageRef.$getTransform();
-    this._minScale = scale;
-    this._maxScale = current[0];
-    this._selectionRef.$resize('nw-resize', 200, 200, 1);
-    this._selectionRef.$center();
-    this._setScale(scale);
-    this._toCanvas();
-  }
-  _onAction() {
-    this._setCurrentScale();
-    this._toCanvas();
-  }
-  _setScale(scale, setCenter = true, setCurrentScale = true) {
-    const transform = this._imageRef.$getTransform();
-    this._imageRef.$setTransform([
-      scale,
-      0,
-      0,
-      scale,
-      transform[4],
-      transform[5],
-    ]);
-    if (setCenter) {
-      this._imageRef.$center();
-    }
-    if (setCurrentScale) {
-      this._setCurrentScale();
-    }
-  }
-  _setCurrentScale() {
-    const transform = this._imageRef.$getTransform();
-    const current = transform[0];
-    if (current < this._minScale) {
-      this._setScale(this._minScale, true, false);
-      this._currentScale = 0;
-      return;
-    }
-    if (current > this._maxScale) {
-      this._setScale(this._maxScale, true, false);
-      this._currentScale = 100;
-      return;
-    }
-    if (current === this._minScale) {
-      this._currentScale = 0;
-      return;
-    }
-    if (current === this._maxScale) {
-      this._currentScale = 100;
-      return;
-    }
-    const minMaxDiff = this._maxScale - this._minScale;
-    const currentDiff = current - this._minScale;
-    const percentage = (currentDiff / minMaxDiff) * 100;
-    this._currentScale = percentage;
-  }
-  _onInput(value) {
-    const transform = this._imageRef.$getTransform();
-    const current = transform[0];
-    const minMaxDiff = this._maxScale - this._minScale;
-    const toSet = minMaxDiff * (value / 100);
-    if (toSet === current) {
-      return;
-    }
-    this._setScale(toSet + this._minScale, false, false);
-    this._currentScale = value;
-    this._toCanvas();
-  }
-  _toCanvas() {
-    if (this._toCanvasDebounceTimeout) {
-      clearTimeout(this._toCanvasDebounceTimeout);
-    }
-    this._toCanvasDebounceTimeout = setTimeout(async () => {
-      const canvas = await this._selectionRef.$toCanvas();
-      if (this.returnType === 'canvas') {
-        this.valueChange.emit(canvas);
-        return;
-      }
-      const data = canvas.toDataURL('image/png');
-      this.valueChange.emit(data);
-    }, 200);
-  }
-  static get is() { return "p-cropper"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cropper.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cropper.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'user' | 'company'",
-          "resolved": "\"company\" | \"user\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the image that's being cropped"
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "'user'"
-      },
-      "value": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The image to crop (url or base64)"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "returnType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'canvas' | 'base64'",
-          "resolved": "\"base64\" | \"canvas\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The return type of the onchange"
-        },
-        "attribute": "return-type",
-        "reflect": false,
-        "defaultValue": "'base64'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_loaded": {},
-      "_currentScale": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the value changes"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    constructor() {
+        this.variant = 'user';
+        this.value = undefined;
+        this.returnType = 'base64';
+        this._loaded = false;
+        this._currentScale = 0;
+    }
+    /**
+     * Event when the value changes
+     */
+    valueChange;
+    _imageRef;
+    _selectionRef;
+    _maxScale = 0;
+    _minScale = 0;
+    _resizeDebounceTimeout;
+    _toCanvasDebounceTimeout;
+    onResize() {
+        if (this._resizeDebounceTimeout) {
+            clearTimeout(this._resizeDebounceTimeout);
+        }
+        this._resizeDebounceTimeout = setTimeout(() => {
+            this._selectionRef.$center();
+            this._imageRef.$center();
+        }, 200);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this._loaded = true;
+        }, 200);
+    }
+    render() {
+        return (h(Host, { key: '6ebd0a1fc3d389e08eb64366852829441faac870', class: 'p-cropper' }, this._loaded && (h("cropper-canvas", { key: 'ebd7739095487bc8342d3069fd49b4b1b931a0b8', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white', onAction: () => this._onAction() }, h("cropper-image", { key: '8784c083f9bee21ce4cb07a8e5f42120312de9cd', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, crossorigin: 'anonymous' }), h("cropper-shade", { key: '396c9156c949aae95855797776396b11c129f9c6', class: clsx({
+                'rounded-round': this.variant === 'user',
+                rounded: this.variant === 'company',
+            }), "theme-color": 'rgba(255, 255, 255, 0.5)', hidden: true }), h("cropper-selection", { key: 'b98f209132164b5d1dd0e86e322714b7c6a6daed', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: '94d54608e41829f850f834d1000813337bec12a9', action: 'move', plain: true }))), h("div", { key: 'cfea8e12b32bc15f6ed553ba703ba4c56cb2fa36', class: 'flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1' }, h("p-icon", { key: '4175e10fb032840a115aeabd4925eedbeaa9162c', variant: 'minus' }), h("input", { key: '62ce062025d028a294a1e6b35e8cd57b0e1a1257', class: 'p-input w-full', type: 'range', min: '0', max: '100', value: this._currentScale, onInput: ev => this._onInput(ev.target.value), step: '0.5' }), h("p-icon", { key: 'e01c3c087fff137cb13f63a2923ab993333661a6', variant: 'plus' }))));
+    }
+    _setImageRef(ref) {
+        if (this._imageRef) {
+            return;
+        }
+        this._imageRef = ref;
+        this._imageRef.$ready(image => setTimeout(() => this._setInitialState(image), 200));
+    }
+    _setInitialState(image) {
+        let scale;
+        if (image.naturalWidth > image.naturalHeight) {
+            // set scale by height
+            scale = 200 / image.naturalHeight;
+        }
+        if (image.naturalHeight >= image.naturalWidth) {
+            // set scale by width
+            scale = 200 / image.naturalWidth;
+        }
+        const current = this._imageRef.$getTransform();
+        this._minScale = scale;
+        this._maxScale = current[0];
+        this._selectionRef.$resize('nw-resize', 200, 200, 1);
+        this._selectionRef.$center();
+        this._setScale(scale);
+        this._toCanvas();
+    }
+    _onAction() {
+        this._setCurrentScale();
+        this._toCanvas();
+    }
+    _setScale(scale, setCenter = true, setCurrentScale = true) {
+        const transform = this._imageRef.$getTransform();
+        this._imageRef.$setTransform([
+            scale,
+            0,
+            0,
+            scale,
+            transform[4],
+            transform[5],
+        ]);
+        if (setCenter) {
+            this._imageRef.$center();
+        }
+        if (setCurrentScale) {
+            this._setCurrentScale();
+        }
+    }
+    _setCurrentScale() {
+        const transform = this._imageRef.$getTransform();
+        const current = transform[0];
+        if (current < this._minScale) {
+            this._setScale(this._minScale, true, false);
+            this._currentScale = 0;
+            return;
         }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "onResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+        if (current > this._maxScale) {
+            this._setScale(this._maxScale, true, false);
+            this._currentScale = 100;
+            return;
+        }
+        if (current === this._minScale) {
+            this._currentScale = 0;
+            return;
+        }
+        if (current === this._maxScale) {
+            this._currentScale = 100;
+            return;
+        }
+        const minMaxDiff = this._maxScale - this._minScale;
+        const currentDiff = current - this._minScale;
+        const percentage = (currentDiff / minMaxDiff) * 100;
+        this._currentScale = percentage;
+    }
+    _onInput(value) {
+        const transform = this._imageRef.$getTransform();
+        const current = transform[0];
+        const minMaxDiff = this._maxScale - this._minScale;
+        const toSet = minMaxDiff * (value / 100);
+        if (toSet === current) {
+            return;
+        }
+        this._setScale(toSet + this._minScale, false, false);
+        this._currentScale = value;
+        this._toCanvas();
+    }
+    _toCanvas() {
+        if (this._toCanvasDebounceTimeout) {
+            clearTimeout(this._toCanvasDebounceTimeout);
+        }
+        this._toCanvasDebounceTimeout = setTimeout(async () => {
+            const canvas = await this._selectionRef.$toCanvas();
+            if (this.returnType === 'canvas') {
+                this.valueChange.emit(canvas);
+                return;
+            }
+            const data = canvas.toDataURL('image/png');
+            this.valueChange.emit(data);
+        }, 200);
+    }
+    static get is() { return "p-cropper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cropper.component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cropper.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user' | 'company'",
+                    "resolved": "\"company\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the image that's being cropped"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'user'"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image to crop (url or base64)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "returnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'canvas' | 'base64'",
+                    "resolved": "\"base64\" | \"canvas\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The return type of the onchange"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "return-type",
+                "reflect": false,
+                "defaultValue": "'base64'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_loaded": {},
+            "_currentScale": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=cropper.component.js.map

package/dist/collection/components/molecules/cropper/cropper.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"cropper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/cropper/cropper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { clsx } from 'clsx';\nimport 'cropperjs';\nimport { CropperImage, CropperSelection } from 'cropperjs';\n\n@Component({\n\ttag: 'p-cropper',\n\tstyleUrl: 'cropper.component.scss',\n\tshadow: true,\n})\nexport class Cropper {\n\t/**\n\t * Variant of the image that's being cropped\n\t */\n\t@Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n\t/**\n\t * The image to crop (url or base64)\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The return type of the onchange\n\t */\n\t@Prop() returnType: 'canvas' | 'base64' = 'base64';\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\tprivate _imageRef: CropperImage;\n\tprivate _selectionRef: CropperSelection;\n\n\tprivate _maxScale = 0;\n\tprivate _minScale = 0;\n\n\tprivate _resizeDebounceTimeout: NodeJS.Timer;\n\tprivate _toCanvasDebounceTimeout: NodeJS.Timer;\n\n\t@State()\n\tprivate _loaded = false;\n\n\t@State()\n\tprivate _currentScale = 0;\n\n\t@Listen('resize', { target: 'window' })\n\tonResize() {\n\t\tif (this._resizeDebounceTimeout) {\n\t\t\tclearTimeout(this._resizeDebounceTimeout);\n\t\t}\n\n\t\tthis._resizeDebounceTimeout = setTimeout(() => {\n\t\t\tthis._selectionRef.$center();\n\t\t\tthis._imageRef.$center();\n\t\t}, 200);\n\t}\n\n\tcomponentDidLoad() {\n\t\tsetTimeout(() => {\n\t\t\tthis._loaded = true;\n\t\t}, 200);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-cropper\">\n\t\t\t\t{this._loaded && (\n\t\t\t\t\t<cropper-canvas\n\t\t\t\t\t\tclass=\"h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white\"\n\t\t\t\t\t\tonAction={() => this._onAction()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<cropper-image\n\t\t\t\t\t\t\tsrc={this.value}\n\t\t\t\t\t\t\talt=\"Picture\"\n\t\t\t\t\t\t\tref={(ref) =>\n\t\t\t\t\t\t\t\tthis._setImageRef(ref as CropperImage)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tscalable\n\t\t\t\t\t\t\tcrossorigin=\"anonymous\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-shade\n\t\t\t\t\t\t\tclass={clsx({\n\t\t\t\t\t\t\t\t'rounded-round': this.variant === 'user',\n\t\t\t\t\t\t\t\trounded: this.variant === 'company',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttheme-color=\"rgba(255, 255, 255, 0.5)\"\n\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-selection\n\t\t\t\t\t\t\tinitial-coverage=\"0.7\"\n\t\t\t\t\t\t\taspect-ratio=\"1\"\n\t\t\t\t\t\t\tref={(ref) =>\n\t\t\t\t\t\t\t\t(this._selectionRef = ref as CropperSelection)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<cropper-handle action=\"move\" plain></cropper-handle>\n\t\t\t\t\t</cropper-canvas>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1\">\n\t\t\t\t\t<p-icon variant=\"minus\" />\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"p-input w-full\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tmin=\"0\"\n\t\t\t\t\t\tmax=\"100\"\n\t\t\t\t\t\tvalue={this._currentScale}\n\t\t\t\t\t\tonInput={(ev) =>\n\t\t\t\t\t\t\tthis._onInput((ev.target as HTMLInputElement).value)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstep=\"0.5\"\n\t\t\t\t\t/>\n\t\t\t\t\t<p-icon variant=\"plus\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setImageRef(ref: CropperImage) {\n\t\tif (this._imageRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._imageRef = ref;\n\t\tthis._imageRef.$ready((image) =>\n\t\t\tsetTimeout(() => this._setInitialState(image), 200)\n\t\t);\n\t}\n\n\tprivate _setInitialState(image) {\n\t\tlet scale: number;\n\t\tif (image.naturalWidth > image.naturalHeight) {\n\t\t\t// set scale by height\n\t\t\tscale = 200 / image.naturalHeight;\n\t\t}\n\n\t\tif (image.naturalHeight >= image.naturalWidth) {\n\t\t\t// set scale by width\n\t\t\tscale = 200 / image.naturalWidth;\n\t\t}\n\n\t\tconst current = this._imageRef.$getTransform();\n\n\t\tthis._minScale = scale;\n\t\tthis._maxScale = current[0];\n\n\t\tthis._selectionRef.$resize('nw-resize', 200, 200, 1);\n\t\tthis._selectionRef.$center();\n\n\t\tthis._setScale(scale);\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _onAction() {\n\t\tthis._setCurrentScale();\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _setScale(\n\t\tscale: number,\n\t\tsetCenter: boolean = true,\n\t\tsetCurrentScale: boolean = true\n\t) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tthis._imageRef.$setTransform([\n\t\t\tscale,\n\t\t\t0,\n\t\t\t0,\n\t\t\tscale,\n\t\t\ttransform[4],\n\t\t\ttransform[5],\n\t\t]);\n\n\t\tif (setCenter) {\n\t\t\tthis._imageRef.$center();\n\t\t}\n\n\t\tif (setCurrentScale) {\n\t\t\tthis._setCurrentScale();\n\t\t}\n\t}\n\n\tprivate _setCurrentScale() {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\n\t\tif (current < this._minScale) {\n\t\t\tthis._setScale(this._minScale, true, false);\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current > this._maxScale) {\n\t\t\tthis._setScale(this._maxScale, true, false);\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._minScale) {\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._maxScale) {\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\t\tconst currentDiff = current - this._minScale;\n\n\t\tconst percentage = (currentDiff / minMaxDiff) * 100;\n\t\tthis._currentScale = percentage;\n\t}\n\n\tprivate _onInput(value) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\n\t\tconst toSet = minMaxDiff * (value / 100);\n\n\t\tif (toSet === current) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._setScale(toSet + this._minScale, false, false);\n\t\tthis._currentScale = value;\n\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _toCanvas() {\n\t\tif (this._toCanvasDebounceTimeout) {\n\t\t\tclearTimeout(this._toCanvasDebounceTimeout);\n\t\t}\n\n\t\tthis._toCanvasDebounceTimeout = setTimeout(async () => {\n\t\t\tconst canvas = await this._selectionRef.$toCanvas();\n\t\t\tif (this.returnType === 'canvas') {\n\t\t\t\tthis.valueChange.emit(canvas);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst data = canvas.toDataURL('image/png');\n\t\t\tthis.valueChange.emit(data);\n\t\t}, 200);\n\t}\n}\n"]}
+{"version":3,"file":"cropper.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/cropper/cropper.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { clsx } from 'clsx';\nimport 'cropperjs';\nimport { CropperImage, CropperSelection } from 'cropperjs';\n\n@Component({\n\ttag: 'p-cropper',\n\tstyleUrl: 'cropper.component.scss',\n\tshadow: true,\n})\nexport class Cropper {\n\t/**\n\t * Variant of the image that's being cropped\n\t */\n\t@Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n\t/**\n\t * The image to crop (url or base64)\n\t */\n\t@Prop() value: any;\n\n\t/**\n\t * The return type of the onchange\n\t */\n\t@Prop() returnType: 'canvas' | 'base64' = 'base64';\n\n\t/**\n\t * Event when the value changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tvalueChange: EventEmitter<any>;\n\n\tprivate _imageRef: CropperImage;\n\tprivate _selectionRef: CropperSelection;\n\n\tprivate _maxScale = 0;\n\tprivate _minScale = 0;\n\n\tprivate _resizeDebounceTimeout: NodeJS.Timeout | undefined;\n\tprivate _toCanvasDebounceTimeout: NodeJS.Timeout | undefined;\n\n\t@State()\n\tprivate _loaded = false;\n\n\t@State()\n\tprivate _currentScale = 0;\n\n\t@Listen('resize', { target: 'window' })\n\tonResize() {\n\t\tif (this._resizeDebounceTimeout) {\n\t\t\tclearTimeout(this._resizeDebounceTimeout);\n\t\t}\n\n\t\tthis._resizeDebounceTimeout = setTimeout(() => {\n\t\t\tthis._selectionRef.$center();\n\t\t\tthis._imageRef.$center();\n\t\t}, 200);\n\t}\n\n\tcomponentDidLoad() {\n\t\tsetTimeout(() => {\n\t\t\tthis._loaded = true;\n\t\t}, 200);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-cropper'>\n\t\t\t\t{this._loaded && (\n\t\t\t\t\t<cropper-canvas\n\t\t\t\t\t\tclass='h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white'\n\t\t\t\t\t\tonAction={() => this._onAction()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<cropper-image\n\t\t\t\t\t\t\tsrc={this.value}\n\t\t\t\t\t\t\talt='Picture'\n\t\t\t\t\t\t\tref={ref => this._setImageRef(ref as CropperImage)}\n\t\t\t\t\t\t\tscalable\n\t\t\t\t\t\t\tcrossorigin='anonymous'\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-shade\n\t\t\t\t\t\t\tclass={clsx({\n\t\t\t\t\t\t\t\t'rounded-round': this.variant === 'user',\n\t\t\t\t\t\t\t\trounded: this.variant === 'company',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\ttheme-color='rgba(255, 255, 255, 0.5)'\n\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<cropper-selection\n\t\t\t\t\t\t\tinitial-coverage='0.7'\n\t\t\t\t\t\t\taspect-ratio='1'\n\t\t\t\t\t\t\tref={ref => (this._selectionRef = ref as CropperSelection)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t<cropper-handle\n\t\t\t\t\t\t\taction='move'\n\t\t\t\t\t\t\tplain\n\t\t\t\t\t\t></cropper-handle>\n\t\t\t\t\t</cropper-canvas>\n\t\t\t\t)}\n\n\t\t\t\t<div class='flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1'>\n\t\t\t\t\t<p-icon variant='minus' />\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass='p-input w-full'\n\t\t\t\t\t\ttype='range'\n\t\t\t\t\t\tmin='0'\n\t\t\t\t\t\tmax='100'\n\t\t\t\t\t\tvalue={this._currentScale}\n\t\t\t\t\t\tonInput={ev => this._onInput((ev.target as HTMLInputElement).value)}\n\t\t\t\t\t\tstep='0.5'\n\t\t\t\t\t/>\n\t\t\t\t\t<p-icon variant='plus' />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setImageRef(ref: CropperImage) {\n\t\tif (this._imageRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._imageRef = ref;\n\t\tthis._imageRef.$ready(image =>\n\t\t\tsetTimeout(() => this._setInitialState(image), 200)\n\t\t);\n\t}\n\n\tprivate _setInitialState(image) {\n\t\tlet scale: number;\n\t\tif (image.naturalWidth > image.naturalHeight) {\n\t\t\t// set scale by height\n\t\t\tscale = 200 / image.naturalHeight;\n\t\t}\n\n\t\tif (image.naturalHeight >= image.naturalWidth) {\n\t\t\t// set scale by width\n\t\t\tscale = 200 / image.naturalWidth;\n\t\t}\n\n\t\tconst current = this._imageRef.$getTransform();\n\n\t\tthis._minScale = scale;\n\t\tthis._maxScale = current[0];\n\n\t\tthis._selectionRef.$resize('nw-resize', 200, 200, 1);\n\t\tthis._selectionRef.$center();\n\n\t\tthis._setScale(scale);\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _onAction() {\n\t\tthis._setCurrentScale();\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _setScale(\n\t\tscale: number,\n\t\tsetCenter: boolean = true,\n\t\tsetCurrentScale: boolean = true\n\t) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tthis._imageRef.$setTransform([\n\t\t\tscale,\n\t\t\t0,\n\t\t\t0,\n\t\t\tscale,\n\t\t\ttransform[4],\n\t\t\ttransform[5],\n\t\t]);\n\n\t\tif (setCenter) {\n\t\t\tthis._imageRef.$center();\n\t\t}\n\n\t\tif (setCurrentScale) {\n\t\t\tthis._setCurrentScale();\n\t\t}\n\t}\n\n\tprivate _setCurrentScale() {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\n\t\tif (current < this._minScale) {\n\t\t\tthis._setScale(this._minScale, true, false);\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current > this._maxScale) {\n\t\t\tthis._setScale(this._maxScale, true, false);\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._minScale) {\n\t\t\tthis._currentScale = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tif (current === this._maxScale) {\n\t\t\tthis._currentScale = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\t\tconst currentDiff = current - this._minScale;\n\n\t\tconst percentage = (currentDiff / minMaxDiff) * 100;\n\t\tthis._currentScale = percentage;\n\t}\n\n\tprivate _onInput(value) {\n\t\tconst transform = this._imageRef.$getTransform();\n\t\tconst current = transform[0];\n\t\tconst minMaxDiff = this._maxScale - this._minScale;\n\n\t\tconst toSet = minMaxDiff * (value / 100);\n\n\t\tif (toSet === current) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._setScale(toSet + this._minScale, false, false);\n\t\tthis._currentScale = value;\n\n\t\tthis._toCanvas();\n\t}\n\n\tprivate _toCanvas() {\n\t\tif (this._toCanvasDebounceTimeout) {\n\t\t\tclearTimeout(this._toCanvasDebounceTimeout);\n\t\t}\n\n\t\tthis._toCanvasDebounceTimeout = setTimeout(async () => {\n\t\t\tconst canvas = await this._selectionRef.$toCanvas();\n\t\t\tif (this.returnType === 'canvas') {\n\t\t\t\tthis.valueChange.emit(canvas);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst data = canvas.toDataURL('image/png');\n\t\t\tthis.valueChange.emit(data);\n\t\t}, 200);\n\t}\n}\n"]}