chore: format files with prettier

PiperOrigin-RevId: 576199164
material-components · Oct 25, 2023 · 2713e2c · 2713e2c
1 parent d09bdc4
commit 2713e2c
Show file tree

Hide file tree

Showing 216 changed files with 6,440 additions and 5,169 deletions.
diff --git a/button/demo/demo.ts b/button/demo/demo.ts
@@ -4,19 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.js';
 import './material-collection.js';
+import './index.js';
 
-import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
 import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
-const collection =
-    new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Button', [
-      new Knob('label', {ui: textInput(), defaultValue: ''}),
-      new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-    ]);
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Button',
+  [
+    new Knob('label', {ui: textInput(), defaultValue: ''}),
+    new Knob('disabled', {ui: boolInput(), defaultValue: false}),
+  ],
+);
 
 collection.addStories(...materialInitsToStoryInits(stories));
 

diff --git a/button/demo/stories.ts b/button/demo/stories.ts
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
 import '@material/web/button/filled-button.js';
+import '@material/web/button/filled-tonal-button.js';
 import '@material/web/button/outlined-button.js';
 import '@material/web/button/text-button.js';
-import '@material/web/button/filled-tonal-button.js';
+import '@material/web/icon/icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html} from 'lit';
@@ -88,7 +88,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
         </div>
       </div>
     `;
-  }
+  },
 };
 
 const links: MaterialStoryInit<StoryKnobs> = {
@@ -101,92 +101,82 @@ const links: MaterialStoryInit<StoryKnobs> = {
           <md-filled-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Filled'}
           </md-filled-button>
 
           <md-outlined-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Outlined'}
           </md-outlined-button>
 
           <md-elevated-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Elevated'}
           </md-elevated-button>
 
           <md-filled-tonal-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Tonal'}
           </md-filled-tonal-button>
 
           <md-text-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             ${label || 'Text'}
           </md-text-button>
         </div>
         <div class="row">
           <md-filled-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Filled'}
           </md-filled-button>
 
           <md-outlined-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Outlined'}
           </md-outlined-button>
 
           <md-elevated-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Elevated'}
           </md-elevated-button>
 
           <md-filled-tonal-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Tonal'}
           </md-filled-tonal-button>
 
           <md-text-button
             href="https://google.com"
             target="_blank"
-            trailing-icon
-          >
+            trailing-icon>
             <md-icon slot="icon">open_in_new</md-icon>
             ${label || 'Text'}
           </md-text-button>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 /** Button stories. */

diff --git a/button/elevated-button.ts b/button/elevated-button.ts
@@ -41,6 +41,9 @@ declare global {
  */
 @customElement('md-elevated-button')
 export class MdElevatedButton extends ElevatedButton {
-  static override styles =
-      [sharedStyles, sharedElevationStyles, elevatedStyles];
+  static override styles = [
+    sharedStyles,
+    sharedElevationStyles,
+    elevatedStyles,
+  ];
 }
diff --git a/button/internal/button.ts b/button/internal/button.ts
@@ -10,13 +10,20 @@ import '../../ripple/ripple.js';
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {html as staticHtml, literal} from 'lit/static-html.js';
+import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
 import {internals} from '../../internal/controller/element-internals.js';
-import {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';
-import {FormSubmitter, FormSubmitterType, setupFormSubmitter} from '../../internal/controller/form-submitter.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '../../internal/controller/events.js';
+import {
+  FormSubmitter,
+  FormSubmitterType,
+  setupFormSubmitter,
+} from '../../internal/controller/form-submitter.js';
 
 /**
  * A button component.
@@ -31,8 +38,10 @@ export abstract class Button extends LitElement implements FormSubmitter {
   static readonly formAssociated = true;
 
   /** @nocollapse */
-  static override shadowRootOptions:
-      ShadowRootInit = {mode: 'open', delegatesFocus: true};
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
 
   /**
    * Whether or not the button is disabled.
@@ -48,7 +57,7 @@ export abstract class Button extends LitElement implements FormSubmitter {
    * Where to display the linked `href` URL for a link button. Common options
    * include `_blank` to open in a new tab.
    */
-  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
+  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   /**
    * Whether to render the icon at the inline end of the label rather than the
@@ -81,14 +90,14 @@ export abstract class Button extends LitElement implements FormSubmitter {
     return this[internals].form;
   }
 
-  @query('.button') private readonly buttonElement!: HTMLElement|null;
+  @query('.button') private readonly buttonElement!: HTMLElement | null;
 
   @queryAssignedElements({slot: 'icon', flatten: true})
   private readonly assignedIcons!: HTMLElement[];
 
   /** @private */
-  [internals] =
-      (this as HTMLElement /* needed for closure */).attachInternals();
+  [internals] = (this as HTMLElement) /* needed for closure */
+    .attachInternals();
 
   constructor() {
     super();
@@ -138,12 +147,12 @@ export abstract class Button extends LitElement implements FormSubmitter {
   private renderContent() {
     // Link buttons may not be disabled
     const isDisabled = this.disabled && !this.href;
-    const icon =
-        html`<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`;
+    const icon = html`<slot
+      name="icon"
+      @slotchange="${this.handleSlotChange}"></slot>`;
 
     return html`
