@sparkle-learning/core 0.0.55 → 0.0.57

package/dist/sparkle-core/ion-picker-internal.entry.js

@@ -0,0 +1,454 @@
+import { r as registerInstance, q as createEvent, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { g as getElementRoot } from './helpers-f11f0674.js';
+
+const pickerInternalIosCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{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%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-highlight{background:var(--ion-color-step-150, #eeeeef)}";
+
+const pickerInternalMdCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{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) 90%)}:host .picker-after{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) 90%)}";
+
+const PickerInternal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
+    this.useInputMode = false;
+    this.isInHighlightBounds = (ev) => {
+      const { highlightEl } = this;
+      if (!highlightEl) {
+        return false;
+      }
+      const bbox = highlightEl.getBoundingClientRect();
+      /**
+       * Check to see if the user clicked
+       * outside the bounds of the highlight.
+       */
+      const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
+      const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
+      if (outsideX || outsideY) {
+        return false;
+      }
+      return true;
+    };
+    /**
+     * If we are no longer focused
+     * on a picker column, then we should
+     * exit input mode. An exception is made
+     * for the input in the picker since having
+     * that focused means we are still in input mode.
+     */
+    this.onFocusOut = (ev) => {
+      const { relatedTarget } = ev;
+      if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
+        this.exitInputMode();
+      }
+    };
+    /**
+     * When picker columns receive focus
+     * the parent picker needs to determine
+     * whether to enter/exit input mode.
+     */
+    this.onFocusIn = (ev) => {
+      const { target } = ev;
+      /**
+       * Due to browser differences in how/when focus
+       * is dispatched on certain elements, we need to
+       * make sure that this function only ever runs when
+       * focusing a picker column.
+       */
+      if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
+        return;
+      }
+      /**
+       * If we have actionOnClick
+       * then this means the user focused
+       * a picker column via mouse or
+       * touch (i.e. a PointerEvent). As a result,
+       * we should not enter/exit input mode
+       * until the click event has fired, which happens
+       * after the `focusin` event.
+       *
+       * Otherwise, the user likely focused
+       * the column using their keyboard and
+       * we should enter/exit input mode automatically.
+       */
+      if (!this.actionOnClick) {
+        const columnEl = target;
+        const allowInput = columnEl.numericInput;
+        if (allowInput) {
+          this.enterInputMode(columnEl, false);
+        }
+        else {
+          this.exitInputMode();
+        }
+      }
+    };
+    /**
+     * On click we need to run an actionOnClick
+     * function that has been set in onPointerDown
+     * so that we enter/exit input mode correctly.
+     */
+    this.onClick = () => {
+      const { actionOnClick } = this;
+      if (actionOnClick) {
+        actionOnClick();
+        this.actionOnClick = undefined;
+      }
+    };
+    /**
+     * Clicking a column also focuses the column on
+     * certain browsers, so we use onPointerDown
+     * to tell the onFocusIn function that users
+     * are trying to click the column rather than
+     * focus the column using the keyboard. When the
+     * user completes the click, the onClick function
+     * runs and runs the actionOnClick callback.
+     */
+    this.onPointerDown = (ev) => {
+      const { useInputMode, inputModeColumn, el } = this;
+      if (this.isInHighlightBounds(ev)) {
+        /**
+         * If we were already in
+         * input mode, then we should determine
+         * if we tapped a particular column and
+         * should switch to input mode for
+         * that specific column.
+         */
+        if (useInputMode) {
+          /**
+           * If we tapped a picker column
+           * then we should either switch to input
+           * mode for that column or all columns.
+           * Otherwise we should exit input mode
+           * since we just tapped the highlight and
+           * not a column.
+           */
+          if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
+            /**
+             * If user taps 2 different columns
+             * then we should just switch to input mode
+             * for the new column rather than switching to
+             * input mode for all columns.
+             */
+            if (inputModeColumn && inputModeColumn === ev.target) {
+              this.actionOnClick = () => {
+                this.enterInputMode();
+              };
+            }
+            else {
+              this.actionOnClick = () => {
+                this.enterInputMode(ev.target);
+              };
+            }
+          }
+          else {
+            this.actionOnClick = () => {
+              this.exitInputMode();
+            };
+          }
+          /**
+           * If we were not already in
+           * input mode, then we should
+           * enter input mode for all columns.
+           */
+        }
+        else {
+          /**
+           * If there is only 1 numeric input column
+           * then we should skip multi column input.
+           */
+          const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
+          const columnEl = columns.length === 1 ? ev.target : undefined;
+          this.actionOnClick = () => {
+            this.enterInputMode(columnEl);
+          };
+        }
+        return;
+      }
+      this.actionOnClick = () => {
+        this.exitInputMode();
+      };
+    };
+    /**
+     * Enters input mode to allow
+     * for text entry of numeric values.
+     * If on mobile, we focus a hidden input
+     * field so that the on screen keyboard
+     * is brought up. When tabbing using a
+     * keyboard, picker columns receive an outline
+     * to indicate they are focused. As a result,
+     * we should not focus the hidden input as it
+     * would cause the outline to go away, preventing
+     * users from having any visual indication of which
+     * column is focused.
+     */
+    this.enterInputMode = (columnEl, focusInput = true) => {
+      const { inputEl, el } = this;
+      if (!inputEl) {
+        return;
+      }
+      /**
+       * Only active input mode if there is at
+       * least one column that accepts numeric input.
+       */
+      const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
+      if (!hasInputColumn) {
+        return;
+      }
+      /**
+       * If columnEl is undefined then
+       * it is assumed that all numeric pickers
+       * are eligible for text entry.
+       * (i.e. hour and minute columns)
+       */
+      this.useInputMode = true;
+      this.inputModeColumn = columnEl;
+      /**
+       * Users with a keyboard and mouse can
+       * activate input mode where the input is
+       * focused as well as when it is not focused,
+       * so we need to make sure we clean up any
+       * old listeners.
+       */
+      if (focusInput) {
+        if (this.destroyKeypressListener) {
+          this.destroyKeypressListener();
+          this.destroyKeypressListener = undefined;
+        }
+        inputEl.focus();
+      }
+      else {
+        el.addEventListener('keypress', this.onKeyPress);
+        this.destroyKeypressListener = () => {
+          el.removeEventListener('keypress', this.onKeyPress);
+        };
+      }
+      this.emitInputModeChange();
+    };
+    this.exitInputMode = () => {
+      const { inputEl, useInputMode } = this;
+      if (!useInputMode || !inputEl) {
+        return;
+      }
+      this.useInputMode = false;
+      this.inputModeColumn = undefined;
+      inputEl.blur();
+      inputEl.value = '';
+      if (this.destroyKeypressListener) {
+        this.destroyKeypressListener();
+        this.destroyKeypressListener = undefined;
+      }
+      this.emitInputModeChange();
+    };
+    this.onKeyPress = (ev) => {
+      const { inputEl } = this;
+      if (!inputEl) {
+        return;
+      }
+      const parsedValue = parseInt(ev.key, 10);
+      /**
+       * Only numbers should be allowed
+       */
+      if (!Number.isNaN(parsedValue)) {
+        inputEl.value += ev.key;
+        this.onInputChange();
+      }
+    };
+    this.selectSingleColumn = () => {
+      const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
+      if (!inputEl || !inputModeColumn) {
+        return;
+      }
+      const values = inputModeColumn.items.filter((item) => item.disabled !== true);
+      /**
+       * If users pause for a bit, the search
+       * value should be reset similar to how a
+       * <select> behaves. So typing "34", waiting,
+       * then typing "5" should select "05".
+       */
+      if (singleColumnSearchTimeout) {
+        clearTimeout(singleColumnSearchTimeout);
+      }
+      this.singleColumnSearchTimeout = setTimeout(() => {
+        inputEl.value = '';
+        this.singleColumnSearchTimeout = undefined;
+      }, 1000);
+      /**
+       * For values that are longer than 2 digits long
+       * we should shift the value over 1 character
+       * to the left. So typing "456" would result in "56".
+       * TODO: If we want to support more than just
+       * time entry, we should update this value to be
+       * the max length of all of the picker items.
+       */
+      if (inputEl.value.length >= 3) {
+        const startIndex = inputEl.value.length - 2;
+        const newString = inputEl.value.substring(startIndex);
+        inputEl.value = newString;
+        this.selectSingleColumn();
+        return;
+      }
+      /**
+       * Checking the value of the input gets priority
+       * first. For example, if the value of the input
+       * is "1" and we entered "2", then the complete value
+       * is "12" and we should select hour 12.
+       *
+       * Regex removes any leading zeros from values like "02".
+       */
+      const findItemFromCompleteValue = values.find(({ text }) => text.replace(/^0+/, '') === inputEl.value);
+      if (findItemFromCompleteValue) {
+        inputModeColumn.setValue(findItemFromCompleteValue.value);
+        return;
+      }
+      /**
+       * If we typed "56" to get minute 56, then typed "7",
+       * we should select "07" as "567" is not a valid minute.
+       */
+      if (inputEl.value.length === 2) {
+        const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
+        inputEl.value = changedCharacter;
+        this.selectSingleColumn();
+      }
+    };
+    /**
+     * Searches a list of column items for a particular
+     * value. This is currently used for numeric values.
+     * The zeroBehavior can be set to account for leading
+     * or trailing zeros when looking at the item text.
+     */
+    this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
+      const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
+      const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+      if (item) {
+        colEl.setValue(item.value);
+      }
+    };
+    this.selectMultiColumn = () => {
+      const { inputEl, el } = this;
+      if (!inputEl) {
+        return;
+      }
+      const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
+      const firstColumn = numericPickers[0];
+      const lastColumn = numericPickers[1];
+      let value = inputEl.value;
+      let minuteValue;
+      switch (value.length) {
+        case 1:
+          this.searchColumn(firstColumn, value);
+          break;
+        case 2:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacter = inputEl.value.substring(0, 1);
+          value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          if (value.length === 1) {
+            minuteValue = inputEl.value.substring(inputEl.value.length - 1);
+            this.searchColumn(lastColumn, minuteValue, 'end');
+          }
+          break;
+        case 3:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacterAgain = inputEl.value.substring(0, 1);
+          value =
+            firstCharacterAgain === '0' || firstCharacterAgain === '1'
+              ? inputEl.value.substring(0, 2)
+              : firstCharacterAgain;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
+          this.searchColumn(lastColumn, minuteValue, 'end');
+          break;
+        case 4:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
+          value =
+            firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
+              ? inputEl.value.substring(0, 2)
+              : firstCharacterAgainAgain;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          const minuteValueAgain = value.length === 1
+            ? inputEl.value.substring(1, inputEl.value.length)
+            : inputEl.value.substring(2, inputEl.value.length);
+          this.searchColumn(lastColumn, minuteValueAgain, 'end');
+          break;
+        default:
+          const startIndex = inputEl.value.length - 4;
+          const newString = inputEl.value.substring(startIndex);
+          inputEl.value = newString;
+          this.selectMultiColumn();
+          break;
+      }
+    };
+    /**
+     * Searches the value of the active column
+     * to determine which value users are trying
+     * to select
+     */
+    this.onInputChange = () => {
+      const { useInputMode, inputEl, inputModeColumn } = this;
+      if (!useInputMode || !inputEl) {
+        return;
+      }
+      if (inputModeColumn) {
+        this.selectSingleColumn();
+      }
+      else {
+        this.selectMultiColumn();
+      }
+    };
+    /**
+     * Emit ionInputModeChange. Picker columns
+     * listen for this event to determine whether
+     * or not their column is "active" for text input.
+     */
+    this.emitInputModeChange = () => {
+      const { useInputMode, inputModeColumn } = this;
+      this.ionInputModeChange.emit({
+        useInputMode,
+        inputModeColumn,
+      });
+    };
+  }
+  componentWillLoad() {
+    getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
+    getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+  }
+  render() {
+    return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+PickerInternal.style = {
+  ios: pickerInternalIosCss,
+  md: pickerInternalMdCss
+};
+
+export { PickerInternal as ion_picker_internal };

package/dist/sparkle-core/ion-picker.entry.js

@@ -0,0 +1,217 @@
+import { r as registerInstance, q as createEvent, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { g as getIonMode } from './ionic-global-127576f6.js';
+import { B as BACKDROP, i as isCancel, p as prepareOverlay, a as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-fd3cfa13.js';
+import { g as getClassMap } from './theme-7ef00c83.js';
+import { c as createAnimation } from './animation-676a644d.js';
+import './hardware-back-button-fa04d6e9.js';
+import './helpers-f11f0674.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;left:0;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}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{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;margin-left:auto;margin-right: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}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-wrapper.sc-ion-picker-ios{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.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;direction:ltr;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;padding-left:1em;padding-right:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em}}.picker-columns.sc-ion-picker-ios{height:215px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{left:0;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}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios,[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}.picker-below-highlight.sc-ion-picker-ios{left:0;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}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios,[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}";
+
+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;left:0;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}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{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;margin-left:auto;margin-right: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}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-wrapper.sc-ion-picker-md{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.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;direction:ltr;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;padding-left:1.1em;padding-right: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}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{padding-left:unset;padding-right:unset;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em}}.picker-columns.sc-ion-picker-md{height:216px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{left:0;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}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md,[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}.picker-below-highlight.sc-ion-picker-md{left:0;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}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md,[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}";
+
+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.presented = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    this.keyboardClose = true;
+    /**
+     * Array of buttons to be displayed at the top of the picker.
+     */
+    this.buttons = [];
+    /**
+     * Array of columns to be displayed in the picker.
+     */
+    this.columns = [];
+    /**
+     * Number of milliseconds to wait before dismissing the picker.
+     */
+    this.duration = 0;
+    /**
+     * If `true`, a backdrop will be displayed behind the picker.
+     */
+    this.showBackdrop = true;
+    /**
+     * If `true`, the picker will be dismissed when the backdrop is clicked.
+     */
+    this.backdropDismiss = true;
+    /**
+     * If `true`, the picker will animate.
+     */
+    this.animated = true;
+    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);
+      }
+    };
+  }
+  connectedCallback() {
+    prepareOverlay(this.el);
+  }
+  /**
+   * Present the picker overlay after it has been created.
+   */
+  async present() {
+    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+    if (this.duration > 0) {
+      this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
+    }
+  }
+  /**
+   * 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"`.
+   */
+  dismiss(data, role) {
+    if (this.durationTimeout) {
+      clearTimeout(this.durationTimeout);
+    }
+    return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+  }
+  /**
+   * 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({ "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", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { 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", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
+  }
+  get el() { return getElement(this); }
+};
+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 };