style format

umbraco · Oct 16, 2023 · 71c54a3 · 71c54a3
1 parent 8464b88
commit 71c54a3
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 47 deletions.
diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -498,7 +498,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
 
   closeColorPicker(event: Event) {
     const target = event.target as UUIPopoverElement;
-    const trigger = target.querySelector("button[part=trigger]");
+    const trigger = target.querySelector('button[part=trigger]');
 
     if (trigger) {
       trigger.setAttribute('aria-expanded', 'false');
@@ -617,13 +617,13 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
           <uui-button-group>
             ${!this.noFormatToggle
               ? html`<uui-button
-                    label="Toggle color format"
-                    @click=${this.handleFormatToggle}
-                    class="color-picker__toggle-format"
-                    ?disabled=${this.disabled}
-                    compact>
-                    <span>${this.format}</span>
-                  </uui-button>`
+                  label="Toggle color format"
+                  @click=${this.handleFormatToggle}
+                  class="color-picker__toggle-format"
+                  ?disabled=${this.disabled}
+                  compact>
+                  <span>${this.format}</span>
+                </uui-button>`
               : ''}
             ${hasEyeDropper
               ? html`<uui-button
@@ -652,40 +652,40 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
         swatch =>
-          html`<uui-color-swatch
-            label="${swatch}"
-            .value=${swatch}>
+          html`<uui-color-swatch label="${swatch}" .value=${swatch}>
           </uui-color-swatch>`
       )}
     </uui-color-swatches>`;
   }
 
   private _renderPreviewButton() {
-      return html`<uui-popover placement="bottom-start" @close=${this.closeColorPicker}>
-        <button
-          type="button"
-          part="trigger"
-          slot="trigger"
-          aria-label="${this.label || 'Open Color picker'}"
-          class=${classMap({
-            'color-picker__trigger': true,
-            'color-dropdown__trigger--disabled': this.disabled,
-            'color-dropdown__trigger--small': this.size === 'small',
-            'color-dropdown__trigger--medium': this.size === 'medium',
-            'color-dropdown__trigger--large': this.size === 'large',
-            'color-picker__transparent-bg': true,
-          })}
-          style=${styleMap({
-            '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
-              this.lightness
-            }%, ${this.alpha / 100})`,
-          })}
-          ?disabled=${this.disabled}
-          @click=${this.openColorPicker}
-          aria-haspopup="true"
-          aria-expanded="false"></button>
-        <div slot="popover">${this._renderColorPicker()}</div>
-      </uui-popover>`;
+    return html`<uui-popover
+      placement="bottom-start"
+      @close=${this.closeColorPicker}>
+      <button
+        type="button"
+        part="trigger"
+        slot="trigger"
+        aria-label="${this.label || 'Open Color picker'}"
+        class=${classMap({
+          'color-picker__trigger': true,
+          'color-dropdown__trigger--disabled': this.disabled,
+          'color-dropdown__trigger--small': this.size === 'small',
+          'color-dropdown__trigger--medium': this.size === 'medium',
+          'color-dropdown__trigger--large': this.size === 'large',
+          'color-picker__transparent-bg': true,
+        })}
+        style=${styleMap({
+          '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
+            this.lightness
+          }%, ${this.alpha / 100})`,
+        })}
+        ?disabled=${this.disabled}
+        @click=${this.openColorPicker}
+        aria-haspopup="true"
+        aria-expanded="false"></button>
+      <div slot="popover">${this._renderColorPicker()}</div>
+    </uui-popover>`;
   }
 
   render() {

diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.element.ts b/packages/uui-color-swatches/lib/uui-color-swatches.element.ts
@@ -35,13 +35,13 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   @property()
   value = '';
 
- /**
-  * Disables the color swatches.
-  * @type {boolean}
-  * @attr
-  * @default false
-  **/
-   @property({ type: Boolean, reflect: true }) disabled = false;
+  /**
+   * Disables the color swatches.
+   * @type {boolean}
+   * @attr
+   * @default false
+   **/
+  @property({ type: Boolean, reflect: true }) disabled = false;
 
   @queryAssignedElements({ selector: 'uui-color-swatch' })
   swatches!: Array<UUIColorSwatchElement>;
@@ -90,9 +90,8 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
       swatch.setAttribute('role', 'radio');
 
       if (this.disabled) {
-        swatch.setAttribute('disabled', '')
-      }
-      else {
+        swatch.setAttribute('disabled', '');
+      } else {
         // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:
         swatch.setAttribute('selectable', 'selectable');
       }
@@ -141,7 +140,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
       );
     }
   };
-  
+
   /**
    * Deselects all swatches.
    *