@noctuatech/uswds 0.0.20 → 0.0.22

package/src/lib/services/icon.service.test.ts

@@ -0,0 +1,63 @@
+import { Injector } from "@joist/di";
+import { assert } from "@open-wc/testing";
+
+import { HttpService } from "./http.service.js";
+import { IconService } from "./icon.service.js";
+
+describe("IconService", () => {
+  it("should fetch icon if not in cache", async () => {
+    let callCount = 0;
+
+    const app = new Injector({
+      providers: [
+        [
+          HttpService,
+          {
+            use: class extends HttpService {
+              async fetch(): Promise<Response> {
+                callCount++;
+                return new Response("<svg></svg>");
+              }
+            },
+          },
+        ],
+      ],
+    });
+
+    const icon = app.inject(IconService);
+
+    const res = await icon.getIcon("test");
+
+    assert.equal(res.nodeName, "svg");
+    assert.equal(callCount, 1);
+  });
+
+  it("should not fetch new icon if the icon is found in the cache", async () => {
+    let callCount = 0;
+
+    const app = new Injector({
+      providers: [
+        [
+          HttpService,
+          {
+            use: class extends HttpService {
+              async fetch(): Promise<Response> {
+                callCount++;
+                return new Response("<svg></svg>");
+              }
+            },
+          },
+        ],
+      ],
+    });
+
+    const icon = app.inject(IconService);
+
+    await icon.getIcon("test");
+
+    const res = await icon.getIcon("test");
+
+    assert.equal(res.nodeName, "svg");
+    assert.equal(callCount, 1);
+  });
+});

package/src/lib/services/icon.service.ts

@@ -0,0 +1,47 @@
+import { inject, injectable } from "@joist/di";
+
+import { HttpService } from "./http.service.js";
+import { USAConfig } from "../config/config.element.js";
+
+@injectable()
+export class IconService {
+  #config = inject(USAConfig);
+  #http = inject(HttpService);
+  #iconCache: Map<string, Promise<HTMLTemplateElement>> = new Map();
+
+  async getIcon(icon: string): Promise<Node> {
+    const config = this.#config();
+    const http = this.#http();
+
+    const cached = this.#iconCache.get(icon);
+
+    if (cached) {
+      return cached.then((res) => {
+        return res.content.firstElementChild!.cloneNode(true);
+      });
+    }
+
+    const svg = http
+      .fetch(`${config.iconPath}${icon}.svg`)
+      .then((res) => {
+        switch (res.status) {
+          case 200:
+            return res.text();
+        }
+
+        return "";
+      })
+      .then((res) => {
+        const template = document.createElement("template");
+        template.innerHTML = res;
+
+        return template;
+      });
+
+    this.#iconCache.set(icon, svg);
+
+    return svg.then((res) => {
+      return res.content.firstElementChild!.cloneNode(true);
+    });
+  }
+}

package/target/lib/card/card.stories.js

@@ -27,7 +27,7 @@ export const Primary = {
 
         <usa-card>
           <usa-card-media>
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Card with media</usa-card-header>
@@ -46,7 +46,7 @@ export const Primary = {
           <usa-card-header>Media with heaer first</usa-card-header>
 
           <usa-card-media>
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-body>
@@ -61,7 +61,7 @@ export const Primary = {
 
         <usa-card>
           <usa-card-media variant="inset">
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Inset media</usa-card-header>
@@ -88,7 +88,7 @@ export const Flag = {
       <usa-card-group variant="flag">
         <usa-card variant="flag">
           <usa-card-media>
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Card with media</usa-card-header>
@@ -105,7 +105,7 @@ export const Flag = {
 
         <usa-card variant="flag">
           <usa-card-media variant="inset">
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Card with media</usa-card-header>

package/target/lib/config/config.element.d.ts

@@ -1,8 +1,8 @@
+import { Injector } from "@joist/di";
 export declare class USAConfig {
     iconPath: string;
 }
-export declare class USAConfigElement extends HTMLElement implements USAConfig {
-    #private;
+export declare class USAConfigElement extends HTMLElement {
     accessor iconPath: string;
-    connectedCallback(): void;
+    onInjectorCreated({ providers }: Injector): void;
 }

package/target/lib/config/config.element.js

@@ -1,11 +1,13 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { inject, injectable, Injector } from "@joist/di";
+import { created, injectable } from "@joist/di";
 import { attr, css, element, html } from "@joist/element";
 export class USAConfig {
     iconPath = "";
 }
 let USAConfigElement = (() => {
-    let _classDecorators = [element({
+    let _classDecorators = [injectable({
+            name: "USAConfigElement",
+        }), element({
             tagName: "usa-config",
             shadowDom: [
                 css `
@@ -15,14 +17,16 @@ let USAConfigElement = (() => {
     `,
                 html `<slot></slot>`,
             ],
-        }), injectable()];
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
     let _iconPath_decorators;
     let _iconPath_initializers = [];
     let _iconPath_extraInitializers = [];
+    let _onInjectorCreated_decorators;
     var USAConfigElement = class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -30,19 +34,23 @@ let USAConfigElement = (() => {
             _iconPath_decorators = [attr({
                     name: "icon-path",
                 })];
+            _onInjectorCreated_decorators = [created()];
             __esDecorate(this, null, _iconPath_decorators, { kind: "accessor", name: "iconPath", static: false, private: false, access: { has: obj => "iconPath" in obj, get: obj => obj.iconPath, set: (obj, value) => { obj.iconPath = value; } }, metadata: _metadata }, _iconPath_initializers, _iconPath_extraInitializers);
+            __esDecorate(this, null, _onInjectorCreated_decorators, { kind: "method", name: "onInjectorCreated", static: false, private: false, access: { has: obj => "onInjectorCreated" in obj, get: obj => obj.onInjectorCreated }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USAConfigElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #iconPath_accessor_storage = __runInitializers(this, _iconPath_initializers, "/assets/usa-icons/");
+        #iconPath_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _iconPath_initializers, "/assets/usa-icons/"));
         get iconPath() { return this.#iconPath_accessor_storage; }
         set iconPath(value) { this.#iconPath_accessor_storage = value; }
-        #injector = (__runInitializers(this, _iconPath_extraInitializers), inject(Injector));
-        connectedCallback() {
-            const { providers } = this.#injector();
-            providers.push({ provide: USAConfig, factory: () => this });
+        onInjectorCreated({ providers }) {
+            providers.set(USAConfig, { factory: () => this });
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _iconPath_extraInitializers);
         }
     };
     return USAConfigElement = _classThis;

package/target/lib/config/config.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.element.js","sourceRoot":"","sources":["../../../src/lib/config/config.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,OAAO,SAAS;IACpB,QAAQ,GAAG,EAAE,CAAC;CACf;IAcY,gBAAgB;4BAZ5B,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC,EACD,UAAU,EAAE;;;;sBACyB,WAAW;;;;gCAAnB,SAAQ,WAAW;;;;oCAC9C,IAAI,CAAC;oBACJ,IAAI,EAAE,WAAW;iBAClB,CAAC;YACF,6KAAS,QAAQ,6BAAR,QAAQ,2FAAwB;YAJ3C,6KAaC;;;YAbY,uDAAgB;;QAI3B,6EAAoB,oBAAoB,EAAC;QAAzC,IAAS,QAAQ,8CAAwB;QAAzC,IAAS,QAAQ,oDAAwB;QAEzC,SAAS,0DAAG,MAAM,CAAC,QAAQ,CAAC,EAAC;QAE7B,iBAAiB;YACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAEvC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC;;;;SAZU,gBAAgB"}
+{"version":3,"file":"config.element.js","sourceRoot":"","sources":["../../../src/lib/config/config.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAY,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,OAAO,SAAS;IACpB,QAAQ,GAAW,EAAE,CAAC;CACvB;IAgBY,gBAAgB;4BAd5B,UAAU,CAAC;YACV,IAAI,EAAE,kBAAkB;SACzB,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACoC,WAAW;;;;;;gCAAnB,SAAQ,WAAW;;;;oCAC9C,IAAI,CAAC;oBACJ,IAAI,EAAE,WAAW;iBAClB,CAAC;6CAGD,OAAO,EAAE;YAFV,6KAAS,QAAQ,6BAAR,QAAQ,2FAAwB;YAGzC,sMAAA,iBAAiB,6DAEhB;YATH,6KAUC;;;YAVY,uDAAgB;;QAI3B,8BAJW,mDAAgB,kDAIP,oBAAoB,GAAC;QAAzC,IAAS,QAAQ,8CAAwB;QAAzC,IAAS,QAAQ,oDAAwB;QAGzC,iBAAiB,CAAC,EAAE,SAAS,EAAY;YACvC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;;;;;;;;SATU,gBAAgB"}

package/target/lib/icon/icon.element.d.ts

@@ -4,12 +4,10 @@ declare global {
         "usa-icon": USAIconElement;
     }
 }
-export declare const ICON_CACHE: Map<string, Promise<string>>;
 export declare class USAIconElement extends HTMLElement {
     #private;
     accessor icon: USAIcon;
     ariaHidden: string | null;
-    connectedCallback(): void;
+    onInjected(): void;
     attributeChangedCallback(): void;
-    fetchIcon(): Promise<string>;
 }

package/target/lib/icon/icon.element.js

@@ -1,8 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { attr, css, element } from "@joist/element";
-import { inject, injectable } from "@joist/di";
-import { USAConfig } from "../config/config.element.js";
-export const ICON_CACHE = new Map();
+import { inject, injectable, injected } from "@joist/di";
+import { IconService } from "../services/icon.service.js";
 let USAIconElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-icon",
@@ -27,48 +26,45 @@ let USAIconElement = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
+    let _onInjected_decorators;
     var USAIconElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _icon_decorators = [attr()];
+            _onInjected_decorators = [injected()];
             __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(this, null, _onInjected_decorators, { kind: "method", name: "onInjected", static: false, private: false, access: { has: obj => "onInjected" in obj, get: obj => obj.onInjected }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USAIconElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #icon_accessor_storage = __runInitializers(this, _icon_initializers, "accessibility_new");
+        #icon_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _icon_initializers, "accessibility_new"));
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
         ariaHidden = (__runInitializers(this, _icon_extraInitializers), "true");
-        #shadow = this.attachShadow({ mode: "open" });
-        #config = inject(USAConfig);
-        #connected = false;
-        connectedCallback() {
-            this.#connected = true;
+        #icon = inject(IconService);
+        #injected = false;
+        get #shadow() {
+            return this.shadowRoot;
+        }
+        onInjected() {
+            this.#injected = true;
             this.#updateIcon();
         }
         attributeChangedCallback() {
-            if (this.#connected) {
+            if (this.#injected) {
                 this.#updateIcon();
             }
         }
         async #updateIcon() {
-            this.#shadow.innerHTML = await this.fetchIcon();
-        }
-        async fetchIcon() {
-            const cached = ICON_CACHE.get(this.icon);
-            if (cached) {
-                return cached;
-            }
-            const config = this.#config();
-            const svg = fetch(`${config.iconPath}/${this.icon}.svg`).then((res) => res.text());
-            ICON_CACHE.set(this.icon, svg);
-            return svg;
+            const icon = this.#icon();
+            this.#shadow.append(await icon.getIcon(this.icon));
         }
     };
     return USAIconElement = _classThis;

package/target/lib/icon/icon.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAQxD,MAAM,CAAC,MAAM,UAAU,GAAiC,IAAI,GAAG,EAAE,CAAC;IAsBrD,cAAc;4BApB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,EAAE;;;;sBACuB,WAAW;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAF/C,6KA0CC;;;YA1CY,uDAAc;;QAEzB,qEAAyB,mBAAmB,EAAC;QAA7C,IAAS,IAAI,0CAAgC;QAA7C,IAAS,IAAI,gDAAgC;QAE7C,UAAU,sDAAkB,MAAM,EAAC;QAEnC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAC9C,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC5B,UAAU,GAAG,KAAK,CAAC;QAEnB,iBAAiB;YACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,wBAAwB;YACtB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QAED,KAAK,CAAC,WAAW;YACf,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QAClD,CAAC;QAED,KAAK,CAAC,SAAS;YACb,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEzC,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,MAAM,CAAC;YAChB,CAAC;YAED,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CACpE,GAAG,CAAC,IAAI,EAAE,CACX,CAAC;YAEF,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAE/B,OAAO,GAAG,CAAC;QACb,CAAC;;;;SAzCU,cAAc"}
+{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;IA4B7C,cAAc;4BApB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,EAAE;;;;sBACuB,WAAW;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;sCAYN,QAAQ,EAAE;YAXX,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAY7C,iLAAA,UAAU,6DAGT;YAjBH,6KA8BC;;;YA9BY,uDAAc;;QAEzB,0BAFW,mDAAc,8CAEA,mBAAmB,GAAC;QAA7C,IAAS,IAAI,0CAAgC;QAA7C,IAAS,IAAI,gDAAgC;QAE7C,UAAU,sDAAkB,MAAM,EAAC;QAEnC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,SAAS,GAAG,KAAK,CAAC;QAElB,IAAI,OAAO;YACT,OAAO,IAAI,CAAC,UAAW,CAAC;QAC1B,CAAC;QAGD,UAAU;YACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,wBAAwB;YACtB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QAED,KAAK,CAAC,WAAW;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,CAAC;;;;SA7BU,cAAc"}

package/target/lib/input/input.element.d.ts

@@ -11,8 +11,8 @@ export declare class USATextInputElement extends HTMLElement implements Maskable
     accessor autocomplete: AutoFill;
     accessor placeholder: string;
     accessor value: string;
-    get selectionStart(): number | null;
-    setSelectionRange(start: number, end: number): void;
+    accessor selectionStart: number | null;
+    accessor selectionEnd: number | null;
     onReady(): void;
     onChange(): void;
     onInputChange(): void;

package/target/lib/input/input.element.js

@@ -69,6 +69,12 @@ let USATextInputElement = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
+    let _selectionStart_decorators;
+    let _selectionStart_initializers = [];
+    let _selectionStart_extraInitializers = [];
+    let _selectionEnd_decorators;
+    let _selectionEnd_initializers = [];
+    let _selectionEnd_extraInitializers = [];
     let _onReady_decorators;
     let _onChange_decorators;
     let _onInputChange_decorators;
@@ -82,6 +88,8 @@ let USATextInputElement = (() => {
             _value_decorators = [attr({
                     reflect: false,
                 }), observe()];
+            _selectionStart_decorators = [observe()];
+            _selectionEnd_decorators = [observe()];
             _onReady_decorators = [ready()];
             _onChange_decorators = [effect()];
             _onInputChange_decorators = [listen("input")];
@@ -89,6 +97,8 @@ let USATextInputElement = (() => {
             __esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _selectionStart_decorators, { kind: "accessor", name: "selectionStart", static: false, private: false, access: { has: obj => "selectionStart" in obj, get: obj => obj.selectionStart, set: (obj, value) => { obj.selectionStart = value; } }, metadata: _metadata }, _selectionStart_initializers, _selectionStart_extraInitializers);
+            __esDecorate(this, null, _selectionEnd_decorators, { kind: "accessor", name: "selectionEnd", static: false, private: false, access: { has: obj => "selectionEnd" in obj, get: obj => obj.selectionEnd, set: (obj, value) => { obj.selectionEnd = value; } }, metadata: _metadata }, _selectionEnd_initializers, _selectionEnd_extraInitializers);
             __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -109,16 +119,14 @@ let USATextInputElement = (() => {
         #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, ""));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        get selectionStart() {
-            const { selectionStart } = this.#input();
-            return selectionStart;
-        }
-        #internals = (__runInitializers(this, _value_extraInitializers), this.attachInternals());
+        #selectionStart_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selectionStart_initializers, null));
+        get selectionStart() { return this.#selectionStart_accessor_storage; }
+        set selectionStart(value) { this.#selectionStart_accessor_storage = value; }
+        #selectionEnd_accessor_storage = (__runInitializers(this, _selectionStart_extraInitializers), __runInitializers(this, _selectionEnd_initializers, null));
+        get selectionEnd() { return this.#selectionEnd_accessor_storage; }
+        set selectionEnd(value) { this.#selectionEnd_accessor_storage = value; }
+        #internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
         #input = query("input");
-        setSelectionRange(start, end) {
-            const input = this.#input();
-            input.setSelectionRange(start, end);
-        }
         onReady() {
             const input = this.#input();
             input.autofocus = this.autofocus;
@@ -126,11 +134,15 @@ let USATextInputElement = (() => {
         onChange() {
             const input = this.#input();
             input.value = this.value;
+            input.selectionStart = this.selectionStart;
+            input.selectionEnd = this.selectionEnd;
         }
         onInputChange() {
             const input = this.#input();
-            this.#internals.setFormValue(input.value);
             this.value = input.value;
+            this.selectionStart = input.selectionStart;
+            this.selectionEnd = input.selectionEnd;
+            this.#internals.setFormValue(input.value);
         }
         attributeChangedCallback(attr) {
             const input = this.#input();

package/target/lib/input/input.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}

package/target/lib/input/input.stories.js

@@ -6,7 +6,7 @@ const meta = {
     render() {
         return html `
       <form>
-        <usa-input name="fname" value="Danny" autocomplete="off" foo="test">
+        <usa-input name="fname" value="Danny" autocomplete="off">
           First name
         </usa-input>
 

package/target/lib/input-mask/input-mask.element.js

@@ -56,14 +56,14 @@ let USAInputMaskElement = (() => {
             input.value = formatted;
             const offset = input.value.length - prev.length;
             const maskChar = mask[selectionStart - 1];
-            // This is a hack to make sure that changes are propagated appropriately
-            await Promise.resolve();
             // check if the current value is not a space for characters and has an offset greater then 0
             if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
-                input.setSelectionRange(selectionStart + offset, selectionStart + offset);
+                input.selectionStart = selectionStart + offset;
+                input.selectionEnd = selectionStart + offset;
             }
             else {
-                input.setSelectionRange(selectionStart, selectionStart);
+                input.selectionStart = selectionStart;
+                input.selectionEnd = selectionStart;
             }
             if (prev !== input.value) {
                 input.dispatchEvent(new Event("input", { bubbles: true }));

package/target/lib/input-mask/input-mask.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-mask.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input-mask.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.element.ts"],"names":[],"mappings":"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"}

package/target/lib/input-mask/input-mask.stories.js

@@ -11,7 +11,6 @@ const meta = {
           placeholder=${args.mask}
           autocomplete="off"
           mask=${args.mask}
-          value="3042616138"
         >
           Phone:
         </usa-input>

package/target/lib/input-mask/input-mask.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,IAAI;;;;;;KAMrB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,IAAI;;;;;KAKrB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/input-mask/maskable.element.d.ts

@@ -1,5 +1,5 @@
 export interface MaskableElement extends HTMLElement {
     value: string;
     selectionStart: number | null;
-    setSelectionRange(start: number, end: number): void;
+    selectionEnd: number | null;
 }

package/target/lib/services/http.service.d.ts

@@ -0,0 +1,3 @@
+export declare class HttpService {
+    fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+}

package/target/lib/services/http.service.js

@@ -0,0 +1,24 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { injectable } from "@joist/di";
+let HttpService = (() => {
+    let _classDecorators = [injectable()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var HttpService = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            HttpService = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        fetch(input, init) {
+            return fetch(input, init);
+        }
+    };
+    return HttpService = _classThis;
+})();
+export { HttpService };
+//# sourceMappingURL=http.service.js.map

package/target/lib/services/http.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"http.service.js","sourceRoot":"","sources":["../../../src/lib/services/http.service.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;IAG1B,WAAW;4BADvB,UAAU,EAAE;;;;;;;;YACb,6KAIC;;;YAJY,uDAAW;;QACtB,KAAK,CAAC,KAAwB,EAAE,IAAkB;YAChD,OAAO,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC5B,CAAC;;;;SAHU,WAAW"}

package/target/lib/services/icon.service.d.ts

@@ -0,0 +1,4 @@
+export declare class IconService {
+    #private;
+    getIcon(icon: string): Promise<Node>;
+}

package/target/lib/services/icon.service.js

@@ -0,0 +1,54 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { inject, injectable } from "@joist/di";
+import { HttpService } from "./http.service.js";
+import { USAConfig } from "../config/config.element.js";
+let IconService = (() => {
+    let _classDecorators = [injectable()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var IconService = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IconService = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #config = inject(USAConfig);
+        #http = inject(HttpService);
+        #iconCache = new Map();
+        async getIcon(icon) {
+            const config = this.#config();
+            const http = this.#http();
+            const cached = this.#iconCache.get(icon);
+            if (cached) {
+                return cached.then((res) => {
+                    return res.content.firstElementChild.cloneNode(true);
+                });
+            }
+            const svg = http
+                .fetch(`${config.iconPath}${icon}.svg`)
+                .then((res) => {
+                switch (res.status) {
+                    case 200:
+                        return res.text();
+                }
+                return "";
+            })
+                .then((res) => {
+                const template = document.createElement("template");
+                template.innerHTML = res;
+                return template;
+            });
+            this.#iconCache.set(icon, svg);
+            return svg.then((res) => {
+                return res.content.firstElementChild.cloneNode(true);
+            });
+        }
+    };
+    return IconService = _classThis;
+})();
+export { IconService };
+//# sourceMappingURL=icon.service.js.map

package/target/lib/services/icon.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.service.js","sourceRoot":"","sources":["../../../src/lib/services/icon.service.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;IAG3C,WAAW;4BADvB,UAAU,EAAE;;;;;;;;YACb,6KAwCC;;;YAxCY,uDAAW;;QACtB,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,UAAU,GAA8C,IAAI,GAAG,EAAE,CAAC;QAElE,KAAK,CAAC,OAAO,CAAC,IAAY;YACxB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAEzC,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;oBACzB,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACxD,CAAC,CAAC,CAAC;YACL,CAAC;YAED,MAAM,GAAG,GAAG,IAAI;iBACb,KAAK,CAAC,GAAG,MAAM,CAAC,QAAQ,GAAG,IAAI,MAAM,CAAC;iBACtC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACZ,QAAQ,GAAG,CAAC,MAAM,EAAE,CAAC;oBACnB,KAAK,GAAG;wBACN,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;gBACtB,CAAC;gBAED,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC;iBACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACZ,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;gBACpD,QAAQ,CAAC,SAAS,GAAG,GAAG,CAAC;gBAEzB,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YAEL,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAE/B,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACtB,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;QACL,CAAC;;;;SAvCU,WAAW"}