@ionic/core 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787589191.1e183b55

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

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var helpers = require('./helpers-YPQybDph.js');
+var index = require('./index-BrVMoqUk.js');
+var helpers = require('./helpers-Dj5o76mq.js');
 var dir = require('./dir-zwDPRE5K.js');
 var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.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)}`;
 
@@ -19,26 +19,81 @@ const Segment = class {
         this.ionChange = index.createEvent(this, "ionChange", 7);
         this.ionSelect = index.createEvent(this, "ionSelect", 7);
         this.ionStyle = index.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) => {
+            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;
+            }
+        };
     }
-    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 index.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
@@ -50,27 +105,9 @@ 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) {
@@ -104,29 +141,6 @@ 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) {
@@ -170,7 +184,7 @@ const Segment = class {
              */
             this.scrollActiveButtonIntoView(false);
         });
-        this.gesture = (await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); })).createGesture({
+        this.gesture = (await Promise.resolve().then(function () { return require('./index-DRPqwSvU.js'); })).createGesture({
             el: this.el,
             gestureName: 'segment',
             gesturePriority: 100,
@@ -496,59 +510,6 @@ 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 = dir.isRTL(this.el);
         let keyDownSelectsButton = this.selectOnFocus;
@@ -599,6 +560,7 @@ const Segment = class {
                 'segment-scrollable': this.scrollable,
             }) }, index.h("slot", { key: '79b0c6cce9d83d147b190ae5d77df7de29a6b42d', onSlotchange: this.onSlottedItemsChange })));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "color": [{
                 "colorChanged": 0
@@ -627,32 +589,38 @@ let ids = 0;
 const SegmentButton = class {
     constructor(hostRef) {
         index.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 = () => {
+            index.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 index.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();
     }
@@ -703,18 +671,6 @@ const SegmentButton = class {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
-    updateStyle = () => {
-        index.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
@@ -748,6 +704,7 @@ const SegmentButton = class {
                 'ion-focusable': true,
             } }, index.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 }, index.h("span", { key: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, index.h("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && index.h("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), index.h("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -3,19 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var index = require('./index-BrVMoqUk.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
-var overlays = require('./overlays-KaNVDNqC.js');
-var selectOptionRender = require('./select-option-render-pULCGldr.js');
+var overlays = require('./overlays-B5JeC8OQ.js');
+var selectOptionRender = require('./select-option-render-7m1WdFzF.js');
 var theme = require('./theme-Bw0rpaNN.js');
 require('./index-DkNv4J_i.js');
-require('./helpers-YPQybDph.js');
+require('./helpers-Dj5o76mq.js');
 require('./dir-zwDPRE5K.js');
-require('./hardware-back-button-fqpYh-kd.js');
-require('./framework-delegate-Dfo5XsGv.js');
-require('./gesture-controller-BDUH7687.js');
-require('./index-B7zJsYWS.js');
+require('./hardware-back-button-JOAEFSzc.js');
+require('./framework-delegate-BZUx4TnE.js');
+require('./gesture-controller-CeJslptU.js');
+require('./index-EJLjthTK.js');
 
 const ionicSelectModalMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-modal-ionic,.alert-checkbox-label-text.sc-ion-select-modal-ionic,.alert-radio-label-text.sc-ion-select-modal-ionic,.select-option-label-text.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-modal-ionic{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-modal-ionic:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic{width:40px;height:40px}.select-option-start.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic{font-size:24px}.select-option-start.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic{width:56px;height:56px}.select-option-start.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic{width:114px;height:56px}.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
 
@@ -26,19 +26,16 @@ const selectModalMdCss = () => `.action-sheet-button-label-has-rich-content.sc-i
 const SelectModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        // Tracks the option that received Enter-keydown so keyup only
+        // dismisses when the press started on the same option. Prevents
+        // Enter on the triggering ion-select from auto-dismissing.
+        this.pendingEnterTarget = null;
+        /**
+         * The text to display on the cancel button.
+         */
+        this.cancelText = 'Close';
+        this.options = [];
     }
-    get el() { return index.getElement(this); }
-    // Tracks the option that received Enter-keydown so keyup only
-    // dismisses when the press started on the same option. Prevents
-    // Enter on the triggering ion-select from auto-dismissing.
-    pendingEnterTarget = null;
-    header;
-    /**
-     * The text to display on the cancel button.
-     */
-    cancelText = 'Close';
-    multiple;
-    options = [];
     closeModal() {
         const modal = this.el.closest('ion-modal');
         if (modal) {
@@ -165,6 +162,7 @@ const SelectModal = class {
     render() {
         return (index.h(index.Host, { key: '791e95b985dd4b135db17a25fc678e9f8b73c597', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '697d18eef394c4c11c73afe69b9eadd1bad97d38' }, index.h("ion-toolbar", { key: '036968824ad8771020fe2b7604a6e72b73efc8ae' }, this.header !== undefined && index.h("ion-title", { key: '102e0346be83e879e733f9b410437b26216156aa' }, this.header), index.h("ion-buttons", { key: '436b997e990ce2f5e12e1651f8afc31ae231f7b0', slot: "end" }, index.h("ion-button", { key: 'ee4ddfd0612d33583aa0b93ebdb5257b10d4fda5', onClick: () => this.closeModal() }, this.cancelText)))), index.h("ion-content", { key: '38ea098f85ac69226e614e0a09f668e9209f7ea1' }, index.h("ion-list", { key: '20becc2537a1a027915fe0598203039ceb8ba4f3' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
+    get el() { return index.getElement(this); }
 };
 SelectModal.style = {
     ionic: ionicSelectModalMdCss(),