2021-01-15 15:31:43 +01:00
function _defineProperty ( obj , key , value ) { if ( key in obj ) { Object . defineProperty ( obj , key , { value : value , enumerable : true , configurable : true , writable : true } ) ; } else { obj [ key ] = value ; } return obj ; }
function asyncGeneratorStep ( gen , resolve , reject , _next , _throw , key , arg ) { try { var info = gen [ key ] ( arg ) ; var value = info . value ; } catch ( error ) { reject ( error ) ; return ; } if ( info . done ) { resolve ( value ) ; } else { Promise . resolve ( value ) . then ( _next , _throw ) ; } }
function _asyncToGenerator ( fn ) { return function ( ) { var self = this , args = arguments ; return new Promise ( function ( resolve , reject ) { var gen = fn . apply ( self , args ) ; function _next ( value ) { asyncGeneratorStep ( gen , resolve , reject , _next , _throw , "next" , value ) ; } function _throw ( err ) { asyncGeneratorStep ( gen , resolve , reject , _next , _throw , "throw" , err ) ; } _next ( undefined ) ; } ) ; } ; }
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
function _defineProperties ( target , props ) { for ( var i = 0 ; i < props . length ; i ++ ) { var descriptor = props [ i ] ; descriptor . enumerable = descriptor . enumerable || false ; descriptor . configurable = true ; if ( "value" in descriptor ) descriptor . writable = true ; Object . defineProperty ( target , descriptor . key , descriptor ) ; } }
function _createClass ( Constructor , protoProps , staticProps ) { if ( protoProps ) _defineProperties ( Constructor . prototype , protoProps ) ; if ( staticProps ) _defineProperties ( Constructor , staticProps ) ; return Constructor ; }
( window [ "webpackJsonp" ] = window [ "webpackJsonp" ] || [ ] ) . push ( [ [ 30 ] , {
/***/
"./node_modules/@ionic/core/dist/esm/ion-searchbar.entry.js" :
/*!******************************************************************!*\
!*** ./node_modules/@ionic/core/dist/esm/ion-searchbar.entry.js ***!
\******************************************************************/
/*! exports provided: ion_searchbar */
/***/
function node _modulesIonicCoreDistEsmIonSearchbarEntryJs ( module , _ _webpack _exports _ _ , _ _webpack _require _ _ ) {
"use strict" ;
_ _webpack _require _ _ . r ( _ _webpack _exports _ _ ) ;
/* harmony export (binding) */
_ _webpack _require _ _ . d ( _ _webpack _exports _ _ , "ion_searchbar" , function ( ) {
return Searchbar ;
} ) ;
/* harmony import */
2021-02-24 10:42:01 +01:00
var _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ = _ _webpack _require _ _ (
/*! ./index-e806d1f6.js */
"./node_modules/@ionic/core/dist/esm/index-e806d1f6.js" ) ;
2021-01-15 15:31:43 +01:00
/* harmony import */
2021-02-24 10:42:01 +01:00
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" ) ;
2021-01-15 15:31:43 +01:00
/* harmony import */
2021-02-24 10:42:01 +01:00
var _helpers _90f46169 _js _ _WEBPACK _IMPORTED _MODULE _2 _ _ = _ _webpack _require _ _ (
/*! ./helpers-90f46169.js */
"./node_modules/@ionic/core/dist/esm/helpers-90f46169.js" ) ;
2021-01-15 15:31:43 +01:00
/* harmony import */
2021-02-24 10:42:01 +01:00
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
var searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{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;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-has-value.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-co
var searchbarMdCss = " . sc - ion - searchbar - md - h { -- placeholder - color : initial ; -- placeholder - font - style : initial ; -- placeholder - font - weight : initial ; -- placeholder - opacity : . 5 ; - moz - osx - font - smoothing : grayscale ; - webkit - font - smoothing : antialiased ; display : - ms - flexbox ; display : flex ; position : relative ; - ms - flex - align : center ; align - items : center ; width : 100 % ; color : var ( -- color ) ; font - family : var ( -- ion - font - family , inherit ) ; - webkit - box - sizing : border - box ; box - sizing : border - box } . ion - color . sc - ion - searchbar - md - h { color : var ( -- ion - color - contrast ) } . ion - color . sc - ion - searchbar - md - h . searchbar - input . sc - ion - searchbar - md { background : var ( -- ion - color - base ) } . ion - color . sc - ion - searchbar - md - h . searchbar - clear - button . sc - ion - searchbar - md , . ion - color . sc - ion - searchbar - md - h . searchbar - cancel - button . sc - ion - searchbar - md , . ion - color . sc - ion - searchbar - md - h . searchbar - search - icon . sc - ion - searchbar - md { color : inherit } . searchbar - search - icon . sc - ion - searchbar - md { color : var ( -- icon - color ) ; pointer - events : none } . searchbar - input - container . sc - ion - searchbar - md { display : block ; position : relative ; - ms - flex - negative : 1 ; flex - shrink : 1 ; width : 100 % } . searchbar - input . sc - ion - searchbar - md { 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 ; border - radius : var ( -- border - radius ) ; display : block ; width : 100 % ; border : 0 ; outline : none ; background : var ( -- background ) ; font - family : inherit ; - webkit - box - shadow : var ( -- box - shadow ) ; box - shadow : var ( -- box - shadow ) ; - webkit - box - sizing : border - box ; box - sizing : border - box ; - webkit - appearance : none ; - moz - appearance : none ; appearance : none } . searchbar - input . sc - ion - searchbar - md : : - webkit - input - placeholder { color : var ( -- placeholder - color ) ; font - family : inherit ; font - style : var ( -- placeholder - font - style ) ; font - weight : var ( -- placeholder - font - weight ) ; opacity : var ( -- placeholder - opacity ) } . searchbar - input . sc - ion - searchbar - md : : - moz - placeholder { color : var ( -- placeholder - color ) ; font - family : inherit ; font - style : var ( -- placeholder - font - style ) ; font - weight : var ( -- placeholder - font - weight ) ; opacity : var ( -- placeholder - opacity ) } . searchbar - input . sc - ion - searchbar - md : - ms - input - placeholder { color : var ( -- placeholder - color ) ; font - family : inherit ; font - style : var ( -- placeholder - font - style ) ; font - weight : var ( -- placeholder - font - weight ) ; opacity : var ( -- placeholder - opacity ) } . searchbar - input . sc - ion - searchbar - md : : - ms - input - placeholder { color : var ( -- placeholder - color ) ; font - family : inherit ; font - style : var ( -- placeholder - font - style ) ; font - weight : var ( -- placeholder - font - weight ) ; opacity : var ( -- placeholder - opacity ) } . searchbar - input . sc - ion - searchbar - md : : placeholder { color : var ( -- placeholder - color ) ; font - family : inherit ; font - style : var ( -- placeholder - font - style ) ; font - weight : var ( -- placeholder - font - weight ) ; opacity : var ( -- placeholder - opacity ) } . searchbar - input . sc - ion - searchbar - md : : - webkit - search - cancel - button , . searchbar - input . sc - ion - searchbar - md : : - ms - clear { display : none } . searchbar - cancel - button . sc - ion - searchbar - md { margin - left : 0 ; margin - right : 0 ; margin - top : 0 ; margin - bottom : 0 ; display : none ; height : 100 % ; border : 0 ; outline : none ; color : var ( -- cancel - button - color ) ; cursor : pointer ; - webkit - appearance : none ; - moz - appearance : none ; appearance : none } . searchbar - cancel - button . sc - ion - searchbar - md > div . sc - ion - searchbar - md { display : - ms - flexbox ; display : flex ; - ms - flex - align : center ; align - items : center ; - ms - flex - pack : center ; justify - content : center ; width : 100 % ; height : 100 % } . searchbar - clear - button . sc - ion - searchbar - md { margin - left : 0 ; margin - right : 0 ; margin - top : 0 ; margin - bottom : 0 ; padding - left : 0 ; padding - right : 0 ; padding - top : 0 ; padding - bottom : 0 ; display : none ; min - height : 0 ; outline : none ; color : var ( -- clear - button - color ) ; - webkit - appearance : none ; - moz - appearance : none ; appearance : none } . searchbar - has - value . searchbar - has - focus . sc - ion - searchbar - md - h . searchbar - clear - button . sc - ion - searchbar - md { display : block } . searchbar - disabled . sc - ion - searchbar - md - h { cursor : default ; opacity : 0.4 ; pointer - events : none } . sc - ion - searchbar - md - h { -- background : var ( -- ion - background - color , # fff ) ; -- border - radius : 2 px ; -- box - shadow : 0 2 px 2 px 0 rgba ( 0 , 0 , 0 , 0.14 ) , 0 3 px 1 px - 2 px rgba ( 0 , 0 , 0 , 0.2 ) , 0 1 px 5 px 0 rg
var Searchbar = /*#__PURE__*/ function ( ) {
function Searchbar ( hostRef ) {
var _this = this ;
_classCallCheck ( this , Searchbar ) ;
2021-02-24 10:42:01 +01:00
Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "r" ] ) ( this , hostRef ) ;
this . ionInput = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionInput" , 7 ) ;
this . ionChange = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionChange" , 7 ) ;
this . ionCancel = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionCancel" , 7 ) ;
this . ionClear = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionClear" , 7 ) ;
this . ionBlur = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionBlur" , 7 ) ;
this . ionFocus = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionFocus" , 7 ) ;
this . ionStyle = Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "e" ] ) ( this , "ionStyle" , 7 ) ;
2021-01-15 15:31:43 +01:00
this . isCancelVisible = false ;
this . shouldAlignLeft = true ;
this . focused = false ;
this . noAnimate = true ;
/**
* If `true`, enable searchbar animation.
*/
this . animated = false ;
/**
* Set the input's autocomplete property.
*/
this . autocomplete = 'off' ;
/**
* Set the input's autocorrect property.
*/
this . autocorrect = 'off' ;
/**
* Set the cancel button icon. Only applies to `md` mode.
* Defaults to `"arrow-back-sharp"`.
*/
2021-02-24 10:42:01 +01:00
this . cancelButtonIcon = _ionic _global _9d5c8ee3 _js _ _WEBPACK _IMPORTED _MODULE _1 _ _ [ "c" ] . get ( 'backButtonIcon' , 'arrow-back-sharp' ) ;
2021-01-15 15:31:43 +01:00
/**
* Set the the cancel button text. Only applies to `ios` mode.
*/
this . cancelButtonText = 'Cancel' ;
/**
2021-02-24 10:42:01 +01:00
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
2021-01-15 15:31:43 +01:00
*/
this . debounce = 250 ;
/**
* If `true`, the user cannot interact with the input.
*/
this . disabled = false ;
/**
* Set the input's placeholder.
* `placeholder` can accept either plaintext or HTML as a string.
* To display characters normally reserved for HTML, they
* must be escaped. For example `<Ionic>` would become
* `<Ionic>`
*
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/
this . placeholder = 'Search' ;
/**
* Sets the behavior for the cancel button. Defaults to `"never"`.
* Setting to `"focus"` shows the cancel button on focus.
* Setting to `"never"` hides the cancel button.
* Setting to `"always"` shows the cancel button regardless
* of focus state.
*/
this . showCancelButton = 'never' ;
/**
* If `true`, enable spellcheck on the input.
*/
this . spellcheck = false ;
/**
* Set the type of the input.
*/
this . type = 'search' ;
/**
* the value of the searchbar.
*/
this . value = '' ;
/**
* Clears the input field and triggers the control change.
*/
this . onClearInput = function ( ev ) {
_this . ionClear . emit ( ) ;
if ( ev ) {
ev . preventDefault ( ) ;
ev . stopPropagation ( ) ;
} // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
// wait for 4 frames
setTimeout ( function ( ) {
var value = _this . getValue ( ) ;
if ( value !== '' ) {
_this . value = '' ;
_this . ionInput . emit ( ) ;
}
} , 16 * 4 ) ;
} ;
/**
* Clears the input field and tells the input to blur since
* the clearInput function doesn't want the input to blur
* then calls the custom cancel function if the user passed one in.
*/
this . onCancelSearchbar = function ( ev ) {
if ( ev ) {
ev . preventDefault ( ) ;
ev . stopPropagation ( ) ;
}
_this . ionCancel . emit ( ) ;
_this . onClearInput ( ) ;
if ( _this . nativeInput ) {
_this . nativeInput . blur ( ) ;
}
} ;
/**
* Update the Searchbar input value when the input changes
*/
this . onInput = function ( ev ) {
var input = ev . target ;
if ( input ) {
_this . value = input . value ;
}
_this . ionInput . emit ( ev ) ;
} ;
/**
* Sets the Searchbar to not focused and checks if it should align left
* based on whether there is a value in the searchbar or not.
*/
this . onBlur = function ( ) {
_this . focused = false ;
_this . ionBlur . emit ( ) ;
_this . positionElements ( ) ;
} ;
/**
* Sets the Searchbar to focused and active on input focus.
*/
this . onFocus = function ( ) {
_this . focused = true ;
_this . ionFocus . emit ( ) ;
_this . positionElements ( ) ;
} ;
}
_createClass ( Searchbar , [ {
key : "debounceChanged" ,
value : function debounceChanged ( ) {
2021-02-24 10:42:01 +01:00
this . ionChange = Object ( _helpers _90f46169 _js _ _WEBPACK _IMPORTED _MODULE _2 _ _ [ "e" ] ) ( this . ionChange , this . debounce ) ;
2021-01-15 15:31:43 +01:00
}
} , {
key : "valueChanged" ,
value : function valueChanged ( ) {
var inputEl = this . nativeInput ;
var value = this . getValue ( ) ;
if ( inputEl && inputEl . value !== value ) {
inputEl . value = value ;
}
this . ionChange . emit ( {
value : value
} ) ;
}
} , {
key : "showCancelButtonChanged" ,
value : function showCancelButtonChanged ( ) {
var _this2 = this ;
requestAnimationFrame ( function ( ) {
_this2 . positionElements ( ) ;
2021-02-24 10:42:01 +01:00
Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "j" ] ) ( _this2 ) ;
2021-01-15 15:31:43 +01:00
} ) ;
}
} , {
key : "connectedCallback" ,
value : function connectedCallback ( ) {
this . emitStyle ( ) ;
}
} , {
key : "componentDidLoad" ,
value : function componentDidLoad ( ) {
var _this3 = this ;
this . positionElements ( ) ;
this . debounceChanged ( ) ;
setTimeout ( function ( ) {
_this3 . noAnimate = false ;
} , 300 ) ;
}
} , {
key : "emitStyle" ,
value : function emitStyle ( ) {
this . ionStyle . emit ( {
'searchbar' : true
} ) ;
}
/**
* Sets focus on the specified `ion-searchbar`. Use this method instead of the global
* `input.focus()`.
*/
} , {
key : "setFocus" ,
value : function ( ) {
var _setFocus = _asyncToGenerator ( /*#__PURE__*/ regeneratorRuntime . mark ( function _callee ( ) {
return regeneratorRuntime . wrap ( function _callee$ ( _context ) {
while ( 1 ) {
switch ( _context . prev = _context . next ) {
case 0 :
if ( this . nativeInput ) {
this . nativeInput . focus ( ) ;
}
case 1 :
case "end" :
return _context . stop ( ) ;
}
}
} , _callee , this ) ;
} ) ) ;
function setFocus ( ) {
return _setFocus . apply ( this , arguments ) ;
}
return setFocus ;
} ( )
/**
* Returns the native `<input>` element used under the hood.
*/
} , {
key : "getInputElement" ,
value : function getInputElement ( ) {
return Promise . resolve ( this . nativeInput ) ;
}
/**
* Positions the input search icon, placeholder, and the cancel button
* based on the input value and if it is focused. (ios only)
*/
} , {
key : "positionElements" ,
value : function positionElements ( ) {
var value = this . getValue ( ) ;
var prevAlignLeft = this . shouldAlignLeft ;
2021-02-24 10:42:01 +01:00
var mode = Object ( _ionic _global _9d5c8ee3 _js _ _WEBPACK _IMPORTED _MODULE _1 _ _ [ "b" ] ) ( this ) ;
2021-01-15 15:31:43 +01:00
var shouldAlignLeft = ! this . animated || value . trim ( ) !== '' || ! ! this . focused ;
this . shouldAlignLeft = shouldAlignLeft ;
if ( mode !== 'ios' ) {
return ;
}
if ( prevAlignLeft !== shouldAlignLeft ) {
this . positionPlaceholder ( ) ;
}
if ( this . animated ) {
this . positionCancelButton ( ) ;
}
}
/**
* Positions the input placeholder
*/
} , {
key : "positionPlaceholder" ,
value : function positionPlaceholder ( ) {
var inputEl = this . nativeInput ;
if ( ! inputEl ) {
return ;
}
var isRTL = document . dir === 'rtl' ;
var iconEl = ( this . el . shadowRoot || this . el ) . querySelector ( '.searchbar-search-icon' ) ;
if ( this . shouldAlignLeft ) {
inputEl . removeAttribute ( 'style' ) ;
iconEl . removeAttribute ( 'style' ) ;
} else {
// Create a dummy span to get the placeholder width
var doc = document ;
var tempSpan = doc . createElement ( 'span' ) ;
tempSpan . innerText = this . placeholder || '' ;
doc . body . appendChild ( tempSpan ) ; // Get the width of the span then remove it
2021-02-24 10:42:01 +01:00
Object ( _helpers _90f46169 _js _ _WEBPACK _IMPORTED _MODULE _2 _ _ [ "r" ] ) ( function ( ) {
2021-01-15 15:31:43 +01:00
var textWidth = tempSpan . offsetWidth ;
tempSpan . remove ( ) ; // Calculate the input padding
var inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)' ; // Calculate the icon margin
var iconLeft = 'calc(50% - ' + ( textWidth / 2 + 30 ) + 'px)' ; // Set the input padding start and icon margin start
if ( isRTL ) {
inputEl . style . paddingRight = inputLeft ;
iconEl . style . marginRight = iconLeft ;
} else {
inputEl . style . paddingLeft = inputLeft ;
iconEl . style . marginLeft = iconLeft ;
}
} ) ;
}
}
/**
* Show the iOS Cancel button on focus, hide it offscreen otherwise
*/
} , {
key : "positionCancelButton" ,
value : function positionCancelButton ( ) {
var isRTL = document . dir === 'rtl' ;
var cancelButton = ( this . el . shadowRoot || this . el ) . querySelector ( '.searchbar-cancel-button' ) ;
var shouldShowCancel = this . shouldShowCancelButton ( ) ;
if ( cancelButton && shouldShowCancel !== this . isCancelVisible ) {
var cancelStyle = cancelButton . style ;
this . isCancelVisible = shouldShowCancel ;
if ( shouldShowCancel ) {
if ( isRTL ) {
cancelStyle . marginLeft = '0' ;
} else {
cancelStyle . marginRight = '0' ;
}
} else {
var offset = cancelButton . offsetWidth ;
if ( offset > 0 ) {
if ( isRTL ) {
cancelStyle . marginLeft = - offset + 'px' ;
} else {
cancelStyle . marginRight = - offset + 'px' ;
}
}
}
}
}
} , {
key : "getValue" ,
value : function getValue ( ) {
return this . value || '' ;
}
} , {
key : "hasValue" ,
value : function hasValue ( ) {
return this . getValue ( ) !== '' ;
}
/**
* Determines whether or not the cancel button should be visible onscreen.
* Cancel button should be shown if one of two conditions applies:
* 1. `showCancelButton` is set to `always`.
* 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
*/
} , {
key : "shouldShowCancelButton" ,
value : function shouldShowCancelButton ( ) {
if ( this . showCancelButton === 'never' || this . showCancelButton === 'focus' && ! this . focused ) {
return false ;
}
return true ;
}
} , {
key : "render" ,
value : function render ( ) {
2021-02-24 10:42:01 +01:00
var _Object ,
2021-01-15 15:31:43 +01:00
_this4 = this ;
var cancelButtonText = this . cancelButtonText ;
2021-02-24 10:42:01 +01:00
var animated = this . animated && _ionic _global _9d5c8ee3 _js _ _WEBPACK _IMPORTED _MODULE _1 _ _ [ "c" ] . getBoolean ( 'animated' , true ) ;
2021-01-15 15:31:43 +01:00
2021-02-24 10:42:01 +01:00
var mode = Object ( _ionic _global _9d5c8ee3 _js _ _WEBPACK _IMPORTED _MODULE _1 _ _ [ "b" ] ) ( this ) ;
2021-01-15 15:31:43 +01:00
var clearIcon = this . clearIcon || ( mode === 'ios' ? 'close-circle' : 'close-sharp' ) ;
var searchIcon = this . searchIcon || ( mode === 'ios' ? 'search-outline' : 'search-sharp' ) ;
var shouldShowCancelButton = this . shouldShowCancelButton ( ) ;
2021-02-24 10:42:01 +01:00
var cancelButton = this . showCancelButton !== 'never' && Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "button" , {
2021-01-15 15:31:43 +01:00
"aria-label" : cancelButtonText ,
"aria-hidden" : shouldShowCancelButton ? undefined : 'true' ,
type : "button" ,
tabIndex : mode === 'ios' && ! shouldShowCancelButton ? - 1 : undefined ,
onMouseDown : this . onCancelSearchbar ,
onTouchStart : this . onCancelSearchbar ,
"class" : "searchbar-cancel-button"
2021-02-24 10:42:01 +01:00
} , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "div" , {
2021-01-15 15:31:43 +01:00
"aria-hidden" : "true"
2021-02-24 10:42:01 +01:00
} , mode === 'md' ? Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "ion-icon" , {
2021-01-15 15:31:43 +01:00
"aria-hidden" : "true" ,
mode : mode ,
icon : this . cancelButtonIcon ,
lazy : false
} ) : cancelButtonText ) ) ;
2021-02-24 10:42:01 +01:00
return Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "H" ] , {
2021-01-15 15:31:43 +01:00
role : "search" ,
"aria-disabled" : this . disabled ? 'true' : null ,
2021-02-24 10:42:01 +01:00
"class" : Object ( _theme _ff3fc52f _js _ _WEBPACK _IMPORTED _MODULE _3 _ _ [ "c" ] ) ( this . color , ( _Object = { } , _defineProperty ( _Object , mode , true ) , _defineProperty ( _Object , 'searchbar-animated' , animated ) , _defineProperty ( _Object , 'searchbar-disabled' , this . disabled ) , _defineProperty ( _Object , 'searchbar-no-animate' , animated && this . noAnimate ) , _defineProperty ( _Object , 'searchbar-has-value' , this . hasValue ( ) ) , _defineProperty ( _Object , 'searchbar-left-aligned' , this . shouldAlignLeft ) , _defineProperty ( _Object , 'searchbar-has-focus' , this . focused ) , _defineProperty ( _Object , 'searchbar-should-show-cancel' , this . shouldShowCancelButton ( ) ) , _Object ) )
} , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "div" , {
2021-01-15 15:31:43 +01:00
"class" : "searchbar-input-container"
2021-02-24 10:42:01 +01:00
} , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "input" , {
2021-01-15 15:31:43 +01:00
"aria-label" : "search text" ,
disabled : this . disabled ,
ref : function ref ( el ) {
return _this4 . nativeInput = el ;
} ,
"class" : "searchbar-input" ,
inputMode : this . inputmode ,
enterKeyHint : this . enterkeyhint ,
onInput : this . onInput ,
onBlur : this . onBlur ,
onFocus : this . onFocus ,
placeholder : this . placeholder ,
type : this . type ,
value : this . getValue ( ) ,
autoComplete : this . autocomplete ,
autoCorrect : this . autocorrect ,
spellcheck : this . spellcheck
2021-02-24 10:42:01 +01:00
} ) , mode === 'md' && cancelButton , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "ion-icon" , {
2021-01-15 15:31:43 +01:00
"aria-hidden" : "true" ,
mode : mode ,
icon : searchIcon ,
lazy : false ,
"class" : "searchbar-search-icon"
2021-02-24 10:42:01 +01:00
} ) , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "button" , {
2021-01-15 15:31:43 +01:00
"aria-label" : "reset" ,
type : "button" ,
"no-blur" : true ,
"class" : "searchbar-clear-button" ,
onMouseDown : this . onClearInput ,
onTouchStart : this . onClearInput
2021-02-24 10:42:01 +01:00
} , Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "h" ] ) ( "ion-icon" , {
2021-01-15 15:31:43 +01:00
"aria-hidden" : "true" ,
mode : mode ,
icon : clearIcon ,
lazy : false ,
"class" : "searchbar-clear-icon"
} ) ) ) , mode === 'ios' && cancelButton ) ;
}
} , {
key : "el" ,
get : function get ( ) {
2021-02-24 10:42:01 +01:00
return Object ( _index _e806d1f6 _js _ _WEBPACK _IMPORTED _MODULE _0 _ _ [ "i" ] ) ( this ) ;
2021-01-15 15:31:43 +01:00
}
} ] , [ {
key : "watchers" ,
get : function get ( ) {
return {
"debounce" : [ "debounceChanged" ] ,
"value" : [ "valueChanged" ] ,
"showCancelButton" : [ "showCancelButtonChanged" ]
} ;
}
} ] ) ;
return Searchbar ;
} ( ) ;
Searchbar . style = {
ios : searchbarIosCss ,
md : searchbarMdCss
} ;
/***/
}
} ] ) ;
//# sourceMappingURL=30-es5.js.map