voyager-ionic-core 8.1.0 → 8.2.0

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/select/test/basic/select.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
         });
         test.describe('select: popover', () => {
             test('it should open a popover select', async ({ page, skip }) => {
-                // TODO (FW-2979)
+                // TODO (ROU-5437)
                 skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('#customPopoverSelect');

package/dist/collection/components/select/test/disabled/select.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('select: disabled options'), () => {
         test('should not focus a disabled option when no value is set', async ({ page, skip }) => {
-            // TODO (FW-2979)
+            // TODO (ROU-5437)
             skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
             test.info().annotations.push({
                 type: 'issue',

package/dist/collection/components/select-popover/test/basic/select-popover.e2e.js

@@ -18,7 +18,7 @@ const checkedOptions = [
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('select-popover: basic'), () => {
         test.beforeEach(({ browserName }) => {
-            test.skip(browserName === 'webkit', 'https://ionic-cloud.atlassian.net/browse/FW-2979');
+            test.skip(browserName === 'webkit', 'ROU-5437');
         });
         test.describe('single selection', () => {
             let selectPopoverPage;
@@ -44,7 +44,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await expect(selectPopoverPage.popover).not.toBeVisible();
             });
             test('pressing Space on a selected option should dismiss the popover', async ({ browserName }) => {
-                test.skip(browserName === 'firefox', 'Same behavior as https://ionic-cloud.atlassian.net/browse/FW-2979');
+                test.skip(browserName === 'firefox', 'Same behavior as ROU-5437');
                 await selectPopoverPage.setup(config, checkedOptions, false);
                 await selectPopoverPage.pressSpaceOnOption('apple');
                 await selectPopoverPage.ionPopoverDidDismiss.next();

package/dist/collection/components/toast/test/basic/toast.e2e.js

@@ -81,6 +81,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             const { container } = await toastFixture.openToast('#translucent-toast');
             await toastFixture.screenshot('translucent', screenshot, container);
         });
+        // TODO(FW-6220): investigate why backdrop filter is not being captured in screenshot
         test('should set translucency correctly when color is provided', async ({ page }) => {
             const toastFixture = new ToastFixture(page);
             await toastFixture.goto(config);

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/collection/global/test/config-controller.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Config } from "../config";
+import { Config, configFromURL } from "../config";
 describe('Config', () => {
     it('should get a value from the config', () => {
         const config = new Config();
@@ -74,4 +74,12 @@ describe('Config', () => {
         config.set('text0', 'hola');
         expect(config.get('text0', 'HEY')).toEqual('hola');
     });
+    it('should not throw an exception with a malformed URI', () => {
+        // https://github.com/ionic-team/ionic-framework/issues/29479
+        expect(configFromURL({
+            location: {
+                search: '?test=%',
+            },
+        })).toEqual({});
+    });
 });

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 {};