build(deps-dev): bump eslint dependencies and run formatter

Author: iOvergaard

package-lock.json

@@ -75,8 +75,8 @@
     "@storybook/web-components": "^7.6.12",
     "@storybook/web-components-vite": "^7.6.12",
     "@types/chai": "4.3.5",
-    "@typescript-eslint/eslint-plugin": "6.6.0",
-    "@typescript-eslint/parser": "6.0.0",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "@web/dev-server-esbuild": "0.4.3",
     "@web/test-runner": "0.17.0",
     "@web/test-runner-playwright": "0.11.0",

package.json

@@ -49,7 +49,7 @@ export const AAAOverview: StoryFn = props => html`
             look="${props.look}"
             color="${props.color}">
             <uui-icon name="${el}"></uui-icon>
-          </uui-button>`
+          </uui-button>`,
       )}
     </uui-action-bar>
   </uui-icon-registry-essential>
@@ -71,7 +71,7 @@ export const Single = () => {
                 <uui-icon name="delete"></uui-icon>
               </uui-button>
             </uui-action-bar>
-          </div> `
+          </div> `,
       )}
     </uui-icon-registry-essential>
   `;
@@ -97,12 +97,12 @@ export const LooksAndColors = () => {
                         .look="${look as any}"
                         .color="${color as any}">
                         <uui-icon name="${el}"></uui-icon>
-                      </uui-button>`
+                      </uui-button>`,
                   )}
                 </uui-action-bar>
-              `
+              `,
             )}
-          </div> `
+          </div> `,
       )}
     </uui-icon-registry-essential>
   `;

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -55,7 +55,7 @@ describe('UuiAvatarGroup Limit', async () => {
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
-      </uui-avatar-group>`
+      </uui-avatar-group>`,
     );
   });
 
@@ -76,7 +76,7 @@ describe('UuiAvatarGroup Limit', async () => {
       html` <uui-avatar-group>
         <uui-avatar name="First Last"></uui-avatar>
         <uui-avatar name="First Last"></uui-avatar>
-      </uui-avatar-group>`
+      </uui-avatar-group>`,
     );
 
     const small = avatarGroup.shadowRoot!.querySelector('small');

packages/uui-avatar-group/lib/uui-avatar-group.test.ts

