voyager-ionic-core 7.5.1 → 7.6.0

package/dist/collection/components/item/item.js

@@ -20,637 +20,637 @@ import { getIonMode } from "../../global/ionic-global";
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
  */
 export class Item {
-  constructor() {
-    this.labelColorStyles = {};
-    this.itemStyles = new Map();
-    this.inheritedAriaAttributes = {};
-    this.multipleInputs = false;
-    this.focusable = true;
-    this.color = undefined;
-    this.button = false;
-    this.detail = undefined;
-    this.detailIcon = chevronForward;
-    this.disabled = false;
-    this.download = undefined;
-    this.fill = undefined;
-    this.shape = undefined;
-    this.href = undefined;
-    this.rel = undefined;
-    this.lines = undefined;
-    this.counter = false;
-    this.routerAnimation = undefined;
-    this.routerDirection = 'forward';
-    this.target = undefined;
-    this.type = 'button';
-    this.counterFormatter = undefined;
-    this.counterString = undefined;
-  }
-  counterFormatterChanged() {
-    this.updateCounterOutput(this.getFirstInput());
-  }
-  handleIonInput(ev) {
-    if (this.counter && ev.target === this.getFirstInput()) {
-      this.updateCounterOutput(ev.target);
+    constructor() {
+        this.labelColorStyles = {};
+        this.itemStyles = new Map();
+        this.inheritedAriaAttributes = {};
+        this.multipleInputs = false;
+        this.focusable = true;
+        this.color = undefined;
+        this.button = false;
+        this.detail = undefined;
+        this.detailIcon = chevronForward;
+        this.disabled = false;
+        this.download = undefined;
+        this.fill = undefined;
+        this.shape = undefined;
+        this.href = undefined;
+        this.rel = undefined;
+        this.lines = undefined;
+        this.counter = false;
+        this.routerAnimation = undefined;
+        this.routerDirection = 'forward';
+        this.target = undefined;
+        this.type = 'button';
+        this.counterFormatter = undefined;
+        this.counterString = undefined;
     }
-  }
-  labelColorChanged(ev) {
-    const { color } = this;
-    // There will be a conflict with item color if
-    // we apply the label color to item, so we ignore
-    // the label color if the user sets a color on item
-    if (color === undefined) {
-      this.labelColorStyles = ev.detail;
+    counterFormatterChanged() {
+        this.updateCounterOutput(this.getFirstInput());
     }
-  }
-  itemStyle(ev) {
-    ev.stopPropagation();
-    const tagName = ev.target.tagName;
-    const updatedStyles = ev.detail;
-    const newStyles = {};
-    const childStyles = this.itemStyles.get(tagName) || {};
-    let hasStyleChange = false;
-    Object.keys(updatedStyles).forEach((key) => {
-      if (updatedStyles[key]) {
-        const itemKey = `item-${key}`;
-        if (!childStyles[itemKey]) {
-          hasStyleChange = true;
+    handleIonInput(ev) {
+        if (this.counter && ev.target === this.getFirstInput()) {
+            this.updateCounterOutput(ev.target);
         }
-        newStyles[itemKey] = true;
-      }
-    });
-    if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
-      hasStyleChange = true;
     }
-    if (hasStyleChange) {
-      this.itemStyles.set(tagName, newStyles);
-      forceUpdate(this);
-    }
-  }
-  connectedCallback() {
-    if (this.counter) {
-      this.updateCounterOutput(this.getFirstInput());
+    labelColorChanged(ev) {
+        const { color } = this;
+        // There will be a conflict with item color if
+        // we apply the label color to item, so we ignore
+        // the label color if the user sets a color on item
+        if (color === undefined) {
+            this.labelColorStyles = ev.detail;
+        }
     }
-    this.hasStartEl();
-  }
-  componentWillLoad() {
-    this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
-  }
-  componentDidLoad() {
-    const { el, counter, counterFormatter, fill, shape } = this;
-    const hasHelperSlot = el.querySelector('[slot="helper"]') !== null;
-    if (hasHelperSlot) {
-      printIonWarning('The "helper" slot has been deprecated in favor of using the "helperText" property on ion-input or ion-textarea.', el);
+    itemStyle(ev) {
+        ev.stopPropagation();
+        const tagName = ev.target.tagName;
+        const updatedStyles = ev.detail;
+        const newStyles = {};
+        const childStyles = this.itemStyles.get(tagName) || {};
+        let hasStyleChange = false;
+        Object.keys(updatedStyles).forEach((key) => {
+            if (updatedStyles[key]) {
+                const itemKey = `item-${key}`;
+                if (!childStyles[itemKey]) {
+                    hasStyleChange = true;
+                }
+                newStyles[itemKey] = true;
+            }
+        });
+        if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
+            hasStyleChange = true;
+        }
+        if (hasStyleChange) {
+            this.itemStyles.set(tagName, newStyles);
+            forceUpdate(this);
+        }
     }
-    const hasErrorSlot = el.querySelector('[slot="error"]') !== null;
-    if (hasErrorSlot) {
-      printIonWarning('The "error" slot has been deprecated in favor of using the "errorText" property on ion-input or ion-textarea.', el);
+    connectedCallback() {
+        if (this.counter) {
+            this.updateCounterOutput(this.getFirstInput());
+        }
+        this.hasStartEl();
     }
-    if (counter === true) {
-      printIonWarning('The "counter" property has been deprecated in favor of using the "counter" property on ion-input or ion-textarea.', el);
+    componentWillLoad() {
+        this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
     }
-    if (counterFormatter !== undefined) {
-      printIonWarning('The "counterFormatter" property has been deprecated in favor of using the "counterFormatter" property on ion-input or ion-textarea.', el);
+    componentDidLoad() {
+        const { el, counter, counterFormatter, fill, shape } = this;
+        const hasHelperSlot = el.querySelector('[slot="helper"]') !== null;
+        if (hasHelperSlot) {
+            printIonWarning('The "helper" slot has been deprecated in favor of using the "helperText" property on ion-input or ion-textarea.', el);
+        }
+        const hasErrorSlot = el.querySelector('[slot="error"]') !== null;
+        if (hasErrorSlot) {
+            printIonWarning('The "error" slot has been deprecated in favor of using the "errorText" property on ion-input or ion-textarea.', el);
+        }
+        if (counter === true) {
+            printIonWarning('The "counter" property has been deprecated in favor of using the "counter" property on ion-input or ion-textarea.', el);
+        }
+        if (counterFormatter !== undefined) {
+            printIonWarning('The "counterFormatter" property has been deprecated in favor of using the "counterFormatter" property on ion-input or ion-textarea.', el);
+        }
+        if (fill !== undefined) {
+            printIonWarning('The "fill" property has been deprecated in favor of using the "fill" property on ion-input or ion-textarea.', el);
+        }
+        if (shape !== undefined) {
+            printIonWarning('The "shape" property has been deprecated in favor of using the "shape" property on ion-input or ion-textarea.', el);
+        }
+        raf(() => {
+            this.setMultipleInputs();
+            this.focusable = this.isFocusable();
+        });
     }
-    if (fill !== undefined) {
-      printIonWarning('The "fill" property has been deprecated in favor of using the "fill" property on ion-input or ion-textarea.', el);
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        // The following elements have a clickable cover that is relative to the entire item
+        const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+        // The following elements can accept focus alongside the previous elements
+        // therefore if these elements are also a child of item, we don't want the
+        // input cover on top of those interfering with their clicks
+        const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
+        // The following elements should also stay clickable when an input with cover is present
+        const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
+        // Check for multiple inputs to change the position of the input cover to relative
+        // for all of the covered inputs above
+        this.multipleInputs =
+            covers.length + inputs.length > 1 ||
+                covers.length + clickables.length > 1 ||
+                (covers.length > 0 && this.isClickable());
     }
-    if (shape !== undefined) {
-      printIonWarning('The "shape" property has been deprecated in favor of using the "shape" property on ion-input or ion-textarea.', el);
+    // If the item contains an input including a checkbox, datetime, select, or radio
+    // then the item will have a clickable input cover that covers the item
+    // that should get the hover, focused and activated states UNLESS it has multiple
+    // inputs, then those need to individually get each click
+    hasCover() {
+        const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+        return inputs.length === 1 && !this.multipleInputs;
     }
-    raf(() => {
-      this.setMultipleInputs();
-      this.focusable = this.isFocusable();
-    });
-  }
-  // If the item contains multiple clickable elements and/or inputs, then the item
-  // should not have a clickable input cover over the entire item to prevent
-  // interfering with their individual click events
-  setMultipleInputs() {
-    // The following elements have a clickable cover that is relative to the entire item
-    const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-    // The following elements can accept focus alongside the previous elements
-    // therefore if these elements are also a child of item, we don't want the
-    // input cover on top of those interfering with their clicks
-    const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
-    // The following elements should also stay clickable when an input with cover is present
-    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
-    // Check for multiple inputs to change the position of the input cover to relative
-    // for all of the covered inputs above
-    this.multipleInputs =
-      covers.length + inputs.length > 1 ||
-        covers.length + clickables.length > 1 ||
-        (covers.length > 0 && this.isClickable());
-  }
-  // If the item contains an input including a checkbox, datetime, select, or radio
-  // then the item will have a clickable input cover that covers the item
-  // that should get the hover, focused and activated states UNLESS it has multiple
-  // inputs, then those need to individually get each click
-  hasCover() {
-    const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-    return inputs.length === 1 && !this.multipleInputs;
-  }
-  // If the item has an href or button property it will render a native
-  // anchor or button that is clickable
-  isClickable() {
-    return this.href !== undefined || this.button;
-  }
-  canActivate() {
-    return this.isClickable() || this.hasCover();
-  }
-  isFocusable() {
-    const focusableChild = this.el.querySelector('.ion-focusable');
-    return this.canActivate() || focusableChild !== null;
-  }
-  getFirstInput() {
-    const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
-    return inputs[0];
-  }
-  updateCounterOutput(inputEl) {
-    var _a, _b;
-    const { counter, counterFormatter, defaultCounterFormatter } = this;
-    if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
-      const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
-      if (counterFormatter === undefined) {
-        this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
-      }
-      else {
-        try {
-          this.counterString = counterFormatter(length, inputEl.maxlength);
-        }
-        catch (e) {
-          printIonError('Exception in provided `counterFormatter`.', e);
-          // Fallback to the default counter formatter when an exception happens
-          this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
-        }
-      }
+    // If the item has an href or button property it will render a native
+    // anchor or button that is clickable
+    isClickable() {
+        return this.href !== undefined || this.button;
     }
-  }
-  defaultCounterFormatter(length, maxlength) {
-    return `${length} / ${maxlength}`;
-  }
-  hasStartEl() {
-    const startEl = this.el.querySelector('[slot="start"]');
-    if (startEl !== null) {
-      this.el.classList.add('item-has-start-slot');
+    canActivate() {
+        return this.isClickable() || this.hasCover();
     }
-  }
-  getFirstInteractive() {
-    if (Build.isTesting) {
-      /**
-       * Pseudo selectors can't be tested in unit tests.
-       * It will cause an error when running the tests.
-       *
-       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
-       */
-      return undefined;
+    isFocusable() {
+        const focusableChild = this.el.querySelector('.ion-focusable');
+        return this.canActivate() || focusableChild !== null;
     }
-    const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])');
-    return controls[0];
-  }
-  render() {
-    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
-    const childStyles = {};
-    const mode = getIonMode(this);
-    const clickable = this.isClickable();
-    const canActivate = this.canActivate();
-    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-    const attrs = TagType === 'button'
-      ? { type: this.type }
-      : {
-        download,
-        href,
-        rel,
-        target,
-      };
-    let clickFn = {};
-    const firstInteractive = this.getFirstInteractive();
-    // Only set onClick if the item is clickable to prevent screen
-    // readers from reading all items as clickable
-    if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
-      clickFn = {
-        onClick: (ev) => {
-          if (clickable) {
-            openURL(href, ev, routerDirection, routerAnimation);
-          }
-          if (firstInteractive !== undefined && !multipleInputs) {
-            const path = ev.composedPath();
-            const target = path[0];
-            if (ev.isTrusted) {
-              /**
-               * Dispatches a click event to the first interactive element,
-               * when it is the result of a user clicking on the item.
-               *
-               * We check if the click target is in the shadow root,
-               * which means the user clicked on the .item-native or
-               * .item-inner padding.
-               */
-              const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
-              if (clickedWithinShadowRoot) {
-                firstInteractive.click();
-              }
-            }
-          }
-        },
-      };
+    getFirstInput() {
+        const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
+        return inputs[0];
     }
-    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
-    this.itemStyles.forEach((value) => {
-      Object.assign(childStyles, value);
-    });
-    const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
-    const fillValue = fill || 'none';
-    const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el);
-    return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
-        item: true,
-        [mode]: true,
-        'item-lines-default': lines === undefined,
-        [`item-lines-${lines}`]: lines !== undefined,
-        [`item-fill-${fillValue}`]: true,
-        [`item-shape-${shape}`]: shape !== undefined,
-        'item-has-interactive-control': firstInteractive !== undefined,
-        'item-disabled': disabled,
-        'in-list': inList,
-        'item-multiple-inputs': this.multipleInputs,
-        'ion-activatable': canActivate,
-        'ion-focusable': this.focusable,
-        'item-rtl': document.dir === 'rtl',
-      })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
-  }
-  static get is() { return "ion-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "ios": ["item.ios.scss"],
-      "md": ["item.md.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "ios": ["item.ios.css"],
-      "md": ["item.md.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::Color"
+    updateCounterOutput(inputEl) {
+        var _a, _b;
+        const { counter, counterFormatter, defaultCounterFormatter } = this;
+        if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
+            const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+            if (counterFormatter === undefined) {
+                this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
-        },
-        "attribute": "color",
-        "reflect": true
-      },
-      "button": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, a button tag will be rendered and the item will be tappable."
-        },
-        "attribute": "button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "detail": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present."
-        },
-        "attribute": "detail",
-        "reflect": false
-      },
-      "detailIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon to use when `detail` is set to `true`."
-        },
-        "attribute": "detail-icon",
-        "reflect": false,
-        "defaultValue": "chevronForward"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user cannot interact with the item."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "download": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
-        },
-        "attribute": "download",
-        "reflect": false
-      },
-      "fill": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'outline' | 'solid'",
-          "resolved": "\"outline\" | \"solid\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use the `fill` property on `ion-input` or `ion-textarea` instead."
-            }],
-          "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
-        },
-        "attribute": "fill",
-        "reflect": false
-      },
-      "shape": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'round'",
-          "resolved": "\"round\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The shape of the item. If \"round\" it will have increased\nborder radius."
-        },
-        "attribute": "shape",
-        "reflect": false
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "rel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
-        },
-        "attribute": "rel",
-        "reflect": false
-      },
-      "lines": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'full' | 'inset' | 'none'",
-          "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "How the bottom border should be displayed on the item."
-        },
-        "attribute": "lines",
-        "reflect": false
-      },
-      "counter": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
-            }],
-          "text": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`."
-        },
-        "attribute": "counter",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "routerAnimation": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "AnimationBuilder | undefined",
-          "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
-          "references": {
-            "AnimationBuilder": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::AnimationBuilder"
+            else {
+                try {
+                    this.counterString = counterFormatter(length, inputEl.maxlength);
+                }
+                catch (e) {
+                    printIonError('Exception in provided `counterFormatter`.', e);
+                    // Fallback to the default counter formatter when an exception happens
+                    this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
         }
-      },
-      "routerDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "RouterDirection",
-          "resolved": "\"back\" | \"forward\" | \"root\"",
-          "references": {
-            "RouterDirection": {
-              "location": "import",
-              "path": "../router/utils/interface",
-              "id": "src/components/router/utils/interface.ts::RouterDirection"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
-        },
-        "attribute": "router-direction",
-        "reflect": false,
-        "defaultValue": "'forward'"
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
-        },
-        "attribute": "target",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'submit' | 'reset' | 'button'",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of the button. Only used when an `onclick` or `button` property is present."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'button'"
-      },
-      "counterFormatter": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "CounterFormatter",
-          "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
-          "references": {
-            "CounterFormatter": {
-              "location": "import",
-              "path": "./item-interface",
-              "id": "src/components/item/item-interface.ts::CounterFormatter"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
-            }],
-          "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+    }
+    defaultCounterFormatter(length, maxlength) {
+        return `${length} / ${maxlength}`;
+    }
+    hasStartEl() {
+        const startEl = this.el.querySelector('[slot="start"]');
+        if (startEl !== null) {
+            this.el.classList.add('item-has-start-slot');
+        }
+    }
+    getFirstInteractive() {
+        if (Build.isTesting) {
+            /**
+             * Pseudo selectors can't be tested in unit tests.
+             * It will cause an error when running the tests.
+             *
+             * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
+             */
+            return undefined;
+        }
+        const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])');
+        return controls[0];
+    }
+    render() {
+        const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
+        const childStyles = {};
+        const mode = getIonMode(this);
+        const clickable = this.isClickable();
+        const canActivate = this.canActivate();
+        const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+        const attrs = TagType === 'button'
+            ? { type: this.type }
+            : {
+                download,
+                href,
+                rel,
+                target,
+            };
+        let clickFn = {};
+        const firstInteractive = this.getFirstInteractive();
+        // Only set onClick if the item is clickable to prevent screen
+        // readers from reading all items as clickable
+        if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
+            clickFn = {
+                onClick: (ev) => {
+                    if (clickable) {
+                        openURL(href, ev, routerDirection, routerAnimation);
+                    }
+                    if (firstInteractive !== undefined && !multipleInputs) {
+                        const path = ev.composedPath();
+                        const target = path[0];
+                        if (ev.isTrusted) {
+                            /**
+                             * Dispatches a click event to the first interactive element,
+                             * when it is the result of a user clicking on the item.
+                             *
+                             * We check if the click target is in the shadow root,
+                             * which means the user clicked on the .item-native or
+                             * .item-inner padding.
+                             */
+                            const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
+                            if (clickedWithinShadowRoot) {
+                                firstInteractive.click();
+                            }
+                        }
+                    }
+                },
+            };
         }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "multipleInputs": {},
-      "focusable": {},
-      "counterString": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "counterFormatter",
-        "methodName": "counterFormatterChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "ionInput",
-        "method": "handleIonInput",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "ionColor",
-        "method": "labelColorChanged",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "ionStyle",
-        "method": "itemStyle",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
+        this.itemStyles.forEach((value) => {
+            Object.assign(childStyles, value);
+        });
+        const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
+        const fillValue = fill || 'none';
+        const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el);
+        return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+                item: true,
+                [mode]: true,
+                'item-lines-default': lines === undefined,
+                [`item-lines-${lines}`]: lines !== undefined,
+                [`item-fill-${fillValue}`]: true,
+                [`item-shape-${shape}`]: shape !== undefined,
+                'item-has-interactive-control': firstInteractive !== undefined,
+                'item-disabled': disabled,
+                'in-list': inList,
+                'item-multiple-inputs': this.multipleInputs,
+                'ion-activatable': canActivate,
+                'ion-focusable': this.focusable,
+                'item-rtl': document.dir === 'rtl',
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+    }
+    static get is() { return "ion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["item.ios.scss"],
+            "md": ["item.md.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["item.ios.css"],
+            "md": ["item.md.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+                },
+                "attribute": "color",
+                "reflect": true
+            },
+            "button": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a button tag will be rendered and the item will be tappable."
+                },
+                "attribute": "button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "detail": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present."
+                },
+                "attribute": "detail",
+                "reflect": false
+            },
+            "detailIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to use when `detail` is set to `true`."
+                },
+                "attribute": "detail-icon",
+                "reflect": false,
+                "defaultValue": "chevronForward"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the item."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
+                },
+                "attribute": "download",
+                "reflect": false
+            },
+            "fill": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'outline' | 'solid'",
+                    "resolved": "\"outline\" | \"solid\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the `fill` property on `ion-input` or `ion-textarea` instead."
+                        }],
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                },
+                "attribute": "fill",
+                "reflect": false
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round'",
+                    "resolved": "\"round\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of the item. If \"round\" it will have increased\nborder radius."
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "lines": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full' | 'inset' | 'none'",
+                    "resolved": "\"full\" | \"inset\" | \"none\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "How the bottom border should be displayed on the item."
+                },
+                "attribute": "lines",
+                "reflect": false
+            },
+            "counter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
+                        }],
+                    "text": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`."
+                },
+                "attribute": "counter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "routerAnimation": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationBuilder | undefined",
+                    "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+                    "references": {
+                        "AnimationBuilder": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
+                }
+            },
+            "routerDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RouterDirection",
+                    "resolved": "\"back\" | \"forward\" | \"root\"",
+                    "references": {
+                        "RouterDirection": {
+                            "location": "import",
+                            "path": "../router/utils/interface",
+                            "id": "src/components/router/utils/interface.ts::RouterDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
+                },
+                "attribute": "router-direction",
+                "reflect": false,
+                "defaultValue": "'forward'"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'submit' | 'reset' | 'button'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the button. Only used when an `onclick` or `button` property is present."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "counterFormatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CounterFormatter",
+                    "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
+                    "references": {
+                        "CounterFormatter": {
+                            "location": "import",
+                            "path": "./item-interface",
+                            "id": "src/components/item/item-interface.ts::CounterFormatter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
+                        }],
+                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "multipleInputs": {},
+            "focusable": {},
+            "counterString": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "counterFormatter",
+                "methodName": "counterFormatterChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ionInput",
+                "method": "handleIonInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "ionColor",
+                "method": "labelColorChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "ionStyle",
+                "method": "itemStyle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }