diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index bd95849d..13311860 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -91,6 +91,8 @@ export default class SlAnimation extends ShoelaceElement { connectedCallback() { super.connectedCallback(); this.createAnimation(); + this.handleAnimationCancel = this.handleAnimationCancel.bind(this); + this.handleAnimationFinish = this.handleAnimationFinish.bind(this); } disconnectedCallback() { @@ -116,17 +118,17 @@ export default class SlAnimation extends ShoelaceElement { this.createAnimation(); } - private handleAnimationFinish = () => { + handleAnimationFinish() { this.play = false; this.hasStarted = false; this.emit('sl-finish'); - }; + } - private handleAnimationCancel = () => { + handleAnimationCancel() { this.play = false; this.hasStarted = false; this.emit('sl-cancel'); - }; + } @watch('play') handlePlayChange() { diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 20d314eb..23fd1156 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -93,6 +93,7 @@ export default class SlDialog extends ShoelaceElement { connectedCallback() { super.connectedCallback(); + this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); this.modal = new Modal(this); } @@ -154,12 +155,12 @@ export default class SlDialog extends ShoelaceElement { document.removeEventListener('keydown', this.handleDocumentKeyDown); } - private handleDocumentKeyDown = (event: KeyboardEvent) => { + handleDocumentKeyDown(event: KeyboardEvent) { if (this.open && event.key === 'Escape') { event.stopPropagation(); this.requestClose('keyboard'); } - }; + } @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index b9f26e64..e592382d 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -110,6 +110,7 @@ export default class SlDrawer extends ShoelaceElement { connectedCallback() { super.connectedCallback(); + this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); this.modal = new Modal(this); } @@ -174,12 +175,12 @@ export default class SlDrawer extends ShoelaceElement { document.removeEventListener('keydown', this.handleDocumentKeyDown); } - private handleDocumentKeyDown = (event: KeyboardEvent) => { + handleDocumentKeyDown(event: KeyboardEvent) { if (this.open && !this.contained && event.key === 'Escape') { event.stopPropagation(); this.requestClose('keyboard'); } - }; + } @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 791243ad..f97ade10 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -104,6 +104,11 @@ export default class SlDropdown extends ShoelaceElement { connectedCallback() { super.connectedCallback(); + this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this); + this.handlePanelSelect = this.handlePanelSelect.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); + this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this); if (!this.containingElement) { this.containingElement = this; @@ -139,7 +144,7 @@ export default class SlDropdown extends ShoelaceElement { | undefined; } - private handleKeyDown = (event: KeyboardEvent) => { + handleKeyDown(event: KeyboardEvent) { // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation // in case any ancestors are also listening for this key. if (this.open && event.key === 'Escape') { @@ -147,9 +152,9 @@ export default class SlDropdown extends ShoelaceElement { this.hide(); this.focusOnTrigger(); } - }; + } - private handleDocumentKeyDown = (event: KeyboardEvent) => { + handleDocumentKeyDown(event: KeyboardEvent) { // Handle tabbing if (event.key === 'Tab') { // Tabbing within an open menu should close the dropdown and refocus the trigger @@ -178,22 +183,22 @@ export default class SlDropdown extends ShoelaceElement { } }); } - }; + } - private handleDocumentMouseDown = (event: MouseEvent) => { + handleDocumentMouseDown(event: MouseEvent) { // Close when clicking outside of the containing element const path = event.composedPath(); if (this.containingElement && !path.includes(this.containingElement)) { this.hide(); } - }; + } - private handleMenuItemActivate = (event: CustomEvent) => { + handleMenuItemActivate(event: CustomEvent) { const item = event.target as SlMenuItem; scrollIntoView(item, this.panel); - }; + } - private handlePanelSelect = (event: CustomEvent) => { + handlePanelSelect(event: CustomEvent) { const target = event.target as HTMLElement; // Hide the dropdown when a menu item is selected @@ -201,7 +206,7 @@ export default class SlDropdown extends ShoelaceElement { this.hide(); this.focusOnTrigger(); } - }; + } handleTriggerClick() { if (this.open) { diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index aaad6cdf..922d5bb9 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -44,6 +44,7 @@ export default class SlMutationObserver extends ShoelaceElement { connectedCallback() { super.connectedCallback(); + this.handleMutation = this.handleMutation.bind(this); this.mutationObserver = new MutationObserver(this.handleMutation); @@ -75,11 +76,11 @@ export default class SlMutationObserver extends ShoelaceElement { this.startObserver(); } - private handleMutation = (mutationList: MutationRecord[]) => { + handleMutation(mutationList: MutationRecord[]) { this.emit('sl-mutation', { detail: { mutationList } }); - }; + } startObserver() { const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0; diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 55748ce0..55ad098f 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -99,6 +99,14 @@ export default class SlTooltip extends ShoelaceElement { @property({ type: Boolean }) hoist = false; connectedCallback() { + super.connectedCallback(); + this.handleBlur = this.handleBlur.bind(this); + this.handleClick = this.handleClick.bind(this); + this.handleFocus = this.handleFocus.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleMouseOver = this.handleMouseOver.bind(this); + this.handleMouseOut = this.handleMouseOut.bind(this); + this.updateComplete.then(() => { this.addEventListener('blur', this.handleBlur, true); this.addEventListener('focus', this.handleFocus, true); @@ -162,13 +170,13 @@ export default class SlTooltip extends ShoelaceElement { return target as HTMLElement; } - private handleBlur = () => { + handleBlur() { if (this.hasTrigger('focus')) { this.hide(); } - }; + } - private handleClick = () => { + handleClick() { if (this.hasTrigger('click')) { if (this.open) { this.hide(); @@ -176,37 +184,37 @@ export default class SlTooltip extends ShoelaceElement { this.show(); } } - }; + } - private handleFocus = () => { + handleFocus() { if (this.hasTrigger('focus')) { this.show(); } - }; + } - private handleKeyDown = (event: KeyboardEvent) => { + handleKeyDown(event: KeyboardEvent) { // Pressing escape when the target element has focus should dismiss the tooltip if (this.open && event.key === 'Escape') { event.stopPropagation(); this.hide(); } - }; + } - private handleMouseOver = () => { + handleMouseOver() { if (this.hasTrigger('hover')) { const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay')); clearTimeout(this.hoverTimeout); this.hoverTimeout = window.setTimeout(() => this.show(), delay); } - }; + } - private handleMouseOut = () => { + handleMouseOut() { if (this.hasTrigger('hover')) { const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay')); clearTimeout(this.hoverTimeout); this.hoverTimeout = window.setTimeout(() => this.hide(), delay); } - }; + } @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/internal/form.ts b/src/internal/form.ts index dd9134db..e79c7fac 100644 --- a/src/internal/form.ts +++ b/src/internal/form.ts @@ -142,7 +142,7 @@ export class FormSubmitController implements ReactiveController { } } - private handleFormData = (event: FormDataEvent) => { + handleFormData(event: FormDataEvent) { const disabled = this.options.disabled(this.host); const name = this.options.name(this.host); const value = this.options.value(this.host); @@ -160,9 +160,9 @@ export class FormSubmitController implements ReactiveController { event.formData.append(name, (value as string | number | boolean).toString()); } } - }; + } - private handleFormSubmit = (event: Event) => { + handleFormSubmit(event: Event) { const disabled = this.options.disabled(this.host); const reportValidity = this.options.reportValidity; @@ -177,17 +177,17 @@ export class FormSubmitController implements ReactiveController { event.preventDefault(); event.stopImmediatePropagation(); } - }; + } - private handleFormReset = () => { + handleFormReset() { this.options.setValue(this.host, this.options.defaultValue(this.host)); this.setUserInteracted(this.host, false); - }; + } - private handleUserInput = async () => { + async handleUserInput() { await this.host.updateComplete; this.setUserInteracted(this.host, true); - }; + } reportFormValidity() { //