@uoguelph/web-components 1.2.0-rc.7 → 1.2.0-rc.9

package/dist/uofg-web-components/uofg-modal.esm.js

@@ -0,0 +1,329 @@
+import { c as z, S as j, i as R, r as m, a as N, s as U, F as K, a5 as P, b as Z, e as E, d as G, g as H, h as r, a1 as _, j as I, k as B, m as J, N as k, u as L, l as M, n as Q, t as v, o as C, p as V, q as W, P as X, Z as q } from "./index-CSn7dBx6.js";
+const Y = (n) => Array.from(n.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])'));
+function x(n) {
+  let e, i, c, b, u, p, g, w, l, y, h;
+  b = new K({ props: { icon: P } });
+  const f = (
+    /*#slots*/
+    n[14].default
+  ), a = Z(
+    f,
+    n,
+    /*$$scope*/
+    n[13],
+    null
+  );
+  return {
+    c() {
+      e = E("div"), i = E("div"), c = E("button"), G(b.$$.fragment), u = H(), a && a.c(), r(c, "class", "absolute right-8 top-8 z-[2] flex h-12 w-12 items-center justify-center border-0 bg-transparent text-3xl p-2 text-[var(--uofg-modal-dismiss-color,white)]"), r(c, "part", "dismiss-button"), r(c, "aria-label", "Close modal"), r(i, "part", "content"), r(i, "class", p = `z-1 absolute left-1/2 h-fit max-h-full w-fit max-w-full -translate-x-1/2 overflow-auto p-8 transition-transform motion-reduce:transition-none ${/*isOpen*/
+      n[0] ? "visible opacity-100" : ""} ${/*isOpen*/
+      n[0] && /*centered*/
+      n[3] ? "translate-y-[calc(-50%_-_50px)]" : ""} ${!/*isOpen*/
+      n[0] && !/*centered*/
+      n[3] || /*isOpen*/
+      n[0] && /*centered*/
+      n[3] ? "translate-y-[-50px]" : ""}`), r(e, "class", "fixed left-0 top-0 z-[1000] flex h-screen w-screen bg-black bg-opacity-50 transition-[opacity,visibility]"), r(e, "role", g = /*alertDialog*/
+      n[5] ? "alertdialog" : "dialog"), r(e, "aria-modal", w = /*isOpen*/
+      n[0] ? "true" : ""), r(
+        e,
+        "aria-label",
+        /*label*/
+        n[4]
+      ), r(e, "tabindex", -1), _(
+        e,
+        "visible",
+        /*isOpen*/
+        n[0]
+      ), _(
+        e,
+        "opacity-100",
+        /*isOpen*/
+        n[0]
+      ), _(e, "invisible", !/*isOpen*/
+      n[0]), _(e, "opacity-0", !/*isOpen*/
+      n[0]);
+    },
+    m(s, o) {
+      I(s, e, o), B(e, i), B(i, c), J(b, c, null), n[15](c), B(i, u), a && a.m(i, null), n[17](e), l = !0, y || (h = [
+        k(
+          c,
+          "click",
+          /*click_handler*/
+          n[16]
+        ),
+        k(
+          e,
+          "click",
+          /*handleOnClick*/
+          n[6]
+        ),
+        k(
+          e,
+          "keyup",
+          /*handleKeyUp*/
+          n[7]
+        ),
+        k(
+          e,
+          "focusout",
+          /*handleFocusOut*/
+          n[8]
+        )
+      ], y = !0);
+    },
+    p(s, [o]) {
+      a && a.p && (!l || o & /*$$scope*/
+      8192) && L(
+        a,
+        f,
+        s,
+        /*$$scope*/
+        s[13],
+        l ? Q(
+          f,
+          /*$$scope*/
+          s[13],
+          o,
+          null
+        ) : M(
+          /*$$scope*/
+          s[13]
+        ),
+        null
+      ), (!l || o & /*isOpen, centered*/
+      9 && p !== (p = `z-1 absolute left-1/2 h-fit max-h-full w-fit max-w-full -translate-x-1/2 overflow-auto p-8 transition-transform motion-reduce:transition-none ${/*isOpen*/
+      s[0] ? "visible opacity-100" : ""} ${/*isOpen*/
+      s[0] && /*centered*/
+      s[3] ? "translate-y-[calc(-50%_-_50px)]" : ""} ${!/*isOpen*/
+      s[0] && !/*centered*/
+      s[3] || /*isOpen*/
+      s[0] && /*centered*/
+      s[3] ? "translate-y-[-50px]" : ""}`)) && r(i, "class", p), (!l || o & /*alertDialog*/
+      32 && g !== (g = /*alertDialog*/
+      s[5] ? "alertdialog" : "dialog")) && r(e, "role", g), (!l || o & /*isOpen*/
+      1 && w !== (w = /*isOpen*/
+      s[0] ? "true" : "")) && r(e, "aria-modal", w), (!l || o & /*label*/
+      16) && r(
+        e,
+        "aria-label",
+        /*label*/
+        s[4]
+      ), (!l || o & /*isOpen*/
+      1) && _(
+        e,
+        "visible",
+        /*isOpen*/
+        s[0]
+      ), (!l || o & /*isOpen*/
+      1) && _(
+        e,
+        "opacity-100",
+        /*isOpen*/
+        s[0]
+      ), (!l || o & /*isOpen*/
+      1) && _(e, "invisible", !/*isOpen*/
+      s[0]), (!l || o & /*isOpen*/
+      1) && _(e, "opacity-0", !/*isOpen*/
+      s[0]);
+    },
+    i(s) {
+      l || (v(b.$$.fragment, s), v(a, s), l = !0);
+    },
+    o(s) {
+      C(b.$$.fragment, s), C(a, s), l = !1;
+    },
+    d(s) {
+      s && V(e), W(b), n[15](null), a && a.d(s), n[17](null), y = !1, X(h);
+    }
+  };
+}
+function $(n, e, i) {
+  let { $$slots: c = {}, $$scope: b } = e, { isOpen: u } = e, { centered: p } = e, { autoOpen: g } = e, { label: w } = e, { alertDialog: l } = e, { staticBackdrop: y } = e, { dismissButton: h } = e, { container: f } = e, { el: a } = e, { inertElements: s } = e;
+  const o = (t) => {
+    y && t.target === t.currentTarget && i(0, u = !1);
+  }, A = (t) => {
+    t.key === "Escape" && i(0, u = !1);
+  }, D = (t) => {
+    var O;
+    if (u && !f.contains(t.relatedTarget) && !a.contains(t.relatedTarget))
+      if (t.preventDefault(), t.target === h) {
+        const d = Y(a);
+        (O = d[d.length - 1]) == null || O.focus();
+      } else
+        h.focus();
+  };
+  function S(t) {
+    q[t ? "unshift" : "push"](() => {
+      h = t, i(2, h);
+    });
+  }
+  const F = () => i(0, u = !1);
+  function T(t) {
+    q[t ? "unshift" : "push"](() => {
+      f = t, i(1, f);
+    });
+  }
+  return n.$$set = (t) => {
+    "isOpen" in t && i(0, u = t.isOpen), "centered" in t && i(3, p = t.centered), "autoOpen" in t && i(10, g = t.autoOpen), "label" in t && i(4, w = t.label), "alertDialog" in t && i(5, l = t.alertDialog), "staticBackdrop" in t && i(11, y = t.staticBackdrop), "dismissButton" in t && i(2, h = t.dismissButton), "container" in t && i(1, f = t.container), "el" in t && i(12, a = t.el), "inertElements" in t && i(9, s = t.inertElements), "$$scope" in t && i(13, b = t.$$scope);
+  }, n.$$.update = () => {
+    if (n.$$.dirty & /*autoOpen*/
+    1024 && g && i(0, u = !0), n.$$.dirty & /*isOpen, container, el, inertElements*/
+    4611) {
+      if (u) {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+              f.focus();
+            });
+          });
+        });
+        let t = a;
+        for (; t !== null && t !== document.body; ) {
+          const O = t.parentElement;
+          if (O === null) {
+            const d = t.getRootNode();
+            if (d instanceof ShadowRoot) {
+              t = d.host;
+              continue;
+            }
+          }
+          if (O !== null)
+            for (const d of O.children)
+              d !== t && !d.inert && (d.inert = !0, s.push(d));
+          t = O, a.dispatchEvent(new CustomEvent("opened", { bubbles: !0, composed: !0 }));
+        }
+      } else {
+        for (const t of s)
+          t.removeAttribute("inert");
+        i(9, s = []), a.dispatchEvent(new CustomEvent("closed", { bubbles: !0, composed: !0 }));
+      }
+      document.body.style.overflow = u ? "hidden" : "";
+    }
+  }, [
+    u,
+    f,
+    h,
+    p,
+    w,
+    l,
+    o,
+    A,
+    D,
+    s,
+    g,
+    y,
+    a,
+    b,
+    c,
+    S,
+    F,
+    T
+  ];
+}
+class ee extends j {
+  constructor(e) {
+    super(), R(this, e, $, x, U, {
+      isOpen: 0,
+      centered: 3,
+      autoOpen: 10,
+      label: 4,
+      alertDialog: 5,
+      staticBackdrop: 11,
+      dismissButton: 2,
+      container: 1,
+      el: 12,
+      inertElements: 9
+    });
+  }
+  get isOpen() {
+    return this.$$.ctx[0];
+  }
+  set isOpen(e) {
+    this.$$set({ isOpen: e }), m();
+  }
+  get centered() {
+    return this.$$.ctx[3];
+  }
+  set centered(e) {
+    this.$$set({ centered: e }), m();
+  }
+  get autoOpen() {
+    return this.$$.ctx[10];
+  }
+  set autoOpen(e) {
+    this.$$set({ autoOpen: e }), m();
+  }
+  get label() {
+    return this.$$.ctx[4];
+  }
+  set label(e) {
+    this.$$set({ label: e }), m();
+  }
+  get alertDialog() {
+    return this.$$.ctx[5];
+  }
+  set alertDialog(e) {
+    this.$$set({ alertDialog: e }), m();
+  }
+  get staticBackdrop() {
+    return this.$$.ctx[11];
+  }
+  set staticBackdrop(e) {
+    this.$$set({ staticBackdrop: e }), m();
+  }
+  get dismissButton() {
+    return this.$$.ctx[2];
+  }
+  set dismissButton(e) {
+    this.$$set({ dismissButton: e }), m();
+  }
+  get container() {
+    return this.$$.ctx[1];
+  }
+  set container(e) {
+    this.$$set({ container: e }), m();
+  }
+  get el() {
+    return this.$$.ctx[12];
+  }
+  set el(e) {
+    this.$$set({ el: e }), m();
+  }
+  get inertElements() {
+    return this.$$.ctx[9];
+  }
+  set inertElements(e) {
+    this.$$set({ inertElements: e }), m();
+  }
+}
+customElements.define("uofg-modal", z(ee, { isOpen: {}, centered: { reflect: !0, type: "Boolean", attribute: "centered" }, autoOpen: { reflect: !0, type: "Boolean", attribute: "auto-open" }, label: { reflect: !0, type: "String", attribute: "label" }, alertDialog: { reflect: !0, type: "String", attribute: "alert-dialog" }, staticBackdrop: { reflect: !0, type: "Boolean", attribute: "static-backdrop" }, dismissButton: {}, container: {}, el: {}, inertElements: {} }, ["default"], [], !0, (n) => class extends n {
+  constructor() {
+    super(), N(this.shadowRoot), this.el = this, this.inertElements = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const e of this.inertElements)
+      e.removeAttribute("inert");
+  }
+  getState() {
+    return this.isOpen;
+  }
+  setState(e) {
+    this.isOpen = e;
+  }
+  toggle() {
+    return this.isOpen = !this.isOpen, this.isOpen;
+  }
+  close() {
+    this.isOpen = !1;
+  }
+  open() {
+    this.isOpen = !0;
+  }
+}));
+export {
+  ee as default
+};

package/dist/uofg-web-components/uofg-web-components.css

@@ -1 +1 @@
-:root{font-size:62.5%}body{font-size:1.6rem;font-family:sans-serif;margin:0;padding:0}uofg-header{display:block;width:100%;height:5rem !important;background-color:black}uofg-header *{display:none}uofg-header:has(*){height:10rem !important}@media screen and (min-width: 1024px){uofg-header{height:14rem !important}uofg-header:has(*){height:18rem !important}}uofg-menu{display:block}uofg-footer{display:block}uofg-modal{display:block;position:fixed;visibility:hidden}uofg-alert{display:block;max-width:100rem}uofg-card{display:block}
+:root{font-size:62.5%}body{font-size:1.6rem;font-family:sans-serif;margin:0;padding:0}uofg-header{display:block;width:100%;height:5rem!important;background-color:#000}uofg-header *{display:none}uofg-header:has(*){height:10rem!important}@media screen and (min-width: 1024px){uofg-header{height:14rem!important}uofg-header:has(*){height:18rem!important}}uofg-menu{display:block}uofg-footer{display:block}uofg-modal{display:block;position:fixed;visibility:hidden}uofg-alert{display:block;max-width:100rem}uofg-card{display:block}

package/dist/uofg-web-components/uofg-web-components.esm.js

@@ -1 +1,8 @@
-import{p as e,b as a}from"./p-4a896033.js";export{s as setNonce}from"./p-4a896033.js";import{g as o}from"./p-e1255160.js";(()=>{const a=import.meta.url,o={};return""!==a&&(o.resourcesUrl=new URL(".",a).href),e(o)})().then((async e=>(await o(),a([["p-663d722e",[[1,"uofg-alert"]]],["p-4e0da5c7",[[1,"uofg-modal",{label:[1],alertDialog:[4,"alert-dialog"],centered:[4],staticBackdrop:[4,"static-backdrop"],autoOpen:[4,"auto-open"],isOpen:[32],getState:[64],setState:[64],toggle:[64],close:[64],open:[64]},null,{isOpen:["handleIsOpenChange"]}]]],["p-b0718d71",[[1,"uofg-header",{pageTitle:[1,"page-title"],pageUrl:[1,"page-url"],isFullSize:[32],pageSpecificContent:[32],isSubContainerOverflowing:[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{threshold:[2],isVisible:[32]},[[9,"scroll","onScroll"]]],[1,"uofg-card",{href:[1]}],[1,"uofg-footer",{extraLinks:[32]}],[0,"uofg-menu",{autoCollapse:[4,"auto-collapse"],isExpanded:[32],getExpanded:[64],setExpanded:[64],toggle:[64],collapse:[64],expand:[64]},null,{isExpanded:["handleIsExpandedChange"]}]]]],e))));
+import o from "./uofg-header.esm.js";
+import r from "./uofg-footer.esm.js";
+import f from "./uofg-modal.esm.js";
+import t from "./uofg-alert.esm.js";
+const d = { UofGHeader: o, UofGFooter: r, UofGModal: f, UofGAlert: t };
+export {
+  d as default
+};

package/package.json

@@ -1,58 +1,46 @@
 {
   "name": "@uoguelph/web-components",
-  "version": "1.2.0-rc.7",
+  "version": "1.2.0-rc.9",
   "description": "University of Guelph Web Components Library",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
+  "module": "dist/uofg-web-components/uofg-web-components.esm.js",
+  "type": "module",
   "unpkg": "dist/uofg-web-components/uofg-web-components.esm.js",
   "files": [
-    "dist/",
-    "loader/"
+    "dist/"
   ],
   "scripts": {
-    "build": "NODE_ENV=production stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e --passWithNoTests",
-    "test.watch": "stencil test --spec --e2e --passWithNoTests --watchAll",
-    "generate": "stencil generate",
+    "dev": "vite",
+    "build": "vite build",
     "format": "npx prettier --write .",
     "prepublishOnly": "npm run build && npmignore --auto"
   },
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@stencil/core": "^4.9.0"
+    "@fortawesome/free-solid-svg-icons": "^6.4.0"
   },
   "devDependencies": {
-    "@stencil-community/eslint-plugin": "^0.7.1",
-    "@stencil-community/postcss": "^2.1.0",
-    "@types/autoprefixer": "^10.2.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.11",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.55.0",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
-    "npmignore": "^0.3.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "puppeteer": "^20.7.3",
-    "stencil-inline-svg": "^1.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "npmignore": "^0.3.1",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.6",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "vite": "^5.1.6",
+    "vite-plugin-full-reload": "^1.1.0"
   },
   "publishConfig": {
     "ignore": [
       "!dist/",
       "!loader/",
       "src/",
+      "public/",
       "docs/"
     ],
     "access": "public"

package/dist/cjs/app-globals-3a1e7e63.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;