@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/ion-segment.js

@@ -1,605 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
-import { r as raf } from './helpers.js';
-import { i as isRTL } from './dir.js';
-import { c as createColorClasses, h as hostContext } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
-
-const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
-
-const segmentMdCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";
-
-const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionSelect = createEvent(this, "ionSelect", 7);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
-        this.segmentViewEl = null;
-        this.activated = false;
-        /**
-         * If `true`, the user cannot interact with the segment.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the segment buttons will overflow and the user can swipe to see them.
-         * In addition, this will disable the gesture to drag the indicator between the buttons
-         * in order to swipe to see hidden buttons.
-         */
-        this.scrollable = false;
-        /**
-         * If `true`, users will be able to swipe between segment buttons to activate them.
-         */
-        this.swipeGesture = true;
-        /**
-         * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.
-         * If `false`, keyboard navigation will only focus the `ion-segment-button` element.
-         */
-        this.selectOnFocus = false;
-        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.segmentViewEl) {
-                this.updateSegmentView();
-                if (this.scrollable && previous) {
-                    this.checkButton(previous, current);
-                }
-            }
-            else if (this.scrollable || !this.swipeGesture) {
-                if (previous) {
-                    this.checkButton(previous, current);
-                }
-                else {
-                    this.setCheckedClasses();
-                }
-            }
-        };
-        this.onSlottedItemsChange = () => {
-            /**
-             * When the slotted segment buttons change we need to
-             * ensure that the new segment buttons are checked if
-             * the value matches the segment button value.
-             */
-            this.valueChanged(this.value);
-        };
-        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;
-            }
-        };
-    }
-    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, oldValue) {
-        // Force a value to exist if we're using a segment view
-        if (this.segmentViewEl && value === undefined) {
-            this.value = this.getButtons()[0].value;
-            return;
-        }
-        if (oldValue !== undefined && value !== undefined) {
-            const buttons = this.getButtons();
-            const previous = buttons.find((button) => button.value === oldValue);
-            const current = buttons.find((button) => button.value === value);
-            if (previous && current) {
-                if (!this.segmentViewEl) {
-                    this.checkButton(previous, current);
-                }
-                else if (this.triggerScrollOnValueChange !== false) {
-                    this.updateSegmentView();
-                }
-            }
-        }
-        else if (value !== undefined && oldValue === undefined && this.segmentViewEl) {
-            this.updateSegmentView();
-        }
-        /**
-         * `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 });
-        // The scroll listener should handle scrolling the active button into view as needed
-        if (!this.segmentViewEl) {
-            this.scrollActiveButtonIntoView();
-        }
-        this.triggerScrollOnValueChange = undefined;
-    }
-    disabledChanged() {
-        this.gestureChanged();
-        if (!this.segmentViewEl) {
-            const buttons = this.getButtons();
-            for (const button of buttons) {
-                button.disabled = this.disabled;
-            }
-        }
-        else {
-            this.segmentViewEl.disabled = this.disabled;
-        }
-    }
-    gestureChanged() {
-        if (this.gesture) {
-            this.gesture.enable(!this.scrollable && !this.disabled && this.swipeGesture);
-        }
-    }
-    connectedCallback() {
-        this.emitStyle();
-        this.segmentViewEl = this.getSegmentView();
-    }
-    disconnectedCallback() {
-        this.segmentViewEl = null;
-    }
-    componentWillLoad() {
-        this.emitStyle();
-    }
-    async componentDidLoad() {
-        this.segmentViewEl = this.getSegmentView();
-        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('./index3.js')).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();
-        }
-        // Update segment view based on the initial value,
-        // but do not animate the scroll
-        this.updateSegmentView(false);
-    }
-    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.updateSegmentView();
-            }
-        }
-        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) => {
-            button.classList.toggle('segment-button-activated', 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.scrollActiveButtonIntoView(true);
-        });
-        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');
-        }
-    }
-    getSegmentView() {
-        const buttons = this.getButtons();
-        // Get the first button with a contentId
-        const firstContentId = buttons.find((button) => button.contentId);
-        // Get the segment content with an id matching the button's contentId
-        const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId === null || firstContentId === void 0 ? void 0 : firstContentId.contentId}"]`);
-        // Return the segment view for that matching segment content
-        return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest('ion-segment-view');
-    }
-    handleSegmentViewScroll(ev) {
-        const { scrollRatio, isManualScroll } = ev.detail;
-        if (!isManualScroll) {
-            return;
-        }
-        const dispatchedFrom = ev.target;
-        const segmentViewEl = this.segmentViewEl;
-        const segmentEl = this.el;
-        // Only update the indicator if the event was dispatched from the correct segment view
-        if (ev.composedPath().includes(segmentViewEl) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(segmentEl))) {
-            const buttons = this.getButtons();
-            // If no buttons are found or there is no value set then do nothing
-            if (!buttons.length)
-                return;
-            const index = buttons.findIndex((button) => button.value === this.value);
-            const current = buttons[index];
-            const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
-            if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
-                this.lastNextIndex = nextIndex;
-                this.triggerScrollOnValueChange = false;
-                this.checkButton(current, buttons[nextIndex]);
-                this.emitValueChange();
-            }
-        }
-    }
-    /**
-     * Finds the related segment view and sets its current content
-     * based on the selected segment button. This method
-     * should be called on initial load of the segment,
-     * after the gesture is completed (if dragging between segments)
-     * and when a segment button is clicked directly.
-     */
-    updateSegmentView(smoothScroll = true) {
-        const buttons = this.getButtons();
-        const button = buttons.find((btn) => btn.value === this.value);
-        // If the button does not have a contentId then there is
-        // no associated segment view to update
-        if (!(button === null || button === void 0 ? void 0 : button.contentId)) {
-            return;
-        }
-        const segmentView = this.segmentViewEl;
-        if (segmentView) {
-            segmentView.setContent(button.contentId, smoothScroll);
-        }
-    }
-    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;
-                /**
-                 * newScrollPosition is the absolute scroll position that the
-                 * container needs to move to in order to center the active button.
-                 * It is calculated by adding the current scroll position
-                 * (scrollLeft) to the offset needed to center the button
-                 * (centeredX).
-                 */
-                const newScrollPosition = el.scrollLeft + centeredX;
-                /**
-                 * We intentionally use scrollTo 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. scrollTo does not have this same behavior, so
-                 * we use this API instead.
-                 *
-                 * scrollTo is used instead of scrollBy because there is a
-                 * Webkit bug that causes scrollBy to not work smoothly when
-                 * the active button is near the edge of the scroll container.
-                 * This leads to the buttons to jump around during the transition.
-                 *
-                 * 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.scrollTo({
-                    top: 0,
-                    left: newScrollPosition,
-                    behavior: smoothScroll ? 'smooth' : 'instant',
-                });
-            }
-        }
-    }
-    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
-            }
-            else if (increaseIndex) {
-                if (activated && !isEnd) {
-                    const newIndex = index + 1;
-                    if (newIndex < buttons.length) {
-                        nextIndex = newIndex;
-                    }
-                }
-            }
-            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;
-        }
-        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, { key: 'e67ed512739cf2cfe657b0c44ebc3dfb1e9fbb79', 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", { key: '804d8acfcb9abfeeee38244b015fbc5c36330b9e', onSlotchange: this.onSlottedItemsChange })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "color": ["colorChanged"],
-        "swipeGesture": ["swipeGestureChanged"],
-        "value": ["valueChanged"],
-        "disabled": ["disabledChanged"]
-    }; }
-    static get style() { return {
-        ios: segmentIosCss,
-        md: segmentMdCss
-    }; }
-}, [289, "ion-segment", {
-        "color": [513],
-        "disabled": [4],
-        "scrollable": [4],
-        "swipeGesture": [4, "swipe-gesture"],
-        "value": [1032],
-        "selectOnFocus": [4, "select-on-focus"],
-        "activated": [32]
-    }, [[16, "ionSegmentViewScroll", "handleSegmentViewScroll"], [0, "keydown", "onKeyDown"]], {
-        "color": ["colorChanged"],
-        "swipeGesture": ["swipeGestureChanged"],
-        "value": ["valueChanged"],
-        "disabled": ["disabledChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ion-segment"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ion-segment":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Segment);
-            }
-            break;
-    } });
-}
-
-const IonSegment = Segment;
-const defineCustomElement = defineCustomElement$1;
-
-export { IonSegment, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,writeTask as i,h as o,Host as n,transformTag as r}from"@stencil/core/internal/client";import{r as a}from"./helpers.js";import{i as h}from"./dir.js";import{c as l,h as c}from"./theme.js";import{b as d}from"./ionic-global.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionChange=s(this,"ionChange",7),this.ionSelect=s(this,"ionSelect",7),this.ionStyle=s(this,"ionStyle",7),this.segmentViewEl=null,this.activated=!1,this.disabled=!1,this.scrollable=!1,this.swipeGesture=!0,this.selectOnFocus=!1,this.onClick=t=>{const e=t.target,s=this.checked;"ION-SEGMENT"!==e.tagName&&(this.value=e.value,e!==s&&this.emitValueChange(),this.segmentViewEl?(this.updateSegmentView(),this.scrollable&&s&&this.checkButton(s,e)):!this.scrollable&&this.swipeGesture||(s?this.checkButton(s,e):this.setCheckedClasses()))},this.onSlottedItemsChange=()=>{this.valueChanged(this.value)},this.getSegmentButton=t=>{var e,s;const i=this.getButtons().filter((t=>!t.disabled)),o=i.findIndex((t=>t===document.activeElement));switch(t){case"first":return i[0];case"last":return i[i.length-1];case"next":return null!==(e=i[o+1])&&void 0!==e?e:i[0];case"previous":return null!==(s=i[o-1])&&void 0!==s?s:i[i.length-1];default:return null}}}colorChanged(t,e){(void 0===e&&void 0!==t||void 0!==e&&void 0===t)&&this.emitStyle()}swipeGestureChanged(){this.gestureChanged()}valueChanged(t,e){if(this.segmentViewEl&&void 0===t)this.value=this.getButtons()[0].value;else{if(void 0!==e&&void 0!==t){const s=this.getButtons(),i=s.find((t=>t.value===e)),o=s.find((e=>e.value===t));i&&o&&(this.segmentViewEl?!1!==this.triggerScrollOnValueChange&&this.updateSegmentView():this.checkButton(i,o))}else void 0!==t&&void 0===e&&this.segmentViewEl&&this.updateSegmentView();this.ionSelect.emit({value:t}),this.segmentViewEl||this.scrollActiveButtonIntoView(),this.triggerScrollOnValueChange=void 0}}disabledChanged(){if(this.gestureChanged(),this.segmentViewEl)this.segmentViewEl.disabled=this.disabled;else{const t=this.getButtons();for(const e of t)e.disabled=this.disabled}}gestureChanged(){this.gesture&&this.gesture.enable(!this.scrollable&&!this.disabled&&this.swipeGesture)}connectedCallback(){this.emitStyle(),this.segmentViewEl=this.getSegmentView()}disconnectedCallback(){this.segmentViewEl=null}componentWillLoad(){this.emitStyle()}async componentDidLoad(){this.segmentViewEl=this.getSegmentView(),this.setCheckedClasses(),a((()=>{this.scrollActiveButtonIntoView(!1)})),this.gesture=(await import("./index3.js")).createGesture({el:this.el,gestureName:"segment",gesturePriority:100,threshold:0,passive:!1,onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)}),this.gestureChanged(),this.disabled&&this.disabledChanged(),this.updateSegmentView(!1)}onStart(t){this.valueBeforeGesture=this.value,this.activate(t)}onMove(t){this.setNextIndex(t)}onEnd(t){this.setActivated(!1),this.setNextIndex(t,!0),t.event.stopImmediatePropagation();const e=this.value;void 0!==e&&this.valueBeforeGesture!==e&&(this.emitValueChange(),this.updateSegmentView()),this.valueBeforeGesture=void 0}emitValueChange(){const{value:t}=this;this.ionChange.emit({value:t})}getButtons(){return Array.from(this.el.querySelectorAll("ion-segment-button"))}get checked(){return this.getButtons().find((t=>t.value===this.value))}setActivated(t){this.getButtons().forEach((e=>{e.classList.toggle("segment-button-activated",t)})),this.activated=t}activate(t){const e=t.event.target,s=this.getButtons().find((t=>t.value===this.value));"ION-SEGMENT-BUTTON"===e.tagName&&(s||(this.value=e.value,this.setCheckedClasses()),this.value===e.value&&this.setActivated(!0))}getIndicator(t){return(t.shadowRoot||t).querySelector(".segment-button-indicator")}checkButton(t,e){const s=this.getIndicator(t),o=this.getIndicator(e);if(null===s||null===o)return;const n=s.getBoundingClientRect(),r=o.getBoundingClientRect(),a=`translate3d(${n.left-r.left}px, 0, 0) scaleX(${n.width/r.width})`;i((()=>{o.classList.remove("segment-button-indicator-animated"),o.style.setProperty("transform",a),o.getBoundingClientRect(),o.classList.add("segment-button-indicator-animated"),o.style.setProperty("transform",""),this.scrollActiveButtonIntoView(!0)})),this.value=e.value,this.setCheckedClasses()}setCheckedClasses(){const t=this.getButtons(),e=t.findIndex((t=>t.value===this.value))+1;for(const e of t)e.classList.remove("segment-button-after-checked");e<t.length&&t[e].classList.add("segment-button-after-checked")}getSegmentView(){const t=this.getButtons().find((t=>t.contentId)),e=document.querySelector(`ion-segment-content[id="${null==t?void 0:t.contentId}"]`);return null==e?void 0:e.closest("ion-segment-view")}handleSegmentViewScroll(t){const{scrollRatio:e,isManualScroll:s}=t.detail;if(!s)return;const i=t.target,o=this.segmentViewEl,n=this.el;if(t.composedPath().includes(o)||(null==i?void 0:i.contains(n))){const t=this.getButtons();if(!t.length)return;const s=t.findIndex((t=>t.value===this.value)),i=t[s],o=Math.round(e*(t.length-1));void 0!==this.lastNextIndex&&this.lastNextIndex===o||(this.lastNextIndex=o,this.triggerScrollOnValueChange=!1,this.checkButton(i,t[o]),this.emitValueChange())}}updateSegmentView(t=!0){const e=this.getButtons().find((t=>t.value===this.value));if(!(null==e?void 0:e.contentId))return;const s=this.segmentViewEl;s&&s.setContent(e.contentId,t)}scrollActiveButtonIntoView(t=!0){const{scrollable:e,value:s,el:i}=this;if(e){const e=this.getButtons().find((t=>t.value===s));if(void 0!==e){const s=i.getBoundingClientRect(),o=e.getBoundingClientRect();i.scrollTo({top:0,left:i.scrollLeft+(o.x-s.x-s.width/2+o.width/2),behavior:t?"smooth":"instant"})}}}setNextIndex(t,e=!1){const s=h(this.el),i=this.activated,o=this.getButtons(),n=o.findIndex((t=>t.value===this.value)),r=o[n];let a,l;if(-1===n)return;const c=r.getBoundingClientRect(),d=c.left,u=c.width,m=t.currentX,g=c.top+c.height/2,b=this.el.getRootNode().elementFromPoint(m,g);if(i&&!e){if(s?m>d+u:m<d){const t=n-1;t>=0&&(l=t)}else if((s?m<d:m>d+u)&&i&&!e){const t=n+1;t<o.length&&(l=t)}void 0===l||o[l].disabled||(a=o[l])}if(!i&&e&&(a=b),null!=a){if("ION-SEGMENT"===a.tagName)return!1;r!==a&&this.checkButton(r,a)}return!0}emitStyle(){this.ionStyle.emit({segment:!0})}onKeyDown(t){const e=h(this.el);let s,i=this.selectOnFocus;switch(t.key){case"ArrowRight":t.preventDefault(),s=this.getSegmentButton(e?"previous":"next");break;case"ArrowLeft":t.preventDefault(),s=this.getSegmentButton(e?"next":"previous");break;case"Home":t.preventDefault(),s=this.getSegmentButton("first");break;case"End":t.preventDefault(),s=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault(),s=document.activeElement,i=!0}if(s){if(i){const t=this.checked;this.checkButton(t||s,s),s!==t&&this.emitValueChange()}s.setFocus()}}render(){const t=d(this);return o(n,{key:"e67ed512739cf2cfe657b0c44ebc3dfb1e9fbb79",role:"tablist",onClick:this.onClick,class:l(this.color,{[t]:!0,"in-toolbar":c("ion-toolbar",this.el),"in-toolbar-color":c("ion-toolbar[color]",this.el),"segment-activated":this.activated,"segment-disabled":this.disabled,"segment-scrollable":this.scrollable})},o("slot",{key:"804d8acfcb9abfeeee38244b015fbc5c36330b9e",onSlotchange:this.onSlottedItemsChange}))}get el(){return this}static get watchers(){return{color:[{colorChanged:0}],swipeGesture:[{swipeGestureChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return{ios:":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}",md:":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}"}}},[289,"ion-segment",{color:[513],disabled:[4],scrollable:[4],swipeGesture:[4,"swipe-gesture"],value:[1032],selectOnFocus:[4,"select-on-focus"],activated:[32]},[[16,"ionSegmentViewScroll","handleSegmentViewScroll"],[0,"keydown","onKeyDown"]],{color:[{colorChanged:0}],swipeGesture:[{swipeGestureChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]),m=u,g=function(){"undefined"!=typeof customElements&&["ion-segment"].forEach((t=>{"ion-segment"===t&&(customElements.get(r(t))||customElements.define(r(t),u))}))};export{m as IonSegment,g as defineCustomElement}

package/components/ion-select-modal.js

@@ -1,9 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { S as SelectModal, d as defineCustomElement$1 } from './select-modal.js';
-
-const IonSelectModal = SelectModal;
-const defineCustomElement = defineCustomElement$1;
-
-export { IonSelectModal, defineCustomElement };
+import{S as o,d as s}from"./select-modal.js";const t=o,a=s;export{t as IonSelectModal,a as defineCustomElement}