2021-01-15 15:31:43 +01:00
( window [ "webpackJsonp" ] = window [ "webpackJsonp" ] || [ ] ) . push ( [ [ 16 ] , {
/***/ "./node_modules/@ionic/core/dist/esm/ion-item-option_3.entry.js" :
/*!**********************************************************************!*\
!*** ./node_modules/@ionic/core/dist/esm/ion-item-option_3.entry.js ***!
\**********************************************************************/
/*! exports provided: ion_item_option, ion_item_options, ion_item_sliding */
/***/ ( function ( module , _ _webpack _exports _ _ , _ _webpack _require _ _ ) {
"use strict" ;
_ _webpack _require _ _ . r ( _ _webpack _exports _ _ ) ;
/* harmony export (binding) */ _ _webpack _require _ _ . d ( _ _webpack _exports _ _ , "ion_item_option" , function ( ) { return ItemOption ; } ) ;
/* harmony export (binding) */ _ _webpack _require _ _ . d ( _ _webpack _exports _ _ , "ion_item_options" , function ( ) { return ItemOptions ; } ) ;
/* harmony export (binding) */ _ _webpack _require _ _ . d ( _ _webpack _exports _ _ , "ion_item_sliding" , function ( ) { return ItemSliding ; } ) ;
2021-02-24 10:42:01 +01:00
/* harmony import */ var _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ = _ _webpack _require _ _ ( /*! ./index-e806d1f6.js */ "./node_modules/@ionic/core/dist/esm/index-e806d1f6.js" ) ;
/* harmony import */ var _ionic _global _9d5c8ee3 _js _ _WEBPACK _IMPORTED _MODULE _1 _ _ = _ _webpack _require _ _ ( /*! ./ionic-global-9d5c8ee3.js */ "./node_modules/@ionic/core/dist/esm/ionic-global-9d5c8ee3.js" ) ;
/* harmony import */ var _helpers _90f46169 _js _ _WEBPACK _IMPORTED _MODULE _2 _ _ = _ _webpack _require _ _ ( /*! ./helpers-90f46169.js */ "./node_modules/@ionic/core/dist/esm/helpers-90f46169.js" ) ;
/* harmony import */ var _theme _ff3fc52f _js _ _WEBPACK _IMPORTED _MODULE _3 _ _ = _ _webpack _require _ _ ( /*! ./theme-ff3fc52f.js */ "./node_modules/@ionic/core/dist/esm/theme-ff3fc52f.js" ) ;
2021-01-15 15:31:43 +01:00
const itemOptionIosCss = ":host{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff);background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit)}:host(.in-list.item-options-end:last-child){padding-right:calc(.7em + var(--ion-safe-area-right))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-list.item-options-end:last-child){padding-right:unset;-webkit-padding-end:calc(.7em + var(--ion-safe-area-right));padding-inline-end:calc(.7em + var(--ion-safe-area-right))}}:host(.in-list.item-options-start:first-child){padding-left:calc(.7em + var(--ion-safe-area-left))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-list.item-options-start:first-child){padding-left:unset;-webkit-padding-start:calc(.7em + var(--ion-safe-area-left));padding-inline-start:calc(.7em + var(--ion-safe-area-left))}}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0.7em;padding-right:0.7em;padding-top:0;padding-bottom:0;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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em}}.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}::slotted([slot=start]){margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}::slotted([slot=end]){margin-left:5px;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0}}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:10px;margin-right:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=icon-only]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}: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;-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(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;opacity:0.5;pointer-events:none}:host{font-size:16px}:host(.ion-activated){background:var(--ion-color-primary-shade, #3171e0)}:host(.ion-color.ion-activated){background:var(--ion-colo
const itemOptionMdCss = " : host { -- background : var ( -- ion - color - primary , # 3880 ff ) ; -- color : var ( -- ion - color - primary - contrast , # fff ) ; background : var ( -- background ) ; color : var ( -- color ) ; font - family : var ( -- ion - font - family , inherit ) } : host ( . in - list . item - options - end : last - child ) { padding - right : calc ( . 7 em + var ( -- ion - safe - area - right ) ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { : host ( . in - list . item - options - end : last - child ) { padding - right : unset ; - webkit - padding - end : calc ( . 7 em + var ( -- ion - safe - area - right ) ) ; padding - inline - end : calc ( . 7 em + var ( -- ion - safe - area - right ) ) } } : host ( . in - list . item - options - start : first - child ) { padding - left : calc ( . 7 em + var ( -- ion - safe - area - left ) ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { : host ( . in - list . item - options - start : first - child ) { padding - left : unset ; - webkit - padding - start : calc ( . 7 em + var ( -- ion - safe - area - left ) ) ; padding - inline - start : calc ( . 7 em + var ( -- ion - safe - area - left ) ) } } : host ( . ion - color ) { background : var ( -- ion - color - base ) ; color : var ( -- ion - color - contrast ) } . button - native { font - family : inherit ; font - size : inherit ; font - style : inherit ; font - weight : inherit ; letter - spacing : inherit ; text - decoration : inherit ; text - indent : inherit ; text - overflow : inherit ; text - transform : inherit ; text - align : inherit ; white - space : inherit ; color : inherit ; padding - left : 0.7 em ; padding - right : 0.7 em ; padding - top : 0 ; padding - bottom : 0 ; 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 } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { . button - native { padding - left : unset ; padding - right : unset ; - webkit - padding - start : 0.7 em ; padding - inline - start : 0.7 em ; - webkit - padding - end : 0.7 em ; padding - inline - end : 0.7 em } } . 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 } : : slotted ( [ slot = start ] ) { margin - left : 0 ; margin - right : 5 px ; margin - top : 0 ; margin - bottom : 0 } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { : : slotted ( [ slot = start ] ) { margin - left : unset ; margin - right : unset ; - webkit - margin - start : 0 ; margin - inline - start : 0 ; - webkit - margin - end : 5 px ; margin - inline - end : 5 px } } : : slotted ( [ slot = end ] ) { margin - left : 5 px ; margin - right : 0 ; margin - top : 0 ; margin - bottom : 0 } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { : : slotted ( [ slot = end ] ) { margin - left : unset ; margin - right : unset ; - webkit - margin - start : 5 px ; margin - inline - start : 5 px ; - webkit - margin - end : 0 ; margin - inline - end : 0 } } : : slotted ( [ slot = icon - only ] ) { padding - left : 0 ; padding - right : 0 ; padding - top : 0 ; padding - bottom : 0 ; margin - left : 10 px ; margin - right : 10 px ; margin - top : 0 ; margin - bottom : 0 ; min - width : 0.9 em ; font - size : 1.8 em } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { : : slotted ( [ slot = icon - only ] ) { margin - left : unset ; margin - right : unset ; - webkit - margin - start : 10 px ; margin - inline - start : 10 px ; - webkit - margin - end : 10 px ; margin - inline - end : 10 px } } : 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 ; - 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 ( . item - option - disabled ) { pointer - events : none } : host ( . item - option - disabled ) . button - native { cursor : default ; opacity : 0.5 ; pointer - events : none } : host { font - size : 14 px ; font - weight : 500 ; text - transform : uppercase } ";
const ItemOption = class {
2021-02-24 10:42:01 +01:00
constructor(hostRef) {
Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" r "])(this, hostRef);
/**
* If `true`, the user cannot interact with the item option.
*/
this.disabled = false;
/**
* If `true`, the option will expand to take up the available width and cover any other options.
*/
this.expandable = false;
/**
* The type of the button.
*/
this.type = 'button';
this.onClick = (ev) => {
const el = ev.target.closest('ion-item-option');
if (el) {
ev.preventDefault();
}
};
}
render() {
const { disabled, expandable, href } = this;
const TagType = href === undefined ? 'button' : 'a';
const mode = Object(_ionic_global_9d5c8ee3_js__WEBPACK_IMPORTED_MODULE_1__[" b "])(this);
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
target: this.target
};
return (Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" H "], { onClick: this.onClick, class: Object(_theme_ff3fc52f_js__WEBPACK_IMPORTED_MODULE_3__[" c "])(this.color, {
[mode]: true,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,
}) }, Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(TagType, Object.assign({}, attrs, { class: " button - native ", part: " native ", disabled: disabled }), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" span ", { class: " button - inner " }, Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", { name: " top " }), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" div ", { class: " horizontal - wrapper " }, Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", { name: " start " }), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", { name: " icon - only " }), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", null), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", { name: " end " })), Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" slot ", { name: " bottom " })), mode === 'md' && Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(" ion - ripple - effect ", null))));
}
get el() { return Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" i "])(this); }
2021-01-15 15:31:43 +01:00
};
ItemOption.style = {
2021-02-24 10:42:01 +01:00
ios: itemOptionIosCss,
md: itemOptionMdCss
2021-01-15 15:31:43 +01:00
};
const itemOptionsIosCss = " ion - item - options { top : 0 ; right : 0 ; - ms - flex - pack : end ; justify - content : flex - end ; display : none ; position : absolute ; height : 100 % ; font - size : 14 px ; - webkit - user - select : none ; - moz - user - select : none ; - ms - user - select : none ; user - select : none ; z - index : 1 } [ dir = rtl ] ion - item - options , : host - context ( [ dir = rtl ] ) ion - item - options { - ms - flex - pack : start ; justify - content : flex - start } [ dir = rtl ] ion - item - options : not ( . item - options - end ) , : host - context ( [ dir = rtl ] ) ion - item - options : not ( . item - options - end ) { right : auto ; left : 0 ; - ms - flex - pack : end ; justify - content : flex - end } . item - options - start { right : auto ; left : 0 ; - ms - flex - pack : start ; justify - content : flex - start } [ dir = rtl ] . item - options - start , : host - context ( [ dir = rtl ] ) . item - options - start { - ms - flex - pack : end ; justify - content : flex - end } . item - options - start ion - item - option : first - child { padding - right : var ( -- ion - safe - area - left ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { . item - options - start ion - item - option : first - child { padding - right : unset ; - webkit - padding - end : var ( -- ion - safe - area - left ) ; padding - inline - end : var ( -- ion - safe - area - left ) } } . item - options - end ion - item - option : last - child { padding - right : var ( -- ion - safe - area - right ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { . item - options - end ion - item - option : last - child { padding - right : unset ; - webkit - padding - end : var ( -- ion - safe - area - right ) ; padding - inline - end : var ( -- ion - safe - area - right ) } } [ dir = rtl ] . item - sliding - active - slide . item - sliding - active - options - start ion - item - options : not ( . item - options - end ) , : host - context ( [ dir = rtl ] ) . item - sliding - active - slide . item - sliding - active - options - start ion - item - options : not ( . item - options - end ) { width : 100 % ; visibility : visible } . item - sliding - active - slide ion - item - options { display : - ms - flexbox ; display : flex ; visibility : hidden } . item - sliding - active - slide . item - sliding - active - options - start . item - options - start , . item - sliding - active - slide . item - sliding - active - options - end ion - item - options : not ( . item - options - start ) { width : 100 % ; visibility : visible } . item - options - ios { border - bottom - width : 0 ; border - bottom - style : solid ; border - bottom - color : var ( -- ion - item - border - color , var ( -- ion - border - color , var ( -- ion - color - step - 250 , # c8c7cc ) ) ) } . item - options - ios . item - options - end { border - bottom - width : 0.55 px } . list - ios - lines - none . item - options - ios { border - bottom - width : 0 } . list - ios - lines - full . item - options - ios , . list - ios - lines - inset . item - options - ios . item - options - end { border - bottom - width : 0.55 px } ";
const itemOptionsMdCss = " ion - item - options { top : 0 ; right : 0 ; - ms - flex - pack : end ; justify - content : flex - end ; display : none ; position : absolute ; height : 100 % ; font - size : 14 px ; - webkit - user - select : none ; - moz - user - select : none ; - ms - user - select : none ; user - select : none ; z - index : 1 } [ dir = rtl ] ion - item - options , : host - context ( [ dir = rtl ] ) ion - item - options { - ms - flex - pack : start ; justify - content : flex - start } [ dir = rtl ] ion - item - options : not ( . item - options - end ) , : host - context ( [ dir = rtl ] ) ion - item - options : not ( . item - options - end ) { right : auto ; left : 0 ; - ms - flex - pack : end ; justify - content : flex - end } . item - options - start { right : auto ; left : 0 ; - ms - flex - pack : start ; justify - content : flex - start } [ dir = rtl ] . item - options - start , : host - context ( [ dir = rtl ] ) . item - options - start { - ms - flex - pack : end ; justify - content : flex - end } . item - options - start ion - item - option : first - child { padding - right : var ( -- ion - safe - area - left ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { . item - options - start ion - item - option : first - child { padding - right : unset ; - webkit - padding - end : var ( -- ion - safe - area - left ) ; padding - inline - end : var ( -- ion - safe - area - left ) } } . item - options - end ion - item - option : last - child { padding - right : var ( -- ion - safe - area - right ) } @ supports ( ( - webkit - margin - start : 0 ) or ( margin - inline - start : 0 ) ) or ( - webkit - margin - start : 0 ) { . item - options - end ion - item - option : last - child { padding - right : unset ; - webkit - padding - end : var ( -- ion - safe - area - right ) ; padding - inline - end : var ( -- ion - safe - area - right ) } } [ dir = rtl ] . item - sliding - active - slide . item - sliding - active - options - start ion - item - options : not ( . item - options - end ) , : host - context ( [ dir = rtl ] ) . item - sliding - active - slide . item - sliding - active - options - start ion - item - options : not ( . item - options - end ) { width : 100 % ; visibility : visible } . item - sliding - active - slide ion - item - options { display : - ms - flexbox ; display : flex ; visibility : hidden } . item - sliding - active - slide . item - sliding - active - options - start . item - options - start , . item - sliding - active - slide . item - sliding - active - options - end ion - item - options : not ( . item - options - start ) { width : 100 % ; visibility : visible } . item - options - md { border - bottom - width : 0 ; border - bottom - style : solid ; border - bottom - color : var ( -- ion - item - border - color , var ( -- ion - border - color , var ( -- ion - color - step - 150 , rgba ( 0 , 0 , 0 , 0.13 ) ) ) ) } . list - md - lines - none . item - options - md { border - bottom - width : 0 } . list - md - lines - full . item - options - md , . list - md - lines - inset . item - options - md . item - options - end { border - bottom - width : 1 px } ";
const ItemOptions = class {
2021-02-24 10:42:01 +01:00
constructor(hostRef) {
Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" r "])(this, hostRef);
this.ionSwipe = Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" e "])(this, " ionSwipe ", 7);
/**
* The side the option button should be on. Possible values: `" start "` and `" end "`. If you have multiple `ion-item-options`, a side must be provided for each.
*
*/
this.side = 'end';
}
/** @internal */
async fireSwipeEvent() {
this.ionSwipe.emit({
side: this.side
});
}
render() {
const mode = Object(_ionic_global_9d5c8ee3_js__WEBPACK_IMPORTED_MODULE_1__[" b "])(this);
const isEnd = Object(_helpers_90f46169_js__WEBPACK_IMPORTED_MODULE_2__[" l "])(this.side);
return (Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" H "], { class: {
[mode]: true,
// Used internally for styling
[`item-options-${mode}`]: true,
'item-options-start': !isEnd,
'item-options-end': isEnd
} }));
}
get el() { return Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" i "])(this); }
2021-01-15 15:31:43 +01:00
};
ItemOptions.style = {
2021-02-24 10:42:01 +01:00
ios: itemOptionsIosCss,
md: itemOptionsMdCss
2021-01-15 15:31:43 +01:00
};
const itemSlidingCss = " 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 { position : relative ; - webkit - transition : - webkit - transform 500 ms cubic - bezier ( 0.36 , 0.66 , 0.04 , 1 ) ; transition : - webkit - transform 500 ms cubic - bezier ( 0.36 , 0.66 , 0.04 , 1 ) ; transition : transform 500 ms cubic - bezier ( 0.36 , 0.66 , 0.04 , 1 ) ; transition : transform 500 ms cubic - bezier ( 0.36 , 0.66 , 0.04 , 1 ) , - webkit - transform 500 ms cubic - bezier ( 0.36 , 0.66 , 0.04 , 1 ) ; opacity : 1 ; z - index : 2 ; pointer - events : none ; will - change : transform } . item - sliding - active - swipe - end . item - options - end . item - option - expandable { padding - left : 100 % ; - ms - flex - order : 1 ; order : 1 ; - webkit - transition - duration : 0.6 s ; transition - duration : 0.6 s ; - webkit - transition - property : padding - left ; transition - property : padding - left } [ dir = rtl ] . item - sliding - active - swipe - end . item - options - end . item - option - expandable , : host - context ( [ dir = rtl ] ) . item - sliding - active - swipe - end . item - options - end . item - option - expandable { - 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.6 s ; transition - duration : 0.6 s ; - webkit - transition - property : padding - right ; transition - property : padding - right } [ dir = rtl ] . item - sliding - active - swipe - start . item - options - start . item - option - expandable , : host - context ( [ dir = rtl ] ) . item - sliding - active - swipe - start . item - options - start . item - option - expandable { - ms - flex - order : 1 ; order : 1 } ";
const SWIPE_MARGIN = 30;
const ELASTIC_FACTOR = 0.55;
let openSlidingItem;
const ItemSliding = class {
2021-02-24 10:42:01 +01:00
constructor(hostRef) {
Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" r "])(this, hostRef);
this.ionDrag = Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" e "])(this, " ionDrag ", 7);
this.item = null;
this.openAmount = 0;
this.initialOpenAmount = 0;
this.optsWidthRightSide = 0;
this.optsWidthLeftSide = 0;
this.sides = 0 /* None */;
this.optsDirty = true;
this.state = 2 /* Disabled */;
2021-01-15 15:31:43 +01:00
/**
2021-02-24 10:42:01 +01:00
* If `true`, the user cannot interact with the sliding item.
2021-01-15 15:31:43 +01:00
*/
2021-02-24 10:42:01 +01:00
this.disabled = false;
}
disabledChanged() {
if (this.gesture) {
this.gesture.enable(!this.disabled);
2021-01-15 15:31:43 +01:00
}
2021-02-24 10:42:01 +01:00
}
async connectedCallback() {
this.item = this.el.querySelector('ion-item');
await this.updateOptions();
this.gesture = (await Promise.resolve(/*! import() */).then(__webpack_require__.bind(null, /*! ./index-f49d994d.js */ " . / node _modules / @ ionic / core / dist / esm / index - f49d994d . js "))).createGesture({
el: this.el,
gestureName: 'item-swipe',
gesturePriority: 100,
threshold: 5,
canStart: ev => this.canStart(ev),
onStart: () => this.onStart(),
onMove: ev => this.onMove(ev),
onEnd: ev => this.onEnd(ev),
});
this.disabledChanged();
}
disconnectedCallback() {
if (this.gesture) {
this.gesture.destroy();
this.gesture = undefined;
2021-01-15 15:31:43 +01:00
}
2021-02-24 10:42:01 +01:00
this.item = null;
this.leftOptions = this.rightOptions = undefined;
if (openSlidingItem === this.el) {
openSlidingItem = undefined;
}
}
/**
* Get the amount the item is open in pixels.
*/
getOpenAmount() {
return Promise.resolve(this.openAmount);
}
/**
* Get the ratio of the open amount of the item compared to the width of the options.
* If the number returned is positive, then the options on the right side are open.
* If the number returned is negative, then the options on the left side are open.
* If the absolute value of the number is greater than 1, the item is open more than
* the width of the options.
*/
getSlidingRatio() {
return Promise.resolve(this.getSlidingRatioSync());
}
/**
* Open the sliding item.
*
* @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
*/
async open(side) {
if (this.item === null) {
return;
}
const optionsToOpen = this.getOptions(side);
if (!optionsToOpen) {
return;
2021-01-15 15:31:43 +01:00
}
/**
2021-02-24 10:42:01 +01:00
* If side is not set, we need to infer the side
* so we know which direction to move the options
2021-01-15 15:31:43 +01:00
*/
2021-02-24 10:42:01 +01:00
if (side === undefined) {
side = (optionsToOpen === this.leftOptions) ? 'start' : 'end';
2021-01-15 15:31:43 +01:00
}
2021-02-24 10:42:01 +01:00
// In RTL we want to switch the sides
side = Object(_helpers_90f46169_js__WEBPACK_IMPORTED_MODULE_2__[" l "])(side) ? 'end' : 'start';
const isStartOpen = this.openAmount < 0;
const isEndOpen = this.openAmount > 0;
2021-01-15 15:31:43 +01:00
/**
2021-02-24 10:42:01 +01:00
* If a side is open and a user tries to
* re-open the same side, we should not do anything
2021-01-15 15:31:43 +01:00
*/
2021-02-24 10:42:01 +01:00
if (isStartOpen && optionsToOpen === this.leftOptions) {
return;
}
if (isEndOpen && optionsToOpen === this.rightOptions) {
return;
2021-01-15 15:31:43 +01:00
}
2021-02-24 10:42:01 +01:00
this.closeOpened();
this.state = 4 /* Enabled */;
requestAnimationFrame(() => {
this.calculateOptsWidth();
const width = (side === 'end') ? this.optsWidthRightSide : -this.optsWidthLeftSide;
openSlidingItem = this.el;
this.setOpenAmount(width, false);
this.state = (side === 'end') ? 8 /* End */ : 16 /* Start */;
});
}
/**
* Close the sliding item. Items can also be closed from the [List](../list).
*/
async close() {
this.setOpenAmount(0, true);
}
/**
* Close all of the sliding items in the list. Items can also be closed from the [List](../list).
*/
async closeOpened() {
if (openSlidingItem !== undefined) {
openSlidingItem.close();
openSlidingItem = undefined;
return true;
}
return false;
}
/**
* Given an optional side, return the ion-item-options element.
*
* @param side This side of the options to get. If a side is not provided it will
* return the first one available.
*/
getOptions(side) {
if (side === undefined) {
return this.leftOptions || this.rightOptions;
}
else if (side === 'start') {
return this.leftOptions;
}
else {
return this.rightOptions;
}
}
async updateOptions() {
const options = this.el.querySelectorAll('ion-item-options');
let sides = 0;
// Reset left and right options in case they were removed
this.leftOptions = this.rightOptions = undefined;
for (let i = 0; i < options.length; i++) {
const option = await options.item(i).componentOnReady();
const side = Object(_helpers_90f46169_js__WEBPACK_IMPORTED_MODULE_2__[" l "])(option.side) ? 'end' : 'start';
if (side === 'start') {
this.leftOptions = option;
sides |= 1 /* Start */;
}
else {
this.rightOptions = option;
sides |= 2 /* End */;
}
}
this.optsDirty = true;
this.sides = sides;
}
canStart(gesture) {
2021-01-15 15:31:43 +01:00
/**
2021-02-24 10:42:01 +01:00
* If very close to start of the screen
* do not open left side so swipe to go
* back will still work.
2021-01-15 15:31:43 +01:00
*/
2021-02-24 10:42:01 +01:00
const rtl = document.dir === 'rtl';
const atEdge = (rtl) ? (window.innerWidth - gesture.startX) < 15 : gesture.startX < 15;
if (atEdge) {
return false;
}
const selected = openSlidingItem;
if (selected && selected !== this.el) {
this.closeOpened();
return false;
}
return !!(this.rightOptions || this.leftOptions);
}
onStart() {
openSlidingItem = this.el;
if (this.tmr !== undefined) {
clearTimeout(this.tmr);
this.tmr = undefined;
}
if (this.openAmount === 0) {
this.optsDirty = true;
this.state = 4 /* Enabled */;
}
this.initialOpenAmount = this.openAmount;
if (this.item) {
this.item.style.transition = 'none';
}
}
onMove(gesture) {
if (this.optsDirty) {
this.calculateOptsWidth();
}
let openAmount = this.initialOpenAmount - gesture.deltaX;
switch (this.sides) {
case 2 /* End */:
openAmount = Math.max(0, openAmount);
break;
case 1 /* Start */:
openAmount = Math.min(0, openAmount);
break;
case 3 /* Both */: break;
case 0 /* None */: return;
default:
console.warn('invalid ItemSideFlags value', this.sides);
break;
}
let optsWidth;
if (openAmount > this.optsWidthRightSide) {
optsWidth = this.optsWidthRightSide;
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
}
else if (openAmount < -this.optsWidthLeftSide) {
optsWidth = -this.optsWidthLeftSide;
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
}
this.setOpenAmount(openAmount, false);
}
onEnd(gesture) {
const velocity = gesture.velocityX;
let restingPoint = (this.openAmount > 0)
? this.optsWidthRightSide
: -this.optsWidthLeftSide;
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
const isResetDirection = (this.openAmount > 0) === !(velocity < 0);
const isMovingFast = Math.abs(velocity) > 0.3;
const isOnCloseZone = Math.abs(this.openAmount) < Math.abs(restingPoint / 2);
if (swipeShouldReset(isResetDirection, isMovingFast, isOnCloseZone)) {
restingPoint = 0;
}
const state = this.state;
this.setOpenAmount(restingPoint, true);
if ((state & 32 /* SwipeEnd */) !== 0 && this.rightOptions) {
this.rightOptions.fireSwipeEvent();
}
else if ((state & 64 /* SwipeStart */) !== 0 && this.leftOptions) {
this.leftOptions.fireSwipeEvent();
}
}
calculateOptsWidth() {
this.optsWidthRightSide = 0;
if (this.rightOptions) {
this.rightOptions.style.display = 'flex';
this.optsWidthRightSide = this.rightOptions.offsetWidth;
this.rightOptions.style.display = '';
}
this.optsWidthLeftSide = 0;
if (this.leftOptions) {
this.leftOptions.style.display = 'flex';
this.optsWidthLeftSide = this.leftOptions.offsetWidth;
this.leftOptions.style.display = '';
}
this.optsDirty = false;
}
setOpenAmount(openAmount, isFinal) {
if (this.tmr !== undefined) {
clearTimeout(this.tmr);
this.tmr = undefined;
}
if (!this.item) {
return;
}
const style = this.item.style;
this.openAmount = openAmount;
if (isFinal) {
style.transition = '';
}
if (openAmount > 0) {
this.state = (openAmount >= (this.optsWidthRightSide + SWIPE_MARGIN))
? 8 /* End */ | 32 /* SwipeEnd */
: 8 /* End */;
}
else if (openAmount < 0) {
this.state = (openAmount <= (-this.optsWidthLeftSide - SWIPE_MARGIN))
? 16 /* Start */ | 64 /* SwipeStart */
: 16 /* Start */;
}
else {
this.tmr = setTimeout(() => {
this.state = 2 /* Disabled */;
this.tmr = undefined;
}, 600);
openSlidingItem = undefined;
style.transform = '';
return;
}
style.transform = `translate3d(${-openAmount}px,0,0)`;
this.ionDrag.emit({
amount: openAmount,
ratio: this.getSlidingRatioSync()
});
}
getSlidingRatioSync() {
if (this.openAmount > 0) {
return this.openAmount / this.optsWidthRightSide;
}
else if (this.openAmount < 0) {
return this.openAmount / this.optsWidthLeftSide;
}
else {
return 0;
}
}
render() {
const mode = Object(_ionic_global_9d5c8ee3_js__WEBPACK_IMPORTED_MODULE_1__[" b "])(this);
return (Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" h "])(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" H "], { class: {
[mode]: true,
'item-sliding-active-slide': (this.state !== 2 /* Disabled */),
'item-sliding-active-options-end': (this.state & 8 /* End */) !== 0,
'item-sliding-active-options-start': (this.state & 16 /* Start */) !== 0,
'item-sliding-active-swipe-end': (this.state & 32 /* SwipeEnd */) !== 0,
'item-sliding-active-swipe-start': (this.state & 64 /* SwipeStart */) !== 0
} }));
}
get el() { return Object(_index_e806d1f6_js__WEBPACK_IMPORTED_MODULE_0__[" i "])(this); }
static get watchers() { return {
" disabled ": [" disabledChanged " ]
} ; }
2021-01-15 15:31:43 +01:00
} ;
const swipeShouldReset = ( isResetDirection , isMovingFast , isOnResetZone ) => {
2021-02-24 10:42:01 +01:00
// The logic required to know when the sliding item should close (openAmount=0)
// depends on three booleans (isResetDirection, isMovingFast, isOnResetZone)
// and it ended up being too complicated to be written manually without errors
// so the truth table is attached below: (0=false, 1=true)
// isResetDirection | isMovingFast | isOnResetZone || shouldClose
// 0 | 0 | 0 || 0
// 0 | 0 | 1 || 1
// 0 | 1 | 0 || 0
// 0 | 1 | 1 || 0
// 1 | 0 | 0 || 0
// 1 | 0 | 1 || 1
// 1 | 1 | 0 || 1
// 1 | 1 | 1 || 1
// The resulting expression was generated by resolving the K-map (Karnaugh map):
return ( ! isMovingFast && isOnResetZone ) || ( isResetDirection && isMovingFast ) ;
2021-01-15 15:31:43 +01:00
} ;
ItemSliding . style = itemSlidingCss ;
/***/ } )
} ] ) ;
//# sourceMappingURL=16-es2015.js.map