@ionic/core 7.4.1-dev.11694783260.13da477f → 7.4.1-dev.11695395641.14897417
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/ion-fab-list.js +1 -1
- package/components/ion-fab.js +1 -1
- package/components/ion-menu.js +2 -2
- package/components/overlays.js +2 -19
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-fab_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +3 -3
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-popover.cjs.entry.js +2 -2
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +2 -2
- package/dist/cjs/{overlays-5ec9419b.js → overlays-c78a0148.js} +4 -21
- package/dist/collection/components/fab/fab.css +88 -28
- package/dist/collection/components/fab/test/custom-size/fab.e2e.js +17 -0
- package/dist/collection/components/fab-list/fab-list.css +17 -10
- package/dist/collection/components/menu/menu.ios.css +20 -12
- package/dist/collection/components/menu/menu.md.css +20 -12
- package/dist/collection/components/menu/test/safe-area/menu.e2e.js +87 -0
- package/dist/collection/utils/overlays.js +2 -19
- package/dist/collection/utils/test/playwright/viewports/index.js +4 -0
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +2 -2
- package/dist/esm/ion-fab_3.entry.js +2 -2
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +3 -3
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-popover.entry.js +2 -2
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +2 -2
- package/dist/esm/{overlays-99dddd1a.js → overlays-4565894b.js} +2 -19
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-fab_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/overlays-4565894b.js +4 -0
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-daf7b373.entry.js → p-072f99fd.entry.js} +1 -1
- package/dist/ionic/{p-8e72b66b.entry.js → p-11d0977d.entry.js} +1 -1
- package/dist/ionic/p-184a6c55.entry.js +4 -0
- package/dist/ionic/{p-66488ac4.system.entry.js → p-264b5dd9.system.entry.js} +1 -1
- package/dist/ionic/{p-11dda9d2.entry.js → p-28d8b87b.entry.js} +1 -1
- package/dist/ionic/{p-3af21be1.entry.js → p-49f2eaa6.entry.js} +1 -1
- package/dist/ionic/p-5242dc24.system.entry.js +4 -0
- package/dist/ionic/{p-ffe9cbe5.entry.js → p-52edd6b0.entry.js} +1 -1
- package/dist/ionic/p-56495958.js +4 -0
- package/dist/ionic/{p-5ff498c5.system.entry.js → p-5a9dc764.system.entry.js} +1 -1
- package/dist/ionic/{p-76eb5214.system.entry.js → p-6ccffb74.system.entry.js} +1 -1
- package/dist/ionic/{p-0145346f.system.entry.js → p-95188051.system.entry.js} +1 -1
- package/dist/ionic/{p-b4f73fa4.entry.js → p-9eced28c.entry.js} +1 -1
- package/dist/ionic/{p-a6dcd80e.system.js → p-9fccec52.system.js} +1 -1
- package/dist/ionic/{p-3d9eb4d8.system.entry.js → p-a037b6d5.system.entry.js} +1 -1
- package/dist/ionic/{p-4a0beed4.entry.js → p-ab051966.entry.js} +1 -1
- package/dist/ionic/p-bfee11b2.system.js +4 -0
- package/dist/ionic/{p-83966577.system.entry.js → p-c005eb67.system.entry.js} +1 -1
- package/dist/ionic/p-c68a8814.system.js +1 -1
- package/dist/ionic/{p-8761adac.entry.js → p-cd002251.entry.js} +1 -1
- package/dist/ionic/p-d74363db.entry.js +4 -0
- package/dist/ionic/{p-745d5ccf.system.entry.js → p-d8d30fd1.system.entry.js} +1 -1
- package/dist/ionic/{p-fa700c09.system.entry.js → p-e239ab05.system.entry.js} +1 -1
- package/dist/ionic/p-ff0615d9.system.entry.js +4 -0
- package/dist/types/utils/test/playwright/viewports/index.d.ts +4 -0
- package/hydrate/index.js +6 -22
- package/package.json +3 -3
- package/dist/esm-es5/overlays-99dddd1a.js +0 -4
- package/dist/ionic/p-6121347a.js +0 -4
- package/dist/ionic/p-84084b75.entry.js +0 -4
- package/dist/ionic/p-b10fca60.entry.js +0 -4
- package/dist/ionic/p-c528cdee.system.entry.js +0 -4
- package/dist/ionic/p-df89f48b.system.js +0 -4
- package/dist/ionic/p-fa8fc77b.system.entry.js +0 -4
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { b as getIonMode } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:
|
|
7
|
+
const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:calc(100% + 10px);margin-bottom:calc(100% + 10px);display:none;position:absolute;top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:-ms-flexbox;display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;-webkit-transform:scale(0);transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted(.fab-button-in-list.fab-button-show){-webkit-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.fab-list-side-start){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@supports (inset-inline-start: 0){:host(.fab-list-side-start){inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-start){right:0}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){:host(.fab-list-side-start):dir(rtl){left:unset;right:unset;left:0}}}:host(.fab-list-side-end){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row;flex-direction:row}@supports (inset-inline-start: 0){:host(.fab-list-side-end){inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-end){left:0}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.fab-list-side-end):dir(rtl){left:unset;right:unset;right:0}}}";
|
|
8
8
|
|
|
9
9
|
const FabList = /*@__PURE__*/ proxyCustomElement(class FabList extends HTMLElement {
|
|
10
10
|
constructor() {
|
package/components/ion-fab.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { b as getIonMode } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const fabCss = ":host{position:absolute;
|
|
7
|
+
const fabCss = ":host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}@supports (inset-inline-start: 0){:host(.fab-horizontal-start){inset-inline-start:calc(10px + var(--ion-safe-area-left, 0px))}}@supports not (inset-inline-start: 0){:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}@supports selector(:dir(rtl)){:host(.fab-horizontal-start):dir(rtl){left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}}}@supports (inset-inline-start: 0){:host(.fab-horizontal-end){inset-inline-end:calc(10px + var(--ion-safe-area-right, 0px))}}@supports not (inset-inline-start: 0){:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}@supports selector(:dir(rtl)){:host(.fab-horizontal-end):dir(rtl){left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}";
|
|
8
8
|
|
|
9
9
|
const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
|
|
10
10
|
constructor() {
|
package/components/ion-menu.js
CHANGED
|
@@ -11,9 +11,9 @@ import { o as getOverlay } from './overlays.js';
|
|
|
11
11
|
import { c as config, b as getIonMode } from './ionic-global.js';
|
|
12
12
|
import { d as defineCustomElement$2 } from './backdrop.js';
|
|
13
13
|
|
|
14
|
-
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:
|
|
14
|
+
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
|
|
15
15
|
|
|
16
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:
|
|
16
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
17
17
|
|
|
18
18
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
19
19
|
const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
|
package/components/overlays.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
import { d as doc } from './index5.js';
|
|
5
4
|
import { b as getIonMode, c as config } from './ionic-global.js';
|
|
6
5
|
import { C as CoreDelegate } from './framework-delegate.js';
|
|
7
6
|
import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
|
|
@@ -323,16 +322,6 @@ const getOverlays = (doc, selector) => {
|
|
|
323
322
|
}
|
|
324
323
|
return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
|
|
325
324
|
};
|
|
326
|
-
/**
|
|
327
|
-
* Returns a list of all presented overlays.
|
|
328
|
-
* Inline overlays can exist in the DOM but not be presented,
|
|
329
|
-
* so there are times when we want to exclude those.
|
|
330
|
-
* @param doc The document to find the element within.
|
|
331
|
-
* @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
|
|
332
|
-
*/
|
|
333
|
-
const getPresentedOverlays = (doc, overlayTag) => {
|
|
334
|
-
return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
|
|
335
|
-
};
|
|
336
325
|
/**
|
|
337
326
|
* Returns an overlay element
|
|
338
327
|
* @param doc The document to find the element within.
|
|
@@ -341,7 +330,7 @@ const getPresentedOverlays = (doc, overlayTag) => {
|
|
|
341
330
|
* @returns The overlay element or `undefined` if no overlay element is found.
|
|
342
331
|
*/
|
|
343
332
|
const getOverlay = (doc, overlayTag, id) => {
|
|
344
|
-
const overlays =
|
|
333
|
+
const overlays = getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
|
|
345
334
|
return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
|
|
346
335
|
};
|
|
347
336
|
/**
|
|
@@ -447,13 +436,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
447
436
|
if (!overlay.presented) {
|
|
448
437
|
return false;
|
|
449
438
|
}
|
|
450
|
-
|
|
451
|
-
* If this is the last visible overlay then
|
|
452
|
-
* we want to re-add the root to the accessibility tree.
|
|
453
|
-
*/
|
|
454
|
-
if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
|
|
455
|
-
setRootAriaHidden(false);
|
|
456
|
-
}
|
|
439
|
+
setRootAriaHidden(false);
|
|
457
440
|
overlay.presented = false;
|
|
458
441
|
try {
|
|
459
442
|
// Overlay contents should not be clickable during dismiss
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
|
15
15
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
16
16
|
const config = require('./config-d5882735.js');
|
|
17
17
|
const index$2 = require('./index-e6416850.js');
|
|
18
|
-
const overlays = require('./overlays-
|
|
18
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
19
19
|
require('./index-306a7476.js');
|
|
20
20
|
require('./index-184fdd62.js');
|
|
21
21
|
require('./gesture-controller-b46721be.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-184fdd62.js');
|
|
|
9
9
|
const buttonActive = require('./button-active-0ff8e82c.js');
|
|
10
10
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
11
11
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
13
13
|
const theme = require('./theme-fbc56b3b.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
15
15
|
const animation = require('./animation-2bb33618.js');
|
|
@@ -10,7 +10,7 @@ const config = require('./config-d5882735.js');
|
|
|
10
10
|
const buttonActive = require('./button-active-0ff8e82c.js');
|
|
11
11
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
12
12
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
14
14
|
const theme = require('./theme-fbc56b3b.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
16
16
|
const animation = require('./animation-2bb33618.js');
|
|
@@ -15,12 +15,12 @@ const index$2 = require('./index-d8d1fc0b.js');
|
|
|
15
15
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
16
16
|
const data = require('./data-db832785.js');
|
|
17
17
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
18
|
-
const overlays = require('./overlays-
|
|
18
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
19
19
|
const animation = require('./animation-2bb33618.js');
|
|
20
20
|
const haptic = require('./haptic-c5f6b4d5.js');
|
|
21
|
-
require('./index-306a7476.js');
|
|
22
21
|
require('./framework-delegate-c0873a6f.js');
|
|
23
22
|
require('./hardware-back-button-b67c8e75.js');
|
|
23
|
+
require('./index-306a7476.js');
|
|
24
24
|
require('./capacitor-2ffba62a.js');
|
|
25
25
|
|
|
26
26
|
const isYearDisabled = (refYear, minParts, maxParts) => {
|
|
@@ -11,7 +11,7 @@ const helpers = require('./helpers-ea4ccbcb.js');
|
|
|
11
11
|
const theme = require('./theme-fbc56b3b.js');
|
|
12
12
|
const index$1 = require('./index-d8d1fc0b.js');
|
|
13
13
|
|
|
14
|
-
const fabCss = ":host{position:absolute;
|
|
14
|
+
const fabCss = ":host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}@supports (inset-inline-start: 0){:host(.fab-horizontal-start){inset-inline-start:calc(10px + var(--ion-safe-area-left, 0px))}}@supports not (inset-inline-start: 0){:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}@supports selector(:dir(rtl)){:host(.fab-horizontal-start):dir(rtl){left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}}}@supports (inset-inline-start: 0){:host(.fab-horizontal-end){inset-inline-end:calc(10px + var(--ion-safe-area-right, 0px))}}@supports not (inset-inline-start: 0){:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}@supports selector(:dir(rtl)){:host(.fab-horizontal-end):dir(rtl){left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}";
|
|
15
15
|
|
|
16
16
|
const Fab = class {
|
|
17
17
|
constructor(hostRef) {
|
|
@@ -150,7 +150,7 @@ FabButton.style = {
|
|
|
150
150
|
md: fabButtonMdCss
|
|
151
151
|
};
|
|
152
152
|
|
|
153
|
-
const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:
|
|
153
|
+
const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:calc(100% + 10px);margin-bottom:calc(100% + 10px);display:none;position:absolute;top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:-ms-flexbox;display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;-webkit-transform:scale(0);transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted(.fab-button-in-list.fab-button-show){-webkit-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.fab-list-side-start){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@supports (inset-inline-start: 0){:host(.fab-list-side-start){inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-start){right:0}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}@supports selector(:dir(rtl)){:host(.fab-list-side-start):dir(rtl){left:unset;right:unset;left:0}}}:host(.fab-list-side-end){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row;flex-direction:row}@supports (inset-inline-start: 0){:host(.fab-list-side-end){inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.fab-list-side-end){left:0}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.fab-list-side-end):dir(rtl){left:unset;right:unset;right:0}}}";
|
|
154
154
|
|
|
155
155
|
const FabList = class {
|
|
156
156
|
constructor(hostRef) {
|
|
@@ -9,14 +9,14 @@ const index = require('./index-184fdd62.js');
|
|
|
9
9
|
const config = require('./config-d5882735.js');
|
|
10
10
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
11
11
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
13
13
|
const theme = require('./theme-fbc56b3b.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
15
15
|
const animation = require('./animation-2bb33618.js');
|
|
16
|
-
require('./index-306a7476.js');
|
|
17
16
|
require('./framework-delegate-c0873a6f.js');
|
|
18
17
|
require('./hardware-back-button-b67c8e75.js');
|
|
19
18
|
require('./index-cc7dfb7c.js');
|
|
19
|
+
require('./index-306a7476.js');
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* iOS Loading Enter Animation
|
|
@@ -11,7 +11,7 @@ const index$2 = require('./index-306a7476.js');
|
|
|
11
11
|
const gestureController = require('./gesture-controller-b46721be.js');
|
|
12
12
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
13
13
|
const index$1 = require('./index-e6416850.js');
|
|
14
|
-
const overlays = require('./overlays-
|
|
14
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
16
16
|
const theme = require('./theme-fbc56b3b.js');
|
|
17
17
|
const index$3 = require('./index-d8d1fc0b.js');
|
|
@@ -20,9 +20,9 @@ require('./animation-2bb33618.js');
|
|
|
20
20
|
require('./framework-delegate-c0873a6f.js');
|
|
21
21
|
require('./index-cc7dfb7c.js');
|
|
22
22
|
|
|
23
|
-
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:
|
|
23
|
+
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
|
|
24
24
|
|
|
25
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:
|
|
25
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
26
26
|
|
|
27
27
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
28
28
|
const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
|
|
@@ -12,7 +12,7 @@ const helpers = require('./helpers-ea4ccbcb.js');
|
|
|
12
12
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
13
13
|
const index$4 = require('./index-cc7dfb7c.js');
|
|
14
14
|
const capacitor = require('./capacitor-2ffba62a.js');
|
|
15
|
-
const overlays = require('./overlays-
|
|
15
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
16
16
|
const theme = require('./theme-fbc56b3b.js');
|
|
17
17
|
const index$5 = require('./index-be8a2ab9.js');
|
|
18
18
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
@@ -10,13 +10,13 @@ const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
|
|
|
10
10
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
11
11
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
12
12
|
const index$1 = require('./index-cc7dfb7c.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
15
15
|
const theme = require('./theme-fbc56b3b.js');
|
|
16
16
|
const index$2 = require('./index-be8a2ab9.js');
|
|
17
17
|
const animation = require('./animation-2bb33618.js');
|
|
18
|
-
require('./index-306a7476.js');
|
|
19
18
|
require('./hardware-back-button-b67c8e75.js');
|
|
19
|
+
require('./index-306a7476.js');
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* Returns the dimensions of the popover
|
|
@@ -10,7 +10,7 @@ const formController = require('./form-controller-5e223b54.js');
|
|
|
10
10
|
const notchController = require('./notch-controller-f4f6af5d.js');
|
|
11
11
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
12
12
|
const index$1 = require('./index-cc7dfb7c.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
14
14
|
const dir = require('./dir-f1e0ca26.js');
|
|
15
15
|
const theme = require('./theme-fbc56b3b.js');
|
|
16
16
|
const watchOptions = require('./watch-options-f3f77e54.js');
|
|
@@ -10,13 +10,13 @@ const config = require('./config-d5882735.js');
|
|
|
10
10
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
11
11
|
const lockController = require('./lock-controller-4ae2eb59.js');
|
|
12
12
|
const index$1 = require('./index-cc7dfb7c.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-c78a0148.js');
|
|
14
14
|
const theme = require('./theme-fbc56b3b.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
16
16
|
const animation = require('./animation-2bb33618.js');
|
|
17
|
-
require('./index-306a7476.js');
|
|
18
17
|
require('./framework-delegate-c0873a6f.js');
|
|
19
18
|
require('./hardware-back-button-b67c8e75.js');
|
|
19
|
+
require('./index-306a7476.js');
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* iOS Toast Enter Animation
|
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
*/
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
|
-
const index = require('./index-306a7476.js');
|
|
7
6
|
const ionicGlobal = require('./ionic-global-6d5d27b5.js');
|
|
8
7
|
const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
|
|
9
8
|
const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
|
|
10
9
|
const helpers = require('./helpers-ea4ccbcb.js');
|
|
11
|
-
const index
|
|
10
|
+
const index = require('./index-cc7dfb7c.js');
|
|
12
11
|
|
|
13
12
|
let lastOverlayIndex = 0;
|
|
14
13
|
let lastId = 0;
|
|
@@ -325,16 +324,6 @@ const getOverlays = (doc, selector) => {
|
|
|
325
324
|
}
|
|
326
325
|
return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
|
|
327
326
|
};
|
|
328
|
-
/**
|
|
329
|
-
* Returns a list of all presented overlays.
|
|
330
|
-
* Inline overlays can exist in the DOM but not be presented,
|
|
331
|
-
* so there are times when we want to exclude those.
|
|
332
|
-
* @param doc The document to find the element within.
|
|
333
|
-
* @param overlayTag The selector for the overlay, defaults to Ionic overlay components.
|
|
334
|
-
*/
|
|
335
|
-
const getPresentedOverlays = (doc, overlayTag) => {
|
|
336
|
-
return getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
|
|
337
|
-
};
|
|
338
327
|
/**
|
|
339
328
|
* Returns an overlay element
|
|
340
329
|
* @param doc The document to find the element within.
|
|
@@ -343,7 +332,7 @@ const getPresentedOverlays = (doc, overlayTag) => {
|
|
|
343
332
|
* @returns The overlay element or `undefined` if no overlay element is found.
|
|
344
333
|
*/
|
|
345
334
|
const getOverlay = (doc, overlayTag, id) => {
|
|
346
|
-
const overlays =
|
|
335
|
+
const overlays = getOverlays(doc, overlayTag).filter((o) => !isOverlayHidden(o));
|
|
347
336
|
return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
|
|
348
337
|
};
|
|
349
338
|
/**
|
|
@@ -449,13 +438,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
449
438
|
if (!overlay.presented) {
|
|
450
439
|
return false;
|
|
451
440
|
}
|
|
452
|
-
|
|
453
|
-
* If this is the last visible overlay then
|
|
454
|
-
* we want to re-add the root to the accessibility tree.
|
|
455
|
-
*/
|
|
456
|
-
if (index.doc !== undefined && getPresentedOverlays(index.doc).length === 1) {
|
|
457
|
-
setRootAriaHidden(false);
|
|
458
|
-
}
|
|
441
|
+
setRootAriaHidden(false);
|
|
459
442
|
overlay.presented = false;
|
|
460
443
|
try {
|
|
461
444
|
// Overlay contents should not be clickable during dismiss
|
|
@@ -667,7 +650,7 @@ const createTriggerController = () => {
|
|
|
667
650
|
removeClickListener();
|
|
668
651
|
const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
|
|
669
652
|
if (!triggerEl) {
|
|
670
|
-
index
|
|
653
|
+
index.printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.`, el);
|
|
671
654
|
return;
|
|
672
655
|
}
|
|
673
656
|
const configureTriggerInteraction = (targetEl, overlayEl) => {
|
|
@@ -1,33 +1,17 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
position: absolute;
|
|
3
|
+
width: fit-content;
|
|
4
|
+
height: fit-content;
|
|
3
5
|
z-index: 999;
|
|
4
6
|
}
|
|
5
7
|
|
|
6
8
|
:host(.fab-horizontal-center) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
@supports not (inset-inline-start: 0) {
|
|
16
|
-
:host(.fab-horizontal-center) {
|
|
17
|
-
left: 50%;
|
|
18
|
-
}
|
|
19
|
-
:host-context([dir=rtl]):host(.fab-horizontal-center), :host-context([dir=rtl]).fab-horizontal-center {
|
|
20
|
-
left: unset;
|
|
21
|
-
right: unset;
|
|
22
|
-
right: 50%;
|
|
23
|
-
}
|
|
24
|
-
@supports selector(:dir(rtl)) {
|
|
25
|
-
:host(.fab-horizontal-center):dir(rtl) {
|
|
26
|
-
left: unset;
|
|
27
|
-
right: unset;
|
|
28
|
-
right: 50%;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
9
|
+
left: 0px;
|
|
10
|
+
right: 0px;
|
|
11
|
+
-webkit-margin-start: auto;
|
|
12
|
+
margin-inline-start: auto;
|
|
13
|
+
-webkit-margin-end: auto;
|
|
14
|
+
margin-inline-end: auto;
|
|
31
15
|
}
|
|
32
16
|
|
|
33
17
|
@supports (inset-inline-start: 0) {
|
|
@@ -80,19 +64,95 @@
|
|
|
80
64
|
top: 10px;
|
|
81
65
|
}
|
|
82
66
|
|
|
67
|
+
/**
|
|
68
|
+
* Reset the top value since edge
|
|
69
|
+
* styles use margin-top.
|
|
70
|
+
*/
|
|
83
71
|
:host(.fab-vertical-top.fab-edge) {
|
|
84
|
-
top:
|
|
72
|
+
top: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* We need to adjust the parent FAB button up by half
|
|
77
|
+
* its height so that half of it sits on the header. As a result,
|
|
78
|
+
* we target the slotted ion-fab-button instead of targeting the host.
|
|
79
|
+
*/
|
|
80
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
|
|
81
|
+
margin-top: -50%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* The small FAB button adds top and bottom margin. We need to account for
|
|
86
|
+
* that margin when we adjust the FAB button for edge styles since we
|
|
87
|
+
* are overriding the margin-top value below.
|
|
88
|
+
*/
|
|
89
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
|
|
90
|
+
margin-top: calc((-100% + 16px) / 2);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Since we are adjusting the FAB button we also need
|
|
95
|
+
* to adjust the sibling ion-fab-list otherwise there will be
|
|
96
|
+
* a gap between the parent FAB button and the associated list.
|
|
97
|
+
*/
|
|
98
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
|
|
99
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
|
|
100
|
+
margin-top: -50%;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
|
|
104
|
+
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
|
|
105
|
+
margin-top: calc(50% + 10px);
|
|
85
106
|
}
|
|
86
107
|
|
|
87
108
|
:host(.fab-vertical-bottom) {
|
|
88
109
|
bottom: 10px;
|
|
89
110
|
}
|
|
90
111
|
|
|
112
|
+
/**
|
|
113
|
+
* Reset the bottom value since edge
|
|
114
|
+
* styles use margin-bottom.
|
|
115
|
+
*/
|
|
91
116
|
:host(.fab-vertical-bottom.fab-edge) {
|
|
92
|
-
bottom:
|
|
117
|
+
bottom: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* We need to adjust the parent FAB button down by half
|
|
122
|
+
* its height so that half of it sits on the footer. As a result,
|
|
123
|
+
* we target the slotted ion-fab-button instead of targeting the host.
|
|
124
|
+
*/
|
|
125
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
|
|
126
|
+
margin-bottom: -50%;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* The small FAB button adds top and bottom margin. We need to account for
|
|
131
|
+
* that margin when we adjust the FAB button for edge styles since we
|
|
132
|
+
* are overriding the margin-bottom value below.
|
|
133
|
+
*/
|
|
134
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
|
|
135
|
+
margin-bottom: calc((-100% + 16px) / 2);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* Since we are adjusting the FAB button we also need
|
|
140
|
+
* to adjust the sibling ion-fab-list otherwise there will be
|
|
141
|
+
* a gap between the parent FAB button and the associated list.
|
|
142
|
+
*/
|
|
143
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
|
|
144
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
|
|
145
|
+
margin-bottom: -50%;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
|
|
149
|
+
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
|
|
150
|
+
margin-bottom: calc(50% + 10px);
|
|
93
151
|
}
|
|
94
152
|
|
|
95
153
|
:host(.fab-vertical-center) {
|
|
96
|
-
|
|
97
|
-
|
|
154
|
+
top: 0px;
|
|
155
|
+
bottom: 0px;
|
|
156
|
+
margin-top: auto;
|
|
157
|
+
margin-bottom: auto;
|
|
98
158
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import { expect } from "@playwright/test";
|
|
5
|
+
import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
|
|
6
|
+
/**
|
|
7
|
+
* This behavior does not vary across modes
|
|
8
|
+
*/
|
|
9
|
+
configs({ modes: ['ios'] }).forEach(({ title, config, screenshot }) => {
|
|
10
|
+
test.describe(title('fab: custom size'), () => {
|
|
11
|
+
test('should position fabs correctly with custom sizes', async ({ page }) => {
|
|
12
|
+
await page.goto(`/src/components/fab/test/custom-size`, config);
|
|
13
|
+
await page.setViewportSize(Viewports.tablet.landscape);
|
|
14
|
+
await expect(page).toHaveScreenshot(screenshot(`fab-custom-size`));
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
});
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
margin-left: 0;
|
|
3
3
|
margin-right: 0;
|
|
4
|
-
margin-top:
|
|
5
|
-
margin-bottom:
|
|
4
|
+
margin-top: calc(100% + 10px);
|
|
5
|
+
margin-bottom: calc(100% + 10px);
|
|
6
6
|
display: none;
|
|
7
7
|
position: absolute;
|
|
8
8
|
top: 0;
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
align-items: center;
|
|
11
|
+
/**
|
|
12
|
+
* The list should be centered relative to the parent
|
|
13
|
+
* FAB button. We set minimum dimensions so the
|
|
14
|
+
* FAB list can be centered relative to the small FAB button.
|
|
15
|
+
* However, the small FAB button adds start/end margin, so we need
|
|
16
|
+
* to account for that in the FAB list dimensions.
|
|
17
|
+
*/
|
|
11
18
|
min-width: 56px;
|
|
12
19
|
min-height: 56px;
|
|
13
20
|
}
|
|
@@ -59,10 +66,10 @@
|
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
:host(.fab-list-side-start) {
|
|
62
|
-
-webkit-margin-start:
|
|
63
|
-
margin-inline-start:
|
|
64
|
-
-webkit-margin-end:
|
|
65
|
-
margin-inline-end:
|
|
69
|
+
-webkit-margin-start: calc(100% + 10px);
|
|
70
|
+
margin-inline-start: calc(100% + 10px);
|
|
71
|
+
-webkit-margin-end: calc(100% + 10px);
|
|
72
|
+
margin-inline-end: calc(100% + 10px);
|
|
66
73
|
margin-top: 0;
|
|
67
74
|
margin-bottom: 0;
|
|
68
75
|
flex-direction: row-reverse;
|
|
@@ -91,10 +98,10 @@
|
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
:host(.fab-list-side-end) {
|
|
94
|
-
-webkit-margin-start:
|
|
95
|
-
margin-inline-start:
|
|
96
|
-
-webkit-margin-end:
|
|
97
|
-
margin-inline-end:
|
|
101
|
+
-webkit-margin-start: calc(100% + 10px);
|
|
102
|
+
margin-inline-start: calc(100% + 10px);
|
|
103
|
+
-webkit-margin-end: calc(100% + 10px);
|
|
104
|
+
margin-inline-end: calc(100% + 10px);
|
|
98
105
|
margin-top: 0;
|
|
99
106
|
margin-bottom: 0;
|
|
100
107
|
flex-direction: row;
|