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

package/components/file-upload/file-upload.js

@@ -0,0 +1,224 @@
+import { E as w } from "../EdFormElement.js";
+import { unsafeCSS as z, nothing as _, html as f } from "lit";
+import { property as l, state as v, query as F } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { n as y } from "../index.browser.js";
+import "../button/button.js";
+import "../field-note/field-note.js";
+import "../icon/icon.js";
+import { defaultTextConfig as n } from "../file-upload.model/file-upload.model.js";
+const O = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-file-upload__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-file-upload.ed-is-error .ed-c-file-upload__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-file-upload.ed-is-success .ed-c-file-upload__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-file-upload--hidden-label .ed-c-file-upload__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-is-dragging .ed-c-file-upload__body{background:var(--ed-theme-color-background-disabled);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--size-base-unit) * 3);text-align:center;border:var(--ed-theme-border-width-sm) dashed var(--ed-theme-color-border-default)}.ed-c-file-upload__body{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);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;text-align:center;border:var(--ed-theme-border-width-sm) dashed var(--ed-theme-color-border-default)}.ed-c-file-upload--button .ed-c-file-upload__body{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);color:var(--ed-theme-color-content-knockout);background-color:var(--ed-color-neutral-70);height:var(--ed-line-height-40);border:var(--ed-theme-border-width-sm) solid var(--ed-color-neutral-70);border-radius:var(--ed-theme-border-radius-md)}.ed-c-file-upload--disabled{cursor:not-allowed;color:var(--ed-theme-color-content-disabled);pointer-events:none}.ed-c-file-upload--disabled .ed-c-file-upload__list,.ed-c-file-upload--disabled .ed-c-file-upload__list .ed-c-file-upload__status--failed,.ed-c-file-upload--disabled .ed-c-file-upload__list .ed-c-file-upload__status--success{color:var(--ed-theme-color-content-disabled)}.ed-c-file-upload--disabled .ed-c-file-upload__list .ed-c-file-upload__close-button{--ed-icon-fill: var(--ed-theme-color-button-content-disabled)}.ed-c-file-upload--disabled .ed-c-file-upload__body,.ed-c-file-upload--disabled .ed-c-file-upload__input{cursor:not-allowed}.ed-c-file-upload__body slot{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;align-items:center}ed-loading-indicator{display:block;margin-inline-end:.5rem}.ed-c-file-upload__icon{--ed-icon-height: 1.25rem ;--ed-icon-width: 1.25rem }.ed-c-file-upload__input{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:100%;cursor:pointer;border:none;z-index:2;opacity:0}.ed-c-file-upload__list{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);list-style:none;margin:.5rem 0 0;padding:0}.ed-c-file-upload__item{display:flex;align-items:center;padding:.25rem .5rem .25rem .25rem;justify-content:space-between;border-block-end:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle)}.ed-c-file-upload__item:last-child{margin-block-end:0}.ed-c-file-upload__item ed-heading{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);--ed-font-size-16: var(--ed-font-size-14);margin-block-end:.25rem}h3.ed-c-file-upload__item-first{padding-inline-start:.5rem}.ed-c-file-upload__item-first,.ed-c-file-upload__item-second{display:flex;align-items:center;width:50%}.ed-c-file-upload__item-first__title,.ed-c-file-upload__item-second__title{display:flex;align-items:center;width:50%;font-size:var(--ed-font-size-14);font-weight:var(--ed-font-weight-semibold);line-height:var(--ed-line-height-20);color:var(--ed-color-neutral-100)}.ed-c-file-upload__list-small-table{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);list-style:none;margin:.5rem 0 0;padding:0}.ed-c-file-upload__list-small-table .ed-c-file-upload__item-small-table{display:flex;align-items:center;padding:.25rem .5rem .25rem .25rem;width:260px;justify-content:space-between;border-block-end:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle)}.ed-c-file-upload__list-small-table .ed-c-file-upload__item-small-table .ed-c-file-upload__small-table .ed-c-file-upload__name-container{display:flex;align-items:center}.ed-c-file-upload__list-small-table .ed-c-file-upload__item-small-table .ed-c-file-upload__small-table .ed-c-file-upload__name-container .ed-c-file-upload__item-text{margin-block-start:3px}.ed-c-file-upload__list-small-table .ed-c-file-upload__item-small-table .ed-c-file-upload__item-second{margin-block-start:8px;width:unset}.ed-c-file-upload__list-small-table .ed-c-file-upload__item-small-table .ed-c-file-upload__item-second .ed-c-file-upload__status-text{margin-inline-start:3px}.ed-c-file-upload__list-small-table .ed-c-file-upload__close-button{margin:9px 0 2px 50px}.ed-c-file-upload__item-text{word-break:break-all}.ed-c-file-upload__status{width:100%;display:flex;align-items:center;justify-content:flex-start}.ed-c-file-upload__status ed-icon,.ed-c-file-upload__status .ed-icon{--ed-icon-height: 1.25rem ;--ed-icon-width: 1.25rem ;margin-inline-end:.5rem}@media all and (max-width:48rem){.ed-c-file-upload__status ed-icon,.ed-c-file-upload__status .ed-icon{margin-block-start:3px}}.ed-c-file-upload__status--success{color:var(--ed-theme-color-content-utility-success)}.ed-c-file-upload__status--failed{color:var(--ed-theme-color-content-utility-error)}.ed-c-file-upload__icon{--ed-icon-width: 1.5rem ;--ed-icon-height: 1.5rem ;height:var(--ed-icon-height);width:var(--ed-icon-width);margin-inline-end:.5rem}.ed-c-file-upload__close-button{--ed-icon-fill: var(--ed-color-utility-red);margin-inline-start:.5rem}.ed-c-file-upload__file-list-heading{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)}";
+var $ = Object.defineProperty, t = (m, i, o, r) => {
+  for (var a = void 0, s = m.length - 1, d; s >= 0; s--)
+    (d = m[s]) && (a = d(i, o, a) || a);
+  return a && $(i, o, a), a;
+};
+class e extends w {
+  constructor() {
+    super(), this.type = "file-upload", this.fieldId = "", this.label = "", this.name = "", this.fieldNote = "", this.errorNote = "", this.ariaDescribedBy = "", this.required = !1, this.disabled = !1, this.placeholder = "", this.isError = !1, this.filesState = [], this.isSuccess = !1, this.hideLabel = !1, this.textConfig = {
+      fileFormatErrorText: n.fileFormatErrorText,
+      fileSizeErrorText: n.fileSizeErrorText,
+      uploadingText: n.uploadingText,
+      dragandDropText: n.dragandDropText,
+      deleteIconName: n.deleteIconName,
+      tableFileText: n.tableFileText
+    }, this.uploadFiles = [], this.uploadingtime = 1e3, this.fileSizeLimit = 75, this.accept = "", this.multiple = !1, this.isDragging = !1, this.validFileMimeType = [];
+  }
+  static get styles() {
+    return z(O);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || y(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || y());
+  }
+  updated(i) {
+    i.forEach((o, r) => {
+      r === "uploadFiles" && this.uploadFiles !== o && setTimeout(() => {
+        const a = [...this.filesState];
+        this.uploadFiles.forEach((s) => {
+          const d = a.findIndex((p) => p.fieldId === s.fileId);
+          d > -1 && (a[d].status = s.status, a[d].statusText = s.statusText);
+        }), this.filesState = a;
+      }, this.uploadingtime);
+    });
+  }
+  getFileSizeBasedOnOS(i) {
+    if (navigator.appVersion.indexOf("Win") !== -1)
+      return i * 1024 * 1024;
+    if (navigator.appVersion.indexOf("Mac") !== -1 || navigator.appVersion.indexOf("Linux") !== -1)
+      return i * 1e3 * 1e3;
+  }
+  handleOnDragOver(i) {
+    i.preventDefault(), this.isDragging || (this.isDragging = !0);
+  }
+  handleOnDragEnd(i) {
+    i.preventDefault(), this.isDragging && (this.isDragging = !1);
+  }
+  updateFilesState() {
+    this.filesState = [];
+  }
+  handleOnFileRemove(i) {
+    const r = this.filesState.filter((a) => a.fieldId !== i);
+    this.dispatch({ eventName: "removedfiles", detailObj: { updatedFiles: r } }), this.filesState = r, r.length === 0 && (this.filesState = []);
+  }
+  handleOnFileInputChange(i) {
+    const o = i.dataTransfer?.files || i.target?.files;
+    if (!o) return;
+    const r = Array.apply(void 0, this.filesState), a = [];
+    this.validFileMimeType = this.accept?.split(","), Object.entries(o).forEach((d) => {
+      let p = !1, u = !1;
+      if (d[1] && typeof d[1].size == "number") {
+        const c = d[1].size, g = this.getFileSizeBasedOnOS(this.fileSizeLimit);
+        g && c > g && (p = !0);
+      }
+      if (this.validFileMimeType?.length && d[1]) {
+        const c = d[1].type, x = c.split("/")[0] + "/*";
+        this.validFileMimeType.indexOf(c) === -1 && this.validFileMimeType.indexOf(x) === -1 && (u = !0);
+      }
+      const b = {
+        fileObject: d,
+        status: p || u ? "Failed" : "uploading",
+        fieldId: y(),
+        statusText: "",
+        fileSizeExceeded: p,
+        fileFormatError: u
+      };
+      a.push(b), r.push(b);
+    }), this.dispatch({
+      eventName: "uploadedfiles",
+      detailObj: { uploadedFiles: a }
+    }), this.filesState = r;
+    const s = i.target;
+    this.internals.setFormValue(s.value);
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-file-upload", {
+      "ed-is-error": this.isError === !0,
+      "ed-is-success": this.isSuccess === !0,
+      "ed-is-dragging": this.isDragging === !0,
+      "ed-c-file-upload--hidden-label": this.hideLabel,
+      "ed-c-file-upload--disabled": this.disabled
+    });
+    return f`
+      <div class="${i}">
+        <label class="ed-c-file-upload__label" for="${this.fieldId}">${this.label}</label>
+        <div
+          class="ed-c-file-upload__body"
+          @dragover=${this.handleOnDragOver}
+          @dragend=${this.handleOnDragEnd}
+          @dragleave=${this.handleOnDragEnd}
+          @drop=${this.handleOnDragEnd}
+        >
+          <input
+            class="ed-c-file-upload__input"
+            type="file"
+            accept="${this.accept}"
+            id="${this.fieldId}"
+            @drop=${this.handleOnFileInputChange}
+            name="${h(this.name)}"
+            value=${h(this.value)}
+            @change=${this.handleOnFileInputChange}
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${h(this.ariaDescribedBy)}"
+            aria-invalid="false"
+            placeholder="${h(this.placeholder)}"
+            ?multiple="${this.multiple}"
+          />
+          <ed-icon class="ed-c-file-upload__icon" name="arrow-up"></ed-icon>
+          ${this.isDragging ? this.textConfig.dragandDropText : f`<slot></slot>`}
+        </div>
+        ${this.fieldNote ? f`<ed-field-note id=${h(this.ariaDescribedBy)} ?isError=${this.isError} ?isDisabled=${this.disabled}>
+              <slot name="field-note">${this.fieldNote}</slot>
+            </ed-field-note> ` : _}
+        ${this.filesState ? f`<span class="ed-c-file-upload__file-list-heading">File(s)</span>` : _}
+        <ul class="ed-c-file-upload__list">
+          ${this.filesState?.map(
+      (o) => f`
+                <li class="ed-c-file-upload__item">
+                  <div class="ed-c-file-upload__item-first">
+                    <span class="ed-c-file-upload__item-text">${o.fileObject[1].name}</span>
+                  </div>
+                    <ed-button
+                      class="ed-c-file-upload__close-button"
+                      variant="bare"
+                      text="${this.textConfig.deleteIconName}"
+                      type="button"
+                      @click=${() => this.handleOnFileRemove(o.fieldId)}
+                    >
+                    </ed-button>
+                  </div>
+                </li>
+              `
+    )}
+        </ul>
+      </div>
+    `;
+  }
+}
+t([
+  l()
+], e.prototype, "fieldId");
+t([
+  l()
+], e.prototype, "label");
+t([
+  l()
+], e.prototype, "name");
+t([
+  l()
+], e.prototype, "fieldNote");
+t([
+  l()
+], e.prototype, "errorNote");
+t([
+  l()
+], e.prototype, "ariaDescribedBy");
+t([
+  l({ type: Boolean })
+], e.prototype, "required");
+t([
+  l({ type: Boolean })
+], e.prototype, "disabled");
+t([
+  l()
+], e.prototype, "placeholder");
+t([
+  l({ type: Boolean })
+], e.prototype, "isError");
+t([
+  v()
+], e.prototype, "filesState");
+t([
+  l({ type: Boolean })
+], e.prototype, "isSuccess");
+t([
+  l({ type: Boolean })
+], e.prototype, "hideLabel");
+t([
+  l()
+], e.prototype, "textConfig");
+t([
+  l()
+], e.prototype, "uploadFiles");
+t([
+  l()
+], e.prototype, "uploadingtime");
+t([
+  l()
+], e.prototype, "fileSizeLimit");
+t([
+  l()
+], e.prototype, "accept");
+t([
+  l({ type: Boolean })
+], e.prototype, "multiple");
+t([
+  v()
+], e.prototype, "isDragging");
+t([
+  F("input")
+], e.prototype, "field");
+customElements.get("ed-file-upload") === void 0 && customElements.define("ed-file-upload", e);
+export {
+  e as EdFileUpload
+};

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

