95d9d2f9a8
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1077 lines
45 KiB
JavaScript
1077 lines
45 KiB
JavaScript
(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([[5454],{
|
|
|
|
/***/ 17481:
|
|
/*!***********************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/dir-e8b767a8.js ***!
|
|
\***********************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "i": () => (/* binding */ isRTL)
|
|
/* harmony export */ });
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
|
|
/**
|
|
* Returns `true` if the document or host element
|
|
* has a `dir` set to `rtl`. The host value will always
|
|
* take priority over the root document value.
|
|
*/
|
|
const isRTL = hostEl => {
|
|
if (hostEl) {
|
|
if (hostEl.dir !== '') {
|
|
return hostEl.dir.toLowerCase() === 'rtl';
|
|
}
|
|
}
|
|
|
|
return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
|
|
};
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 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 ')}.`);
|
|
};
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 24311:
|
|
/*!*************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/index-e6d1a8be.js ***!
|
|
\*************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "I": () => (/* binding */ ION_CONTENT_ELEMENT_SELECTOR),
|
|
/* harmony export */ "a": () => (/* binding */ findIonContent),
|
|
/* harmony export */ "b": () => (/* binding */ ION_CONTENT_CLASS_SELECTOR),
|
|
/* harmony export */ "c": () => (/* binding */ scrollByPoint),
|
|
/* harmony export */ "d": () => (/* binding */ disableContentScrollY),
|
|
/* harmony export */ "f": () => (/* binding */ findClosestIonContent),
|
|
/* harmony export */ "g": () => (/* binding */ getScrollElement),
|
|
/* harmony export */ "i": () => (/* binding */ isIonContent),
|
|
/* harmony export */ "p": () => (/* binding */ printIonContentErrorMsg),
|
|
/* harmony export */ "r": () => (/* binding */ resetContentScrollY),
|
|
/* harmony export */ "s": () => (/* binding */ scrollToTop)
|
|
/* 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);
|
|
/* harmony import */ var _index_c4b11676_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index-c4b11676.js */ 99273);
|
|
|
|
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
|
|
|
|
const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
|
|
const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';
|
|
const ION_CONTENT_CLASS_SELECTOR = '.ion-content-scroll-host';
|
|
/**
|
|
* Selector used for implementations reliant on `<ion-content>` for scroll event changes.
|
|
*
|
|
* Developers should use the `.ion-content-scroll-host` selector to target the element emitting
|
|
* scroll events. With virtual scroll implementations this will be the host element for
|
|
* the scroll viewport.
|
|
*/
|
|
|
|
const ION_CONTENT_SELECTOR = `${ION_CONTENT_ELEMENT_SELECTOR}, ${ION_CONTENT_CLASS_SELECTOR}`;
|
|
|
|
const isIonContent = el => el.tagName === ION_CONTENT_TAG_NAME;
|
|
/**
|
|
* Waits for the element host fully initialize before
|
|
* returning the inner scroll element.
|
|
*
|
|
* For `ion-content` the scroll target will be the result
|
|
* of the `getScrollElement` function.
|
|
*
|
|
* For custom implementations it will be the element host
|
|
* or a selector within the host, if supplied through `scrollTarget`.
|
|
*/
|
|
|
|
|
|
const getScrollElement = /*#__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* (el) {
|
|
if (isIonContent(el)) {
|
|
yield new Promise(resolve => (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_1__.c)(el, resolve));
|
|
return el.getScrollElement();
|
|
}
|
|
|
|
return el;
|
|
});
|
|
|
|
return function getScrollElement(_x) {
|
|
return _ref.apply(this, arguments);
|
|
};
|
|
}();
|
|
/**
|
|
* Queries the element matching the selector for IonContent.
|
|
* See ION_CONTENT_SELECTOR for the selector used.
|
|
*/
|
|
|
|
|
|
const findIonContent = el => {
|
|
/**
|
|
* First we try to query the custom scroll host selector in cases where
|
|
* the implementation is using an outer `ion-content` with an inner custom
|
|
* scroll container.
|
|
*/
|
|
const customContentHost = el.querySelector(ION_CONTENT_CLASS_SELECTOR);
|
|
|
|
if (customContentHost) {
|
|
return customContentHost;
|
|
}
|
|
|
|
return el.querySelector(ION_CONTENT_SELECTOR);
|
|
};
|
|
/**
|
|
* Queries the closest element matching the selector for IonContent.
|
|
*/
|
|
|
|
|
|
const findClosestIonContent = el => {
|
|
return el.closest(ION_CONTENT_SELECTOR);
|
|
};
|
|
/**
|
|
* Scrolls to the top of the element. If an `ion-content` is found, it will scroll
|
|
* using the public API `scrollToTop` with a duration.
|
|
*/
|
|
// TODO(FW-2832): type
|
|
|
|
|
|
const scrollToTop = (el, durationMs) => {
|
|
if (isIonContent(el)) {
|
|
const content = el;
|
|
return content.scrollToTop(durationMs);
|
|
}
|
|
|
|
return Promise.resolve(el.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: durationMs > 0 ? 'smooth' : 'auto'
|
|
}));
|
|
};
|
|
/**
|
|
* Scrolls by a specified X/Y distance in the component. If an `ion-content` is found, it will scroll
|
|
* using the public API `scrollByPoint` with a duration.
|
|
*/
|
|
|
|
|
|
const scrollByPoint = (el, x, y, durationMs) => {
|
|
if (isIonContent(el)) {
|
|
const content = el;
|
|
return content.scrollByPoint(x, y, durationMs);
|
|
}
|
|
|
|
return Promise.resolve(el.scrollBy({
|
|
top: y,
|
|
left: x,
|
|
behavior: durationMs > 0 ? 'smooth' : 'auto'
|
|
}));
|
|
};
|
|
/**
|
|
* Prints an error informing developers that an implementation requires an element to be used
|
|
* within either the `ion-content` selector or the `.ion-content-scroll-host` class.
|
|
*/
|
|
|
|
|
|
const printIonContentErrorMsg = el => {
|
|
return (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_2__.a)(el, ION_CONTENT_ELEMENT_SELECTOR);
|
|
};
|
|
/**
|
|
* Several components in Ionic need to prevent scrolling
|
|
* during a gesture (card modal, range, item sliding, etc).
|
|
* Use this utility to account for ion-content and custom content hosts.
|
|
*/
|
|
|
|
|
|
const disableContentScrollY = contentEl => {
|
|
if (isIonContent(contentEl)) {
|
|
const ionContent = contentEl;
|
|
const initialScrollY = ionContent.scrollY;
|
|
ionContent.scrollY = false;
|
|
/**
|
|
* This should be passed into resetContentScrollY
|
|
* so that we can revert ion-content's scrollY to the
|
|
* correct state. For example, if scrollY = false
|
|
* initially, we do not want to enable scrolling
|
|
* when we call resetContentScrollY.
|
|
*/
|
|
|
|
return initialScrollY;
|
|
} else {
|
|
contentEl.style.setProperty('overflow', 'hidden');
|
|
return true;
|
|
}
|
|
};
|
|
|
|
const resetContentScrollY = (contentEl, initialScrollY) => {
|
|
if (isIonContent(contentEl)) {
|
|
contentEl.scrollY = initialScrollY;
|
|
} else {
|
|
contentEl.style.removeProperty('overflow');
|
|
}
|
|
};
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 35454:
|
|
/*!**************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/ion-range.entry.js ***!
|
|
\**************************************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "ion_range": () => (/* binding */ Range)
|
|
/* 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 _index_e6d1a8be_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./index-e6d1a8be.js */ 24311);
|
|
/* 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 _dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./dir-e8b767a8.js */ 17481);
|
|
/* harmony import */ var _theme_7670341c_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./theme-7670341c.js */ 50320);
|
|
|
|
|
|
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02);--knob-size:28px;--bar-height:2px;--bar-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){margin-left:0;margin-right:16px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted([slot=end]){margin-left:16px;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:20px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{margin-left:-1px;border-radius:0;position:absolute;top:18px;width:2px;height:8px;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-tick{margin-left:unset;-webkit-margin-start:-1px;margin-inline-start:-1px}}.range-tick-active{background:var(--bar-background-active)}.range-pin{-webkit-transform:translate3d(0, 28px, 0) scale(0.01);transform:translate3d(0, 28px, 0) scale(0.01);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:inline-block;position:relative;top:-20px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:12px;text-align:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-pin{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}:host(.range-disabled){opacity:0.5}";
|
|
const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}:host{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #3880ff);--pin-color:var(--ion-color-primary-contrast, #fff);padding-left:14px;padding-right:14px;padding-top:8px;padding-bottom:8px;font-size:12px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px}}:host(.ion-color) .range-bar{background:rgba(var(--ion-color-base-rgb), 0.26)}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-knob,:host(.ion-color) .range-knob::before,:host(.ion-color) .range-pin,:host(.ion-color) .range-pin::before,:host(.ion-color) .range-tick{background:var(--ion-color-base);color:var(--ion-color-contrast)}::slotted([slot=start]){margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}::slotted([slot=end]){margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:28px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}.range-knob::before{border-radius:50%;left:0;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:\"\";opacity:0.13;pointer-events:none}[dir=rtl] .range-knob::before,:host-context([dir=rtl]) .range-knob::before{left:unset;right:unset;right:0}.range-tick{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick-active{background:transparent}.range-pin{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);display:inline-block;position:relative;min-width:28px;height:28px;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);text-align:center}.range-pin::before{left:50%;top:3px;margin-left:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset;right:unset;right:50%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-pin::before{margin-left:unset;-webkit-margin-start:-13px;margin-inline-start:-13px}}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, -24px, 0) scale(1);transform:translate3d(0, -24px, 0) scale(1)}@media (any-hover: hover){.range-knob-handle:hover .range-knob:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}.range-knob-handle.ion-activated .range-knob:before,.range-knob-handle.ion-focused .range-knob:before,.range-knob-handle.range-knob-pressed .range-knob:before{-webkit-transform:scale(2);transform:scale(2)}.range-knob-handle.ion-focused .range-knob::before{opacity:0.13}.range-knob-handle.ion-activated .range-knob::before,.range-knob-handle.range-knob-pressed .range-knob::before{opacity:0.25}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob{-webkit-transform:scale(1);transform:scale(1)}:host(.range-disabled) .range-bar-active,:host(.range-disabled) .range-bar,:host(.range-disabled) .range-tick{background-color:var(--ion-color-step-250, #bfbfbf)}:host(.range-disabled) .range-knob{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, #bfbfbf)}";
|
|
const Range = class {
|
|
constructor(hostRef) {
|
|
var _this = this;
|
|
|
|
(0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.r)(this, hostRef);
|
|
this.ionChange = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionChange", 7);
|
|
this.ionStyle = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionStyle", 7);
|
|
this.ionFocus = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionFocus", 7);
|
|
this.ionBlur = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionBlur", 7);
|
|
this.ionKnobMoveStart = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionKnobMoveStart", 7);
|
|
this.ionKnobMoveEnd = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionKnobMoveEnd", 7);
|
|
this.didLoad = false;
|
|
this.noUpdate = false;
|
|
this.hasFocus = false;
|
|
this.inheritedAttributes = {};
|
|
this.contentEl = null;
|
|
this.initialContentScrollY = true;
|
|
this.ratioA = 0;
|
|
this.ratioB = 0;
|
|
/**
|
|
* How long, in milliseconds, to wait to trigger the
|
|
* `ionChange` event after each change in the range value.
|
|
* This also impacts form bindings such as `ngModel` or `v-model`.
|
|
*/
|
|
|
|
this.debounce = 0; // TODO: In Ionic Framework v6 this should initialize to this.rangeId like the other form components do.
|
|
|
|
/**
|
|
* The name of the control, which is submitted with the form data.
|
|
*/
|
|
|
|
this.name = '';
|
|
/**
|
|
* Show two knobs.
|
|
*/
|
|
|
|
this.dualKnobs = false;
|
|
/**
|
|
* Minimum integer value of the range.
|
|
*/
|
|
|
|
this.min = 0;
|
|
/**
|
|
* Maximum integer value of the range.
|
|
*/
|
|
|
|
this.max = 100;
|
|
/**
|
|
* If `true`, a pin with integer value is shown when the knob
|
|
* is pressed.
|
|
*/
|
|
|
|
this.pin = false;
|
|
/**
|
|
* A callback used to format the pin text.
|
|
* By default the pin text is set to `Math.round(value)`.
|
|
*/
|
|
|
|
this.pinFormatter = value => Math.round(value);
|
|
/**
|
|
* If `true`, the knob snaps to tick marks evenly spaced based
|
|
* on the step property value.
|
|
*/
|
|
|
|
|
|
this.snaps = false;
|
|
/**
|
|
* Specifies the value granularity.
|
|
*/
|
|
|
|
this.step = 1;
|
|
/**
|
|
* If `true`, tick marks are displayed based on the step value.
|
|
* Only applies when `snaps` is `true`.
|
|
*/
|
|
|
|
this.ticks = true;
|
|
/**
|
|
* If `true`, the user cannot interact with the range.
|
|
*/
|
|
|
|
this.disabled = false;
|
|
/**
|
|
* the value of the range.
|
|
*/
|
|
|
|
this.value = 0;
|
|
|
|
this.clampBounds = value => {
|
|
return (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(this.min, value, this.max);
|
|
};
|
|
|
|
this.ensureValueInBounds = value => {
|
|
if (this.dualKnobs) {
|
|
return {
|
|
lower: this.clampBounds(value.lower),
|
|
upper: this.clampBounds(value.upper)
|
|
};
|
|
} else {
|
|
return this.clampBounds(value);
|
|
}
|
|
};
|
|
|
|
this.setupGesture = /*#__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* () {
|
|
const rangeSlider = _this.rangeSlider;
|
|
|
|
if (rangeSlider) {
|
|
_this.gesture = (yield Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./index-422b6e83.js */ 36366))).createGesture({
|
|
el: rangeSlider,
|
|
gestureName: 'range',
|
|
gesturePriority: 100,
|
|
threshold: 0,
|
|
onStart: ev => _this.onStart(ev),
|
|
onMove: ev => _this.onMove(ev),
|
|
onEnd: ev => _this.onEnd(ev)
|
|
});
|
|
|
|
_this.gesture.enable(!_this.disabled);
|
|
}
|
|
});
|
|
|
|
this.handleKeyboard = (knob, isIncrease) => {
|
|
const {
|
|
ensureValueInBounds
|
|
} = this;
|
|
let step = this.step;
|
|
step = step > 0 ? step : 1;
|
|
step = step / (this.max - this.min);
|
|
|
|
if (!isIncrease) {
|
|
step *= -1;
|
|
}
|
|
|
|
if (knob === 'A') {
|
|
this.ratioA = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(0, this.ratioA + step, 1);
|
|
} else {
|
|
this.ratioB = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(0, this.ratioB + step, 1);
|
|
}
|
|
|
|
this.ionKnobMoveStart.emit({
|
|
value: ensureValueInBounds(this.value)
|
|
});
|
|
this.updateValue();
|
|
this.ionKnobMoveEnd.emit({
|
|
value: ensureValueInBounds(this.value)
|
|
});
|
|
};
|
|
|
|
this.onBlur = () => {
|
|
if (this.hasFocus) {
|
|
this.hasFocus = false;
|
|
this.ionBlur.emit();
|
|
this.emitStyle();
|
|
}
|
|
};
|
|
|
|
this.onFocus = () => {
|
|
if (!this.hasFocus) {
|
|
this.hasFocus = true;
|
|
this.ionFocus.emit();
|
|
this.emitStyle();
|
|
}
|
|
};
|
|
}
|
|
|
|
debounceChanged() {
|
|
this.ionChange = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.h)(this.ionChange, this.debounce);
|
|
}
|
|
|
|
minChanged() {
|
|
if (!this.noUpdate) {
|
|
this.updateRatio();
|
|
}
|
|
}
|
|
|
|
maxChanged() {
|
|
if (!this.noUpdate) {
|
|
this.updateRatio();
|
|
}
|
|
}
|
|
|
|
activeBarStartChanged() {
|
|
const {
|
|
activeBarStart
|
|
} = this;
|
|
|
|
if (activeBarStart !== undefined) {
|
|
if (activeBarStart > this.max) {
|
|
(0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_5__.p)(`Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
|
|
this.activeBarStart = this.max;
|
|
} else if (activeBarStart < this.min) {
|
|
(0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_5__.p)(`Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
|
|
this.activeBarStart = this.min;
|
|
}
|
|
}
|
|
}
|
|
|
|
disabledChanged() {
|
|
if (this.gesture) {
|
|
this.gesture.enable(!this.disabled);
|
|
}
|
|
|
|
this.emitStyle();
|
|
}
|
|
|
|
valueChanged(value) {
|
|
if (!this.noUpdate) {
|
|
this.updateRatio();
|
|
}
|
|
|
|
value = this.ensureValueInBounds(value);
|
|
this.ionChange.emit({
|
|
value
|
|
});
|
|
}
|
|
|
|
componentWillLoad() {
|
|
/**
|
|
* If user has custom ID set then we should
|
|
* not assign the default incrementing ID.
|
|
*/
|
|
this.rangeId = this.el.hasAttribute('id') ? this.el.getAttribute('id') : `ion-r-${rangeIds++}`;
|
|
this.inheritedAttributes = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.i)(this.el);
|
|
}
|
|
|
|
componentDidLoad() {
|
|
this.setupGesture();
|
|
this.didLoad = true;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.updateRatio();
|
|
this.debounceChanged();
|
|
this.disabledChanged();
|
|
this.activeBarStartChanged();
|
|
/**
|
|
* If we have not yet rendered
|
|
* ion-range, then rangeSlider is not defined.
|
|
* But if we are moving ion-range via appendChild,
|
|
* then rangeSlider will be defined.
|
|
*/
|
|
|
|
if (this.didLoad) {
|
|
this.setupGesture();
|
|
}
|
|
|
|
this.contentEl = (0,_index_e6d1a8be_js__WEBPACK_IMPORTED_MODULE_3__.f)(this.el);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.gesture) {
|
|
this.gesture.destroy();
|
|
this.gesture = undefined;
|
|
}
|
|
}
|
|
|
|
getValue() {
|
|
var _a;
|
|
|
|
const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
|
|
|
|
if (this.dualKnobs) {
|
|
if (typeof value === 'object') {
|
|
return value;
|
|
}
|
|
|
|
return {
|
|
lower: 0,
|
|
upper: value
|
|
};
|
|
} else {
|
|
if (typeof value === 'object') {
|
|
return value.upper;
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}
|
|
|
|
emitStyle() {
|
|
this.ionStyle.emit({
|
|
interactive: true,
|
|
'interactive-disabled': this.disabled
|
|
});
|
|
}
|
|
|
|
onStart(detail) {
|
|
const {
|
|
contentEl
|
|
} = this;
|
|
|
|
if (contentEl) {
|
|
this.initialContentScrollY = (0,_index_e6d1a8be_js__WEBPACK_IMPORTED_MODULE_3__.d)(contentEl);
|
|
}
|
|
|
|
const rect = this.rect = this.rangeSlider.getBoundingClientRect();
|
|
const currentX = detail.currentX; // figure out which knob they started closer to
|
|
|
|
let ratio = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(0, (currentX - rect.left) / rect.width, 1);
|
|
|
|
if ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_6__.i)(this.el)) {
|
|
ratio = 1 - ratio;
|
|
}
|
|
|
|
this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
|
|
this.setFocus(this.pressedKnob); // update the active knob's position
|
|
|
|
this.update(currentX);
|
|
this.ionKnobMoveStart.emit({
|
|
value: this.ensureValueInBounds(this.value)
|
|
});
|
|
}
|
|
|
|
onMove(detail) {
|
|
this.update(detail.currentX);
|
|
}
|
|
|
|
onEnd(detail) {
|
|
const {
|
|
contentEl,
|
|
initialContentScrollY
|
|
} = this;
|
|
|
|
if (contentEl) {
|
|
(0,_index_e6d1a8be_js__WEBPACK_IMPORTED_MODULE_3__.r)(contentEl, initialContentScrollY);
|
|
}
|
|
|
|
this.update(detail.currentX);
|
|
this.pressedKnob = undefined;
|
|
this.ionKnobMoveEnd.emit({
|
|
value: this.ensureValueInBounds(this.value)
|
|
});
|
|
}
|
|
|
|
update(currentX) {
|
|
// figure out where the pointer is currently at
|
|
// update the knob being interacted with
|
|
const rect = this.rect;
|
|
let ratio = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(0, (currentX - rect.left) / rect.width, 1);
|
|
|
|
if ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_6__.i)(this.el)) {
|
|
ratio = 1 - ratio;
|
|
}
|
|
|
|
if (this.snaps) {
|
|
// snaps the ratio to the current value
|
|
ratio = valueToRatio(ratioToValue(ratio, this.min, this.max, this.step), this.min, this.max);
|
|
} // update which knob is pressed
|
|
|
|
|
|
if (this.pressedKnob === 'A') {
|
|
this.ratioA = ratio;
|
|
} else {
|
|
this.ratioB = ratio;
|
|
} // Update input value
|
|
|
|
|
|
this.updateValue();
|
|
}
|
|
|
|
get valA() {
|
|
return ratioToValue(this.ratioA, this.min, this.max, this.step);
|
|
}
|
|
|
|
get valB() {
|
|
return ratioToValue(this.ratioB, this.min, this.max, this.step);
|
|
}
|
|
|
|
get ratioLower() {
|
|
if (this.dualKnobs) {
|
|
return Math.min(this.ratioA, this.ratioB);
|
|
}
|
|
|
|
const {
|
|
activeBarStart
|
|
} = this;
|
|
|
|
if (activeBarStart == null) {
|
|
return 0;
|
|
}
|
|
|
|
return valueToRatio(activeBarStart, this.min, this.max);
|
|
}
|
|
|
|
get ratioUpper() {
|
|
if (this.dualKnobs) {
|
|
return Math.max(this.ratioA, this.ratioB);
|
|
}
|
|
|
|
return this.ratioA;
|
|
}
|
|
|
|
updateRatio() {
|
|
const value = this.getValue();
|
|
const {
|
|
min,
|
|
max
|
|
} = this;
|
|
|
|
if (this.dualKnobs) {
|
|
this.ratioA = valueToRatio(value.lower, min, max);
|
|
this.ratioB = valueToRatio(value.upper, min, max);
|
|
} else {
|
|
this.ratioA = valueToRatio(value, min, max);
|
|
}
|
|
}
|
|
|
|
updateValue() {
|
|
this.noUpdate = true;
|
|
const {
|
|
valA,
|
|
valB
|
|
} = this;
|
|
this.value = !this.dualKnobs ? valA : {
|
|
lower: Math.min(valA, valB),
|
|
upper: Math.max(valA, valB)
|
|
};
|
|
this.noUpdate = false;
|
|
}
|
|
|
|
setFocus(knob) {
|
|
if (this.el.shadowRoot) {
|
|
const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
|
|
|
|
if (knobEl) {
|
|
knobEl.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var _a;
|
|
|
|
const {
|
|
min,
|
|
max,
|
|
step,
|
|
el,
|
|
handleKeyboard,
|
|
pressedKnob,
|
|
disabled,
|
|
pin,
|
|
ratioLower,
|
|
ratioUpper,
|
|
inheritedAttributes,
|
|
rangeId,
|
|
pinFormatter
|
|
} = this;
|
|
/**
|
|
* Look for external label, ion-label, or aria-labelledby.
|
|
* If none, see if user placed an aria-label on the host
|
|
* and use that instead.
|
|
*/
|
|
|
|
let {
|
|
labelText
|
|
} = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.d)(el, rangeId);
|
|
|
|
if (labelText === undefined || labelText === null) {
|
|
labelText = inheritedAttributes['aria-label'];
|
|
}
|
|
|
|
const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_2__.b)(this);
|
|
let barStart = `${ratioLower * 100}%`;
|
|
let barEnd = `${100 - ratioUpper * 100}%`;
|
|
const rtl = (0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_6__.i)(this.el);
|
|
const start = rtl ? 'right' : 'left';
|
|
const end = rtl ? 'left' : 'right';
|
|
|
|
const tickStyle = tick => {
|
|
return {
|
|
[start]: tick[start]
|
|
};
|
|
};
|
|
|
|
if (this.dualKnobs === false) {
|
|
/**
|
|
* When the value is less than the activeBarStart or the min value,
|
|
* the knob will display at the start of the active bar.
|
|
*/
|
|
if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
|
|
/**
|
|
* Sets the bar positions relative to the upper and lower limits.
|
|
* Converts the ratio values into percentages, used as offsets for left/right styles.
|
|
*
|
|
* The ratioUpper refers to the knob position on the bar.
|
|
* The ratioLower refers to the end position of the active bar (the value).
|
|
*/
|
|
barStart = `${ratioUpper * 100}%`;
|
|
barEnd = `${100 - ratioLower * 100}%`;
|
|
} else {
|
|
/**
|
|
* Otherwise, the knob will display at the end of the active bar.
|
|
*
|
|
* The ratioLower refers to the start position of the active bar (the value).
|
|
* The ratioUpper refers to the knob position on the bar.
|
|
*/
|
|
barStart = `${ratioLower * 100}%`;
|
|
barEnd = `${100 - ratioUpper * 100}%`;
|
|
}
|
|
}
|
|
|
|
const barStyle = {
|
|
[start]: barStart,
|
|
[end]: barEnd
|
|
};
|
|
const ticks = [];
|
|
|
|
if (this.snaps && this.ticks) {
|
|
for (let value = min; value <= max; value += step) {
|
|
const ratio = valueToRatio(value, min, max);
|
|
const ratioMin = Math.min(ratioLower, ratioUpper);
|
|
const ratioMax = Math.max(ratioLower, ratioUpper);
|
|
const tick = {
|
|
ratio,
|
|
|
|
/**
|
|
* Sets the tick mark as active when the tick is between the min bounds and the knob.
|
|
* When using activeBarStart, the tick mark will be active between the knob and activeBarStart.
|
|
*/
|
|
active: ratio >= ratioMin && ratio <= ratioMax
|
|
};
|
|
tick[start] = `${ratio * 100}%`;
|
|
ticks.push(tick);
|
|
}
|
|
}
|
|
|
|
(0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.e)(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)(_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.H, {
|
|
onFocusin: this.onFocus,
|
|
onFocusout: this.onBlur,
|
|
id: rangeId,
|
|
class: (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_7__.c)(this.color, {
|
|
[mode]: true,
|
|
'in-item': (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_7__.h)('ion-item', el),
|
|
'range-disabled': disabled,
|
|
'range-pressed': pressedKnob !== undefined,
|
|
'range-has-pin': pin
|
|
})
|
|
}, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", {
|
|
name: "start"
|
|
}), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "range-slider",
|
|
ref: rangeEl => this.rangeSlider = rangeEl
|
|
}, ticks.map(tick => (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
style: tickStyle(tick),
|
|
role: "presentation",
|
|
class: {
|
|
'range-tick': true,
|
|
'range-tick-active': tick.active
|
|
},
|
|
part: tick.active ? 'tick-active' : 'tick'
|
|
})), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "range-bar",
|
|
role: "presentation",
|
|
part: "bar"
|
|
}), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "range-bar range-bar-active",
|
|
role: "presentation",
|
|
style: barStyle,
|
|
part: "bar-active"
|
|
}), renderKnob(rtl, {
|
|
knob: 'A',
|
|
pressed: pressedKnob === 'A',
|
|
value: this.valA,
|
|
ratio: this.ratioA,
|
|
pin,
|
|
pinFormatter,
|
|
disabled,
|
|
handleKeyboard,
|
|
min,
|
|
max,
|
|
labelText
|
|
}), this.dualKnobs && renderKnob(rtl, {
|
|
knob: 'B',
|
|
pressed: pressedKnob === 'B',
|
|
value: this.valB,
|
|
ratio: this.ratioB,
|
|
pin,
|
|
pinFormatter,
|
|
disabled,
|
|
handleKeyboard,
|
|
min,
|
|
max,
|
|
labelText
|
|
})), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", {
|
|
name: "end"
|
|
}));
|
|
}
|
|
|
|
get el() {
|
|
return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.i)(this);
|
|
}
|
|
|
|
static get watchers() {
|
|
return {
|
|
"debounce": ["debounceChanged"],
|
|
"min": ["minChanged"],
|
|
"max": ["maxChanged"],
|
|
"activeBarStart": ["activeBarStartChanged"],
|
|
"disabled": ["disabledChanged"],
|
|
"value": ["valueChanged"]
|
|
};
|
|
}
|
|
|
|
};
|
|
|
|
const renderKnob = (rtl, {
|
|
knob,
|
|
value,
|
|
ratio,
|
|
min,
|
|
max,
|
|
disabled,
|
|
pressed,
|
|
pin,
|
|
handleKeyboard,
|
|
labelText,
|
|
pinFormatter
|
|
}) => {
|
|
const start = rtl ? 'right' : 'left';
|
|
|
|
const knobStyle = () => {
|
|
const style = {};
|
|
style[start] = `${ratio * 100}%`;
|
|
return style;
|
|
};
|
|
|
|
return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
onKeyDown: ev => {
|
|
const key = ev.key;
|
|
|
|
if (key === 'ArrowLeft' || key === 'ArrowDown') {
|
|
handleKeyboard(knob, false);
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
} else if (key === 'ArrowRight' || key === 'ArrowUp') {
|
|
handleKeyboard(knob, true);
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
}
|
|
},
|
|
class: {
|
|
'range-knob-handle': true,
|
|
'range-knob-a': knob === 'A',
|
|
'range-knob-b': knob === 'B',
|
|
'range-knob-pressed': pressed,
|
|
'range-knob-min': value === min,
|
|
'range-knob-max': value === max,
|
|
'ion-activatable': true,
|
|
'ion-focusable': true
|
|
},
|
|
style: knobStyle(),
|
|
role: "slider",
|
|
tabindex: disabled ? -1 : 0,
|
|
"aria-label": labelText,
|
|
"aria-valuemin": min,
|
|
"aria-valuemax": max,
|
|
"aria-disabled": disabled ? 'true' : null,
|
|
"aria-valuenow": value
|
|
}, pin && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "range-pin",
|
|
role: "presentation",
|
|
part: "pin"
|
|
}, pinFormatter(value)), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
|
|
class: "range-knob",
|
|
role: "presentation",
|
|
part: "knob"
|
|
}));
|
|
};
|
|
|
|
const ratioToValue = (ratio, min, max, step) => {
|
|
let value = (max - min) * ratio;
|
|
|
|
if (step > 0) {
|
|
value = Math.round(value / step) * step + min;
|
|
}
|
|
|
|
return (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(min, value, max);
|
|
};
|
|
|
|
const valueToRatio = (value, min, max) => {
|
|
return (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_4__.l)(0, (value - min) / (max - min), 1);
|
|
};
|
|
|
|
let rangeIds = 0;
|
|
Range.style = {
|
|
ios: rangeIosCss,
|
|
md: rangeMdCss
|
|
};
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 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=5454.js.map
|