voyager-ionic-core 7.5.0 → 7.5.5

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

@@ -88,6 +88,24 @@
   box-sizing: border-box;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
+}
+
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -643,7 +661,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -826,22 +844,4 @@
 :host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
-}
-
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
 }

package/dist/collection/components/textarea/textarea.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -169,7 +169,14 @@ export class Textarea {
   /**
    * Returns the native `<textarea>` element used under the hood.
    */
-  getInputElement() {
+  async getInputElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput);
   }
   emitStyle() {

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

@@ -88,6 +88,24 @@
   box-sizing: border-box;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
+}
+
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -643,7 +661,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -838,6 +856,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -900,7 +919,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid) .textarea-wrapper:dir(rtl) {
+  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0px;
@@ -956,6 +975,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1024,7 +1044,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper:dir(rtl), :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper:dir(rtl) {
+  :host(.textarea-fill-outline.textarea-label-placement-stacked:dir(rtl)) .label-text-wrapper, :host(.textarea-fill-outline.textarea-label-placement-floating:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -1167,7 +1187,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-start:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
     border-top-left-radius: 0px;
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
@@ -1196,7 +1216,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline) .textarea-outline-end:dir(rtl) {
+  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -1248,20 +1268,6 @@
   letter-spacing: 0.0333333333em;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 56px;
-}
-
-/**
- * Floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-}
-
 /**
  * When the textarea is focused the label should
  * take on the highlight color. This should
@@ -1348,7 +1354,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.in-item) .textarea-highlight:dir(rtl) {
+    :host(.in-item:dir(rtl)) .textarea-highlight {
       left: unset;
       right: unset;
       right: 0;

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

@@ -93,7 +93,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;
@@ -140,13 +140,22 @@
 
 :host(.title-large) .toolbar-title {
   transform-origin: inherit;
+  /**
+   * During a page transition
+   * if the large title and the back button
+   * texts match up, the back button should be
+   * scaled to roughly match the dimensions of
+   * the large title text. The following line
+   * ensures that the scale values are accurate.
+   */
+  width: auto;
 }
 :host-context([dir=rtl]):host(.title-large) .toolbar-title, :host-context([dir=rtl]).title-large .toolbar-title {
   transform-origin: calc(100% - inherit);
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.title-large) .toolbar-title:dir(rtl) {
+  :host(.title-large:dir(rtl)) .toolbar-title {
     transform-origin: calc(100% - inherit);
   }
 }

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -95,7 +95,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

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

@@ -122,7 +122,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle) label:dir(rtl) {
+    :host(.legacy-toggle:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -316,7 +316,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -329,7 +329,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

package/dist/collection/utils/animation/animation.js

@@ -387,11 +387,25 @@ export const createAnimation = (animationId) => {
   const updateKeyframes = (keyframeValues) => {
     if (supportsWebAnimations) {
       getWebAnimations().forEach((animation) => {
-        if (animation.effect.setKeyframes) {
-          animation.effect.setKeyframes(keyframeValues);
+        /**
+         * animation.effect's type is AnimationEffect.
+         * However, in this case we have a more specific
+         * type of AnimationEffect called KeyframeEffect which
+         * inherits from AnimationEffect. As a result,
+         * we cast animation.effect to KeyframeEffect.
+         */
+        const keyframeEffect = animation.effect;
+        /**
+         * setKeyframes is not supported in all browser
+         * versions that Ionic supports, so we need to
+         * check for support before using it.
+         */
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (keyframeEffect.setKeyframes) {
+          keyframeEffect.setKeyframes(keyframeValues);
         }
         else {
-          const newEffect = new KeyframeEffect(animation.effect.target, keyframeValues, animation.effect.getTiming());
+          const newEffect = new KeyframeEffect(keyframeEffect.target, keyframeValues, keyframeEffect.getTiming());
           animation.effect = newEffect;
         }
       });
@@ -536,6 +550,7 @@ export const createAnimation = (animationId) => {
     step = Math.min(Math.max(step, 0), 0.9999);
     if (supportsWebAnimations) {
       webAnimations.forEach((animation) => {
+        // When creating the animation the delay is guaranteed to be set to a number.
         animation.currentTime = animation.effect.getComputedTiming().delay + getDuration() * step;
         animation.pause();
       });

package/dist/collection/utils/content/index.js

@@ -58,7 +58,6 @@ export const findClosestIonContent = (el) => {
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
  */
-// TODO(FW-2832): type
 export const scrollToTop = (el, durationMs) => {
   if (isIonContent(el)) {
     const content = el;

package/dist/collection/utils/forms/form-controller.js

@@ -39,10 +39,6 @@ export const createLegacyFormController = (el) => {
   return { hasLegacyControl };
 };
 const hasLabelSlot = (controlEl) => {
-  const root = controlEl.shadowRoot;
-  if (root === null) {
-    return false;
-  }
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -61,5 +57,5 @@ const hasLabelSlot = (controlEl) => {
   }
   return false;
 };
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];

package/dist/collection/utils/input-shims/hacks/common.js

@@ -13,8 +13,16 @@ export const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativ
     removeClone(componentEl, inputEl);
   }
 };
-// TODO(FW-2832): type
 export const isFocused = (input) => {
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
+   * Calling getRootNode on an element in standard web page will return HTMLDocument.
+   * Calling getRootNode on an element inside of the Shadow DOM will return the associated ShadowRoot.
+   * Calling getRootNode on an element that is not attached to a document/shadow tree will return
+   * the root of the DOM tree it belongs to.
+   * isFocused is used for the hide-caret utility which only considers input/textarea elements
+   * that are present in the DOM, so we don't set types for that final case since it does not apply.
+   */
   return input === input.getRootNode().activeElement;
 };
 const addClone = (componentEl, inputEl, inputRelativeY, disabledClonedInput = false) => {