@@ -0,0 +1,24 @@
+export interface FileUploadTextConfig {
+    fileFormatErrorText: string;
+    fileSizeErrorText: string;
+    uploadingText: string;
+    dragandDropText: string;
+    deleteIconName: string;
+    tableFileText: string;
+}
+export interface filesStateConfig {
+    fileObject: File;
+    status: string;
+    fieldId: string;
+    statusText: string;
+    fileSizeExceeded: boolean;
+    fileFormatError: boolean;
+}
+export interface FileUploadProgressStream {
+    fileId: string;
+    file: string;
+    status: string;
+    statusText: string;
+}
+export declare const defaultTextConfig: FileUploadTextConfig;
+//# sourceMappingURL=file-upload.model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.model.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/file-upload/file-upload.model.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AACD,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,oBAO/B,CAAC"}

package/components/file-upload.model/file-upload.model.js

@@ -0,0 +1,11 @@
+const e = {
+  fileFormatErrorText: "Failed, file format error",
+  fileSizeErrorText: "Failed, file size exceeded 75 MB",
+  uploadingText: "Uploading",
+  dragandDropText: "Drop files here",
+  deleteIconName: "delete",
+  tableFileText: "File Name"
+};
+export {
+  e as defaultTextConfig
+};

package/components/footer/footer.d.ts

