@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772055571.14fddd38

package/components/input.utils.js

@@ -1,4 +1,147 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{w as o}from"./index9.js";import{r}from"./helpers.js";import{a as t}from"./index4.js";const e=(t,e,i)=>{let n,s;if(void 0!==o&&"MutationObserver"in o){const o=Array.isArray(e)?e:[e];n=new MutationObserver((t=>{for(const e of t)for(const t of e.addedNodes)if(t.nodeType===Node.ELEMENT_NODE&&o.includes(t.slot))return i(),void r((()=>d(t)))})),n.observe(t,{childList:!0,subtree:!0})}const d=o=>{var r;s&&(s.disconnect(),s=void 0),s=new MutationObserver((o=>{i();for(const r of o)for(const o of r.removedNodes)o.nodeType===Node.ELEMENT_NODE&&o.slot===e&&c()})),s.observe(null!==(r=o.parentElement)&&void 0!==r?r:o,{subtree:!0,childList:!0})},c=()=>{s&&(s.disconnect(),s=void 0)};return{destroy:()=>{n&&(n.disconnect(),n=void 0),c()}}},i=(o,r,e)=>{const i=null==o?0:o.toString().length,s=n(i,r);if(void 0===e)return s;try{return e(i,r)}catch(o){return t("[ion-input] - Exception in provided `counterFormatter`:",o),s}},n=(o,r)=>`${o} / ${r}`;export{e as c,i as g}
+import { w as win } from './index9.js';
+import { r as raf } from './helpers.js';
+import { a as printIonError } from './index4.js';
+
+/**
+ * Used to update a scoped component that uses emulated slots. This fires when
+ * content is passed into the slot or when the content inside of a slot changes.
+ * This is not needed for components using native slots in the Shadow DOM.
+ * @internal
+ * @param el The host element to observe
+ * @param slotName mutationCallback will fire when nodes on these slot(s) change
+ * @param mutationCallback The callback to fire whenever the slotted content changes
+ */
+const createSlotMutationController = (el, slotName, mutationCallback) => {
+    let hostMutationObserver;
+    let slottedContentMutationObserver;
+    if (win !== undefined && 'MutationObserver' in win) {
+        const slots = Array.isArray(slotName) ? slotName : [slotName];
+        hostMutationObserver = new MutationObserver((entries) => {
+            for (const entry of entries) {
+                for (const node of entry.addedNodes) {
+                    /**
+                     * Check to see if the added node
+                     *  is our slotted content.
+                     */
+                    if (node.nodeType === Node.ELEMENT_NODE && slots.includes(node.slot)) {
+                        /**
+                         * If so, we want to watch the slotted
+                         * content itself for changes. This lets us
+                         * detect when content inside of the slot changes.
+                         */
+                        mutationCallback();
+                        /**
+                         * Adding the listener in an raf
+                         * waits until Stencil moves the slotted element
+                         * into the correct place in the event that
+                         * slotted content is being added.
+                         */
+                        raf(() => watchForSlotChange(node));
+                        return;
+                    }
+                }
+            }
+        });
+        hostMutationObserver.observe(el, {
+            childList: true,
+            /**
+             * This fixes an issue with the `ion-input` and
+             * `ion-textarea` not re-rendering in some cases
+             * when using the label slot functionality.
+             *
+             * HTML element patches in Stencil that are enabled
+             * by the `experimentalSlotFixes` flag in Stencil v4
+             * result in DOM manipulations that won't trigger
+             * the current mutation observer configuration and
+             * callback.
+             */
+            subtree: true,
+        });
+    }
+    /**
+     * Listen for changes inside of the slotted content.
+     * We can listen for subtree changes here to be
+     * informed of text within the slotted content
+     * changing. Doing this on the host is possible
+     * but it is much more expensive to do because
+     * it also listens for changes to the internals
+     * of the component.
+     */
+    const watchForSlotChange = (slottedEl) => {
+        var _a;
+        if (slottedContentMutationObserver) {
+            slottedContentMutationObserver.disconnect();
+            slottedContentMutationObserver = undefined;
+        }
+        slottedContentMutationObserver = new MutationObserver((entries) => {
+            mutationCallback();
+            for (const entry of entries) {
+                for (const node of entry.removedNodes) {
+                    /**
+                     * If the element was removed then we
+                     * need to destroy the MutationObserver
+                     * so the element can be garbage collected.
+                     */
+                    if (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) {
+                        destroySlottedContentObserver();
+                    }
+                }
+            }
+        });
+        /**
+         * Listen for changes inside of the element
+         * as well as anything deep in the tree.
+         * We listen on the parentElement so that we can
+         * detect when slotted element itself is removed.
+         */
+        slottedContentMutationObserver.observe((_a = slottedEl.parentElement) !== null && _a !== void 0 ? _a : slottedEl, { subtree: true, childList: true });
+    };
+    const destroy = () => {
+        if (hostMutationObserver) {
+            hostMutationObserver.disconnect();
+            hostMutationObserver = undefined;
+        }
+        destroySlottedContentObserver();
+    };
+    const destroySlottedContentObserver = () => {
+        if (slottedContentMutationObserver) {
+            slottedContentMutationObserver.disconnect();
+            slottedContentMutationObserver = undefined;
+        }
+    };
+    return {
+        destroy,
+    };
+};
+
+const getCounterText = (value, maxLength, counterFormatter) => {
+    const valueLength = value == null ? 0 : value.toString().length;
+    const defaultCounterText = defaultCounterFormatter(valueLength, maxLength);
+    /**
+     * If developers did not pass a custom formatter,
+     * use the default one.
+     */
+    if (counterFormatter === undefined) {
+        return defaultCounterText;
+    }
+    /**
+     * Otherwise, try to use the custom formatter
+     * and fallback to the default formatter if
+     * there was an error.
+     */
+    try {
+        return counterFormatter(valueLength, maxLength);
+    }
+    catch (e) {
+        printIonError('[ion-input] - Exception in provided `counterFormatter`:', e);
+        return defaultCounterText;
+    }
+};
+const defaultCounterFormatter = (length, maxlength) => {
+    return `${length} / ${maxlength}`;
+};
+
+export { createSlotMutationController as c, getCounterText as g };

