@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/esm/ion-segment-view.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { i as isRTL } from './dir-o8OKV5aD.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-ChhhtsGZ.js';
+import { i as isRTL } from './dir-Dojwmvde.js';
 
 const 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),:host(.segment-view-swipe-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}`;
 
@@ -12,25 +12,37 @@ const SegmentView = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionSegmentViewScroll = createEvent(this, "ionSegmentViewScroll", 7);
-        this.scrollEndTimeout = null;
-        this.isTouching = false;
-        /**
-         * If `true`, the segment view cannot be interacted with.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, users will be able to swipe the segment view to navigate between segment contents.
-         */
-        this.swipeGesture = true;
     }
+    scrollEndTimeout = null;
+    isTouching = false;
+    get el() { return getElement(this); }
+    /**
+     * If `true`, the segment view cannot be interacted with.
+     */
+    disabled = false;
+    /**
+     * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+     */
+    swipeGesture = true;
+    /**
+     * @internal
+     *
+     * If `true`, the segment view is scrollable.
+     * If `false`, pointer events will be disabled. This is to prevent issues with
+     * quickly scrolling after interacting with a segment button.
+     */
+    isManualScroll;
+    /**
+     * Emitted when the segment view is scrolled.
+     */
+    ionSegmentViewScroll;
     handleScroll(ev) {
-        var _a;
         const { scrollLeft, scrollWidth, clientWidth } = ev.target;
         const max = scrollWidth - clientWidth;
         const scrollRatio = (isRTL(this.el) ? -1 : 1) * (scrollLeft / max);
         this.ionSegmentViewScroll.emit({
             scrollRatio,
-            isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
+            isManualScroll: this.isManualScroll ?? true,
         });
         // Reset the timeout to check for scroll end
         this.resetScrollEndTimeout();
@@ -110,13 +122,12 @@ const SegmentView = class {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: '2a6e0a1046af75b1fa0eed20a5fbbb4634480297', class: {
+        return (h(Host, { key: 'b3cd48fead5d2877ead68cf6d81955fc31530c7a', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: '644b60d179d0de3fa204e3bef26a3503ceeaf1d6' })));
+            } }, h("slot", { key: 'ad5aa8b79790c490e13438afa0cbb2c241eab0a1' })));
     }
-    get el() { return getElement(this); }
 };
 SegmentView.style = {
     ios: segmentViewIosCss(),

package/dist/esm/ion-segment_2.entry.js

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement, i as forceUpdate, f as printIonWarning, j as printIonError } from './index-tcQvqkiX.js';
-import { r as raf, f as addEventListener, m as removeEventListener, b as inheritAttributes } from './helpers-DkCLSLI9.js';
-import { i as isRTL } from './dir-o8OKV5aD.js';
-import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, c as createEvent, g as getElement, w as writeTask, h, d as Host, f as printIonWarning, j as printIonError, i as forceUpdate } from './index-ChhhtsGZ.js';
+import { r as raf, f as addEventListener, m as removeEventListener, b as inheritAttributes } from './helpers-CAGf8Wgp.js';
+import { i as isRTL } from './dir-Dojwmvde.js';
+import { c as createColorClasses, h as hostContext } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.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)}`;
 
@@ -17,82 +17,26 @@ const Segment = class {
         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;
-            }
-        };
     }
+    gesture;
+    // Value before the segment is dragged
+    valueBeforeGesture;
+    segmentViewEl = null;
+    lastNextIndex;
+    /**
+     * Whether to update the segment view, if exists, when the value changes.
+     * This behavior is enabled by default, but is set false when scrolling content views
+     * since we don't want to "double scroll" the segment view.
+     */
+    triggerScrollOnValueChange;
+    get el() { return getElement(this); }
+    activated = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     colorChanged(value, oldValue) {
         /**
          * If color is set after not having
@@ -104,9 +48,27 @@ const Segment = class {
             this.emitStyle();
         }
     }
+    /**
+     * If `true`, the user cannot interact with the segment.
+     */
+    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.
+     */
+    scrollable = false;
+    /**
+     * If `true`, users will be able to swipe between segment buttons to activate them.
+     */
+    swipeGesture = true;
     swipeGestureChanged() {
         this.gestureChanged();
     }
+    /**
+     * the value of the segment.
+     */
+    value;
     valueChanged(value, oldValue) {
         // Force a value to exist if we're using a segment view
         if (this.segmentViewEl && value === undefined) {
@@ -140,6 +102,29 @@ const Segment = class {
         }
         this.triggerScrollOnValueChange = undefined;
     }
+    /**
+     * 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.
+     */
+    selectOnFocus = false;
+    /**
+     * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the value of the segment changes from user committed actions
+     * or from externally assigning a value.
+     *
+     * @internal
+     */
+    ionSelect;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
     disabledChanged() {
         this.gestureChanged();
         if (!this.segmentViewEl) {
@@ -183,7 +168,7 @@ const Segment = class {
              */
             this.scrollActiveButtonIntoView(false);
         });
-        this.gesture = (await import('./index-Bck1OwMs.js')).createGesture({
+        this.gesture = (await import('./index-DcPaH5uL.js')).createGesture({
             el: this.el,
             gestureName: 'segment',
             gesturePriority: 100,
@@ -316,12 +301,11 @@ const Segment = class {
         // 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}"]`);
+        const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId?.contentId}"]`);
         // Return the segment view for that matching segment content
-        return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest('ion-segment-view');
+        return segmentContent?.closest('ion-segment-view');
     }
     handleSegmentViewScroll(ev) {
-        var _a;
         const { scrollRatio, isManualScroll } = ev.detail;
         if (!isManualScroll) {
             return;
@@ -330,7 +314,7 @@ const Segment = class {
         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))) {
+        if (ev.composedPath().includes(segmentViewEl) || dispatchedFrom?.contains(segmentEl)) {
             const buttons = this.getButtons();
             // If no buttons are found or there is no value set then do nothing
             if (!buttons.length)
@@ -338,7 +322,7 @@ const Segment = class {
             const index = buttons.findIndex((button) => button.value === this.value);
             const current = buttons[index];
             const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
-            if ((_a = buttons[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            if (buttons[nextIndex]?.disabled) {
                 return;
             }
             if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
@@ -361,7 +345,7 @@ const Segment = class {
         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)) {
+        if (!button?.contentId) {
             return;
         }
         const segmentView = this.segmentViewEl;
@@ -510,6 +494,59 @@ const Segment = class {
             segment: true,
         });
     }
+    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();
+            }
+        }
+    };
+    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);
+    };
+    getSegmentButton = (selector) => {
+        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 buttons[currIndex + 1] ?? buttons[0];
+            case 'previous':
+                return buttons[currIndex - 1] ?? buttons[buttons.length - 1];
+            default:
+                return null;
+        }
+    };
     onKeyDown(ev) {
         const rtl = isRTL(this.el);
         let keyDownSelectsButton = this.selectOnFocus;
@@ -551,16 +588,15 @@ const Segment = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eda6b7b88b7967b55cf9098c59b655b348a42224', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f74bd72f10f966129528497aa47b2c683a62d59e', 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: 'fdb451f235ce59c5bb50c61a13c69160ece2d5df', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '79b0c6cce9d83d147b190ae5d77df7de29a6b42d', onSlotchange: this.onSlottedItemsChange })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "color": [{
                 "colorChanged": 0
@@ -589,38 +625,32 @@ let ids = 0;
 const SegmentButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.segmentEl = null;
-        this.inheritedAttributes = {};
-        this.checked = false;
-        /**
-         * If `true`, the user cannot interact with the segment button.
-         */
-        this.disabled = false;
-        /**
-         * Set the layout of the text and icon in the segment.
-         */
-        this.layout = 'icon-top';
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        /**
-         * The value of the segment button.
-         */
-        this.value = 'ion-sb-' + ids++;
-        this.updateStyle = () => {
-            forceUpdate(this);
-        };
-        this.updateState = () => {
-            const { segmentEl } = this;
-            if (segmentEl) {
-                this.checked = segmentEl.value === this.value;
-                if (segmentEl.disabled) {
-                    this.disabled = true;
-                }
-            }
-        };
     }
+    segmentEl = null;
+    nativeEl;
+    inheritedAttributes = {};
+    get el() { return getElement(this); }
+    checked = false;
+    /**
+     * The `id` of the segment content.
+     */
+    contentId;
+    /**
+     * If `true`, the user cannot interact with the segment button.
+     */
+    disabled = false;
+    /**
+     * Set the layout of the text and icon in the segment.
+     */
+    layout = 'icon-top';
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * The value of the segment button.
+     */
+    value = 'ion-sb-' + ids++;
     valueChanged() {
         this.updateState();
     }
@@ -646,7 +676,9 @@ const SegmentButton = class {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+        this.inheritedAttributes = {
+            ...inheritAttributes(this.el, ['aria-label']),
+        };
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
@@ -669,6 +701,18 @@ const SegmentButton = class {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    updateStyle = () => {
+        forceUpdate(this);
+    };
+    updateState = () => {
+        const { segmentEl } = this;
+        if (segmentEl) {
+            this.checked = segmentEl.value === this.value;
+            if (segmentEl.disabled) {
+                this.disabled = true;
+            }
+        }
+    };
     /**
      * @internal
      * Focuses the native <button> element
@@ -683,8 +727,8 @@ const SegmentButton = class {
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
-        const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
+        const hasSegmentColor = () => segmentEl?.color !== undefined;
+        return (h(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -700,9 +744,8 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, h("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && h("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), h("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", { key: '9cc58cfbe70844a0f5e1a307002e0d04e044be99', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled, ...this.inheritedAttributes }, h("span", { key: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, h("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && h("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), h("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0