@@ -43,19 +43,19 @@ describe('UuiAvatar', () => {
 
   it('renders an image when imgSrc is set', async () => {
     const avatar = await fixture(
-      html`<uui-avatar img-src="${avatarSrc}" name="My Avatar"></uui-avatar>`
+      html`<uui-avatar img-src="${avatarSrc}" name="My Avatar"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal(
-      `<img alt="MA" src="${avatarSrc}" srcset="" title="My Avatar" /><slot></<slot>`
+      `<img alt="MA" src="${avatarSrc}" srcset="" title="My Avatar" /><slot></<slot>`,
     );
   });
 
   it('renders an image with alt text when imgSrc and text is set', async () => {
     const avatar = await fixture(
-      html`<uui-avatar img-src="${avatarSrc}" name="alt text"></uui-avatar>`
+      html`<uui-avatar img-src="${avatarSrc}" name="alt text"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal(
-      `<img alt="AT" src="${avatarSrc}" srcset="" title="alt text" /><slot></<slot>`
+      `<img alt="AT" src="${avatarSrc}" srcset="" title="alt text" /><slot></<slot>`,
     );
   });
 
@@ -66,7 +66,7 @@ describe('UuiAvatar', () => {
 
   it('shows the first and last initial when text is used and there is no image', async () => {
     const avatar = await fixture(
-      html`<uui-avatar name="First Second Last"></uui-avatar>`
+      html`<uui-avatar name="First Second Last"></uui-avatar>`,
     );
     expect(avatar).shadowDom.to.equal('FL<slot></<slot>');
   });

packages/uui-avatar/lib/uui-avatar.test.ts

@@ -174,9 +174,9 @@ export const LooksAndColors: Story = () => html`
                 >${uppercaseFirstLetter(look)}</uui-badge
               >
             </div>
-          `
+          `,
         )}
       </div>
-    `
+    `,
   )}
 `;

packages/uui-badge/lib/uui-badge.story.ts

@@ -23,5 +23,5 @@ export const UUIHorizontalPulseKeyframes = css`
 `;
 
 export const UUIHorizontalPulseAnimationValue = unsafeCSS(
-  'pulse 0.8s ease-in-out infinite both'
+  'pulse 0.8s ease-in-out infinite both',
 );

packages/uui-base/lib/animations/uui-pulse.ts

@@ -28,5 +28,5 @@ export const UUIHorizontalShakeKeyframes = css`
 `;
 
 export const UUIHorizontalShakeAnimationValue = unsafeCSS(
-  'uui-horizontal-shake 600ms ease backwards'
+  'uui-horizontal-shake 600ms ease backwards',
 );

packages/uui-base/lib/animations/uui-shake.ts

@@ -4,7 +4,7 @@
 
 export class UUIEvent<
   DetailType extends Record<string, any> = Record<string, any>,
-  EventTargetType extends EventTarget | null = EventTarget | null
+  EventTargetType extends EventTarget | null = EventTarget | null,
 > extends Event {
   readonly detail: DetailType;
   readonly target!: EventTargetType;

packages/uui-base/lib/events/UUIEvent.ts

@@ -14,7 +14,7 @@ export declare class ActiveMixinInterface {
  * @mixin
  */
 export const ActiveMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   class ActiveMixinClass extends superClass {
     /**

packages/uui-base/lib/mixins/ActiveMixin.ts

@@ -25,7 +25,7 @@ export declare abstract class FormControlMixinInterface extends LitElement {
   protected addValidator: (
     flagKey: FlagTypes,
     getMessageMethod: () => String,
-    checkMethod: () => boolean
+    checkMethod: () => boolean,
   ) => void;
   protected addFormControlElement(element: NativeFormControlElement): void;
   pristine: boolean;
@@ -66,7 +66,7 @@ interface Validator {
  * @mixin
  */
 export const FormControlMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   abstract class FormControlMixinClass extends superClass {
     /**
@@ -163,12 +163,12 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       this.addValidator(
         'valueMissing',
         () => this.requiredMessage,
-        () => this.hasAttribute('required') && this.hasValue() === false
+        () => this.hasAttribute('required') && this.hasValue() === false,
       );
       this.addValidator(
         'customError',
         () => this.errorMessage,
-        () => this.error
+        () => this.error,
       );
 
       this.addEventListener('blur', () => {
@@ -222,7 +222,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
     protected addValidator(
       flagKey: FlagTypes,
       getMessageMethod: () => String,
-      checkMethod: () => boolean
+      checkMethod: () => boolean,
     ): Validator {
       const obj = {
         flagKey: flagKey,
@@ -266,7 +266,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
         this._customValidityObject = this.addValidator(
           'customError',
           (): string => message,
-          () => true
+          () => true,
         );
       }
 
@@ -284,7 +284,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
             this._internals.setValidity(
               (this as any)._validityState,
               formCtrlEl.validationMessage,
-              formCtrlEl
+              formCtrlEl,
             );
           }
         }
@@ -297,7 +297,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
           this._internals.setValidity(
             this._validityState,
             validator.getMessageMethod(),
-            this.getFormElement()
+            this.getFormElement(),
           );
         }
       });
@@ -309,7 +309,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
 
       if (hasError) {
         this.dispatchEvent(
-          new UUIFormControlEvent(UUIFormControlEvent.INVALID)
+          new UUIFormControlEvent(UUIFormControlEvent.INVALID),
         );
       } else {
         this._internals.setValidity({});

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -23,7 +23,7 @@ export declare class LabelMixinInterface {
  */
 export const LabelMixin = <T extends Constructor<LitElement>>(
   labelSlotName: string | null,
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * Label mixin class containing the label functionality.

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -26,7 +26,7 @@ export declare class PopoverTargetMixinInterface {
  * @mixin
  */
 export const PopoverTargetMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * Popover target mixin class containing the popover target functionality.
@@ -54,7 +54,7 @@ export const PopoverTargetMixin = <T extends Constructor<LitElement>>(
       const popoverContainerElement = findAncestorByAttributeValue(
         this,
         'id',
-        this.popoverContainerElement
+        this.popoverContainerElement,
       );
       if (!popoverContainerElement) return;
 

packages/uui-base/lib/mixins/PopoverTargetMixin.ts

@@ -15,9 +15,9 @@ export declare class SelectOnlyMixinInterface extends SelectableMixinInterface {
  * @mixin
  */
 export const SelectOnlyMixin = <
-  T extends Constructor<SelectableMixinInterface>
+  T extends Constructor<SelectableMixinInterface>,
 >(
-  superClass: T
+  superClass: T,
 ) => {
   class SelectOnlyMixinClass extends superClass {
     private _selectOnly = false;

packages/uui-base/lib/mixins/SelectOnlyMixin.ts

@@ -20,7 +20,7 @@ export declare class SelectableMixinInterface extends LitElement {
  * @mixin
  */
 export const SelectableMixin = <T extends Constructor<LitElement>>(
-  superClass: T
+  superClass: T,
 ) => {
   /**
    * @fires {UUISelectableEvent} selected - fires when the media card is selected

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -7,14 +7,14 @@
  */
 export function defineElement(
   name: string,
-  options?: ElementDefinitionOptions | undefined
+  options?: ElementDefinitionOptions | undefined,
 ) {
   return (constructor: CustomElementConstructor) => {
     const isValidElementName = name.indexOf('-') > 0;
 
     if (isValidElementName === false) {
       console.error(
-        `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`
+        `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`,
       );
       return;
     }

packages/uui-base/lib/registration/index.ts

@@ -4,7 +4,10 @@ export class Timer {
   private _duration!: number;
   private _remaining: number | null = null;
 
-  constructor(private _callback: Function, duration: number) {
+  constructor(
+    private _callback: Function,
+    duration: number,
+  ) {
     this.setDuration(duration);
   }
 

packages/uui-base/lib/utils/Timer.ts

@@ -8,14 +8,14 @@
 export const demandCustomElement = (
   requester: HTMLElement,
   elementName: string,
-  message: string = `This element has to be present for ${requester.nodeName} to work appropriate.`
+  message: string = `This element has to be present for ${requester.nodeName} to work appropriate.`,
 ) => {
   if (!customElements.get(elementName)) {
     console.warn(
       `%c ${requester.nodeName} requires ${elementName} element to be registered!`,
       'font-weight: bold;',
       message,
-      requester
+      requester,
     );
   }
 };

packages/uui-base/lib/utils/demandCustomElement.ts

@@ -13,7 +13,7 @@ interface DragOptions {
 
 export const drag = (
   container: HTMLElement,
-  options?: Partial<DragOptions>
+  options?: Partial<DragOptions>,
 ) => {
   function move(event: PointerEvent | TouchEvent) {
     const dims = container.getBoundingClientRect();

packages/uui-base/lib/utils/drag.ts

@@ -8,7 +8,7 @@
 export const findAncestorByAttributeValue = (
   startNode: HTMLElement | ParentNode,
   attributeName: string,
-  attributeValue: string
+  attributeValue: string,
 ): HTMLElement | null => {
   let currentNode: typeof startNode | null = startNode;
 
@@ -28,7 +28,7 @@ export const findAncestorByAttributeValue = (
       return currentNode as HTMLElement; // Found a matching ancestor
     } else if (elementContainsAttribute) {
       return currentNode.querySelector(
-        `[${attributeName}="${attributeValue}"]`
+        `[${attributeName}="${attributeValue}"]`,
       ) as HTMLElement; // Found a matching ancestor
     }
 

packages/uui-base/lib/utils/findAncestorByAttributeValue.ts

@@ -19,7 +19,7 @@ export const clamp = (value: number, min: number, max: number) => {
 export const reverseNumberInRange = (
   num: number,
   min: number,
-  max: number
+  max: number,
 ): number => {
   return max + min - num;
 };

packages/uui-base/lib/utils/math.ts

@@ -13,7 +13,7 @@ type LabelPosition = 'left' | 'right' | 'top' | 'bottom';
  * @abstract
  */
 export abstract class UUIBooleanInputElement extends FormControlMixin(
-  LabelMixin('', LitElement)
+  LabelMixin('', LitElement),
 ) {
   /** intentional overwrite of FormControlMixins value getter and setter method. */
   get value() {
@@ -28,7 +28,7 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
       'setFormValue' in window.ElementInternals.prototype
     ) {
       this._internals.setFormValue(
-        this._checked && this.name !== '' ? this._value : null
+        this._checked && this.name !== '' ? this._value : null,
       );
     }
 
@@ -65,7 +65,7 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
         ? this._value
           ? this._value
           : 'on'
-        : null
+        : null,
     );
     this.requestUpdate('checked', oldValue);
   }
@@ -113,7 +113,7 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
   }
 
   protected firstUpdated(
-    _changedProperties: Map<string | number | symbol, unknown>
+    _changedProperties: Map<string | number | symbol, unknown>,
   ): void {
     super.firstUpdated(_changedProperties);