How to use componentEl method in ng-mocks

Best JavaScript code snippet using ng-mocks

input-shims-c377a6c1.js

Source:input-shims-c377a6c1.js Github

copy

Full Screen

1import { a as addEventListener, r as removeEventListener, p as pointerCoord, b as raf, c as componentOnReady } from './helpers-e504fb0f.js';2const cloneMap = new WeakMap();3const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0) => {4 if (cloneMap.has(componentEl) === shouldRelocate) {5 return;6 }7 if (shouldRelocate) {8 addClone(componentEl, inputEl, inputRelativeY);9 }10 else {11 removeClone(componentEl, inputEl);12 }13};14const isFocused = (input) => {15 return input === input.getRootNode().activeElement;16};17const addClone = (componentEl, inputEl, inputRelativeY) => {18 // this allows for the actual input to receive the focus from19 // the user's touch event, but before it receives focus, it20 // moves the actual input to a location that will not screw21 // up the app's layout, and does not allow the native browser22 // to attempt to scroll the input into place (messing up headers/footers)23 // the cloned input fills the area of where native input should be24 // while the native input fakes out the browser by relocating itself25 // before it receives the actual focus event26 // We hide the focused input (with the visible caret) invisible by making it scale(0),27 const parentEl = inputEl.parentNode;28 // DOM WRITES29 const clonedEl = inputEl.cloneNode(false);30 clonedEl.classList.add('cloned-input');31 clonedEl.tabIndex = -1;32 parentEl.appendChild(clonedEl);33 cloneMap.set(componentEl, clonedEl);34 const doc = componentEl.ownerDocument;35 const tx = doc.dir === 'rtl' ? 9999 : -9999;36 componentEl.style.pointerEvents = 'none';37 inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;38};39const removeClone = (componentEl, inputEl) => {40 const clone = cloneMap.get(componentEl);41 if (clone) {42 cloneMap.delete(componentEl);43 clone.remove();44 }45 componentEl.style.pointerEvents = '';46 inputEl.style.transform = '';47};48const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {49 if (!scrollEl || !inputEl) {50 return () => { return; };51 }52 const scrollHideCaret = (shouldHideCaret) => {53 if (isFocused(inputEl)) {54 relocateInput(componentEl, inputEl, shouldHideCaret);55 }56 };57 const onBlur = () => relocateInput(componentEl, inputEl, false);58 const hideCaret = () => scrollHideCaret(true);59 const showCaret = () => scrollHideCaret(false);60 addEventListener(scrollEl, 'ionScrollStart', hideCaret);61 addEventListener(scrollEl, 'ionScrollEnd', showCaret);62 inputEl.addEventListener('blur', onBlur);63 return () => {64 removeEventListener(scrollEl, 'ionScrollStart', hideCaret);65 removeEventListener(scrollEl, 'ionScrollEnd', showCaret);66 inputEl.addEventListener('ionBlur', onBlur);67 };68};69const SKIP_SELECTOR = 'input, textarea, [no-blur], [contenteditable]';70const enableInputBlurring = () => {71 let focused = true;72 let didScroll = false;73 const doc = document;74 const onScroll = () => {75 didScroll = true;76 };77 const onFocusin = () => {78 focused = true;79 };80 const onTouchend = (ev) => {81 // if app did scroll return early82 if (didScroll) {83 didScroll = false;84 return;85 }86 const active = doc.activeElement;87 if (!active) {88 return;89 }90 // only blur if the active element is a text-input or a textarea91 if (active.matches(SKIP_SELECTOR)) {92 return;93 }94 // if the selected target is the active element, do not blur95 const tapped = ev.target;96 if (tapped === active) {97 return;98 }99 if (tapped.matches(SKIP_SELECTOR) || tapped.closest(SKIP_SELECTOR)) {100 return;101 }102 focused = false;103 // TODO: find a better way, why 50ms?104 setTimeout(() => {105 if (!focused) {106 active.blur();107 }108 }, 50);109 };110 addEventListener(doc, 'ionScrollStart', onScroll);111 doc.addEventListener('focusin', onFocusin, true);112 doc.addEventListener('touchend', onTouchend, false);113 return () => {114 removeEventListener(doc, 'ionScrollStart', onScroll, true);115 doc.removeEventListener('focusin', onFocusin, true);116 doc.removeEventListener('touchend', onTouchend, false);117 };118};119const SCROLL_ASSIST_SPEED = 0.3;120const getScrollData = (componentEl, contentEl, keyboardHeight) => {121 const itemEl = componentEl.closest('ion-item,[ion-item]') || componentEl;122 return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight);123};124const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {125 // compute input's Y values relative to the body126 const inputTop = inputRect.top;127 const inputBottom = inputRect.bottom;128 // compute visible area129 const visibleAreaTop = contentRect.top;130 const visibleAreaBottom = Math.min(contentRect.bottom, platformHeight - keyboardHeight);131 // compute safe area132 const safeAreaTop = visibleAreaTop + 15;133 const safeAreaBottom = visibleAreaBottom * 0.75;134 // figure out if each edge of the input is within the safe area135 const distanceToBottom = safeAreaBottom - inputBottom;136 const distanceToTop = safeAreaTop - inputTop;137 // desiredScrollAmount is the negated distance to the safe area according to our calculations.138 const desiredScrollAmount = Math.round((distanceToBottom < 0)139 ? -distanceToBottom140 : (distanceToTop > 0)141 ? -distanceToTop142 : 0);143 // our calculations make some assumptions that aren't always true, like the keyboard being closed when an input144 // gets focus, so make sure we don't scroll the input above the visible area145 const scrollAmount = Math.min(desiredScrollAmount, inputTop - visibleAreaTop);146 const distance = Math.abs(scrollAmount);147 const duration = distance / SCROLL_ASSIST_SPEED;148 const scrollDuration = Math.min(400, Math.max(150, duration));149 return {150 scrollAmount,151 scrollDuration,152 scrollPadding: keyboardHeight,153 inputSafeY: -(inputTop - safeAreaTop) + 4154 };155};156const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {157 let coord;158 const touchStart = (ev) => {159 coord = pointerCoord(ev);160 };161 const touchEnd = (ev) => {162 // input cover touchend/mouseup163 if (!coord) {164 return;165 }166 // get where the touchend/mouseup ended167 const endCoord = pointerCoord(ev);168 // focus this input if the pointer hasn't moved XX pixels169 // and the input doesn't already have focus170 if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {171 ev.stopPropagation();172 // begin the input focus process173 jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight);174 }175 };176 componentEl.addEventListener('touchstart', touchStart, true);177 componentEl.addEventListener('touchend', touchEnd, true);178 return () => {179 componentEl.removeEventListener('touchstart', touchStart, true);180 componentEl.removeEventListener('touchend', touchEnd, true);181 };182};183const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {184 if (!contentEl && !footerEl) {185 return;186 }187 const scrollData = getScrollData(componentEl, (contentEl || footerEl), keyboardHeight);188 if (contentEl && Math.abs(scrollData.scrollAmount) < 4) {189 // the text input is in a safe position that doesn't190 // require it to be scrolled into view, just set focus now191 inputEl.focus();192 return;193 }194 // temporarily move the focus to the focus holder so the browser195 // doesn't freak out while it's trying to get the input in place196 // at this point the native text input still does not have focus197 relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);198 inputEl.focus();199 /**200 * Relocating/Focusing input causes the201 * click event to be cancelled, so202 * manually fire one here.203 */204 raf(() => componentEl.click());205 /* tslint:disable-next-line */206 if (typeof window !== 'undefined') {207 let scrollContentTimeout;208 const scrollContent = async () => {209 // clean up listeners and timeouts210 if (scrollContentTimeout !== undefined) {211 clearTimeout(scrollContentTimeout);212 }213 window.removeEventListener('ionKeyboardDidShow', doubleKeyboardEventListener);214 window.removeEventListener('ionKeyboardDidShow', scrollContent);215 // scroll the input into place216 if (contentEl) {217 await contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration);218 }219 // the scroll view is in the correct position now220 // give the native text input focus221 relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);222 // ensure this is the focused input223 inputEl.focus();224 };225 const doubleKeyboardEventListener = () => {226 window.removeEventListener('ionKeyboardDidShow', doubleKeyboardEventListener);227 window.addEventListener('ionKeyboardDidShow', scrollContent);228 };229 if (contentEl) {230 const scrollEl = await contentEl.getScrollElement();231 /**232 * scrollData will only consider the amount we need233 * to scroll in order to properly bring the input234 * into view. It will not consider the amount235 * we can scroll in the content element.236 * As a result, scrollData may request a greater237 * scroll position than is currently available238 * in the DOM. If this is the case, we need to239 * wait for the webview to resize/the keyboard240 * to show in order for additional scroll241 * bandwidth to become available.242 */243 const totalScrollAmount = scrollEl.scrollHeight - scrollEl.clientHeight;244 if (scrollData.scrollAmount > (totalScrollAmount - scrollEl.scrollTop)) {245 /**246 * On iOS devices, the system will show a "Passwords" bar above the keyboard247 * after the initial keyboard is shown. This prevents the webview from resizing248 * until the "Passwords" bar is shown, so we need to wait for that to happen first.249 */250 if (inputEl.type === 'password') {251 // Add 50px to account for the "Passwords" bar252 scrollData.scrollAmount += 50;253 window.addEventListener('ionKeyboardDidShow', doubleKeyboardEventListener);254 }255 else {256 window.addEventListener('ionKeyboardDidShow', scrollContent);257 }258 /**259 * This should only fire in 2 instances:260 * 1. The app is very slow.261 * 2. The app is running in a browser on an old OS262 * that does not support Ionic Keyboard Events263 */264 scrollContentTimeout = setTimeout(scrollContent, 1000);265 return;266 }267 }268 scrollContent();269 }270};271const hasPointerMoved = (threshold, startCoord, endCoord) => {272 if (startCoord && endCoord) {273 const deltaX = (startCoord.x - endCoord.x);274 const deltaY = (startCoord.y - endCoord.y);275 const distance = deltaX * deltaX + deltaY * deltaY;276 return distance > (threshold * threshold);277 }278 return false;279};280const PADDING_TIMER_KEY = '$ionPaddingTimer';281const enableScrollPadding = (keyboardHeight) => {282 const doc = document;283 const onFocusin = (ev) => {284 setScrollPadding(ev.target, keyboardHeight);285 };286 const onFocusout = (ev) => {287 setScrollPadding(ev.target, 0);288 };289 doc.addEventListener('focusin', onFocusin);290 doc.addEventListener('focusout', onFocusout);291 return () => {292 doc.removeEventListener('focusin', onFocusin);293 doc.removeEventListener('focusout', onFocusout);294 };295};296const setScrollPadding = (input, keyboardHeight) => {297 if (input.tagName !== 'INPUT') {298 return;299 }300 if (input.parentElement && input.parentElement.tagName === 'ION-INPUT') {301 return;302 }303 if (input.parentElement &&304 input.parentElement.parentElement &&305 input.parentElement.parentElement.tagName === 'ION-SEARCHBAR') {306 return;307 }308 const el = input.closest('ion-content');309 if (el === null) {310 return;311 }312 const timer = el[PADDING_TIMER_KEY];313 if (timer) {314 clearTimeout(timer);315 }316 if (keyboardHeight > 0) {317 el.style.setProperty('--keyboard-offset', `${keyboardHeight}px`);318 }319 else {320 el[PADDING_TIMER_KEY] = setTimeout(() => {321 el.style.setProperty('--keyboard-offset', '0px');322 }, 120);323 }324};325const INPUT_BLURRING = true;326const SCROLL_ASSIST = true;327const SCROLL_PADDING = true;328const HIDE_CARET = true;329const startInputShims = (config) => {330 const doc = document;331 const keyboardHeight = config.getNumber('keyboardHeight', 290);332 const scrollAssist = config.getBoolean('scrollAssist', true);333 const hideCaret = config.getBoolean('hideCaretOnScroll', true);334 const inputBlurring = config.getBoolean('inputBlurring', true);335 const scrollPadding = config.getBoolean('scrollPadding', true);336 const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea'));337 const hideCaretMap = new WeakMap();338 const scrollAssistMap = new WeakMap();339 const registerInput = async (componentEl) => {340 await new Promise(resolve => componentOnReady(componentEl, resolve));341 const inputRoot = componentEl.shadowRoot || componentEl;342 const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');343 const scrollEl = componentEl.closest('ion-content');344 const footerEl = (!scrollEl) ? componentEl.closest('ion-footer') : null;345 if (!inputEl) {346 return;347 }348 if (HIDE_CARET && !!scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {349 const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);350 hideCaretMap.set(componentEl, rmFn);351 }352 if (SCROLL_ASSIST && (!!scrollEl || !!footerEl) && scrollAssist && !scrollAssistMap.has(componentEl)) {353 const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, footerEl, keyboardHeight);354 scrollAssistMap.set(componentEl, rmFn);355 }356 };357 const unregisterInput = (componentEl) => {358 if (HIDE_CARET && hideCaret) {359 const fn = hideCaretMap.get(componentEl);360 if (fn) {361 fn();362 }363 hideCaretMap.delete(componentEl);364 }365 if (SCROLL_ASSIST && scrollAssist) {366 const fn = scrollAssistMap.get(componentEl);367 if (fn) {368 fn();369 }370 scrollAssistMap.delete(componentEl);371 }372 };373 if (inputBlurring && INPUT_BLURRING) {374 enableInputBlurring();375 }376 if (scrollPadding && SCROLL_PADDING) {377 enableScrollPadding(keyboardHeight);378 }379 // Input might be already loaded in the DOM before ion-device-hacks did.380 // At this point we need to look for all of the inputs not registered yet381 // and register them.382 for (const input of inputs) {383 registerInput(input);384 }385 doc.addEventListener('ionInputDidLoad', ((ev) => {386 registerInput(ev.detail);387 }));388 doc.addEventListener('ionInputDidUnload', ((ev) => {389 unregisterInput(ev.detail);390 }));391};...

Full Screen

Full Screen

input-shims.js

Source:input-shims.js Github

copy

Full Screen

1/*! Built with http://stenciljs.com */2const { h } = window.App;3import { o as pointerCoord } from './chunk-c7f82f3c.js';4const RELOCATED_KEY = '$ionRelocated';5function relocateInput(componentEl, inputEl, shouldRelocate, inputRelativeY = 0) {6 if (componentEl[RELOCATED_KEY] === shouldRelocate) {7 return;8 }9 console.debug(`native-input, hideCaret, shouldHideCaret: ${shouldRelocate}, input value: ${inputEl.value}`);10 if (shouldRelocate) {11 cloneInputComponent(componentEl, inputEl);12 const doc = componentEl.ownerDocument;13 const tx = doc.dir === 'rtl' ? 9999 : -9999;14 inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0)`;15 }16 else {17 removeClone(componentEl, inputEl);18 }19 componentEl[RELOCATED_KEY] = shouldRelocate;20}21function isFocused(input) {22 return input === input.ownerDocument.activeElement;23}24function removeClone(componentEl, inputEl) {25 if (componentEl && componentEl.parentElement) {26 Array.from(componentEl.parentElement.querySelectorAll('.cloned-input'))27 .forEach(clon => clon.remove());28 componentEl.style.pointerEvents = '';29 }30 inputEl.style['transform'] = '';31 inputEl.style.opacity = '';32}33function cloneInputComponent(componentEl, inputEl) {34 const parentElement = componentEl.parentElement;35 const doc = componentEl.ownerDocument;36 if (componentEl && parentElement) {37 const srcTop = componentEl.offsetTop;38 const srcLeft = componentEl.offsetLeft;39 const srcWidth = componentEl.offsetWidth;40 const srcHeight = componentEl.offsetHeight;41 const clonedComponentEle = doc.createElement('div');42 const clonedStyle = clonedComponentEle.style;43 clonedComponentEle.classList.add(...Array.from(componentEl.classList));44 clonedComponentEle.classList.add('cloned-input');45 clonedComponentEle.setAttribute('aria-hidden', 'true');46 clonedStyle.pointerEvents = 'none';47 clonedStyle.position = 'absolute';48 clonedStyle.top = srcTop + 'px';49 clonedStyle.left = srcLeft + 'px';50 clonedStyle.width = srcWidth + 'px';51 clonedStyle.height = srcHeight + 'px';52 const clonedInputEl = doc.createElement('input');53 clonedInputEl.classList.add(...Array.from(inputEl.classList));54 clonedInputEl.value = inputEl.value;55 clonedInputEl.type = inputEl.type;56 clonedInputEl.placeholder = inputEl.placeholder;57 clonedInputEl.tabIndex = -1;58 clonedComponentEle.appendChild(clonedInputEl);59 parentElement.appendChild(clonedComponentEle);60 componentEl.style.pointerEvents = 'none';61 }62 inputEl.style.transform = 'scale(0)';63}64function enableHideCaretOnScroll(componentEl, inputEl, scrollEl) {65 if (!scrollEl || !inputEl) {66 return () => { return; };67 }68 console.debug('Input: enableHideCaretOnScroll');69 const scrollHideCaret = (shouldHideCaret) => {70 if (isFocused(inputEl)) {71 relocateInput(componentEl, inputEl, shouldHideCaret);72 }73 };74 const onBlur = () => relocateInput(componentEl, inputEl, false);75 const hideCaret = () => scrollHideCaret(true);76 const showCaret = () => scrollHideCaret(false);77 scrollEl.addEventListener('ionScrollStart', hideCaret);78 scrollEl.addEventListener('ionScrollEnd', showCaret);79 inputEl.addEventListener('blur', onBlur);80 return () => {81 scrollEl.removeEventListener('ionScrollStart', hideCaret);82 scrollEl.removeEventListener('ionScrollEnd', showCaret);83 inputEl.addEventListener('ionBlur', onBlur);84 };85}86const SKIP_SELECTOR = 'input, textarea, [no-blur]';87function enableInputBlurring(doc) {88 console.debug('Input: enableInputBlurring');89 let focused = true;90 let didScroll = false;91 function onScroll() {92 didScroll = true;93 }94 function onFocusin() {95 focused = true;96 }97 function onTouchend(ev) {98 if (didScroll) {99 didScroll = false;100 return;101 }102 const active = doc.activeElement;103 if (!active) {104 return;105 }106 if (active.matches(SKIP_SELECTOR)) {107 return;108 }109 const tapped = ev.target;110 if (tapped === active) {111 return;112 }113 if (tapped.matches(SKIP_SELECTOR) || tapped.closest(SKIP_SELECTOR)) {114 return;115 }116 if (tapped.classList.contains('input-cover')) {117 return;118 }119 focused = false;120 setTimeout(() => {121 if (!focused) {122 active.blur();123 }124 }, 50);125 }126 doc.addEventListener('ionScrollStart', onScroll);127 doc.addEventListener('focusin', onFocusin, true);128 doc.addEventListener('touchend', onTouchend, false);129 return () => {130 doc.removeEventListener('ionScrollStart', onScroll, true);131 doc.removeEventListener('focusin', onFocusin, true);132 doc.removeEventListener('touchend', onTouchend, false);133 };134}135const SCROLL_ASSIST_SPEED = 0.3;136function getScrollData(componentEl, contentEl, keyboardHeight) {137 const itemEl = componentEl.closest('ion-item,[ion-item]') || componentEl;138 return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, window.innerHeight);139}140function calcScrollData(inputRect, contentRect, keyboardHeight, plaformHeight) {141 const inputTop = inputRect.top;142 const inputBottom = inputRect.bottom;143 const visibleAreaTop = contentRect.top;144 const visibleAreaBottom = Math.min(contentRect.bottom, plaformHeight - keyboardHeight);145 const safeAreaTop = visibleAreaTop + 10;146 const safeAreaBottom = visibleAreaBottom / 2.0;147 const distanceToBottom = safeAreaBottom - inputBottom;148 const distanceToTop = safeAreaTop - inputTop;149 const scrollAmount = Math.round((distanceToBottom < 0)150 ? -distanceToBottom151 : (distanceToTop > 0)152 ? -distanceToTop153 : 0);154 const distance = Math.abs(scrollAmount);155 const duration = distance / SCROLL_ASSIST_SPEED;156 const scrollDuration = Math.min(400, Math.max(150, duration));157 return {158 scrollAmount,159 scrollDuration,160 scrollPadding: keyboardHeight,161 inputSafeY: -(inputTop - safeAreaTop) + 4162 };163}164function enableScrollAssist(componentEl, inputEl, contentEl, keyboardHeight) {165 let coord;166 const touchStart = (ev) => {167 coord = pointerCoord(ev);168 console.debug(`input-base, pointerStart, type: ${ev.type}`);169 };170 const touchEnd = (ev) => {171 console.debug(`input-base, pointerEnd, type: ${ev.type}`);172 if (!coord) {173 return;174 }175 const endCoord = pointerCoord(ev);176 if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {177 ev.preventDefault();178 ev.stopPropagation();179 jsSetFocus(componentEl, inputEl, contentEl, keyboardHeight);180 }181 };182 componentEl.addEventListener('touchstart', touchStart, true);183 componentEl.addEventListener('touchend', touchEnd, true);184 return () => {185 componentEl.removeEventListener('touchstart', touchStart, true);186 componentEl.removeEventListener('touchend', touchEnd, true);187 };188}189function jsSetFocus(componentEl, inputEl, contentEl, keyboardHeight) {190 const scrollData = getScrollData(componentEl, contentEl, keyboardHeight);191 if (Math.abs(scrollData.scrollAmount) < 4) {192 inputEl.focus();193 return;194 }195 relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);196 inputEl.focus();197 contentEl.scrollByPoint(0, scrollData.scrollAmount, scrollData.scrollDuration).then(() => {198 relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);199 inputEl.focus();200 });201}202function hasPointerMoved(threshold, startCoord, endCoord) {203 if (startCoord && endCoord) {204 const deltaX = (startCoord.x - endCoord.x);205 const deltaY = (startCoord.y - endCoord.y);206 const distance = deltaX * deltaX + deltaY * deltaY;207 return distance > (threshold * threshold);208 }209 return false;210}211const PADDING_TIMER_KEY = '$ionPaddingTimer';212function enableScrollPadding(doc, keyboardHeight) {213 console.debug('Input: enableScrollPadding');214 function onFocusin(ev) {215 setScrollPadding(ev.target, keyboardHeight);216 }217 function onFocusout(ev) {218 setScrollPadding(ev.target, 0);219 }220 doc.addEventListener('focusin', onFocusin);221 doc.addEventListener('focusout', onFocusout);222 return () => {223 doc.removeEventListener('focusin', onFocusin);224 doc.removeEventListener('focusout', onFocusout);225 };226}227function setScrollPadding(input, keyboardHeight) {228 if (input.tagName !== 'INPUT') {229 return;230 }231 if (input.parentElement && input.parentElement.tagName === 'ION-INPUT') {232 return;233 }234 const el = input.closest('ion-content');235 if (el === null) {236 return;237 }238 const timer = el[PADDING_TIMER_KEY];239 if (timer) {240 clearTimeout(timer);241 }242 if (keyboardHeight > 0) {243 el.style.setProperty('--keyboard-offset', `${keyboardHeight}px`);244 }245 else {246 el[PADDING_TIMER_KEY] = setTimeout(() => {247 el.style.setProperty('--keyboard-offset', '0px');248 }, 120);249 }250}251const INPUT_BLURRING = true;252const SCROLL_PADDING = true;253function startInputShims(doc, config) {254 const keyboardHeight = config.getNumber('keyboardHeight', 290);255 const scrollAssist = config.getBoolean('scrollAssist', true);256 const hideCaret = config.getBoolean('hideCaretOnScroll', true);257 const inputBlurring = config.getBoolean('inputBlurring', true);258 const scrollPadding = config.getBoolean('scrollPadding', true);259 const hideCaretMap = new WeakMap();260 const scrollAssistMap = new WeakMap();261 function registerInput(componentEl) {262 const inputEl = (componentEl.shadowRoot || componentEl).querySelector('input');263 const scrollEl = componentEl.closest('ion-content');264 if (!inputEl) {265 return;266 }267 if (!!scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {268 const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);269 hideCaretMap.set(componentEl, rmFn);270 }271 if (!!scrollEl && scrollAssist && !scrollAssistMap.has(componentEl)) {272 const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, keyboardHeight);273 scrollAssistMap.set(componentEl, rmFn);274 }275 }276 function unregisterInput(componentEl) {277 if (hideCaret) {278 const fn = hideCaretMap.get(componentEl);279 if (fn) {280 fn();281 }282 hideCaretMap.delete(componentEl);283 }284 if (scrollAssist) {285 const fn = scrollAssistMap.get(componentEl);286 if (fn) {287 fn();288 }289 scrollAssistMap.delete(componentEl);290 }291 }292 if (inputBlurring && INPUT_BLURRING) {293 enableInputBlurring(doc);294 }295 if (scrollPadding && SCROLL_PADDING) {296 enableScrollPadding(doc, keyboardHeight);297 }298 const inputs = Array.from(doc.querySelectorAll('ion-input'));299 for (const input of inputs) {300 registerInput(input);301 }302 doc.body.addEventListener('ionInputDidLoad', event => {303 registerInput(event.target);304 });305 doc.body.addEventListener('ionInputDidUnload', event => {306 unregisterInput(event.target);307 });308}...

Full Screen

Full Screen

clickoutside.js

Source:clickoutside.js Github

copy

Full Screen

1const clickoutside = {2 mounted(el, binding) {3 const componentEl = el;4 const bubble = binding.modifiers.bubbles;5 const handler = (e) => {6 if (bubble7 || (componentEl !== e.target8 && !componentEl.contains(e.target))9 ) {10 binding.value(e);11 }12 };13 componentEl.vueClickOutside = handler;14 document.addEventListener('mousedown', handler);15 },16 unmounted(el) {17 const componentEl = el;18 document.removeEventListener('mousedown', componentEl.vueClickOutside);19 componentEl.vueClickOutside = null;20 },21};22const selectClickoutside = {23 mounted(el, binding) {24 const componentEl = el;25 let dropLi = null;26 const bubble = binding.modifiers.bubble;27 const selectDropbox = document.body.getElementsByClassName('ev-select-dropbox');28 const TAG_NAME_CLS = 'ev-tag-name';29 const TAG_SUFFIX_CLOSE_CLS = 'ev-tag-suffix-close';30 const handler = (e) => {31 if (e.target.classList.contains(TAG_NAME_CLS)32 || e.target.classList.contains(TAG_SUFFIX_CLOSE_CLS)33 ) {34 return;35 }36 if (selectDropbox && selectDropbox.length) {37 if (bubble || (componentEl !== e.target && !componentEl.contains(e.target))) {38 for (let i = 0; i < selectDropbox.length; i++) {39 dropLi = selectDropbox[i];40 if (dropLi !== e.target && !dropLi.contains(e.target)) {41 binding.value(e);42 break;43 }44 }45 }46 }47 };48 componentEl.vueClickOutside = handler;49 document.addEventListener('mousedown', handler);50 },51 unmounted(el) {52 const componentEl = el;53 document.removeEventListener('mousedown', componentEl.vueClickOutside);54 componentEl.vueClickOutside = null;55 },56};57const datePickerClickoutside = {58 mounted(el, binding) {59 const componentEl = el;60 const bubble = binding.modifiers.bubbles;61 const selectDropbox = document.body.getElementsByClassName('ev-date-picker-dropdown');62 const handler = (e) => {63 if (!selectDropbox64 && (bubble || (componentEl !== e.target && !componentEl.contains(e.target)))65 ) {66 binding.value(e);67 } else if (selectDropbox && selectDropbox[0]68 && (selectDropbox[0] !== e.target && !selectDropbox[0].contains(e.target))69 && (componentEl !== e.target && !componentEl.contains(e.target))70 ) {71 binding.value(e);72 }73 };74 componentEl.vueClickOutside = handler;75 document.addEventListener('mousedown', handler);76 },77 unmounted(el) {78 const componentEl = el;79 document.removeEventListener('mousedown', componentEl.vueClickOutside);80 componentEl.vueClickOutside = null;81 },82};83export {84 clickoutside,85 selectClickoutside,86 datePickerClickoutside,...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentEl } from 'ng-mocks';2import { componentInstance } from 'ng-mocks';3import { componentInputs } from 'ng-mocks';4import { componentOutputs } from 'ng-mocks';5import { componentProviders } from 'ng-mocks';6import { componentQueries } from 'ng-mocks';7import { componentRender } from 'ng-mocks';8import { componentSelector } from 'ng-mocks';9import { componentTemplate } from 'ng-mocks';10import { componentView } from 'ng-mocks';11import { componentViewChildren } from 'ng-mocks';12import { componentViewChildrenRecursive } from 'ng-mocks';13import { componentViewChild } from 'ng-mocks';14import { componentViewChildRecursive } from 'ng-mocks';15import { componentViewProviders } from 'ng-mocks';16import { componentViewQueries } from 'ng-mocks';17import { componentViewRender } from 'ng-mocks';18import { componentViewRenderRecursive } from 'ng-mocks';19import { componentViewRoot } from 'ng-mocks';20import { componentViewRootRecursive } from 'ng-mocks';21import { componentViewSelector } from 'ng-mocks';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentEl } from 'ng-mocks';2describe('TestComponent', () => {3 it('should render the component', () => {4 const fixture = TestBed.createComponent(TestComponent);5 fixture.detectChanges();6 const component = componentEl(fixture);7 expect(component).toBeDefined();8 });9});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { ComponentEl } from 'ng-mocks';2@Component({3})4export class TestComponent {}5describe('TestComponent', () => {6 let componentEl: ComponentEl<TestComponent>;7 beforeEach(() => {8 componentEl = ComponentEl(TestComponent);9 });10 it('should create', () => {11 expect(componentEl).toBeTruthy();12 });13});14import { ComponentEl } from 'ng-mocks';15@Component({16})17export class TestComponent {}18describe('TestComponent', () => {19 let componentEl: ComponentEl<TestComponent>;20 beforeEach(() => {21 componentEl = ComponentEl(TestComponent);22 });23 it('should create', () => {24 expect(componentEl).toBeTruthy();25 });26});27import { ComponentEl } from 'ng-mocks';28@Component({29})30export class TestComponent {}31describe('TestComponent', () => {32 let componentEl: ComponentEl<TestComponent>;33 beforeEach(() => {34 componentEl = ComponentEl(TestComponent);35 });36 it('should create', () => {37 expect(componentEl).toBeTruthy();38 });39});40import { ComponentEl } from 'ng-mocks';41@Component({42})43export class TestComponent {}44describe('TestComponent', () => {45 let componentEl: ComponentEl<TestComponent>;46 beforeEach(() => {47 componentEl = ComponentEl(TestComponent);48 });49 it('should create', () => {50 expect(componentEl).toBeTruthy();51 });52});53import { ComponentEl } from 'ng-mocks';54@Component({55})56export class TestComponent {}57describe('TestComponent', () => {58 let componentEl: ComponentEl<TestComponent>;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {componentEl} from 'ng-mocks';2import {MyComponent} from './my.component';3describe('MyComponent', () => {4 it('should render a div', () => {5 const fixture = createComponent(MyComponent);6 const div = componentEl(fixture, 'div');7 expect(div).toBeDefined();8 });9});10import {componentElAll} from 'ng-mocks';11import {MyComponent} from './my.component';12describe('MyComponent', () => {13 it('should render a div', () => {14 const fixture = createComponent(MyComponent);15 const divs = componentElAll(fixture, 'div');16 expect(divs.length).toBe(2);17 });18});19import {componentElAllDebug} from 'ng-mocks';20import {MyComponent} from './my.component';21describe('MyComponent', () => {22 it('should render a div', () => {23 const fixture = createComponent(MyComponent);24 const debugElements = componentElAllDebug(fixture, 'div');25 expect(debugElements.length).toBe(2);26 });27});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentEl } from 'ng-mocks';2describe('Component', () => {3 it('should be created', () => {4 const fixture = MockRender(Comp);5 const component = componentEl(fixture.debugElement);6 expect(component).toBeDefined();7 });8});

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful