@ionic/core 8.4.4-dev.11741377533.15770110 → 8.4.4-dev.11741630999.189d7fc2

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

@@ -91,6 +91,7 @@ export class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
+        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -655,8 +656,8 @@ export class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded, required } = this;
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -687,7 +688,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'b2dca9ae25d88e4d9fdb55003041a66be5668fcf', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f7cf03de773cd85da42978e274d65cc1eb6ed8a3', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -703,7 +704,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'c22fe9aee8cd448223497ef143e89529fcef8af6', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '601972df4579f4fa6a9c2c12865593e807decb72', class: "select-wrapper-inner" }, h("slot", { key: '5f7b1261862f74b978b26f026533e3fd1cc666ba', name: "start" }), h("div", { key: '39616da89f4b4b78432f6da85116a7de2ca589e7', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '1d7b3601b73af7c05b3627cfc8e5147ea379bb03', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'b0344f0ac15003e22fee66d3d7ed03a07da7e8b7', class: "select-highlight" }))));
+            }) }, h("label", { key: '91674f8f5cce37c87a7096d09b3f1d351cba1527', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '2229333833047db13ed2a01cb10bb6e6f774031d', class: "select-wrapper-inner" }, h("slot", { key: 'f2766bdf8bff261efa5711f72d9edef407e45189', name: "start" }), h("div", { key: '84fec020ecaaac41298a01dbffdbb2f3744170b4', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9b91237d7a1621bce1e15546abcb4f6b74cccc5f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e02aea3e8f344376013257f5261a29408e62b359', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1069,6 +1070,24 @@ export class Select {
                 },
                 "attribute": "value",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -373,6 +373,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -396,7 +397,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -415,7 +416,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

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

@@ -373,6 +373,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -396,7 +397,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -415,7 +416,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -928,6 +929,10 @@
   --border-color: var(--highlight-color);
 }
 
+/**
+ * The bottom content should never have
+ * a border with the solid style.
+ */
 :host(.textarea-fill-solid) .textarea-bottom {
   border-top: none;
 }

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

@@ -171,32 +171,39 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
+.toggle-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
 }
 
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.toggle-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
+.toggle-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
+  display: block;
 }
 
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -225,6 +232,7 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -267,6 +275,7 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -312,6 +321,34 @@ input {
   }
 }
 
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

package/dist/collection/components/toggle/toggle.js

@@ -17,10 +17,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
  * @part label - The label text describing the toggle.
+ * @part supporting-text - Supporting text displayed beneath the toggle label.
+ * @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
+ * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
     constructor() {
         this.inputId = `ion-tg-${toggleIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
@@ -66,11 +71,14 @@ export class Toggle {
         this.name = this.inputId;
         this.checked = false;
         this.disabled = false;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.value = 'on';
         this.enableOnOffLabels = config.get('toggleOnOffLabels');
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
+        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -81,6 +89,7 @@ export class Toggle {
         const { checked, value } = this;
         const isNowChecked = !checked;
         this.checked = isNowChecked;
+        this.setFocus();
         this.ionChange.emit({
             checked: isNowChecked,
             value,
@@ -151,13 +160,39 @@ export class Toggle {
     get hasLabel() {
         return this.el.textContent !== '';
     }
+    getHintTextID() {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
+    /**
+     * Responsible for rendering helper text and error text.
+     * This element should only be rendered if hint text is set.
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        /**
+         * undefined and empty string values should
+         * be treated as not having helper/error text.
+         */
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+    }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'd0c60711ea00ad36fe88766780cffaf9fc5dd538', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +202,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
+            }) }, h("label", { key: 'ec01cb69c55748d59e325bd3272051568d46d3c9', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'beefe7f842954dd1661504f3b41b6048e8b848f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'bbe542a0d6fe29868ff8ffba37a1e96d43ccdccb', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '2c4d6ce193bba3e8cc101664cfacfdeca4c2eb01' }), this.renderHintText()), h("div", { key: 'e9a4ea4c4bb48e7bf8a58ef742b4024867e77051', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -265,6 +300,40 @@ export class Toggle {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the toggle label and displayed when an error is detected."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the toggle label and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -352,6 +421,24 @@ export class Toggle {
                 },
                 "attribute": "alignment",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -171,32 +171,39 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
+.toggle-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
 }
 
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.toggle-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
+.toggle-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
+  display: block;
 }
 
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -225,6 +232,7 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -267,6 +275,7 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -312,6 +321,34 @@ input {
   }
 }
 
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

package/dist/collection/components/toolbar/toolbar.js

@@ -12,6 +12,10 @@ import { getIonMode } from "../../global/ionic-global";
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
+ *
+ * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
+ * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
+ * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 export class Toolbar {
     constructor() {
@@ -62,10 +66,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '4fdc9ae82a93237cc28ceb95b0ebd8069b62839d', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
+            })) }, h("div", { key: '443a216362bbbf1c149ed12140d52b0f0ea2d664', class: "toolbar-background", part: "background" }), h("div", { key: '1df87f4027d605e42757a13d4828df45b90a4fdc', class: "toolbar-container", part: "container" }, h("slot", { key: 'f66f34972be8e3f4915b9c6f5808600dbaedb1ea', name: "start" }), h("slot", { key: '14f38b0975e956f404c4eb3ee56f2055c6615276', name: "secondary" }), h("div", { key: '75ba5953a25c7544793484d2b245792cb0a5af75', class: "toolbar-content", part: "content" }, h("slot", { key: '149dfa58ff7106f318fecb4134e7c69edf8bc231' })), h("slot", { key: '807ab9ad21d7f1d9d427a4086460bcb9e5e8c019', name: "primary" }), h("slot", { key: 'bd2f9da95d2fa8e74dc6e0666587ceecbba99d9f', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { config } from "../../global/config";
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -8,9 +9,12 @@
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message, ...params) => {
-    return console.warn(`[Ionic Warning]: ${message}`, ...params);
+    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
+    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
+        return console.warn(`[Ionic Warning]: ${message}`, ...params);
+    }
 };
-/*
+/**
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
@@ -18,7 +22,10 @@ export const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 export const printIonError = (message, ...params) => {
-    return console.error(`[Ionic Error]: ${message}`, ...params);
+    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
+    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
+        return console.error(`[Ionic Error]: ${message}`, ...params);
+    }
 };
 /**
  * Prints an error informing developers that an implementation requires an element to be used