2098 lines
71 KiB
JavaScript
2098 lines
71 KiB
JavaScript
(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([[8050],{
|
|
|
|
/***/ 90539:
|
|
/*!**************************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/framework-delegate-c3305a28.js ***!
|
|
\**************************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "C": () => (/* binding */ CoreDelegate),
|
|
/* harmony export */ "a": () => (/* binding */ attachComponent),
|
|
/* harmony export */ "d": () => (/* binding */ detachComponent)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 71670);
|
|
/* harmony import */ var _helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers-3b390e48.js */ 29259);
|
|
|
|
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
// TODO(FW-2832): types
|
|
|
|
const attachComponent = /*#__PURE__*/function () {
|
|
var _ref = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (delegate, container, component, cssClasses, componentProps, inline) {
|
|
var _a;
|
|
|
|
if (delegate) {
|
|
return delegate.attachViewToDom(container, component, componentProps, cssClasses);
|
|
}
|
|
|
|
if (!inline && typeof component !== 'string' && !(component instanceof HTMLElement)) {
|
|
throw new Error('framework delegate is missing');
|
|
}
|
|
|
|
const el = typeof component === 'string' ? (_a = container.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(component) : component;
|
|
|
|
if (cssClasses) {
|
|
cssClasses.forEach(c => el.classList.add(c));
|
|
}
|
|
|
|
if (componentProps) {
|
|
Object.assign(el, componentProps);
|
|
}
|
|
|
|
container.appendChild(el);
|
|
yield new Promise(resolve => (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_1__.c)(el, resolve));
|
|
return el;
|
|
});
|
|
|
|
return function attachComponent(_x, _x2, _x3, _x4, _x5, _x6) {
|
|
return _ref.apply(this, arguments);
|
|
};
|
|
}();
|
|
|
|
const detachComponent = (delegate, element) => {
|
|
if (element) {
|
|
if (delegate) {
|
|
const container = element.parentElement;
|
|
return delegate.removeViewFromDom(container, element);
|
|
}
|
|
|
|
element.remove();
|
|
}
|
|
|
|
return Promise.resolve();
|
|
};
|
|
|
|
const CoreDelegate = () => {
|
|
let BaseComponent;
|
|
let Reference;
|
|
|
|
const attachViewToDom = /*#__PURE__*/function () {
|
|
var _ref2 = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (parentElement, userComponent, userComponentProps = {}, cssClasses = []) {
|
|
var _a, _b;
|
|
|
|
BaseComponent = parentElement;
|
|
/**
|
|
* If passing in a component via the `component` props
|
|
* we need to append it inside of our overlay component.
|
|
*/
|
|
|
|
if (userComponent) {
|
|
/**
|
|
* If passing in the tag name, create
|
|
* the element otherwise just get a reference
|
|
* to the component.
|
|
*/
|
|
const el = typeof userComponent === 'string' ? (_a = BaseComponent.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(userComponent) : userComponent;
|
|
/**
|
|
* Add any css classes passed in
|
|
* via the cssClasses prop on the overlay.
|
|
*/
|
|
|
|
cssClasses.forEach(c => el.classList.add(c));
|
|
/**
|
|
* Add any props passed in
|
|
* via the componentProps prop on the overlay.
|
|
*/
|
|
|
|
Object.assign(el, userComponentProps);
|
|
/**
|
|
* Finally, append the component
|
|
* inside of the overlay component.
|
|
*/
|
|
|
|
BaseComponent.appendChild(el);
|
|
yield new Promise(resolve => (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_1__.c)(el, resolve));
|
|
} else if (BaseComponent.children.length > 0) {
|
|
const root = BaseComponent.children[0];
|
|
|
|
if (!root.classList.contains('ion-delegate-host')) {
|
|
/**
|
|
* If the root element is not a delegate host, it means
|
|
* that the overlay has not been presented yet and we need
|
|
* to create the containing element with the specified classes.
|
|
*/
|
|
const el = (_b = BaseComponent.ownerDocument) === null || _b === void 0 ? void 0 : _b.createElement('div'); // Add a class to track if the root element was created by the delegate.
|
|
|
|
el.classList.add('ion-delegate-host');
|
|
cssClasses.forEach(c => el.classList.add(c)); // Move each child from the original template to the new parent element.
|
|
|
|
el.append(...BaseComponent.children); // Append the new parent element to the original parent element.
|
|
|
|
BaseComponent.appendChild(el);
|
|
}
|
|
}
|
|
/**
|
|
* Get the root of the app and
|
|
* add the overlay there.
|
|
*/
|
|
|
|
|
|
const app = document.querySelector('ion-app') || document.body;
|
|
/**
|
|
* Create a placeholder comment so that
|
|
* we can return this component to where
|
|
* it was previously.
|
|
*/
|
|
|
|
Reference = document.createComment('ionic teleport');
|
|
BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
|
|
app.appendChild(BaseComponent);
|
|
return BaseComponent;
|
|
});
|
|
|
|
return function attachViewToDom(_x7, _x8) {
|
|
return _ref2.apply(this, arguments);
|
|
};
|
|
}();
|
|
|
|
const removeViewFromDom = () => {
|
|
/**
|
|
* Return component to where it was previously in the DOM.
|
|
*/
|
|
if (BaseComponent && Reference) {
|
|
Reference.parentNode.insertBefore(BaseComponent, Reference);
|
|
Reference.remove();
|
|
}
|
|
|
|
return Promise.resolve();
|
|
};
|
|
|
|
return {
|
|
attachViewToDom,
|
|
removeViewFromDom
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 99273:
|
|
/*!*************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/index-c4b11676.js ***!
|
|
\*************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "a": () => (/* binding */ printRequiredElementError),
|
|
/* harmony export */ "b": () => (/* binding */ printIonError),
|
|
/* harmony export */ "p": () => (/* binding */ printIonWarning)
|
|
/* harmony export */ });
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
|
|
/**
|
|
* Logs a warning to the console with an Ionic prefix
|
|
* to indicate the library that is warning the developer.
|
|
*
|
|
* @param message - The string message to be logged to the console.
|
|
*/
|
|
const printIonWarning = (message, ...params) => {
|
|
return console.warn(`[Ionic Warning]: ${message}`, ...params);
|
|
};
|
|
/*
|
|
* Logs an error to the console with an Ionic prefix
|
|
* to indicate the library that is warning the developer.
|
|
*
|
|
* @param message - The string message to be logged to the console.
|
|
* @param params - Additional arguments to supply to the console.error.
|
|
*/
|
|
|
|
|
|
const printIonError = (message, ...params) => {
|
|
return console.error(`[Ionic Error]: ${message}`, ...params);
|
|
};
|
|
/**
|
|
* Prints an error informing developers that an implementation requires an element to be used
|
|
* within a specific selector.
|
|
*
|
|
* @param el The web component element this is requiring the element.
|
|
* @param targetSelectors The selector or selectors that were not found.
|
|
*/
|
|
|
|
|
|
const printRequiredElementError = (el, ...targetSelectors) => {
|
|
return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
|
|
};
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 48050:
|
|
/*!****************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/ion-popover.entry.js ***!
|
|
\****************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "ion_popover": () => (/* binding */ Popover)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 71670);
|
|
/* harmony import */ var _index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./index-8e692445.js */ 91559);
|
|
/* harmony import */ var _ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ionic-global-c74e4951.js */ 95823);
|
|
/* harmony import */ var _framework_delegate_c3305a28_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./framework-delegate-c3305a28.js */ 90539);
|
|
/* harmony import */ var _helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers-3b390e48.js */ 29259);
|
|
/* harmony import */ var _index_c4b11676_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./index-c4b11676.js */ 99273);
|
|
/* harmony import */ var _overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./overlays-58fa8e4d.js */ 6605);
|
|
/* harmony import */ var _theme_7670341c_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./theme-7670341c.js */ 50320);
|
|
/* harmony import */ var _index_27c7e5c4_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./index-27c7e5c4.js */ 60919);
|
|
/* harmony import */ var _animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./animation-4ff3f603.js */ 15933);
|
|
/* harmony import */ var _hardware_back_button_490df115_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./hardware-back-button-490df115.js */ 70159);
|
|
/* harmony import */ var _index_33ffec25_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./index-33ffec25.js */ 42286);
|
|
|
|
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Returns the dimensions of the popover
|
|
* arrow on `ios` mode. If arrow is disabled
|
|
* returns (0, 0).
|
|
*/
|
|
|
|
const getArrowDimensions = arrowEl => {
|
|
if (!arrowEl) {
|
|
return {
|
|
arrowWidth: 0,
|
|
arrowHeight: 0
|
|
};
|
|
}
|
|
|
|
const {
|
|
width,
|
|
height
|
|
} = arrowEl.getBoundingClientRect();
|
|
return {
|
|
arrowWidth: width,
|
|
arrowHeight: height
|
|
};
|
|
};
|
|
/**
|
|
* Returns the recommended dimensions of the popover
|
|
* that takes into account whether or not the width
|
|
* should match the trigger width.
|
|
*/
|
|
|
|
|
|
const getPopoverDimensions = (size, contentEl, triggerEl) => {
|
|
const contentDimentions = contentEl.getBoundingClientRect();
|
|
const contentHeight = contentDimentions.height;
|
|
let contentWidth = contentDimentions.width;
|
|
|
|
if (size === 'cover' && triggerEl) {
|
|
const triggerDimensions = triggerEl.getBoundingClientRect();
|
|
contentWidth = triggerDimensions.width;
|
|
}
|
|
|
|
return {
|
|
contentWidth,
|
|
contentHeight
|
|
};
|
|
};
|
|
|
|
const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
|
|
let dismissCallbacks = [];
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(parentPopoverEl);
|
|
const parentContentEl = root.querySelector('.popover-content');
|
|
|
|
switch (triggerAction) {
|
|
case 'hover':
|
|
dismissCallbacks = [{
|
|
/**
|
|
* Do not use mouseover here
|
|
* as this will causes the event to
|
|
* be dispatched on each underlying
|
|
* element rather than on the popover
|
|
* content as a whole.
|
|
*/
|
|
eventName: 'mouseenter',
|
|
callback: ev => {
|
|
/**
|
|
* Do not dismiss the popover is we
|
|
* are hovering over its trigger.
|
|
* This would be easier if we used mouseover
|
|
* but this would cause the event to be dispatched
|
|
* more often than we would like, potentially
|
|
* causing performance issues.
|
|
*/
|
|
const element = document.elementFromPoint(ev.clientX, ev.clientY);
|
|
|
|
if (element === triggerEl) {
|
|
return;
|
|
}
|
|
|
|
popoverEl.dismiss(undefined, undefined, false);
|
|
}
|
|
}];
|
|
break;
|
|
|
|
case 'context-menu':
|
|
case 'click':
|
|
default:
|
|
dismissCallbacks = [{
|
|
eventName: 'click',
|
|
callback: ev => {
|
|
/**
|
|
* Do not dismiss the popover is we
|
|
* are hovering over its trigger.
|
|
*/
|
|
const target = ev.target;
|
|
const closestTrigger = target.closest('[data-ion-popover-trigger]');
|
|
|
|
if (closestTrigger === triggerEl) {
|
|
/**
|
|
* stopPropagation here so if the
|
|
* popover has dismissOnSelect="true"
|
|
* the popover does not dismiss since
|
|
* we just clicked a trigger element.
|
|
*/
|
|
ev.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
popoverEl.dismiss(undefined, undefined, false);
|
|
}
|
|
}];
|
|
break;
|
|
}
|
|
|
|
dismissCallbacks.forEach(({
|
|
eventName,
|
|
callback
|
|
}) => parentContentEl.addEventListener(eventName, callback));
|
|
return () => {
|
|
dismissCallbacks.forEach(({
|
|
eventName,
|
|
callback
|
|
}) => parentContentEl.removeEventListener(eventName, callback));
|
|
};
|
|
};
|
|
/**
|
|
* Configures the triggerEl to respond
|
|
* to user interaction based upon the triggerAction
|
|
* prop that devs have defined.
|
|
*/
|
|
|
|
|
|
const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
|
|
let triggerCallbacks = [];
|
|
/**
|
|
* Based upon the kind of trigger interaction
|
|
* the user wants, we setup the correct event
|
|
* listeners.
|
|
*/
|
|
|
|
switch (triggerAction) {
|
|
case 'hover':
|
|
let hoverTimeout;
|
|
triggerCallbacks = [{
|
|
eventName: 'mouseenter',
|
|
callback: function () {
|
|
var _ref = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (ev) {
|
|
ev.stopPropagation();
|
|
|
|
if (hoverTimeout) {
|
|
clearTimeout(hoverTimeout);
|
|
}
|
|
/**
|
|
* Hovering over a trigger should not
|
|
* immediately open the next popover.
|
|
*/
|
|
|
|
|
|
hoverTimeout = setTimeout(() => {
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.r)(() => {
|
|
popoverEl.presentFromTrigger(ev);
|
|
hoverTimeout = undefined;
|
|
});
|
|
}, 100);
|
|
});
|
|
|
|
return function callback(_x) {
|
|
return _ref.apply(this, arguments);
|
|
};
|
|
}()
|
|
}, {
|
|
eventName: 'mouseleave',
|
|
callback: ev => {
|
|
if (hoverTimeout) {
|
|
clearTimeout(hoverTimeout);
|
|
}
|
|
/**
|
|
* If mouse is over another popover
|
|
* that is not this popover then we should
|
|
* close this popover.
|
|
*/
|
|
|
|
|
|
const target = ev.relatedTarget;
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
if (target.closest('ion-popover') !== popoverEl) {
|
|
popoverEl.dismiss(undefined, undefined, false);
|
|
}
|
|
}
|
|
}, {
|
|
/**
|
|
* stopPropagation here prevents the popover
|
|
* from dismissing when dismiss-on-select="true".
|
|
*/
|
|
eventName: 'click',
|
|
callback: ev => ev.stopPropagation()
|
|
}, {
|
|
eventName: 'ionPopoverActivateTrigger',
|
|
callback: ev => popoverEl.presentFromTrigger(ev, true)
|
|
}];
|
|
break;
|
|
|
|
case 'context-menu':
|
|
triggerCallbacks = [{
|
|
eventName: 'contextmenu',
|
|
callback: ev => {
|
|
/**
|
|
* Prevents the platform context
|
|
* menu from appearing.
|
|
*/
|
|
ev.preventDefault();
|
|
popoverEl.presentFromTrigger(ev);
|
|
}
|
|
}, {
|
|
eventName: 'click',
|
|
callback: ev => ev.stopPropagation()
|
|
}, {
|
|
eventName: 'ionPopoverActivateTrigger',
|
|
callback: ev => popoverEl.presentFromTrigger(ev, true)
|
|
}];
|
|
break;
|
|
|
|
case 'click':
|
|
default:
|
|
triggerCallbacks = [{
|
|
/**
|
|
* Do not do a stopPropagation() here
|
|
* because if you had two click triggers
|
|
* then clicking the first trigger and then
|
|
* clicking the second trigger would not cause
|
|
* the first popover to dismiss.
|
|
*/
|
|
eventName: 'click',
|
|
callback: ev => popoverEl.presentFromTrigger(ev)
|
|
}, {
|
|
eventName: 'ionPopoverActivateTrigger',
|
|
callback: ev => popoverEl.presentFromTrigger(ev, true)
|
|
}];
|
|
break;
|
|
}
|
|
|
|
triggerCallbacks.forEach(({
|
|
eventName,
|
|
callback
|
|
}) => triggerEl.addEventListener(eventName, callback));
|
|
triggerEl.setAttribute('data-ion-popover-trigger', 'true');
|
|
return () => {
|
|
triggerCallbacks.forEach(({
|
|
eventName,
|
|
callback
|
|
}) => triggerEl.removeEventListener(eventName, callback));
|
|
triggerEl.removeAttribute('data-ion-popover-trigger');
|
|
};
|
|
};
|
|
/**
|
|
* Returns the index of an ion-item in an array of ion-items.
|
|
*/
|
|
|
|
|
|
const getIndexOfItem = (items, item) => {
|
|
if (!item || item.tagName !== 'ION-ITEM') {
|
|
return -1;
|
|
}
|
|
|
|
return items.findIndex(el => el === item);
|
|
};
|
|
/**
|
|
* Given an array of elements and a currently focused ion-item
|
|
* returns the next ion-item relative to the focused one or
|
|
* undefined.
|
|
*/
|
|
|
|
|
|
const getNextItem = (items, currentItem) => {
|
|
const currentItemIndex = getIndexOfItem(items, currentItem);
|
|
return items[currentItemIndex + 1];
|
|
};
|
|
/**
|
|
* Given an array of elements and a currently focused ion-item
|
|
* returns the previous ion-item relative to the focused one or
|
|
* undefined.
|
|
*/
|
|
|
|
|
|
const getPrevItem = (items, currentItem) => {
|
|
const currentItemIndex = getIndexOfItem(items, currentItem);
|
|
return items[currentItemIndex - 1];
|
|
};
|
|
/** Focus the internal button of the ion-item */
|
|
|
|
|
|
const focusItem = item => {
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(item);
|
|
const button = root.querySelector('button');
|
|
|
|
if (button) {
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.r)(() => button.focus());
|
|
}
|
|
};
|
|
/**
|
|
* Returns `true` if `el` has been designated
|
|
* as a trigger element for an ion-popover.
|
|
*/
|
|
|
|
|
|
const isTriggerElement = el => el.hasAttribute('data-ion-popover-trigger');
|
|
|
|
const configureKeyboardInteraction = popoverEl => {
|
|
const callback = /*#__PURE__*/function () {
|
|
var _ref2 = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (ev) {
|
|
var _a;
|
|
|
|
const activeElement = document.activeElement;
|
|
let items = [];
|
|
const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
|
|
/**
|
|
* Only handle custom keyboard interactions for the host popover element
|
|
* and children ion-item elements.
|
|
*/
|
|
|
|
if (targetTagName !== 'ION-POPOVER' && targetTagName !== 'ION-ITEM') {
|
|
return;
|
|
}
|
|
/**
|
|
* Complex selectors with :not() are :not supported
|
|
* in older versions of Chromium so we need to do a
|
|
* try/catch here so errors are not thrown.
|
|
*/
|
|
|
|
|
|
try {
|
|
/**
|
|
* Select all ion-items that are not children of child popovers.
|
|
* i.e. only select ion-item elements that are part of this popover
|
|
*/
|
|
items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
|
|
/* eslint-disable-next-line */
|
|
} catch (_b) {}
|
|
|
|
switch (ev.key) {
|
|
/**
|
|
* If we are in a child popover
|
|
* then pressing the left arrow key
|
|
* should close this popover and move
|
|
* focus to the popover that presented
|
|
* this one.
|
|
*/
|
|
case 'ArrowLeft':
|
|
const parentPopover = yield popoverEl.getParentPopover();
|
|
|
|
if (parentPopover) {
|
|
popoverEl.dismiss(undefined, undefined, false);
|
|
}
|
|
|
|
break;
|
|
|
|
/**
|
|
* ArrowDown should move focus to the next focusable ion-item.
|
|
*/
|
|
|
|
case 'ArrowDown':
|
|
// Disable movement/scroll with keyboard
|
|
ev.preventDefault();
|
|
const nextItem = getNextItem(items, activeElement);
|
|
|
|
if (nextItem !== undefined) {
|
|
focusItem(nextItem);
|
|
}
|
|
|
|
break;
|
|
|
|
/**
|
|
* ArrowUp should move focus to the previous focusable ion-item.
|
|
*/
|
|
|
|
case 'ArrowUp':
|
|
// Disable movement/scroll with keyboard
|
|
ev.preventDefault();
|
|
const prevItem = getPrevItem(items, activeElement);
|
|
|
|
if (prevItem !== undefined) {
|
|
focusItem(prevItem);
|
|
}
|
|
|
|
break;
|
|
|
|
/**
|
|
* Home should move focus to the first focusable ion-item.
|
|
*/
|
|
|
|
case 'Home':
|
|
ev.preventDefault();
|
|
const firstItem = items[0];
|
|
|
|
if (firstItem !== undefined) {
|
|
focusItem(firstItem);
|
|
}
|
|
|
|
break;
|
|
|
|
/**
|
|
* End should move focus to the last focusable ion-item.
|
|
*/
|
|
|
|
case 'End':
|
|
ev.preventDefault();
|
|
const lastItem = items[items.length - 1];
|
|
|
|
if (lastItem !== undefined) {
|
|
focusItem(lastItem);
|
|
}
|
|
|
|
break;
|
|
|
|
/**
|
|
* ArrowRight, Spacebar, or Enter should activate
|
|
* the currently focused trigger item to open a
|
|
* popover if the element is a trigger item.
|
|
*/
|
|
|
|
case 'ArrowRight':
|
|
case ' ':
|
|
case 'Enter':
|
|
if (activeElement && isTriggerElement(activeElement)) {
|
|
const rightEvent = new CustomEvent('ionPopoverActivateTrigger');
|
|
activeElement.dispatchEvent(rightEvent);
|
|
}
|
|
|
|
break;
|
|
}
|
|
});
|
|
|
|
return function callback(_x2) {
|
|
return _ref2.apply(this, arguments);
|
|
};
|
|
}();
|
|
|
|
popoverEl.addEventListener('keydown', callback);
|
|
return () => popoverEl.removeEventListener('keydown', callback);
|
|
};
|
|
/**
|
|
* Positions a popover by taking into account
|
|
* the reference point, preferred side, alignment
|
|
* and viewport dimensions.
|
|
*/
|
|
|
|
|
|
const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
|
|
var _a;
|
|
|
|
let referenceCoordinates = {
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
/**
|
|
* Calculate position relative to the
|
|
* x-y coordinates in the event that
|
|
* was passed in
|
|
*/
|
|
|
|
switch (reference) {
|
|
case 'event':
|
|
if (!event) {
|
|
return defaultPosition;
|
|
}
|
|
|
|
const mouseEv = event;
|
|
referenceCoordinates = {
|
|
top: mouseEv.clientY,
|
|
left: mouseEv.clientX,
|
|
width: 1,
|
|
height: 1
|
|
};
|
|
break;
|
|
|
|
/**
|
|
* Calculate position relative to the bounding
|
|
* box on either the trigger element
|
|
* specified via the `trigger` prop or
|
|
* the target specified on the event
|
|
* that was passed in.
|
|
*/
|
|
|
|
case 'trigger':
|
|
default:
|
|
const customEv = event;
|
|
/**
|
|
* ionShadowTarget is used when we need to align the
|
|
* popover with an element inside of the shadow root
|
|
* of an Ionic component. Ex: Presenting a popover
|
|
* by clicking on the collapsed indicator inside
|
|
* of `ion-breadcrumb` and centering it relative
|
|
* to the indicator rather than `ion-breadcrumb`
|
|
* as a whole.
|
|
*/
|
|
|
|
const actualTriggerEl = triggerEl || ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (customEv === null || customEv === void 0 ? void 0 : customEv.target);
|
|
|
|
if (!actualTriggerEl) {
|
|
return defaultPosition;
|
|
}
|
|
|
|
const triggerBoundingBox = actualTriggerEl.getBoundingClientRect();
|
|
referenceCoordinates = {
|
|
top: triggerBoundingBox.top,
|
|
left: triggerBoundingBox.left,
|
|
width: triggerBoundingBox.width,
|
|
height: triggerBoundingBox.height
|
|
};
|
|
break;
|
|
}
|
|
/**
|
|
* Get top/left offset that would allow
|
|
* popover to be positioned on the
|
|
* preferred side of the reference.
|
|
*/
|
|
|
|
|
|
const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL);
|
|
/**
|
|
* Get the top/left adjustments that
|
|
* would allow the popover content
|
|
* to have the correct alignment.
|
|
*/
|
|
|
|
const alignedCoordinates = calculatePopoverAlign(align, side, referenceCoordinates, contentWidth, contentHeight);
|
|
const top = coordinates.top + alignedCoordinates.top;
|
|
const left = coordinates.left + alignedCoordinates.left;
|
|
const {
|
|
arrowTop,
|
|
arrowLeft
|
|
} = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
|
|
const {
|
|
originX,
|
|
originY
|
|
} = calculatePopoverOrigin(side, align, isRTL);
|
|
return {
|
|
top,
|
|
left,
|
|
referenceCoordinates,
|
|
arrowTop,
|
|
arrowLeft,
|
|
originX,
|
|
originY
|
|
};
|
|
};
|
|
/**
|
|
* Determines the transform-origin
|
|
* of the popover animation so that it
|
|
* is in line with what the side and alignment
|
|
* prop values are. Currently only used
|
|
* with the MD animation.
|
|
*/
|
|
|
|
|
|
const calculatePopoverOrigin = (side, align, isRTL) => {
|
|
switch (side) {
|
|
case 'top':
|
|
return {
|
|
originX: getOriginXAlignment(align),
|
|
originY: 'bottom'
|
|
};
|
|
|
|
case 'bottom':
|
|
return {
|
|
originX: getOriginXAlignment(align),
|
|
originY: 'top'
|
|
};
|
|
|
|
case 'left':
|
|
return {
|
|
originX: 'right',
|
|
originY: getOriginYAlignment(align)
|
|
};
|
|
|
|
case 'right':
|
|
return {
|
|
originX: 'left',
|
|
originY: getOriginYAlignment(align)
|
|
};
|
|
|
|
case 'start':
|
|
return {
|
|
originX: isRTL ? 'left' : 'right',
|
|
originY: getOriginYAlignment(align)
|
|
};
|
|
|
|
case 'end':
|
|
return {
|
|
originX: isRTL ? 'right' : 'left',
|
|
originY: getOriginYAlignment(align)
|
|
};
|
|
}
|
|
};
|
|
|
|
const getOriginXAlignment = align => {
|
|
switch (align) {
|
|
case 'start':
|
|
return 'left';
|
|
|
|
case 'center':
|
|
return 'center';
|
|
|
|
case 'end':
|
|
return 'right';
|
|
}
|
|
};
|
|
|
|
const getOriginYAlignment = align => {
|
|
switch (align) {
|
|
case 'start':
|
|
return 'top';
|
|
|
|
case 'center':
|
|
return 'center';
|
|
|
|
case 'end':
|
|
return 'bottom';
|
|
}
|
|
};
|
|
/**
|
|
* Calculates where the arrow positioning
|
|
* should be relative to the popover content.
|
|
*/
|
|
|
|
|
|
const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL) => {
|
|
/**
|
|
* Note: When side is left, right, start, or end, the arrow is
|
|
* been rotated using a `transform`, so to move the arrow up or down
|
|
* by its dimension, you need to use `arrowWidth`.
|
|
*/
|
|
const leftPosition = {
|
|
arrowTop: top + contentHeight / 2 - arrowWidth / 2,
|
|
arrowLeft: left + contentWidth - arrowWidth / 2
|
|
};
|
|
/**
|
|
* Move the arrow to the left by arrowWidth and then
|
|
* again by half of its width because we have rotated
|
|
* the arrow using a transform.
|
|
*/
|
|
|
|
const rightPosition = {
|
|
arrowTop: top + contentHeight / 2 - arrowWidth / 2,
|
|
arrowLeft: left - arrowWidth * 1.5
|
|
};
|
|
|
|
switch (side) {
|
|
case 'top':
|
|
return {
|
|
arrowTop: top + contentHeight,
|
|
arrowLeft: left + contentWidth / 2 - arrowWidth / 2
|
|
};
|
|
|
|
case 'bottom':
|
|
return {
|
|
arrowTop: top - arrowHeight,
|
|
arrowLeft: left + contentWidth / 2 - arrowWidth / 2
|
|
};
|
|
|
|
case 'left':
|
|
return leftPosition;
|
|
|
|
case 'right':
|
|
return rightPosition;
|
|
|
|
case 'start':
|
|
return isRTL ? rightPosition : leftPosition;
|
|
|
|
case 'end':
|
|
return isRTL ? leftPosition : rightPosition;
|
|
|
|
default:
|
|
return {
|
|
arrowTop: 0,
|
|
arrowLeft: 0
|
|
};
|
|
}
|
|
};
|
|
/**
|
|
* Calculates the required top/left
|
|
* values needed to position the popover
|
|
* content on the side specified in the
|
|
* `side` prop.
|
|
*/
|
|
|
|
|
|
const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL) => {
|
|
const sideLeft = {
|
|
top: triggerBoundingBox.top,
|
|
left: triggerBoundingBox.left - contentWidth - arrowWidth
|
|
};
|
|
const sideRight = {
|
|
top: triggerBoundingBox.top,
|
|
left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth
|
|
};
|
|
|
|
switch (side) {
|
|
case 'top':
|
|
return {
|
|
top: triggerBoundingBox.top - contentHeight - arrowHeight,
|
|
left: triggerBoundingBox.left
|
|
};
|
|
|
|
case 'right':
|
|
return sideRight;
|
|
|
|
case 'bottom':
|
|
return {
|
|
top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
|
|
left: triggerBoundingBox.left
|
|
};
|
|
|
|
case 'left':
|
|
return sideLeft;
|
|
|
|
case 'start':
|
|
return isRTL ? sideRight : sideLeft;
|
|
|
|
case 'end':
|
|
return isRTL ? sideLeft : sideRight;
|
|
}
|
|
};
|
|
/**
|
|
* Calculates the required top/left
|
|
* offset values needed to provide the
|
|
* correct alignment regardless while taking
|
|
* into account the side the popover is on.
|
|
*/
|
|
|
|
|
|
const calculatePopoverAlign = (align, side, triggerBoundingBox, contentWidth, contentHeight) => {
|
|
switch (align) {
|
|
case 'center':
|
|
return calculatePopoverCenterAlign(side, triggerBoundingBox, contentWidth, contentHeight);
|
|
|
|
case 'end':
|
|
return calculatePopoverEndAlign(side, triggerBoundingBox, contentWidth, contentHeight);
|
|
|
|
case 'start':
|
|
default:
|
|
return {
|
|
top: 0,
|
|
left: 0
|
|
};
|
|
}
|
|
};
|
|
/**
|
|
* Calculate the end alignment for
|
|
* the popover. If side is on the x-axis
|
|
* then the align values refer to the top
|
|
* and bottom margins of the content.
|
|
* If side is on the y-axis then the
|
|
* align values refer to the left and right
|
|
* margins of the content.
|
|
*/
|
|
|
|
|
|
const calculatePopoverEndAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
|
|
switch (side) {
|
|
case 'start':
|
|
case 'end':
|
|
case 'left':
|
|
case 'right':
|
|
return {
|
|
top: -(contentHeight - triggerBoundingBox.height),
|
|
left: 0
|
|
};
|
|
|
|
case 'top':
|
|
case 'bottom':
|
|
default:
|
|
return {
|
|
top: 0,
|
|
left: -(contentWidth - triggerBoundingBox.width)
|
|
};
|
|
}
|
|
};
|
|
/**
|
|
* Calculate the center alignment for
|
|
* the popover. If side is on the x-axis
|
|
* then the align values refer to the top
|
|
* and bottom margins of the content.
|
|
* If side is on the y-axis then the
|
|
* align values refer to the left and right
|
|
* margins of the content.
|
|
*/
|
|
|
|
|
|
const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
|
|
switch (side) {
|
|
case 'start':
|
|
case 'end':
|
|
case 'left':
|
|
case 'right':
|
|
return {
|
|
top: -(contentHeight / 2 - triggerBoundingBox.height / 2),
|
|
left: 0
|
|
};
|
|
|
|
case 'top':
|
|
case 'bottom':
|
|
default:
|
|
return {
|
|
top: 0,
|
|
left: -(contentWidth / 2 - triggerBoundingBox.width / 2)
|
|
};
|
|
}
|
|
};
|
|
/**
|
|
* Adjusts popover positioning coordinates
|
|
* such that popover does not appear offscreen
|
|
* or overlapping safe area bounds.
|
|
*/
|
|
|
|
|
|
const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
|
|
let arrowTop = coordArrowTop;
|
|
const arrowLeft = coordArrowLeft;
|
|
let left = coordLeft;
|
|
let top = coordTop;
|
|
let bottom;
|
|
let originX = contentOriginX;
|
|
let originY = contentOriginY;
|
|
let checkSafeAreaLeft = false;
|
|
let checkSafeAreaRight = false;
|
|
const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
|
|
const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
|
|
let addPopoverBottomClass = false;
|
|
/**
|
|
* Adjust popover so it does not
|
|
* go off the left of the screen.
|
|
*/
|
|
|
|
if (left < bodyPadding + safeAreaMargin) {
|
|
left = bodyPadding;
|
|
checkSafeAreaLeft = true;
|
|
originX = 'left';
|
|
/**
|
|
* Adjust popover so it does not
|
|
* go off the right of the screen.
|
|
*/
|
|
} else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
|
|
checkSafeAreaRight = true;
|
|
left = bodyWidth - contentWidth - bodyPadding;
|
|
originX = 'right';
|
|
}
|
|
/**
|
|
* Adjust popover so it does not
|
|
* go off the top of the screen.
|
|
* If popover is on the left or the right of
|
|
* the trigger, then we should not adjust top
|
|
* margins.
|
|
*/
|
|
|
|
|
|
if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
|
|
if (triggerTop - contentHeight > 0) {
|
|
/**
|
|
* While we strive to align the popover with the trigger
|
|
* on smaller screens this is not always possible. As a result,
|
|
* we adjust the popover up so that it does not hang
|
|
* off the bottom of the screen. However, we do not want to move
|
|
* the popover up so much that it goes off the top of the screen.
|
|
*
|
|
* We chose 12 here so that the popover position looks a bit nicer as
|
|
* it is not right up against the edge of the screen.
|
|
*/
|
|
top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
|
|
arrowTop = top + contentHeight;
|
|
originY = 'bottom';
|
|
addPopoverBottomClass = true;
|
|
/**
|
|
* If not enough room for popover to appear
|
|
* above trigger, then cut it off.
|
|
*/
|
|
} else {
|
|
bottom = bodyPadding;
|
|
}
|
|
}
|
|
|
|
return {
|
|
top,
|
|
left,
|
|
bottom,
|
|
originX,
|
|
originY,
|
|
checkSafeAreaLeft,
|
|
checkSafeAreaRight,
|
|
arrowTop,
|
|
arrowLeft,
|
|
addPopoverBottomClass
|
|
};
|
|
};
|
|
|
|
const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
|
|
/**
|
|
* If no event provided and
|
|
* we do not have a trigger,
|
|
* then this popover was likely
|
|
* presented via the popoverController
|
|
* or users called `present` manually.
|
|
* In this case, the arrow should not be
|
|
* shown as we do not have a reference.
|
|
*/
|
|
if (!ev && !trigger) {
|
|
return false;
|
|
}
|
|
/**
|
|
* If popover is on the left or the right
|
|
* of a trigger, but we needed to adjust the
|
|
* popover due to screen bounds, then we should
|
|
* hide the arrow as it will never be pointing
|
|
* at the trigger.
|
|
*/
|
|
|
|
|
|
if (side !== 'top' && side !== 'bottom' && didAdjustBounds) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const POPOVER_IOS_BODY_PADDING = 5;
|
|
/**
|
|
* iOS Popover Enter Animation
|
|
*/
|
|
// TODO(FW-2832): types
|
|
|
|
const iosEnterAnimation = (baseEl, opts) => {
|
|
var _a;
|
|
|
|
const {
|
|
event: ev,
|
|
size,
|
|
trigger,
|
|
reference,
|
|
side,
|
|
align
|
|
} = opts;
|
|
const doc = baseEl.ownerDocument;
|
|
const isRTL = doc.dir === 'rtl';
|
|
const bodyWidth = doc.defaultView.innerWidth;
|
|
const bodyHeight = doc.defaultView.innerHeight;
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(baseEl);
|
|
const contentEl = root.querySelector('.popover-content');
|
|
const arrowEl = root.querySelector('.popover-arrow');
|
|
const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
|
|
const {
|
|
contentWidth,
|
|
contentHeight
|
|
} = getPopoverDimensions(size, contentEl, referenceSizeEl);
|
|
const {
|
|
arrowWidth,
|
|
arrowHeight
|
|
} = getArrowDimensions(arrowEl);
|
|
const defaultPosition = {
|
|
top: bodyHeight / 2 - contentHeight / 2,
|
|
left: bodyWidth / 2 - contentWidth / 2,
|
|
originX: isRTL ? 'right' : 'left',
|
|
originY: 'top'
|
|
};
|
|
const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
|
|
const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
|
|
const margin = size === 'cover' ? 0 : 25;
|
|
const {
|
|
originX,
|
|
originY,
|
|
top,
|
|
left,
|
|
bottom,
|
|
checkSafeAreaLeft,
|
|
checkSafeAreaRight,
|
|
arrowTop,
|
|
arrowLeft,
|
|
addPopoverBottomClass
|
|
} = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
|
|
const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 0.01, 'var(--backdrop-opacity)').beforeStyles({
|
|
'pointer-events': 'none'
|
|
}).afterClearStyles(['pointer-events']);
|
|
wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).fromTo('opacity', 0.01, 1);
|
|
return baseAnimation.easing('ease').duration(100).beforeAddWrite(() => {
|
|
if (size === 'cover') {
|
|
baseEl.style.setProperty('--width', `${contentWidth}px`);
|
|
}
|
|
|
|
if (addPopoverBottomClass) {
|
|
baseEl.classList.add('popover-bottom');
|
|
}
|
|
|
|
if (bottom !== undefined) {
|
|
contentEl.style.setProperty('bottom', `${bottom}px`);
|
|
}
|
|
|
|
const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
|
|
const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
|
|
let leftValue = `${left}px`;
|
|
|
|
if (checkSafeAreaLeft) {
|
|
leftValue = `${left}px${safeAreaLeft}`;
|
|
}
|
|
|
|
if (checkSafeAreaRight) {
|
|
leftValue = `${left}px${safeAreaRight}`;
|
|
}
|
|
|
|
contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
|
|
contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
|
|
contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
|
|
|
|
if (arrowEl !== null) {
|
|
const didAdjustBounds = results.top !== top || results.left !== left;
|
|
const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
|
|
|
|
if (showArrow) {
|
|
arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
|
|
arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
|
|
} else {
|
|
arrowEl.style.setProperty('display', 'none');
|
|
}
|
|
}
|
|
}).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
};
|
|
/**
|
|
* iOS Popover Leave Animation
|
|
*/
|
|
|
|
|
|
const iosLeaveAnimation = baseEl => {
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(baseEl);
|
|
const contentEl = root.querySelector('.popover-content');
|
|
const arrowEl = root.querySelector('.popover-arrow');
|
|
const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
|
wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).fromTo('opacity', 0.99, 0);
|
|
return baseAnimation.easing('ease').afterAddWrite(() => {
|
|
baseEl.style.removeProperty('--width');
|
|
baseEl.classList.remove('popover-bottom');
|
|
contentEl.style.removeProperty('top');
|
|
contentEl.style.removeProperty('left');
|
|
contentEl.style.removeProperty('bottom');
|
|
contentEl.style.removeProperty('transform-origin');
|
|
|
|
if (arrowEl) {
|
|
arrowEl.style.removeProperty('top');
|
|
arrowEl.style.removeProperty('left');
|
|
arrowEl.style.removeProperty('display');
|
|
}
|
|
}).duration(300).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
};
|
|
|
|
const POPOVER_MD_BODY_PADDING = 12;
|
|
/**
|
|
* Md Popover Enter Animation
|
|
*/
|
|
// TODO(FW-2832): types
|
|
|
|
const mdEnterAnimation = (baseEl, opts) => {
|
|
var _a;
|
|
|
|
const {
|
|
event: ev,
|
|
size,
|
|
trigger,
|
|
reference,
|
|
side,
|
|
align
|
|
} = opts;
|
|
const doc = baseEl.ownerDocument;
|
|
const isRTL = doc.dir === 'rtl';
|
|
const bodyWidth = doc.defaultView.innerWidth;
|
|
const bodyHeight = doc.defaultView.innerHeight;
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(baseEl);
|
|
const contentEl = root.querySelector('.popover-content');
|
|
const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
|
|
const {
|
|
contentWidth,
|
|
contentHeight
|
|
} = getPopoverDimensions(size, contentEl, referenceSizeEl);
|
|
const defaultPosition = {
|
|
top: bodyHeight / 2 - contentHeight / 2,
|
|
left: bodyWidth / 2 - contentWidth / 2,
|
|
originX: isRTL ? 'right' : 'left',
|
|
originY: 'top'
|
|
};
|
|
const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
|
|
const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
|
|
const {
|
|
originX,
|
|
originY,
|
|
top,
|
|
left,
|
|
bottom
|
|
} = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
|
|
const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const contentAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const viewportAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 0.01, 'var(--backdrop-opacity)').beforeStyles({
|
|
'pointer-events': 'none'
|
|
}).afterClearStyles(['pointer-events']);
|
|
wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).duration(150).fromTo('opacity', 0.01, 1);
|
|
contentAnimation.addElement(contentEl).beforeStyles({
|
|
top: `calc(${top}px + var(--offset-y, 0px))`,
|
|
left: `calc(${left}px + var(--offset-x, 0px))`,
|
|
'transform-origin': `${originY} ${originX}`
|
|
}).beforeAddWrite(() => {
|
|
if (bottom !== undefined) {
|
|
contentEl.style.setProperty('bottom', `${bottom}px`);
|
|
}
|
|
}).fromTo('transform', 'scale(0.8)', 'scale(1)');
|
|
viewportAnimation.addElement(root.querySelector('.popover-viewport')).fromTo('opacity', 0.01, 1);
|
|
return baseAnimation.easing('cubic-bezier(0.36,0.66,0.04,1)').duration(300).beforeAddWrite(() => {
|
|
if (size === 'cover') {
|
|
baseEl.style.setProperty('--width', `${contentWidth}px`);
|
|
}
|
|
|
|
if (originY === 'bottom') {
|
|
baseEl.classList.add('popover-bottom');
|
|
}
|
|
}).addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
|
|
};
|
|
/**
|
|
* Md Popover Leave Animation
|
|
*/
|
|
|
|
|
|
const mdLeaveAnimation = baseEl => {
|
|
const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.g)(baseEl);
|
|
const contentEl = root.querySelector('.popover-content');
|
|
const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_9__.c)();
|
|
backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
|
|
wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).fromTo('opacity', 0.99, 0);
|
|
return baseAnimation.easing('ease').afterAddWrite(() => {
|
|
baseEl.style.removeProperty('--width');
|
|
baseEl.classList.remove('popover-bottom');
|
|
contentEl.style.removeProperty('top');
|
|
contentEl.style.removeProperty('left');
|
|
contentEl.style.removeProperty('bottom');
|
|
contentEl.style.removeProperty('transform-origin');
|
|
}).duration(150).addAnimation([backdropAnimation, wrapperAnimation]);
|
|
};
|
|
|
|
const popoverIosCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{opacity:0;z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, #e6e6e6)}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow::after{left:3px;top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}[dir=rtl] .popover-arrow::after,:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}";
|
|
const popoverMdCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{opacity:0;z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}[dir=rtl] .popover-content,:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}";
|
|
const Popover = class {
|
|
constructor(hostRef) {
|
|
(0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.r)(this, hostRef);
|
|
this.didPresent = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPopoverDidPresent", 7);
|
|
this.willPresent = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPopoverWillPresent", 7);
|
|
this.willDismiss = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPopoverWillDismiss", 7);
|
|
this.didDismiss = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPopoverDidDismiss", 7);
|
|
this.didPresentShorthand = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "didPresent", 7);
|
|
this.willPresentShorthand = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "willPresent", 7);
|
|
this.willDismissShorthand = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "willDismiss", 7);
|
|
this.didDismissShorthand = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "didDismiss", 7);
|
|
this.ionMount = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionMount", 7);
|
|
this.parentPopover = null;
|
|
this.popoverIndex = popoverIds++;
|
|
this.coreDelegate = (0,_framework_delegate_c3305a28_js__WEBPACK_IMPORTED_MODULE_3__.C)();
|
|
this.inline = false;
|
|
this.focusDescendantOnPresent = false;
|
|
this.presented = false;
|
|
/** @internal */
|
|
|
|
this.hasController = false;
|
|
/**
|
|
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
|
*/
|
|
|
|
this.keyboardClose = true;
|
|
/**
|
|
* If `true`, the popover will be dismissed when the backdrop is clicked.
|
|
*/
|
|
|
|
this.backdropDismiss = true;
|
|
/**
|
|
* If `true`, a backdrop will be displayed behind the popover.
|
|
* This property controls whether or not the backdrop
|
|
* darkens the screen when the popover is presented.
|
|
* It does not control whether or not the backdrop
|
|
* is active or present in the DOM.
|
|
*/
|
|
|
|
this.showBackdrop = true;
|
|
/**
|
|
* If `true`, the popover 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).
|
|
*/
|
|
|
|
this.translucent = false;
|
|
/**
|
|
* If `true`, the popover will animate.
|
|
*/
|
|
|
|
this.animated = true;
|
|
/**
|
|
* Describes what kind of interaction with the trigger that
|
|
* should cause the popover to open. Does not apply when the `trigger`
|
|
* property is `undefined`.
|
|
* If `'click'`, the popover will be presented when the trigger is left clicked.
|
|
* If `'hover'`, the popover will be presented when a pointer hovers over the trigger.
|
|
* If `'context-menu'`, the popover will be presented when the trigger is right
|
|
* clicked on desktop and long pressed on mobile. This will also prevent your
|
|
* device's normal context menu from appearing.
|
|
*/
|
|
|
|
this.triggerAction = 'click';
|
|
/**
|
|
* Describes how to calculate the popover width.
|
|
* If `'cover'`, the popover width will match the width of the trigger.
|
|
* If `'auto'`, the popover width will be determined by the content in
|
|
* the popover.
|
|
*/
|
|
|
|
this.size = 'auto';
|
|
/**
|
|
* If `true`, the popover will be automatically
|
|
* dismissed when the content has been clicked.
|
|
*/
|
|
|
|
this.dismissOnSelect = false;
|
|
/**
|
|
* Describes what to position the popover relative to.
|
|
* If `'trigger'`, the popover will be positioned relative
|
|
* to the trigger button. If passing in an event, this is
|
|
* determined via event.target.
|
|
* If `'event'`, the popover will be positioned relative
|
|
* to the x/y coordinates of the trigger action. If passing
|
|
* in an event, this is determined via event.clientX and event.clientY.
|
|
*/
|
|
|
|
this.reference = 'trigger';
|
|
/**
|
|
* Describes which side of the `reference` point to position
|
|
* the popover on. The `'start'` and `'end'` values are RTL-aware,
|
|
* and the `'left'` and `'right'` values are not.
|
|
*/
|
|
|
|
this.side = 'bottom';
|
|
/**
|
|
* If `true`, the popover will display an arrow that points at the
|
|
* `reference` when running in `ios` mode. Does not apply in `md` mode.
|
|
*/
|
|
|
|
this.arrow = true;
|
|
/**
|
|
* If `true`, the popover will open. If `false`, the popover will close.
|
|
* Use this if you need finer grained control over presentation, otherwise
|
|
* just use the popoverController or the `trigger` property.
|
|
* Note: `isOpen` will not automatically be set back to `false` when
|
|
* the popover dismisses. You will need to do that in your code.
|
|
*/
|
|
|
|
this.isOpen = false;
|
|
/**
|
|
* @internal
|
|
*
|
|
* If `true` the popover will not register its own keyboard event handlers.
|
|
* This allows the contents of the popover to handle their own keyboard interactions.
|
|
*
|
|
* If `false`, the popover will register its own keyboard event handlers for
|
|
* navigating `ion-list` items within a popover (up/down/home/end/etc.).
|
|
* This will also cancel browser keyboard event bindings to prevent scroll
|
|
* behavior in a popover using a list of items.
|
|
*/
|
|
|
|
this.keyboardEvents = false;
|
|
/**
|
|
* If `true`, the component passed into `ion-popover` will
|
|
* automatically be mounted when the popover is created. The
|
|
* component will remain mounted even when the popover is dismissed.
|
|
* However, the component will be destroyed when the popover is
|
|
* destroyed. This property is not reactive and should only be
|
|
* used when initially creating a popover.
|
|
*
|
|
* Note: This feature only applies to inline popovers in JavaScript
|
|
* frameworks such as Angular, React, and Vue.
|
|
*/
|
|
|
|
this.keepContentsMounted = false;
|
|
|
|
this.onBackdropTap = () => {
|
|
this.dismiss(undefined, _overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.B);
|
|
};
|
|
|
|
this.onLifecycle = modalEvent => {
|
|
const el = this.usersElement;
|
|
const name = LIFECYCLE_MAP[modalEvent.type];
|
|
|
|
if (el && name) {
|
|
const event = new CustomEvent(name, {
|
|
bubbles: false,
|
|
cancelable: false,
|
|
detail: modalEvent.detail
|
|
});
|
|
el.dispatchEvent(event);
|
|
}
|
|
};
|
|
|
|
this.configureTriggerInteraction = () => {
|
|
const {
|
|
trigger,
|
|
triggerAction,
|
|
el,
|
|
destroyTriggerInteraction
|
|
} = this;
|
|
|
|
if (destroyTriggerInteraction) {
|
|
destroyTriggerInteraction();
|
|
}
|
|
|
|
if (trigger === undefined) {
|
|
return;
|
|
}
|
|
|
|
const triggerEl = this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
|
|
|
|
if (!triggerEl) {
|
|
(0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_5__.p)(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
|
|
return;
|
|
}
|
|
|
|
this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
|
|
};
|
|
|
|
this.configureKeyboardInteraction = () => {
|
|
const {
|
|
destroyKeyboardInteraction,
|
|
el
|
|
} = this;
|
|
|
|
if (destroyKeyboardInteraction) {
|
|
destroyKeyboardInteraction();
|
|
}
|
|
|
|
this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
|
|
};
|
|
|
|
this.configureDismissInteraction = () => {
|
|
const {
|
|
destroyDismissInteraction,
|
|
parentPopover,
|
|
triggerAction,
|
|
triggerEl,
|
|
el
|
|
} = this;
|
|
|
|
if (!parentPopover || !triggerEl) {
|
|
return;
|
|
}
|
|
|
|
if (destroyDismissInteraction) {
|
|
destroyDismissInteraction();
|
|
}
|
|
|
|
this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
|
|
};
|
|
}
|
|
|
|
onTriggerChange() {
|
|
this.configureTriggerInteraction();
|
|
}
|
|
|
|
onIsOpenChange(newValue, oldValue) {
|
|
if (newValue === true && oldValue === false) {
|
|
this.present();
|
|
} else if (newValue === false && oldValue === true) {
|
|
this.dismiss();
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
const {
|
|
configureTriggerInteraction,
|
|
el
|
|
} = this;
|
|
(0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.e)(el);
|
|
configureTriggerInteraction();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
const {
|
|
destroyTriggerInteraction
|
|
} = this;
|
|
|
|
if (destroyTriggerInteraction) {
|
|
destroyTriggerInteraction();
|
|
}
|
|
}
|
|
|
|
componentWillLoad() {
|
|
/**
|
|
* If user has custom ID set then we should
|
|
* not assign the default incrementing ID.
|
|
*/
|
|
this.popoverId = this.el.hasAttribute('id') ? this.el.getAttribute('id') : `ion-popover-${this.popoverIndex}`;
|
|
this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`);
|
|
|
|
if (this.alignment === undefined) {
|
|
this.alignment = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_2__.b)(this) === 'ios' ? 'center' : 'start';
|
|
}
|
|
}
|
|
|
|
componentDidLoad() {
|
|
const {
|
|
parentPopover,
|
|
isOpen
|
|
} = this;
|
|
/**
|
|
* If popover was rendered with isOpen="true"
|
|
* then we should open popover immediately.
|
|
*/
|
|
|
|
if (isOpen === true) {
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.r)(() => this.present());
|
|
}
|
|
|
|
if (parentPopover) {
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.a)(parentPopover, 'ionPopoverWillDismiss', () => {
|
|
this.dismiss(undefined, undefined, false);
|
|
});
|
|
}
|
|
}
|
|
/**
|
|
* When opening a popover from a trigger, we should not be
|
|
* modifying the `event` prop from inside the component.
|
|
* Additionally, when pressing the "Right" arrow key, we need
|
|
* to shift focus to the first descendant in the newly presented
|
|
* popover.
|
|
*
|
|
* @internal
|
|
*/
|
|
|
|
|
|
presentFromTrigger(_x3) {
|
|
var _this = this;
|
|
|
|
return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (event, focusDescendant = false) {
|
|
_this.focusDescendantOnPresent = focusDescendant;
|
|
yield _this.present(event);
|
|
_this.focusDescendantOnPresent = false;
|
|
}).apply(this, arguments);
|
|
}
|
|
/**
|
|
* Determines whether or not an overlay
|
|
* is being used inline or via a controller/JS
|
|
* and returns the correct delegate.
|
|
* By default, subsequent calls to getDelegate
|
|
* will use a cached version of the delegate.
|
|
* This is useful for calling dismiss after
|
|
* present so that the correct delegate is given.
|
|
*/
|
|
|
|
|
|
getDelegate(force = false) {
|
|
if (this.workingDelegate && !force) {
|
|
return {
|
|
delegate: this.workingDelegate,
|
|
inline: this.inline
|
|
};
|
|
}
|
|
/**
|
|
* If using overlay inline
|
|
* we potentially need to use the coreDelegate
|
|
* so that this works in vanilla JS apps.
|
|
* If a developer has presented this component
|
|
* via a controller, then we can assume
|
|
* the component is already in the
|
|
* correct place.
|
|
*/
|
|
|
|
|
|
const parentEl = this.el.parentNode;
|
|
const inline = this.inline = parentEl !== null && !this.hasController;
|
|
const delegate = this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate;
|
|
return {
|
|
inline,
|
|
delegate
|
|
};
|
|
}
|
|
/**
|
|
* Present the popover overlay after it has been created.
|
|
* Developers can pass a mouse, touch, or pointer event
|
|
* to position the popover relative to where that event
|
|
* was dispatched.
|
|
*/
|
|
|
|
|
|
present(event) {
|
|
var _this2 = this;
|
|
|
|
return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
|
|
if (_this2.presented) {
|
|
return;
|
|
}
|
|
/**
|
|
* When using an inline popover
|
|
* and dismissing a popover it is possible to
|
|
* quickly present the popover while it is
|
|
* dismissing. We need to await any current
|
|
* transition to allow the dismiss to finish
|
|
* before presenting again.
|
|
*/
|
|
|
|
|
|
if (_this2.currentTransition !== undefined) {
|
|
yield _this2.currentTransition;
|
|
}
|
|
|
|
const {
|
|
inline,
|
|
delegate
|
|
} = _this2.getDelegate(true);
|
|
|
|
_this2.usersElement = yield (0,_framework_delegate_c3305a28_js__WEBPACK_IMPORTED_MODULE_3__.a)(delegate, _this2.el, _this2.component, ['popover-viewport'], _this2.componentProps, inline);
|
|
yield (0,_index_27c7e5c4_js__WEBPACK_IMPORTED_MODULE_8__.e)(_this2.usersElement);
|
|
|
|
if (!_this2.keyboardEvents) {
|
|
_this2.configureKeyboardInteraction();
|
|
}
|
|
|
|
_this2.configureDismissInteraction();
|
|
|
|
_this2.ionMount.emit();
|
|
|
|
return new Promise(resolve => {
|
|
/**
|
|
* Wait two request animation frame loops before presenting the popover.
|
|
* This allows the framework implementations enough time to mount
|
|
* the popover contents, so the bounding box is set when the popover
|
|
* transition starts.
|
|
*
|
|
* On Angular and React, a single raf is enough time, but for Vue
|
|
* we need to wait two rafs. As a result we are using two rafs for
|
|
* all frameworks to ensure the popover is presented correctly.
|
|
*/
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.r)(() => {
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.r)( /*#__PURE__*/(0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
|
|
_this2.currentTransition = (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.d)(_this2, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
|
|
event: event || _this2.event,
|
|
size: _this2.size,
|
|
trigger: _this2.triggerEl,
|
|
reference: _this2.reference,
|
|
side: _this2.side,
|
|
align: _this2.alignment
|
|
});
|
|
yield _this2.currentTransition;
|
|
_this2.currentTransition = undefined;
|
|
/**
|
|
* If popover is nested and was
|
|
* presented using the "Right" arrow key,
|
|
* we need to move focus to the first
|
|
* descendant inside of the popover.
|
|
*/
|
|
|
|
if (_this2.focusDescendantOnPresent) {
|
|
(0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.j)(_this2.el, _this2.el);
|
|
}
|
|
|
|
resolve();
|
|
}));
|
|
});
|
|
});
|
|
})();
|
|
}
|
|
/**
|
|
* Dismiss the popover 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 popover. For example, 'cancel' or 'backdrop'.
|
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
*/
|
|
|
|
|
|
dismiss(_x4, _x5) {
|
|
var _this3 = this;
|
|
|
|
return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (data, role, dismissParentPopover = true) {
|
|
/**
|
|
* When using an inline popover
|
|
* and presenting a popover it is possible to
|
|
* quickly dismiss the popover while it is
|
|
* presenting. We need to await any current
|
|
* transition to allow the present to finish
|
|
* before dismissing again.
|
|
*/
|
|
if (_this3.currentTransition !== undefined) {
|
|
yield _this3.currentTransition;
|
|
}
|
|
|
|
const {
|
|
destroyKeyboardInteraction,
|
|
destroyDismissInteraction
|
|
} = _this3;
|
|
|
|
if (dismissParentPopover && _this3.parentPopover) {
|
|
_this3.parentPopover.dismiss(data, role, dismissParentPopover);
|
|
}
|
|
|
|
_this3.currentTransition = (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.f)(_this3, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, _this3.event);
|
|
const shouldDismiss = yield _this3.currentTransition;
|
|
|
|
if (shouldDismiss) {
|
|
if (destroyKeyboardInteraction) {
|
|
destroyKeyboardInteraction();
|
|
_this3.destroyKeyboardInteraction = undefined;
|
|
}
|
|
|
|
if (destroyDismissInteraction) {
|
|
destroyDismissInteraction();
|
|
_this3.destroyDismissInteraction = undefined;
|
|
}
|
|
/**
|
|
* If using popover inline
|
|
* we potentially need to use the coreDelegate
|
|
* so that this works in vanilla JS apps
|
|
*/
|
|
|
|
|
|
const {
|
|
delegate
|
|
} = _this3.getDelegate();
|
|
|
|
yield (0,_framework_delegate_c3305a28_js__WEBPACK_IMPORTED_MODULE_3__.d)(delegate, _this3.usersElement);
|
|
}
|
|
|
|
_this3.currentTransition = undefined;
|
|
return shouldDismiss;
|
|
}).apply(this, arguments);
|
|
}
|
|
/**
|
|
* @internal
|
|
*/
|
|
|
|
|
|
getParentPopover() {
|
|
var _this4 = this;
|
|
|
|
return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
|
|
return _this4.parentPopover;
|
|
})();
|
|
}
|
|
/**
|
|
* Returns a promise that resolves when the popover did dismiss.
|
|
*/
|
|
|
|
|
|
onDidDismiss() {
|
|
return (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.g)(this.el, 'ionPopoverDidDismiss');
|
|
}
|
|
/**
|
|
* Returns a promise that resolves when the popover will dismiss.
|
|
*/
|
|
|
|
|
|
onWillDismiss() {
|
|
return (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_6__.g)(this.el, 'ionPopoverWillDismiss');
|
|
}
|
|
|
|
render() {
|
|
const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_2__.b)(this);
|
|
const {
|
|
onLifecycle,
|
|
popoverId,
|
|
parentPopover,
|
|
dismissOnSelect,
|
|
side,
|
|
arrow,
|
|
htmlAttributes
|
|
} = this;
|
|
const desktop = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_2__.a)('desktop');
|
|
const enableArrow = arrow && !parentPopover;
|
|
return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)(_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.H, Object.assign({
|
|
"aria-modal": "true",
|
|
"no-router": true,
|
|
tabindex: "-1"
|
|
}, htmlAttributes, {
|
|
style: {
|
|
zIndex: `${20000 + this.overlayIndex}`
|
|
},
|
|
id: popoverId,
|
|
class: Object.assign(Object.assign({}, (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_7__.g)(this.cssClass)), {
|
|
[mode]: true,
|
|
'popover-translucent': this.translucent,
|
|
'overlay-hidden': true,
|
|
'popover-desktop': desktop,
|
|
[`popover-side-${side}`]: true,
|
|
'popover-nested': !!parentPopover
|
|
}),
|
|
onIonPopoverDidPresent: onLifecycle,
|
|
onIonPopoverWillPresent: onLifecycle,
|
|
onIonPopoverWillDismiss: onLifecycle,
|
|
onIonPopoverDidDismiss: onLifecycle,
|
|
onIonBackdropTap: this.onBackdropTap
|
|
}), !parentPopover && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-backdrop", {
|
|
tappable: this.backdropDismiss,
|
|
visible: this.showBackdrop,
|
|
part: "backdrop"
|
|
}), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "popover-wrapper ion-overlay-wrapper",
|
|
onClick: dismissOnSelect ? () => this.dismiss() : undefined
|
|
}, enableArrow && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "popover-arrow",
|
|
part: "arrow"
|
|
}), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "popover-content",
|
|
part: "content"
|
|
}, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", null))));
|
|
}
|
|
|
|
get el() {
|
|
return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.i)(this);
|
|
}
|
|
|
|
static get watchers() {
|
|
return {
|
|
"trigger": ["onTriggerChange"],
|
|
"triggerAction": ["onTriggerChange"],
|
|
"isOpen": ["onIsOpenChange"]
|
|
};
|
|
}
|
|
|
|
};
|
|
const LIFECYCLE_MAP = {
|
|
ionPopoverDidPresent: 'ionViewDidEnter',
|
|
ionPopoverWillPresent: 'ionViewWillEnter',
|
|
ionPopoverWillDismiss: 'ionViewWillLeave',
|
|
ionPopoverDidDismiss: 'ionViewDidLeave'
|
|
};
|
|
let popoverIds = 0;
|
|
Popover.style = {
|
|
ios: popoverIosCss,
|
|
md: popoverMdCss
|
|
};
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 50320:
|
|
/*!*************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/theme-7670341c.js ***!
|
|
\*************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "c": () => (/* binding */ createColorClasses),
|
|
/* harmony export */ "g": () => (/* binding */ getClassMap),
|
|
/* harmony export */ "h": () => (/* binding */ hostContext),
|
|
/* harmony export */ "o": () => (/* binding */ openURL)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 71670);
|
|
|
|
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
const hostContext = (selector, el) => {
|
|
return el.closest(selector) !== null;
|
|
};
|
|
/**
|
|
* Create the mode and color classes for the component based on the classes passed in
|
|
*/
|
|
|
|
|
|
const createColorClasses = (color, cssClassMap) => {
|
|
return typeof color === 'string' && color.length > 0 ? Object.assign({
|
|
'ion-color': true,
|
|
[`ion-color-${color}`]: true
|
|
}, cssClassMap) : cssClassMap;
|
|
};
|
|
|
|
const getClassList = classes => {
|
|
if (classes !== undefined) {
|
|
const array = Array.isArray(classes) ? classes : classes.split(' ');
|
|
return array.filter(c => c != null).map(c => c.trim()).filter(c => c !== '');
|
|
}
|
|
|
|
return [];
|
|
};
|
|
|
|
const getClassMap = classes => {
|
|
const map = {};
|
|
getClassList(classes).forEach(c => map[c] = true);
|
|
return map;
|
|
};
|
|
|
|
const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
|
|
|
|
const openURL = /*#__PURE__*/function () {
|
|
var _ref = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (url, ev, direction, animation) {
|
|
if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
|
|
const router = document.querySelector('ion-router');
|
|
|
|
if (router) {
|
|
if (ev != null) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
return router.push(url, direction, animation);
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
return function openURL(_x, _x2, _x3, _x4) {
|
|
return _ref.apply(this, arguments);
|
|
};
|
|
}();
|
|
|
|
|
|
|
|
/***/ })
|
|
|
|
}])
|
|
//# sourceMappingURL=8050.js.map
|