@ionic/core 8.8.4-dev.11777393099.1a6ea277 → 8.8.4-dev.11777469761.14ede42f
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 -54
- 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 -53
- 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 -54
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-3c173402.entry.js +4 -0
- package/hydrate/index.js +94 -54
- package/hydrate/index.mjs +94 -54
- package/package.json +1 -1
- package/dist/ionic/p-7959826e.entry.js +0 -4
package/hydrate/index.js
CHANGED
|
@@ -21877,7 +21877,7 @@ class ItemGroup {
|
|
|
21877
21877
|
}; }
|
|
21878
21878
|
}
|
|
21879
21879
|
|
|
21880
|
-
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)}`;
|
|
21880
|
+
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)}`;
|
|
21881
21881
|
|
|
21882
21882
|
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)}`;
|
|
21883
21883
|
|
|
@@ -22094,26 +22094,25 @@ const findCheckedOption = (node, tagName) => {
|
|
|
22094
22094
|
return options.find((o) => o.value === el.value);
|
|
22095
22095
|
};
|
|
22096
22096
|
|
|
22097
|
-
const
|
|
22097
|
+
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}`;
|
|
22098
22098
|
|
|
22099
|
-
const
|
|
22099
|
+
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}`;
|
|
22100
22100
|
|
|
22101
|
-
const
|
|
22101
|
+
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}`;
|
|
22102
22102
|
|
|
22103
22103
|
const SWIPE_MARGIN = 30;
|
|
22104
22104
|
const ELASTIC_FACTOR = 0.55;
|
|
22105
|
+
const IONIC_ELASTIC_FACTOR = 0.15;
|
|
22105
22106
|
const IONIC_SNAP_OPEN_RATIO = 0.4;
|
|
22106
22107
|
const IONIC_EXPAND_TRIGGER = 80;
|
|
22107
22108
|
const IONIC_VELOCITY_THRESHOLD = 0.4;
|
|
22108
22109
|
const IONIC_ACTION_BASE_WIDTH = 64;
|
|
22109
|
-
const
|
|
22110
|
-
const
|
|
22111
|
-
const IONIC_CONFIRM_EASE_IN = '150ms ease-in';
|
|
22112
|
-
const IONIC_CONFIRM_SNAPBACK = '480ms cubic-bezier(0.34, 1.4, 0.64, 1)';
|
|
22113
|
-
const IONIC_CONFIRM_PAUSE = 900;
|
|
22110
|
+
const IONIC_CONFIRM_PAUSE = 300;
|
|
22111
|
+
const FULL_SWIPE_TRANSITION_MS = 250;
|
|
22114
22112
|
const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
|
|
22115
22113
|
/** Expandable, non-disabled option (matches item-option expandable class). */
|
|
22116
22114
|
const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
|
|
22115
|
+
const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
|
|
22117
22116
|
let openSlidingItem;
|
|
22118
22117
|
/**
|
|
22119
22118
|
* @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
|
|
@@ -22342,7 +22341,7 @@ class ItemSliding {
|
|
|
22342
22341
|
if (!this.item) {
|
|
22343
22342
|
return resolve();
|
|
22344
22343
|
}
|
|
22345
|
-
this.
|
|
22344
|
+
this.el.classList.add('item-sliding-full-swipe-transition');
|
|
22346
22345
|
this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
|
|
22347
22346
|
const id = setTimeout(resolve, duration);
|
|
22348
22347
|
signal.addEventListener('abort', () => {
|
|
@@ -22383,7 +22382,7 @@ class ItemSliding {
|
|
|
22383
22382
|
await this.delay(100, signal);
|
|
22384
22383
|
// Animate off-screen while maintaining the expanded state
|
|
22385
22384
|
const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
|
|
22386
|
-
await this.animateToPosition(offScreenDistance,
|
|
22385
|
+
await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
|
|
22387
22386
|
// Trigger action
|
|
22388
22387
|
if (options) {
|
|
22389
22388
|
options.fireSwipeEvent();
|
|
@@ -22391,7 +22390,7 @@ class ItemSliding {
|
|
|
22391
22390
|
// Small delay before returning
|
|
22392
22391
|
await this.delay(300, signal);
|
|
22393
22392
|
// Return to closed state
|
|
22394
|
-
await this.animateToPosition(0,
|
|
22393
|
+
await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
|
|
22395
22394
|
}
|
|
22396
22395
|
catch (_a) {
|
|
22397
22396
|
// Animation was aborted (e.g. component disconnected). finally handles cleanup.
|
|
@@ -22399,8 +22398,8 @@ class ItemSliding {
|
|
|
22399
22398
|
finally {
|
|
22400
22399
|
this.animationAbortController = undefined;
|
|
22401
22400
|
// Reset state
|
|
22401
|
+
this.el.classList.remove('item-sliding-full-swipe-transition');
|
|
22402
22402
|
if (this.item) {
|
|
22403
|
-
this.item.style.transition = '';
|
|
22404
22403
|
this.item.style.transform = '';
|
|
22405
22404
|
}
|
|
22406
22405
|
this.openAmount = 0;
|
|
@@ -22435,27 +22434,41 @@ class ItemSliding {
|
|
|
22435
22434
|
getExpandableBaseWidth(direction) {
|
|
22436
22435
|
return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
|
|
22437
22436
|
}
|
|
22438
|
-
setIonicExpandableWidth(direction, width,
|
|
22437
|
+
setIonicExpandableWidth(direction, width, opening) {
|
|
22439
22438
|
const expandableOption = this.getExpandableOption(direction);
|
|
22440
22439
|
if (!expandableOption) {
|
|
22441
22440
|
return;
|
|
22442
22441
|
}
|
|
22443
22442
|
const style = expandableOption.style;
|
|
22444
|
-
|
|
22443
|
+
if (opening) {
|
|
22444
|
+
expandableOption.classList.remove('item-sliding-expandable-snapback');
|
|
22445
|
+
expandableOption.classList.add('item-sliding-expandable-open');
|
|
22446
|
+
}
|
|
22447
|
+
else {
|
|
22448
|
+
expandableOption.classList.remove('item-sliding-expandable-open');
|
|
22449
|
+
expandableOption.classList.add('item-sliding-expandable-snapback');
|
|
22450
|
+
}
|
|
22445
22451
|
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
22446
22452
|
style.width = `${Math.max(baseWidth, width)}px`;
|
|
22447
22453
|
}
|
|
22448
22454
|
resetIonicExpandableOptions() {
|
|
22449
22455
|
[this.leftOptions, this.rightOptions].forEach((options) => {
|
|
22456
|
+
if (!options) {
|
|
22457
|
+
return;
|
|
22458
|
+
}
|
|
22459
|
+
options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
|
|
22460
|
+
node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
22461
|
+
});
|
|
22450
22462
|
const expandableOption = this.queryExpandableOption(options);
|
|
22451
22463
|
if (!expandableOption) {
|
|
22452
22464
|
return;
|
|
22453
22465
|
}
|
|
22454
|
-
expandableOption.style.transition = '';
|
|
22455
22466
|
expandableOption.style.width = '';
|
|
22467
|
+
expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
|
|
22456
22468
|
});
|
|
22457
22469
|
}
|
|
22458
22470
|
updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
|
|
22471
|
+
var _a;
|
|
22459
22472
|
if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
|
|
22460
22473
|
return;
|
|
22461
22474
|
}
|
|
@@ -22466,7 +22479,8 @@ class ItemSliding {
|
|
|
22466
22479
|
this.resetIonicExpandableOptions();
|
|
22467
22480
|
return;
|
|
22468
22481
|
}
|
|
22469
|
-
this.
|
|
22482
|
+
(_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
22483
|
+
this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), false);
|
|
22470
22484
|
return;
|
|
22471
22485
|
}
|
|
22472
22486
|
const baseWidth = this.getExpandableBaseWidth(direction);
|
|
@@ -22474,8 +22488,16 @@ class ItemSliding {
|
|
|
22474
22488
|
const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
|
|
22475
22489
|
const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
|
|
22476
22490
|
const targetWidth = baseWidth + resistedExtraWidth;
|
|
22477
|
-
const
|
|
22478
|
-
|
|
22491
|
+
const expandableOption = this.getExpandableOption(direction);
|
|
22492
|
+
if (expandableOption) {
|
|
22493
|
+
if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
|
|
22494
|
+
expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
22495
|
+
}
|
|
22496
|
+
else {
|
|
22497
|
+
expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
|
|
22498
|
+
}
|
|
22499
|
+
}
|
|
22500
|
+
this.setIonicExpandableWidth(direction, targetWidth, true);
|
|
22479
22501
|
}
|
|
22480
22502
|
async animateIonicFullSwipe(direction) {
|
|
22481
22503
|
const abortController = new AbortController();
|
|
@@ -22499,19 +22521,23 @@ class ItemSliding {
|
|
|
22499
22521
|
const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
|
|
22500
22522
|
const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
|
|
22501
22523
|
if (expandableOption) {
|
|
22502
|
-
expandableOption.
|
|
22524
|
+
expandableOption.classList.remove('item-sliding-expandable-width-back');
|
|
22525
|
+
expandableOption.classList.add('item-sliding-expandable-width-in');
|
|
22503
22526
|
expandableOption.style.width = `${expandableTargetWidth}px`;
|
|
22504
22527
|
}
|
|
22505
|
-
this.
|
|
22528
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-back');
|
|
22529
|
+
this.el.classList.add('item-sliding-ionic-confirm-item-in');
|
|
22506
22530
|
this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
|
|
22507
22531
|
await this.delay(150, signal);
|
|
22508
22532
|
options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
|
|
22509
22533
|
await this.delay(IONIC_CONFIRM_PAUSE, signal);
|
|
22510
22534
|
if (expandableOption) {
|
|
22511
|
-
expandableOption.
|
|
22535
|
+
expandableOption.classList.remove('item-sliding-expandable-width-in');
|
|
22536
|
+
expandableOption.classList.add('item-sliding-expandable-width-back');
|
|
22512
22537
|
expandableOption.style.width = `${baseWidth}px`;
|
|
22513
22538
|
}
|
|
22514
|
-
this.
|
|
22539
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-in');
|
|
22540
|
+
this.el.classList.add('item-sliding-ionic-confirm-item-back');
|
|
22515
22541
|
this.item.style.transform = 'translate3d(0, 0, 0)';
|
|
22516
22542
|
await this.delay(480, signal);
|
|
22517
22543
|
}
|
|
@@ -22520,8 +22546,8 @@ class ItemSliding {
|
|
|
22520
22546
|
}
|
|
22521
22547
|
finally {
|
|
22522
22548
|
this.animationAbortController = undefined;
|
|
22549
|
+
this.el.classList.remove('item-sliding-ionic-confirm-item-in', 'item-sliding-ionic-confirm-item-back');
|
|
22523
22550
|
if (this.item) {
|
|
22524
|
-
this.item.style.transition = '';
|
|
22525
22551
|
this.item.style.transform = '';
|
|
22526
22552
|
}
|
|
22527
22553
|
this.resetIonicExpandableOptions();
|
|
@@ -22602,7 +22628,12 @@ class ItemSliding {
|
|
|
22602
22628
|
}
|
|
22603
22629
|
this.initialOpenAmount = this.openAmount;
|
|
22604
22630
|
if (this.item) {
|
|
22605
|
-
this.
|
|
22631
|
+
if (this.isIonicTheme()) {
|
|
22632
|
+
this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
|
|
22633
|
+
}
|
|
22634
|
+
else {
|
|
22635
|
+
this.el.classList.add('item-sliding-dragging');
|
|
22636
|
+
}
|
|
22606
22637
|
}
|
|
22607
22638
|
}
|
|
22608
22639
|
onMove(gesture) {
|
|
@@ -22625,18 +22656,31 @@ class ItemSliding {
|
|
|
22625
22656
|
printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
|
|
22626
22657
|
break;
|
|
22627
22658
|
}
|
|
22628
|
-
|
|
22629
|
-
|
|
22630
|
-
|
|
22631
|
-
|
|
22659
|
+
if (this.isIonicTheme()) {
|
|
22660
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
22661
|
+
const overDrag = openAmount - this.optsWidthRightSide;
|
|
22662
|
+
openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
22663
|
+
}
|
|
22664
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
22665
|
+
const overDrag = openAmount + this.optsWidthLeftSide;
|
|
22666
|
+
openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
|
|
22667
|
+
}
|
|
22632
22668
|
}
|
|
22633
|
-
else
|
|
22634
|
-
optsWidth
|
|
22635
|
-
|
|
22669
|
+
else {
|
|
22670
|
+
let optsWidth;
|
|
22671
|
+
if (openAmount > this.optsWidthRightSide) {
|
|
22672
|
+
optsWidth = this.optsWidthRightSide;
|
|
22673
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
22674
|
+
}
|
|
22675
|
+
else if (openAmount < -this.optsWidthLeftSide) {
|
|
22676
|
+
optsWidth = -this.optsWidthLeftSide;
|
|
22677
|
+
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
22678
|
+
}
|
|
22636
22679
|
}
|
|
22637
22680
|
this.setOpenAmount(openAmount, false);
|
|
22638
22681
|
}
|
|
22639
22682
|
onEnd(gesture) {
|
|
22683
|
+
this.el.classList.remove('item-sliding-dragging');
|
|
22640
22684
|
this.restoreContentScrollAfterSlide();
|
|
22641
22685
|
if (this.isIonicTheme()) {
|
|
22642
22686
|
this.onEndIonic(gesture);
|
|
@@ -22700,8 +22744,12 @@ class ItemSliding {
|
|
|
22700
22744
|
const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
|
|
22701
22745
|
const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
|
|
22702
22746
|
const wasRevealed = Math.abs(this.initialOpenAmount) >= optionsWidth;
|
|
22703
|
-
|
|
22704
|
-
|
|
22747
|
+
const closeDirection = activeDirection === 'end'
|
|
22748
|
+
? velocityX > IONIC_VELOCITY_THRESHOLD * 1000
|
|
22749
|
+
: velocityX < -0.4 * 1000;
|
|
22750
|
+
if (!closeDirection &&
|
|
22751
|
+
hasExpandable &&
|
|
22752
|
+
(extraWidth >= IONIC_EXPAND_TRIGGER || (extraWidth > 0 && (wasRevealed && velocityX < Math.abs(IONIC_VELOCITY_THRESHOLD * 1000))))) {
|
|
22705
22753
|
this.animateIonicFullSwipe(activeDirection).catch(() => {
|
|
22706
22754
|
if (this.gesture) {
|
|
22707
22755
|
this.gesture.enable(!this.disabled);
|
|
@@ -22709,9 +22757,6 @@ class ItemSliding {
|
|
|
22709
22757
|
});
|
|
22710
22758
|
return;
|
|
22711
22759
|
}
|
|
22712
|
-
const closeDirection = activeDirection === 'end'
|
|
22713
|
-
? velocityX > IONIC_VELOCITY_THRESHOLD * 1000
|
|
22714
|
-
: velocityX < -0.4 * 1000;
|
|
22715
22760
|
if (closeDirection) {
|
|
22716
22761
|
this.setOpenAmount(0, true);
|
|
22717
22762
|
return;
|
|
@@ -22765,8 +22810,14 @@ class ItemSliding {
|
|
|
22765
22810
|
if (this.isIonicTheme()) {
|
|
22766
22811
|
this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
|
|
22767
22812
|
}
|
|
22768
|
-
if (isFinal) {
|
|
22769
|
-
|
|
22813
|
+
if (this.isIonicTheme() && isFinal) {
|
|
22814
|
+
const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
|
|
22815
|
+
if (closing) {
|
|
22816
|
+
this.el.classList.add('item-sliding-transition-snapback');
|
|
22817
|
+
}
|
|
22818
|
+
else {
|
|
22819
|
+
this.el.classList.add('item-sliding-transition-open');
|
|
22820
|
+
}
|
|
22770
22821
|
}
|
|
22771
22822
|
if (openAmount > 0) {
|
|
22772
22823
|
const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
|
|
@@ -22777,18 +22828,7 @@ class ItemSliding {
|
|
|
22777
22828
|
this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
|
|
22778
22829
|
}
|
|
22779
22830
|
else {
|
|
22780
|
-
/**
|
|
22781
|
-
* The sliding options should not be
|
|
22782
|
-
* clickable while the item is closing.
|
|
22783
|
-
*/
|
|
22784
22831
|
el.classList.add('item-sliding-closing');
|
|
22785
|
-
/**
|
|
22786
|
-
* Item sliding cannot be interrupted
|
|
22787
|
-
* while closing the item. If it did,
|
|
22788
|
-
* it would allow the item to get into an
|
|
22789
|
-
* inconsistent state where multiple
|
|
22790
|
-
* items are then open at the same time.
|
|
22791
|
-
*/
|
|
22792
22832
|
if (this.gesture) {
|
|
22793
22833
|
this.gesture.enable(false);
|
|
22794
22834
|
}
|
|
@@ -22823,7 +22863,7 @@ class ItemSliding {
|
|
|
22823
22863
|
}
|
|
22824
22864
|
render() {
|
|
22825
22865
|
const theme = getIonTheme(this);
|
|
22826
|
-
return (hAsync(Host, { key: '
|
|
22866
|
+
return (hAsync(Host, { key: '771a2d8955f36e7b09b33c0e79c057cdbe3e4b8a', class: {
|
|
22827
22867
|
[theme]: true,
|
|
22828
22868
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
22829
22869
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -22839,9 +22879,9 @@ class ItemSliding {
|
|
|
22839
22879
|
}]
|
|
22840
22880
|
}; }
|
|
22841
22881
|
static get style() { return {
|
|
22842
|
-
ionic:
|
|
22843
|
-
ios:
|
|
22844
|
-
md:
|
|
22882
|
+
ionic: itemSlidingIonicCss(),
|
|
22883
|
+
ios: itemSlidingIosCss(),
|
|
22884
|
+
md: itemSlidingMdCss()
|
|
22845
22885
|
}; }
|
|
22846
22886
|
static get cmpMeta() { return {
|
|
22847
22887
|
"$flags$": 32,
|