@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

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

@@ -10,25 +10,82 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Segment {
-    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;
-    el;
-    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;
+    constructor() {
+        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) => {
+            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;
+            }
+        };
+    }
     colorChanged(value, oldValue) {
         /**
          * If color is set after not having
@@ -40,27 +97,9 @@ export class Segment {
             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) {
@@ -94,29 +133,6 @@ export class Segment {
         }
         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) {
@@ -486,59 +502,6 @@ export class Segment {
             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;

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

@@ -15,31 +15,39 @@ let ids = 0;
  * @part indicator-background - The background element for the indicator displayed on the checked segment button.
  */
 export class SegmentButton {
-    segmentEl = null;
-    nativeEl;
-    inheritedAttributes = {};
-    el;
-    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++;
+    constructor() {
+        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;
+                }
+            }
+        };
+    }
     valueChanged() {
         this.updateState();
     }
@@ -50,11 +58,6 @@ export class SegmentButton {
             addEventListener(segmentEl, 'ionSelect', this.updateState);
             addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
-        // Prevent buttons from being disabled when associated with segment content
-        if (this.contentId && this.disabled) {
-            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
-            this.disabled = false;
-        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -71,6 +74,15 @@ export class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
+        /**
+         * Checked here rather than in `connectedCallback` so frameworks that assign element
+         * props after inserting the element have set `disabled` by now. A disabled ion-segment
+         * pushes that onto its buttons too, which this guard should not undo.
+         */
+        if (this.disabled && this.segmentEl?.disabled !== true) {
+            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
         // Attempt to find the Segment Content by its contentId
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
@@ -90,18 +102,6 @@ export class SegmentButton {
     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
@@ -117,7 +117,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (h(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
+        return (h(Host, { key: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -133,7 +133,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, 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" }))));
+            } }, h("button", { key: 'ce65da07b1a012bce353b3c6c24eecfbd4071d54', "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: '6c4b4dcd20e407e5dc31674bea23633d8a09187a', class: "button-inner" }, h("slot", { key: '817145ae77a3c5ada88ab95723d881f1bde96b2a' })), mode === 'md' && h("ion-ripple-effect", { key: '054d7e5e2a13013914fac6bbde8efdb28d9b459e' })), h("div", { key: 'c48074881a302510ad4752eeb9383222cd3a54cb', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '7672a6b10ee18ad026b798fbd8207dc3cd5683f9', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,29 +4,18 @@
 import { Host, h } from "@stencil/core";
 import { isRTL } from "../../utils/rtl/index";
 export class SegmentView {
-    scrollEndTimeout = null;
-    isTouching = false;
-    el;
-    /**
-     * 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;
+    constructor() {
+        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;
+    }
     handleScroll(ev) {
         const { scrollLeft, scrollWidth, clientWidth } = ev.target;
         const max = scrollWidth - clientWidth;