voyager-ionic-core 8.1.0 → 8.2.5

package/dist/collection/components/radio/radio.js

@@ -70,6 +70,17 @@ export class Radio {
          */
         this.updateState();
     }
+    componentDidLoad() {
+        /**
+         * The value may be `undefined` if it
+         * gets set before the radio is
+         * rendered. This ensures that the radio
+         * is checked if the value matches. This
+         * happens most often when Angular is
+         * rendering the radio.
+         */
+        this.updateState();
+    }
     /** @internal */
     async setFocus(ev) {
         ev.stopPropagation();
@@ -107,7 +118,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'e44cade8aa8415bdc825f9d17fc8562487cf5d35', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '43c95effb6acb119733270e8a5e02fe18b47ee4b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -118,10 +129,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '48a99aa80a7d7b4085ef26faf3167903c975517c', class: "radio-wrapper" }, h("div", { key: 'a8d74e0603b41215ea3e867356a9be0dcf3722d8', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '168ea77c08fde9832077d617662b93dc9986b544', class: "radio-wrapper" }, h("div", { key: 'ce1e6eee63fbab1e5a66b18f767f4eecc2a227f1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '9e3cce6254e70b02d50381537438a70435b031cc' })), h("div", { key: 'bfa3ee188d911e056a3e60178eac41362efb94b3', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '7d849e43d4356b5c3978c2bba9a6fba5d21ca69d' })), h("div", { key: 'e741f7822364958b050a232bdfccdc413095c244', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.md.css

@@ -126,6 +126,7 @@ input {
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/refresher/refresher.js

@@ -19,6 +19,7 @@ export class Refresher {
         this.pointerDown = false;
         this.needsCompletion = false;
         this.didRefresh = false;
+        this.contentFullscreen = false;
         this.lastVelocityY = 0;
         this.animations = [];
         this.nativeRefresher = false;
@@ -313,6 +314,12 @@ export class Refresher {
              * Query the background content element from the host ion-content element directly.
              */
             this.backgroundContentEl = await contentEl.getBackgroundElement();
+            /**
+             * Check if the content element is fullscreen to apply the correct styles
+             * when the refresher is refreshing. Otherwise, the refresher will be
+             * hidden because it is positioned behind the background content element.
+             */
+            this.contentFullscreen = contentEl.fullscreen;
             if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
                 this.setupNativeRefresher(contentEl);
             }
@@ -406,6 +413,14 @@ export class Refresher {
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
         this.memoizeOverflowStyle();
+        /**
+         * If the content is fullscreen, then we need to
+         * set the offset-top style on the background content
+         * element to ensure that the refresher is shown.
+         */
+        if (this.contentFullscreen && this.backgroundContentEl) {
+            this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+        }
     }
     onMove(detail) {
         if (!this.scrollEl) {
@@ -533,6 +548,7 @@ export class Refresher {
     close(state, delay) {
         // create fallback timer incase something goes wrong with transitionEnd event
         setTimeout(() => {
+            var _a;
             this.state = 1 /* RefresherState.Inactive */;
             this.progress = 0;
             this.didStart = false;
@@ -541,6 +557,17 @@ export class Refresher {
              * user can scroll again.
              */
             this.setCss(0, '0ms', false, '', true);
+            /**
+             * Reset the offset-top style on the background content
+             * when the refresher is no longer refreshing and the
+             * content is fullscreen.
+             *
+             * This ensures that the behavior of background content
+             * does not change when refreshing is complete.
+             */
+            if (this.contentFullscreen && this.backgroundContentEl) {
+                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
+            }
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -594,7 +621,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
+        return (h(Host, { key: '3270f181a5141e7d886ec554a3e892974446b90e', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/searchbar/searchbar.js

@@ -23,7 +23,7 @@ export class Searchbar {
         this.onClearInput = async (shouldFocus) => {
             this.ionClear.emit();
             return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+                // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
                 // wait for 4 frames
                 setTimeout(() => {
                     const value = this.getValue();
@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '8f3323145edfde317f2762e470f3ab2e27452b69', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'a3ae5d8a6fe3a96b5aa7142f7a246876fdbe3ef3', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '543593e248261418ea75580e5fbed1c613e57d00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '01351daea61933fedd1bd6289376183962096479', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'fae92d93e9c16c4b48116da9aa6b3e827d0f830a', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '4d20d2db6ce72e82f86fa140ebd2ad3b6bbf4bd6', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '40102559fa7864a7545466cf1abc40131b5ace6c', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '42eb950e72357bba1a1fe2dacfa982412c9d64db', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -34,6 +34,14 @@ export class Segment {
                 }
             }
         };
+        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);
@@ -101,13 +109,6 @@ export class Segment {
     }
     async componentDidLoad() {
         this.setCheckedClasses();
-        /**
-         * If the value changes before watchers
-         * are setup, then the ionSelect watch callback
-         * will not fire. As a result, we manually
-         * fire this event when Select is loaded.
-         */
-        this.ionSelect.emit({ value: this.value });
         /**
          * We need to wait for the buttons to all be rendered
          * before we can scroll.
@@ -420,14 +421,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '7b0aeabf078ca075d0ea1d5e92d84b9e7f1cefef', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', 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: 'ddecf3510bbc3cd37b2bbd7818b19f9919c767b5' })));
+            }) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.ios.css

@@ -138,6 +138,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/select/select.js

@@ -99,9 +99,6 @@ export class Select {
         this.value = value;
         this.ionChange.emit({ value });
     }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-    }
     async connectedCallback() {
         const { el } = this;
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
@@ -118,6 +115,22 @@ export class Select {
             forceUpdate(this);
         });
     }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    }
+    componentDidLoad() {
+        /**
+         * If any of the conditions that trigger the styleChanged callback
+         * are met on component load, it is possible the event emitted
+         * prior to a parent web component registering an event listener.
+         *
+         * To ensure the parent web component receives the event, we
+         * emit the style event again after the component has loaded.
+         *
+         * This is often seen in Angular with the `dist` output target.
+         */
+        this.emitStyle();
+    }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
@@ -610,7 +623,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e14586e887c0b73457b9f1e8f0585dfc7d590051', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -626,7 +639,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
+            }) }, h("label", { key: 'b44929542c809f2dca25afc588701762a083edd1', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '195e3fad9cea0363ff00bf257ec2975fe5aa6887', class: "select-wrapper-inner" }, h("slot", { key: '9da7161a69b92d6fd124a478348d3fa420092f26', name: "start" }), h("div", { key: '49c589c164d167de0ba5741a0c80fba58ea0bec6', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'de1536d910fceb8e2dbdda13abcf88ee969888b8', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e821b7b32cd1996eaa6d471df9b531ad0d491098', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.md.css

@@ -138,6 +138,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/toggle/toggle.ios.css

@@ -95,6 +95,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/toggle/toggle.md.css

@@ -95,6 +95,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/global/config.js

@@ -55,7 +55,14 @@ export const configFromURL = (win) => {
         .slice(1)
         .split('&')
         .map((entry) => entry.split('='))
-        .map(([key, value]) => [decodeURIComponent(key), decodeURIComponent(value)])
+        .map(([key, value]) => {
+        try {
+            return [decodeURIComponent(key), decodeURIComponent(value)];
+        }
+        catch (e) {
+            return ['', ''];
+        }
+    })
         .filter(([key]) => startsWith(key, IONIC_PREFIX))
         .map(([key, value]) => [key.slice(IONIC_PREFIX.length), value])
         .forEach(([key, value]) => {

package/dist/docs.d.ts

@@ -347,10 +347,26 @@ export interface JsonDocsEvent {
   deprecation?: string;
   detail: string;
 }
+/**
+ * Type describing a CSS Style, as described by a JSDoc-style comment
+ */
 export interface JsonDocsStyle {
+  /**
+   * The name of the style
+   */
   name: string;
+  /**
+   * The type/description associated with the style
+   */
   docs: string;
+  /**
+   * The annotation used in the JSDoc of the style (e.g. `@prop`)
+   */
   annotation: string;
+  /**
+   * The mode associated with the style
+   */
+  mode: string | undefined;
 }
 export interface JsonDocsListener {
   event: string;
@@ -389,10 +405,28 @@ export interface JsonDocsPart {
    */
   docs: string;
 }
+/**
+ * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
+ */
 export interface StyleDoc {
+  /**
+   * The name of the CSS property
+   */
   name: string;
+  /**
+   * The user-defined description of the CSS property
+   */
   docs: string;
+  /**
+   * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
+   * Used to inform Stencil where the start of a new property's description starts (and where the previous description
+   * ends).
+   */
   annotation: "prop";
+  /**
+   * The Stencil style-mode that is associated with this property.
+   */
+  mode: string | undefined;
 }
 
 export {};