@brad-frost-web/eddie-web-components 0.1.0

package/components/counter/counter.js

@@ -0,0 +1,176 @@
+import { E as h } from "../EdElement.js";
+import { unsafeCSS as m, html as l } from "lit";
+import { property as t } from "lit/decorators.js";
+import { ifDefined as a } from "lit-html/directives/if-defined.js";
+import { n as u } from "../index.browser.js";
+import "../button/button.js";
+const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-counter__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-bottom:.5rem}.ed-c-counter.ed-is-error .ed-c-counter__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-counter.ed-is-success .ed-c-counter__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-counter__body{display:flex;max-width:14rem}.ed-c-counter__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:.8125rem .5rem;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-counter__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-counter__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-counter__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-counter__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-counter__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-counter__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-counter__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-counter__input:disabled~.ed-c-text-field__label,.ed-c-counter__input:disabled:hover~.ed-c-text-field__label,.ed-c-counter__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-counter__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-counter__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-counter__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-counter__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-counter__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-counter__input:hover,.ed-is-error .ed-c-counter__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-counter__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-counter__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-counter__input:hover,.ed-is-success .ed-c-counter__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-counter__input{width:100%;padding:.5rem;text-align:center}.ed-c-counter__input+.ed-c-counter__button{margin-left:.5rem}.ed-c-counter__button+.ed-c-counter__input{margin-left:.5rem}";
+var b = Object.defineProperty, o = (i, r, d, y) => {
+  for (var n = void 0, c = i.length - 1, s; c >= 0; c--)
+    (s = i[c]) && (n = s(r, d, n) || n);
+  return n && b(r, d, n), n;
+};
+class e extends h {
+  constructor() {
+    super(...arguments), this.label = "Label", this.subtractButtonText = "Subtract 1", this.subtractButtonIconName = "minus", this.addButtonText = "Add 1", this.addButtonIconName = "add", this.required = !1, this.type = "text", this.count = 0;
+  }
+  static get styles() {
+    return m(p.toString());
+  }
+  /**
+   * Increase
+   * 1) Increase the value by 1
+   */
+  onIncrease(r) {
+    r.preventDefault(), this.count = this.count + 1;
+  }
+  /**
+   * Decrease
+   * 1) Decrease the value by 1
+   */
+  onDecrease(r) {
+    r.preventDefault(), this.count = this.count - 1;
+  }
+  /**
+   * On change
+   * 1) Make the count the value within the input
+   */
+  onChange(r) {
+    this.count = parseInt(r.target.value.replace(/\D/, ""));
+  }
+  /**
+   * On mount/update
+   * 1) Autogenerate ids, for attribute, and aria-describedby ids to make this
+   * accessible if these properties aren't provided
+   */
+  connectedCallback() {
+    super.connectedCallback(), console.log(this.count), console.log(this.min), this.fieldId = this.fieldId || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u());
+  }
+  render() {
+    const r = this.componentClassNames("ed-c-counter", {
+      "ed-c-counter--inverted": this.inverted === !0,
+      "ed-is-error": this.isError,
+      "ed-is-success": this.isSuccess
+    });
+    return l`
+      <div class="${r}">
+        <label class="ed-c-counter__label" for="${this.fieldId}">${this.label}</label>
+        <div class="ed-c-counter__body">
+          <ed-button
+            class="ed-c-counter__button"
+            text=${this.subtractButtonText}
+            iconPosition="after"
+            iconName=${this.subtractButtonIconName}
+            ?hideText=${!0}
+            @click=${(d) => this.onDecrease(d)}
+            ?disabled=${this.min && this.count === this.min}
+          ></ed-button>
+          <input
+            class="ed-c-counter__input"
+            type="text"
+            min=${a(this.min)}
+            max=${a(this.max)}
+            id="${this.fieldId}"
+            pattern="[0-9]*"
+            name="${a(this.name)}"
+            .value="${this.count}"
+            @change=${(d) => this.onChange(d)}
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            ?readonly=${this.readOnly}
+            aria-describedby="${a(this.ariaDescribedBy)}"
+            placeholder="${a(this.placeholder)}"
+          />
+          <ed-button
+            class="ed-c-counter__button"
+            text=${this.addButtonText}
+            iconPosition="after"
+            iconName=${this.addButtonIconName}
+            ?hideText=${!0}
+            @click=${(d) => this.onIncrease(d)}
+            ?disabled=${this.max && this.count === this.max}
+          ></ed-button>
+        </div>
+        ${this.fieldNote && l`<ed-field-note
+          ?inverted=${this.inverted}
+          id=${a(this.ariaDescribedBy)}
+          iconName=${a(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+        >
+          ${this.fieldNote}
+        </ed-field-note>`}
+      </div>
+    `;
+  }
+}
+o([
+  t()
+], e.prototype, "fieldId");
+o([
+  t()
+], e.prototype, "label");
+o([
+  t()
+], e.prototype, "name");
+o([
+  t({ type: Number })
+], e.prototype, "value");
+o([
+  t()
+], e.prototype, "fieldNote");
+o([
+  t()
+], e.prototype, "subtractButtonText");
+o([
+  t()
+], e.prototype, "subtractButtonIconName");
+o([
+  t()
+], e.prototype, "addButtonText");
+o([
+  t()
+], e.prototype, "addButtonIconName");
+o([
+  t({ type: Number })
+], e.prototype, "min");
+o([
+  t({ type: Number })
+], e.prototype, "max");
+o([
+  t()
+], e.prototype, "ariaDescribedBy");
+o([
+  t({ type: Boolean })
+], e.prototype, "required");
+o([
+  t({ type: Boolean })
+], e.prototype, "disabled");
+o([
+  t({ type: Boolean })
+], e.prototype, "readOnly");
+o([
+  t()
+], e.prototype, "type");
+o([
+  t({ type: Boolean })
+], e.prototype, "inverted");
+o([
+  t()
+], e.prototype, "placeholder");
+o([
+  t({ type: Boolean })
+], e.prototype, "isError");
+o([
+  t({ type: Boolean })
+], e.prototype, "isSuccess");
+o([
+  t()
+], e.prototype, "iconName");
+o([
+  t({ type: Number })
+], e.prototype, "count");
+customElements.get("ed-counter") === void 0 && customElements.define("ed-counter", e);
+export {
+  e as EdCounter
+};

package/components/drawer/drawer.d.ts

@@ -0,0 +1,41 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The drawer content
+ * @slot header - The header content
+ * @slot footer - The footer ocntent
+ */
+export declare class EdDrawer extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**top** - aligns the drawer to the top of the viewport</li>
+     * <li>**right** - aligns the drawer to the right of the viewport</li>
+     * <li>**bottom** - aligns the drawer to the bottom of the viewport</li>
+     * <li>**left** - aligns the drawer to the left of the viewport</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Fade/ghost back the page background content
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Active state on the drawer
+     */
+    isActive: boolean;
+    /**
+     * Click function
+     * 1) Toggles the active state when triggered
+     */
+    handleClick(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-drawer': EdDrawer;
+    }
+}
+//# sourceMappingURL=drawer.d.ts.map

