@noctuatech/uswds 1.3.0 → 1.3.2

package/src/lib/file-input/file-input.element.ts

@@ -1,17 +1,17 @@
-import "@joist/templating/define.js";
+import '@joist/templating/define.js';
 
-import { attr, css, element, html, listen, query } from "@joist/element";
-import { effect } from "@joist/observable";
-import { bind } from "@joist/templating";
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { effect } from '@joist/observable';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-file-input": USAFileInputElement;
+    'usa-file-input': USAFileInputElement;
   }
 }
 
 @element({
-  tagName: "usa-file-input",
+  tagName: 'usa-file-input',
   shadowDom: [
     css`
       * {
@@ -77,31 +77,39 @@ declare global {
       }
     `,
     html`
-      <label>
+      <label for="file-input">
         <slot class="label"></slot>
-
-        <div class="container">
-          <input type="file" tabindex="0"/>
-
-          <j-if bind="filesVisible">
-            <template>
-              <j-props>
-                <usa-file-input-preview $.files="files" part="preview">
-                  Selected file <usa-link>Change file</usa-link>
-                </usa-file-input-preview>
-              </j-props>
-            </template>
-
-            <template else>
-              <div class="box" part="input">
-                <slot name="description">
-                  Drag file here or <usa-link>choose from folder</usa-link>
-                </slot>
-              </div>
-            </template>
-          </j-if>
-        </div>
       </label>
+
+      <div class="container">
+        <j-props>
+          <input
+            id="file-input"
+            type="file"
+            tabindex="0"
+            $.name="name"
+            $.multiple="multiple"
+            $.accept="accept"
+            $.required="required"
+          />
+        </j-props>
+
+        <j-if bind="filesVisible">
+          <template>
+            <j-props>
+              <usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">
+                Selected file&nbsp;<usa-link>Change file</usa-link>
+              </usa-file-input-preview>
+            </j-props>
+          </template>
+
+          <template else>
+            <div class="box" part="input">
+              <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
+            </div>
+          </template>
+        </j-if>
+      </div>
     `,
   ],
 })
@@ -109,15 +117,19 @@ export class USAFileInputElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  @bind()
+  accessor name = '';
 
   @attr()
+  @bind()
   accessor multiple = true;
 
   @attr()
-  accessor accept = "";
+  @bind()
+  accessor accept = '';
 
   @attr()
+  @bind()
   accessor required = false;
 
   @bind()
@@ -127,32 +139,19 @@ export class USAFileInputElement extends HTMLElement {
   accessor filesVisible = false;
 
   #internals = this.attachInternals();
-  #input = query("input");
-
-  attributeChangedCallback() {
-    this.#input({
-      name: this.name,
-      multiple: this.multiple,
-      accept: this.accept,
-      required: this.required,
-    });
-  }
+  #input = query('input');
 
   connectedCallback() {
     const input = this.#input();
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     }
   }
 
   @effect()
   syncFormValues() {
-    const input = this.#input({ files: this.files });
+    const input = this.#input();
 
     const formData = new FormData();
 
@@ -165,38 +164,34 @@ export class USAFileInputElement extends HTMLElement {
     this.#internals.setFormValue(formData);
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     } else {
       this.#internals.setValidity({});
     }
   }
 
-  @listen("change")
+  @listen('change')
   onInputChange() {
     const input = this.#input();
 
     this.files = input.files;
 
-    this.dispatchEvent(new Event("change"));
+    this.dispatchEvent(new Event('change'));
   }
 
-  @listen("dragenter")
+  @listen('dragenter')
   onDragEnter() {
-    this.classList.add("dragenter");
+    this.classList.add('dragenter');
   }
 
-  @listen("dragleave")
+  @listen('dragleave')
   onDragLeave() {
-    this.classList.remove("dragenter");
+    this.classList.remove('dragenter');
   }
 
-  @listen("drop")
+  @listen('drop')
   onDrop(e: DragEvent) {
-    this.classList.remove("dragenter");
+    this.classList.remove('dragenter');
 
     if (e.dataTransfer?.items) {
       e.preventDefault();
@@ -204,7 +199,7 @@ export class USAFileInputElement extends HTMLElement {
       const data = new DataTransfer();
 
       for (const item of e.dataTransfer.items) {
-        if (item.kind === "file") {
+        if (item.kind === 'file') {
           const file = item.getAsFile();
 
           if (file) {

package/src/lib/icon/icon.element.ts

@@ -1,17 +1,18 @@
-import { inject, injectable } from "@joist/di";
-import { attr, css, element } from "@joist/element";
+import { inject, injectable, injected } from '@joist/di';
+import { attr, css, element } from '@joist/element';
 
-import { IconService } from "../services/icon.service.js";
-import type { USAIcon } from "./icon-types.js";
+import { IconService } from '../services/icon.service.js';
+import type { USAIcon } from './icon-types.js';
+import { effect, observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-icon": USAIconElement;
+    'usa-icon': USAIconElement;
   }
 }
 
 @element({
-  tagName: "usa-icon",
+  tagName: 'usa-icon',
   shadowDom: [
     css`
       :host {
@@ -30,41 +31,50 @@ declare global {
   ],
 })
 @injectable({
-  name: "usa-icon-ctx",
+  name: 'usa-icon-ctx',
 })
 export class USAIconElement extends HTMLElement {
   @attr()
-  accessor icon: USAIcon = "accessibility_new";
+  @observe()
+  accessor icon: USAIcon | '' = '';
 
-  ariaHidden: string | null = "true";
+  ariaHidden: string | null = 'true';
 
   #icon = inject(IconService);
-  #injected = false;
+  #abortController: AbortController | null = null;
 
-  attributeChangedCallback(_: string, newVal: string, oldVal: string) {
-    if (this.#injected) {
-      if (newVal !== oldVal) {
-        this.#updateIcon();
-      }
-    }
+  connectedCallback() {
+    this.#updateIcon();
   }
 
-  connectedCallback() {
-    this.#injected = true;
+  @effect()
+  onIconUpdate() {
+    console.log('onIconUpdate', this.icon);
+
     this.#updateIcon();
   }
 
   async #updateIcon() {
-    const icon = this.#icon();
-
-    if (this.shadowRoot) {
-      const currentIcon = await icon.getIcon(this.icon);
+    this.#abortController?.abort();
+    this.#abortController = new AbortController();
 
-      if (this.shadowRoot.firstElementChild) {
-        this.shadowRoot.firstElementChild.replaceWith(currentIcon);
-      } else {
-        this.shadowRoot.append(currentIcon);
-      }
+    if (!this.icon) {
+      return;
     }
+
+    const icon = this.#icon();
+
+    icon
+      .getIcon(this.icon, this.#abortController?.signal)
+      .then((currentIcon) => {
+        if (this.shadowRoot) {
+          if (this.shadowRoot.firstElementChild) {
+            this.shadowRoot.firstElementChild.replaceWith(currentIcon);
+          } else {
+            this.shadowRoot.append(currentIcon);
+          }
+        }
+      })
+      .catch(() => {});
   }
 }

package/src/lib/input/input.element.ts

@@ -1,16 +1,16 @@
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { attr, css, element, html, listen, query, ready } from '@joist/element';
+import { effect, observe } from '@joist/observable';
 
-import type { MaskableElement } from "../input-mask/maskable.element.js";
+import type { MaskableElement } from '../input-mask/maskable.element.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-input": USATextInputElement;
+    'usa-input': USATextInputElement;
   }
 }
 
 @element({
-  tagName: "usa-input",
+  tagName: 'usa-input',
   shadowDom: [
     css`
       * {
@@ -54,31 +54,31 @@ declare global {
         color: #757575;
       }
 
-      slot[name="detail"]::slotted(*) {
+      slot[name='detail']::slotted(*) {
         color: #757575;
       }
 
-      slot[name="detail"]::slotted(usa-icon) {
+      slot[name='detail']::slotted(usa-icon) {
         width: 1.5rem;
         height: 1.5rem;
       }
 
-      slot[name="detail"] {
+      slot[name='detail'] {
         display: block;
         position: absolute;
         bottom: 0.21rem;
         left: 0.5rem;
       }
 
-      :host([detail="pfx"]) input {
+      :host([detail='pfx']) input {
         padding-left: 2.5rem;
       }
 
-      :host([detail="sfx"]) input {
+      :host([detail='sfx']) input {
         padding-right: 2.5rem;
       }
 
-      :host([detail="sfx"]) slot[name="detail"] {
+      :host([detail='sfx']) slot[name='detail'] {
         right: 0.5rem;
         left: auto;
       }
@@ -94,26 +94,23 @@ declare global {
     `,
   ],
 })
-export class USATextInputElement
-  extends HTMLElement
-  implements MaskableElement
-{
+export class USATextInputElement extends HTMLElement implements MaskableElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  accessor name = '';
 
   @attr()
-  accessor autocomplete: AutoFill = "on";
+  accessor autocomplete: AutoFill = 'on';
 
   @attr()
-  accessor placeholder = "";
+  accessor placeholder = '';
 
   @attr()
-  accessor min = "";
+  accessor min = '';
 
   @attr()
-  accessor max = "";
+  accessor max = '';
 
   @attr()
   accessor minLength = -1;
@@ -128,18 +125,16 @@ export class USATextInputElement
   accessor disabled = false;
 
   @attr()
-  accessor type: "text" | "password" | "number" = "text";
+  accessor type: 'text' | 'password' | 'number' = 'text';
 
-  @attr({
-    observed: false,
-  })
-  accessor detail: "pfx" | "sfx" | "" = "";
+  @attr()
+  accessor detail: 'pfx' | 'sfx' | '' = '';
 
   @attr({
     reflect: false,
   })
   @observe()
-  accessor value = "";
+  accessor value = '';
 
   @observe()
   accessor selectionStart: number | null = null;
@@ -152,14 +147,14 @@ export class USATextInputElement
   }
 
   #internals = this.attachInternals();
-  #input = query("input");
+  #input = query('input');
 
   @ready()
   onReady() {
     this.#input({ autofocus: this.autofocus });
   }
 
-  attributeChangedCallback(attr: string) {
+  attributeChangedCallback() {
     this.#input({
       autocomplete: this.autocomplete,
       placeholder: this.placeholder,
@@ -191,14 +186,14 @@ export class USATextInputElement
     this.#syncFormState();
   }
 
-  @listen("keydown")
+  @listen('keydown')
   onKeyDown(e: KeyboardEvent) {
     const form = this.#internals.form;
 
     if (form) {
       const hasModifier = e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
 
-      if (e.key.toUpperCase() === "ENTER" && !hasModifier) {
+      if (e.key.toUpperCase() === 'ENTER' && !hasModifier) {
         // this makes sure that the user has a chance to cancel the event before submitting
         setTimeout(() => {
           if (!e.defaultPrevented && !e.isComposing) {
@@ -209,7 +204,7 @@ export class USATextInputElement
     }
   }
 
-  @listen("input")
+  @listen('input')
   onInputChange() {
     const input = this.#input();
 
@@ -222,20 +217,16 @@ export class USATextInputElement
     const input = this.#input();
 
     this.#internals.setValidity({});
-    this.#internals.setFormValue(input.value);
+    this.#internals.setFormValue(this.value);
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     }
   }
 
   #submit(form: HTMLFormElement) {
-    const btn = document.createElement("button");
-    btn.type = "submit";
+    const btn = document.createElement('button');
+    btn.type = 'submit';
     form.append(btn);
 
     btn.click();

package/src/lib/input/input.test.ts

@@ -1,18 +1,16 @@
-import "./input.element.js";
+import './input.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
-import { userEvent } from "@testing-library/user-event";
+import { assert, fixture, html } from '@open-wc/testing';
+import { userEvent } from '@testing-library/user-event';
 
-describe("usa-input", () => {
-  it("should be accessible", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <usa-input name="fname" value="Foo">Hello World</usa-input>
-    `);
+describe('usa-input', () => {
+  it('should be accessible', async () => {
+    const form = await fixture<HTMLFormElement>(html` <usa-input name="fname" value="Foo">Hello World</usa-input> `);
 
     return assert.isAccessible(form);
   });
 
-  it("should submit form with default values", async () => {
+  it('should submit form with default values', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname" value="Foo">Hello World</usa-input>
@@ -23,10 +21,10 @@ describe("usa-input", () => {
 
     const value = new FormData(form);
 
-    assert.equal(value.get("fname"), "Foo");
+    assert.equal(value.get('fname'), 'Foo');
   });
 
-  it("should update form value as input value changed", async () => {
+  it('should update form value as input value changed', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname">Hello World</usa-input>
@@ -35,19 +33,19 @@ describe("usa-input", () => {
       </form>
     `);
 
-    const input = form.querySelector("usa-input");
-    const nativeInput = input?.shadowRoot?.querySelector("input");
+    const input = form.querySelector('usa-input');
+    const nativeInput = input?.shadowRoot?.querySelector('input');
 
     if (nativeInput) {
-      await userEvent.type(nativeInput, "Bar");
+      await userEvent.type(nativeInput, 'Bar');
     }
 
     const value = new FormData(form);
 
-    assert.equal(value.get("fname"), "Bar");
+    assert.equal(value.get('fname'), 'Bar');
   });
 
-  it("should not submit when not valid", async () => {
+  it('should not submit when not valid', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname" required>Hello World</usa-input>

package/src/lib/input-mask/input-mask.element.ts

@@ -1,16 +1,16 @@
-import { attr, css, element, html, listen, queryAll } from "@joist/element";
+import { attr, css, element, html, listen, queryAll } from '@joist/element';
 
-import { PATTERN_CHARS, type PatternChar, REG_EXPS, format } from "./format.js";
-import type { MaskableElement } from "./maskable.element.js";
+import { PATTERN_CHARS, type PatternChar, REG_EXPS, format } from './format.js';
+import type { MaskableElement } from './maskable.element.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-input-mask": USAInputMaskElement;
+    'usa-input-mask': USAInputMaskElement;
   }
 }
 
 @element({
-  tagName: "usa-input-mask",
+  tagName: 'usa-input-mask',
   shadowDom: [
     css`
       :host {
@@ -22,13 +22,13 @@ declare global {
 })
 export class USAInputMaskElement extends HTMLElement {
   @attr()
-  accessor mask = "";
+  accessor mask = '';
 
-  #maskables = queryAll<MaskableElement>("[mask]", this);
+  #maskables = queryAll<MaskableElement>('[mask]', this);
 
   connectedCallback() {
     for (const input of this.#maskables()) {
-      const { formatted } = format(input.value, this.#getMaskFor(input));
+      const { formatted } = format(input.value || input.getAttribute('value') || '', this.#getMaskFor(input));
 
       if (formatted) {
         input.value = formatted;
@@ -36,7 +36,7 @@ export class USAInputMaskElement extends HTMLElement {
     }
   }
 
-  @listen("input")
+  @listen('input')
   onInput(e: Event) {
     const input = e.target as MaskableElement;
     const selectionStart = input.selectionStart || 0;
@@ -60,7 +60,7 @@ export class USAInputMaskElement extends HTMLElement {
     }
   }
 
-  @listen("keydown")
+  @listen('keydown')
   onKeyDown(e: KeyboardEvent) {
     const input = e.target as MaskableElement;
     const mask = this.#getMaskFor(input);
@@ -72,12 +72,12 @@ export class USAInputMaskElement extends HTMLElement {
       if (input.value.length >= mask.length) {
         // prevent default once value is the same as the mask length
         e.preventDefault();
-      } else if (patternChar === "9") {
+      } else if (patternChar === '9') {
         if (!REG_EXPS.Numbers.test(e.key)) {
           // if pattern char specifies number and is not
           e.preventDefault();
         }
-      } else if (patternChar === "A") {
+      } else if (patternChar === 'A') {
         if (!REG_EXPS.Letters.test(e.key)) {
           // if pattern char specifies letter and is not
           e.preventDefault();
@@ -87,6 +87,6 @@ export class USAInputMaskElement extends HTMLElement {
   }
 
   #getMaskFor(input: MaskableElement) {
-    return this.mask || input.getAttribute("mask") || "";
+    return this.mask || input.getAttribute('mask') || '';
   }
 }

package/src/lib/input-mask/input-mask.stories.ts

@@ -1,21 +1,16 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
 
-import type { USAInputMaskElement } from "./input-mask.element.js";
+import type { USAInputMaskElement } from './input-mask.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "input-mask",
-  tags: ["autodocs"],
+  title: 'input-mask',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-input-mask>
-        <usa-input
-          name="phone"
-          placeholder=${args.mask}
-          autocomplete="off"
-          mask=${args.mask}
-        >
+        <usa-input name="phone" placeholder=${args.mask} autocomplete="off" mask=${args.mask} value="1234567890">
           Phone:
         </usa-input>
       </usa-input-mask>
@@ -23,7 +18,7 @@ const meta = {
   },
   argTypes: {},
   args: {
-    mask: "(999) 999-9999",
+    mask: '(999) 999-9999',
   },
 } satisfies Meta<USAInputMaskElement>;