@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/input.utils.js

@@ -1,147 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 };
+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}

package/components/ion-accordion-group.js

@@ -1,272 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 };
+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}