@ionic/core 8.8.7-dev.11778163906.173cadb1 → 8.8.7-dev.11778599050.191a48e3
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-item-option.js +1 -1
- package/components/ion-item-sliding.js +1 -1
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/core.ionic.css.map +1 -1
- package/css/ionic/global.bundle.ionic.css.map +1 -1
- package/css/ionic/link.ionic.css.map +1 -1
- package/css/ionic/typography.ionic.css.map +1 -1
- package/dist/cjs/ion-item-option_3.cjs.entry.js +289 -39
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/item-option/item-option.ionic.css +2 -2
- package/dist/collection/components/item-sliding/item-sliding.ionic.css +211 -0
- package/dist/collection/components/item-sliding/item-sliding.js +284 -38
- package/dist/collection/components/item-sliding/{item-sliding.css → item-sliding.native.css} +78 -9
- package/dist/docs.json +1 -1
- package/dist/esm/ion-item-option_3.entry.js +289 -39
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-c2894f9e.entry.js +4 -0
- package/dist/types/components/item-sliding/item-sliding.d.ts +17 -2
- package/hydrate/index.js +290 -40
- package/hydrate/index.mjs +290 -40
- package/package.json +2 -2
- package/dist/ionic/p-b0c54b4c.entry.js +0 -4
|
@@ -11,7 +11,7 @@ var index$1 = require('./index-BJrpF9T3.js');
|
|
|
11
11
|
var watchOptions = require('./watch-options-CviOsrTS.js');
|
|
12
12
|
require('./focus-visible-BIj-I3-C.js');
|
|
13
13
|
|
|
14
|
-
const itemOptionIonicCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-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;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.button-native{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);height:var(--token-scale-1600, 64px)}::slotted([slot=top]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:var(--token-space-100, var(--token-scale-100, 4px))}::slotted([slot=bottom]){margin-left:0;margin-right:0;margin-top:var(--token-space-100, var(--token-scale-100, 4px));margin-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-end:var(--token-space-100, var(--token-scale-100, 4px));margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted(ion-icon),::slotted([slot=icon-only]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:var(--token-scale-500, 20px);min-width:initial;height:var(--token-scale-500, 20px)}:host(.item-option-round){border-radius:var(--token-border-radius-300, var(--token-scale-300, 12px))}:host(.item-option-soft){border-radius:var(--token-border-radius-200, var(--token-scale-200, 8px))}:host(.item-option-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.item-option-disabled)::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none}:host(.item-option-disabled) .button-native{opacity:1}:host(.item-option-subtle){--background:var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-activated:var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));--color:var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))))}:host(.item-option-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.item-option-bold){--background:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--background-activated:var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));--color:var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)))}:host(.item-option-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.item-option-
|
|
14
|
+
const itemOptionIonicCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-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;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.button-native{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);height:var(--token-scale-1600, 64px)}::slotted([slot=top]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:var(--token-space-100, var(--token-scale-100, 4px))}::slotted([slot=bottom]){margin-left:0;margin-right:0;margin-top:var(--token-space-100, var(--token-scale-100, 4px));margin-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-end:var(--token-space-100, var(--token-scale-100, 4px));margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted(ion-icon),::slotted([slot=icon-only]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:var(--token-scale-500, 20px);min-width:initial;height:var(--token-scale-500, 20px)}:host(.item-option-round){border-radius:var(--token-border-radius-300, var(--token-scale-300, 12px))}:host(.item-option-soft){border-radius:var(--token-border-radius-200, var(--token-scale-200, 8px))}:host(.item-option-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.item-option-disabled)::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none}:host(.item-option-disabled) .button-native{opacity:1}:host(.item-option-subtle){--background:var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-activated:var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));--color:var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))))}:host(.item-option-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.item-option-bold){--background:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--background-activated:var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));--color:var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)))}:host(.item-option-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.item-option-expand-threshold){-webkit-filter:brightness(0.92);filter:brightness(0.92)}`;
|
|
15
15
|
|
|
16
16
|
const itemOptionIosCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-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;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-disabled) .button-native{opacity:0.5}:host(.item-option-expandable){-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host{font-size:clamp(16px, 1rem, 35.2px)}:host(.ion-activated){background:var(--ion-color-primary-shade, #004acd)}:host(.ion-color.ion-activated){background:var(--ion-color-shade)}`;
|
|
17
17
|
|
|
@@ -136,10 +136,26 @@ ItemOptions.style = {
|
|
|
136
136
|
md: itemOptionsMdCss()
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
const
|
|
139
|
+
const itemSlidingIonicCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-transition-open .item{-webkit-transition:-webkit-transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:-webkit-transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1)), -webkit-transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1))}.item-sliding-transition-snapback .item{-webkit-transition:-webkit-transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:-webkit-transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)), -webkit-transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38))}.item-sliding-confirm-item-in .item{-webkit-transition:-webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:-webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)), -webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1))}.item-sliding-confirm-item-back .item{-webkit-transition:-webkit-transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:-webkit-transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)), -webkit-transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38))}ion-item-option.item-sliding-expandable-width-in{-webkit-transition:width var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:width var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1))}ion-item-option.item-sliding-expandable-width-back{-webkit-transition:width var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:width var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38))}.item-sliding-active-slide .item{position:relative;opacity:1;z-index:var(--token-z-index-100, 100);pointer-events:none;will-change:transform}`;
|
|
140
|
+
|
|
141
|
+
const iosItemSlidingNativeCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-active-slide.item-sliding-full-swipe-transition .item{-webkit-transition:-webkit-transform 250ms ease-out;transition:-webkit-transform 250ms ease-out;transition:transform 250ms ease-out;transition:transform 250ms ease-out, -webkit-transform 250ms ease-out}.item-sliding-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}`;
|
|
142
|
+
|
|
143
|
+
const mdItemSlidingNativeCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-active-slide.item-sliding-full-swipe-transition .item{-webkit-transition:-webkit-transform 250ms ease-out;transition:-webkit-transform 250ms ease-out;transition:transform 250ms ease-out;transition:transform 250ms ease-out, -webkit-transform 250ms ease-out}.item-sliding-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}`;
|
|
140
144
|
|
|
141
145
|
const SWIPE_MARGIN = 30;
|
|
142
146
|
const ELASTIC_FACTOR = 0.55;
|
|
147
|
+
const IONIC_ELASTIC_FACTOR = 0.15;
|
|
148
|
+
const IONIC_SNAP_OPEN_RATIO = 0.4;
|
|
149
|
+
const IONIC_EXPAND_TRIGGER = 40;
|
|
150
|
+
const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
|
|
151
|
+
const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
|
|
152
|
+
const IONIC_ACTION_BASE_WIDTH = 64;
|
|
153
|
+
const IONIC_CONFIRM_PAUSE = 300;
|
|
154
|
+
const FULL_SWIPE_TRANSITION_MS = 250;
|
|
155
|
+
const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
|
|
156
|
+
/** Expandable, non-disabled option (matches item-option expandable class). */
|
|
157
|
+
const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
|
|
158
|
+
const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
|
|
143
159
|
let openSlidingItem;
|
|
144
160
|
const ItemSliding = class {
|
|
145
161
|
constructor(hostRef) {
|
|
@@ -154,12 +170,17 @@ const ItemSliding = class {
|
|
|
154
170
|
this.optsDirty = true;
|
|
155
171
|
this.contentEl = null;
|
|
156
172
|
this.initialContentScrollY = true;
|
|
173
|
+
this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
|
|
174
|
+
this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
|
|
157
175
|
this.state = 2 /* SlidingState.Disabled */;
|
|
158
176
|
/**
|
|
159
177
|
* If `true`, the user cannot interact with the sliding item.
|
|
160
178
|
*/
|
|
161
179
|
this.disabled = false;
|
|
162
180
|
}
|
|
181
|
+
isIonicTheme() {
|
|
182
|
+
return ionicGlobal.getIonTheme(this) === 'ionic';
|
|
183
|
+
}
|
|
163
184
|
disabledChanged() {
|
|
164
185
|
if (this.gesture) {
|
|
165
186
|
this.gesture.enable(!this.disabled);
|
|
@@ -359,7 +380,7 @@ const ItemSliding = class {
|
|
|
359
380
|
if (!this.item) {
|
|
360
381
|
return resolve();
|
|
361
382
|
}
|
|
362
|
-
this.
|
|
383
|
+
this.el.classList.add('item-sliding-full-swipe-transition');
|
|
363
384
|
this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
|
|
364
385
|
const id = setTimeout(resolve, duration);
|
|
365
386
|
signal.addEventListener('abort', () => {
|
|
@@ -377,8 +398,8 @@ const ItemSliding = class {
|
|
|
377
398
|
return maxWidth + SWIPE_MARGIN;
|
|
378
399
|
}
|
|
379
400
|
/**
|
|
380
|
-
*
|
|
381
|
-
*
|
|
401
|
+
* Native (ios/md) full swipe: off-screen → fire swipe → return.
|
|
402
|
+
* Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
|
|
382
403
|
*/
|
|
383
404
|
async animateFullSwipe(direction) {
|
|
384
405
|
const abortController = new AbortController();
|
|
@@ -400,7 +421,7 @@ const ItemSliding = class {
|
|
|
400
421
|
await this.delay(100, signal);
|
|
401
422
|
// Animate off-screen while maintaining the expanded state
|
|
402
423
|
const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
|
|
403
|
-
await this.animateToPosition(offScreenDistance,
|
|
424
|
+
await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
|
|
404
425
|
// Trigger action
|
|
405
426
|
if (options) {
|
|
406
427
|
options.fireSwipeEvent();
|
|
@@ -408,7 +429,7 @@ const ItemSliding = class {
|
|
|
408
429
|
// Small delay before returning
|
|
409
430
|
await this.delay(300, signal);
|
|
410
431
|
// Return to closed state
|
|
411
|
-
await this.animateToPosition(0,
|
|
432
|
+
await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
|
|
412
433
|
}
|
|
413
434
|
catch (_a) {
|
|
414
435
|
// Animation was aborted (e.g. component disconnected). finally handles cleanup.
|
|
@@ -416,8 +437,8 @@ const ItemSliding = class {
|
|
|
416
437
|
finally {
|
|
417
438
|
this.animationAbortController = undefined;
|
|
418
439
|
// Reset state
|
|
440
|
+
this.el.classList.remove('item-sliding-full-swipe-transition');
|
|
419
441
|
if (this.item) {
|
|
420
|
-
this.item.style.transition = '';
|
|
421
442
|
this.item.style.transform = '';
|
|
422
443
|
}
|
|
423
444
|
this.openAmount = 0;
|
|
@@ -430,6 +451,160 @@ const ItemSliding = class {
|
|
|
430
451
|
}
|
|
431
452
|
}
|
|
432
453
|
}
|
|
454
|
+
queryExpandableOption(options) {
|
|
455
|
+
if (!options) {
|
|
456
|
+
return undefined;
|
|
457
|
+
}
|
|
458
|
+
const expandableOptions = Array.from(options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR));
|
|
459
|
+
if (expandableOptions.length === 0) {
|
|
460
|
+
return undefined;
|
|
461
|
+
}
|
|
462
|
+
if (expandableOptions.length === 1) {
|
|
463
|
+
return expandableOptions[0];
|
|
464
|
+
}
|
|
465
|
+
const isRTL = document.dir === 'rtl';
|
|
466
|
+
const isEndSide = options.classList.contains('item-options-end');
|
|
467
|
+
// Match native edge behavior for multi-expandable configs
|
|
468
|
+
const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
|
|
469
|
+
return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
|
|
470
|
+
}
|
|
471
|
+
getExpandableOption(direction) {
|
|
472
|
+
return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
|
|
473
|
+
}
|
|
474
|
+
getOpenDirectionFromAmount(openAmount) {
|
|
475
|
+
if (openAmount > 0) {
|
|
476
|
+
return 'end';
|
|
477
|
+
}
|
|
478
|
+
if (openAmount < 0) {
|
|
479
|
+
return 'start';
|
|
480
|
+
}
|
|
481
|
+
return undefined;
|
|
482
|
+
}
|
|
483
|
+
getOptionsWidthForDirection(direction) {
|
|
484
|
+
return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
|
|
485
|
+
}
|
|
486
|
+
getExpandableBaseWidth(direction) {
|
|
487
|
+
return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
|
|
488
|
+
}
|
|
489
|
+
setIonicExpandableWidth(direction, width) {
|
|
490
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
491
|
+
if (!expandableOption) {
|
|
492
|
+
return;
|
|
493
|
+
}
|
|
494
|
+
const style = expandableOption.style;
|
|
495
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
496
|
+
style.width = `${Math.max(baseWidth, width)}px`;
|
|
497
|
+
}
|
|
498
|
+
resetIonicExpandableOptions() {
|
|
499
|
+
[this.leftOptions, this.rightOptions].forEach((options) => {
|
|
500
|
+
if (!options) {
|
|
501
|
+
return;
|
|
502
|
+
}
|
|
503
|
+
options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
|
|
504
|
+
node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
505
|
+
});
|
|
506
|
+
const expandableOption = this.queryExpandableOption(options);
|
|
507
|
+
if (!expandableOption) {
|
|
508
|
+
return;
|
|
509
|
+
}
|
|
510
|
+
expandableOption.style.width = '';
|
|
511
|
+
expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
|
|
515
|
+
var _a;
|
|
516
|
+
if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
|
|
517
|
+
return;
|
|
518
|
+
}
|
|
519
|
+
const direction = this.getOpenDirectionFromAmount(openAmount);
|
|
520
|
+
if (direction === undefined) {
|
|
521
|
+
const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
|
|
522
|
+
if (previousDirection === undefined) {
|
|
523
|
+
this.resetIonicExpandableOptions();
|
|
524
|
+
return;
|
|
525
|
+
}
|
|
526
|
+
(_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
527
|
+
this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection));
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
530
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
531
|
+
const optionsWidth = this.getOptionsWidthForDirection(direction);
|
|
532
|
+
const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
|
|
533
|
+
const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
|
|
534
|
+
const targetWidth = baseWidth + resistedExtraWidth;
|
|
535
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
536
|
+
if (expandableOption) {
|
|
537
|
+
if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
|
|
538
|
+
expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
539
|
+
}
|
|
540
|
+
else {
|
|
541
|
+
expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
this.setIonicExpandableWidth(direction, targetWidth);
|
|
545
|
+
}
|
|
546
|
+
async animateIonicFullSwipe(direction) {
|
|
547
|
+
const abortController = new AbortController();
|
|
548
|
+
this.animationAbortController = abortController;
|
|
549
|
+
const { signal } = abortController;
|
|
550
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
551
|
+
const options = direction === 'end' ? this.rightOptions : this.leftOptions;
|
|
552
|
+
if (this.gesture) {
|
|
553
|
+
this.gesture.enable(false);
|
|
554
|
+
}
|
|
555
|
+
try {
|
|
556
|
+
this.state =
|
|
557
|
+
direction === 'end'
|
|
558
|
+
? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
|
|
559
|
+
: 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
|
|
560
|
+
if (!this.item) {
|
|
561
|
+
return;
|
|
562
|
+
}
|
|
563
|
+
const itemWidth = this.el.offsetWidth || window.innerWidth;
|
|
564
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
565
|
+
const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
|
|
566
|
+
const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
|
|
567
|
+
if (expandableOption) {
|
|
568
|
+
expandableOption.classList.remove('item-sliding-expandable-width-back');
|
|
569
|
+
expandableOption.classList.add('item-sliding-expandable-width-in');
|
|
570
|
+
expandableOption.style.width = `${expandableTargetWidth}px`;
|
|
571
|
+
}
|
|
572
|
+
this.el.classList.remove('item-sliding-confirm-item-back');
|
|
573
|
+
this.el.classList.add('item-sliding-confirm-item-in');
|
|
574
|
+
this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
|
|
575
|
+
await this.delay(150, signal);
|
|
576
|
+
options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
|
|
577
|
+
await this.delay(IONIC_CONFIRM_PAUSE, signal);
|
|
578
|
+
if (expandableOption) {
|
|
579
|
+
expandableOption.classList.remove('item-sliding-expandable-width-in');
|
|
580
|
+
expandableOption.classList.add('item-sliding-expandable-width-back');
|
|
581
|
+
expandableOption.style.width = `${baseWidth}px`;
|
|
582
|
+
}
|
|
583
|
+
this.el.classList.remove('item-sliding-confirm-item-in');
|
|
584
|
+
this.el.classList.add('item-sliding-confirm-item-back');
|
|
585
|
+
this.item.style.transform = 'translate3d(0, 0, 0)';
|
|
586
|
+
await this.delay(500, signal);
|
|
587
|
+
}
|
|
588
|
+
catch (_a) {
|
|
589
|
+
// Animation was aborted. finally handles cleanup.
|
|
590
|
+
}
|
|
591
|
+
finally {
|
|
592
|
+
this.animationAbortController = undefined;
|
|
593
|
+
this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
|
|
594
|
+
if (this.item) {
|
|
595
|
+
this.item.style.transform = '';
|
|
596
|
+
}
|
|
597
|
+
this.resetIonicExpandableOptions();
|
|
598
|
+
this.openAmount = 0;
|
|
599
|
+
this.state = 2 /* SlidingState.Disabled */;
|
|
600
|
+
if (openSlidingItem === this.el) {
|
|
601
|
+
openSlidingItem = undefined;
|
|
602
|
+
}
|
|
603
|
+
if (this.gesture) {
|
|
604
|
+
this.gesture.enable(!this.disabled);
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
}
|
|
433
608
|
async updateOptions() {
|
|
434
609
|
var _a;
|
|
435
610
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
@@ -497,7 +672,12 @@ const ItemSliding = class {
|
|
|
497
672
|
}
|
|
498
673
|
this.initialOpenAmount = this.openAmount;
|
|
499
674
|
if (this.item) {
|
|
500
|
-
this.
|
|
675
|
+
if (this.isIonicTheme()) {
|
|
676
|
+
this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
|
|
677
|
+
}
|
|
678
|
+
else {
|
|
679
|
+
this.el.classList.add('item-sliding-dragging');
|
|
680
|
+
}
|
|
501
681
|
}
|
|
502
682
|
}
|
|
503
683
|
onMove(gesture) {
|
|
@@ -520,22 +700,46 @@ const ItemSliding = class {
|
|
|
520
700
|
index.printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
|
|
521
701
|
break;
|
|
522
702
|
}
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
703
|
+
if (this.isIonicTheme()) {
|
|
704
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
705
|
+
const overDrag = openAmount - this.optsWidthRightSide;
|
|
706
|
+
openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
707
|
+
}
|
|
708
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
709
|
+
const overDrag = openAmount + this.optsWidthLeftSide;
|
|
710
|
+
openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
711
|
+
}
|
|
527
712
|
}
|
|
528
|
-
else
|
|
529
|
-
optsWidth
|
|
530
|
-
|
|
713
|
+
else {
|
|
714
|
+
let optsWidth;
|
|
715
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
716
|
+
optsWidth = this.optsWidthRightSide;
|
|
717
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
718
|
+
}
|
|
719
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
720
|
+
optsWidth = -this.optsWidthLeftSide;
|
|
721
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
722
|
+
}
|
|
531
723
|
}
|
|
532
724
|
this.setOpenAmount(openAmount, false);
|
|
533
725
|
}
|
|
534
726
|
onEnd(gesture) {
|
|
727
|
+
this.el.classList.remove('item-sliding-dragging');
|
|
728
|
+
this.restoreContentScrollAfterSlide();
|
|
729
|
+
if (this.isIonicTheme()) {
|
|
730
|
+
this.onEndIonic(gesture);
|
|
731
|
+
}
|
|
732
|
+
else {
|
|
733
|
+
this.onEndNative(gesture);
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
restoreContentScrollAfterSlide() {
|
|
535
737
|
const { contentEl, initialContentScrollY } = this;
|
|
536
738
|
if (contentEl) {
|
|
537
739
|
index$1.resetContentScrollY(contentEl, initialContentScrollY);
|
|
538
740
|
}
|
|
741
|
+
}
|
|
742
|
+
onEndNative(gesture) {
|
|
539
743
|
// Check for full swipe conditions with expandable options
|
|
540
744
|
const rawSwipeDistance = Math.abs(gesture.deltaX);
|
|
541
745
|
const direction = gesture.deltaX < 0 ? 'end' : 'start';
|
|
@@ -572,17 +776,64 @@ const ItemSliding = class {
|
|
|
572
776
|
this.leftOptions.fireSwipeEvent();
|
|
573
777
|
}
|
|
574
778
|
}
|
|
779
|
+
onEndIonic(gesture) {
|
|
780
|
+
const velocity = gesture.velocityX;
|
|
781
|
+
const velocityX = velocity * 1000;
|
|
782
|
+
const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
|
|
783
|
+
if (activeDirection === undefined) {
|
|
784
|
+
this.setOpenAmount(0, true);
|
|
785
|
+
return;
|
|
786
|
+
}
|
|
787
|
+
const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
|
|
788
|
+
const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
|
|
789
|
+
const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
|
|
790
|
+
const closeDirection = activeDirection === 'end'
|
|
791
|
+
? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
|
|
792
|
+
: velocityX < -400;
|
|
793
|
+
if (closeDirection) {
|
|
794
|
+
this.setOpenAmount(0, true);
|
|
795
|
+
return;
|
|
796
|
+
}
|
|
797
|
+
if (hasExpandable &&
|
|
798
|
+
(extraWidth >= IONIC_EXPAND_TRIGGER ||
|
|
799
|
+
(extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))) {
|
|
800
|
+
this.animateIonicFullSwipe(activeDirection).catch(() => {
|
|
801
|
+
if (this.gesture) {
|
|
802
|
+
this.gesture.enable(!this.disabled);
|
|
803
|
+
}
|
|
804
|
+
});
|
|
805
|
+
return;
|
|
806
|
+
}
|
|
807
|
+
const flickOpen = activeDirection === 'end'
|
|
808
|
+
? velocityX < -200
|
|
809
|
+
: velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
|
|
810
|
+
const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
|
|
811
|
+
const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
|
|
812
|
+
const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
|
|
813
|
+
const restingPoint = shouldSnapOpen ? fullOpen : 0;
|
|
814
|
+
this.setOpenAmount(restingPoint, true);
|
|
815
|
+
}
|
|
575
816
|
calculateOptsWidth() {
|
|
576
817
|
this.optsWidthRightSide = 0;
|
|
577
818
|
if (this.rightOptions) {
|
|
578
819
|
this.rightOptions.style.display = 'flex';
|
|
579
820
|
this.optsWidthRightSide = this.rightOptions.offsetWidth;
|
|
821
|
+
const rightExpandable = this.queryExpandableOption(this.rightOptions);
|
|
822
|
+
if (rightExpandable) {
|
|
823
|
+
rightExpandable.style.width = '';
|
|
824
|
+
this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
|
|
825
|
+
}
|
|
580
826
|
this.rightOptions.style.display = '';
|
|
581
827
|
}
|
|
582
828
|
this.optsWidthLeftSide = 0;
|
|
583
829
|
if (this.leftOptions) {
|
|
584
830
|
this.leftOptions.style.display = 'flex';
|
|
585
831
|
this.optsWidthLeftSide = this.leftOptions.offsetWidth;
|
|
832
|
+
const leftExpandable = this.queryExpandableOption(this.leftOptions);
|
|
833
|
+
if (leftExpandable) {
|
|
834
|
+
leftExpandable.style.width = '';
|
|
835
|
+
this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
|
|
836
|
+
}
|
|
586
837
|
this.leftOptions.style.display = '';
|
|
587
838
|
}
|
|
588
839
|
this.optsDirty = false;
|
|
@@ -597,35 +848,30 @@ const ItemSliding = class {
|
|
|
597
848
|
}
|
|
598
849
|
const { el } = this;
|
|
599
850
|
const style = this.item.style;
|
|
851
|
+
const previousOpenAmount = this.openAmount;
|
|
600
852
|
this.openAmount = openAmount;
|
|
601
|
-
if (
|
|
602
|
-
|
|
853
|
+
if (this.isIonicTheme()) {
|
|
854
|
+
this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
|
|
855
|
+
}
|
|
856
|
+
if (this.isIonicTheme() && isFinal) {
|
|
857
|
+
const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
|
|
858
|
+
if (closing) {
|
|
859
|
+
this.el.classList.add('item-sliding-transition-snapback');
|
|
860
|
+
}
|
|
861
|
+
else {
|
|
862
|
+
this.el.classList.add('item-sliding-transition-open');
|
|
863
|
+
}
|
|
603
864
|
}
|
|
604
865
|
if (openAmount > 0) {
|
|
605
|
-
this.
|
|
606
|
-
|
|
607
|
-
? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
|
|
608
|
-
: 8 /* SlidingState.End */;
|
|
866
|
+
const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
|
|
867
|
+
this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
|
|
609
868
|
}
|
|
610
869
|
else if (openAmount < 0) {
|
|
611
|
-
this.
|
|
612
|
-
|
|
613
|
-
? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
|
|
614
|
-
: 16 /* SlidingState.Start */;
|
|
870
|
+
const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
|
|
871
|
+
this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
|
|
615
872
|
}
|
|
616
873
|
else {
|
|
617
|
-
/**
|
|
618
|
-
* The sliding options should not be
|
|
619
|
-
* clickable while the item is closing.
|
|
620
|
-
*/
|
|
621
874
|
el.classList.add('item-sliding-closing');
|
|
622
|
-
/**
|
|
623
|
-
* Item sliding cannot be interrupted
|
|
624
|
-
* while closing the item. If it did,
|
|
625
|
-
* it would allow the item to get into an
|
|
626
|
-
* inconsistent state where multiple
|
|
627
|
-
* items are then open at the same time.
|
|
628
|
-
*/
|
|
629
875
|
if (this.gesture) {
|
|
630
876
|
this.gesture.enable(false);
|
|
631
877
|
}
|
|
@@ -660,7 +906,7 @@ const ItemSliding = class {
|
|
|
660
906
|
}
|
|
661
907
|
render() {
|
|
662
908
|
const theme = ionicGlobal.getIonTheme(this);
|
|
663
|
-
return (index.h(index.Host, { key: '
|
|
909
|
+
return (index.h(index.Host, { key: 'ca0730d5ee00f245b6a139d9fb53fcc8c529a8c6', class: {
|
|
664
910
|
[theme]: true,
|
|
665
911
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
666
912
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -693,7 +939,11 @@ const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
|
|
|
693
939
|
// The resulting expression was generated by resolving the K-map (Karnaugh map):
|
|
694
940
|
return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
|
|
695
941
|
};
|
|
696
|
-
ItemSliding.style =
|
|
942
|
+
ItemSliding.style = {
|
|
943
|
+
ionic: itemSlidingIonicCss(),
|
|
944
|
+
ios: iosItemSlidingNativeCss(),
|
|
945
|
+
md: mdItemSlidingNativeCss()
|
|
946
|
+
};
|
|
697
947
|
|
|
698
948
|
exports.ion_item_option = ItemOption;
|
|
699
949
|
exports.ion_item_options = ItemOptions;
|