format

src/components/text-field/error-message/index.ts

@@ -11,7 +11,7 @@ export class SpTextFieldErrorMessage extends HTMLElement {
 
   set textContent(value: string | null) {
     this.#textContent = value;
-    if(this.#span) {
+    if (this.#span) {
       this.#span.textContent = value;
     }
     this.#updateClass();

src/components/text-field/label/index.ts

@@ -13,24 +13,24 @@ export class SpTextFieldLabel extends HTMLElement {
 
   set htmlFor(value: string) {
     this.#for = value;
-    if(this.#labelElm) {
-      this.#labelElm.htmlFor =this.htmlFor;
+    if (this.#labelElm) {
+      this.#labelElm.htmlFor = this.htmlFor;
     }
   }
 
   get textContent(): string | null {
     return this.#textContent;
   }
   set textContent(text: string | null) {
-    this.#textContent = text; 
+    this.#textContent = text;
 
     if (this.#labelElm) {
       this.#labelElm.textContent = this.#textContent;
     }
     this.#updateClass();
   }
 
-  #for: string = '';
+  #for: string = "";
 
   #textContent: string | null = null;
 
@@ -42,8 +42,7 @@ export class SpTextFieldLabel extends HTMLElement {
   }
 
   connectedCallback() {
-    if(!this.shadowRoot)
-      return;
+    if (!this.shadowRoot) return;
     this.shadowRoot.adoptedStyleSheets = [
       ...this.shadowRoot.adoptedStyleSheets,
       makeStyleSheet(styles),
@@ -59,7 +58,7 @@ export class SpTextFieldLabel extends HTMLElement {
 
   attributeChangedCallback(name: string, _: string, newValue: string | null) {
     if (name === "for") {
-      this.htmlFor = newValue ? newValue : '';
+      this.htmlFor = newValue ? newValue : "";
     } else if (name === "text") {
       this.textContent = newValue;
     }
@@ -72,7 +71,6 @@ export class SpTextFieldLabel extends HTMLElement {
       this.#labelElm?.classList.add("none");
     }
   }
-
 }
 
 const tagName = "sp-text-field-label";

src/components/text-field/x-large/index.ts

@@ -10,7 +10,14 @@ import { type SpTextFieldXLargeInput } from "@/components/text-field/x-large/inp
 import styles from "./styles.css?inline";
 
 export class SpTextFieldXLarge extends HTMLElement {
-  static observedAttributes = ["error", "label", "placeholder", "disabled", "name", 'value'];
+  static observedAttributes = [
+    "error",
+    "label",
+    "placeholder",
+    "disabled",
+    "name",
+    "value",
+  ];
 
   static formAssociated = true;
 
@@ -63,21 +70,21 @@ export class SpTextFieldXLarge extends HTMLElement {
   set name(value: string) {
     this.#name = value;
     if (this.#inputElm) {
-        this.#inputElm.name = this.name;
+      this.#inputElm.name = this.name;
     }
     if (this.#labelElm) {
-        this.#labelElm.htmlFor = this.name;
+      this.#labelElm.htmlFor = this.name;
     }
   }
 
-  get value(): string  {
+  get value(): string {
     return this.#value;
   }
 
-  set value(value: string ) {
+  set value(value: string) {
     this.#value = value;
     if (this.#inputElm) {
-        this.#inputElm.value = this.value;
+      this.#inputElm.value = this.value;
     }
     this.#internals.setFormValue(this.value);
   }
@@ -96,16 +103,16 @@ export class SpTextFieldXLarge extends HTMLElement {
 
   #placeholder: string = "";
 
-  #name: string = '';
+  #name: string = "";
 
-  #value: string = '';
+  #value: string = "";
 
   #internals: ElementInternals;
 
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.#internals = this.attachInternals(); 
+    this.#internals = this.attachInternals();
   }
 
   connectedCallback() {
@@ -137,7 +144,7 @@ export class SpTextFieldXLarge extends HTMLElement {
 
     this.#inputElm.addEventListener("input", (e) => {
       this.value = (e.target as SpTextFieldXLargeInput).value;
-    })
+    });
   }
 
   attributeChangedCallback(name: string, _: string, newValue: string | null) {
@@ -150,9 +157,9 @@ export class SpTextFieldXLarge extends HTMLElement {
     } else if (name === "disabled") {
       this.disabled = newValue == null ? false : true;
     } else if (name === "name") {
-      this.name = newValue ? newValue : '';
-    }else if (name === "value") {
-      this.value = newValue ? newValue : '';
+      this.name = newValue ? newValue : "";
+    } else if (name === "value") {
+      this.value = newValue ? newValue : "";
     }
   }
 }

src/components/text-field/x-large/input/index.ts

@@ -44,7 +44,7 @@ export class SpTextFieldXLargeInput extends HTMLElement {
     return this.#name;
   }
 
-  set name(value: string ) {
+  set name(value: string) {
     this.#name = value;
     if (this.#input) {
       this.#input.name = this.name;
@@ -57,8 +57,7 @@ export class SpTextFieldXLargeInput extends HTMLElement {
 
   set value(value: string) {
     this.#value = value;
-    if(this.#input)
-      this.#input.value = this.value;
+    if (this.#input) this.#input.value = this.value;
 
     this.#internals.setFormValue(this.value);
   }
@@ -71,11 +70,11 @@ export class SpTextFieldXLargeInput extends HTMLElement {
 
   #disabled = false;
 
-  #name: string = '';
+  #name: string = "";
 
   #error: boolean = false;
 
-  #value: string = '';
+  #value: string = "";
 
   #internals: ElementInternals;
 
@@ -116,9 +115,9 @@ export class SpTextFieldXLargeInput extends HTMLElement {
     } else if (name === "error") {
       this.error = newValue ? true : false;
     } else if (name === "name") {
-      this.name = newValue ? newValue : '';
+      this.name = newValue ? newValue : "";
     } else if (name === "value") {
-      this.value = newValue ? newValue : '';
+      this.value = newValue ? newValue : "";
     }
   }
 

stories/text-field/x-large.story.ts

@@ -12,8 +12,8 @@ const meta: Meta<SpTextFieldXLarge> = {
     error: "エラーテキストが入ります。",
     placeholder: "プレースホルダー",
     disabled: false,
-    name: 'surname',
-    value: 'Yamada',
+    name: "surname",
+    value: "Yamada",
   },
 };
 export default meta;