@noctuatech/uswds 1.1.9 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",

package/src/lib/button/button.element.ts

@@ -1,4 +1,7 @@
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
+import "@joist/templating/define.js";
+
+import { attr, css, element, html, listen } from "@joist/element";
+import { bind } from "@joist/templating";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,9 +33,10 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
         border-bottom-right-radius: 0.25rem;
         border-top-left-radius: 0.25rem;
         border-bottom-left-radius: 0.25rem;
+        overflow: hidden;
       }
 
-      button {
+      button, a {
         box-sizing: border-box;
         font-size: 1.06rem;
         line-height: 0.9;
@@ -43,10 +47,6 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
         appearance: none;
         align-items: center;
         border: 0;
-        border-top-right-radius: inherit;
-        border-bottom-right-radius: inherit;
-        border-top-left-radius: inherit;
-        border-bottom-left-radius: inherit;
         cursor: pointer;
         -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
@@ -67,111 +67,125 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
         }
       }
 
-      button:visited {
+      :is(button, a):visited {
         color: white;
       }
 
-      button:hover {
+      :is(button, a):hover {
         color: white;
         background-color: #1a4480;
         border-bottom: 0;
         text-decoration: none;
       }
 
-      button:active {
+      :is(button, a):active {
         color: white;
         background-color: #162e51;
       }
 
-      button:not([disabled]):focus {
+      :is(button, a):not([disabled]):focus {
         outline-offset: 0.25rem;
       }
 
-      button:disabled {
+      :is(button, a):disabled {
         color: #454545;
         background-color: #c9c9c9;
         cursor: not-allowed;
         opacity: 1;
       }
 
-      button:disabled:hover,
-      button:disabled:active,
-      button:disabled:focus {
+      :is(button, a):disabled:hover,
+      :is(button, a):disabled:active,
+      :is(button, a):disabled:focus {
         color: #454545;
         background-color: #c9c9c9;
       }
 
-      button:focus {
+      :is(button, a):focus {
         outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
 
       /** Secondary */
-      :host([variant="secondary"]) button {
+      :host([variant="secondary"]) :is(button, a) {
         color: #fff;
         background-color: #d83933;
       }
 
-      :host([variant="secondary"]) button:hover {
+      :host([variant="secondary"]) :is(button, a):hover {
         background-color: #b50909;
       }
 
-      :host([variant="secondary"]) button:active {
+      :host([variant="secondary"]) :is(button, a):active {
         background-color: #8b0a03;
       }
 
       /** cool */
-      :host([variant="cool"]) button {
+      :host([variant="cool"]) :is(button, a) {
         color: #1b1b1b;
         background-color: #00bde3;
       }
 
-      :host([variant="cool"]) button:hover {
+      :host([variant="cool"]) :is(button, a):hover {
         background-color: #28a0cb;
       }
 
-      :host([variant="cool"]) button:active {
+      :host([variant="cool"]) :is(button, a):active {
         color: #fff;
         background-color: #07648d;
       }
 
       /** warm */
-      :host([variant="warm"]) button {
+      :host([variant="warm"]) :is(button, a) {
         color: #1b1b1b;
         background-color: #fa9441;
       }
 
-      :host([variant="warm"]) button:hover {
+      :host([variant="warm"]) :is(button, a):hover {
         color: #fff;
         background-color: #c05600;
       }
 
-      :host([variant="warm"]) button:active {
+      :host([variant="warm"]) :is(button, a):active {
         color: #fff;
         background-color: #775540;
       }
 
       /** outline */
-      :host([variant="outline"]) button {
+      :host([variant="outline"]) :is(button, a) {
         background-color: transparent;
         box-shadow: inset 0 0 0 2px #005ea2;
         color: #005ea2;
       }
 
-      :host([variant="outline"]) button:hover {
+      :host([variant="outline"]) :is(button, a):hover {
         box-shadow: inset 0 0 0 2px #1a4480;
         color: #1a4480;
       }
 
-      :host([variant="outline"]) button:active {
+      :host([variant="outline"]) :is(button, a):active {
         box-shadow: inset 0 0 0 2px #162e51;
         color: #162e51;
       }
     `,
     html`
-      <button tabindex="0">
-        <slot></slot>
-      </button>
+      <j-if bind="href">
+        <template>
+          <j-props>
+            <a $href="href" $disabled="disabled" $target="target">
+              <slot></slot>
+            </a>
+          </j-props>
+        </template>
+
+        <template else>
+          <j-props>
+            <button tabindex="0" $type="type" $disabled="disabled" $value="value">
+              <slot></slot>
+            </button>
+          </j-props>
+        </template>
+      </j-if>
     `,
   ],
 })
@@ -179,36 +193,37 @@ export class USAButtonElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
+  @bind()
   accessor type: "button" | "submit" | "reset" = "button";
 
   @attr()
+  @bind()
   accessor disabled = false;
 
   @attr()
   accessor variant: ButtonVariant = "primary";
 
   @attr()
+  @bind()
   accessor value = "";
 
+  @attr()
+  @bind()
+  accessor href = "";
+
+  @attr()
+  @bind()
+  accessor target = "";
+
   accessor tabIndex = 0;
 
   #internals = this.attachInternals();
-  #button = query("button");
-
-  @ready()
-  onReady() {
-    this.#button({ autofocus: this.autofocus });
-  }
 
   @listen("click")
   onInternalClick() {
     this.#handleForm();
   }
 
-  attributeChangedCallback() {
-    this.#button({ type: this.type, disabled: this.disabled });
-  }
-
   #handleForm() {
     const { form } = this.#internals;
 

package/src/lib/button/button.stories.ts

@@ -16,6 +16,12 @@ const meta = {
               i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"
             }`,
         )}
+        ${BUTTON_VARIANTS.map(
+          (variant, i) =>
+            html`<usa-button href="#" variant=${variant}>Hello World (Link)</usa-button> ${
+              i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"
+            }`,
+        )}
         <usa-button disabled>Disabled</usa-button>
       </div>
     `;

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

@@ -86,22 +86,22 @@ declare global {
         <div class="container">
           <input type="file" tabindex="0"/>
 
-          <j-if bind="!filesVisible">
-            <template>
+          <j-if bind="filesVisible">
+              <template>
+                <j-props>
+                <usa-file-input-preview $.files="files">
+                  Selected file <usa-link>Change file</usa-link>
+                </usa-file-input-preview>
+              </j-props>
+            </template>
+
+            <template else>
               <div class="box">
                 <slot name="description">
                   Drag file here or <usa-link>choose from folder</usa-link>
                 </slot>
               </div>
             </template>
-
-            <template else>
-              <j-props>
-                <usa-file-input-preview $.files="files">
-                  Selected file <usa-link>Change file</usa-link>
-                </usa-file-input-preview>
-              </j-props>
-            </template>
           </j-if>
         </div>
       </label>
@@ -218,6 +218,7 @@ export class USAFileInputElement extends HTMLElement {
       }
 
       this.files = data.files;
+      this.filesVisible = !!this.files?.length;
     }
   }
 }

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

@@ -44,4 +44,36 @@ describe("usa-file-input", () => {
 
     assert.deepEqual(fileNames, ["first.txt", "second.txt"]);
   });
+
+  it("should show file preview after drag and drop", async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input>
+        Input accepts a single file
+      </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector("input");
+
+    assert.isOk(nativeInput);
+
+    // Simulate drag and drop with a file
+    const data = new DataTransfer();
+    data.items.add(new File([], "test.txt"));
+
+    const dropEvent = new DragEvent("drop", {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that filesVisible is true and files are set
+    assert.isTrue(fileInput.filesVisible);
+    assert.equal(fileInput.files?.length, 1);
+    assert.equal(fileInput.files?.[0].name, "test.txt");
+  });
 });

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

@@ -1,4 +1,4 @@
-import { inject, injectable, injected } from "@joist/di";
+import { inject, injectable } from "@joist/di";
 import { attr, css, element } from "@joist/element";
 
 import { IconService } from "../services/icon.service.js";
@@ -41,12 +41,6 @@ export class USAIconElement extends HTMLElement {
   #icon = inject(IconService);
   #injected = false;
 
-  @injected()
-  onInjected() {
-    this.#injected = true;
-    this.#updateIcon();
-  }
-
   attributeChangedCallback(_: string, newVal: string, oldVal: string) {
     if (this.#injected) {
       if (newVal !== oldVal) {
@@ -55,6 +49,11 @@ export class USAIconElement extends HTMLElement {
     }
   }
 
+  connectedCallback() {
+    this.#injected = true;
+    this.#updateIcon();
+  }
+
   async #updateIcon() {
     const icon = this.#icon();
 

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

@@ -1,3 +1,4 @@
+import "@joist/templating/define.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-button": USAButtonElement;
@@ -12,8 +13,8 @@ export declare class USAButtonElement extends HTMLElement {
     accessor disabled: boolean;
     accessor variant: ButtonVariant;
     accessor value: string;
+    accessor href: string;
+    accessor target: string;
     accessor tabIndex: number;
-    onReady(): void;
     onInternalClick(): void;
-    attributeChangedCallback(): void;
 }

package/target/lib/button/button.element.js

@@ -1,5 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
+import "@joist/templating/define.js";
+import { attr, css, element, html, listen } from "@joist/element";
+import { bind } from "@joist/templating";
 export const BUTTON_VARIANTS = [
     "primary",
     "secondary",
@@ -15,8 +17,8 @@ let USAButtonElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;border-top-left-radius:inherit;border-bottom-left-radius:inherit;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}button:visited{color:#fff}button:hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}button:active{color:#fff;background-color:#162e51}button:not([disabled]):focus{outline-offset:0.25rem}button:disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}button:disabled:active,button:disabled:focus,button:disabled:hover{color:#454545;background-color:#c9c9c9}button:focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) button{color:#fff;background-color:#d83933}:host([variant=secondary]) button:hover{background-color:#b50909}:host([variant=secondary]) button:active{background-color:#8b0a03}:host([variant=cool]) button{color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) button:hover{background-color:#28a0cb}:host([variant=cool]) button:active{color:#fff;background-color:#07648d}:host([variant=warm]) button{color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) button:hover{color:#fff;background-color:#c05600}:host([variant=warm]) button:active{color:#fff;background-color:#775540}:host([variant=outline]) button{background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) button:hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) button:active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
-                html `<button tabindex="0"><slot></slot></button>`,
+                css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;overflow:hidden}a,button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}:is(button,a):visited{color:#fff}:is(button,a):hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}:is(button,a):active{color:#fff;background-color:#162e51}:is(button,a):not([disabled]):focus{outline-offset:0.25rem}:is(button,a):disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}:is(button,a):disabled:active,:is(button,a):disabled:focus,:is(button,a):disabled:hover{color:#454545;background-color:#c9c9c9}:is(button,a):focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) :is(button,a){color:#fff;background-color:#d83933}:host([variant=secondary]) :is(button,a):hover{background-color:#b50909}:host([variant=secondary]) :is(button,a):active{background-color:#8b0a03}:host([variant=cool]) :is(button,a){color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) :is(button,a):hover{background-color:#28a0cb}:host([variant=cool]) :is(button,a):active{color:#fff;background-color:#07648d}:host([variant=warm]) :is(button,a){color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) :is(button,a):hover{color:#fff;background-color:#c05600}:host([variant=warm]) :is(button,a):active{color:#fff;background-color:#775540}:host([variant=outline]) :is(button,a){background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) :is(button,a):hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) :is(button,a):active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
+                html `<j-if bind="href"><template><j-props><a $href="href" $disabled="disabled" $target="target"><slot></slot></a></j-props></template><template else><j-props><button tabindex="0" $type="type" $disabled="disabled" $value="value"><slot></slot></button></j-props></template></j-if>`,
             ],
         })];
     let _classDescriptor;
@@ -36,23 +38,30 @@ let USAButtonElement = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
-    let _onReady_decorators;
+    let _href_decorators;
+    let _href_initializers = [];
+    let _href_extraInitializers = [];
+    let _target_decorators;
+    let _target_initializers = [];
+    let _target_extraInitializers = [];
     let _onInternalClick_decorators;
     var USAButtonElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _type_decorators = [attr()];
-            _disabled_decorators = [attr()];
+            _type_decorators = [attr(), bind()];
+            _disabled_decorators = [attr(), bind()];
             _variant_decorators = [attr()];
-            _value_decorators = [attr()];
-            _onReady_decorators = [ready()];
+            _value_decorators = [attr(), bind()];
+            _href_decorators = [attr(), bind()];
+            _target_decorators = [attr(), bind()];
             _onInternalClick_decorators = [listen("click")];
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_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, _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, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
+            __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
             __esDecorate(this, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USAButtonElement = _classThis = _classDescriptor.value;
@@ -71,20 +80,19 @@ let USAButtonElement = (() => {
         #value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ""));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        #tabIndex_accessor_storage = (__runInitializers(this, _value_extraInitializers), 0);
+        #href_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _href_initializers, ""));
+        get href() { return this.#href_accessor_storage; }
+        set href(value) { this.#href_accessor_storage = value; }
+        #target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, ""));
+        get target() { return this.#target_accessor_storage; }
+        set target(value) { this.#target_accessor_storage = value; }
+        #tabIndex_accessor_storage = (__runInitializers(this, _target_extraInitializers), 0);
         get tabIndex() { return this.#tabIndex_accessor_storage; }
         set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
         #internals = this.attachInternals();
-        #button = query("button");
-        onReady() {
-            this.#button({ autofocus: this.autofocus });
-        }
         onInternalClick() {
             this.#handleForm();
         }
-        attributeChangedCallback() {
-            this.#button({ type: this.type, disabled: this.disabled });
-        }
         #handleForm() {
             const { form } = this.#internals;
             if (form) {

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

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

package/target/lib/button/button.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: "usa-button",
     tags: ["autodocs"],
     render() {
-        return html `<div style="display:inline-flex;flex-direction:column;gap:1rem">${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant="${variant}">Hello World</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}<usa-button disabled="disabled">Disabled</usa-button></div>`;
+        return html `<div style="display:inline-flex;flex-direction:column;gap:1rem">${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant="${variant}">Hello World</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)} ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button href="#" variant="${variant}">Hello World (Link)</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}<usa-button disabled="disabled">Disabled</usa-button></div>`;
     },
     argTypes: {},
     args: {},

package/target/lib/button/button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;UACC,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,gCAAgC,OAAO,oCACzC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -8,7 +8,7 @@ let USAFileInputElement = (() => {
             tagName: "usa-file-input",
             shadowDom: [
                 css `*{box-sizing:border-box}:host{--usa-input-radius:0;--usa-input-bg-color:#d9e8f6;display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}label{display:block}input{cursor:pointer;left:0;margin:0;max-width:none;position:absolute;text-indent:-999em;width:100%;z-index:1;bottom:0;top:0}input:focus{outline:.25rem solid #2491ff;outline-offset:0}label slot.label{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;margin-bottom:.5rem}:host(.dragenter) .box{border-color:#2491ff}.box{border:1px dashed #adadad;border-radius:var(--usa-input-radius);display:flex;font-size:.93rem;position:relative;text-align:center;width:100%;height:5.2rem;align-items:center;justify-content:center}.container{position:relative}`,
-                html `<label><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><j-if bind="!filesVisible"><template><div class="box"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template><template else><j-props><usa-file-input-preview $.files="files">Selected file<usa-link>Change file</usa-link></usa-file-input-preview></j-props></template></j-if></div></label>`,
+                html `<label><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">Selected file<usa-link>Change file</usa-link></usa-file-input-preview></j-props></template><template else><div class="box"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div></label>`,
             ],
         })];
     let _classDescriptor;
@@ -146,6 +146,7 @@ let USAFileInputElement = (() => {
                     }
                 }
                 this.files = data.files;
+                this.filesVisible = !!this.files?.length;
             }
         }
         static {

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

@@ -1 +1 @@
-{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IA0G5B,mBAAmB;4BAlG/B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCAGjD,IAAI,EAAE;oCAGN,IAAI,EAAE;kCAGN,IAAI,EAAE;oCAGN,IAAI,EAAE;iCAGN,IAAI,EAAE;wCAGN,IAAI,EAAE;0CA2BN,MAAM,EAAE;yCAyBR,MAAM,CAAC,QAAQ,CAAC;uCAUhB,MAAM,CAAC,WAAW,CAAC;uCAKnB,MAAM,CAAC,WAAW,CAAC;kCAKnB,MAAM,CAAC,MAAM,CAAC;YAtFf,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAGzB,uKAAS,MAAM,6BAAN,MAAM,uFAAM;YAGrB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAG1B,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAGvC,yLAAS,YAAY,6BAAZ,YAAY,mGAAS;YA2B9B,6LAAA,cAAc,6DAsBb;YAGD,0LAAA,aAAa,6DAOZ;YAGD,oLAAA,WAAW,6DAEV;YAGD,oLAAA,WAAW,6DAEV;YAGD,qKAAA,MAAM,6DAqBL;YAhHH,6KAiHC;;;;QAhHC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAG7B,0BAJW,mDAAmB,8CAId,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,gIAAoB,IAAI,GAAC;QAAzB,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAGzB,gIAAkB,EAAE,GAAC;QAArB,IAAS,MAAM,4CAAM;QAArB,IAAS,MAAM,kDAAM;QAGrB,kIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAG1B,8HAAkC,IAAI,GAAC;QAAvC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAGvC,yIAAwB,KAAK,GAAC;QAA9B,IAAS,YAAY,kDAAS;QAA9B,IAAS,YAAY,wDAAS;QAE9B,UAAU,8DAAG,IAAI,CAAC,eAAe,EAAE,EAAC;QACpC,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QAExB,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC;gBACV,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;QACL,CAAC;QAED,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,EAAE,WAAW,EAAE,IAAI,EAAE,EACrB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CACN,CAAC;YACJ,CAAC;QACH,CAAC;QAGD,cAAc;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAEjD,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;YAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;gBACvB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC9B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAEvC,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,EAAE,WAAW,EAAE,IAAI,EAAE,EACrB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CACN,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAGD,aAAa;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC;YAE1C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1C,CAAC;QAGD,WAAW;YACT,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC;QAGD,WAAW;YACT,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;QAGD,MAAM,CAAC,CAAY;YACjB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAEnC,IAAI,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;gBAEhC,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;oBACxC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;wBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;wBAE9B,IAAI,IAAI,EAAE,CAAC;4BACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBACvB,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;gBACxB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC;YAC3C,CAAC;QACH,CAAC;;YAhHU,uDAAmB;;;;;SAAnB,mBAAmB"}

package/target/lib/file-input/file-input.test.js

@@ -19,5 +19,25 @@ describe("usa-file-input", () => {
         });
         assert.deepEqual(fileNames, ["first.txt", "second.txt"]);
     });
+    it("should show file preview after drag and drop", async () => {
+        const fileInput = await fixture(html `<usa-file-input>Input accepts a single file</usa-file-input>`);
+        const nativeInput = fileInput.shadowRoot?.querySelector("input");
+        assert.isOk(nativeInput);
+        // Simulate drag and drop with a file
+        const data = new DataTransfer();
+        data.items.add(new File([], "test.txt"));
+        const dropEvent = new DragEvent("drop", {
+            dataTransfer: data,
+            bubbles: true,
+            cancelable: true,
+        });
+        nativeInput.dispatchEvent(dropEvent);
+        // Wait for effects to resolve
+        await Promise.resolve();
+        // Verify that filesVisible is true and files are set
+        assert.isTrue(fileInput.filesVisible);
+        assert.equal(fileInput.files?.length, 1);
+        assert.equal(fileInput.files?.[0].name, "test.txt");
+    });
 });
 //# sourceMappingURL=file-input.test.js.map

package/target/lib/file-input/file-input.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;;;KAUpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"file-input.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;;;KAUpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;KAIxD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -8,6 +8,6 @@ export declare class USAIconElement extends HTMLElement {
     #private;
     accessor icon: USAIcon;
     ariaHidden: string | null;
-    onInjected(): void;
     attributeChangedCallback(_: string, newVal: string, oldVal: string): void;
+    connectedCallback(): void;
 }

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

@@ -1,5 +1,5 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { inject, injectable, injected } from "@joist/di";
+import { inject, injectable } from "@joist/di";
 import { attr, css, element } from "@joist/element";
 import { IconService } from "../services/icon.service.js";
 let USAIconElement = (() => {
@@ -15,34 +15,26 @@ 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, _instanceExtraInitializers), __runInitializers(this, _icon_initializers, "accessibility_new"));
+        #icon_accessor_storage = __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");
         #icon = inject(IconService);
         #injected = false;
-        onInjected() {
-            this.#injected = true;
-            this.#updateIcon();
-        }
         attributeChangedCallback(_, newVal, oldVal) {
             if (this.#injected) {
                 if (newVal !== oldVal) {
@@ -50,6 +42,10 @@ let USAIconElement = (() => {
                 }
             }
         }
+        connectedCallback() {
+            this.#injected = true;
+            this.#updateIcon();
+        }
         async #updateIcon() {
             const icon = this.#icon();
             if (this.shadowRoot) {

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,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;IA+B7C,cAAc;4BAtB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,CAAC;YACV,IAAI,EAAE,cAAc;SACrB,CAAC;;;;sBACkC,WAAW;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;sCAQN,QAAQ,EAAE;YAPX,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAQ7C,iLAAA,UAAU,6DAGT;YAbH,6KAoCC;;;YApCY,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;QAGlB,UAAU;YACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,wBAAwB,CAAC,CAAS,EAAE,MAAc,EAAE,MAAc;YAChE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;oBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,KAAK,CAAC,WAAW;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAElD,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;oBACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;gBAC7D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;;;;SAnCU,cAAc"}
+{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;IA+B7C,cAAc;4BAtB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,CAAC;YACV,IAAI,EAAE,cAAc;SACrB,CAAC;;;;sBACkC,WAAW;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAF/C,6KAmCC;;;YAnCY,uDAAc;;QAEzB,qEAAyB,mBAAmB,EAAC;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,wBAAwB,CAAC,CAAS,EAAE,MAAc,EAAE,MAAc;YAChE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;oBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,WAAW;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAElD,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;oBACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;gBAC7D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;;;;SAlCU,cAAc"}