@@ -0,0 +1,16 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The footer content
+ * @slot top - The top content (above the default slot)
+ * @slot bottom - The bottom content (below the default slot)
+ */
+export declare class EdFooter extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-footer': EdFooter;
+    }
+}
+//# sourceMappingURL=footer.d.ts.map

package/components/footer/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/footer/footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/components/footer/footer.js

@@ -0,0 +1,35 @@
+import { unsafeCSS as o, html as t } from "lit";
+import { E as r } from "../EdElement.js";
+import "../layout-container/layout-container.js";
+const a = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-footer{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);background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout);padding-top:2.5rem;padding-bottom:3rem}@media all and (min-width:60rem){.ed-c-footer{padding-top:3.4375rem}}";
+class d extends r {
+  static get styles() {
+    return o(a);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-footer", {});
+    return t`
+      <footer class="${e}" role="contentinfo">
+        ${this.slotNotEmpty("top") && t`<div class="ed-c-footer__top">
+          <ed-layout-container>
+            <slot name="top"></slot>
+          </ed-layout-container>
+        </div>`}
+        <div class="ed-c-footer__middle">
+          <ed-layout-container>
+            <slot></slot>
+          </ed-layout-container>
+        </div>
+        ${this.slotNotEmpty("bottom") && t`<div class="ed-c-footer__bottom">
+          <ed-layout-container>
+            <slot name="bottom"></slot>
+          </ed-layout-container>
+        </div>`}
+      </footer>
+    `;
+  }
+}
+customElements.get("ed-footer") === void 0 && customElements.define("ed-footer", d);
+export {
+  d as EdFooter
+};

