@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
package/dist/collection/components/item-sliding/{item-sliding.css → item-sliding.native.css}
RENAMED
|
@@ -71,15 +71,6 @@ ion-item-sliding .item {
|
|
|
71
71
|
user-select: none;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.item-sliding-active-slide .item {
|
|
75
|
-
position: relative;
|
|
76
|
-
transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
|
|
77
|
-
opacity: 1;
|
|
78
|
-
z-index: 2;
|
|
79
|
-
pointer-events: none;
|
|
80
|
-
will-change: transform;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
74
|
.item-sliding-closing ion-item-options {
|
|
84
75
|
pointer-events: none;
|
|
85
76
|
}
|
|
@@ -124,4 +115,82 @@ ion-item-sliding .item {
|
|
|
124
115
|
.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
|
|
125
116
|
order: 1;
|
|
126
117
|
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Convert a pixels given value into rem
|
|
122
|
+
*
|
|
123
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
124
|
+
* @param context (optional) - Baseline value
|
|
125
|
+
*/
|
|
126
|
+
/**
|
|
127
|
+
* Convert a font size to a dynamic font size.
|
|
128
|
+
* Fonts that participate in Dynamic Type should use
|
|
129
|
+
* dynamic font sizes.
|
|
130
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
131
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
132
|
+
* convert to a unit other than $baselineUnit.
|
|
133
|
+
*/
|
|
134
|
+
/**
|
|
135
|
+
* Convert a font size to a dynamic font size but impose
|
|
136
|
+
* a maximum font size.
|
|
137
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
138
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
139
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
140
|
+
* convert to a unit other than $baselineUnit.
|
|
141
|
+
*/
|
|
142
|
+
/**
|
|
143
|
+
* Convert a font size to a dynamic font size but impose
|
|
144
|
+
* a minimum font size.
|
|
145
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
146
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
147
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
148
|
+
* convert to a unit other than $baselineUnit.
|
|
149
|
+
*/
|
|
150
|
+
/**
|
|
151
|
+
* Convert a font size to a dynamic font size but impose
|
|
152
|
+
* maximum and minimum font sizes.
|
|
153
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
154
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
155
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
156
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
157
|
+
* convert to a unit other than $baselineUnit.
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* A heuristic that applies CSS to tablet
|
|
161
|
+
* viewports.
|
|
162
|
+
*
|
|
163
|
+
* Usage:
|
|
164
|
+
* @include tablet-viewport() {
|
|
165
|
+
* :host {
|
|
166
|
+
* background-color: green;
|
|
167
|
+
* }
|
|
168
|
+
* }
|
|
169
|
+
*/
|
|
170
|
+
/**
|
|
171
|
+
* A heuristic that applies CSS to mobile
|
|
172
|
+
* viewports (i.e. phones, not tablets).
|
|
173
|
+
*
|
|
174
|
+
* Usage:
|
|
175
|
+
* @include mobile-viewport() {
|
|
176
|
+
* :host {
|
|
177
|
+
* background-color: blue;
|
|
178
|
+
* }
|
|
179
|
+
* }
|
|
180
|
+
*/
|
|
181
|
+
.item-sliding-active-slide .item {
|
|
182
|
+
position: relative;
|
|
183
|
+
transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
|
|
184
|
+
opacity: 1;
|
|
185
|
+
z-index: 2;
|
|
186
|
+
pointer-events: none;
|
|
187
|
+
will-change: transform;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
|
|
191
|
+
transition: transform 250ms ease-out;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.item-sliding-active-slide.item-sliding-dragging .item {
|
|
195
|
+
transition: none;
|
|
127
196
|
}
|
package/dist/docs.json
CHANGED
|
@@ -9,7 +9,7 @@ import { f as findClosestIonContent, d as disableContentScrollY, r as resetConte
|
|
|
9
9
|
import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
|
|
10
10
|
import './focus-visible-vXpMhGrs.js';
|
|
11
11
|
|
|
12
|
-
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-
|
|
12
|
+
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)}`;
|
|
13
13
|
|
|
14
14
|
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)}`;
|
|
15
15
|
|
|
@@ -134,10 +134,26 @@ ItemOptions.style = {
|
|
|
134
134
|
md: itemOptionsMdCss()
|
|
135
135
|
};
|
|
136
136
|
|
|
137
|
-
const
|
|
137
|
+
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}`;
|
|
138
|
+
|
|
139
|
+
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}`;
|
|
140
|
+
|
|
141
|
+
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}`;
|
|
138
142
|
|
|
139
143
|
const SWIPE_MARGIN = 30;
|
|
140
144
|
const ELASTIC_FACTOR = 0.55;
|
|
145
|
+
const IONIC_ELASTIC_FACTOR = 0.15;
|
|
146
|
+
const IONIC_SNAP_OPEN_RATIO = 0.4;
|
|
147
|
+
const IONIC_EXPAND_TRIGGER = 40;
|
|
148
|
+
const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
|
|
149
|
+
const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
|
|
150
|
+
const IONIC_ACTION_BASE_WIDTH = 64;
|
|
151
|
+
const IONIC_CONFIRM_PAUSE = 300;
|
|
152
|
+
const FULL_SWIPE_TRANSITION_MS = 250;
|
|
153
|
+
const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
|
|
154
|
+
/** Expandable, non-disabled option (matches item-option expandable class). */
|
|
155
|
+
const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
|
|
156
|
+
const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
|
|
141
157
|
let openSlidingItem;
|
|
142
158
|
const ItemSliding = class {
|
|
143
159
|
constructor(hostRef) {
|
|
@@ -152,12 +168,17 @@ const ItemSliding = class {
|
|
|
152
168
|
this.optsDirty = true;
|
|
153
169
|
this.contentEl = null;
|
|
154
170
|
this.initialContentScrollY = true;
|
|
171
|
+
this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
|
|
172
|
+
this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
|
|
155
173
|
this.state = 2 /* SlidingState.Disabled */;
|
|
156
174
|
/**
|
|
157
175
|
* If `true`, the user cannot interact with the sliding item.
|
|
158
176
|
*/
|
|
159
177
|
this.disabled = false;
|
|
160
178
|
}
|
|
179
|
+
isIonicTheme() {
|
|
180
|
+
return getIonTheme(this) === 'ionic';
|
|
181
|
+
}
|
|
161
182
|
disabledChanged() {
|
|
162
183
|
if (this.gesture) {
|
|
163
184
|
this.gesture.enable(!this.disabled);
|
|
@@ -357,7 +378,7 @@ const ItemSliding = class {
|
|
|
357
378
|
if (!this.item) {
|
|
358
379
|
return resolve();
|
|
359
380
|
}
|
|
360
|
-
this.
|
|
381
|
+
this.el.classList.add('item-sliding-full-swipe-transition');
|
|
361
382
|
this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
|
|
362
383
|
const id = setTimeout(resolve, duration);
|
|
363
384
|
signal.addEventListener('abort', () => {
|
|
@@ -375,8 +396,8 @@ const ItemSliding = class {
|
|
|
375
396
|
return maxWidth + SWIPE_MARGIN;
|
|
376
397
|
}
|
|
377
398
|
/**
|
|
378
|
-
*
|
|
379
|
-
*
|
|
399
|
+
* Native (ios/md) full swipe: off-screen → fire swipe → return.
|
|
400
|
+
* Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
|
|
380
401
|
*/
|
|
381
402
|
async animateFullSwipe(direction) {
|
|
382
403
|
const abortController = new AbortController();
|
|
@@ -398,7 +419,7 @@ const ItemSliding = class {
|
|
|
398
419
|
await this.delay(100, signal);
|
|
399
420
|
// Animate off-screen while maintaining the expanded state
|
|
400
421
|
const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
|
|
401
|
-
await this.animateToPosition(offScreenDistance,
|
|
422
|
+
await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
|
|
402
423
|
// Trigger action
|
|
403
424
|
if (options) {
|
|
404
425
|
options.fireSwipeEvent();
|
|
@@ -406,7 +427,7 @@ const ItemSliding = class {
|
|
|
406
427
|
// Small delay before returning
|
|
407
428
|
await this.delay(300, signal);
|
|
408
429
|
// Return to closed state
|
|
409
|
-
await this.animateToPosition(0,
|
|
430
|
+
await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
|
|
410
431
|
}
|
|
411
432
|
catch (_a) {
|
|
412
433
|
// Animation was aborted (e.g. component disconnected). finally handles cleanup.
|
|
@@ -414,8 +435,8 @@ const ItemSliding = class {
|
|
|
414
435
|
finally {
|
|
415
436
|
this.animationAbortController = undefined;
|
|
416
437
|
// Reset state
|
|
438
|
+
this.el.classList.remove('item-sliding-full-swipe-transition');
|
|
417
439
|
if (this.item) {
|
|
418
|
-
this.item.style.transition = '';
|
|
419
440
|
this.item.style.transform = '';
|
|
420
441
|
}
|
|
421
442
|
this.openAmount = 0;
|
|
@@ -428,6 +449,160 @@ const ItemSliding = class {
|
|
|
428
449
|
}
|
|
429
450
|
}
|
|
430
451
|
}
|
|
452
|
+
queryExpandableOption(options) {
|
|
453
|
+
if (!options) {
|
|
454
|
+
return undefined;
|
|
455
|
+
}
|
|
456
|
+
const expandableOptions = Array.from(options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR));
|
|
457
|
+
if (expandableOptions.length === 0) {
|
|
458
|
+
return undefined;
|
|
459
|
+
}
|
|
460
|
+
if (expandableOptions.length === 1) {
|
|
461
|
+
return expandableOptions[0];
|
|
462
|
+
}
|
|
463
|
+
const isRTL = document.dir === 'rtl';
|
|
464
|
+
const isEndSide = options.classList.contains('item-options-end');
|
|
465
|
+
// Match native edge behavior for multi-expandable configs
|
|
466
|
+
const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
|
|
467
|
+
return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
|
|
468
|
+
}
|
|
469
|
+
getExpandableOption(direction) {
|
|
470
|
+
return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
|
|
471
|
+
}
|
|
472
|
+
getOpenDirectionFromAmount(openAmount) {
|
|
473
|
+
if (openAmount > 0) {
|
|
474
|
+
return 'end';
|
|
475
|
+
}
|
|
476
|
+
if (openAmount < 0) {
|
|
477
|
+
return 'start';
|
|
478
|
+
}
|
|
479
|
+
return undefined;
|
|
480
|
+
}
|
|
481
|
+
getOptionsWidthForDirection(direction) {
|
|
482
|
+
return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
|
|
483
|
+
}
|
|
484
|
+
getExpandableBaseWidth(direction) {
|
|
485
|
+
return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
|
|
486
|
+
}
|
|
487
|
+
setIonicExpandableWidth(direction, width) {
|
|
488
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
489
|
+
if (!expandableOption) {
|
|
490
|
+
return;
|
|
491
|
+
}
|
|
492
|
+
const style = expandableOption.style;
|
|
493
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
494
|
+
style.width = `${Math.max(baseWidth, width)}px`;
|
|
495
|
+
}
|
|
496
|
+
resetIonicExpandableOptions() {
|
|
497
|
+
[this.leftOptions, this.rightOptions].forEach((options) => {
|
|
498
|
+
if (!options) {
|
|
499
|
+
return;
|
|
500
|
+
}
|
|
501
|
+
options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
|
|
502
|
+
node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
503
|
+
});
|
|
504
|
+
const expandableOption = this.queryExpandableOption(options);
|
|
505
|
+
if (!expandableOption) {
|
|
506
|
+
return;
|
|
507
|
+
}
|
|
508
|
+
expandableOption.style.width = '';
|
|
509
|
+
expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
|
|
510
|
+
});
|
|
511
|
+
}
|
|
512
|
+
updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
|
|
513
|
+
var _a;
|
|
514
|
+
if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
|
|
515
|
+
return;
|
|
516
|
+
}
|
|
517
|
+
const direction = this.getOpenDirectionFromAmount(openAmount);
|
|
518
|
+
if (direction === undefined) {
|
|
519
|
+
const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
|
|
520
|
+
if (previousDirection === undefined) {
|
|
521
|
+
this.resetIonicExpandableOptions();
|
|
522
|
+
return;
|
|
523
|
+
}
|
|
524
|
+
(_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
525
|
+
this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection));
|
|
526
|
+
return;
|
|
527
|
+
}
|
|
528
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
529
|
+
const optionsWidth = this.getOptionsWidthForDirection(direction);
|
|
530
|
+
const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
|
|
531
|
+
const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
|
|
532
|
+
const targetWidth = baseWidth + resistedExtraWidth;
|
|
533
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
534
|
+
if (expandableOption) {
|
|
535
|
+
if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
|
|
536
|
+
expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
537
|
+
}
|
|
538
|
+
else {
|
|
539
|
+
expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
this.setIonicExpandableWidth(direction, targetWidth);
|
|
543
|
+
}
|
|
544
|
+
async animateIonicFullSwipe(direction) {
|
|
545
|
+
const abortController = new AbortController();
|
|
546
|
+
this.animationAbortController = abortController;
|
|
547
|
+
const { signal } = abortController;
|
|
548
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
549
|
+
const options = direction === 'end' ? this.rightOptions : this.leftOptions;
|
|
550
|
+
if (this.gesture) {
|
|
551
|
+
this.gesture.enable(false);
|
|
552
|
+
}
|
|
553
|
+
try {
|
|
554
|
+
this.state =
|
|
555
|
+
direction === 'end'
|
|
556
|
+
? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
|
|
557
|
+
: 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
|
|
558
|
+
if (!this.item) {
|
|
559
|
+
return;
|
|
560
|
+
}
|
|
561
|
+
const itemWidth = this.el.offsetWidth || window.innerWidth;
|
|
562
|
+
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
563
|
+
const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
|
|
564
|
+
const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
|
|
565
|
+
if (expandableOption) {
|
|
566
|
+
expandableOption.classList.remove('item-sliding-expandable-width-back');
|
|
567
|
+
expandableOption.classList.add('item-sliding-expandable-width-in');
|
|
568
|
+
expandableOption.style.width = `${expandableTargetWidth}px`;
|
|
569
|
+
}
|
|
570
|
+
this.el.classList.remove('item-sliding-confirm-item-back');
|
|
571
|
+
this.el.classList.add('item-sliding-confirm-item-in');
|
|
572
|
+
this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
|
|
573
|
+
await this.delay(150, signal);
|
|
574
|
+
options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
|
|
575
|
+
await this.delay(IONIC_CONFIRM_PAUSE, signal);
|
|
576
|
+
if (expandableOption) {
|
|
577
|
+
expandableOption.classList.remove('item-sliding-expandable-width-in');
|
|
578
|
+
expandableOption.classList.add('item-sliding-expandable-width-back');
|
|
579
|
+
expandableOption.style.width = `${baseWidth}px`;
|
|
580
|
+
}
|
|
581
|
+
this.el.classList.remove('item-sliding-confirm-item-in');
|
|
582
|
+
this.el.classList.add('item-sliding-confirm-item-back');
|
|
583
|
+
this.item.style.transform = 'translate3d(0, 0, 0)';
|
|
584
|
+
await this.delay(500, signal);
|
|
585
|
+
}
|
|
586
|
+
catch (_a) {
|
|
587
|
+
// Animation was aborted. finally handles cleanup.
|
|
588
|
+
}
|
|
589
|
+
finally {
|
|
590
|
+
this.animationAbortController = undefined;
|
|
591
|
+
this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
|
|
592
|
+
if (this.item) {
|
|
593
|
+
this.item.style.transform = '';
|
|
594
|
+
}
|
|
595
|
+
this.resetIonicExpandableOptions();
|
|
596
|
+
this.openAmount = 0;
|
|
597
|
+
this.state = 2 /* SlidingState.Disabled */;
|
|
598
|
+
if (openSlidingItem === this.el) {
|
|
599
|
+
openSlidingItem = undefined;
|
|
600
|
+
}
|
|
601
|
+
if (this.gesture) {
|
|
602
|
+
this.gesture.enable(!this.disabled);
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
}
|
|
431
606
|
async updateOptions() {
|
|
432
607
|
var _a;
|
|
433
608
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
@@ -495,7 +670,12 @@ const ItemSliding = class {
|
|
|
495
670
|
}
|
|
496
671
|
this.initialOpenAmount = this.openAmount;
|
|
497
672
|
if (this.item) {
|
|
498
|
-
this.
|
|
673
|
+
if (this.isIonicTheme()) {
|
|
674
|
+
this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
|
|
675
|
+
}
|
|
676
|
+
else {
|
|
677
|
+
this.el.classList.add('item-sliding-dragging');
|
|
678
|
+
}
|
|
499
679
|
}
|
|
500
680
|
}
|
|
501
681
|
onMove(gesture) {
|
|
@@ -518,22 +698,46 @@ const ItemSliding = class {
|
|
|
518
698
|
printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
|
|
519
699
|
break;
|
|
520
700
|
}
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
701
|
+
if (this.isIonicTheme()) {
|
|
702
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
703
|
+
const overDrag = openAmount - this.optsWidthRightSide;
|
|
704
|
+
openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
705
|
+
}
|
|
706
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
707
|
+
const overDrag = openAmount + this.optsWidthLeftSide;
|
|
708
|
+
openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
709
|
+
}
|
|
525
710
|
}
|
|
526
|
-
else
|
|
527
|
-
optsWidth
|
|
528
|
-
|
|
711
|
+
else {
|
|
712
|
+
let optsWidth;
|
|
713
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
714
|
+
optsWidth = this.optsWidthRightSide;
|
|
715
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
716
|
+
}
|
|
717
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
718
|
+
optsWidth = -this.optsWidthLeftSide;
|
|
719
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
720
|
+
}
|
|
529
721
|
}
|
|
530
722
|
this.setOpenAmount(openAmount, false);
|
|
531
723
|
}
|
|
532
724
|
onEnd(gesture) {
|
|
725
|
+
this.el.classList.remove('item-sliding-dragging');
|
|
726
|
+
this.restoreContentScrollAfterSlide();
|
|
727
|
+
if (this.isIonicTheme()) {
|
|
728
|
+
this.onEndIonic(gesture);
|
|
729
|
+
}
|
|
730
|
+
else {
|
|
731
|
+
this.onEndNative(gesture);
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
restoreContentScrollAfterSlide() {
|
|
533
735
|
const { contentEl, initialContentScrollY } = this;
|
|
534
736
|
if (contentEl) {
|
|
535
737
|
resetContentScrollY(contentEl, initialContentScrollY);
|
|
536
738
|
}
|
|
739
|
+
}
|
|
740
|
+
onEndNative(gesture) {
|
|
537
741
|
// Check for full swipe conditions with expandable options
|
|
538
742
|
const rawSwipeDistance = Math.abs(gesture.deltaX);
|
|
539
743
|
const direction = gesture.deltaX < 0 ? 'end' : 'start';
|
|
@@ -570,17 +774,64 @@ const ItemSliding = class {
|
|
|
570
774
|
this.leftOptions.fireSwipeEvent();
|
|
571
775
|
}
|
|
572
776
|
}
|
|
777
|
+
onEndIonic(gesture) {
|
|
778
|
+
const velocity = gesture.velocityX;
|
|
779
|
+
const velocityX = velocity * 1000;
|
|
780
|
+
const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
|
|
781
|
+
if (activeDirection === undefined) {
|
|
782
|
+
this.setOpenAmount(0, true);
|
|
783
|
+
return;
|
|
784
|
+
}
|
|
785
|
+
const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
|
|
786
|
+
const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
|
|
787
|
+
const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
|
|
788
|
+
const closeDirection = activeDirection === 'end'
|
|
789
|
+
? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
|
|
790
|
+
: velocityX < -400;
|
|
791
|
+
if (closeDirection) {
|
|
792
|
+
this.setOpenAmount(0, true);
|
|
793
|
+
return;
|
|
794
|
+
}
|
|
795
|
+
if (hasExpandable &&
|
|
796
|
+
(extraWidth >= IONIC_EXPAND_TRIGGER ||
|
|
797
|
+
(extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))) {
|
|
798
|
+
this.animateIonicFullSwipe(activeDirection).catch(() => {
|
|
799
|
+
if (this.gesture) {
|
|
800
|
+
this.gesture.enable(!this.disabled);
|
|
801
|
+
}
|
|
802
|
+
});
|
|
803
|
+
return;
|
|
804
|
+
}
|
|
805
|
+
const flickOpen = activeDirection === 'end'
|
|
806
|
+
? velocityX < -200
|
|
807
|
+
: velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
|
|
808
|
+
const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
|
|
809
|
+
const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
|
|
810
|
+
const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
|
|
811
|
+
const restingPoint = shouldSnapOpen ? fullOpen : 0;
|
|
812
|
+
this.setOpenAmount(restingPoint, true);
|
|
813
|
+
}
|
|
573
814
|
calculateOptsWidth() {
|
|
574
815
|
this.optsWidthRightSide = 0;
|
|
575
816
|
if (this.rightOptions) {
|
|
576
817
|
this.rightOptions.style.display = 'flex';
|
|
577
818
|
this.optsWidthRightSide = this.rightOptions.offsetWidth;
|
|
819
|
+
const rightExpandable = this.queryExpandableOption(this.rightOptions);
|
|
820
|
+
if (rightExpandable) {
|
|
821
|
+
rightExpandable.style.width = '';
|
|
822
|
+
this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
|
|
823
|
+
}
|
|
578
824
|
this.rightOptions.style.display = '';
|
|
579
825
|
}
|
|
580
826
|
this.optsWidthLeftSide = 0;
|
|
581
827
|
if (this.leftOptions) {
|
|
582
828
|
this.leftOptions.style.display = 'flex';
|
|
583
829
|
this.optsWidthLeftSide = this.leftOptions.offsetWidth;
|
|
830
|
+
const leftExpandable = this.queryExpandableOption(this.leftOptions);
|
|
831
|
+
if (leftExpandable) {
|
|
832
|
+
leftExpandable.style.width = '';
|
|
833
|
+
this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
|
|
834
|
+
}
|
|
584
835
|
this.leftOptions.style.display = '';
|
|
585
836
|
}
|
|
586
837
|
this.optsDirty = false;
|
|
@@ -595,35 +846,30 @@ const ItemSliding = class {
|
|
|
595
846
|
}
|
|
596
847
|
const { el } = this;
|
|
597
848
|
const style = this.item.style;
|
|
849
|
+
const previousOpenAmount = this.openAmount;
|
|
598
850
|
this.openAmount = openAmount;
|
|
599
|
-
if (
|
|
600
|
-
|
|
851
|
+
if (this.isIonicTheme()) {
|
|
852
|
+
this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
|
|
853
|
+
}
|
|
854
|
+
if (this.isIonicTheme() && isFinal) {
|
|
855
|
+
const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
|
|
856
|
+
if (closing) {
|
|
857
|
+
this.el.classList.add('item-sliding-transition-snapback');
|
|
858
|
+
}
|
|
859
|
+
else {
|
|
860
|
+
this.el.classList.add('item-sliding-transition-open');
|
|
861
|
+
}
|
|
601
862
|
}
|
|
602
863
|
if (openAmount > 0) {
|
|
603
|
-
this.
|
|
604
|
-
|
|
605
|
-
? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
|
|
606
|
-
: 8 /* SlidingState.End */;
|
|
864
|
+
const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
|
|
865
|
+
this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
|
|
607
866
|
}
|
|
608
867
|
else if (openAmount < 0) {
|
|
609
|
-
this.
|
|
610
|
-
|
|
611
|
-
? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
|
|
612
|
-
: 16 /* SlidingState.Start */;
|
|
868
|
+
const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
|
|
869
|
+
this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
|
|
613
870
|
}
|
|
614
871
|
else {
|
|
615
|
-
/**
|
|
616
|
-
* The sliding options should not be
|
|
617
|
-
* clickable while the item is closing.
|
|
618
|
-
*/
|
|
619
872
|
el.classList.add('item-sliding-closing');
|
|
620
|
-
/**
|
|
621
|
-
* Item sliding cannot be interrupted
|
|
622
|
-
* while closing the item. If it did,
|
|
623
|
-
* it would allow the item to get into an
|
|
624
|
-
* inconsistent state where multiple
|
|
625
|
-
* items are then open at the same time.
|
|
626
|
-
*/
|
|
627
873
|
if (this.gesture) {
|
|
628
874
|
this.gesture.enable(false);
|
|
629
875
|
}
|
|
@@ -658,7 +904,7 @@ const ItemSliding = class {
|
|
|
658
904
|
}
|
|
659
905
|
render() {
|
|
660
906
|
const theme = getIonTheme(this);
|
|
661
|
-
return (h(Host, { key: '
|
|
907
|
+
return (h(Host, { key: 'ca0730d5ee00f245b6a139d9fb53fcc8c529a8c6', class: {
|
|
662
908
|
[theme]: true,
|
|
663
909
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
664
910
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -691,6 +937,10 @@ const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
|
|
|
691
937
|
// The resulting expression was generated by resolving the K-map (Karnaugh map):
|
|
692
938
|
return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
|
|
693
939
|
};
|
|
694
|
-
ItemSliding.style =
|
|
940
|
+
ItemSliding.style = {
|
|
941
|
+
ionic: itemSlidingIonicCss(),
|
|
942
|
+
ios: iosItemSlidingNativeCss(),
|
|
943
|
+
md: mdItemSlidingNativeCss()
|
|
944
|
+
};
|
|
695
945
|
|
|
696
946
|
export { ItemOption as ion_item_option, ItemOptions as ion_item_options, ItemSliding as ion_item_sliding };
|