@paperless/core 0.1.0-alpha.114 → 0.1.0-alpha.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/dist/build/p-5b8f7a76.entry.js +1 -0
  3. package/dist/build/p-c674026d.entry.js +1 -0
  4. package/dist/build/paperless.css +15 -3
  5. package/dist/build/paperless.esm.js +1 -1
  6. package/dist/cjs/p-content-slider.cjs.entry.js +83 -58
  7. package/dist/cjs/p-modal-backdrop_5.cjs.entry.js +1 -1
  8. package/dist/collection/components/atoms/icon/icon.component.css +1 -1
  9. package/dist/collection/components/atoms/modal-backdrop/modal-backdrop.component.css +1 -1
  10. package/dist/collection/components/molecules/content-slider/content-slider.component.css +6 -2
  11. package/dist/collection/components/molecules/content-slider/content-slider.component.js +83 -57
  12. package/dist/collection/tailwind/height.js +3 -0
  13. package/dist/collection/tailwind.config.js +2 -0
  14. package/dist/components/modal-backdrop.component.js +1 -1
  15. package/dist/components/p-content-slider.js +83 -58
  16. package/dist/esm/p-content-slider.entry.js +83 -58
  17. package/dist/esm/p-modal-backdrop_5.entry.js +1 -1
  18. package/dist/index.html +1 -1
  19. package/dist/paperless/p-5b8f7a76.entry.js +1 -0
  20. package/dist/paperless/p-c674026d.entry.js +1 -0
  21. package/dist/paperless/paperless.css +14 -2
  22. package/dist/paperless/paperless.esm.js +1 -1
  23. package/dist/sw.js +1 -1
  24. package/dist/sw.js.map +1 -1
  25. package/dist/tailwind/height.js +3 -0
  26. package/dist/tailwind.config.js +2 -0
  27. package/dist/types/components/molecules/content-slider/content-slider.component.d.ts +9 -4
  28. package/package.json +2 -2
  29. package/dist/build/p-113baa35.entry.js +0 -1
  30. package/dist/build/p-9754d96b.entry.js +0 -1
  31. package/dist/paperless/p-113baa35.entry.js +0 -1
  32. package/dist/paperless/p-9754d96b.entry.js +0 -1
package/dist/collection/components/molecules/content-slider/content-slider.component.js CHANGED
@@ -20,6 +20,7 @@ export class ContentSlider {
20
20
  this._outerHeight = 0;
21
21
  this._totalWidth = 0;
22
22
  this._items = [];
23
+ this._shouldCheckLocation = false;
23
24
  this._dragging = false;
24
25
  }
25
26
  componentWillRender() {
@@ -27,6 +28,7 @@ export class ContentSlider {
27
28
  this._items = Array.from(items);
28
29
  }
29
30
  componentDidLoad() {
31
+ this._innerSliderRef.style.left = '0px';
30
32
  this._calculateWidth();
31
33
  this._calculateIndicator();
32
34
  }
@@ -40,14 +42,10 @@ export class ContentSlider {
40
42
  h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
41
43
  height: `${this._outerHeight}px`,
42
44
  }, 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) },
43
- h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref) },
45
+ h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() },
44
46
  h("slot", null))),