-      ${this.renderElevation?.()}
-      ${this.renderOutline?.()}
+      ${this.renderElevation?.()} ${this.renderOutline?.()}
       <md-focus-ring part="focus-ring"></md-focus-ring>
       <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
       <span class="touch"></span>
@@ -154,7 +163,7 @@ export abstract class Button extends LitElement implements FormSubmitter {
   }
 
   private readonly handleActivationClick = (event: MouseEvent) => {
-    if (!isActivationClick((event)) || !this.buttonElement) {
+    if (!isActivationClick(event) || !this.buttonElement) {
       return;
     }
     this.focus();

diff --git a/catalog/src/components/catalog-component-header-title.ts b/catalog/src/components/catalog-component-header-title.ts
@@ -57,4 +57,4 @@ export class CatalogComponentHeaderTitle extends LitElement {
       }
     }
   `;
-}
+}
diff --git a/catalog/src/components/catalog-component-header.ts b/catalog/src/components/catalog-component-header.ts
@@ -17,13 +17,10 @@ import {customElement} from 'lit/decorators.js';
 @customElement('catalog-component-header')
 export class CatalogComponentHeader extends LitElement {
   render() {
-    return html`
-      <div>
-        <slot class="title" name="title"></slot>
-        <slot
-          class="image"
-        ></slot>
-      </div>`;
+    return html` <div>
+      <slot class="title" name="title"></slot>
+      <slot class="image"></slot>
+    </div>`;
   }
 
   static styles = css`

diff --git a/catalog/src/components/copy-code-button.ts b/catalog/src/components/copy-code-button.ts
@@ -4,12 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 
 import {MdIconButton} from '@material/web/iconbutton/icon-button.js';
 import {css, html, LitElement} from 'lit';
-import {customElement, property, query, queryAssignedElements, state,} from 'lit/decorators.js';
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 
 /**
  * A custom element that places a copy button at the top right corner of a
@@ -37,7 +43,7 @@ export class CopyCodeButton extends LitElement {
     }
   `;
 
-  private timeoutId: number|undefined;
+  private timeoutId: number | undefined;
 
   @state() private showCheckmark = false;
 
@@ -72,8 +78,7 @@ export class CopyCodeButton extends LitElement {
         title=${this.buttonTitle}
         .selected=${this.showCheckmark}
         aria-label=${this.label}
-        aria-label-selected=${this.successLabel}
-      >
+        aria-label-selected=${this.successLabel}>
         <md-icon>content_copy</md-icon>
         <md-icon slot="selected">checkmark</md-icon>
       </md-icon-button>

diff --git a/catalog/src/components/hct-slider.ts b/catalog/src/components/hct-slider.ts
@@ -48,7 +48,7 @@ export class HCTSlider extends LitElement {
   /**
    * The type of HCT slider to display
    */
-  @property({type: String}) type: 'hue'|'chroma'|'tone' = 'hue';
+  @property({type: String}) type: 'hue' | 'chroma' | 'tone' = 'hue';
 
   override render() {
     let range = HUE_RANGE;
@@ -62,21 +62,19 @@ export class HCTSlider extends LitElement {
     return html`<section>
       <span id="label" class="color-on-surface-text">${this.label}</span>
       <md-slider
-          id="source"
-          labeled
-          aria-label=${this.label}
-          .min=${range[0]}
-          .max=${range[1]}
-          .value=${this.value}
-          @input=${this.onInput}
-      ></md-slider>
+        id="source"
+        labeled
+        aria-label=${this.label}
+        .min=${range[0]}
+        .max=${range[1]}
+        .value=${this.value}
+        @input=${this.onInput}></md-slider>
       <div
         id="gradient"
         class=${this.type}
         style=${styleMap({
-      background: this.buildGradient(),
-    })}
-      ></div>
+          background: this.buildGradient(),
+        })}></div>
     </section>`;
   }
 
@@ -100,7 +98,7 @@ export class HCTSlider extends LitElement {
 
     if (this.type === 'hue') {
       for (let i = 0; i < numStops; i++) {
-        const hue = HUE_RANGE[1] / numStops * i;
+        const hue = (HUE_RANGE[1] / numStops) * i;
         // Set chroma to something fairly saturated + tone in the middle of
         // black and white so it's not too dark or too bright and vary the hue
         const hex = hexFromHct(hue, 100, 50);
@@ -111,15 +109,15 @@ export class HCTSlider extends LitElement {
       const hue = hct.hue;
 
       for (let i = 0; i < numStops; i++) {
-        const chroma = CHROMA_RANGE[1] / numStops * i;
+        const chroma = (CHROMA_RANGE[1] / numStops) * i;
         // Change the color of the bar to the current hue and set the tone to
         // mid so we it's not too dark or too bright and vary the chroma
         const hex = hexFromHct(hue, chroma, 50);
         linearGradientString += `, ${hex} ${i}%`;
       }
     } else if (this.type === 'tone') {
       for (let i = 0; i < numStops; i++) {
-        const tone = TONE_RANGE[1] / numStops * i;
+        const tone = (TONE_RANGE[1] / numStops) * i;
         // Set tone color to black (0 chroma means that hue doesn't matter) and
         // vary the tone
         const hex = hexFromHct(0, 0, tone);
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,4 +57,4 @@ export class CatalogComponentHeaderTitle extends LitElement { @@
           }
         }
       `;
-    }
+    }