@ionic/core 8.8.4-dev.11777393099.1a6ea277 → 8.8.4-dev.11777478428.1c0338ab
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/dist/cjs/ion-item-option_3.cjs.entry.js +94 -56
- package/dist/collection/components/item-option/item-option.ionic.css +4 -0
- package/dist/collection/components/item-sliding/item-sliding.ionic.css +280 -0
- package/dist/collection/components/item-sliding/{item-sliding.css → item-sliding.ios.css} +76 -7
- package/dist/collection/components/item-sliding/item-sliding.js +93 -55
- package/dist/collection/components/item-sliding/item-sliding.md.css +196 -0
- package/dist/docs.json +1 -1
- package/dist/esm/ion-item-option_3.entry.js +94 -56
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-b236b0a7.entry.js +4 -0
- package/hydrate/index.js +94 -56
- package/hydrate/index.mjs +94 -56
- package/package.json +1 -1
- package/dist/ionic/p-7959826e.entry.js +0 -4
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a pixels given value into rem
|
|
3
|
+
*
|
|
4
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
5
|
+
* @param context (optional) - Baseline value
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Convert a font size to a dynamic font size.
|
|
9
|
+
* Fonts that participate in Dynamic Type should use
|
|
10
|
+
* dynamic font sizes.
|
|
11
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
12
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
13
|
+
* convert to a unit other than $baselineUnit.
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* Convert a font size to a dynamic font size but impose
|
|
17
|
+
* a maximum font size.
|
|
18
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
19
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
20
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
21
|
+
* convert to a unit other than $baselineUnit.
|
|
22
|
+
*/
|
|
23
|
+
/**
|
|
24
|
+
* Convert a font size to a dynamic font size but impose
|
|
25
|
+
* a minimum font size.
|
|
26
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
27
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
28
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
29
|
+
* convert to a unit other than $baselineUnit.
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* Convert a font size to a dynamic font size but impose
|
|
33
|
+
* maximum and minimum font sizes.
|
|
34
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
35
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
36
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
37
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
38
|
+
* convert to a unit other than $baselineUnit.
|
|
39
|
+
*/
|
|
40
|
+
/**
|
|
41
|
+
* A heuristic that applies CSS to tablet
|
|
42
|
+
* viewports.
|
|
43
|
+
*
|
|
44
|
+
* Usage:
|
|
45
|
+
* @include tablet-viewport() {
|
|
46
|
+
* :host {
|
|
47
|
+
* background-color: green;
|
|
48
|
+
* }
|
|
49
|
+
* }
|
|
50
|
+
*/
|
|
51
|
+
/**
|
|
52
|
+
* A heuristic that applies CSS to mobile
|
|
53
|
+
* viewports (i.e. phones, not tablets).
|
|
54
|
+
*
|
|
55
|
+
* Usage:
|
|
56
|
+
* @include mobile-viewport() {
|
|
57
|
+
* :host {
|
|
58
|
+
* background-color: blue;
|
|
59
|
+
* }
|
|
60
|
+
* }
|
|
61
|
+
*/
|
|
62
|
+
ion-item-sliding {
|
|
63
|
+
display: block;
|
|
64
|
+
position: relative;
|
|
65
|
+
width: 100%;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
user-select: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
ion-item-sliding .item {
|
|
71
|
+
user-select: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.item-sliding-active-slide.item-sliding-dragging .item {
|
|
75
|
+
transition: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
|
|
79
|
+
transition: transform 250ms ease-out;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.item-sliding-closing ion-item-options {
|
|
83
|
+
pointer-events: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.item-sliding-active-swipe-end .item-options-end .item-option-expandable {
|
|
87
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
88
|
+
padding-left: 100%;
|
|
89
|
+
order: 1;
|
|
90
|
+
transition-duration: 0.6s;
|
|
91
|
+
transition-property: padding-left;
|
|
92
|
+
}
|
|
93
|
+
:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
|
|
94
|
+
order: -1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
|
|
98
|
+
order: -1;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@supports selector(:dir(rtl)) {
|
|
102
|
+
.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl) {
|
|
103
|
+
order: -1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.item-sliding-active-swipe-start .item-options-start .item-option-expandable {
|
|
108
|
+
/* stylelint-disable-next-line property-disallowed-list */
|
|
109
|
+
padding-right: 100%;
|
|
110
|
+
order: -1;
|
|
111
|
+
transition-duration: 0.6s;
|
|
112
|
+
transition-property: padding-right;
|
|
113
|
+
}
|
|
114
|
+
:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
|
|
115
|
+
order: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
|
|
119
|
+
order: 1;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@supports selector(:dir(rtl)) {
|
|
123
|
+
.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
|
|
124
|
+
order: 1;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Convert a pixels given value into rem
|
|
130
|
+
*
|
|
131
|
+
* @param pixels - Value in pixels to be converted (i.e. px)
|
|
132
|
+
* @param context (optional) - Baseline value
|
|
133
|
+
*/
|
|
134
|
+
/**
|
|
135
|
+
* Convert a font size to a dynamic font size.
|
|
136
|
+
* Fonts that participate in Dynamic Type should use
|
|
137
|
+
* dynamic font sizes.
|
|
138
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
139
|
+
* @param unit (optional) - The unit to convert 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 maximum font size.
|
|
145
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
146
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% 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
|
+
* a minimum font size.
|
|
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 unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
156
|
+
* convert to a unit other than $baselineUnit.
|
|
157
|
+
*/
|
|
158
|
+
/**
|
|
159
|
+
* Convert a font size to a dynamic font size but impose
|
|
160
|
+
* maximum and minimum font sizes.
|
|
161
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
162
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
163
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
164
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
165
|
+
* convert to a unit other than $baselineUnit.
|
|
166
|
+
*/
|
|
167
|
+
/**
|
|
168
|
+
* A heuristic that applies CSS to tablet
|
|
169
|
+
* viewports.
|
|
170
|
+
*
|
|
171
|
+
* Usage:
|
|
172
|
+
* @include tablet-viewport() {
|
|
173
|
+
* :host {
|
|
174
|
+
* background-color: green;
|
|
175
|
+
* }
|
|
176
|
+
* }
|
|
177
|
+
*/
|
|
178
|
+
/**
|
|
179
|
+
* A heuristic that applies CSS to mobile
|
|
180
|
+
* viewports (i.e. phones, not tablets).
|
|
181
|
+
*
|
|
182
|
+
* Usage:
|
|
183
|
+
* @include mobile-viewport() {
|
|
184
|
+
* :host {
|
|
185
|
+
* background-color: blue;
|
|
186
|
+
* }
|
|
187
|
+
* }
|
|
188
|
+
*/
|
|
189
|
+
.item-sliding-active-slide .item {
|
|
190
|
+
position: relative;
|
|
191
|
+
transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
|
|
192
|
+
opacity: 1;
|
|
193
|
+
z-index: 2;
|
|
194
|
+
pointer-events: none;
|
|
195
|
+
will-change: transform;
|
|
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)}`;
|
|
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,26 +134,25 @@ 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-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}.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-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 250ms cubic-bezier(0.25, 1, 0.5, 1);transition:-webkit-transform 250ms cubic-bezier(0.25, 1, 0.5, 1);transition:transform 250ms cubic-bezier(0.25, 1, 0.5, 1);transition:transform 250ms cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 250ms 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-ionic-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-ionic-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:2;pointer-events:none;will-change:transform}`;
|
|
138
138
|
|
|
139
|
-
const
|
|
139
|
+
const itemSlidingIosCss = () => `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-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}.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-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}`;
|
|
140
140
|
|
|
141
|
-
const
|
|
141
|
+
const itemSlidingMdCss = () => `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-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}.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-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}`;
|
|
142
142
|
|
|
143
143
|
const SWIPE_MARGIN = 30;
|
|
144
144
|
const ELASTIC_FACTOR = 0.55;
|
|
145
|
+
const IONIC_ELASTIC_FACTOR = 0.15;
|
|
145
146
|
const IONIC_SNAP_OPEN_RATIO = 0.4;
|
|
146
|
-
const IONIC_EXPAND_TRIGGER =
|
|
147
|
-
const IONIC_VELOCITY_THRESHOLD =
|
|
147
|
+
const IONIC_EXPAND_TRIGGER = 40;
|
|
148
|
+
const IONIC_VELOCITY_THRESHOLD = 400;
|
|
148
149
|
const IONIC_ACTION_BASE_WIDTH = 64;
|
|
149
|
-
const
|
|
150
|
-
const
|
|
151
|
-
const IONIC_CONFIRM_EASE_IN = '150ms ease-in';
|
|
152
|
-
const IONIC_CONFIRM_SNAPBACK = '480ms cubic-bezier(0.34, 1.4, 0.64, 1)';
|
|
153
|
-
const IONIC_CONFIRM_PAUSE = 900;
|
|
150
|
+
const IONIC_CONFIRM_PAUSE = 300;
|
|
151
|
+
const FULL_SWIPE_TRANSITION_MS = 250;
|
|
154
152
|
const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
|
|
155
153
|
/** Expandable, non-disabled option (matches item-option expandable class). */
|
|
156
154
|
const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
|
|
155
|
+
const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
|
|
157
156
|
let openSlidingItem;
|
|
158
157
|
const ItemSliding = class {
|
|
159
158
|
constructor(hostRef) {
|
|
@@ -378,7 +377,7 @@ const ItemSliding = class {
|
|
|
378
377
|
if (!this.item) {
|
|
379
378
|
return resolve();
|
|
380
379
|
}
|
|
381
|
-
this.
|
|
380
|
+
this.el.classList.add('item-sliding-full-swipe-transition');
|
|
382
381
|
this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
|
|
383
382
|
const id = setTimeout(resolve, duration);
|
|
384
383
|
signal.addEventListener('abort', () => {
|
|
@@ -419,7 +418,7 @@ const ItemSliding = class {
|
|
|
419
418
|
await this.delay(100, signal);
|
|
420
419
|
// Animate off-screen while maintaining the expanded state
|
|
421
420
|
const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
|
|
422
|
-
await this.animateToPosition(offScreenDistance,
|
|
421
|
+
await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
|
|
423
422
|
// Trigger action
|
|
424
423
|
if (options) {
|
|
425
424
|
options.fireSwipeEvent();
|
|
@@ -427,7 +426,7 @@ const ItemSliding = class {
|
|
|
427
426
|
// Small delay before returning
|
|
428
427
|
await this.delay(300, signal);
|
|
429
428
|
// Return to closed state
|
|
430
|
-
await this.animateToPosition(0,
|
|
429
|
+
await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
|
|
431
430
|
}
|
|
432
431
|
catch (_a) {
|
|
433
432
|
// Animation was aborted (e.g. component disconnected). finally handles cleanup.
|
|
@@ -435,8 +434,8 @@ const ItemSliding = class {
|
|
|
435
434
|
finally {
|
|
436
435
|
this.animationAbortController = undefined;
|
|
437
436
|
// Reset state
|
|
437
|
+
this.el.classList.remove('item-sliding-full-swipe-transition');
|
|
438
438
|
if (this.item) {
|
|
439
|
-
this.item.style.transition = '';
|
|
440
439
|
this.item.style.transform = '';
|
|
441
440
|
}
|
|
442
441
|
this.openAmount = 0;
|
|
@@ -471,27 +470,41 @@ const ItemSliding = class {
|
|
|
471
470
|
getExpandableBaseWidth(direction) {
|
|
472
471
|
return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
|
|
473
472
|
}
|
|
474
|
-
setIonicExpandableWidth(direction, width,
|
|
473
|
+
setIonicExpandableWidth(direction, width, opening) {
|
|
475
474
|
const expandableOption = this.getExpandableOption(direction);
|
|
476
475
|
if (!expandableOption) {
|
|
477
476
|
return;
|
|
478
477
|
}
|
|
479
478
|
const style = expandableOption.style;
|
|
480
|
-
|
|
479
|
+
if (opening) {
|
|
480
|
+
expandableOption.classList.remove('item-sliding-expandable-snapback');
|
|
481
|
+
expandableOption.classList.add('item-sliding-expandable-open');
|
|
482
|
+
}
|
|
483
|
+
else {
|
|
484
|
+
expandableOption.classList.remove('item-sliding-expandable-open');
|
|
485
|
+
expandableOption.classList.add('item-sliding-expandable-snapback');
|
|
486
|
+
}
|
|
481
487
|
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
482
488
|
style.width = `${Math.max(baseWidth, width)}px`;
|
|
483
489
|
}
|
|
484
490
|
resetIonicExpandableOptions() {
|
|
485
491
|
[this.leftOptions, this.rightOptions].forEach((options) => {
|
|
492
|
+
if (!options) {
|
|
493
|
+
return;
|
|
494
|
+
}
|
|
495
|
+
options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
|
|
496
|
+
node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
497
|
+
});
|
|
486
498
|
const expandableOption = this.queryExpandableOption(options);
|
|
487
499
|
if (!expandableOption) {
|
|
488
500
|
return;
|
|
489
501
|
}
|
|
490
|
-
expandableOption.style.transition = '';
|
|
491
502
|
expandableOption.style.width = '';
|
|
503
|
+
expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
|
|
492
504
|
});
|
|
493
505
|
}
|
|
494
506
|
updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
|
|
507
|
+
var _a;
|
|
495
508
|
if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
|
|
496
509
|
return;
|
|
497
510
|
}
|
|
@@ -502,7 +515,8 @@ const ItemSliding = class {
|
|
|
502
515
|
this.resetIonicExpandableOptions();
|
|
503
516
|
return;
|
|
504
517
|
}
|
|
505
|
-
this.
|
|
518
|
+
(_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
519
|
+
this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), false);
|
|
506
520
|
return;
|
|
507
521
|
}
|
|
508
522
|
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
@@ -510,8 +524,16 @@ const ItemSliding = class {
|
|
|
510
524
|
const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
|
|
511
525
|
const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
|
|
512
526
|
const targetWidth = baseWidth + resistedExtraWidth;
|
|
513
|
-
const
|
|
514
|
-
|
|
527
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
528
|
+
if (expandableOption) {
|
|
529
|
+
if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
|
|
530
|
+
expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
531
|
+
}
|
|
532
|
+
else {
|
|
533
|
+
expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
this.setIonicExpandableWidth(direction, targetWidth, true);
|
|
515
537
|
}
|
|
516
538
|
async animateIonicFullSwipe(direction) {
|
|
517
539
|
const abortController = new AbortController();
|
|
@@ -535,19 +557,23 @@ const ItemSliding = class {
|
|
|
535
557
|
const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
|
|
536
558
|
const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
|
|
537
559
|
if (expandableOption) {
|
|
538
|
-
expandableOption.
|
|
560
|
+
expandableOption.classList.remove('item-sliding-expandable-width-back');
|
|
561
|
+
expandableOption.classList.add('item-sliding-expandable-width-in');
|
|
539
562
|
expandableOption.style.width = `${expandableTargetWidth}px`;
|
|
540
563
|
}
|
|
541
|
-
this.
|
|
564
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-back');
|
|
565
|
+
this.el.classList.add('item-sliding-ionic-confirm-item-in');
|
|
542
566
|
this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
|
|
543
567
|
await this.delay(150, signal);
|
|
544
568
|
options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
|
|
545
569
|
await this.delay(IONIC_CONFIRM_PAUSE, signal);
|
|
546
570
|
if (expandableOption) {
|
|
547
|
-
expandableOption.
|
|
571
|
+
expandableOption.classList.remove('item-sliding-expandable-width-in');
|
|
572
|
+
expandableOption.classList.add('item-sliding-expandable-width-back');
|
|
548
573
|
expandableOption.style.width = `${baseWidth}px`;
|
|
549
574
|
}
|
|
550
|
-
this.
|
|
575
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-in');
|
|
576
|
+
this.el.classList.add('item-sliding-ionic-confirm-item-back');
|
|
551
577
|
this.item.style.transform = 'translate3d(0, 0, 0)';
|
|
552
578
|
await this.delay(480, signal);
|
|
553
579
|
}
|
|
@@ -556,8 +582,8 @@ const ItemSliding = class {
|
|
|
556
582
|
}
|
|
557
583
|
finally {
|
|
558
584
|
this.animationAbortController = undefined;
|
|
585
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-in', 'item-sliding-ionic-confirm-item-back');
|
|
559
586
|
if (this.item) {
|
|
560
|
-
this.item.style.transition = '';
|
|
561
587
|
this.item.style.transform = '';
|
|
562
588
|
}
|
|
563
589
|
this.resetIonicExpandableOptions();
|
|
@@ -638,7 +664,12 @@ const ItemSliding = class {
|
|
|
638
664
|
}
|
|
639
665
|
this.initialOpenAmount = this.openAmount;
|
|
640
666
|
if (this.item) {
|
|
641
|
-
this.
|
|
667
|
+
if (this.isIonicTheme()) {
|
|
668
|
+
this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
|
|
669
|
+
}
|
|
670
|
+
else {
|
|
671
|
+
this.el.classList.add('item-sliding-dragging');
|
|
672
|
+
}
|
|
642
673
|
}
|
|
643
674
|
}
|
|
644
675
|
onMove(gesture) {
|
|
@@ -661,18 +692,31 @@ const ItemSliding = class {
|
|
|
661
692
|
printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
|
|
662
693
|
break;
|
|
663
694
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
695
|
+
if (this.isIonicTheme()) {
|
|
696
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
697
|
+
const overDrag = openAmount - this.optsWidthRightSide;
|
|
698
|
+
openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
699
|
+
}
|
|
700
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
701
|
+
const overDrag = openAmount + this.optsWidthLeftSide;
|
|
702
|
+
openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
703
|
+
}
|
|
668
704
|
}
|
|
669
|
-
else
|
|
670
|
-
optsWidth
|
|
671
|
-
|
|
705
|
+
else {
|
|
706
|
+
let optsWidth;
|
|
707
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
708
|
+
optsWidth = this.optsWidthRightSide;
|
|
709
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
710
|
+
}
|
|
711
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
712
|
+
optsWidth = -this.optsWidthLeftSide;
|
|
713
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
714
|
+
}
|
|
672
715
|
}
|
|
673
716
|
this.setOpenAmount(openAmount, false);
|
|
674
717
|
}
|
|
675
718
|
onEnd(gesture) {
|
|
719
|
+
this.el.classList.remove('item-sliding-dragging');
|
|
676
720
|
this.restoreContentScrollAfterSlide();
|
|
677
721
|
if (this.isIonicTheme()) {
|
|
678
722
|
this.onEndIonic(gesture);
|
|
@@ -736,8 +780,10 @@ const ItemSliding = class {
|
|
|
736
780
|
const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
|
|
737
781
|
const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
|
|
738
782
|
const wasRevealed = Math.abs(this.initialOpenAmount) >= optionsWidth;
|
|
739
|
-
|
|
740
|
-
|
|
783
|
+
const closeDirection = activeDirection === 'end' ? velocityX > IONIC_VELOCITY_THRESHOLD : velocityX < -400;
|
|
784
|
+
if (!closeDirection &&
|
|
785
|
+
hasExpandable &&
|
|
786
|
+
(extraWidth >= IONIC_EXPAND_TRIGGER || (extraWidth > 0 && (wasRevealed && Math.abs(velocityX) > IONIC_VELOCITY_THRESHOLD)))) {
|
|
741
787
|
this.animateIonicFullSwipe(activeDirection).catch(() => {
|
|
742
788
|
if (this.gesture) {
|
|
743
789
|
this.gesture.enable(!this.disabled);
|
|
@@ -745,9 +791,6 @@ const ItemSliding = class {
|
|
|
745
791
|
});
|
|
746
792
|
return;
|
|
747
793
|
}
|
|
748
|
-
const closeDirection = activeDirection === 'end'
|
|
749
|
-
? velocityX > IONIC_VELOCITY_THRESHOLD * 1000
|
|
750
|
-
: velocityX < -0.4 * 1000;
|
|
751
794
|
if (closeDirection) {
|
|
752
795
|
this.setOpenAmount(0, true);
|
|
753
796
|
return;
|
|
@@ -801,8 +844,14 @@ const ItemSliding = class {
|
|
|
801
844
|
if (this.isIonicTheme()) {
|
|
802
845
|
this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
|
|
803
846
|
}
|
|
804
|
-
if (isFinal) {
|
|
805
|
-
|
|
847
|
+
if (this.isIonicTheme() && isFinal) {
|
|
848
|
+
const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
|
|
849
|
+
if (closing) {
|
|
850
|
+
this.el.classList.add('item-sliding-transition-snapback');
|
|
851
|
+
}
|
|
852
|
+
else {
|
|
853
|
+
this.el.classList.add('item-sliding-transition-open');
|
|
854
|
+
}
|
|
806
855
|
}
|
|
807
856
|
if (openAmount > 0) {
|
|
808
857
|
const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
|
|
@@ -813,18 +862,7 @@ const ItemSliding = class {
|
|
|
813
862
|
this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
|
|
814
863
|
}
|
|
815
864
|
else {
|
|
816
|
-
/**
|
|
817
|
-
* The sliding options should not be
|
|
818
|
-
* clickable while the item is closing.
|
|
819
|
-
*/
|
|
820
865
|
el.classList.add('item-sliding-closing');
|
|
821
|
-
/**
|
|
822
|
-
* Item sliding cannot be interrupted
|
|
823
|
-
* while closing the item. If it did,
|
|
824
|
-
* it would allow the item to get into an
|
|
825
|
-
* inconsistent state where multiple
|
|
826
|
-
* items are then open at the same time.
|
|
827
|
-
*/
|
|
828
866
|
if (this.gesture) {
|
|
829
867
|
this.gesture.enable(false);
|
|
830
868
|
}
|
|
@@ -859,7 +897,7 @@ const ItemSliding = class {
|
|
|
859
897
|
}
|
|
860
898
|
render() {
|
|
861
899
|
const theme = getIonTheme(this);
|
|
862
|
-
return (h(Host, { key: '
|
|
900
|
+
return (h(Host, { key: '948e61ebcd5fc08bcb6091b62f797da04f931e16', class: {
|
|
863
901
|
[theme]: true,
|
|
864
902
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
865
903
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -893,9 +931,9 @@ const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
|
|
|
893
931
|
return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
|
|
894
932
|
};
|
|
895
933
|
ItemSliding.style = {
|
|
896
|
-
ionic:
|
|
897
|
-
ios:
|
|
898
|
-
md:
|
|
934
|
+
ionic: itemSlidingIonicCss(),
|
|
935
|
+
ios: itemSlidingIosCss(),
|
|
936
|
+
md: itemSlidingMdCss()
|
|
899
937
|
};
|
|
900
938
|
|
|
901
939
|
export { ItemOption as ion_item_option, ItemOptions as ion_item_options, ItemSliding as ion_item_sliding };
|