https://stridenavigation.com/chunk-VHYIHVBA.js

1import {
2  Host,
3  createEvent,
4  getElement,
5  h,
6  registerInstance
7} from "./chunk-SRPSML5O.js";
8import {
9  __async
10} from "./chunk-CO64IJQE.js";
11
12// node_modules/@ionic/core/dist/esm/ion-segment-view.entry.js
13var segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
14var IonSegmentViewIosStyle0 = segmentViewIosCss;
15var segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
16var IonSegmentViewMdStyle0 = segmentViewMdCss;
17var SegmentView = class {
18  constructor(hostRef) {
19    registerInstance(this, hostRef);
20    this.ionSegmentViewScroll = createEvent(this, "ionSegmentViewScroll", 7);
21    this.scrollEndTimeout = null;
22    this.isTouching = false;
23    this.disabled = false;
24    this.isManualScroll = void 0;
25  }
26  handleScroll(ev) {
27    var _a;
28    const {
29      scrollLeft,
30      scrollWidth,
31      clientWidth
32    } = ev.target;
33    const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
34    this.ionSegmentViewScroll.emit({
35      scrollRatio,
36      isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true
37    });
38    this.resetScrollEndTimeout();
39  }
40  /**
41   * Handle touch start event to know when the user is actively dragging the segment view.
42   */
43  handleScrollStart() {
44    if (this.scrollEndTimeout) {
45      clearTimeout(this.scrollEndTimeout);
46      this.scrollEndTimeout = null;
47    }
48    this.isTouching = true;
49  }
50  /**
51   * Handle touch end event to know when the user is no longer dragging the segment view.
52   */
53  handleTouchEnd() {
54    this.isTouching = false;
55  }
56  /**
57   * Reset the scroll end detection timer. This is called on every scroll event.
58   */
59  resetScrollEndTimeout() {
60    if (this.scrollEndTimeout) {
61      clearTimeout(this.scrollEndTimeout);
62      this.scrollEndTimeout = null;
63    }
64    this.scrollEndTimeout = setTimeout(
65      () => {
66        this.checkForScrollEnd();
67      },
68      // Setting this to a lower value may result in inconsistencies in behavior
69      // across browsers (particularly Firefox).
70      // Ideally, all of this logic is removed once the scroll end event is
71      // supported on all browsers (https://caniuse.com/?search=scrollend)
72      100
73    );
74  }
75  /**
76   * Check if the scroll has ended and the user is not actively touching.
77   * If the conditions are met (active content is enabled and no active touch),
78   * reset the scroll position and emit the scroll end event.
79   */
80  checkForScrollEnd() {
81    if (!this.isTouching) {
82      this.isManualScroll = void 0;
83    }
84  }
85  /**
86   * @internal
87   *
88   * This method is used to programmatically set the displayed segment content
89   * in the segment view. Calling this method will update the `value` of the
90   * corresponding segment button.
91   *
92   * @param id: The id of the segment content to display.
93   * @param smoothScroll: Whether to animate the scroll transition.
94   */
95  setContent(id, smoothScroll = true) {
96    return __async(this, null, function* () {
97      const contents = this.getSegmentContents();
98      const index = contents.findIndex((content) => content.id === id);
99      if (index === -1) return;
100      this.isManualScroll = false;
101      this.resetScrollEndTimeout();
102      const contentWidth = this.el.offsetWidth;
103      this.el.scrollTo({
104        top: 0,
105        left: index * contentWidth,
106        behavior: smoothScroll ? "smooth" : "instant"
107      });
108    });
109  }
110  getSegmentContents() {
111    return Array.from(this.el.querySelectorAll("ion-segment-content"));
112  }
113  render() {
114    const {
115      disabled,
116      isManualScroll
117    } = this;
118    return h(Host, {
119      key: "fa528d2d9ae0f00fc3067defe2a047dce77c814a",
120      class: {
121        "segment-view-disabled": disabled,
122        "segment-view-scroll-disabled": isManualScroll === false
123      }
124    }, h("slot", {
125      key: "74dc8b4d073caeff1bab272d11b9ea3e1a215954"
126    }));
127  }
128  get el() {
129    return getElement(this);
130  }
131};
132SegmentView.style = {
133  ios: IonSegmentViewIosStyle0,
134  md: IonSegmentViewMdStyle0
135};
136export {
137  SegmentView as ion_segment_view
138};