package/components/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAG1B;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAW;IAEtD;;OAEG;IAEH,WAAW,CAAC,EAAE,OAAO,CAAS;IAE9B;;OAEG;IAEH,QAAQ,UAAQ;IAEhB;;;OAGG;IACH,WAAW;IAIX,MAAM;CAqCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/components/drawer/drawer.js

@@ -0,0 +1,74 @@
+import { E as c } from "../EdElement.js";
+import { unsafeCSS as l, html as h } from "lit";
+import { property as s, state as p } from "lit/decorators.js";
+import "../button/button.js";
+const w = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-drawer{position:fixed;inset:0;z-index:var(--z-index-500);width:100vw;height:100vh;pointer-events:none}.ed-c-drawer--backdrop{background:#0003;transition:background .4s ease}.ed-c-drawer--backdrop.ed-c-drawer--inactive{background:none}.ed-c-drawer__panel{position:fixed;display:flex;flex-direction:column;gap:2rem;max-width:var(--ed-drawer-max-width, 24rem);padding:1rem;background:var(--ed-theme-color-background-default);box-shadow:0 2px 10px -3px #999;pointer-events:auto;transition:all .4s ease}.ed-c-drawer--horizontal .ed-c-drawer__panel{max-width:none;width:100%;padding-right:4rem}@media all and (min-width:48rem){.ed-c-drawer--horizontal .ed-c-drawer__panel{flex-direction:row}}.ed-c-drawer--top .ed-c-drawer__panel{top:0;left:0}.ed-c-drawer--top.ed-c-drawer--inactive .ed-c-drawer__panel{transform:translateY(-110%)}.ed-c-drawer--right .ed-c-drawer__panel{top:0;right:0;height:100vh}.ed-c-drawer--right.ed-c-drawer--inactive .ed-c-drawer__panel{transform:translate(110%)}.ed-c-drawer--bottom .ed-c-drawer__panel{bottom:0;left:0}.ed-c-drawer--bottom.ed-c-drawer--inactive .ed-c-drawer__panel{transform:translateY(110%)}.ed-c-drawer--left .ed-c-drawer__panel{left:0;top:0;height:100vh}.ed-c-drawer--left.ed-c-drawer--inactive .ed-c-drawer__panel{transform:translate(-110%)}.ed-c-drawer__close-button{position:relative;top:.375rem;padding-left:1rem;margin-left:auto}.ed-c-drawer__header{display:flex}.ed-c-drawer__body{flex:1}.ed-c-drawer__footer{display:flex;align-items:center}';
+var m = Object.defineProperty, i = (a, r, o, _) => {
+  for (var e = void 0, d = a.length - 1, n; d >= 0; d--)
+    (n = a[d]) && (e = n(r, o, e) || e);
+  return e && m(r, o, e), e;
+};
+class t extends c {
+  constructor() {
+    super(...arguments), this.align = "right", this.hasBackdrop = !1, this.isActive = !0;
+  }
+  static get styles() {
+    return l(w);
+  }
+  /**
+   * Click function
+   * 1) Toggles the active state when triggered
+   */
+  handleClick() {
+    this.isActive = !this.isActive;
+  }
+  render() {
+    const r = this.componentClassNames("ed-c-drawer", {
+      "ed-c-drawer--top": this.align === "top",
+      "ed-c-drawer--right": this.align === "right",
+      "ed-c-drawer--bottom": this.align === "bottom",
+      "ed-c-drawer--left": this.align === "left",
+      "ed-c-drawer--horizontal": this.align === "bottom" || this.align === "top",
+      "ed-c-drawer--backdrop": this.hasBackdrop,
+      "ed-c-drawer--inactive": !this.isActive
+    });
+    return h`
+      <section class="${r}" role="dialog">
+        <div class="ed-c-drawer__panel">
+          <div class="ed-c-drawer__header">
+            <slot name="header"></slot>
+            <ed-button
+              variant="bare"
+              iconName="close"
+              iconPosition="after"
+              ?hideText=${!0}
+              text="Close"
+              size="lg"
+              class="ed-c-drawer__close-button"
+              @click=${this.handleClick}
+            ></ed-button>
+          </div>
+          <div class="ed-c-drawer__body">
+            <slot></slot>
+          </div>
+          <div class="ed-c-drawer__footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+}
+i([
+  s()
+], t.prototype, "align");
+i([
+  s()
+], t.prototype, "hasBackdrop");
+i([
+  p()
+], t.prototype, "isActive");
+customElements.get("ed-drawer") === void 0 && customElements.define("ed-drawer", t);
+export {
+  t as EdDrawer
+};

package/components/feature/feature.d.ts

@@ -0,0 +1,27 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdFeature extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Image source
+     */
+    imgSrc?: string;
+    /**
+     * Image alt text
+     */
+    imgAlt?: string;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-feature': EdFeature;
+    }
+}
+//# sourceMappingURL=feature.d.ts.map

package/components/feature/feature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/feature/feature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/components/feature/feature.js

@@ -0,0 +1,42 @@
+import { unsafeCSS as n, html as l } from "lit";
+import { property as o } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const f = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-feature{display:flex;flex-direction:column;align-items:stretch;color:var(--ed-theme-color-content-default);border-radius:var(--ed-theme-border-radius-md)}@media all and (min-width:48rem){.ed-c-feature{flex-direction:row}}.ed-c-feature--inverted{color:var(--ed-theme-color-content-knockout)}.ed-c-feature__body{margin-bottom:2rem}@media all and (min-width:48rem){.ed-c-feature__body{display:flex;flex-direction:column;flex:1;padding-right:2rem;margin-bottom:0}}.ed-c-feature__media{width:100%}@media all and (min-width:48rem){.ed-c-feature__media{width:45%}}.ed-c-feature__image{display:block;width:100%}';
+var u = Object.defineProperty, a = (d, t, s, h) => {
+  for (var e = void 0, i = d.length - 1, m; i >= 0; i--)
+    (m = d[i]) && (e = m(t, s, e) || e);
+  return e && u(t, s, e), e;
+};
+class r extends c {
+  static get styles() {
+    return n(f.toString());
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-feature", {
+      "ed-c-feature--inverted": this.inverted === !0
+    });
+    return l`
+      <div class="${t}">
+        <div class="ed-c-feature__body">
+          <slot></slot>
+        </div>
+        ${this.imgAlt ? l`<div class="ed-c-feature__media">
+              <img class="ed-c-feature__image" src=${this.imgSrc} alt=${this.imgAlt} />
+            </div>` : ""}
+      </div>
+    `;
+  }
+}
+a([
+  o()
+], r.prototype, "imgSrc");
+a([
+  o()
+], r.prototype, "imgAlt");
+a([
+  o({ type: Boolean })
+], r.prototype, "inverted");
+customElements.get("ed-feature") === void 0 && customElements.define("ed-feature", r);
+export {
+  r as EdFeature
+};

package/components/field-note/field-note.d.ts

@@ -0,0 +1,33 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The note content
+ */
+export declare class EdFieldNote extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Error state
+     * 1) Changes the component's treatment to represent an error
+     */
+    isError?: boolean;
+    /**
+     * Success state
+     * 1) Changes the component's treatment to represent a success
+     */
+    isSuccess?: boolean;
+    /**
+     * Icon  name
+     */
+    iconName?: string;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-field-note': EdFieldNote;
+    }
+}
+//# sourceMappingURL=field-note.d.ts.map

package/components/field-note/field-note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-note.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/field-note/field-note.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;CAcP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/components/field-note/field-note.js

@@ -0,0 +1,44 @@
+import { E as m } from "../EdElement.js";
+import { unsafeCSS as c, html as l } from "lit";
+import { property as r } from "lit/decorators.js";
+import "../icon/icon.js";
+const h = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-field-note{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);display:flex;color:var(--ed-theme-color-content-subtle);margin-top:.5rem}.ed-c-field-note.ed-is-error{color:var(--ed-theme-color-content-utility-error)}.ed-c-field-note.ed-is-success{color:var(--ed-theme-color-content-utility-success)}.ed-c-field-note--inverted{color:var(--ed-theme-color-content-knockout)}ed-icon{margin-right:.25rem}";
+var p = Object.defineProperty, s = (i, o, d, y) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(o, d, e) || e);
+  return e && p(o, d, e), e;
+};
+class t extends m {
+  static get styles() {
+    return c(h);
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-field-note", {
+      "ed-is-error": this.isError,
+      "ed-is-success": this.isSuccess,
+      "ed-c-field-note--inverted": this.inverted === !0
+    });
+    return l`
+      <div class="${o}">
+        ${this.iconName && l`<ed-icon name="${this.iconName}"></ed-icon>`}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+s([
+  r({ type: Boolean })
+], t.prototype, "isError");
+s([
+  r({ type: Boolean })
+], t.prototype, "isSuccess");
+s([
+  r()
+], t.prototype, "iconName");
+s([
+  r({ type: Boolean })
+], t.prototype, "inverted");
+customElements.get("ed-field-note") === void 0 && customElements.define("ed-field-note", t);
+export {
+  t as EdFieldNote
+};

package/components/file-upload/file-upload.d.ts

@@ -0,0 +1,118 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+import { FileUploadTextConfig, FileUploadProgressStream, filesStateConfig } from './file-upload.model';
+/**
+ * @slot - The component content
+ */
+export declare class EdFileUpload extends EdFormElement {
+    readonly type = "file-upload";
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The unique id of the field
+     */
+    fieldId: string;
+    /**
+     * The form field's label
+     */
+    label: string;
+    /**
+     * Checkbox name attribute property
+     */
+    name: string;
+    /**
+     * Fieldnote text
+     */
+    fieldNote: string;
+    /**
+     * Errornote text
+     */
+    errorNote: string;
+    /**
+     * Aria describedby
+     * 1) Used to connect the field note in select field to the select menu for accessibility
+     */
+    ariaDescribedBy: string;
+    /**
+     * Required attribute
+     */
+    required: boolean;
+    /**
+     * Disabled attribute
+     */
+    disabled: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * To set FieldNote to Error State
+     */
+    isError: boolean;
+    /**
+     * Files state
+     */
+    filesState: filesStateConfig[];
+    /**
+     * Success state
+     */
+    isSuccess: boolean;
+    /**
+     * Hide label
+     */
+    hideLabel: boolean;
+    /**
+     * Getter and setter methods for textConfig
+     * TextConfig is a JSON structure used to configure the text messages for file upload
+     * fileFormatErrorText - Text to be displayed when the file uploaded is not as per supported format,
+     * fileSizeErrorText - Text to be displayed when the file size exceeds,
+     * uploadingText - Text to be displayed when the file is getting uploaded,
+     * dragandDropText - Text to be displayed on drag and drop state,
+     * deleteIconName - Icon name for the delete button,
+     * tableFileText - Text to be displayed for the first column heading of preview table,
+     * tableStatusText - Text to be displayed for the second column heading of preview table
+     */
+    textConfig: FileUploadTextConfig;
+    /**
+     * Getter and setter methods for files to upload from the application
+     * TextConfig is a JSON structure used to set the status for the files
+     */
+    uploadFiles: FileUploadProgressStream[];
+    /**
+     * Getter and Setter for uploading time
+     */
+    uploadingtime: number;
+    /**
+     * Getter and Setter for file size Validation
+     */
+    fileSizeLimit: number;
+    /**
+     * Getter and Setter for file type Validation
+     */
+    accept: string;
+    /**
+     * Multiple attribute
+     * 1) Allow multiple files to be added to the file upload
+     */
+    multiple: boolean;
+    /**
+     * Dragging state
+     */
+    isDragging: boolean;
+    field: HTMLInputElement;
+    private validFileMimeType;
+    constructor();
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    getFileSizeBasedOnOS(fileSize: number): number;
+    handleOnDragOver(e: DragEvent): void;
+    handleOnDragEnd(e: DragEvent): void;
+    updateFilesState(): void;
+    handleOnFileRemove(fieldId: string): void;
+    private handleOnFileInputChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-file-upload': EdFileUpload;
+    }
+}
+//# sourceMappingURL=file-upload.d.ts.map

package/components/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/file-upload/file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAO9F,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5G;;GAEG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,QAAQ,CAAC,IAAI,iBAAiB;IAE9B,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAM;IAErB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAM;IAEnB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAM;IAElB;;OAEG;IAEH,SAAS,EAAE,MAAM,CAAM;IAEvB;;OAEG;IAEH,SAAS,EAAE,MAAM,CAAM;IAEvB;;;OAGG;IAEH,eAAe,EAAE,MAAM,CAAM;IAE7B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAM;IAEzB;;OAEG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;OAEG;IAEH,UAAU,EAAE,gBAAgB,EAAE,CAAM;IAEpC;;OAEG;IAEH,SAAS,EAAE,OAAO,CAAS;IAE3B;;OAEG;IAEH,SAAS,EAAE,OAAO,CAAS;IAE3B;;;;;;;;;;OAUG;IAGH,UAAU,EAAE,oBAAoB,CAO9B;IAEF;;;OAGG;IAEH,WAAW,EAAE,wBAAwB,EAAE,CAAM;IAE7C;;OAEG;IAGH,aAAa,EAAE,MAAM,CAAQ;IAE7B;;OAEG;IAGH,aAAa,EAAE,MAAM,CAAM;IAE3B;;OAEG;IAGH,MAAM,EAAE,MAAM,CAAM;IAEpB;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,UAAU,EAAE,OAAO,CAAS;IAG5B,KAAK,EAAG,gBAAgB,CAAC;IAEzB,OAAO,CAAC,iBAAiB,CAAgB;;IAMzC,iBAAiB;IAQjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkB/C,oBAAoB,CAAC,QAAQ,EAAE,MAAM;IAQrC,gBAAgB,CAAC,CAAC,EAAE,SAAS;IAO7B,eAAe,CAAC,CAAC,EAAE,SAAS;IAO5B,gBAAgB;IAIhB,kBAAkB,CAAC,OAAO,EAAE,MAAM;IAYlC,OAAO,CAAC,uBAAuB;IA+D/B,MAAM;CAoEP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}