@ionic/core 7.5.7 → 7.5.8-dev.11701374238.101cd738

package/dist/collection/components/segment/segment.js

@@ -10,654 +10,654 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Segment {
-  constructor() {
-    this.onClick = (ev) => {
-      const current = ev.target;
-      const previous = this.checked;
-      // If the current element is a segment then that means
-      // the user tried to swipe to a segment button and
-      // click a segment button at the same time so we should
-      // not update the checked segment button
-      if (current.tagName === 'ION-SEGMENT') {
-        return;
-      }
-      this.value = current.value;
-      if (current !== previous) {
-        this.emitValueChange();
-      }
-      if (this.scrollable || !this.swipeGesture) {
-        if (previous) {
-          this.checkButton(previous, current);
-        }
-        else {
-          this.setCheckedClasses();
-        }
-      }
-    };
-    this.getSegmentButton = (selector) => {
-      var _a, _b;
-      const buttons = this.getButtons().filter((button) => !button.disabled);
-      const currIndex = buttons.findIndex((button) => button === document.activeElement);
-      switch (selector) {
-        case 'first':
-          return buttons[0];
-        case 'last':
-          return buttons[buttons.length - 1];
-        case 'next':
-          return (_a = buttons[currIndex + 1]) !== null && _a !== void 0 ? _a : buttons[0];
-        case 'previous':
-          return (_b = buttons[currIndex - 1]) !== null && _b !== void 0 ? _b : buttons[buttons.length - 1];
-        default:
-          return null;
-      }
-    };
-    this.activated = false;
-    this.color = undefined;
-    this.disabled = false;
-    this.scrollable = false;
-    this.swipeGesture = true;
-    this.value = undefined;
-    this.selectOnFocus = false;
-  }
-  colorChanged(value, oldValue) {
-    /**
-     * If color is set after not having
-     * previously been set (or vice versa),
-     * we need to emit style so the segment-buttons
-     * can apply their color classes properly.
-     */
-    if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
-      this.emitStyle();
-    }
-  }
-  swipeGestureChanged() {
-    this.gestureChanged();
-  }
-  valueChanged(value) {
-    /**
-     * `ionSelect` is emitted every time the value changes (internal or external changes).
-     * Used by `ion-segment-button` to determine if the button should be checked.
-     */
-    this.ionSelect.emit({ value });
-    this.scrollActiveButtonIntoView();
-  }
-  disabledChanged() {
-    this.gestureChanged();
-    const buttons = this.getButtons();
-    for (const button of buttons) {
-      button.disabled = this.disabled;
-    }
-  }
-  gestureChanged() {
-    if (this.gesture) {
-      this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
-    }
-  }
-  connectedCallback() {
-    this.emitStyle();
-  }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  async componentDidLoad() {
-    this.setCheckedClasses();
-    /**
-     * We need to wait for the buttons to all be rendered
-     * before we can scroll.
-     */
-    raf(() => {
-      /**
-       * When the segment loads for the first
-       * time we just want to snap the active button into
-       * place instead of scroll. Smooth scrolling should only
-       * happen when the user interacts with the segment.
-       */
-      this.scrollActiveButtonIntoView(false);
-    });
-    this.gesture = (await import('../../utils/gesture')).createGesture({
-      el: this.el,
-      gestureName: 'segment',
-      gesturePriority: 100,
-      threshold: 0,
-      passive: false,
-      onStart: (ev) => this.onStart(ev),
-      onMove: (ev) => this.onMove(ev),
-      onEnd: (ev) => this.onEnd(ev),
-    });
-    this.gestureChanged();
-    if (this.disabled) {
-      this.disabledChanged();
-    }
-  }
-  onStart(detail) {
-    this.valueBeforeGesture = this.value;
-    this.activate(detail);
-  }
-  onMove(detail) {
-    this.setNextIndex(detail);
-  }
-  onEnd(detail) {
-    this.setActivated(false);
-    this.setNextIndex(detail, true);
-    detail.event.stopImmediatePropagation();
-    const value = this.value;
-    if (value !== undefined) {
-      if (this.valueBeforeGesture !== value) {
-        this.emitValueChange();
-      }
-    }
-    this.valueBeforeGesture = undefined;
-  }
-  /**
-   * Emits an `ionChange` event.
-   *
-   * This API should be called for user committed changes.
-   * This API should not be used for external value changes.
-   */
-  emitValueChange() {
-    const { value } = this;
-    this.ionChange.emit({ value });
-  }
-  getButtons() {
-    return Array.from(this.el.querySelectorAll('ion-segment-button'));
-  }
-  get checked() {
-    return this.getButtons().find((button) => button.value === this.value);
-  }
-  /*
-   * Activate both the segment and the buttons
-   * due to a bug with ::slotted in Safari
-   */
-  setActivated(activated) {
-    const buttons = this.getButtons();
-    buttons.forEach((button) => {
-      if (activated) {
-        button.classList.add('segment-button-activated');
-      }
-      else {
-        button.classList.remove('segment-button-activated');
-      }
-    });
-    this.activated = activated;
-  }
-  activate(detail) {
-    const clicked = detail.event.target;
-    const buttons = this.getButtons();
-    const checked = buttons.find((button) => button.value === this.value);
-    // Make sure we are only checking for activation on a segment button
-    // since disabled buttons will get the click on the segment
-    if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
-      return;
-    }
-    // If there are no checked buttons, set the current button to checked
-    if (!checked) {
-      this.value = clicked.value;
-      this.setCheckedClasses();
-    }
-    // If the gesture began on the clicked button with the indicator
-    // then we should activate the indicator
-    if (this.value === clicked.value) {
-      this.setActivated(true);
-    }
-  }
-  getIndicator(button) {
-    const root = button.shadowRoot || button;
-    return root.querySelector('.segment-button-indicator');
-  }
-  checkButton(previous, current) {
-    const previousIndicator = this.getIndicator(previous);
-    const currentIndicator = this.getIndicator(current);
-    if (previousIndicator === null || currentIndicator === null) {
-      return;
-    }
-    const previousClientRect = previousIndicator.getBoundingClientRect();
-    const currentClientRect = currentIndicator.getBoundingClientRect();
-    const widthDelta = previousClientRect.width / currentClientRect.width;
-    const xPosition = previousClientRect.left - currentClientRect.left;
-    // Scale the indicator width to match the previous indicator width
-    // and translate it on top of the previous indicator
-    const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
-    writeTask(() => {
-      // Remove the transition before positioning on top of the previous indicator
-      currentIndicator.classList.remove('segment-button-indicator-animated');
-      currentIndicator.style.setProperty('transform', transform);
-      // Force a repaint to ensure the transform happens
-      currentIndicator.getBoundingClientRect();
-      // Add the transition to move the indicator into place
-      currentIndicator.classList.add('segment-button-indicator-animated');
-      // Remove the transform to slide the indicator back to the button clicked
-      currentIndicator.style.setProperty('transform', '');
-    });
-    this.value = current.value;
-    this.setCheckedClasses();
-  }
-  setCheckedClasses() {
-    const buttons = this.getButtons();
-    const index = buttons.findIndex((button) => button.value === this.value);
-    const next = index + 1;
-    for (const button of buttons) {
-      button.classList.remove('segment-button-after-checked');
-    }
-    if (next < buttons.length) {
-      buttons[next].classList.add('segment-button-after-checked');
-    }
-  }
-  scrollActiveButtonIntoView(smoothScroll = true) {
-    const { scrollable, value, el } = this;
-    if (scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        const scrollContainerBox = el.getBoundingClientRect();
-        const activeButtonBox = activeButton.getBoundingClientRect();
+    constructor() {
+        this.onClick = (ev) => {
+            const current = ev.target;
+            const previous = this.checked;
+            // If the current element is a segment then that means
+            // the user tried to swipe to a segment button and
+            // click a segment button at the same time so we should
+            // not update the checked segment button
+            if (current.tagName === 'ION-SEGMENT') {
+                return;
+            }
+            this.value = current.value;
+            if (current !== previous) {
+                this.emitValueChange();
+            }
+            if (this.scrollable || !this.swipeGesture) {
+                if (previous) {
+                    this.checkButton(previous, current);
+                }
+                else {
+                    this.setCheckedClasses();
+                }
+            }
+        };
+        this.getSegmentButton = (selector) => {
+            var _a, _b;
+            const buttons = this.getButtons().filter((button) => !button.disabled);
+            const currIndex = buttons.findIndex((button) => button === document.activeElement);
+            switch (selector) {
+                case 'first':
+                    return buttons[0];
+                case 'last':
+                    return buttons[buttons.length - 1];
+                case 'next':
+                    return (_a = buttons[currIndex + 1]) !== null && _a !== void 0 ? _a : buttons[0];
+                case 'previous':
+                    return (_b = buttons[currIndex - 1]) !== null && _b !== void 0 ? _b : buttons[buttons.length - 1];
+                default:
+                    return null;
+            }
+        };
+        this.activated = false;
+        this.color = undefined;
+        this.disabled = false;
+        this.scrollable = false;
+        this.swipeGesture = true;
+        this.value = undefined;
+        this.selectOnFocus = false;
+    }
+    colorChanged(value, oldValue) {
         /**
-         * Subtract the active button x position from the scroll
-         * container x position. This will give us the x position
-         * of the active button within the scroll container.
+         * If color is set after not having
+         * previously been set (or vice versa),
+         * we need to emit style so the segment-buttons
+         * can apply their color classes properly.
          */
-        const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x;
+        if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
+            this.emitStyle();
+        }
+    }
+    swipeGestureChanged() {
+        this.gestureChanged();
+    }
+    valueChanged(value) {
         /**
-         * If we just used activeButtonLeft, then the active button
-         * would be aligned with the left edge of the scroll container.
-         * Instead, we want the segment button to be centered. As a result,
-         * we subtract half of the scroll container width. This will position
-         * the left edge of the active button at the midpoint of the scroll container.
-         * We then add half of the active button width. This will position the active
-         * button such that the midpoint of the active button is at the midpoint of the
-         * scroll container.
+         * `ionSelect` is emitted every time the value changes (internal or external changes).
+         * Used by `ion-segment-button` to determine if the button should be checked.
          */
-        const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+        this.ionSelect.emit({ value });
+        this.scrollActiveButtonIntoView();
+    }
+    disabledChanged() {
+        this.gestureChanged();
+        const buttons = this.getButtons();
+        for (const button of buttons) {
+            button.disabled = this.disabled;
+        }
+    }
+    gestureChanged() {
+        if (this.gesture) {
+            this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
+        }
+    }
+    connectedCallback() {
+        this.emitStyle();
+    }
+    componentWillLoad() {
+        this.emitStyle();
+    }
+    async componentDidLoad() {
+        this.setCheckedClasses();
         /**
-         * We intentionally use scrollBy here instead of scrollIntoView
-         * to avoid a WebKit bug where accelerated animations break
-         * when using scrollIntoView. Using scrollIntoView will cause the
-         * segment container to jump during the transition and then snap into place.
-         * This is because scrollIntoView can potentially cause parent element
-         * containers to also scroll. scrollBy does not have this same behavior, so
-         * we use this API instead.
-         *
-         * Note that if there is not enough scrolling space to center the element
-         * within the scroll container, the browser will attempt
-         * to center by as much as it can.
+         * We need to wait for the buttons to all be rendered
+         * before we can scroll.
          */
-        el.scrollBy({
-          top: 0,
-          left: centeredX,
-          behavior: smoothScroll ? 'smooth' : 'instant',
+        raf(() => {
+            /**
+             * When the segment loads for the first
+             * time we just want to snap the active button into
+             * place instead of scroll. Smooth scrolling should only
+             * happen when the user interacts with the segment.
+             */
+            this.scrollActiveButtonIntoView(false);
+        });
+        this.gesture = (await import('../../utils/gesture')).createGesture({
+            el: this.el,
+            gestureName: 'segment',
+            gesturePriority: 100,
+            threshold: 0,
+            passive: false,
+            onStart: (ev) => this.onStart(ev),
+            onMove: (ev) => this.onMove(ev),
+            onEnd: (ev) => this.onEnd(ev),
         });
-      }
-    }
-  }
-  setNextIndex(detail, isEnd = false) {
-    const rtl = isRTL(this.el);
-    const activated = this.activated;
-    const buttons = this.getButtons();
-    const index = buttons.findIndex((button) => button.value === this.value);
-    const previous = buttons[index];
-    let current;
-    let nextIndex;
-    if (index === -1) {
-      return;
-    }
-    // Get the element that the touch event started on in case
-    // it was the checked button, then we will move the indicator
-    const rect = previous.getBoundingClientRect();
-    const left = rect.left;
-    const width = rect.width;
-    // Get the element that the gesture is on top of based on the currentX of the
-    // gesture event and the Y coordinate of the starting element, since the gesture
-    // can move up and down off of the segment
-    const currentX = detail.currentX;
-    const previousY = rect.top + rect.height / 2;
+        this.gestureChanged();
+        if (this.disabled) {
+            this.disabledChanged();
+        }
+    }
+    onStart(detail) {
+        this.valueBeforeGesture = this.value;
+        this.activate(detail);
+    }
+    onMove(detail) {
+        this.setNextIndex(detail);
+    }
+    onEnd(detail) {
+        this.setActivated(false);
+        this.setNextIndex(detail, true);
+        detail.event.stopImmediatePropagation();
+        const value = this.value;
+        if (value !== undefined) {
+            if (this.valueBeforeGesture !== value) {
+                this.emitValueChange();
+            }
+        }
+        this.valueBeforeGesture = undefined;
+    }
     /**
-     * Segment can be used inside the shadow dom
-     * so doing document.elementFromPoint would never
-     * return a segment button in that instance.
-     * We use getRootNode to which will return the parent
-     * shadow root if used inside a shadow component and
-     * returns document otherwise.
+     * Emits an `ionChange` event.
+     *
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
      */
-    const root = this.el.getRootNode();
-    const nextEl = root.elementFromPoint(currentX, previousY);
-    const decreaseIndex = rtl ? currentX > left + width : currentX < left;
-    const increaseIndex = rtl ? currentX < left : currentX > left + width;
-    // If the indicator is currently activated then we have started the gesture
-    // on top of the checked button so we need to slide the indicator
-    // by checking the button next to it as we move
-    if (activated && !isEnd) {
-      // Decrease index, move left in LTR & right in RTL
-      if (decreaseIndex) {
-        const newIndex = index - 1;
-        if (newIndex >= 0) {
-          nextIndex = newIndex;
+    emitValueChange() {
+        const { value } = this;
+        this.ionChange.emit({ value });
+    }
+    getButtons() {
+        return Array.from(this.el.querySelectorAll('ion-segment-button'));
+    }
+    get checked() {
+        return this.getButtons().find((button) => button.value === this.value);
+    }
+    /*
+     * Activate both the segment and the buttons
+     * due to a bug with ::slotted in Safari
+     */
+    setActivated(activated) {
+        const buttons = this.getButtons();
+        buttons.forEach((button) => {
+            if (activated) {
+                button.classList.add('segment-button-activated');
+            }
+            else {
+                button.classList.remove('segment-button-activated');
+            }
+        });
+        this.activated = activated;
+    }
+    activate(detail) {
+        const clicked = detail.event.target;
+        const buttons = this.getButtons();
+        const checked = buttons.find((button) => button.value === this.value);
+        // Make sure we are only checking for activation on a segment button
+        // since disabled buttons will get the click on the segment
+        if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
+            return;
         }
-        // Increase index, moves right in LTR & left in RTL
-      }
-      else if (increaseIndex) {
-        if (activated && !isEnd) {
-          const newIndex = index + 1;
-          if (newIndex < buttons.length) {
-            nextIndex = newIndex;
-          }
+        // If there are no checked buttons, set the current button to checked
+        if (!checked) {
+            this.value = clicked.value;
+            this.setCheckedClasses();
+        }
+        // If the gesture began on the clicked button with the indicator
+        // then we should activate the indicator
+        if (this.value === clicked.value) {
+            this.setActivated(true);
+        }
+    }
+    getIndicator(button) {
+        const root = button.shadowRoot || button;
+        return root.querySelector('.segment-button-indicator');
+    }
+    checkButton(previous, current) {
+        const previousIndicator = this.getIndicator(previous);
+        const currentIndicator = this.getIndicator(current);
+        if (previousIndicator === null || currentIndicator === null) {
+            return;
+        }
+        const previousClientRect = previousIndicator.getBoundingClientRect();
+        const currentClientRect = currentIndicator.getBoundingClientRect();
+        const widthDelta = previousClientRect.width / currentClientRect.width;
+        const xPosition = previousClientRect.left - currentClientRect.left;
+        // Scale the indicator width to match the previous indicator width
+        // and translate it on top of the previous indicator
+        const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+        writeTask(() => {
+            // Remove the transition before positioning on top of the previous indicator
+            currentIndicator.classList.remove('segment-button-indicator-animated');
+            currentIndicator.style.setProperty('transform', transform);
+            // Force a repaint to ensure the transform happens
+            currentIndicator.getBoundingClientRect();
+            // Add the transition to move the indicator into place
+            currentIndicator.classList.add('segment-button-indicator-animated');
+            // Remove the transform to slide the indicator back to the button clicked
+            currentIndicator.style.setProperty('transform', '');
+        });
+        this.value = current.value;
+        this.setCheckedClasses();
+    }
+    setCheckedClasses() {
+        const buttons = this.getButtons();
+        const index = buttons.findIndex((button) => button.value === this.value);
+        const next = index + 1;
+        for (const button of buttons) {
+            button.classList.remove('segment-button-after-checked');
+        }
+        if (next < buttons.length) {
+            buttons[next].classList.add('segment-button-after-checked');
+        }
+    }
+    scrollActiveButtonIntoView(smoothScroll = true) {
+        const { scrollable, value, el } = this;
+        if (scrollable) {
+            const buttons = this.getButtons();
+            const activeButton = buttons.find((button) => button.value === value);
+            if (activeButton !== undefined) {
+                const scrollContainerBox = el.getBoundingClientRect();
+                const activeButtonBox = activeButton.getBoundingClientRect();
+                /**
+                 * Subtract the active button x position from the scroll
+                 * container x position. This will give us the x position
+                 * of the active button within the scroll container.
+                 */
+                const activeButtonLeft = activeButtonBox.x - scrollContainerBox.x;
+                /**
+                 * If we just used activeButtonLeft, then the active button
+                 * would be aligned with the left edge of the scroll container.
+                 * Instead, we want the segment button to be centered. As a result,
+                 * we subtract half of the scroll container width. This will position
+                 * the left edge of the active button at the midpoint of the scroll container.
+                 * We then add half of the active button width. This will position the active
+                 * button such that the midpoint of the active button is at the midpoint of the
+                 * scroll container.
+                 */
+                const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
+                /**
+                 * We intentionally use scrollBy here instead of scrollIntoView
+                 * to avoid a WebKit bug where accelerated animations break
+                 * when using scrollIntoView. Using scrollIntoView will cause the
+                 * segment container to jump during the transition and then snap into place.
+                 * This is because scrollIntoView can potentially cause parent element
+                 * containers to also scroll. scrollBy does not have this same behavior, so
+                 * we use this API instead.
+                 *
+                 * Note that if there is not enough scrolling space to center the element
+                 * within the scroll container, the browser will attempt
+                 * to center by as much as it can.
+                 */
+                el.scrollBy({
+                    top: 0,
+                    left: centeredX,
+                    behavior: smoothScroll ? 'smooth' : 'instant',
+                });
+            }
         }
-      }
-      if (nextIndex !== undefined && !buttons[nextIndex].disabled) {
-        current = buttons[nextIndex];
-      }
-    }
-    // If the indicator is not activated then we will just set the indicator
-    // to the element where the gesture ended
-    if (!activated && isEnd) {
-      current = nextEl;
-    }
-    if (current != null) {
-      /**
-       * If current element is ion-segment then that means
-       * user tried to select a disabled ion-segment-button,
-       * and we should not update the ripple.
-       */
-      if (current.tagName === 'ION-SEGMENT') {
-        return false;
-      }
-      if (previous !== current) {
-        this.checkButton(previous, current);
-      }
-    }
-    return true;
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      segment: true,
-    });
-  }
-  onKeyDown(ev) {
-    const rtl = isRTL(this.el);
-    let keyDownSelectsButton = this.selectOnFocus;
-    let current;
-    switch (ev.key) {
-      case 'ArrowRight':
-        ev.preventDefault();
-        current = rtl ? this.getSegmentButton('previous') : this.getSegmentButton('next');
-        break;
-      case 'ArrowLeft':
-        ev.preventDefault();
-        current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous');
-        break;
-      case 'Home':
-        ev.preventDefault();
-        current = this.getSegmentButton('first');
-        break;
-      case 'End':
-        ev.preventDefault();
-        current = this.getSegmentButton('last');
-        break;
-      case ' ':
-      case 'Enter':
-        ev.preventDefault();
-        current = document.activeElement;
-        keyDownSelectsButton = true;
-      default:
-        break;
-    }
-    if (!current) {
-      return;
-    }
-    if (keyDownSelectsButton) {
-      const previous = this.checked;
-      this.checkButton(previous || current, current);
-      if (current !== previous) {
-        this.emitValueChange();
-      }
-    }
-    current.setFocus();
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-        [mode]: true,
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-        'segment-activated': this.activated,
-        'segment-disabled': this.disabled,
-        'segment-scrollable': this.scrollable,
-      }) }, h("slot", null)));
-  }
-  static get is() { return "ion-segment"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "ios": ["segment.ios.scss"],
-      "md": ["segment.md.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "ios": ["segment.ios.css"],
-      "md": ["segment.md.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::Color"
+    }
+    setNextIndex(detail, isEnd = false) {
+        const rtl = isRTL(this.el);
+        const activated = this.activated;
+        const buttons = this.getButtons();
+        const index = buttons.findIndex((button) => button.value === this.value);
+        const previous = buttons[index];
+        let current;
+        let nextIndex;
+        if (index === -1) {
+            return;
+        }
+        // Get the element that the touch event started on in case
+        // it was the checked button, then we will move the indicator
+        const rect = previous.getBoundingClientRect();
+        const left = rect.left;
+        const width = rect.width;
+        // Get the element that the gesture is on top of based on the currentX of the
+        // gesture event and the Y coordinate of the starting element, since the gesture
+        // can move up and down off of the segment
+        const currentX = detail.currentX;
+        const previousY = rect.top + rect.height / 2;
+        /**
+         * Segment can be used inside the shadow dom
+         * so doing document.elementFromPoint would never
+         * return a segment button in that instance.
+         * We use getRootNode to which will return the parent
+         * shadow root if used inside a shadow component and
+         * returns document otherwise.
+         */
+        const root = this.el.getRootNode();
+        const nextEl = root.elementFromPoint(currentX, previousY);
+        const decreaseIndex = rtl ? currentX > left + width : currentX < left;
+        const increaseIndex = rtl ? currentX < left : currentX > left + width;
+        // If the indicator is currently activated then we have started the gesture
+        // on top of the checked button so we need to slide the indicator
+        // by checking the button next to it as we move
+        if (activated && !isEnd) {
+            // Decrease index, move left in LTR & right in RTL
+            if (decreaseIndex) {
+                const newIndex = index - 1;
+                if (newIndex >= 0) {
+                    nextIndex = newIndex;
+                }
+                // Increase index, moves right in LTR & left in RTL
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
-        },
-        "attribute": "color",
-        "reflect": true
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user cannot interact with the segment."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "scrollable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons."
-        },
-        "attribute": "scrollable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "swipeGesture": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, users will be able to swipe between segment buttons to activate them."
-        },
-        "attribute": "swipe-gesture",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "SegmentValue",
-          "resolved": "number | string | undefined",
-          "references": {
-            "SegmentValue": {
-              "location": "import",
-              "path": "./segment-interface",
-              "id": "src/components/segment/segment-interface.ts::SegmentValue"
+            else if (increaseIndex) {
+                if (activated && !isEnd) {
+                    const newIndex = index + 1;
+                    if (newIndex < buttons.length) {
+                        nextIndex = newIndex;
+                    }
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "the value of the segment."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "selectOnFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element."
-        },
-        "attribute": "select-on-focus",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "activated": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "ionChange",
-        "name": "ionChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`."
-        },
-        "complexType": {
-          "original": "SegmentChangeEventDetail",
-          "resolved": "SegmentChangeEventDetail",
-          "references": {
-            "SegmentChangeEventDetail": {
-              "location": "import",
-              "path": "./segment-interface",
-              "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+            if (nextIndex !== undefined && !buttons[nextIndex].disabled) {
+                current = buttons[nextIndex];
             }
-          }
         }
-      }, {
-        "method": "ionSelect",
-        "name": "ionSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "Emitted when the value of the segment changes from user committed actions\nor from externally assigning a value."
-        },
-        "complexType": {
-          "original": "SegmentChangeEventDetail",
-          "resolved": "SegmentChangeEventDetail",
-          "references": {
-            "SegmentChangeEventDetail": {
-              "location": "import",
-              "path": "./segment-interface",
-              "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+        // If the indicator is not activated then we will just set the indicator
+        // to the element where the gesture ended
+        if (!activated && isEnd) {
+            current = nextEl;
+        }
+        if (current != null) {
+            /**
+             * If current element is ion-segment then that means
+             * user tried to select a disabled ion-segment-button,
+             * and we should not update the ripple.
+             */
+            if (current.tagName === 'ION-SEGMENT') {
+                return false;
+            }
+            if (previous !== current) {
+                this.checkButton(previous, current);
             }
-          }
         }
-      }, {
-        "method": "ionStyle",
-        "name": "ionStyle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "Emitted when the styles change."
-        },
-        "complexType": {
-          "original": "StyleEventDetail",
-          "resolved": "StyleEventDetail",
-          "references": {
-            "StyleEventDetail": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::StyleEventDetail"
+        return true;
+    }
+    emitStyle() {
+        this.ionStyle.emit({
+            segment: true,
+        });
+    }
+    onKeyDown(ev) {
+        const rtl = isRTL(this.el);
+        let keyDownSelectsButton = this.selectOnFocus;
+        let current;
+        switch (ev.key) {
+            case 'ArrowRight':
+                ev.preventDefault();
+                current = rtl ? this.getSegmentButton('previous') : this.getSegmentButton('next');
+                break;
+            case 'ArrowLeft':
+                ev.preventDefault();
+                current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous');
+                break;
+            case 'Home':
+                ev.preventDefault();
+                current = this.getSegmentButton('first');
+                break;
+            case 'End':
+                ev.preventDefault();
+                current = this.getSegmentButton('last');
+                break;
+            case ' ':
+            case 'Enter':
+                ev.preventDefault();
+                current = document.activeElement;
+                keyDownSelectsButton = true;
+            default:
+                break;
+        }
+        if (!current) {
+            return;
+        }
+        if (keyDownSelectsButton) {
+            const previous = this.checked;
+            this.checkButton(previous || current, current);
+            if (current !== previous) {
+                this.emitValueChange();
             }
-          }
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "color",
-        "methodName": "colorChanged"
-      }, {
-        "propName": "swipeGesture",
-        "methodName": "swipeGestureChanged"
-      }, {
-        "propName": "value",
-        "methodName": "valueChanged"
-      }, {
-        "propName": "disabled",
-        "methodName": "disabledChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        current.setFocus();
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
+                'in-toolbar': hostContext('ion-toolbar', this.el),
+                'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+                'segment-activated': this.activated,
+                'segment-disabled': this.disabled,
+                'segment-scrollable': this.scrollable,
+            }) }, h("slot", null)));
+    }
+    static get is() { return "ion-segment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["segment.ios.scss"],
+            "md": ["segment.md.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["segment.ios.css"],
+            "md": ["segment.md.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+                },
+                "attribute": "color",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the segment."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons."
+                },
+                "attribute": "scrollable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "swipeGesture": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, users will be able to swipe between segment buttons to activate them."
+                },
+                "attribute": "swipe-gesture",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "SegmentValue",
+                    "resolved": "number | string | undefined",
+                    "references": {
+                        "SegmentValue": {
+                            "location": "import",
+                            "path": "./segment-interface",
+                            "id": "src/components/segment/segment-interface.ts::SegmentValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the value of the segment."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "selectOnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element."
+                },
+                "attribute": "select-on-focus",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activated": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ionChange",
+                "name": "ionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`."
+                },
+                "complexType": {
+                    "original": "SegmentChangeEventDetail",
+                    "resolved": "SegmentChangeEventDetail",
+                    "references": {
+                        "SegmentChangeEventDetail": {
+                            "location": "import",
+                            "path": "./segment-interface",
+                            "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ionSelect",
+                "name": "ionSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the value of the segment changes from user committed actions\nor from externally assigning a value."
+                },
+                "complexType": {
+                    "original": "SegmentChangeEventDetail",
+                    "resolved": "SegmentChangeEventDetail",
+                    "references": {
+                        "SegmentChangeEventDetail": {
+                            "location": "import",
+                            "path": "./segment-interface",
+                            "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "ionStyle",
+                "name": "ionStyle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the styles change."
+                },
+                "complexType": {
+                    "original": "StyleEventDetail",
+                    "resolved": "StyleEventDetail",
+                    "references": {
+                        "StyleEventDetail": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::StyleEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "colorChanged"
+            }, {
+                "propName": "swipeGesture",
+                "methodName": "swipeGestureChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }