@ionic/core 8.7.12-dev.11765060985.14ad27fb → 8.7.12-dev.11765231260.1def96ab
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/action-sheet.js +186 -5
- package/components/ion-select.js +8 -3
- package/components/modal.js +16 -86
- package/components/overlays.js +11 -15
- package/css/core.css +1 -1
- package/css/core.css.map +1 -1
- package/css/ionic.bundle.css +1 -1
- package/css/ionic.bundle.css.map +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +184 -5
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +17 -86
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +9 -4
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-D3xMmZCY.js → overlays-DxIZwUXI.js} +11 -15
- package/dist/collection/components/action-sheet/action-sheet.js +199 -4
- package/dist/collection/components/modal/modal.js +16 -86
- package/dist/collection/components/select/select.js +8 -3
- package/dist/collection/utils/overlays.js +11 -15
- package/dist/docs.json +14 -8
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +184 -5
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +17 -86
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +9 -4
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-DYKBVm6h.js → overlays-BymNv-BL.js} +11 -15
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-3fad4ab5.entry.js → p-0b80d700.entry.js} +1 -1
- package/dist/ionic/{p-a480563a.entry.js → p-15193d01.entry.js} +1 -1
- package/dist/ionic/p-5837f29f.entry.js +4 -0
- package/dist/ionic/{p-b4b6513a.entry.js → p-7da39a4d.entry.js} +1 -1
- package/dist/ionic/{p-caa8efa1.entry.js → p-83be404e.entry.js} +1 -1
- package/dist/ionic/p-8edc7565.entry.js +4 -0
- package/dist/ionic/{p-7928cc4d.entry.js → p-98fc09eb.entry.js} +1 -1
- package/dist/ionic/p-D87hU-Ly.js +4 -0
- package/dist/ionic/p-c69ff6d8.entry.js +4 -0
- package/dist/ionic/{p-985f02a8.entry.js → p-cb93126d.entry.js} +1 -1
- package/dist/ionic/{p-038f3a87.entry.js → p-e16b69e1.entry.js} +1 -1
- package/dist/types/components/action-sheet/action-sheet.d.ts +37 -0
- package/dist/types/components/modal/modal.d.ts +0 -13
- package/hydrate/index.js +220 -109
- package/hydrate/index.mjs +220 -109
- package/package.json +4 -1
- package/dist/ionic/p-1cf19c5a.entry.js +0 -4
- package/dist/ionic/p-9084d52f.entry.js +0 -4
- package/dist/ionic/p-CHK505Co.js +0 -4
- package/dist/ionic/p-ede27a66.entry.js +0 -4
package/hydrate/index.mjs
CHANGED
|
@@ -6252,7 +6252,7 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
6252
6252
|
}
|
|
6253
6253
|
};
|
|
6254
6254
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
6255
|
-
var _a, _b
|
|
6255
|
+
var _a, _b;
|
|
6256
6256
|
if (overlay.presented) {
|
|
6257
6257
|
return;
|
|
6258
6258
|
}
|
|
@@ -6286,10 +6286,9 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
6286
6286
|
*/
|
|
6287
6287
|
const overlayEl = overlay.el;
|
|
6288
6288
|
const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
|
|
6289
|
-
// Only lock out root content when backdrop is
|
|
6290
|
-
//
|
|
6291
|
-
const
|
|
6292
|
-
const shouldLockRoot = shouldTrapFocus && backdropAlwaysActive;
|
|
6289
|
+
// Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
|
|
6290
|
+
// expect background interaction to remain enabled.
|
|
6291
|
+
const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
|
|
6293
6292
|
overlay.presented = true;
|
|
6294
6293
|
overlay.willPresent.emit();
|
|
6295
6294
|
if (shouldLockRoot) {
|
|
@@ -6301,7 +6300,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
6301
6300
|
}
|
|
6302
6301
|
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
6303
6302
|
}
|
|
6304
|
-
(
|
|
6303
|
+
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
6305
6304
|
const mode = getIonMode$1(overlay);
|
|
6306
6305
|
// get the user's animation fn if one was provided
|
|
6307
6306
|
const animationBuilder = overlay.enterAnimation
|
|
@@ -6310,7 +6309,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
6310
6309
|
const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
|
|
6311
6310
|
if (completed) {
|
|
6312
6311
|
overlay.didPresent.emit();
|
|
6313
|
-
(
|
|
6312
|
+
(_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
|
|
6314
6313
|
}
|
|
6315
6314
|
/**
|
|
6316
6315
|
* If the focused element is already
|
|
@@ -6388,7 +6387,7 @@ const restoreElementFocus = async (overlayEl) => {
|
|
|
6388
6387
|
}
|
|
6389
6388
|
};
|
|
6390
6389
|
const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
|
|
6391
|
-
var _a, _b
|
|
6390
|
+
var _a, _b;
|
|
6392
6391
|
if (!overlay.presented) {
|
|
6393
6392
|
return false;
|
|
6394
6393
|
}
|
|
@@ -6404,14 +6403,11 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
6404
6403
|
* is dismissed.
|
|
6405
6404
|
*/
|
|
6406
6405
|
const overlaysLockingRoot = presentedOverlays.filter((o) => {
|
|
6407
|
-
var _a;
|
|
6408
6406
|
const el = o;
|
|
6409
|
-
|
|
6410
|
-
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && backdropAlwaysActive;
|
|
6407
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
|
|
6411
6408
|
});
|
|
6412
6409
|
const overlayEl = overlay.el;
|
|
6413
|
-
const
|
|
6414
|
-
const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && backdropAlwaysActive;
|
|
6410
|
+
const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
|
|
6415
6411
|
/**
|
|
6416
6412
|
* If this is the last visible overlay that is trapping focus
|
|
6417
6413
|
* then we want to re-add the root to the accessibility tree.
|
|
@@ -6426,7 +6422,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
6426
6422
|
// Overlay contents should not be clickable during dismiss
|
|
6427
6423
|
overlay.el.style.setProperty('pointer-events', 'none');
|
|
6428
6424
|
overlay.willDismiss.emit({ data, role });
|
|
6429
|
-
(
|
|
6425
|
+
(_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
|
|
6430
6426
|
const mode = getIonMode$1(overlay);
|
|
6431
6427
|
const animationBuilder = overlay.leaveAnimation
|
|
6432
6428
|
? overlay.leaveAnimation
|
|
@@ -6436,7 +6432,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
6436
6432
|
await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
|
|
6437
6433
|
}
|
|
6438
6434
|
overlay.didDismiss.emit({ data, role });
|
|
6439
|
-
(
|
|
6435
|
+
(_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
|
|
6440
6436
|
// Get a reference to all animations currently assigned to this overlay
|
|
6441
6437
|
// Then tear them down to return the overlay to its initial visual state
|
|
6442
6438
|
const animations = activeAnimations.get(overlay) || [];
|
|
@@ -7615,6 +7611,7 @@ class ActionSheet {
|
|
|
7615
7611
|
this.delegateController = createDelegateController(this);
|
|
7616
7612
|
this.lockController = createLockController();
|
|
7617
7613
|
this.triggerController = createTriggerController();
|
|
7614
|
+
this.hasRadioButtons = false;
|
|
7618
7615
|
this.presented = false;
|
|
7619
7616
|
/** @internal */
|
|
7620
7617
|
this.hasController = false;
|
|
@@ -7659,6 +7656,19 @@ class ActionSheet {
|
|
|
7659
7656
|
}
|
|
7660
7657
|
};
|
|
7661
7658
|
}
|
|
7659
|
+
buttonsChanged() {
|
|
7660
|
+
const radioButtons = this.getRadioButtons();
|
|
7661
|
+
this.hasRadioButtons = radioButtons.length > 0;
|
|
7662
|
+
// Initialize activeRadioId when buttons change
|
|
7663
|
+
if (this.hasRadioButtons) {
|
|
7664
|
+
const checkedButton = radioButtons.find((b) => { var _a; return ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a['aria-checked']) === 'true'; });
|
|
7665
|
+
if (checkedButton) {
|
|
7666
|
+
const allButtons = this.getButtons();
|
|
7667
|
+
const checkedIndex = allButtons.indexOf(checkedButton);
|
|
7668
|
+
this.activeRadioId = this.getButtonId(checkedButton, checkedIndex);
|
|
7669
|
+
}
|
|
7670
|
+
}
|
|
7671
|
+
}
|
|
7662
7672
|
onIsOpenChange(newValue, oldValue) {
|
|
7663
7673
|
if (newValue === true && oldValue === false) {
|
|
7664
7674
|
this.present();
|
|
@@ -7739,11 +7749,122 @@ class ActionSheet {
|
|
|
7739
7749
|
}
|
|
7740
7750
|
return true;
|
|
7741
7751
|
}
|
|
7752
|
+
/**
|
|
7753
|
+
* Get all buttons regardless of role.
|
|
7754
|
+
*/
|
|
7742
7755
|
getButtons() {
|
|
7743
7756
|
return this.buttons.map((b) => {
|
|
7744
7757
|
return typeof b === 'string' ? { text: b } : b;
|
|
7745
7758
|
});
|
|
7746
7759
|
}
|
|
7760
|
+
/**
|
|
7761
|
+
* Get all radio buttons (buttons with role="radio").
|
|
7762
|
+
*/
|
|
7763
|
+
getRadioButtons() {
|
|
7764
|
+
return this.getButtons().filter((b) => {
|
|
7765
|
+
var _a;
|
|
7766
|
+
const role = (_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role;
|
|
7767
|
+
return role === 'radio' && !isCancel(role);
|
|
7768
|
+
});
|
|
7769
|
+
}
|
|
7770
|
+
/**
|
|
7771
|
+
* Handle radio button selection and update aria-checked state.
|
|
7772
|
+
*
|
|
7773
|
+
* @param button The radio button that was selected.
|
|
7774
|
+
*/
|
|
7775
|
+
selectRadioButton(button) {
|
|
7776
|
+
const buttonId = this.getButtonId(button);
|
|
7777
|
+
// Set the active radio ID (this will trigger a re-render and update aria-checked)
|
|
7778
|
+
this.activeRadioId = buttonId;
|
|
7779
|
+
}
|
|
7780
|
+
/**
|
|
7781
|
+
* Get or generate an ID for a button.
|
|
7782
|
+
*
|
|
7783
|
+
* @param button The button for which to get the ID.
|
|
7784
|
+
* @param index Optional index of the button in the buttons array.
|
|
7785
|
+
* @returns The ID of the button.
|
|
7786
|
+
*/
|
|
7787
|
+
getButtonId(button, index) {
|
|
7788
|
+
if (button.id) {
|
|
7789
|
+
return button.id;
|
|
7790
|
+
}
|
|
7791
|
+
const allButtons = this.getButtons();
|
|
7792
|
+
const buttonIndex = index !== undefined ? index : allButtons.indexOf(button);
|
|
7793
|
+
return `action-sheet-button-${this.overlayIndex}-${buttonIndex}`;
|
|
7794
|
+
}
|
|
7795
|
+
/**
|
|
7796
|
+
* When the action sheet has radio buttons, we want to follow the
|
|
7797
|
+
* keyboard navigation pattern for radio groups:
|
|
7798
|
+
* - Arrow Down/Right: Move to the next radio button (wrap to first if at end)
|
|
7799
|
+
* - Arrow Up/Left: Move to the previous radio button (wrap to last if at start)
|
|
7800
|
+
* - Space/Enter: Select the focused radio button and trigger its handler
|
|
7801
|
+
*/
|
|
7802
|
+
onKeydown(ev) {
|
|
7803
|
+
// Only handle keyboard navigation if we have radio buttons
|
|
7804
|
+
if (!this.hasRadioButtons || !this.presented) {
|
|
7805
|
+
return;
|
|
7806
|
+
}
|
|
7807
|
+
const target = ev.target;
|
|
7808
|
+
// Ignore if the target element is not within the action sheet or not a radio button
|
|
7809
|
+
if (!this.el.contains(target) ||
|
|
7810
|
+
!target.classList.contains('action-sheet-button') ||
|
|
7811
|
+
target.getAttribute('role') !== 'radio') {
|
|
7812
|
+
return;
|
|
7813
|
+
}
|
|
7814
|
+
// Get all radio button elements and filter out disabled ones
|
|
7815
|
+
const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter((el) => !el.disabled);
|
|
7816
|
+
const currentIndex = radios.findIndex((radio) => radio.id === target.id);
|
|
7817
|
+
if (currentIndex === -1) {
|
|
7818
|
+
return;
|
|
7819
|
+
}
|
|
7820
|
+
const allButtons = this.getButtons();
|
|
7821
|
+
const radioButtons = this.getRadioButtons();
|
|
7822
|
+
/**
|
|
7823
|
+
* Build a map of button element IDs to their ActionSheetButton
|
|
7824
|
+
* config objects.
|
|
7825
|
+
* This allows us to quickly look up which button config corresponds
|
|
7826
|
+
* to a DOM element when handling keyboard navigation
|
|
7827
|
+
* (e.g., whenuser presses Space/Enter or arrow keys).
|
|
7828
|
+
* The key is the ID that was set on the DOM element during render,
|
|
7829
|
+
* and the value is the ActionSheetButton config that contains the
|
|
7830
|
+
* handler and other properties.
|
|
7831
|
+
*/
|
|
7832
|
+
const buttonIdMap = new Map();
|
|
7833
|
+
radioButtons.forEach((b) => {
|
|
7834
|
+
const allIndex = allButtons.indexOf(b);
|
|
7835
|
+
const buttonId = this.getButtonId(b, allIndex);
|
|
7836
|
+
buttonIdMap.set(buttonId, b);
|
|
7837
|
+
});
|
|
7838
|
+
let nextEl;
|
|
7839
|
+
if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
|
|
7840
|
+
ev.preventDefault();
|
|
7841
|
+
ev.stopPropagation();
|
|
7842
|
+
nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
|
|
7843
|
+
}
|
|
7844
|
+
else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
|
|
7845
|
+
ev.preventDefault();
|
|
7846
|
+
ev.stopPropagation();
|
|
7847
|
+
nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
|
|
7848
|
+
}
|
|
7849
|
+
else if (ev.key === ' ' || ev.key === 'Enter') {
|
|
7850
|
+
ev.preventDefault();
|
|
7851
|
+
ev.stopPropagation();
|
|
7852
|
+
const button = buttonIdMap.get(target.id);
|
|
7853
|
+
if (button) {
|
|
7854
|
+
this.selectRadioButton(button);
|
|
7855
|
+
this.buttonClick(button);
|
|
7856
|
+
}
|
|
7857
|
+
return;
|
|
7858
|
+
}
|
|
7859
|
+
// Focus the next radio button
|
|
7860
|
+
if (nextEl) {
|
|
7861
|
+
const button = buttonIdMap.get(nextEl.id);
|
|
7862
|
+
if (button) {
|
|
7863
|
+
this.selectRadioButton(button);
|
|
7864
|
+
nextEl.focus();
|
|
7865
|
+
}
|
|
7866
|
+
}
|
|
7867
|
+
}
|
|
7747
7868
|
connectedCallback() {
|
|
7748
7869
|
prepareOverlay(this.el);
|
|
7749
7870
|
this.triggerChanged();
|
|
@@ -7760,6 +7881,8 @@ class ActionSheet {
|
|
|
7760
7881
|
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
7761
7882
|
setOverlayId(this.el);
|
|
7762
7883
|
}
|
|
7884
|
+
// Initialize activeRadioId for radio buttons
|
|
7885
|
+
this.buttonsChanged();
|
|
7763
7886
|
}
|
|
7764
7887
|
componentDidLoad() {
|
|
7765
7888
|
/**
|
|
@@ -7797,22 +7920,74 @@ class ActionSheet {
|
|
|
7797
7920
|
*/
|
|
7798
7921
|
this.triggerChanged();
|
|
7799
7922
|
}
|
|
7923
|
+
renderActionSheetButtons(filteredButtons) {
|
|
7924
|
+
const mode = getIonMode$1(this);
|
|
7925
|
+
const { activeRadioId } = this;
|
|
7926
|
+
return filteredButtons.map((b, index) => {
|
|
7927
|
+
var _a;
|
|
7928
|
+
const isRadio = ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role) === 'radio';
|
|
7929
|
+
const buttonId = this.getButtonId(b, index);
|
|
7930
|
+
const radioButtons = this.getRadioButtons();
|
|
7931
|
+
const isActiveRadio = isRadio && buttonId === activeRadioId;
|
|
7932
|
+
const isFirstRadio = isRadio && b === radioButtons[0];
|
|
7933
|
+
// For radio buttons, set tabindex: 0 for the active one, -1 for others
|
|
7934
|
+
// For non-radio buttons, use default tabindex (undefined, which means 0)
|
|
7935
|
+
/**
|
|
7936
|
+
* For radio buttons, set tabindex based on activeRadioId
|
|
7937
|
+
* - If the button is the active radio, tabindex is 0
|
|
7938
|
+
* - If no radio is active, the first radio button should have tabindex 0
|
|
7939
|
+
* - All other radio buttons have tabindex -1
|
|
7940
|
+
* For non-radio buttons, use default tabindex (undefined, which means 0)
|
|
7941
|
+
*/
|
|
7942
|
+
let tabIndex;
|
|
7943
|
+
if (isRadio) {
|
|
7944
|
+
// Focus on the active radio button
|
|
7945
|
+
if (isActiveRadio) {
|
|
7946
|
+
tabIndex = 0;
|
|
7947
|
+
}
|
|
7948
|
+
else if (!activeRadioId && isFirstRadio) {
|
|
7949
|
+
// No active radio, first radio gets focus
|
|
7950
|
+
tabIndex = 0;
|
|
7951
|
+
}
|
|
7952
|
+
else {
|
|
7953
|
+
// All other radios are not focusable
|
|
7954
|
+
tabIndex = -1;
|
|
7955
|
+
}
|
|
7956
|
+
}
|
|
7957
|
+
else {
|
|
7958
|
+
tabIndex = undefined;
|
|
7959
|
+
}
|
|
7960
|
+
// For radio buttons, set aria-checked based on activeRadioId
|
|
7961
|
+
// Otherwise, use the value from htmlAttributes if provided
|
|
7962
|
+
const htmlAttrs = Object.assign({}, b.htmlAttributes);
|
|
7963
|
+
if (isRadio) {
|
|
7964
|
+
htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
|
|
7965
|
+
}
|
|
7966
|
+
return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
|
|
7967
|
+
if (isRadio) {
|
|
7968
|
+
this.selectRadioButton(b);
|
|
7969
|
+
}
|
|
7970
|
+
this.buttonClick(b);
|
|
7971
|
+
}, disabled: b.disabled, tabIndex: tabIndex }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null)));
|
|
7972
|
+
});
|
|
7973
|
+
}
|
|
7800
7974
|
render() {
|
|
7801
|
-
const { header, htmlAttributes, overlayIndex } = this;
|
|
7975
|
+
const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
|
|
7802
7976
|
const mode = getIonMode$1(this);
|
|
7803
7977
|
const allButtons = this.getButtons();
|
|
7804
7978
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
7805
7979
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
7806
7980
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
7807
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
7981
|
+
return (hAsync(Host, Object.assign({ key: '173fcff5b1da7c33c267de4667591c946b8c8d03', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
7808
7982
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
7809
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '
|
|
7983
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), hAsync("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, hAsync("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
|
|
7810
7984
|
'action-sheet-title': true,
|
|
7811
7985
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
7812
|
-
} }, header, this.subHeader && hAsync("div", { key: '
|
|
7986
|
+
} }, header, this.subHeader && hAsync("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), hAsync("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
|
|
7813
7987
|
}
|
|
7814
7988
|
get el() { return getElement(this); }
|
|
7815
7989
|
static get watchers() { return {
|
|
7990
|
+
"buttons": ["buttonsChanged"],
|
|
7816
7991
|
"isOpen": ["onIsOpenChange"],
|
|
7817
7992
|
"trigger": ["triggerChanged"]
|
|
7818
7993
|
}; }
|
|
@@ -7840,12 +8015,13 @@ class ActionSheet {
|
|
|
7840
8015
|
"htmlAttributes": [16],
|
|
7841
8016
|
"isOpen": [4, "is-open"],
|
|
7842
8017
|
"trigger": [1],
|
|
8018
|
+
"activeRadioId": [32],
|
|
7843
8019
|
"present": [64],
|
|
7844
8020
|
"dismiss": [64],
|
|
7845
8021
|
"onDidDismiss": [64],
|
|
7846
8022
|
"onWillDismiss": [64]
|
|
7847
8023
|
},
|
|
7848
|
-
"$listeners$":
|
|
8024
|
+
"$listeners$": [[0, "keydown", "onKeydown"]],
|
|
7849
8025
|
"$lazyBundleId$": "-",
|
|
7850
8026
|
"$attrsToReflect$": []
|
|
7851
8027
|
}; }
|
|
@@ -23017,13 +23193,7 @@ class Modal {
|
|
|
23017
23193
|
};
|
|
23018
23194
|
window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
23019
23195
|
}
|
|
23020
|
-
|
|
23021
|
-
* Recalculate isSheetModal because framework bindings (e.g., Angular)
|
|
23022
|
-
* may not have been applied when componentWillLoad ran.
|
|
23023
|
-
*/
|
|
23024
|
-
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
23025
|
-
this.isSheetModal = isSheetModal;
|
|
23026
|
-
if (isSheetModal) {
|
|
23196
|
+
if (this.isSheetModal) {
|
|
23027
23197
|
this.initSheetGesture();
|
|
23028
23198
|
}
|
|
23029
23199
|
else if (hasCardModal) {
|
|
@@ -23105,79 +23275,6 @@ class Modal {
|
|
|
23105
23275
|
this.gesture = gesture;
|
|
23106
23276
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
23107
23277
|
this.gesture.enable(true);
|
|
23108
|
-
/**
|
|
23109
|
-
* When backdrop interaction is allowed, nested router outlets from child routes
|
|
23110
|
-
* may block pointer events to parent content. Apply passthrough styles only when
|
|
23111
|
-
* the modal was the sole content of a child route page.
|
|
23112
|
-
* See https://github.com/ionic-team/ionic-framework/issues/30700
|
|
23113
|
-
*/
|
|
23114
|
-
const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
|
|
23115
|
-
if (backdropNotBlocking) {
|
|
23116
|
-
this.setupChildRoutePassthrough();
|
|
23117
|
-
}
|
|
23118
|
-
}
|
|
23119
|
-
/**
|
|
23120
|
-
* For sheet modals that allow background interaction, sets up pointer-events
|
|
23121
|
-
* passthrough on child route page wrappers and nested router outlets.
|
|
23122
|
-
*/
|
|
23123
|
-
setupChildRoutePassthrough() {
|
|
23124
|
-
var _a;
|
|
23125
|
-
const pageParent = this.getOriginalPageParent();
|
|
23126
|
-
// Skip ion-app (controller modals) and pages with other content (inline modals)
|
|
23127
|
-
if (!pageParent || pageParent.tagName === 'ION-APP') {
|
|
23128
|
-
return;
|
|
23129
|
-
}
|
|
23130
|
-
const hasVisibleContent = Array.from(pageParent.children).some((child) => {
|
|
23131
|
-
var _a;
|
|
23132
|
-
if (child === this.el)
|
|
23133
|
-
return false;
|
|
23134
|
-
if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none')
|
|
23135
|
-
return false;
|
|
23136
|
-
if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT')
|
|
23137
|
-
return false;
|
|
23138
|
-
if (child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
|
|
23139
|
-
return false;
|
|
23140
|
-
return true;
|
|
23141
|
-
});
|
|
23142
|
-
if (hasVisibleContent) {
|
|
23143
|
-
return;
|
|
23144
|
-
}
|
|
23145
|
-
// Child route case: page only contained the modal
|
|
23146
|
-
pageParent.classList.add('ion-page-overlay-passthrough');
|
|
23147
|
-
// Also make nested router outlets passthrough
|
|
23148
|
-
const routerOutlet = pageParent.parentElement;
|
|
23149
|
-
if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
|
|
23150
|
-
routerOutlet.style.setProperty('pointer-events', 'none');
|
|
23151
|
-
routerOutlet.setAttribute('data-overlay-passthrough', 'true');
|
|
23152
|
-
}
|
|
23153
|
-
}
|
|
23154
|
-
/**
|
|
23155
|
-
* Finds the ion-page ancestor of the modal's original parent location.
|
|
23156
|
-
*/
|
|
23157
|
-
getOriginalPageParent() {
|
|
23158
|
-
if (!this.cachedOriginalParent) {
|
|
23159
|
-
return null;
|
|
23160
|
-
}
|
|
23161
|
-
let pageParent = this.cachedOriginalParent;
|
|
23162
|
-
while (pageParent && !pageParent.classList.contains('ion-page')) {
|
|
23163
|
-
pageParent = pageParent.parentElement;
|
|
23164
|
-
}
|
|
23165
|
-
return pageParent;
|
|
23166
|
-
}
|
|
23167
|
-
/**
|
|
23168
|
-
* Removes passthrough styles added by setupChildRoutePassthrough.
|
|
23169
|
-
*/
|
|
23170
|
-
cleanupChildRoutePassthrough() {
|
|
23171
|
-
const pageParent = this.getOriginalPageParent();
|
|
23172
|
-
if (!pageParent) {
|
|
23173
|
-
return;
|
|
23174
|
-
}
|
|
23175
|
-
pageParent.classList.remove('ion-page-overlay-passthrough');
|
|
23176
|
-
const routerOutlet = pageParent.parentElement;
|
|
23177
|
-
if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
|
|
23178
|
-
routerOutlet.style.removeProperty('pointer-events');
|
|
23179
|
-
routerOutlet.removeAttribute('data-overlay-passthrough');
|
|
23180
|
-
}
|
|
23181
23278
|
}
|
|
23182
23279
|
sheetOnDismiss() {
|
|
23183
23280
|
/**
|
|
@@ -23267,7 +23364,6 @@ class Modal {
|
|
|
23267
23364
|
}
|
|
23268
23365
|
this.cleanupViewTransitionListener();
|
|
23269
23366
|
this.cleanupParentRemovalObserver();
|
|
23270
|
-
this.cleanupChildRoutePassthrough();
|
|
23271
23367
|
}
|
|
23272
23368
|
this.currentBreakpoint = undefined;
|
|
23273
23369
|
this.animation = undefined;
|
|
@@ -23464,6 +23560,17 @@ class Modal {
|
|
|
23464
23560
|
this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
|
|
23465
23561
|
return;
|
|
23466
23562
|
}
|
|
23563
|
+
/**
|
|
23564
|
+
* Don't observe for controller-based modals or when the parent is the
|
|
23565
|
+
* app root (document.body or ion-app). These parents won't be removed,
|
|
23566
|
+
* and observing document.body with subtree: true causes performance
|
|
23567
|
+
* issues with frameworks like Angular during change detection.
|
|
23568
|
+
*/
|
|
23569
|
+
if (this.hasController ||
|
|
23570
|
+
this.cachedOriginalParent === document.body ||
|
|
23571
|
+
this.cachedOriginalParent.tagName === 'ION-APP') {
|
|
23572
|
+
return;
|
|
23573
|
+
}
|
|
23467
23574
|
this.parentRemovalObserver = new MutationObserver((mutations) => {
|
|
23468
23575
|
mutations.forEach((mutation) => {
|
|
23469
23576
|
if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
|
|
@@ -23505,20 +23612,20 @@ class Modal {
|
|
|
23505
23612
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
23506
23613
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
23507
23614
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
23508
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23615
|
+
return (hAsync(Host, Object.assign({ key: '5d8261a1a174d83642c0f7f2aa4f6c265f50fa57', "no-router": true,
|
|
23509
23616
|
// Allow the modal to be navigable when the handle is focusable
|
|
23510
23617
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
23511
23618
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
23512
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '
|
|
23619
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'bc165dd344e752c13076ca5ae37ea7d68d618d55', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '4a2f6edaeeec2978f0cd7b2b93a44c2f0da3ab54', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '13d662aa50871e97567270dbbce6825633c62bad',
|
|
23513
23620
|
/*
|
|
23514
23621
|
role and aria-modal must be used on the
|
|
23515
23622
|
same element. They must also be set inside the
|
|
23516
23623
|
shadow DOM otherwise ion-button will not be highlighted
|
|
23517
23624
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
23518
23625
|
*/
|
|
23519
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
23626
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'e678cd3c64a0ab56636f68f9fa416741589f783c', class: "modal-handle",
|
|
23520
23627
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
23521
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '
|
|
23628
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '1ebc3549c5c67ea286384b9917ed4dd8958ea2ae', onSlotchange: this.onSlotChange }))));
|
|
23522
23629
|
}
|
|
23523
23630
|
get el() { return getElement(this); }
|
|
23524
23631
|
static get watchers() { return {
|
|
@@ -23558,7 +23665,6 @@ class Modal {
|
|
|
23558
23665
|
"keepContentsMounted": [4, "keep-contents-mounted"],
|
|
23559
23666
|
"focusTrap": [4, "focus-trap"],
|
|
23560
23667
|
"canDismiss": [4, "can-dismiss"],
|
|
23561
|
-
"isSheetModal": [32],
|
|
23562
23668
|
"presented": [32],
|
|
23563
23669
|
"present": [64],
|
|
23564
23670
|
"dismiss": [64],
|
|
@@ -33707,13 +33813,18 @@ class Select {
|
|
|
33707
33813
|
.filter((cls) => cls !== 'hydrated')
|
|
33708
33814
|
.join(' ');
|
|
33709
33815
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
33816
|
+
const isSelected = isOptionSelected(selectValue, value, this.compareWith);
|
|
33710
33817
|
return {
|
|
33711
|
-
role:
|
|
33818
|
+
role: isSelected ? 'selected' : '',
|
|
33712
33819
|
text: option.textContent,
|
|
33713
33820
|
cssClass: optClass,
|
|
33714
33821
|
handler: () => {
|
|
33715
33822
|
this.setValue(value);
|
|
33716
33823
|
},
|
|
33824
|
+
htmlAttributes: {
|
|
33825
|
+
'aria-checked': isSelected ? 'true' : 'false',
|
|
33826
|
+
role: 'radio',
|
|
33827
|
+
},
|
|
33717
33828
|
};
|
|
33718
33829
|
});
|
|
33719
33830
|
// Add "cancel" button
|
|
@@ -34094,7 +34205,7 @@ class Select {
|
|
|
34094
34205
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
34095
34206
|
*/
|
|
34096
34207
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
34097
|
-
return (hAsync(Host, { key: '
|
|
34208
|
+
return (hAsync(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
34098
34209
|
[mode]: true,
|
|
34099
34210
|
'in-item': inItem,
|
|
34100
34211
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -34112,7 +34223,7 @@ class Select {
|
|
|
34112
34223
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
34113
34224
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
34114
34225
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
34115
|
-
}) }, hAsync("label", { key: '
|
|
34226
|
+
}) }, hAsync("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, hAsync("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), hAsync("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
|
|
34116
34227
|
}
|
|
34117
34228
|
get el() { return getElement(this); }
|
|
34118
34229
|
static get watchers() { return {
|
package/package.json
CHANGED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as t,c as o,a as e,h as i,d as n,g as a}from"./p-C8IsBmNU.js";import{c as r}from"./p-Dc45iWE4.js";import{r as s}from"./p-CTfR9YZG.js";import{c}from"./p-B-hirT0v.js";import{d,e as l,B as h,i as b,f as p,g as u,h as g,s as m,j as f,k as v}from"./p-CHK505Co.js";import{g as k}from"./p-DiVJyqlX.js";import{b as x}from"./p-BFvmZNyx.js";import{c as y}from"./p-DDb5r57F.js";import"./p-CKvCXMs9.js";import"./p-CIGNaXM1.js";import"./p-ZjP4CjeZ.js";import"./p-Cl0B-RWe.js";import"./p-BTEOs1at.js";import"./p-B0q1YL7N.js";import"./p-D-eFFUkA.js";const w=t=>{const o=y(),e=y(),i=y();return e.addElement(t.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),i.addElement(t.querySelector(".action-sheet-wrapper")).fromTo("transform","translateY(100%)","translateY(0%)"),o.addElement(t).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([e,i])},j=t=>{const o=y(),e=y(),i=y();return e.addElement(t.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",0),i.addElement(t.querySelector(".action-sheet-wrapper")).fromTo("transform","translateY(0%)","translateY(100%)"),o.addElement(t).easing("cubic-bezier(.36,.66,.04,1)").duration(450).addAnimation([e,i])},z=t=>{const o=y(),e=y(),i=y();return e.addElement(t.querySelector("ion-backdrop")).fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),i.addElement(t.querySelector(".action-sheet-wrapper")).fromTo("transform","translateY(100%)","translateY(0%)"),o.addElement(t).easing("cubic-bezier(.36,.66,.04,1)").duration(400).addAnimation([e,i])},C=t=>{const o=y(),e=y(),i=y();return e.addElement(t.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)",0),i.addElement(t.querySelector(".action-sheet-wrapper")).fromTo("transform","translateY(0%)","translateY(100%)"),o.addElement(t).easing("cubic-bezier(.36,.66,.04,1)").duration(450).addAnimation([e,i])},D=class{constructor(e){t(this,e),this.didPresent=o(this,"ionActionSheetDidPresent",7),this.willPresent=o(this,"ionActionSheetWillPresent",7),this.willDismiss=o(this,"ionActionSheetWillDismiss",7),this.didDismiss=o(this,"ionActionSheetDidDismiss",7),this.didPresentShorthand=o(this,"didPresent",7),this.willPresentShorthand=o(this,"willPresent",7),this.willDismissShorthand=o(this,"willDismiss",7),this.didDismissShorthand=o(this,"didDismiss",7),this.delegateController=d(this),this.lockController=c(),this.triggerController=l(),this.presented=!1,this.hasController=!1,this.keyboardClose=!0,this.buttons=[],this.backdropDismiss=!0,this.translucent=!1,this.animated=!0,this.isOpen=!1,this.onBackdropTap=()=>{this.dismiss(void 0,h)},this.dispatchCancelHandler=t=>{if(b(t.detail.role)){const t=this.getButtons().find((t=>"cancel"===t.role));this.callButtonHandler(t)}}}onIsOpenChange(t,o){!0===t&&!1===o?this.present():!1===t&&!0===o&&this.dismiss()}triggerChanged(){const{trigger:t,el:o,triggerController:e}=this;t&&e.addClickListener(o,t)}async present(){const t=await this.lockController.lock();await this.delegateController.attachViewToDom(),await p(this,"actionSheetEnter",w,z),t()}async dismiss(t,o){const e=await this.lockController.lock(),i=await u(this,t,o,"actionSheetLeave",j,C);return i&&this.delegateController.removeViewFromDom(),e(),i}onDidDismiss(){return g(this.el,"ionActionSheetDidDismiss")}onWillDismiss(){return g(this.el,"ionActionSheetWillDismiss")}async buttonClick(t){const o=t.role;return b(o)?this.dismiss(t.data,o):await this.callButtonHandler(t)?this.dismiss(t.data,t.role):Promise.resolve()}async callButtonHandler(t){return!t||!1!==await m(t.handler)}getButtons(){return this.buttons.map((t=>"string"==typeof t?{text:t}:t))}connectedCallback(){f(this.el),this.triggerChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0),this.triggerController.removeClickListener()}componentWillLoad(){var t;(null===(t=this.htmlAttributes)||void 0===t?void 0:t.id)||v(this.el)}componentDidLoad(){const{groupEl:t,wrapperEl:o}=this;!this.gesture&&"ios"===x(this)&&o&&t&&e((()=>{t.scrollHeight>t.clientHeight||(this.gesture=r(o,(t=>t.classList.contains("action-sheet-button"))),this.gesture.enable(!0))})),!0===this.isOpen&&s((()=>this.present())),this.triggerChanged()}render(){const{header:t,htmlAttributes:o,overlayIndex:e}=this,a=x(this),r=this.getButtons(),s=r.find((t=>"cancel"===t.role)),c=r.filter((t=>"cancel"!==t.role)),d=`action-sheet-${e}-header`;return i(n,Object.assign({key:"9fef156b2a1f09ca4a6c1fe1f37c374139bde03c",role:"dialog","aria-modal":"true","aria-labelledby":void 0!==t?d:null,tabindex:"-1"},o,{style:{zIndex:`${2e4+this.overlayIndex}`},class:Object.assign(Object.assign({[a]:!0},k(this.cssClass)),{"overlay-hidden":!0,"action-sheet-translucent":this.translucent}),onIonActionSheetWillDismiss:this.dispatchCancelHandler,onIonBackdropTap:this.onBackdropTap}),i("ion-backdrop",{key:"81cf3f7d19864e041813987b46d2d115b8466819",tappable:this.backdropDismiss}),i("div",{key:"791c6a976683646fc306a42c15c5078b6f06a45f",tabindex:"0","aria-hidden":"true"}),i("div",{key:"a350b489ef7852eab9dc2227ce6d92da27dd9bf9",class:"action-sheet-wrapper ion-overlay-wrapper",ref:t=>this.wrapperEl=t},i("div",{key:"69ba51ee13510c1a411d87cb4845b11b7302a36f",class:"action-sheet-container"},i("div",{key:"bded15b8306c36591e526f0f99e1eeabcbab3915",class:"action-sheet-group",ref:t=>this.groupEl=t},void 0!==t&&i("div",{key:"06b5147c0f6d9180fe8f12e75c9b4a0310226adc",id:d,class:{"action-sheet-title":!0,"action-sheet-has-sub-title":void 0!==this.subHeader}},t,this.subHeader&&i("div",{key:"54874362a75c679aba803bf4f8768f5404d2dd28",class:"action-sheet-sub-title"},this.subHeader)),c.map((t=>i("button",Object.assign({},t.htmlAttributes,{type:"button",id:t.id,class:B(t),onClick:()=>this.buttonClick(t),disabled:t.disabled}),i("span",{class:"action-sheet-button-inner"},t.icon&&i("ion-icon",{icon:t.icon,"aria-hidden":"true",lazy:!1,class:"action-sheet-icon"}),t.text),"md"===a&&i("ion-ripple-effect",null))))),s&&i("div",{key:"67b0de298eb424f3dea846a841b7a06d70e3930d",class:"action-sheet-group action-sheet-group-cancel"},i("button",Object.assign({key:"e7e3f9a5495eea9b97dbf885ef36944f2e420eff"},s.htmlAttributes,{type:"button",class:B(s),onClick:()=>this.buttonClick(s)}),i("span",{key:"f889d29ed6c3d14bbc1d805888351d87f5122377",class:"action-sheet-button-inner"},s.icon&&i("ion-icon",{key:"7c05cf424b38c37fd40aaeb42a494387291571fb",icon:s.icon,"aria-hidden":"true",lazy:!1,class:"action-sheet-icon"}),s.text),"md"===a&&i("ion-ripple-effect",{key:"bed927b477dc2708a5123ef560274fca9819b3d6"}))))),i("div",{key:"c5df1b11dc15a93892d57065d3dd5fbe02e43b39",tabindex:"0","aria-hidden":"true"}))}get el(){return a(this)}static get watchers(){return{isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}},B=t=>Object.assign({"action-sheet-button":!0,"ion-activatable":!t.disabled,"ion-focusable":!t.disabled,[`action-sheet-${t.role}`]:void 0!==t.role},k(t.cssClass));D.style={ios:'.sc-ion-action-sheet-ios-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-ios-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-ios{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;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);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-ios:disabled{color:var(--button-color-disabled);opacity:0.4}.action-sheet-button-inner.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));max-height:calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)))}.action-sheet-group.sc-ion-action-sheet-ios{-ms-flex-negative:2;flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}@media (any-pointer: coarse){.action-sheet-group.sc-ion-action-sheet-ios::-webkit-scrollbar{display:none}}.action-sheet-group-cancel.sc-ion-action-sheet-ios{-ms-flex-negative:0;flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.action-sheet-selected.sc-ion-action-sheet-ios{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-ios:not(:disabled):hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-ios:not(:disabled):hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));--backdrop-opacity:var(--ion-backdrop-opacity, 0.4);--button-background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;--button-background-activated:var(--ion-text-color, #000);--button-background-activated-opacity:.08;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-background-selected:var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));--button-background-selected-opacity:1;--button-color:var(--ion-color-primary, #0054e9);--button-color-disabled:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--color:var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));text-align:center}.action-sheet-wrapper.sc-ion-action-sheet-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:var(--ion-safe-area-top, 0);padding-bottom:var(--ion-safe-area-bottom, 0);-webkit-box-sizing:content-box;box-sizing:content-box}.action-sheet-container.sc-ion-action-sheet-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0}.action-sheet-group.sc-ion-action-sheet-ios{border-radius:13px;margin-bottom:8px}.action-sheet-group.sc-ion-action-sheet-ios:first-child{margin-top:10px}.action-sheet-group.sc-ion-action-sheet-ios:last-child{margin-bottom:10px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-group.sc-ion-action-sheet-ios{background-color:transparent;-webkit-backdrop-filter:saturate(280%) blur(20px);backdrop-filter:saturate(280%) blur(20px)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-title.sc-ion-action-sheet-ios,.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.sc-ion-action-sheet-ios{background-color:transparent;background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4)), color-stop(50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4)), color-stop(50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background-image:linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%), linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4) 50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 50%);background-repeat:no-repeat;background-position:top, bottom;background-size:100% calc(100% - 1px), 100% 1px;-webkit-backdrop-filter:saturate(120%);backdrop-filter:saturate(120%)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.ion-activated.sc-ion-action-sheet-ios{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.7);background-image:none}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-cancel.sc-ion-action-sheet-ios{background:var(--button-background-selected)}}.action-sheet-title.sc-ion-action-sheet-ios{background:-webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)), color-stop(50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)), color-stop(50%, transparent)) bottom/100% 1px no-repeat transparent;background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent}.action-sheet-title.sc-ion-action-sheet-ios{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:14px;padding-bottom:13px;color:var(--color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-size:max(13px, 0.8125rem);font-weight:400;text-align:center}.action-sheet-title.action-sheet-has-sub-title.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-sub-title.sc-ion-action-sheet-ios{padding-left:0;padding-right:0;padding-top:6px;padding-bottom:0;font-size:max(13px, 0.8125rem);font-weight:400}.action-sheet-button.sc-ion-action-sheet-ios{-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px;padding-top:14px;padding-bottom:14px;min-height:56px;font-size:max(20px, 1.25rem);contain:content}.action-sheet-button.sc-ion-action-sheet-ios .action-sheet-icon.sc-ion-action-sheet-ios{-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:max(28px, 1.75rem);pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios:last-child{background-image:none}.action-sheet-selected.sc-ion-action-sheet-ios{font-weight:bold}.action-sheet-cancel.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-cancel.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-destructive.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-activated.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-focused.sc-ion-action-sheet-ios{color:var(--ion-color-danger, #c5000f)}@media (any-hover: hover){.action-sheet-destructive.sc-ion-action-sheet-ios:hover{color:var(--ion-color-danger, #c5000f)}}',md:'.sc-ion-action-sheet-md-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-md-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-md{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;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);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-md{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-md:disabled{color:var(--button-color-disabled);opacity:0.4}.action-sheet-button-inner.sc-ion-action-sheet-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));max-height:calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)))}.action-sheet-group.sc-ion-action-sheet-md{-ms-flex-negative:2;flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}@media (any-pointer: coarse){.action-sheet-group.sc-ion-action-sheet-md::-webkit-scrollbar{display:none}}.action-sheet-group-cancel.sc-ion-action-sheet-md{-ms-flex-negative:0;flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.action-sheet-selected.sc-ion-action-sheet-md{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-md::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-md:not(:disabled):hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-md:not(:disabled):hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);--button-background:transparent;--button-background-selected:currentColor;--button-background-selected-opacity:0;--button-background-activated:transparent;--button-background-activated-opacity:0;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--button-color-disabled:var(--button-color);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}.action-sheet-wrapper.sc-ion-action-sheet-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:var(--ion-safe-area-top, 0);margin-bottom:0}.action-sheet-title.sc-ion-action-sheet-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:20px;padding-bottom:17px;min-height:60px;color:var(--color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));font-size:1rem;text-align:start}.action-sheet-sub-title.sc-ion-action-sheet-md{padding-left:0;padding-right:0;padding-top:16px;padding-bottom:0;font-size:0.875rem}.action-sheet-group.sc-ion-action-sheet-md:first-child{padding-top:0}.action-sheet-group.sc-ion-action-sheet-md:last-child{padding-bottom:var(--ion-safe-area-bottom)}.action-sheet-button.sc-ion-action-sheet-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;position:relative;min-height:52px;font-size:1rem;text-align:start;contain:content;overflow:hidden}.action-sheet-icon.sc-ion-action-sheet-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:0;margin-bottom:0;color:var(--color);font-size:1.5rem}.action-sheet-button-inner.sc-ion-action-sheet-md{-ms-flex-pack:start;justify-content:flex-start}.action-sheet-selected.sc-ion-action-sheet-md{font-weight:bold}'};export{D as ion_action_sheet}
|