@venite/components 0.16.2 → 0.16.6

package/dist/esm/ion-buttons_6.entry.js

@@ -1,575 +0,0 @@
-import { r as registerInstance, h, H as Host, c as createEvent, d as getElement, a as readTask, w as writeTask, f as forceUpdate } from './index-dcd553ac.js';
-import { g as getIonMode } from './ionic-global-fef4299f.js';
-import { f as findItemLabel, b as renderHiddenInput, c as clamp } from './helpers-8c93393b.js';
-import { c as createColorClasses, h as hostContext } from './theme-74c22054.js';
-import './index-f5b9b789.js';
-import { C as Change } from './change-ea574d32.js';
-import { c as alertController } from './overlays-e1d5aa58.js';
-import { g as getComponentClosestLanguage } from './locale-ec8e14e6.js';
-import './_commonjsHelpers-ba3f0406.js';
-import './hardware-back-button-b3b61715.js';
-
-const buttonsIosCss = ".sc-ion-buttons-ios-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-start:5px;--padding-end:5px;margin-left:2px;margin-right:2px;height:32px;font-size:17px;font-weight:400}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-right:0.3em;font-size:24px;line-height:0.67}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-right:unset;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-left:0.4em;font-size:24px;line-height:0.67}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:unset;-webkit-margin-start:0.4em;margin-inline-start:0.4em}}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:28px;line-height:0.67}";
-
-const buttonsMdCss = ".sc-ion-buttons-md-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;--padding-start:8px;--padding-end:8px;--box-shadow:none;margin-left:2px;margin-right:2px;height:32px;font-size:14px;font-weight:500}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:48px;height:48px}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-right:0.3em;font-size:1.4em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-icon[slot=start]{margin-right:unset;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;margin-left:0.4em;font-size:1.4em}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:unset;-webkit-margin-start:0.4em;margin-inline-start:0.4em}}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}";
-
-const Buttons = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If true, buttons will disappear when its
-     * parent toolbar has fully collapsed if the toolbar
-     * is not the first toolbar. If the toolbar is the
-     * first toolbar, the buttons will be hidden and will
-     * only be shown once all toolbars have fully collapsed.
-     *
-     * Only applies in `ios` mode with `collapse` set to
-     * `true` on `ion-header`.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    this.collapse = false;
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { class: {
-        [mode]: true,
-        ['buttons-collapse']: this.collapse
-      } }));
-  }
-};
-Buttons.style = {
-  ios: buttonsIosCss,
-  md: buttonsMdCss
-};
-
-const checkboxIosCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:1px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--background:var(--ion-item-background, var(--ion-background-color, #fff));--size:26px;width:var(--size);height:var(--size)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.in-item[slot=start]){margin-left:2px;margin-right:20px;margin-top:8px;margin-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:20px;margin-inline-end:20px}}";
-
-const checkboxMdCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.51);--checkmark-width:3;--background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px;width:var(--size);height:var(--size)}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:18px;margin-bottom:18px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";
-
-const Checkbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.inputId = `ion-cb-${checkboxIds++}`;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the checkbox is selected.
-     */
-    this.checked = false;
-    /**
-     * If `true`, the checkbox will visually appear as indeterminate.
-     */
-    this.indeterminate = false;
-    /**
-     * If `true`, the user cannot interact with the checkbox.
-     */
-    this.disabled = false;
-    /**
-     * The value of the toggle does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-     * it's only used when the toggle participates in a native `<form>`.
-     */
-    this.value = 'on';
-    this.onClick = () => {
-      this.setFocus();
-      this.checked = !this.checked;
-      this.indeterminate = false;
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-  }
-  componentWillLoad() {
-    this.emitStyle();
-  }
-  checkedChanged(isChecked) {
-    this.ionChange.emit({
-      checked: isChecked,
-      value: this.value
-    });
-    this.emitStyle();
-  }
-  disabledChanged() {
-    this.emitStyle();
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      'checkbox-checked': this.checked,
-      'interactive-disabled': this.disabled,
-    });
-  }
-  setFocus() {
-    if (this.buttonEl) {
-      this.buttonEl.focus();
-    }
-  }
-  render() {
-    const { inputId, indeterminate, disabled, checked, value, color, el } = this;
-    const labelId = inputId + '-lbl';
-    const mode = getIonMode(this);
-    const label = findItemLabel(el);
-    if (label) {
-      label.id = labelId;
-    }
-    renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
-    let path = indeterminate
-      ? h("path", { d: "M6 12L18 12", part: "mark" })
-      : h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" });
-    if (mode === 'md') {
-      path = indeterminate
-        ? h("path", { d: "M2 12H22", part: "mark" })
-        : h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" });
-    }
-    return (h(Host, { onClick: this.onClick, role: "checkbox", "aria-disabled": disabled ? 'true' : null, "aria-checked": `${checked}`, "aria-labelledby": labelId, class: Object.assign(Object.assign({}, createColorClasses(color)), { [mode]: true, 'in-item': hostContext('ion-item', el), 'checkbox-checked': checked, 'checkbox-disabled': disabled, 'checkbox-indeterminate': indeterminate, 'interactive': true }) }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, ref: btnEl => this.buttonEl = btnEl })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["checkedChanged"],
-    "disabled": ["disabledChanged"]
-  }; }
-};
-let checkboxIds = 0;
-Checkbox.style = {
-  ios: checkboxIosCss,
-  md: checkboxMdCss
-};
-
-const TRANSITION = 'all 0.2s ease-in-out';
-const cloneElement = (tagName) => {
-    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
-    if (getCachedEl !== null) {
-        return getCachedEl;
-    }
-    const clonedEl = document.createElement(tagName);
-    clonedEl.classList.add('ion-cloned-element');
-    clonedEl.style.setProperty('display', 'none');
-    document.body.appendChild(clonedEl);
-    return clonedEl;
-};
-const createHeaderIndex = (headerEl) => {
-    if (!headerEl) {
-        return;
-    }
-    const toolbars = headerEl.querySelectorAll('ion-toolbar');
-    return {
-        el: headerEl,
-        toolbars: Array.from(toolbars).map((toolbar) => {
-            const ionTitleEl = toolbar.querySelector('ion-title');
-            return {
-                el: toolbar,
-                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
-                ionTitleEl,
-                innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
-                ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
-            };
-        }) || []
-    };
-};
-const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
-    readTask(() => {
-        const scrollTop = scrollEl.scrollTop;
-        const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);
-        // Native refresher should not cause titles to scale
-        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
-        if (nativeRefresher === null) {
-            writeTask(() => {
-                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-            });
-        }
-    });
-};
-const setToolbarBackgroundOpacity = (toolbar, opacity) => {
-    if (opacity === undefined) {
-        toolbar.background.style.removeProperty('--opacity');
-    }
-    else {
-        toolbar.background.style.setProperty('--opacity', opacity.toString());
-    }
-};
-const handleToolbarBorderIntersection = (ev, mainHeaderIndex) => {
-    if (!ev[0].isIntersecting) {
-        return;
-    }
-    /**
-     * There is a bug in Safari where overflow scrolling on a non-body element
-     * does not always reset the scrollTop position to 0 when letting go. It will
-     * set to 1 once the rubber band effect has ended. This causes the background to
-     * appear slightly on certain app setups.
-     */
-    const scale = (ev[0].intersectionRatio > 0.9) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-        setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);
-    });
-};
-/**
- * If toolbars are intersecting, hide the scrollable toolbar content
- * and show the primary toolbar content. If the toolbars are not intersecting,
- * hide the primary toolbar content and show the scrollable toolbar content
- */
-const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex) => {
-    writeTask(() => {
-        handleToolbarBorderIntersection(ev, mainHeaderIndex);
-        const event = ev[0];
-        const intersection = event.intersectionRect;
-        const intersectionArea = intersection.width * intersection.height;
-        const rootArea = event.rootBounds.width * event.rootBounds.height;
-        const isPageHidden = intersectionArea === 0 && rootArea === 0;
-        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
-        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
-        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
-        if (isPageHidden || isPageTransitioning) {
-            return;
-        }
-        if (event.isIntersecting) {
-            setHeaderActive(mainHeaderIndex, false);
-            setHeaderActive(scrollHeaderIndex);
-        }
-        else {
-            /**
-             * There is a bug with IntersectionObserver on Safari
-             * where `event.isIntersecting === false` when cancelling
-             * a swipe to go back gesture. Checking the intersection
-             * x, y, width, and height provides a workaround. This bug
-             * does not happen when using Safari + Web Animations,
-             * only Safari + CSS Animations.
-             */
-            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
-            if (hasValidIntersection) {
-                setHeaderActive(mainHeaderIndex);
-                setHeaderActive(scrollHeaderIndex, false);
-                setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
-            }
-        }
-    });
-};
-const setHeaderActive = (headerIndex, active = true) => {
-    if (active) {
-        headerIndex.el.classList.remove('header-collapse-condense-inactive');
-    }
-    else {
-        headerIndex.el.classList.add('header-collapse-condense-inactive');
-    }
-};
-const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
-    toolbars.forEach(toolbar => {
-        const ionTitle = toolbar.ionTitleEl;
-        const titleDiv = toolbar.innerTitleEl;
-        if (!ionTitle || ionTitle.size !== 'large') {
-            return;
-        }
-        titleDiv.style.transformOrigin = 'left center';
-        titleDiv.style.transition = (transition) ? TRANSITION : '';
-        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
-    });
-};
-
-const headerIosCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:7px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}";
-
-const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:\"\"}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}";
-
-const Header = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.collapsibleHeaderInitialized = false;
-    /**
-     * If `true`, the header will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     *
-     * Note: In order to scroll content behind the header, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    this.translucent = false;
-  }
-  async componentDidLoad() {
-    await this.checkCollapsibleHeader();
-  }
-  async componentDidUpdate() {
-    await this.checkCollapsibleHeader();
-  }
-  componentDidUnload() {
-    this.destroyCollapsibleHeader();
-  }
-  async checkCollapsibleHeader() {
-    // Determine if the header can collapse
-    const hasCollapse = this.collapse === 'condense';
-    const canCollapse = (hasCollapse && getIonMode(this) === 'ios') ? hasCollapse : false;
-    if (!canCollapse && this.collapsibleHeaderInitialized) {
-      this.destroyCollapsibleHeader();
-    }
-    else if (canCollapse && !this.collapsibleHeaderInitialized) {
-      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
-      await this.setupCollapsibleHeader(contentEl, pageEl);
-    }
-  }
-  destroyCollapsibleHeader() {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-    if (this.scrollEl && this.contentScrollCallback) {
-      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
-      this.contentScrollCallback = undefined;
-    }
-    if (this.collapsibleMainHeader) {
-      this.collapsibleMainHeader.classList.remove('header-collapse-main');
-      this.collapsibleMainHeader = undefined;
-    }
-  }
-  async setupCollapsibleHeader(contentEl, pageEl) {
-    if (!contentEl || !pageEl) {
-      console.error('ion-header requires a content to collapse, make sure there is an ion-content.');
-      return;
-    }
-    this.scrollEl = await contentEl.getScrollElement();
-    const headers = pageEl.querySelectorAll('ion-header');
-    this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
-    if (!this.collapsibleMainHeader) {
-      return;
-    }
-    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
-    const scrollHeaderIndex = createHeaderIndex(this.el);
-    if (!mainHeaderIndex || !scrollHeaderIndex) {
-      return;
-    }
-    setHeaderActive(mainHeaderIndex, false);
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-      setToolbarBackgroundOpacity(toolbar, 0);
-    });
-    /**
-     * Handle interaction between toolbar collapse and
-     * showing/hiding content in the primary ion-header
-     * as well as progressively showing/hiding the main header
-     * border as the top-most toolbar collapses or expands.
-     */
-    const toolbarIntersection = (ev) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
-    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] });
-    this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
-    /**
-     * Handle scaling of large iOS titles and
-     * showing/hiding border on last toolbar
-     * in primary header
-     */
-    this.contentScrollCallback = () => { handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl); };
-    this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
-    writeTask(() => {
-      const title = cloneElement('ion-title');
-      title.size = 'large';
-      cloneElement('ion-back-button');
-      if (this.collapsibleMainHeader !== undefined) {
-        this.collapsibleMainHeader.classList.add('header-collapse-main');
-      }
-    });
-    this.collapsibleHeaderInitialized = true;
-  }
-  render() {
-    const { translucent } = this;
-    const mode = getIonMode(this);
-    const collapse = this.collapse || 'none';
-    return (h(Host, { role: "banner", class: {
-        [mode]: true,
-        // Used internally for styling
-        [`header-${mode}`]: true,
-        [`header-translucent`]: this.translucent,
-        [`header-collapse-${collapse}`]: true,
-        [`header-translucent-${mode}`]: this.translucent,
-      } }, mode === 'ios' && translucent &&
-      h("div", { class: "header-background" }), h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-Header.style = {
-  ios: headerIosCss,
-  md: headerMdCss
-};
-
-const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:var(--opacity);z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{flex:1;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}:host(.toolbar-searchbar) ::slotted(ion-back-button){height:38px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:3}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{flex-wrap:wrap;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{flex:1;order:8;min-width:100%}";
-
-const toolbarMdCss = ":host{--border-width:0;--border-style:solid;--opacity:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--ion-safe-area-left);padding-right:var(--ion-safe-area-right);display:block;position:relative;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toolbar-container{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:var(--opacity);z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{flex:1;order:3;min-width:0;max-width:100%}::slotted(ion-segment){min-height:var(--min-height)}::slotted(.buttons-first-slot){margin-left:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-first-slot){margin-left:unset;-webkit-margin-start:4px;margin-inline-start:4px}}::slotted(.buttons-last-slot){margin-right:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(.buttons-last-slot){margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}::slotted([slot=start]){order:2}::slotted([slot=secondary]){order:4}::slotted([slot=primary]){order:5;text-align:end}::slotted([slot=end]){order:6;text-align:end}";
-
-const Toolbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.childrenStyles = new Map();
-  }
-  componentWillLoad() {
-    const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
-    const firstButtons = buttons.find(button => {
-      return button.slot === 'start';
-    });
-    if (firstButtons) {
-      firstButtons.classList.add('buttons-first-slot');
-    }
-    const buttonsReversed = buttons.reverse();
-    const lastButtons = buttonsReversed.find(button => button.slot === 'end') ||
-      buttonsReversed.find(button => button.slot === 'primary') ||
-      buttonsReversed.find(button => button.slot === 'secondary');
-    if (lastButtons) {
-      lastButtons.classList.add('buttons-last-slot');
-    }
-  }
-  childrenStyle(ev) {
-    ev.stopPropagation();
-    const tagName = ev.target.tagName;
-    const updatedStyles = ev.detail;
-    const newStyles = {};
-    const childStyles = this.childrenStyles.get(tagName) || {};
-    let hasStyleChange = false;
-    Object.keys(updatedStyles).forEach(key => {
-      const childKey = `toolbar-${key}`;
-      const newValue = updatedStyles[key];
-      if (newValue !== childStyles[childKey]) {
-        hasStyleChange = true;
-      }
-      if (newValue) {
-        newStyles[childKey] = true;
-      }
-    });
-    if (hasStyleChange) {
-      this.childrenStyles.set(tagName, newStyles);
-      forceUpdate(this);
-    }
-  }
-  render() {
-    const mode = getIonMode(this);
-    const childStyles = {};
-    this.childrenStyles.forEach(value => {
-      Object.assign(childStyles, value);
-    });
-    return (h(Host, { class: Object.assign(Object.assign({ 'in-toolbar': hostContext('ion-toolbar', this.el), [mode]: true }, childStyles), createColorClasses(this.color)) }, h("div", { class: "toolbar-background" }), h("div", { class: "toolbar-container" }, h("slot", { name: "start" }), h("slot", { name: "secondary" }), h("div", { class: "toolbar-content" }, h("slot", null)), h("slot", { name: "primary" }), h("slot", { name: "end" }))));
-  }
-  get el() { return getElement(this); }
-};
-Toolbar.style = {
-  ios: toolbarIosCss,
-  md: toolbarMdCss
-};
-
-const EditableBooleanComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ldfDocShouldChange = createEvent(this, "ldfDocShouldChange", 7);
-  }
-  // Lifecycle methods
-  componentWillLoad() {
-    if (this.value == undefined) {
-      this.ldfDocShouldChange.emit(new Change({
-        path: this.path,
-        op: [{
-            type: 'set',
-            index: this.property,
-            oldValue: undefined,
-            value: false
-          }]
-      }));
-    }
-  }
-  // Listeners
-  onChange(ev) {
-    const oldValue = this.value, value = ev.detail.checked;
-    if (value !== oldValue) {
-      this.ldfDocShouldChange.emit(new Change({
-        path: this.path,
-        op: [
-          { type: 'set', index: this.property, oldValue: oldValue === undefined ? false : oldValue, value }
-        ]
-      }));
-    }
-  }
-  render() {
-    return (h("ion-checkbox", { checked: this.value }));
-  }
-  get element() { return getElement(this); }
-};
-
-const cancel = "Cancel";
-const confirm_header = "Confirm Deletion";
-const confirm_message = "Are you sure you want to delete this item?";
-const EN = {
-	cancel: cancel,
-	confirm_header: confirm_header,
-	confirm_message: confirm_message,
-	"delete": "Delete"
-};
-
-const LOCALE = {
-  'en': EN
-};
-const EditableDeleteComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ldfDocShouldChange = createEvent(this, "ldfDocShouldChange", 7);
-    this.type = 'array';
-  }
-  // Listeners
-  async onClick() {
-    // show a confirmation alert
-    const alert = await alertController.create({
-      header: this.localeStrings.confirm_header,
-      message: this.localeStrings.confirm_message,
-      buttons: [
-        {
-          text: this.localeStrings.cancel,
-          role: 'cancel',
-          cssClass: 'secondary'
-        }, {
-          text: this.localeStrings.delete,
-          role: 'submit',
-          cssClass: 'danger',
-          handler: () => {
-            this.delete();
-          }
-        }
-      ]
-    });
-    // show the alert
-    return alert.present();
-  }
-  delete() {
-    if (this.type === 'array') {
-      this.ldfDocShouldChange.emit(new Change({
-        path: this.base,
-        op: [{ type: 'deleteAt', index: this.index, oldValue: this.obj }]
-      }));
-    }
-    else {
-      this.ldfDocShouldChange.emit(new Change({
-        path: this.base,
-        op: [{ type: 'delete', index: this.index, oldValue: this.obj }]
-      }));
-    }
-  }
-  // Lifecycle events
-  async componentWillLoad() {
-    this.loadLocaleStrings();
-  }
-  // Methods
-  async loadLocaleStrings() {
-    try {
-      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
-    }
-    catch (e) {
-      console.warn(e);
-    }
-  }
-  render() {
-    const localeStrings = this.localeStrings || {};
-    return (h("ion-buttons", null, h("ion-button", { "aria-role": 'button', "aria-label": localeStrings.delete, size: 'small' }, h("ion-icon", { name: 'trash', slot: 'icon-only' }))));
-  }
-  get element() { return getElement(this); }
-};
-
-export { Buttons as ion_buttons, Checkbox as ion_checkbox, Header as ion_header, Toolbar as ion_toolbar, EditableBooleanComponent as ldf_editable_boolean, EditableDeleteComponent as ldf_editable_delete };