diff --git a/button/lib/button.ts b/button/lib/button.ts index 29574d125c..4dae576322 100644 --- a/button/lib/button.ts +++ b/button/lib/button.ts @@ -179,7 +179,7 @@ export abstract class Button extends LitElement { this.handleSlotChange}">`; } - private handleClick(e: MouseEvent) { + private handleClick(event: MouseEvent) { if (this.isRedispatchingEvent) { return; } @@ -192,9 +192,9 @@ export abstract class Button extends LitElement { if (!(isSubmit || isReset)) { return; } - e.stopPropagation(); + event.stopPropagation(); this.isRedispatchingEvent = true; - const prevented = !redispatchEvent(this, e); + const prevented = !redispatchEvent(this, event); this.isRedispatchingEvent = false; if (prevented) { return; diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts index a956f48900..645af3f09f 100644 --- a/dialog/demo/stories.ts +++ b/dialog/demo/stories.ts @@ -30,8 +30,8 @@ export interface StoryKnobs { supportingText: string; } -function clickHandler(e: Event) { - ((e.target as Element).nextElementSibling as MdDialog)?.show(); +function clickHandler(event: Event) { + ((event.target as Element).nextElementSibling as MdDialog)?.show(); } diff --git a/dialog/lib/dialog.ts b/dialog/lib/dialog.ts index cad542c3c3..1b38b7cc35 100644 --- a/dialog/lib/dialog.ts +++ b/dialog/lib/dialog.ts @@ -440,7 +440,7 @@ export class Dialog extends LitElement { /* Live media query for matching user specified fullscreen breakpoint. */ private fullscreenQuery?: MediaQueryList; private fullscreenQueryListener: - ((e: MediaQueryListEvent) => void)|undefined = undefined; + ((event: MediaQueryListEvent) => void)|undefined = undefined; private updateFullscreen() { if (this.fullscreenQuery !== undefined) { this.fullscreenQuery.removeEventListener( @@ -462,15 +462,15 @@ export class Dialog extends LitElement { // handles native close/cancel events and we just ensure // internal state is in sync. - private handleDialogDismiss(e: Event) { - if (e.type === 'cancel') { + private handleDialogDismiss(event: Event) { + if (event.type === 'cancel') { this.currentAction = this.escapeKeyAction; // Prevents the element from closing when // `escapeKeyAction` is set to an empty string. // It also early returns and avoids internal state // changes. if (this.escapeKeyAction === '') { - e.preventDefault(); + event.preventDefault(); return; } } @@ -479,17 +479,17 @@ export class Dialog extends LitElement { this.open = false; this.opening = false; this.closing = false; - redispatchEvent(this, e); + redispatchEvent(this, event); } - private handleDialogClick(e: Event) { + private handleDialogClick(event: Event) { if (!this.open) { return; } this.currentAction = - (e.target as Element).getAttribute(this.actionAttribute) ?? + (event.target as Element).getAttribute(this.actionAttribute) ?? (!this.modeless && this.containerElement && - !e.composedPath().includes(this.containerElement) ? + !event.composedPath().includes(this.containerElement) ? this.scrimClickAction : ''); if (this.currentAction !== '') { @@ -525,29 +525,30 @@ export class Dialog extends LitElement { this.getFocusElement()?.blur(); } - private canStartDrag(e: PointerEvent) { - if (this.draggable === false || e.defaultPrevented || !(e.buttons & 1) || - !this.headerElement || !e.composedPath().includes(this.headerElement)) { + private canStartDrag(event: PointerEvent) { + if (this.draggable === false || event.defaultPrevented || + !(event.buttons & 1) || !this.headerElement || + !event.composedPath().includes(this.headerElement)) { return false; } return true; } - private handlePointerMove(e: PointerEvent) { - if (!this.dragging && !this.canStartDrag(e) || !this.containerElement) { + private handlePointerMove(event: PointerEvent) { + if (!this.dragging && !this.canStartDrag(event) || !this.containerElement) { return; } const {top, left, height, width} = this.containerElement.getBoundingClientRect(); if (!this.dragging) { - this.containerElement.setPointerCapture(e.pointerId); + this.containerElement.setPointerCapture(event.pointerId); this.dragging = true; - const {x, y} = e; + const {x, y} = event; this.dragInfo = [x, y, top, left]; } const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0]; - const dx = e.x - sx; - const dy = e.y - sy; + const dx = event.x - sx; + const dy = event.y - sy; const ml = window.innerWidth - width - this.dragMargin; const mt = window.innerHeight - height - this.dragMargin; const l = Math.max(this.dragMargin, Math.min(ml, dx + sl)); @@ -556,11 +557,11 @@ export class Dialog extends LitElement { this.style.setProperty('--_container-drag-block-start', `${t}px`); } - private handleDragEnd(e: PointerEvent) { + private handleDragEnd(event: PointerEvent) { if (!this.dragging) { return; } - this.containerElement?.releasePointerCapture(e.pointerId); + this.containerElement?.releasePointerCapture(event.pointerId); this.dragging = false; this.dragInfo = undefined; } diff --git a/fab/lib/shared.ts b/fab/lib/shared.ts index e196fac822..801f5b4608 100644 --- a/fab/lib/shared.ts +++ b/fab/lib/shared.ts @@ -115,8 +115,8 @@ export abstract class SharedFab extends LitElement { `; } - private onSlotchange(e: Event) { - const slotEl = e.target as HTMLSlotElement; + private onSlotchange(event: Event) { + const slotEl = event.target as HTMLSlotElement; const slottedEls = slotEl.assignedElements({flatten: true}); this.hasIcon = slottedEls.length !== 0; } diff --git a/labs/navigationdrawer/lib/navigation-drawer-modal.ts b/labs/navigationdrawer/lib/navigation-drawer-modal.ts index 3cc2131f5a..0c5ccfab73 100644 --- a/labs/navigationdrawer/lib/navigation-drawer-modal.ts +++ b/labs/navigationdrawer/lib/navigation-drawer-modal.ts @@ -72,8 +72,8 @@ export class NavigationDrawerModal extends LitElement { } } - private handleKeyDown(e: KeyboardEvent) { - if (e.code === 'Escape') { + private handleKeyDown(event: KeyboardEvent) { + if (event.code === 'Escape') { this.opened = false; } } diff --git a/labs/segmentedbuttonset/lib/segmented-button-set.ts b/labs/segmentedbuttonset/lib/segmented-button-set.ts index 5ca0a41e5c..2fa303f315 100644 --- a/labs/segmentedbuttonset/lib/segmented-button-set.ts +++ b/labs/segmentedbuttonset/lib/segmented-button-set.ts @@ -64,8 +64,8 @@ export class SegmentedButtonSet extends LitElement { } } - private handleSegmentedButtonInteraction(e: CustomEvent) { - const index = this.buttons.indexOf(e.target as SegmentedButton); + private handleSegmentedButtonInteraction(event: CustomEvent) { + const index = this.buttons.indexOf(event.target as SegmentedButton); this.toggleSelection(index); } diff --git a/list/lib/list.ts b/list/lib/list.ts index 58953d44e2..e872751bc0 100644 --- a/list/lib/list.ts +++ b/list/lib/list.ts @@ -92,8 +92,8 @@ export class List extends LitElement { * The content to be slotted into the list. */ private renderContent() { - return html` { - e.stopPropagation(); + return html` { + event.stopPropagation(); }}>`; } diff --git a/menu/demo/stories.ts b/menu/demo/stories.ts index 2a1e0a3de4..6e5eb5fbaf 100644 --- a/menu/demo/stories.ts +++ b/menu/demo/stories.ts @@ -240,12 +240,13 @@ const menuWithoutButton: MaterialStoryInit = { }; function displayCloseEvent(outputRef: Ref) { - return (e: CloseMenuEvent) => { + return (event: CloseMenuEvent) => { if (!outputRef.value) return; outputRef.value.innerText = `Closed by item(s) with text: ${ - JSON.stringify(e.itemPath.map( - item => item.headline))} For reason: ${JSON.stringify(e.reason)}`; + JSON.stringify(event.itemPath.map( + item => + item.headline))} For reason: ${JSON.stringify(event.reason)}`; }; } @@ -311,7 +312,7 @@ function renderSubMenu( function renderMenu( knobs: StoryKnobs, anchorRef: Ref, menuRef: Ref, - onClose: (e: CloseMenuEvent) => void, hasOverflow: boolean, + onClose: (event: CloseMenuEvent) => void, hasOverflow: boolean, ...content: unknown[]) { return html` { - if (!this.stayOpenOnOutsideClick && !e.composedPath().includes(this)) { + private readonly onWindowClick = (event: MouseEvent) => { + if (!this.stayOpenOnOutsideClick && !event.composedPath().includes(this)) { this.open = false; } }; @@ -648,8 +648,8 @@ export abstract class Menu extends LitElement { this.close(); } - private onDeactivateItems(e: Event) { - e.stopPropagation(); + private onDeactivateItems(event: Event) { + event.stopPropagation(); const items = this.items; for (const item of items) { item.active = false; @@ -657,27 +657,27 @@ export abstract class Menu extends LitElement { } } - private handleDeactivateTypeahead(e: DeactivateTypeaheadEvent) { + private handleDeactivateTypeahead(event: DeactivateTypeaheadEvent) { // stopPropagation so that this does not deactivate any typeaheads in menus // nested above it e.g. md-sub-menu-item - e.stopPropagation(); + event.stopPropagation(); this.typeaheadActive = false; } - private handleActivateTypeahead(e: ActivateTypeaheadEvent) { + private handleActivateTypeahead(event: ActivateTypeaheadEvent) { // stopPropagation so that this does not activate any typeaheads in menus // nested above it e.g. md-sub-menu-item - e.stopPropagation(); + event.stopPropagation(); this.typeaheadActive = true; } - private handleStayOpenOnFocusout(e: Event) { - e.stopPropagation(); + private handleStayOpenOnFocusout(event: Event) { + event.stopPropagation(); this.stayOpenOnFocusout = true; } - private handleCloseOnFocusout(e: Event) { - e.stopPropagation(); + private handleCloseOnFocusout(event: Event) { + event.stopPropagation(); this.stayOpenOnFocusout = false; } diff --git a/menu/lib/menuitem/menu-item.ts b/menu/lib/menuitem/menu-item.ts index 54af7fe89a..5195ff753e 100644 --- a/menu/lib/menuitem/menu-item.ts +++ b/menu/lib/menuitem/menu-item.ts @@ -40,12 +40,12 @@ export class MenuItemEl extends ListItemEl implements MenuItem { new DefaultCloseMenuEvent(this, {kind: CLOSE_REASON.CLICK_SELECTION})); } - protected override onKeydown(e: KeyboardEvent) { + protected override onKeydown(event: KeyboardEvent) { if (this.keepOpen) return; - const keyCode = e.code; + const keyCode = event.code; - if (!e.defaultPrevented && isClosableKey(keyCode)) { - e.preventDefault(); + if (!event.defaultPrevented && isClosableKey(keyCode)) { + event.preventDefault(); this.dispatchEvent(new DefaultCloseMenuEvent( this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode})); } diff --git a/menu/lib/menuitemlink/menu-item-link.ts b/menu/lib/menuitemlink/menu-item-link.ts index 56d3dddfba..cfec963d5a 100644 --- a/menu/lib/menuitemlink/menu-item-link.ts +++ b/menu/lib/menuitemlink/menu-item-link.ts @@ -33,14 +33,14 @@ export class MenuItemLink extends ListItemLink implements MenuItem { new DefaultCloseMenuEvent(this, {kind: CLOSE_REASON.CLICK_SELECTION})); } - protected override onKeydown(e: KeyboardEvent) { + protected override onKeydown(event: KeyboardEvent) { if (this.keepOpen) return; - const keyCode = e.code; + const keyCode = event.code; // Do not preventDefault on enter or else it will prevent from opening links - if (!e.defaultPrevented && isClosableKey(keyCode) && + if (!event.defaultPrevented && isClosableKey(keyCode) && keyCode !== SELECTION_KEY.ENTER) { - e.preventDefault(); + event.preventDefault(); this.dispatchEvent(new DefaultCloseMenuEvent( this, {kind: CLOSE_REASON.KEYDOWN, key: keyCode})); } diff --git a/menu/lib/submenuitem/sub-menu-item.ts b/menu/lib/submenuitem/sub-menu-item.ts index f01d8b09a2..6e6b32cdb9 100644 --- a/menu/lib/submenuitem/sub-menu-item.ts +++ b/menu/lib/submenuitem/sub-menu-item.ts @@ -12,8 +12,8 @@ import {Corner, Menu} from '../menu.js'; import {MenuItemEl} from '../menuitem/menu-item.js'; import {ActivateTypeaheadEvent, CLOSE_REASON, CloseMenuEvent, CloseOnFocusoutEvent, DeactivateItemsEvent, DeactivateTypeaheadEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY, StayOpenOnFocusoutEvent} from '../shared.js'; -function stopPropagation(e: Event) { - e.stopPropagation(); +function stopPropagation(event: Event) { + event.stopPropagation(); } /** @@ -108,16 +108,16 @@ export class SubMenuItem extends MenuItemEl { /** * On item keydown handles opening the submenu. */ - protected override onKeydown(e: KeyboardEvent) { - const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code); + protected override onKeydown(event: KeyboardEvent) { + const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code); - if (e.code === SELECTION_KEY.SPACE) { + if (event.code === SELECTION_KEY.SPACE) { // prevent space from scrolling. Only open the submenu. - e.preventDefault(); + event.preventDefault(); } if (!shouldOpenSubmenu) { - super.onKeydown(e); + super.onKeydown(event); return; } @@ -156,16 +156,16 @@ export class SubMenuItem extends MenuItemEl { >`; } - private onCloseSubmenu(e: CloseMenuEvent) { - e.itemPath.push(this); + private onCloseSubmenu(event: CloseMenuEvent) { + event.itemPath.push(this); // Restore focusout behavior this.dispatchEvent(new CloseOnFocusoutEvent()); this.dispatchEvent(new ActivateTypeaheadEvent()); // Escape should only close one menu not all of the menus unlike space or // click selection which should close all menus. - if (e.reason.kind === CLOSE_REASON.KEYDOWN && - e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) { - e.stopPropagation(); + if (event.reason.kind === CLOSE_REASON.KEYDOWN && + event.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) { + event.stopPropagation(); this.active = true; this.selected = false; // It might already be active so manually focus @@ -177,12 +177,12 @@ export class SubMenuItem extends MenuItemEl { this.selected = false; } - private async onSubMenuKeydown(e: KeyboardEvent) { + private async onSubMenuKeydown(event: KeyboardEvent) { // Stop propagation so that we don't accidentally close every parent menu. // Additionally, we want to isolate things like the typeahead keydowns // from bubbling up to the parent menu and confounding things. - e.stopPropagation(); - const shouldClose = this.isSubmenuCloseKey(e.code); + event.stopPropagation(); + const shouldClose = this.isSubmenuCloseKey(event.code); if (!shouldClose) return; diff --git a/menu/lib/typeaheadController.ts b/menu/lib/typeaheadController.ts index 48f68edd75..834b19cfa9 100644 --- a/menu/lib/typeaheadController.ts +++ b/menu/lib/typeaheadController.ts @@ -118,20 +118,20 @@ export class TypeaheadController { * Apply this listener to the element that will receive `keydown` events that * should trigger this controller. * - * @param e The native browser `KeyboardEvent` from the `keydown` event. + * @param event The native browser `KeyboardEvent` from the `keydown` event. */ - readonly onKeydown = (e: KeyboardEvent) => { + readonly onKeydown = (event: KeyboardEvent) => { if (this.isTypingAhead) { - this.typeahead(e); + this.typeahead(event); } else { - this.beginTypeahead(e); + this.beginTypeahead(event); } }; /** * Sets up typingahead */ - private beginTypeahead(e: KeyboardEvent) { + private beginTypeahead(event: KeyboardEvent) { if (!this.active) { return; } @@ -139,8 +139,8 @@ export class TypeaheadController { // We don't want to typeahead if the _beginning_ of the typeahead is a menu // navigation, or a selection. We will handle "Space" only if it's in the // middle of a typeahead - if (e.code === 'Space' || e.code === 'Enter' || - e.code.startsWith('Arrow') || e.code === 'Escape') { + if (event.code === 'Space' || event.code === 'Enter' || + event.code.startsWith('Arrow') || event.code === 'Escape') { return; } @@ -156,7 +156,7 @@ export class TypeaheadController { if (this.lastActiveRecord) { this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false; } - this.typeahead(e); + this.typeahead(event); } /** @@ -195,12 +195,12 @@ export class TypeaheadController { * * activates Olive */ - private typeahead(e: KeyboardEvent) { + private typeahead(event: KeyboardEvent) { clearTimeout(this.cancelTypeaheadTimeout); // Stop typingahead if one of the navigation or selection keys (except for // Space) are pressed - if (e.code === 'Enter' || e.code.startsWith('Arrow') || - e.code === 'Escape') { + if (event.code === 'Enter' || event.code.startsWith('Arrow') || + event.code === 'Escape') { this.endTypeahead(); if (this.lastActiveRecord) { this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false; @@ -209,16 +209,16 @@ export class TypeaheadController { } // If Space is pressed, prevent it from selecting and closing the menu - if (e.code === 'Space') { - e.stopPropagation(); - e.preventDefault(); + if (event.code === 'Space') { + event.stopPropagation(); + event.preventDefault(); } // Start up a new keystroke buffer timeout this.cancelTypeaheadTimeout = setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime); - this.typaheadBuffer += e.key.toLowerCase(); + this.typaheadBuffer += event.key.toLowerCase(); const lastActiveIndex = this.lastActiveRecord ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] : diff --git a/select/lib/select.ts b/select/lib/select.ts index ad3847caf9..ecca693f82 100644 --- a/select/lib/select.ts +++ b/select/lib/select.ts @@ -279,30 +279,30 @@ export abstract class Select extends LitElement { * Handles opening the select on keydown and typahead selection when the menu * is closed. */ - private handleKeydown(e: KeyboardEvent) { + private handleKeydown(event: KeyboardEvent) { if (this.open || this.disabled || !this.menu) { return; } const typeaheadController = this.menu.typeaheadController; - const isOpenKey = - e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter'; + const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' || + event.code === 'Enter'; // Do not open if currently typing ahead because the user may be typing the // spacebar to match a word with a space if (!typeaheadController.isTypingAhead && isOpenKey) { - e.preventDefault(); + event.preventDefault(); this.open = true; return; } - const isPrintableKey = e.key.length === 1; + const isPrintableKey = event.key.length === 1; // Handles typing ahead when the menu is closed by delegating the event to // the underlying menu's typeaheadController if (isPrintableKey) { - typeaheadController.onKeydown(e); - e.preventDefault(); + typeaheadController.onKeydown(event); + event.preventDefault(); const {lastActiveRecord} = typeaheadController; @@ -334,10 +334,10 @@ export abstract class Select extends LitElement { /** * Handles closing the menu when the focus leaves the select's subtree. */ - private handleFocusout(e: FocusEvent) { + private handleFocusout(event: FocusEvent) { // Don't close the menu if we are switching focus between menu, // select-option, and field - if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) { + if (event.relatedTarget && isElementInSubtree(event.relatedTarget, this)) { return; } @@ -445,9 +445,9 @@ export abstract class Select extends LitElement { /** * Determines the reason for closing, and updates the UI accordingly. */ - private handleCloseMenu(e: InstanceType) { - const reason = e.reason; - const item = e.itemPath[0] as SelectOption; + private handleCloseMenu(event: InstanceType) { + const reason = event.reason; + const item = event.itemPath[0] as SelectOption; this.open = false; let hasChanged = false; @@ -488,8 +488,8 @@ export abstract class Select extends LitElement { * Handles updating selection when an option element requests selection via * property / attribute change. */ - private handleRequestSelection(e: RequestSelectionEvent) { - const requestingOptionEl = e.target as SelectOption & HTMLElement; + private handleRequestSelection(event: RequestSelectionEvent) { + const requestingOptionEl = event.target as SelectOption & HTMLElement; // No-op if this item is already selected. if (this.lastSelectedOptionRecords.some( @@ -504,8 +504,8 @@ export abstract class Select extends LitElement { * Handles updating selection when an option element requests deselection via * property / attribute change. */ - private handleRequestDeselection(e: RequestDeselectionEvent) { - const requestingOptionEl = e.target as SelectOption & HTMLElement; + private handleRequestDeselection(event: RequestDeselectionEvent) { + const requestingOptionEl = event.target as SelectOption & HTMLElement; // No-op if this item is not even in the list of tracked selected items. if (!this.lastSelectedOptionRecords.some( diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts index 0e0a055aa9..9b8642486f 100644 --- a/slider/lib/slider.ts +++ b/slider/lib/slider.ts @@ -441,16 +441,16 @@ export class Slider extends LitElement { } } - private handleFocus(e: Event) { - this.updateOnTop(e.target as HTMLInputElement); + private handleFocus(event: Event) { + this.updateOnTop(event.target as HTMLInputElement); } - private startAction(e: Event) { - const target = e.target as HTMLInputElement; + private startAction(event: Event) { + const target = event.target as HTMLInputElement; const fixed = (target === this.inputStart) ? this.inputEnd! : this.inputStart!; this.action = { - canFlip: e.type === 'pointerdown', + canFlip: event.type === 'pointerdown', flipped: false, target, fixed, @@ -459,22 +459,22 @@ export class Slider extends LitElement { }; } - private finishAction(e: Event) { + private finishAction(event: Event) { this.action = undefined; } - private handleKeydown(e: KeyboardEvent) { - this.startAction(e); + private handleKeydown(event: KeyboardEvent) { + this.startAction(event); } - private handleKeyup(e: KeyboardEvent) { - this.finishAction(e); + private handleKeyup(event: KeyboardEvent) { + this.finishAction(event); } - private handleDown(e: PointerEvent) { - this.startAction(e); - this.ripplePointerId = e.pointerId; - const isStart = e.target as HTMLInputElement === this.inputStart; + private handleDown(event: PointerEvent) { + this.startAction(event); + this.ripplePointerId = event.pointerId; + const isStart = event.target as HTMLInputElement === this.inputStart; // Since handle moves to pointer on down and there may not be a move, // it needs to be considered hovered.. this.handleStartHover = @@ -482,7 +482,7 @@ export class Slider extends LitElement { this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd); } - private async handleUp(e: PointerEvent) { + private async handleUp(event: PointerEvent) { const {target, values, flipped} = this.action ?? {}; // Async here for Firefox because input can be after pointerup // when value is calmped. @@ -497,7 +497,7 @@ export class Slider extends LitElement { target.dispatchEvent(new Event('change', {bubbles: true})); } } - this.finishAction(e); + this.finishAction(event); } /** @@ -513,13 +513,13 @@ export class Slider extends LitElement { * of the directive. This is done based on the hover state when the * slider is updated. */ - private handleMove(e: PointerEvent) { - this.handleStartHover = !this.disabled && inBounds(e, this.handleStart); - this.handleEndHover = !this.disabled && inBounds(e, this.handleEnd); + private handleMove(event: PointerEvent) { + this.handleStartHover = !this.disabled && inBounds(event, this.handleStart); + this.handleEndHover = !this.disabled && inBounds(event, this.handleEnd); } - private handleEnter(e: PointerEvent) { - this.handleMove(e); + private handleEnter(event: PointerEvent) { + this.handleMove(event); } private handleLeave() { @@ -576,7 +576,7 @@ export class Slider extends LitElement { return true; } - private handleInput(e: InputEvent) { + private handleInput(event: InputEvent) { // avoid processing a re-dispatched event if (this.isRedisptchingEvent) { return; @@ -603,28 +603,28 @@ export class Slider extends LitElement { } // control external visibility of input event if (stopPropagation) { - e.stopPropagation(); + event.stopPropagation(); } // ensure event path is correct when flipped. if (redispatch) { this.isRedisptchingEvent = true; - redispatchEvent(target, e); + redispatchEvent(target, event); this.isRedisptchingEvent = false; } } - private handleChange(e: Event) { + private handleChange(event: Event) { // prevent keyboard triggered changes from dispatching for // clamped values; note, this only occurs for keyboard - const changeTarget = e.target as HTMLInputElement; + const changeTarget = event.target as HTMLInputElement; const {target, values} = this.action ?? {}; const squelch = (target && (target.valueAsNumber === values!.get(changeTarget)!)); if (!squelch) { - redispatchEvent(this, e); + redispatchEvent(this, event); } // ensure keyboard triggered change clears action. - this.finishAction(e); + this.finishAction(event); } /** @private */ diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts index 3ae0fea3d7..127a379f2c 100644 --- a/tabs/demo/stories.ts +++ b/tabs/demo/stories.ts @@ -337,13 +337,13 @@ const dynamic: MaterialStoryInit = { const variant = `primary ${vertical}` as Variant; const classes = {vertical, scrolling: true}; - function getTabs(e: Event) { - return ((e.target! as Element).getRootNode() as ShadowRoot) + function getTabs(event: Event) { + return ((event.target! as Element).getRootNode() as ShadowRoot) .querySelector('md-tabs')!; } - function addTab(e: Event) { - const tabs = getTabs(e); + function addTab(event: Event) { + const tabs = getTabs(event); const count = tabs.childElementCount; const tab = document.createElement('md-tab'); tab.textContent = `Tab ${count + 1}`; @@ -355,8 +355,8 @@ const dynamic: MaterialStoryInit = { tabs.selected = count; } } - function removeTab(e: Event) { - const tabs = getTabs(e); + function removeTab(event: Event) { + const tabs = getTabs(event); if (tabs.selectedItem === undefined) { return; } @@ -365,8 +365,8 @@ const dynamic: MaterialStoryInit = { tabs.selected = Math.min(count - 1, tabs.selected); } - function moveTabTowardsEnd(e: Event) { - const tabs = getTabs(e); + function moveTabTowardsEnd(event: Event) { + const tabs = getTabs(event); const next = tabs.selectedItem?.nextElementSibling; if (next) { next.after(tabs.selectedItem); @@ -374,8 +374,8 @@ const dynamic: MaterialStoryInit = { } } - function moveTabTowardsStart(e: Event) { - const tabs = getTabs(e); + function moveTabTowardsStart(event: Event) { + const tabs = getTabs(event); const previous = tabs.selectedItem?.previousElementSibling; if (previous) { previous.before(tabs.selectedItem); diff --git a/tabs/lib/tabs.ts b/tabs/lib/tabs.ts index 9950d3ab03..dd02a2bd8c 100644 --- a/tabs/lib/tabs.ts +++ b/tabs/lib/tabs.ts @@ -100,7 +100,7 @@ export class Tabs extends LitElement { * The item currently focused. */ protected get focusedItem() { - return this.items.find((e: HTMLElement) => e.matches(':focus-within')); + return this.items.find((el: HTMLElement) => el.matches(':focus-within')); } constructor() { diff --git a/textfield/demo/stories.ts b/textfield/demo/stories.ts index 0b5603a924..de96f26ea1 100644 --- a/textfield/demo/stories.ts +++ b/textfield/demo/stories.ts @@ -84,8 +84,8 @@ const outlined: MaterialStoryInit = { const LEADING_ICON = html`search`; const TRAILING_ICON = html`event`; -function reportValidity(e: Event) { - (e.target as MdFilledTextField).reportValidity(); +function reportValidity(event: Event) { + (event.target as MdFilledTextField).reportValidity(); } /** Textfield stories. */