package/components/ion-accordion-group.js

@@ -1,4 +1,272 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as o,HTMLElement as n,createEvent as i,h as t,Host as e,transformTag as a}from"@stencil/core/internal/client";import{p as r}from"./index4.js";import{b as s}from"./ionic-global.js";const d=o(class extends n{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.ionChange=i(this,"ionChange",7),this.ionValueChange=i(this,"ionValueChange",7),this.animated=!0,this.disabled=!1,this.readonly=!1,this.expand="compact"}valueChanged(){const{value:o,multiple:n}=this;!n&&Array.isArray(o)&&r(`[ion-accordion-group] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".\n\n  Value Passed: [${o.map((o=>`'${o}'`)).join(", ")}]\n`,this.el),this.ionValueChange.emit({value:this.value})}async disabledChanged(){const{disabled:o}=this,n=await this.getAccordions();for(const i of n)i.disabled=o}async readonlyChanged(){const{readonly:o}=this,n=await this.getAccordions();for(const i of n)i.readonly=o}async onKeydown(o){const n=document.activeElement;if(!n)return;if(!n.closest('ion-accordion [slot="header"]'))return;const i="ION-ACCORDION"===n.tagName?n:n.closest("ion-accordion");if(!i)return;if(i.closest("ion-accordion-group")!==this.el)return;const t=await this.getAccordions(),e=t.findIndex((o=>o===i));if(-1===e)return;let a;"ArrowDown"===o.key?a=this.findNextAccordion(t,e):"ArrowUp"===o.key?a=this.findPreviousAccordion(t,e):"Home"===o.key?a=t[0]:"End"===o.key&&(a=t[t.length-1]),void 0!==a&&a!==n&&a.focus()}async componentDidLoad(){this.disabled&&this.disabledChanged(),this.readonly&&this.readonlyChanged(),this.valueChanged()}setValue(o){const n=this.value=o;this.ionChange.emit({value:n})}async requestAccordionToggle(o,n){const{multiple:i,value:t,readonly:e,disabled:a}=this;if(!e&&!a)if(n)if(i){const n=null!=t?t:[],i=Array.isArray(n)?n:[n];void 0===i.find((n=>n===o))&&void 0!==o&&this.setValue([...i,o])}else this.setValue(o);else if(i){const n=null!=t?t:[];this.setValue((Array.isArray(n)?n:[n]).filter((n=>n!==o)))}else this.setValue(void 0)}findNextAccordion(o,n){const i=o[n+1];return void 0===i?o[0]:i}findPreviousAccordion(o,n){const i=o[n-1];return void 0===i?o[o.length-1]:i}async getAccordions(){return Array.from(this.el.querySelectorAll(":scope > ion-accordion"))}render(){const{disabled:o,readonly:n,expand:i}=this,a=s(this);return t(e,{key:"d1a79a93179474fbba66fcf11a92f4871dacc975",class:{[a]:!0,"accordion-group-disabled":o,"accordion-group-readonly":n,["accordion-group-expand-"+i]:!0},role:"presentation"},t("slot",{key:"e6b8954b686d1fbb4fc92adb07fddc97a24b0a31"}))}get el(){return this}static get watchers(){return{value:[{valueChanged:0}],disabled:[{disabledChanged:0}],readonly:[{readonlyChanged:0}]}}static get style(){return{ios:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}",md:":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}"}}},[289,"ion-accordion-group",{animated:[4],multiple:[4],value:[1025],disabled:[4],readonly:[4],expand:[1],requestAccordionToggle:[64],getAccordions:[64]},[[0,"keydown","onKeydown"]],{value:[{valueChanged:0}],disabled:[{disabledChanged:0}],readonly:[{readonlyChanged:0}]}]),c=d,p=function(){"undefined"!=typeof customElements&&["ion-accordion-group"].forEach((o=>{"ion-accordion-group"===o&&(customElements.get(a(o))||customElements.define(a(o),d))}))};export{c as IonAccordionGroup,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as printIonWarning } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";
+
+const accordionGroupMdCss = ":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
+
+const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionChange = createEvent(this, "ionChange", 7);
+        this.ionValueChange = createEvent(this, "ionValueChange", 7);
+        /**
+         * If `true`, all accordions inside of the
+         * accordion group will animate when expanding
+         * or collapsing.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the accordion group cannot be interacted with.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the accordion group cannot be interacted with,
+         * but does not alter the opacity.
+         */
+        this.readonly = false;
+        /**
+         * Describes the expansion behavior for each accordion.
+         * Possible values are `"compact"` and `"inset"`.
+         * Defaults to `"compact"`.
+         */
+        this.expand = 'compact';
+    }
+    valueChanged() {
+        const { value, multiple } = this;
+        if (!multiple && Array.isArray(value)) {
+            /**
+             * We do some processing on the `value` array so
+             * that it looks more like an array when logged to
+             * the console.
+             * Example given ['a', 'b']
+             * Default toString() behavior: a,b
+             * Custom behavior: ['a', 'b']
+             */
+            printIonWarning(`[ion-accordion-group] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+
+  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
+`, this.el);
+        }
+        /**
+         * Do not use `value` here as that will be
+         * not account for the adjustment we make above.
+         */
+        this.ionValueChange.emit({ value: this.value });
+    }
+    async disabledChanged() {
+        const { disabled } = this;
+        const accordions = await this.getAccordions();
+        for (const accordion of accordions) {
+            accordion.disabled = disabled;
+        }
+    }
+    async readonlyChanged() {
+        const { readonly } = this;
+        const accordions = await this.getAccordions();
+        for (const accordion of accordions) {
+            accordion.readonly = readonly;
+        }
+    }
+    async onKeydown(ev) {
+        const activeElement = document.activeElement;
+        if (!activeElement) {
+            return;
+        }
+        /**
+         * Make sure focus is in the header, not the body, of the accordion. This ensures
+         * that if there are any interactable elements in the body, their keyboard
+         * interaction doesn't get stolen by the accordion. Example: using up/down keys
+         * in ion-textarea.
+         */
+        const activeAccordionHeader = activeElement.closest('ion-accordion [slot="header"]');
+        if (!activeAccordionHeader) {
+            return;
+        }
+        const accordionEl = activeElement.tagName === 'ION-ACCORDION' ? activeElement : activeElement.closest('ion-accordion');
+        if (!accordionEl) {
+            return;
+        }
+        const closestGroup = accordionEl.closest('ion-accordion-group');
+        if (closestGroup !== this.el) {
+            return;
+        }
+        // If the active accordion is not in the current array of accordions, do not do anything
+        const accordions = await this.getAccordions();
+        const startingIndex = accordions.findIndex((a) => a === accordionEl);
+        if (startingIndex === -1) {
+            return;
+        }
+        let accordion;
+        if (ev.key === 'ArrowDown') {
+            accordion = this.findNextAccordion(accordions, startingIndex);
+        }
+        else if (ev.key === 'ArrowUp') {
+            accordion = this.findPreviousAccordion(accordions, startingIndex);
+        }
+        else if (ev.key === 'Home') {
+            accordion = accordions[0];
+        }
+        else if (ev.key === 'End') {
+            accordion = accordions[accordions.length - 1];
+        }
+        if (accordion !== undefined && accordion !== activeElement) {
+            accordion.focus();
+        }
+    }
+    async componentDidLoad() {
+        if (this.disabled) {
+            this.disabledChanged();
+        }
+        if (this.readonly) {
+            this.readonlyChanged();
+        }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.valueChanged();
+    }
+    /**
+     * Sets the value property and emits ionChange.
+     * This should only be called when the user interacts
+     * with the accordion and not for any update
+     * to the value property. The exception is when
+     * the app sets the value of a single-select
+     * accordion group to an array.
+     */
+    setValue(accordionValue) {
+        const value = (this.value = accordionValue);
+        this.ionChange.emit({ value });
+    }
+    /**
+     * This method is used to ensure that the value
+     * of ion-accordion-group is being set in a valid
+     * way. This method should only be called in
+     * response to a user generated action.
+     * @internal
+     */
+    async requestAccordionToggle(accordionValue, accordionExpand) {
+        const { multiple, value, readonly, disabled } = this;
+        if (readonly || disabled) {
+            return;
+        }
+        if (accordionExpand) {
+            /**
+             * If group accepts multiple values
+             * check to see if value is already in
+             * in values array. If not, add it
+             * to the array.
+             */
+            if (multiple) {
+                const groupValue = value !== null && value !== void 0 ? value : [];
+                const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+                const valueExists = processedValue.find((v) => v === accordionValue);
+                if (valueExists === undefined && accordionValue !== undefined) {
+                    this.setValue([...processedValue, accordionValue]);
+                }
+            }
+            else {
+                this.setValue(accordionValue);
+            }
+        }
+        else {
+            /**
+             * If collapsing accordion, either filter the value
+             * out of the values array or unset the value.
+             */
+            if (multiple) {
+                const groupValue = value !== null && value !== void 0 ? value : [];
+                const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+                this.setValue(processedValue.filter((v) => v !== accordionValue));
+            }
+            else {
+                this.setValue(undefined);
+            }
+        }
+    }
+    findNextAccordion(accordions, startingIndex) {
+        const nextAccordion = accordions[startingIndex + 1];
+        if (nextAccordion === undefined) {
+            return accordions[0];
+        }
+        return nextAccordion;
+    }
+    findPreviousAccordion(accordions, startingIndex) {
+        const prevAccordion = accordions[startingIndex - 1];
+        if (prevAccordion === undefined) {
+            return accordions[accordions.length - 1];
+        }
+        return prevAccordion;
+    }
+    /**
+     * @internal
+     */
+    async getAccordions() {
+        return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
+    }
+    render() {
+        const { disabled, readonly, expand } = this;
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', class: {
+                [mode]: true,
+                'accordion-group-disabled': disabled,
+                'accordion-group-readonly': readonly,
+                [`accordion-group-expand-${expand}`]: true,
+            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"],
+        "readonly": ["readonlyChanged"]
+    }; }
+    static get style() { return {
+        ios: accordionGroupIosCss,
+        md: accordionGroupMdCss
+    }; }
+}, [289, "ion-accordion-group", {
+        "animated": [4],
+        "multiple": [4],
+        "value": [1025],
+        "disabled": [4],
+        "readonly": [4],
+        "expand": [1],
+        "requestAccordionToggle": [64],
+        "getAccordions": [64]
+    }, [[0, "keydown", "onKeydown"]], {
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"],
+        "readonly": ["readonlyChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-accordion-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-accordion-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AccordionGroup);
+            }
+            break;
+    } });
+}
+
+const IonAccordionGroup = AccordionGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAccordionGroup, defineCustomElement };