@amwaljs/checkout-button 0.3.0 → 0.3.1

package/dist/esm/ion-nav-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-xxOnfNPU.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -26,16 +26,16 @@ const navLink = (el, routerDirection, component, componentProps, routerAnimation
 const NavLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * The transition direction when navigating to another page.
-         */
-        this.routerDirection = 'forward';
         this.onClick = () => {
             return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
         };
+        this.component = undefined;
+        this.componentProps = undefined;
+        this.routerDirection = 'forward';
+        this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
+        return h(Host, { key: 'dab6e8a908395d99c87452c5e5aa4e61d9e72435', onClick: this.onClick });
     }
     get el() { return getElement(this); }
 };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, d as createEvent, c as config, i as printIonWarning, h, g as getElement } from './index-xxOnfNPU.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-93OyAGoo.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { s as shallowEqualStringMap, l as assert } from './helpers-BuFc0hrS.js';
-import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-DoRYA1qF.js';
-import { g as getIonMode } from './ionic-global-BbOE2Sur.js';
-import { a as attachComponent } from './framework-delegate-29_VtSmv.js';
+import { s as shallowEqualStringMap, m as assert } from './helpers-C6kqtbmV.js';
+import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-CNcx43L8.js';
+import { g as getIonMode, c as config } from './ionic-global-DXXzPLPc.js';
+import { a as attachComponent } from './framework-delegate-D_uGiYYw.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -90,10 +90,12 @@ const Nav = class {
         this.destroyed = false;
         this.views = [];
         this.didLoad = false;
-        /**
-         * If `true`, the nav should animate the transition of components.
-         */
+        this.delegate = undefined;
+        this.swipeGesture = undefined;
         this.animated = true;
+        this.animation = undefined;
+        this.rootParams = undefined;
+        this.root = undefined;
     }
     swipeGestureChanged() {
         if (this.gesture) {
@@ -129,7 +131,7 @@ const Nav = class {
         // We want to set this flag before any watch callbacks are manually called
         this.didLoad = true;
         this.rootChanged();
-        this.gesture = (await import('./swipe-back-BXQCI3bV.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.gesture = (await import('./swipe-back-DE05lWQD.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
         this.swipeGestureChanged();
     }
     connectedCallback() {
@@ -385,11 +387,8 @@ const Nav = class {
     async getPrevious(view) {
         return this.getPreviousSync(view);
     }
-    /**
-     * Returns the number of views in the stack.
-     */
-    async getLength() {
-        return Promise.resolve(this.views.length);
+    getLength() {
+        return this.views.length;
     }
     getActiveSync() {
         return this.views[this.views.length - 1];
@@ -673,7 +672,7 @@ const Nav = class {
         const finalNumViews = this.views.length + ((_b = insertViews === null || insertViews === void 0 ? void 0 : insertViews.length) !== null && _b !== void 0 ? _b : 0) - (removeCount !== null && removeCount !== void 0 ? removeCount : 0);
         assert(finalNumViews >= 0, 'final balance can not be negative');
         if (finalNumViews === 0) {
-            printIonWarning(`[ion-nav] - You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
+            console.warn(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
             throw new Error('navigation stack needs at least one root page');
         }
         // At this point the transition can not be rejected, any throw should be an error
@@ -895,7 +894,7 @@ const Nav = class {
         }
     }
     render() {
-        return h("slot", { key: '8067c9835d255daec61f33dba200fd3a6ff839a0' });
+        return h("slot", { key: '6894eccc60e446294b01261477691ea1e88348ab' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,20 +1,21 @@
-import { r as registerInstance, h, H as Host } from './index-xxOnfNPU.js';
+import { r as registerInstance, h, H as Host } from './index-93OyAGoo.js';
 import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { g as getIonMode } from './ionic-global-BbOE2Sur.js';
+import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
 
-const noteIosCss = () => `:host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6));font-size:max(14px, 1rem)}`;
+const noteIosCss = () => `:host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6);font-size:max(14px, 1rem)}`;
 
-const noteMdCss = () => `:host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));font-size:0.875rem}`;
+const noteMdCss = () => `:host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);font-size:0.875rem}`;
 
 const Note = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.color = undefined;
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0ec2ef7367d867fd7588611953f696eecdf3221e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '79a17a318ec6e8326c9741b4a9bb4598acdc225e', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'a200b94ddffb29cf6dabe6e984220930ea7efdef' })));
+            }) }, h("slot", { key: '5adeaccfabb4bee7b84ea5c5de804bd255b29255' })));
     }
 };
 Note.style = {

package/dist/esm/{ion-picker-legacy-column.entry.js → ion-picker-column.entry.js}

@@ -1,14 +1,14 @@
-import { r as registerInstance, d as createEvent, h, H as Host, g as getElement } from './index-xxOnfNPU.js';
-import { a as clamp } from './helpers-BuFc0hrS.js';
-import { a as hapticSelectionChanged, b as hapticSelectionEnd, h as hapticSelectionStart } from './haptic-C3ucbArX.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93OyAGoo.js';
+import { e as clamp } from './helpers-C6kqtbmV.js';
+import { a as hapticSelectionChanged, b as hapticSelectionEnd, h as hapticSelectionStart } from './haptic-D5jGzBs8.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
-import { g as getIonMode } from './ionic-global-BbOE2Sur.js';
+import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
 import './capacitor-CG3xQUND.js';
 import './index-ZjP4CjeZ.js';
 
-const pickerColumnIosCss = () => `.picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:center center;height:46px;transform-style:preserve-3d;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){transform-origin:calc(100% - center) center}}`;
+const pickerColumnIosCss = () => `.picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:center center;height:46px;transform-style:preserve-3d;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){transform-origin:calc(100% - center) center}}`;
 
-const pickerColumnMdCss = () => `.picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #0054e9)}`;
+const pickerColumnMdCss = () => `.picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}`;
 
 const PickerColumnCmp = class {
     constructor(hostRef) {
@@ -28,6 +28,7 @@ const PickerColumnCmp = class {
         // Ex: column is created with 3 options. User updates the column data
         // to have 5 options. The column will still think it only has 3 options.
         this.colDidChange = false;
+        this.col = undefined;
     }
     colChanged() {
         this.colDidChange = true;
@@ -42,7 +43,7 @@ const PickerColumnCmp = class {
         }
         this.rotateFactor = pickerRotateFactor;
         this.scaleFactor = pickerScaleFactor;
-        this.gesture = (await import('./index-CF4QYFB3.js')).createGesture({
+        this.gesture = (await import('./index-CcopIPA0.js')).createGesture({
             el: this.el,
             gestureName: 'picker-swipe',
             gesturePriority: 100,
@@ -330,7 +331,7 @@ const PickerColumnCmp = class {
         const colEl = this.optsEl;
         if (colEl) {
             // DOM READ
-            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
             this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
         }
         this.refresh(forceRefresh, animated);
@@ -338,9 +339,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ed32d108dd94f0302fb453c31a3497ebae65ec37', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '49bb4c67a67c7318d4c305df78ceabae36355112', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '9f0634890e66fd4ae74f826d1eea3431de121393', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '337e996e5be91af16446085fe22436f213b771eb', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'd69a132599d78d9e5107f12228978cfce4e43098', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '7e65761d24473e4ba0ce2d4fc707a5c5e8127903', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '65c3aea609401e8ae4ea6d363a1b9436796c0a86', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'c2e5a324ba95dd8832d3eb81b139e1f674d74a35', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -358,4 +359,4 @@ PickerColumnCmp.style = {
     md: pickerColumnMdCss()
 };
 
-export { PickerColumnCmp as ion_picker_legacy_column };
+export { PickerColumnCmp as ion_picker_column };

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

@@ -0,0 +1,277 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93OyAGoo.js';
+import { d as raf } from './helpers-C6kqtbmV.js';
+import { c as createLockController } from './lock-controller-B-hirT0v.js';
+import { c as createDelegateController, d as createTriggerController, B as BACKDROP, i as isCancel, e as prepareOverlay, s as setOverlayId, f as present, h as dismiss, j as eventMethod, k as safeCall } from './overlays-SBLrmFy6.js';
+import { g as getClassMap } from './theme-DiVJyqlX.js';
+import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { c as createAnimation } from './animation-DRf3dwMu.js';
+import './index-ZjP4CjeZ.js';
+import './hardware-back-button-CzxcJiYO.js';
+import './framework-delegate-D_uGiYYw.js';
+import './index-D8d_89Nl.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Picker Enter Animation
+ */
+const iosEnterAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Picker Leave Animation
+ */
+const iosLeaveAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+const pickerIosCss = () => `.sc-ion-picker-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-ios-h{left:0}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-ios-h{display:none}.picker-wrapper.sc-ion-picker-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;transform:translate3d(0,  100%,  0);display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-ios:active,.picker-button.sc-ion-picker-ios:focus{outline:none}.picker-columns.sc-ion-picker-ios{display:flex;position:relative;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-ios,.picker-below-highlight.sc-ion-picker-ios{display:none;pointer-events:none}.sc-ion-picker-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-ios{display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-ios{flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-ios:last-child .picker-button.sc-ion-picker-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-ios{height:215px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{top:0;transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-ios{top:115px;transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}`;
+
+const pickerMdCss = () => `.sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-md-h{left:0}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;transform:translate3d(0,  100%,  0);display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:flex;position:relative;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:flex;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;box-shadow:none}.picker-columns.sc-ion-picker-md{height:216px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{top:0;transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-md{top:115px;transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}`;
+
+const Picker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
+        this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
+        this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
+        this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
+        this.didPresentShorthand = createEvent(this, "didPresent", 7);
+        this.willPresentShorthand = createEvent(this, "willPresent", 7);
+        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
+        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+        this.presented = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.hasController = false;
+        this.keyboardClose = true;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.buttons = [];
+        this.columns = [];
+        this.cssClass = undefined;
+        this.duration = 0;
+        this.showBackdrop = true;
+        this.backdropDismiss = true;
+        this.animated = true;
+        this.htmlAttributes = undefined;
+        this.isOpen = false;
+        this.trigger = undefined;
+    }
+    onIsOpenChange(newValue, oldValue) {
+        if (newValue === true && oldValue === false) {
+            this.present();
+        }
+        else if (newValue === false && oldValue === true) {
+            this.dismiss();
+        }
+    }
+    triggerChanged() {
+        const { trigger, el, triggerController } = this;
+        if (trigger) {
+            triggerController.addClickListener(el, trigger);
+        }
+    }
+    connectedCallback() {
+        prepareOverlay(this.el);
+        this.triggerChanged();
+    }
+    disconnectedCallback() {
+        this.triggerController.removeClickListener();
+    }
+    componentWillLoad() {
+        setOverlayId(this.el);
+    }
+    componentDidLoad() {
+        /**
+         * If picker was rendered with isOpen="true"
+         * then we should open picker immediately.
+         */
+        if (this.isOpen === true) {
+            raf(() => this.present());
+        }
+        /**
+         * 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.triggerChanged();
+    }
+    /**
+     * Present the picker overlay after it has been created.
+     */
+    async present() {
+        const unlock = await this.lockController.lock();
+        await this.delegateController.attachViewToDom();
+        await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+        if (this.duration > 0) {
+            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
+        }
+        unlock();
+    }
+    /**
+     * Dismiss the picker overlay after it has been presented.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the picker.
+     * This can be useful in a button handler for determining which button was
+     * clicked to dismiss the picker.
+     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     *
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     */
+    async dismiss(data, role) {
+        const unlock = await this.lockController.lock();
+        if (this.durationTimeout) {
+            clearTimeout(this.durationTimeout);
+        }
+        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+        if (dismissed) {
+            this.delegateController.removeViewFromDom();
+        }
+        unlock();
+        return dismissed;
+    }
+    /**
+     * Returns a promise that resolves when the picker did dismiss.
+     */
+    onDidDismiss() {
+        return eventMethod(this.el, 'ionPickerDidDismiss');
+    }
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss() {
+        return eventMethod(this.el, 'ionPickerWillDismiss');
+    }
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name) {
+        return Promise.resolve(this.columns.find((column) => column.name === name));
+    }
+    async buttonClick(button) {
+        const role = button.role;
+        if (isCancel(role)) {
+            return this.dismiss(undefined, role);
+        }
+        const shouldDismiss = await this.callButtonHandler(button);
+        if (shouldDismiss) {
+            return this.dismiss(this.getSelected(), button.role);
+        }
+        return Promise.resolve();
+    }
+    async callButtonHandler(button) {
+        if (button) {
+            // a handler has been provided, execute it
+            // pass the handler the values from the inputs
+            const rtn = await safeCall(button.handler, this.getSelected());
+            if (rtn === false) {
+                // if the return value of the handler is false then do not dismiss
+                return false;
+            }
+        }
+        return true;
+    }
+    getSelected() {
+        const selected = {};
+        this.columns.forEach((col, index) => {
+            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
+            selected[col.name] = {
+                text: selectedColumn ? selectedColumn.text : undefined,
+                value: selectedColumn ? selectedColumn.value : undefined,
+                columnIndex: index,
+            };
+        });
+        return selected;
+    }
+    render() {
+        const { htmlAttributes } = this;
+        const mode = getIonMode(this);
+        return (h(Host, Object.assign({ key: 'eb5f91ea74fb11daa6942f779ef461742cad9ecb', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+                zIndex: `${20000 + this.overlayIndex}`,
+            }, class: Object.assign({ [mode]: true,
+                // Used internally for styling
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '7ea872d939e62f14129fff15334b2822ad2360c9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '2d77c225091eacab0207e28c96b966122afafef0', tabindex: "0" }), h("div", { key: '630d21e0c60ad97b71462cdc540858bb6ced0b8f', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'fa8553ec8d2ce8bf93e16e02334b6475cb51b5d4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '177d1bcbd0ce38f16d9c936295a917fb981d02d7', class: "picker-columns" }, h("div", { key: 'be99b6e0279c210ef91a88ccc81acc7d37917a53', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: 'b36b21e8133b59e873e1d3447a1279f1b971c854', class: "picker-below-highlight" }))), h("div", { key: '17cea6dd24dbb0a08073ca4a84bfe027eb24833d', tabindex: "0" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "onIsOpenChange": 0
+            }],
+        "trigger": [{
+                "triggerChanged": 0
+            }]
+    }; }
+};
+const buttonWrapperClass = (button) => {
+    return {
+        [`picker-toolbar-${button.role}`]: button.role !== undefined,
+        'picker-toolbar-button': true,
+    };
+};
+const buttonClass = (button) => {
+    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
+};
+Picker.style = {
+    ios: pickerIosCss(),
+    md: pickerMdCss()
+};
+
+export { Picker as ion_picker };