45
- h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
46
- }
47
- _setInnerSliderReft(ref) {
48
- this._innerSliderRef = ref;
49
- this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
50
- this._innerSliderResizeObserver.observe(this._innerSliderRef);
47
+ h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` },
48
+ h("p-slider-indicator", { active: i === this._visibleIndex })))))));
51
49
  }
52
50
  _mouseDownHandler(e) {
53
51
  var _a;
@@ -58,45 +56,45 @@ export class ContentSlider {
58
56
  if (innerSliderStyle.flexWrap === 'wrap') {
59
57
  return;
60
58
  }
61
- let x = e.x;
59
+ this._startMouseX = e.x;
62
60
  const sliderRect = this._sliderRef.getBoundingClientRect();
63
61
  if (e.type === 'touchstart') {
64
- x = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
62
+ this._startMouseX = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
65
63
  }
66
- this._startX = x - sliderRect.x - this._innerSliderRef.offsetLeft;
64
+ const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
65
+ const offsetLeft = innerSliderRect.x - sliderRect.x;
66
+ this._startX = this._startMouseX - sliderRect.x - offsetLeft;
67
+ this._lastIndex = this._visibleIndex;
67
68
  this._dragging = true;
68
69
  }
69
70
  _mouseMoveHandler(e) {
70
- var _a;
71
+ var _a, _b;
71
72
  if (!e || !this._dragging || this.disableDrag) {
72
73
  return;
73
74
  }
74
75
  e.preventDefault();
76
+ this._shouldCheckLocation = true;
75
77
  if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
76
78
  this._innerSliderRef.style.pointerEvents = 'none';
77
79
  }
78
- let x = e.offsetX;
80
+ const sliderRect = this._sliderRef.getBoundingClientRect();
81
+ let x = e.clientX - sliderRect.left;
82
+ this._lastMouseX = e.x;
79
83
  if (e.type === 'touchmove') {
80
- const sliderRect = this._sliderRef.getBoundingClientRect();
81
84
  x = ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX) - sliderRect.left;
85
+ this._lastMouseX = (_b = e.touches) === null || _b === void 0 ? void 0 : _b[0].clientX;
82
86
  }
83
87
  this._innerSliderRef.style.left = `${x - this._startX}px`;
84
88
  this._checkBoundary();
85
89
  this._calculateIndicator();
86
90
  }
87
- _checkBoundary() {
88
- let outer = this._sliderRef.getBoundingClientRect();
89
- if (parseInt(this._innerSliderRef.style.left) > 0) {
90
- this._innerSliderRef.style.left = '0px';
91
- }
92
- const maxLeft = (this._totalWidth - outer.width) * -1;
93
- if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
94
- this._innerSliderRef.style.left = `${maxLeft}px`;
95
- }
91
+ _transitionEndHandler() {
92
+ this._calculateIndicator();
96
93
  }
97
94
  mouseUpHandler() {
98
95
  this._dragging = false;
99
96
  this._innerSliderRef.style.removeProperty('pointer-events');
97
+ this._checkLocation();
100
98
  }
101
99
  resizeHandler() {
102
100
  if (this._innerSliderRef) {
@@ -105,26 +103,73 @@ export class ContentSlider {
105
103
  this._calculateIndicator();
106
104
  }
107
105
  }
106
+ _setInnerSliderReft(ref) {
107
+ this._innerSliderRef = ref;
108
+ this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
109
+ this._innerSliderResizeObserver.observe(this._innerSliderRef);
110
+ }
111
+ _scrollTo(i, manual = false) {
112
+ if (this.disableIndicatorClick && manual) {
113
+ return;
114
+ }
115
+ const el = this._items[i];
116
+ if (i === 0) {
117
+ this._innerSliderRef.style.left = '0px';
118
+ return;
119
+ }
120
+ const sliderRect = this._sliderRef.getBoundingClientRect();
121
+ const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
122
+ const elRect = el.getBoundingClientRect();
123
+ const offsetLeft = elRect.x - innerSliderRect.x;
124
+ const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
125
+ this._innerSliderRef.style.left = `-${centerOffset}px`;
126
+ this._checkBoundary();
127
+ this._calculateIndicator();
128
+ }
129
+ _checkBoundary() {
130
+ let outer = this._sliderRef.getBoundingClientRect();
131
+ if (parseInt(this._innerSliderRef.style.left) > 0) {
132
+ this._innerSliderRef.style.left = '0px';
133
+ }
134
+ const maxLeft = (this._totalWidth - outer.width) * -1;
135
+ if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
136
+ this._innerSliderRef.style.left = `${maxLeft}px`;
137
+ }
138
+ }
108
139
  _calculateIndicator() {
109
- if (this._indicatorTimeout) {
110
- clearTimeout(this._indicatorTimeout);
111
- this._indicatorTimeout = null;
140
+ for (let i = 0; i < this._items.length; i++) {
141
+ const item = this._items[i];
142
+ const visible = this._isVisible(item);
143
+ if (visible) {
144
+ this._visibleIndex = i;
145
+ }
146
+ if (i === 0 && visible) {
147
+ break;
148
+ }
149
+ }
150
+ }
151
+ _checkLocation() {
152
+ var _a;
153
+ if (!this._shouldCheckLocation) {
154
+ return;
155
+ }
156
+ let scrollToIndex = null;
157
+ if (this._lastIndex !== this._visibleIndex) {
158
+ scrollToIndex = this._visibleIndex;
112
159
  }
113
- this._indicatorTimeout = setTimeout(() => {
114
- for (let i = 0; i < this._items.length; i++) {
115
- const item = this._items[i];
116
- const visible = this._isVisible(item);
117
- if (visible) {
118
- this._visibleIndex = i;
119
- }
120
- if (i === 0 && visible) {
121
- break;
122
- }
160
+ if (this._lastIndex === this._visibleIndex) {
161
+ if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
162
+ scrollToIndex = this._lastIndex - 1;
123
163
  }
124
- if (!this.disableAutoCenter) {
125
- this._scrollTo(this._visibleIndex, false);
164
+ if (this._lastMouseX < this._startMouseX &&
165
+ this._lastIndex !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
166
+ scrollToIndex = this._lastIndex + 1;
126
167
  }
127
- }, 200);
168
+ }
169
+ if (scrollToIndex !== null) {
170
+ this._shouldCheckLocation = false;
171
+ setTimeout(() => this._scrollTo(scrollToIndex), 100);
172
+ }
128
173
  }
129
174
  _isVisible(el) {
130
175
  if (!this._el || !el) {
@@ -138,25 +183,6 @@ export class ContentSlider {
138
183
  elRect.left + elRect.width / 2 >= sliderRect.left &&
139
184
  elRect.left + elRect.width / 2 <= sliderRect.right));
140
185
  }
141
- _scrollTo(i, calculateIndicator = true) {
142
- if (this.disableIndicatorClick && calculateIndicator) {
143
- return;
144
- }
145
- const el = this._items[i];
146
- if (i === 0) {
147
- this._innerSliderRef.style.left = '0px';
148
- this._calculateIndicator();
149
- return;
150
- }
151
- const sliderRect = this._sliderRef.getBoundingClientRect();
152
- const elRect = el.getBoundingClientRect();
153
- const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
154
- this._innerSliderRef.style.left = `-${centerOffset}px`;
155
- this._checkBoundary();
156
- if (!calculateIndicator) {
157
- this._calculateIndicator();
158
- }
159
- }
160
186
  _calculateWidth() {
161
187
  let totalWidth = 0;
162
188
  for (let item of this._items) {
package/dist/collection/tailwind/height.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = {
2
+ unset: 'unset',
3
+ };
package/dist/collection/tailwind.config.js CHANGED
@@ -9,6 +9,7 @@ const zIndex = require('./tailwind/z-index');
9
9
  const animation = require('./tailwind/animation');
10
10
  const screens = require('./tailwind/screens');
11
11
  const width = require('./tailwind/width');
12
+ const height = require('./tailwind/height');
12
13
  const spacing = require('./tailwind/spacing');
13
14
 
14
15
  module.exports = {
@@ -28,6 +29,7 @@ module.exports = {
28
29
  zIndex,
29
30
  screens,
30
31
  width,
32
+ height,
31
33
  spacing,
32
34
  },
33
35
  },
package/dist/components/modal-backdrop.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const modalBackdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.h-screen{height:100vh!important}.w-screen{width:100vw!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.backdrop-blur-xs{--tw-backdrop-blur:blur(2px)!important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}:host{--tw-backdrop-blur:blur(2px);align-items:flex-end;-webkit-animation:fadeIn .2s ease-in-out;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:rgba(81,83,107,.5);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:500}@media (min-width:40rem){:host{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host{align-items:center;padding:4rem}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}";
3
+ const modalBackdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.h-full{height:100%!important}.w-full{width:100%!important}.items-end{align-items:flex-end!important}.justify-center{justify-content:center!important}.backdrop-blur-xs{--tw-backdrop-blur:blur(2px)!important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}:host{--tw-backdrop-blur:blur(2px);align-items:flex-end;-webkit-animation:fadeIn .2s ease-in-out;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:rgba(81,83,107,.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:500}@media (min-width:40rem){:host{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host{align-items:center;padding:4rem}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}";
4
4
 
5
5
  const ModalBackdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/p-content-slider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './slider-indicator.component.js';
3
3
 
4
- const contentSliderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-grab{cursor:-webkit-grab!important;cursor:grab!important}.cursor-grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!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}.gap-4{gap:1rem!important}.gap-2{gap:.5rem!important}.overflow-visible{overflow:visible!important}.p-16{padding:4rem!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;margin:-4rem;overflow:hidden;padding:4rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:-webkit-grab;cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:-webkit-grabbing;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{align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}@media (min-width:40rem){:host .slider .inner-slider{gap:1rem}}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap}}: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:45%}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:0}}:host .indicator{align-items:center;display:flex;gap:.5rem;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
4
+ const contentSliderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.my-3{margin-bottom:.75rem!important;margin-top:.75rem!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-grab{cursor:-webkit-grab!important;cursor:grab!important}.cursor-grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!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}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!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:-webkit-grab;cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:-webkit-grabbing;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{align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;transition-duration:.15s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}@media (min-width:40rem){:host .slider .inner-slider{gap:1rem}}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap}}: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:45%}}@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-bottom:.75rem;margin-top:.75rem;padding:.25rem}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
5
5
 
6
6
  const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -27,6 +27,7 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
27
27
  this._outerHeight = 0;
28
28
  this._totalWidth = 0;
29
29
  this._items = [];
30
+ this._shouldCheckLocation = false;
30
31
  this._dragging = false;
31
32
  }
32
33
  componentWillRender() {
@@ -34,6 +35,7 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
34
35
  this._items = Array.from(items);
35
36
  }
36
37
  componentDidLoad() {
38
+ this._innerSliderRef.style.left = '0px';
37
39
  this._calculateWidth();
38
40
  this._calculateIndicator();
39
41
  }
@@ -45,12 +47,7 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
45
47
  render() {
46
48
  return (h(Host, { class: "p-content-slider" }, h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
47
49
  height: `${this._outerHeight}px`,
48
- }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref) }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
49
- }
50
- _setInnerSliderReft(ref) {
51
- this._innerSliderRef = ref;
52
- this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
53
- this._innerSliderResizeObserver.observe(this._innerSliderRef);
50
+ }, ref: (el) => (this._sliderRef = el), onMouseDown: (e) => this._mouseDownHandler(e), onTouchStart: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e), onTouchMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("p-slider-indicator", { active: i === this._visibleIndex })))))));
54
51
  }
55
52
  _mouseDownHandler(e) {
56
53
  var _a;
@@ -61,45 +58,45 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
61
58
  if (innerSliderStyle.flexWrap === 'wrap') {
62
59
  return;
63
60
  }
64
- let x = e.x;
61
+ this._startMouseX = e.x;
65
62
  const sliderRect = this._sliderRef.getBoundingClientRect();
66
63
  if (e.type === 'touchstart') {
67
- x = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
64
+ this._startMouseX = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX;
68
65
  }
69
- this._startX = x - sliderRect.x - this._innerSliderRef.offsetLeft;
66
+ const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
67
+ const offsetLeft = innerSliderRect.x - sliderRect.x;
68
+ this._startX = this._startMouseX - sliderRect.x - offsetLeft;
69
+ this._lastIndex = this._visibleIndex;
70
70
  this._dragging = true;
71
71
  }
72
72
  _mouseMoveHandler(e) {
73
- var _a;
73
+ var _a, _b;
74
74
  if (!e || !this._dragging || this.disableDrag) {
75
75
  return;
76
76
  }
77
77
  e.preventDefault();
78
+ this._shouldCheckLocation = true;
78
79
  if (this._innerSliderRef.style.getPropertyValue('pointer-events') === '') {
79
80
  this._innerSliderRef.style.pointerEvents = 'none';
80
81
  }
81
- let x = e.offsetX;
82
+ const sliderRect = this._sliderRef.getBoundingClientRect();
83
+ let x = e.clientX - sliderRect.left;
84
+ this._lastMouseX = e.x;
82
85
  if (e.type === 'touchmove') {
83
- const sliderRect = this._sliderRef.getBoundingClientRect();
84
86
  x = ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0].clientX) - sliderRect.left;
87
+ this._lastMouseX = (_b = e.touches) === null || _b === void 0 ? void 0 : _b[0].clientX;
85
88
  }
86
89
  this._innerSliderRef.style.left = `${x - this._startX}px`;
87
90
  this._checkBoundary();
88
91
  this._calculateIndicator();
89
92
  }
90
- _checkBoundary() {
91
- let outer = this._sliderRef.getBoundingClientRect();
92
- if (parseInt(this._innerSliderRef.style.left) > 0) {
93
- this._innerSliderRef.style.left = '0px';
94
- }
95
- const maxLeft = (this._totalWidth - outer.width) * -1;
96
- if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
97
- this._innerSliderRef.style.left = `${maxLeft}px`;
98
- }
93
+ _transitionEndHandler() {
94
+ this._calculateIndicator();
99
95
  }
100
96
  mouseUpHandler() {
101
97
  this._dragging = false;
102
98
  this._innerSliderRef.style.removeProperty('pointer-events');
99
+ this._checkLocation();
103
100
  }
104
101
  resizeHandler() {
105
102
  if (this._innerSliderRef) {
@@ -108,26 +105,73 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
108
105
  this._calculateIndicator();
109
106
  }
110
107
  }
108
+ _setInnerSliderReft(ref) {
109
+ this._innerSliderRef = ref;
110
+ this._innerSliderResizeObserver = new ResizeObserver(() => this._calculateHeight());
111
+ this._innerSliderResizeObserver.observe(this._innerSliderRef);
112
+ }
113
+ _scrollTo(i, manual = false) {
114
+ if (this.disableIndicatorClick && manual) {
115
+ return;
116
+ }
117
+ const el = this._items[i];
118
+ if (i === 0) {
119
+ this._innerSliderRef.style.left = '0px';
120
+ return;
121
+ }
122
+ const sliderRect = this._sliderRef.getBoundingClientRect();
123
+ const innerSliderRect = this._innerSliderRef.getBoundingClientRect();
124
+ const elRect = el.getBoundingClientRect();
125
+ const offsetLeft = elRect.x - innerSliderRect.x;
126
+ const centerOffset = offsetLeft + elRect.width / 2 - sliderRect.width / 2;
127
+ this._innerSliderRef.style.left = `-${centerOffset}px`;
128
+ this._checkBoundary();
129
+ this._calculateIndicator();
130
+ }
131
+ _checkBoundary() {
132
+ let outer = this._sliderRef.getBoundingClientRect();
133
+ if (parseInt(this._innerSliderRef.style.left) > 0) {
134
+ this._innerSliderRef.style.left = '0px';
135
+ }
136
+ const maxLeft = (this._totalWidth - outer.width) * -1;
137
+ if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
138
+ this._innerSliderRef.style.left = `${maxLeft}px`;
139
+ }
140
+ }
111
141
  _calculateIndicator() {
112
- if (this._indicatorTimeout) {
113
- clearTimeout(this._indicatorTimeout);
114
- this._indicatorTimeout = null;
115
- }
116
- this._indicatorTimeout = setTimeout(() => {
117
- for (let i = 0; i < this._items.length; i++) {
118
- const item = this._items[i];
119
- const visible = this._isVisible(item);
120
- if (visible) {
121
- this._visibleIndex = i;
122
- }
123
- if (i === 0 && visible) {
124
- break;
125
- }
142
+ for (let i = 0; i < this._items.length; i++) {
143
+ const item = this._items[i];
144
+ const visible = this._isVisible(item);
145
+ if (visible) {
146
+ this._visibleIndex = i;
126
147
  }
127
- if (!this.disableAutoCenter) {
128
- this._scrollTo(this._visibleIndex, false);
148
+ if (i === 0 && visible) {
149
+ break;
129
150
  }
130
- }, 200);
151
+ }
152
+ }
153
+ _checkLocation() {
154
+ var _a;
155
+ if (!this._shouldCheckLocation) {
156
+ return;
157
+ }
158
+ let scrollToIndex = null;
159
+ if (this._lastIndex !== this._visibleIndex) {
160
+ scrollToIndex = this._visibleIndex;
161
+ }
162
+ if (this._lastIndex === this._visibleIndex) {
163
+ if (this._lastMouseX > this._startMouseX && this._lastIndex !== 0) {
164
+ scrollToIndex = this._lastIndex - 1;
165
+ }
166
+ if (this._lastMouseX < this._startMouseX &&
167
+ this._lastIndex !== ((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) - 1) {
168
+ scrollToIndex = this._lastIndex + 1;
169
+ }
170
+ }
171
+ if (scrollToIndex !== null) {
172
+ this._shouldCheckLocation = false;
173
+ setTimeout(() => this._scrollTo(scrollToIndex), 100);
174
+ }
131
175
  }
132
176
  _isVisible(el) {
133
177
  if (!this._el || !el) {
@@ -141,25 +185,6 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
141
185
  elRect.left + elRect.width / 2 >= sliderRect.left &&
142
186
  elRect.left + elRect.width / 2 <= sliderRect.right));
143
187
  }
144
- _scrollTo(i, calculateIndicator = true) {
145
- if (this.disableIndicatorClick && calculateIndicator) {
146
- return;
147
- }
148
- const el = this._items[i];
149
- if (i === 0) {
150
- this._innerSliderRef.style.left = '0px';
151
- this._calculateIndicator();
152
- return;
153
- }
154
- const sliderRect = this._sliderRef.getBoundingClientRect();
155
- const elRect = el.getBoundingClientRect();
156
- const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
157
- this._innerSliderRef.style.left = `-${centerOffset}px`;
158
- this._checkBoundary();
159
- if (!calculateIndicator) {
160
- this._calculateIndicator();
161
- }
162
- }
163
188
  _calculateWidth() {
164
189
  let totalWidth = 0;
165
190
  for (let item of this._items) {