package/components/global-nav/global-nav.d.ts

@@ -0,0 +1,14 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The global navigation items
+ */
+export declare class EdGlobalNav extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-global-nav': EdGlobalNav;
+    }
+}
+//# sourceMappingURL=global-nav.d.ts.map

package/components/global-nav/global-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/global-nav/global-nav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/components/global-nav/global-nav.js

@@ -0,0 +1,22 @@
+import { unsafeCSS as s, html as t } from "lit";
+import { E as l } from "../EdElement.js";
+const o = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-global-nav__list{display:flex;margin:0;padding:0;list-style:none}";
+class a extends l {
+  static get styles() {
+    return s(o);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-global-nav", {});
+    return t`
+      <nav class="${e}">
+        <ul class="ed-c-global-nav__list">
+          <slot></slot>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.get("ed-global-nav") === void 0 && customElements.define("ed-global-nav", a);
+export {
+  a as EdGlobalNav
+};

package/components/global-nav-item/global-nav-item.d.ts

@@ -0,0 +1,80 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The label for the navigation item
+ */
+export declare class EdGlobalNavItem extends EdElement {
+    /**
+     * Global nav item text
+     */
+    text: string;
+    /**
+     * Global nav item URL
+     */
+    href?: string;
+    /**
+     * Icon name
+     */
+    iconName?: string;
+    /**
+     * Megamenu toggle
+     * 1) If set to true, adds the icon used for global nav items
+     */
+    megaMenu?: boolean;
+    /**
+     * Active state for global nav item megamenu
+     * 1) Used to help toggle the global nav item on or off
+     */
+    isActive?: boolean;
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Initialize functions
+     */
+    constructor();
+    /**
+     * Connected Callback lifecycle
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove window resize event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * Handle click outside the component
+     * 1) Close the show hide panel on click outside
+     * 2) If the nav is already closed then we don't care about outside clicks and we
+     * can bail early
+     * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+     * undefined. To work around that we'll check that we have a shadowRoot (and a
+     * rendered .host) element here to appease the TypeScript compiler. This should never
+     * actually be shown or run for a human end user.
+     * 4) Check to see if we clicked inside the active navigation item
+     * 5) If the navigation is active and we've clicked outside of the nav then it should
+     * be closed.
+     */
+    handleOnClickOutside(event: MouseEvent): void;
+    /**
+     * Toggle active state of global nav item
+     * 1) Remove isActive state from all sibling elements
+     * 2) Toggle active state of element selected
+     */
+    clickHandler(e: MouseEvent): void;
+    /**
+     * Close megamenu panel
+     */
+    closePanel(): void;
+    /**
+     * Keyboard functionality
+     * 1) If the escape key is struck, close the megamenu panel
+     * 2) After closing, focus back on the global nav item
+     */
+    handleOnKeyDown(e: KeyboardEvent): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-global-nav-item': EdGlobalNavItem;
+    }
+}
+//# sourceMappingURL=global-nav-item.d.ts.map

package/components/global-nav-item/global-nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-nav-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/global-nav-item/global-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,eAAgB,SAAQ,SAAS;IAC5C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAc;IAE1B;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAO;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAyB;IAE1C;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;;IAMH;;OAEG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,KAAK,EAAE,UAAU;IAoBtC;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAa1B;;OAEG;IACH,UAAU;IAIV;;;;OAIG;IACH,eAAe,CAAC,CAAC,EAAE,aAAa;IAWhC,MAAM;CA4BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/components/global-nav-item/global-nav-item.js

@@ -0,0 +1,128 @@
+import { unsafeCSS as m, html as c } from "lit";
+import { ifDefined as h } from "lit-html/directives/if-defined.js";
+import { property as o, state as v } from "lit/decorators.js";
+import { E as g } from "../EdElement.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-global-nav__link{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform);display:flex;align-items:center;appearance:none;background:none;border:none;width:100%;padding:1rem 2rem;color:var(--ed-theme-color-content-default);text-decoration:none;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);cursor:pointer}.ed-c-global-nav__link:hover,.ed-c-global-nav__link:focus{background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-default-knockout)}.ed-c-global-nav__item.ed-is-active .ed-c-global-nav__link{background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-subtle)}@media all and (min-width:75rem){.ed-c-global-nav__link{padding:.75rem;color:var(--ed-theme-color-content-knockout)}}ed-icon{--ed-icon-height: .75rem;--ed-icon-width: .75rem;margin-left:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-global-nav__item.ed-is-active ed-icon{transform:rotate(-180deg)}@media all and (min-width:75rem){ed-icon{margin-left:.5rem}}.ed-c-global-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:transparent;opacity:0;transition:all 0s var(--ed-theme-animation-ease);z-index:-1}@media all and (min-width:75rem){.ed-c-global-nav__item-panel{position:absolute;top:100%;left:0;height:auto;box-shadow:var(--ed-theme-box-shadow-md)}}.ed-c-global-nav__item.ed-is-active .ed-c-global-nav__item-panel{display:block;visibility:visible;height:auto;padding-top:2rem;padding-bottom:2rem;background:var(--ed-theme-color-background-default);opacity:1;z-index:1;transition:opacity var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-global-nav__item--megamenu .ed-c-global-nav__item-panel-inner{max-width:70rem;padding-right:2rem;padding-left:2rem;margin:0 auto}";
+var u = Object.defineProperty, n = (l, e, t, d) => {
+  for (var a = void 0, r = l.length - 1, s; r >= 0; r--)
+    (s = l[r]) && (a = s(e, t, a) || a);
+  return a && u(e, t, a), a;
+};
+class i extends g {
+  /**
+   * Initialize functions
+   */
+  constructor() {
+    super(), this.text = "Nav item", this.href = "#", this.iconName = "keyboard-arrow-down", this.handleOnClickOutside = this.handleOnClickOutside.bind(this);
+  }
+  static get styles() {
+    return m(p);
+  }
+  /**
+   * Connected Callback lifecycle
+   */
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this.handleOnClickOutside, !1);
+  }
+  /**
+   * Disconnected callback lifecycle
+   * 1) Remove window resize event listener
+   */
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this.handleOnClickOutside, !1), super.disconnectedCallback();
+  }
+  /**
+   * Handle click outside the component
+   * 1) Close the show hide panel on click outside
+   * 2) If the nav is already closed then we don't care about outside clicks and we
+   * can bail early
+   * 3) By the time a user clicks on the page the shadowRoot will almost certainly be
+   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+   * undefined. To work around that we'll check that we have a shadowRoot (and a
+   * rendered .host) element here to appease the TypeScript compiler. This should never
+   * actually be shown or run for a human end user.
+   * 4) Check to see if we clicked inside the active navigation item
+   * 5) If the navigation is active and we've clicked outside of the nav then it should
+   * be closed.
+   */
+  handleOnClickOutside(e) {
+    if (!this.isActive)
+      return;
+    if (!this.shadowRoot?.host)
+      throw Error("Could not determine navigation context during click handler");
+    const t = e.composedPath().includes(this.shadowRoot.host);
+    this.isActive && !t && (this.isActive = !1);
+  }
+  /**
+   * Toggle active state of global nav item
+   * 1) Remove isActive state from all sibling elements
+   * 2) Toggle active state of element selected
+   */
+  clickHandler(e) {
+    e.preventDefault(), this.parentNode && this.parentNode.querySelectorAll("ed-global-nav-item").forEach((d) => {
+      d !== this && (d.isActive = !1);
+    }), this.isActive = !this.isActive;
+  }
+  /**
+   * Close megamenu panel
+   */
+  closePanel() {
+    this.isActive = !1;
+  }
+  /**
+   * Keyboard functionality
+   * 1) If the escape key is struck, close the megamenu panel
+   * 2) After closing, focus back on the global nav item
+   */
+  handleOnKeyDown(e) {
+    if (e.key === "Escape" && this.isActive === !0) {
+      this.closePanel();
+      const t = this.shadowRoot?.querySelector(".ed-c-global-nav__link");
+      t && setTimeout(() => {
+        t.focus();
+      }, 1);
+    }
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-global-nav__item", {
+      "ed-is-active": this.isActive === !0,
+      "ed-c-global-nav__item--megamenu": this.megaMenu === !0
+    });
+    return this.megaMenu ? c`
+        <li class="${e}" @keydown=${this.handleOnKeyDown}>
+          <button class="ed-c-global-nav__link" @click=${this.clickHandler} aria-expanded=${this.isActive === !0}>
+            ${this.text}
+            <ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${h(this.iconName)}"></ed-icon>
+          </button>
+          <div class="ed-c-global-nav__item-panel">
+            <div class="ed-c-global-nav__item-panel-inner">
+              <slot></slot>
+            </div>
+          </div>
+        </li>
+      ` : c`
+        <li class="${e}">
+          <a class="ed-c-global-nav__link" href="${this.href}">${this.text}</a>
+        </li>
+      `;
+  }
+}
+n([
+  o()
+], i.prototype, "text");
+n([
+  o()
+], i.prototype, "href");
+n([
+  o()
+], i.prototype, "iconName");
+n([
+  o({ type: Boolean })
+], i.prototype, "megaMenu");
+n([
+  v()
+], i.prototype, "isActive");
+customElements.get("ed-global-nav-item") === void 0 && customElements.define("ed-global-nav-item", i);
+export {
+  i as EdGlobalNavItem
+};

package/components/grid/grid.d.ts

@@ -0,0 +1,51 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The grid items
+ */
+export declare class EdGrid extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**side-by-side** yields a grid whose grid items display side-by-side (2 per row) on all screen sizes</li>
+     * <li>**2up** yields a grid whose grid items are stacked on small screens but display side-by-side when enough screen real estate is available to do so</li>
+     * <li>**3up** yields a grid whose grid items are stacked on small screens, transforms to a 2-across pattern and then transforms again to a 3-across pattern</li>
+     * <li>**1-3up** yields a grid whose grid items are stacked on small screens and transforms to a 3-across pattern on larger screens</li>
+     * <li>**4up** yields a grid whose grid items are stacked on small screens, transforms to a 2-across pattern, transforms again to a 3-across pattern, and ultimately transforms to a 4-across pattern</li>
+     * <li>**1-2-4up** yields a grid whose grid items are stacked on small screens, transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern</li>
+     * <li>**1-4up** yields a grid whose grid items are stacked on small screens, transforms to a 4-across pattern on medium/large screens</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'side-by-side' | '2up' | '3up' | '1-3up' | '4up' | '1-4up' | '1-2-4up' | '2-4-6up';
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**none** yields a grid whose grid items are spaced without any gutter in between</li>
+     * <li>**sm** yields a grid whose grid items are spaced with a gap smaller than the default</li>
+     * <li>**lg** yields a grid whose grid items are spaced with a gap larger than the default</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    gap?: 'none' | 'sm' | 'lg';
+    /**
+     * Break variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **faster** breaks the grid at a smaller width than the default. Example: 2up grid breaks to 2 per row at smaller width than default</li>
+     * <li> **slower** breaks the grid at a larger width than the default. Example: 2up grid breaks to 2 per row at larger width than default</li>
+     * <li> **lg** yields a grid whose grid items are spaced with a gap larger than the default</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    break?: 'faster' | 'slower';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-grid': EdGrid;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

package/components/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/grid/grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;;;;;;OAaG;IAEH,OAAO,CAAC,EAAE,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAE7F;;;;;;;;;OASG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAE3B;;;;;;;;;OASG;IAEH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}