@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/atomic/assets/image/placeholder.js

@@ -0,0 +1,20 @@
+"use strict";
+const background = require("./background.js");
+const makeDefaultImage = () => {
+  const DEFAULT_IMAGE = `<svg id="Fearlessly-Forward-Logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1032.8 400"><defs><style>.cls-1 {fill: none;}.cls-2 {  clip-path: url(#clippath);}.cls-3 {  fill: #fff;}.cls-4 {  fill: #ffd200;}.cls-5 {  fill: #e31933;}.cls-6 {  fill: #231f20;}</style><clipPath id="clippath"><rect class="cls-1" width="1032.8" height="400"/></clipPath></defs><g class="cls-2"><g><g><polygon class="cls-5" points="658.3 542.19 265.93 149.82 246.65 130.54 227.37 149.82 -157.8 534.99 -119.24 573.55 246.65 207.66 619.74 580.75 658.3 542.19"/><polygon class="cls-4" points="495.04 -220.31 177.58 97.15 -139.88 -220.31 -191.29 -168.9 151.88 174.27 177.58 199.97 203.29 174.27 546.45 -168.9 495.04 -220.31"/><polygon class="cls-5" points="-346.05 -117.45 -28.54 200.05 -345.37 517.51 -293.86 568.82 74.18 199.94 48.53 174.29 -294.64 -168.87 -346.05 -117.45"/><polygon class="cls-6" points="-2.48 -117.45 -4.98 200.05 -1.81 517.51 49.71 568.82 417.75 199.94 392.09 174.29 48.93 -168.87 -2.48 -117.45"/><polygon class="cls-4" points="87.54 530.28 417.85 199.97 87.54 -130.33 113.25 -156.04 456.41 187.12 469.26 199.97 456.41 212.82 113.25 555.99 87.54 530.28"/><polygon class="cls-6" points="-204.14 -130.31 126.17 200 -204.14 530.31 -178.43 556.01 164.73 212.85 177.58 200 -178.43 -156.01 -204.14 -130.31"/></g><g><polygon class="cls-6" points="207.33 -60.43 599.69 331.93 618.97 351.21 638.25 331.93 1023.42 -53.24 984.86 -91.8 618.97 274.09 245.89 -98.99 207.33 -60.43"/><polygon class="cls-5" points="1691.1 542.19 1298.73 149.82 1279.45 130.54 1260.17 149.82 875 534.99 913.56 573.55 1279.45 207.66 1652.54 580.75 1691.1 542.19"/><polygon class="cls-4" points="301.57 -148.97 262.92 -136.2 594.56 197 613.89 177.68 919.06 -127.49 880.5 -140.35 594.65 145.49 301.57 -148.97"/><polygon class="cls-4" points="770.05 618.11 808.7 605.34 477.05 272.14 457.73 291.46 152.56 596.63 191.11 609.5 476.96 323.65 770.05 618.11"/><polygon class="cls-4" points="533.1 -117.45 850.56 200 533.1 517.46 584.51 568.87 927.68 225.7 953.39 200 927.68 174.29 584.51 -168.87 533.1 -117.45"/><polygon class="cls-4" points="1527.84 -220.31 1210.38 97.15 892.93 -220.31 841.51 -168.9 1184.68 174.27 1210.38 199.97 1236.09 174.27 1579.25 -168.9 1527.84 -220.31"/><polygon class="cls-5" points="686.75 -117.45 1004.26 200.05 687.43 517.51 738.94 568.82 1106.98 199.94 1081.33 174.29 738.16 -168.87 686.75 -117.45"/><polygon class="cls-5" points="997.78 -309.11 680.28 8.4 362.82 -308.43 311.51 -256.92 680.38 111.12 706.04 85.47 1049.19 -257.7 997.78 -309.11"/><polygon class="cls-6" points="1030.32 -117.45 1347.82 200.05 1030.99 517.51 1082.51 568.82 1450.55 199.94 1424.89 174.29 1081.73 -168.87 1030.32 -117.45"/><polygon class="cls-6" points="622.98 530.31 953.29 200 622.98 -130.31 648.69 -156.01 991.85 187.14 1004.7 200 991.85 212.85 648.69 556.01 622.98 530.31"/><polygon class="cls-5" points="311.51 530.31 641.82 200 311.51 -130.31 337.22 -156.01 680.38 187.14 693.23 200 680.38 212.85 337.22 556.01 311.51 530.31"/><polygon class="cls-6" points="997.78 -378.98 680.28 -61.47 362.82 -378.31 311.51 -326.79 680.38 41.25 706.04 15.59 1049.19 -327.57 997.78 -378.98"/></g></g></g><polygon class="cls-3" points="787.14 136.08 651.06 0 392 0 592.85 200.84 393.07 400.62 652.13 400.62 787.14 265.61 851.91 200.84 787.14 136.08"/></svg>`;
+  const svgImage = document.createElement("img");
+  svgImage.setAttribute(
+    "src",
+    `data:image/svg+xml,${encodeURIComponent(DEFAULT_IMAGE)}`
+  );
+  svgImage.setAttribute("alt", "Fearlessly Forward graphic");
+  return svgImage;
+};
+const placeholder = {
+  fearlessForward: () => background({
+    element: makeDefaultImage(),
+    isScaled: true
+  })
+};
+module.exports = placeholder;
+//# sourceMappingURL=placeholder.js.map

package/dist/atomic/assets/image/placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.js","sources":["../../../../source/atomic/assets/image/placeholder.ts"],"sourcesContent":["import { default as imageContainer } from './background';\n\nconst makeDefaultImage = () => {\n  const DEFAULT_IMAGE = `<svg id=\"Fearlessly-Forward-Logo\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 1032.8 400\"><defs><style>.cls-1 {fill: none;}.cls-2 {  clip-path: url(#clippath);}.cls-3 {  fill: #fff;}.cls-4 {  fill: #ffd200;}.cls-5 {  fill: #e31933;}.cls-6 {  fill: #231f20;}</style><clipPath id=\"clippath\"><rect class=\"cls-1\" width=\"1032.8\" height=\"400\"/></clipPath></defs><g class=\"cls-2\"><g><g><polygon class=\"cls-5\" points=\"658.3 542.19 265.93 149.82 246.65 130.54 227.37 149.82 -157.8 534.99 -119.24 573.55 246.65 207.66 619.74 580.75 658.3 542.19\"/><polygon class=\"cls-4\" points=\"495.04 -220.31 177.58 97.15 -139.88 -220.31 -191.29 -168.9 151.88 174.27 177.58 199.97 203.29 174.27 546.45 -168.9 495.04 -220.31\"/><polygon class=\"cls-5\" points=\"-346.05 -117.45 -28.54 200.05 -345.37 517.51 -293.86 568.82 74.18 199.94 48.53 174.29 -294.64 -168.87 -346.05 -117.45\"/><polygon class=\"cls-6\" points=\"-2.48 -117.45 -4.98 200.05 -1.81 517.51 49.71 568.82 417.75 199.94 392.09 174.29 48.93 -168.87 -2.48 -117.45\"/><polygon class=\"cls-4\" points=\"87.54 530.28 417.85 199.97 87.54 -130.33 113.25 -156.04 456.41 187.12 469.26 199.97 456.41 212.82 113.25 555.99 87.54 530.28\"/><polygon class=\"cls-6\" points=\"-204.14 -130.31 126.17 200 -204.14 530.31 -178.43 556.01 164.73 212.85 177.58 200 -178.43 -156.01 -204.14 -130.31\"/></g><g><polygon class=\"cls-6\" points=\"207.33 -60.43 599.69 331.93 618.97 351.21 638.25 331.93 1023.42 -53.24 984.86 -91.8 618.97 274.09 245.89 -98.99 207.33 -60.43\"/><polygon class=\"cls-5\" points=\"1691.1 542.19 1298.73 149.82 1279.45 130.54 1260.17 149.82 875 534.99 913.56 573.55 1279.45 207.66 1652.54 580.75 1691.1 542.19\"/><polygon class=\"cls-4\" points=\"301.57 -148.97 262.92 -136.2 594.56 197 613.89 177.68 919.06 -127.49 880.5 -140.35 594.65 145.49 301.57 -148.97\"/><polygon class=\"cls-4\" points=\"770.05 618.11 808.7 605.34 477.05 272.14 457.73 291.46 152.56 596.63 191.11 609.5 476.96 323.65 770.05 618.11\"/><polygon class=\"cls-4\" points=\"533.1 -117.45 850.56 200 533.1 517.46 584.51 568.87 927.68 225.7 953.39 200 927.68 174.29 584.51 -168.87 533.1 -117.45\"/><polygon class=\"cls-4\" points=\"1527.84 -220.31 1210.38 97.15 892.93 -220.31 841.51 -168.9 1184.68 174.27 1210.38 199.97 1236.09 174.27 1579.25 -168.9 1527.84 -220.31\"/><polygon class=\"cls-5\" points=\"686.75 -117.45 1004.26 200.05 687.43 517.51 738.94 568.82 1106.98 199.94 1081.33 174.29 738.16 -168.87 686.75 -117.45\"/><polygon class=\"cls-5\" points=\"997.78 -309.11 680.28 8.4 362.82 -308.43 311.51 -256.92 680.38 111.12 706.04 85.47 1049.19 -257.7 997.78 -309.11\"/><polygon class=\"cls-6\" points=\"1030.32 -117.45 1347.82 200.05 1030.99 517.51 1082.51 568.82 1450.55 199.94 1424.89 174.29 1081.73 -168.87 1030.32 -117.45\"/><polygon class=\"cls-6\" points=\"622.98 530.31 953.29 200 622.98 -130.31 648.69 -156.01 991.85 187.14 1004.7 200 991.85 212.85 648.69 556.01 622.98 530.31\"/><polygon class=\"cls-5\" points=\"311.51 530.31 641.82 200 311.51 -130.31 337.22 -156.01 680.38 187.14 693.23 200 680.38 212.85 337.22 556.01 311.51 530.31\"/><polygon class=\"cls-6\" points=\"997.78 -378.98 680.28 -61.47 362.82 -378.31 311.51 -326.79 680.38 41.25 706.04 15.59 1049.19 -327.57 997.78 -378.98\"/></g></g></g><polygon class=\"cls-3\" points=\"787.14 136.08 651.06 0 392 0 592.85 200.84 393.07 400.62 652.13 400.62 787.14 265.61 851.91 200.84 787.14 136.08\"/></svg>`;\n  const svgImage = document.createElement('img');\n  svgImage.setAttribute(\n    'src',\n    `data:image/svg+xml,${encodeURIComponent(DEFAULT_IMAGE)}`,\n  );\n  svgImage.setAttribute('alt', 'Fearlessly Forward graphic');\n\n  return svgImage;\n};\n\nexport default {\n  fearlessForward: () =>\n    imageContainer({\n      element: makeDefaultImage(),\n      isScaled: true,\n    }),\n};\n"],"names":["imageContainer"],"mappings":";;AAEA,MAAM,mBAAmB,MAAM;AAC7B,QAAM,gBAAgB;AACtB,QAAM,WAAW,SAAS,cAAc,KAAK;AAC7C,WAAS;AAAA,IACP;AAAA,IACA,sBAAsB,mBAAmB,aAAa,CAAC;AAAA,EAAA;AAEzD,WAAS,aAAa,OAAO,4BAA4B;AAEzD,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,iBAAiB,MACfA,WAAe;AAAA,IACb,SAAS,iBAAA;AAAA,IACT,UAAU;AAAA,EAAA,CACX;AACL;;"}

package/dist/atomic/assets/image/placeholder.mjs

@@ -0,0 +1,21 @@
+import imageContainer from "./background.mjs";
+const makeDefaultImage = () => {
+  const DEFAULT_IMAGE = `<svg id="Fearlessly-Forward-Logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1032.8 400"><defs><style>.cls-1 {fill: none;}.cls-2 {  clip-path: url(#clippath);}.cls-3 {  fill: #fff;}.cls-4 {  fill: #ffd200;}.cls-5 {  fill: #e31933;}.cls-6 {  fill: #231f20;}</style><clipPath id="clippath"><rect class="cls-1" width="1032.8" height="400"/></clipPath></defs><g class="cls-2"><g><g><polygon class="cls-5" points="658.3 542.19 265.93 149.82 246.65 130.54 227.37 149.82 -157.8 534.99 -119.24 573.55 246.65 207.66 619.74 580.75 658.3 542.19"/><polygon class="cls-4" points="495.04 -220.31 177.58 97.15 -139.88 -220.31 -191.29 -168.9 151.88 174.27 177.58 199.97 203.29 174.27 546.45 -168.9 495.04 -220.31"/><polygon class="cls-5" points="-346.05 -117.45 -28.54 200.05 -345.37 517.51 -293.86 568.82 74.18 199.94 48.53 174.29 -294.64 -168.87 -346.05 -117.45"/><polygon class="cls-6" points="-2.48 -117.45 -4.98 200.05 -1.81 517.51 49.71 568.82 417.75 199.94 392.09 174.29 48.93 -168.87 -2.48 -117.45"/><polygon class="cls-4" points="87.54 530.28 417.85 199.97 87.54 -130.33 113.25 -156.04 456.41 187.12 469.26 199.97 456.41 212.82 113.25 555.99 87.54 530.28"/><polygon class="cls-6" points="-204.14 -130.31 126.17 200 -204.14 530.31 -178.43 556.01 164.73 212.85 177.58 200 -178.43 -156.01 -204.14 -130.31"/></g><g><polygon class="cls-6" points="207.33 -60.43 599.69 331.93 618.97 351.21 638.25 331.93 1023.42 -53.24 984.86 -91.8 618.97 274.09 245.89 -98.99 207.33 -60.43"/><polygon class="cls-5" points="1691.1 542.19 1298.73 149.82 1279.45 130.54 1260.17 149.82 875 534.99 913.56 573.55 1279.45 207.66 1652.54 580.75 1691.1 542.19"/><polygon class="cls-4" points="301.57 -148.97 262.92 -136.2 594.56 197 613.89 177.68 919.06 -127.49 880.5 -140.35 594.65 145.49 301.57 -148.97"/><polygon class="cls-4" points="770.05 618.11 808.7 605.34 477.05 272.14 457.73 291.46 152.56 596.63 191.11 609.5 476.96 323.65 770.05 618.11"/><polygon class="cls-4" points="533.1 -117.45 850.56 200 533.1 517.46 584.51 568.87 927.68 225.7 953.39 200 927.68 174.29 584.51 -168.87 533.1 -117.45"/><polygon class="cls-4" points="1527.84 -220.31 1210.38 97.15 892.93 -220.31 841.51 -168.9 1184.68 174.27 1210.38 199.97 1236.09 174.27 1579.25 -168.9 1527.84 -220.31"/><polygon class="cls-5" points="686.75 -117.45 1004.26 200.05 687.43 517.51 738.94 568.82 1106.98 199.94 1081.33 174.29 738.16 -168.87 686.75 -117.45"/><polygon class="cls-5" points="997.78 -309.11 680.28 8.4 362.82 -308.43 311.51 -256.92 680.38 111.12 706.04 85.47 1049.19 -257.7 997.78 -309.11"/><polygon class="cls-6" points="1030.32 -117.45 1347.82 200.05 1030.99 517.51 1082.51 568.82 1450.55 199.94 1424.89 174.29 1081.73 -168.87 1030.32 -117.45"/><polygon class="cls-6" points="622.98 530.31 953.29 200 622.98 -130.31 648.69 -156.01 991.85 187.14 1004.7 200 991.85 212.85 648.69 556.01 622.98 530.31"/><polygon class="cls-5" points="311.51 530.31 641.82 200 311.51 -130.31 337.22 -156.01 680.38 187.14 693.23 200 680.38 212.85 337.22 556.01 311.51 530.31"/><polygon class="cls-6" points="997.78 -378.98 680.28 -61.47 362.82 -378.31 311.51 -326.79 680.38 41.25 706.04 15.59 1049.19 -327.57 997.78 -378.98"/></g></g></g><polygon class="cls-3" points="787.14 136.08 651.06 0 392 0 592.85 200.84 393.07 400.62 652.13 400.62 787.14 265.61 851.91 200.84 787.14 136.08"/></svg>`;
+  const svgImage = document.createElement("img");
+  svgImage.setAttribute(
+    "src",
+    `data:image/svg+xml,${encodeURIComponent(DEFAULT_IMAGE)}`
+  );
+  svgImage.setAttribute("alt", "Fearlessly Forward graphic");
+  return svgImage;
+};
+const placeholder = {
+  fearlessForward: () => imageContainer({
+    element: makeDefaultImage(),
+    isScaled: true
+  })
+};
+export {
+  placeholder as default
+};
+//# sourceMappingURL=placeholder.mjs.map

package/dist/atomic/assets/image/placeholder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.mjs","sources":["../../../../source/atomic/assets/image/placeholder.ts"],"sourcesContent":["import { default as imageContainer } from './background';\n\nconst makeDefaultImage = () => {\n  const DEFAULT_IMAGE = `<svg id=\"Fearlessly-Forward-Logo\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 1032.8 400\"><defs><style>.cls-1 {fill: none;}.cls-2 {  clip-path: url(#clippath);}.cls-3 {  fill: #fff;}.cls-4 {  fill: #ffd200;}.cls-5 {  fill: #e31933;}.cls-6 {  fill: #231f20;}</style><clipPath id=\"clippath\"><rect class=\"cls-1\" width=\"1032.8\" height=\"400\"/></clipPath></defs><g class=\"cls-2\"><g><g><polygon class=\"cls-5\" points=\"658.3 542.19 265.93 149.82 246.65 130.54 227.37 149.82 -157.8 534.99 -119.24 573.55 246.65 207.66 619.74 580.75 658.3 542.19\"/><polygon class=\"cls-4\" points=\"495.04 -220.31 177.58 97.15 -139.88 -220.31 -191.29 -168.9 151.88 174.27 177.58 199.97 203.29 174.27 546.45 -168.9 495.04 -220.31\"/><polygon class=\"cls-5\" points=\"-346.05 -117.45 -28.54 200.05 -345.37 517.51 -293.86 568.82 74.18 199.94 48.53 174.29 -294.64 -168.87 -346.05 -117.45\"/><polygon class=\"cls-6\" points=\"-2.48 -117.45 -4.98 200.05 -1.81 517.51 49.71 568.82 417.75 199.94 392.09 174.29 48.93 -168.87 -2.48 -117.45\"/><polygon class=\"cls-4\" points=\"87.54 530.28 417.85 199.97 87.54 -130.33 113.25 -156.04 456.41 187.12 469.26 199.97 456.41 212.82 113.25 555.99 87.54 530.28\"/><polygon class=\"cls-6\" points=\"-204.14 -130.31 126.17 200 -204.14 530.31 -178.43 556.01 164.73 212.85 177.58 200 -178.43 -156.01 -204.14 -130.31\"/></g><g><polygon class=\"cls-6\" points=\"207.33 -60.43 599.69 331.93 618.97 351.21 638.25 331.93 1023.42 -53.24 984.86 -91.8 618.97 274.09 245.89 -98.99 207.33 -60.43\"/><polygon class=\"cls-5\" points=\"1691.1 542.19 1298.73 149.82 1279.45 130.54 1260.17 149.82 875 534.99 913.56 573.55 1279.45 207.66 1652.54 580.75 1691.1 542.19\"/><polygon class=\"cls-4\" points=\"301.57 -148.97 262.92 -136.2 594.56 197 613.89 177.68 919.06 -127.49 880.5 -140.35 594.65 145.49 301.57 -148.97\"/><polygon class=\"cls-4\" points=\"770.05 618.11 808.7 605.34 477.05 272.14 457.73 291.46 152.56 596.63 191.11 609.5 476.96 323.65 770.05 618.11\"/><polygon class=\"cls-4\" points=\"533.1 -117.45 850.56 200 533.1 517.46 584.51 568.87 927.68 225.7 953.39 200 927.68 174.29 584.51 -168.87 533.1 -117.45\"/><polygon class=\"cls-4\" points=\"1527.84 -220.31 1210.38 97.15 892.93 -220.31 841.51 -168.9 1184.68 174.27 1210.38 199.97 1236.09 174.27 1579.25 -168.9 1527.84 -220.31\"/><polygon class=\"cls-5\" points=\"686.75 -117.45 1004.26 200.05 687.43 517.51 738.94 568.82 1106.98 199.94 1081.33 174.29 738.16 -168.87 686.75 -117.45\"/><polygon class=\"cls-5\" points=\"997.78 -309.11 680.28 8.4 362.82 -308.43 311.51 -256.92 680.38 111.12 706.04 85.47 1049.19 -257.7 997.78 -309.11\"/><polygon class=\"cls-6\" points=\"1030.32 -117.45 1347.82 200.05 1030.99 517.51 1082.51 568.82 1450.55 199.94 1424.89 174.29 1081.73 -168.87 1030.32 -117.45\"/><polygon class=\"cls-6\" points=\"622.98 530.31 953.29 200 622.98 -130.31 648.69 -156.01 991.85 187.14 1004.7 200 991.85 212.85 648.69 556.01 622.98 530.31\"/><polygon class=\"cls-5\" points=\"311.51 530.31 641.82 200 311.51 -130.31 337.22 -156.01 680.38 187.14 693.23 200 680.38 212.85 337.22 556.01 311.51 530.31\"/><polygon class=\"cls-6\" points=\"997.78 -378.98 680.28 -61.47 362.82 -378.31 311.51 -326.79 680.38 41.25 706.04 15.59 1049.19 -327.57 997.78 -378.98\"/></g></g></g><polygon class=\"cls-3\" points=\"787.14 136.08 651.06 0 392 0 592.85 200.84 393.07 400.62 652.13 400.62 787.14 265.61 851.91 200.84 787.14 136.08\"/></svg>`;\n  const svgImage = document.createElement('img');\n  svgImage.setAttribute(\n    'src',\n    `data:image/svg+xml,${encodeURIComponent(DEFAULT_IMAGE)}`,\n  );\n  svgImage.setAttribute('alt', 'Fearlessly Forward graphic');\n\n  return svgImage;\n};\n\nexport default {\n  fearlessForward: () =>\n    imageContainer({\n      element: makeDefaultImage(),\n      isScaled: true,\n    }),\n};\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB,MAAM;AAC7B,QAAM,gBAAgB;AACtB,QAAM,WAAW,SAAS,cAAc,KAAK;AAC7C,WAAS;AAAA,IACP;AAAA,IACA,sBAAsB,mBAAmB,aAAa,CAAC;AAAA,EAAA;AAEzD,WAAS,aAAa,OAAO,4BAA4B;AAEzD,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,iBAAiB,MACf,eAAe;AAAA,IACb,SAAS,iBAAA;AAAA,IACT,UAAU;AAAA,EAAA,CACX;AACL;"}

package/dist/atomic/assets/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./image/index.js");
+const index$1 = require("./video/index.js");
+exports.image = index;
+exports.video = index$1;
+//# sourceMappingURL=index.js.map

package/dist/atomic/assets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/atomic/assets/index.mjs

@@ -0,0 +1,7 @@
+import * as index from "./image/index.mjs";
+import * as index$1 from "./video/index.mjs";
+export {
+  index as image,
+  index$1 as video
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/assets/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/atomic/assets/video/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const toggle = require("./toggle.js");
+const observedAutoPlay = require("./observed-auto-play.js");
+exports.toggle = toggle;
+exports.observedAutoPlay = observedAutoPlay;
+//# sourceMappingURL=index.js.map

package/dist/atomic/assets/video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/atomic/assets/video/index.mjs

@@ -0,0 +1,7 @@
+import { default as default2 } from "./toggle.mjs";
+import { default as default3 } from "./observed-auto-play.mjs";
+export {
+  default3 as observedAutoPlay,
+  default2 as toggle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/assets/video/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/atomic/assets/video/observed-auto-play.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;oFAOE,mBAAmB;;;;;;;;;AALtB,wBAuDO"}
+{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;yBAEe,2DAKb,mBAAmB;;;;;;;;;AALtB,wBAuDO"}

package/dist/atomic/assets/video/observed-auto-play.js

@@ -0,0 +1,58 @@
+"use strict";
+const toggle = require("./toggle.js");
+const index = require("../../../utilities/accessibility/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const observedAutoPlay = ({
+  video,
+  isAutoplay = false,
+  isScaled = false,
+  additionalElementStyles
+}) => (() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (video.readyState >= 2) {
+            composite.events.setPlay();
+          } else {
+            video.addEventListener("loadeddata", composite.events.setPlay, {
+              once: true
+            });
+            if (video.readyState === 0) {
+              video.load();
+            }
+          }
+        } else {
+          composite.events.setPause();
+        }
+      });
+    },
+    {
+      threshold: 0.25
+    }
+  );
+  const callback = (isPlaying) => {
+    if (isPlaying && observer) {
+      observer.disconnect();
+    }
+  };
+  video.removeAttribute("controls");
+  video.setAttribute("preload", "true");
+  video.setAttribute("playsinline", "");
+  video.setAttribute("muted", "");
+  video.setAttribute("loop", "");
+  const composite = toggle({
+    video,
+    additionalElementStyles,
+    isScaled,
+    callback
+  });
+  if (!index.isPrefferdReducedMotion() && isAutoplay) {
+    observer.observe(composite.element);
+  }
+  return composite;
+})();
+module.exports = observedAutoPlay;
+//# sourceMappingURL=observed-auto-play.js.map

package/dist/atomic/assets/video/observed-auto-play.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { default as toggle } from './toggle';\nimport * as Utility from 'utilities';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!Utility.accessibility.isPrefferdReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["Utility.accessibility.isPrefferdReducedMotion"],"mappings":";;;;;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,MAAAA,wBAAsB,KAA6B,YAAY;AAClE,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;;"}

package/dist/atomic/assets/video/observed-auto-play.mjs

@@ -0,0 +1,59 @@
+import toggle from "./toggle.mjs";
+import { isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+const observedAutoPlay = ({
+  video,
+  isAutoplay = false,
+  isScaled = false,
+  additionalElementStyles
+}) => (() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (video.readyState >= 2) {
+            composite.events.setPlay();
+          } else {
+            video.addEventListener("loadeddata", composite.events.setPlay, {
+              once: true
+            });
+            if (video.readyState === 0) {
+              video.load();
+            }
+          }
+        } else {
+          composite.events.setPause();
+        }
+      });
+    },
+    {
+      threshold: 0.25
+    }
+  );
+  const callback = (isPlaying) => {
+    if (isPlaying && observer) {
+      observer.disconnect();
+    }
+  };
+  video.removeAttribute("controls");
+  video.setAttribute("preload", "true");
+  video.setAttribute("playsinline", "");
+  video.setAttribute("muted", "");
+  video.setAttribute("loop", "");
+  const composite = toggle({
+    video,
+    additionalElementStyles,
+    isScaled,
+    callback
+  });
+  if (!isPrefferdReducedMotion() && isAutoplay) {
+    observer.observe(composite.element);
+  }
+  return composite;
+})();
+export {
+  observedAutoPlay as default
+};
+//# sourceMappingURL=observed-auto-play.mjs.map

package/dist/atomic/assets/video/observed-auto-play.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"observed-auto-play.mjs","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { default as toggle } from './toggle';\nimport * as Utility from 'utilities';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!Utility.accessibility.isPrefferdReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["Utility.accessibility.isPrefferdReducedMotion"],"mappings":";;;;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,wBAAsB,KAA6B,YAAY;AAClE,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}

package/dist/atomic/assets/video/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;gCAEsB,UAAU;;;;;;;;;AAAjC,wBAsFO"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;yBAEe,OAAO,UAAU;;;;;;;;;AAAjC,wBAsFO"}

package/dist/atomic/assets/video/toggle.js

@@ -0,0 +1,84 @@
+"use strict";
+const index = require("../../../model/elements/index.js");
+const icons = require("../../../utilities/assets/icons.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const buttons = require("../../../model/elements/buttons.js");
+const toggle = (props) => (() => {
+  const {
+    video,
+    additionalElementStyles,
+    isScaled = false,
+    callback
+  } = props;
+  const composite = index.create({
+    element: document.createElement("div"),
+    className: "umd-element-video",
+    elementStyles: {
+      element: {
+        position: "relative",
+        ...additionalElementStyles,
+        ...isScaled && {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        },
+        ...isScaled && {
+          [`& video`]: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block"
+          }
+        }
+      }
+    }
+  });
+  const button = buttons.videoState({
+    element: document.createElement("button")
+  });
+  const setPlay = () => {
+    button.element.setAttribute("aria-label", "Pause");
+    button.element.innerHTML = icons.PAUSE;
+    video.muted = true;
+    video.play().catch((error) => {
+      if (error.name === "NotAllowedError") {
+        setPause();
+      }
+      console.warn("Video play failed:", error);
+    });
+  };
+  const setPause = () => {
+    button.element.setAttribute("aria-label", "Play");
+    button.element.innerHTML = icons.PLAY;
+    video.pause();
+  };
+  button.element.setAttribute("aria-label", "Play");
+  button.element.innerHTML = icons.PLAY;
+  button.element.setAttribute("type", "button");
+  button.element.addEventListener("click", () => {
+    if (video.paused) {
+      if (callback) callback(false);
+      setPlay();
+    } else {
+      if (callback) callback(true);
+      setPause();
+    }
+  });
+  if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
+    setPlay();
+  }
+  composite.element.appendChild(video);
+  composite.element.appendChild(button.element);
+  composite.styles += button.styles;
+  return {
+    ...composite,
+    events: {
+      setPlay,
+      setPause
+    }
+  };
+})();
+module.exports = toggle;
+//# sourceMappingURL=toggle.js.map

package/dist/atomic/assets/video/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport * as Utility from 'utilities';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = Utility.asset.icon.PAUSE;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = Utility.asset.icon.PLAY;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = Utility.asset.icon.PLAY;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","Utility.asset.icon.PAUSE","Utility.asset.icon.PLAY"],"mappings":";;;;;;;AAUA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,QAAAA,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC,MAAAA;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC,MAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA,MAAAA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}

package/dist/atomic/assets/video/toggle.mjs

@@ -0,0 +1,85 @@
+import { create } from "../../../model/elements/index.mjs";
+import { PLAY, PAUSE } from "../../../utilities/assets/icons.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { videoState } from "../../../model/elements/buttons.mjs";
+const toggle = (props) => (() => {
+  const {
+    video,
+    additionalElementStyles,
+    isScaled = false,
+    callback
+  } = props;
+  const composite = create({
+    element: document.createElement("div"),
+    className: "umd-element-video",
+    elementStyles: {
+      element: {
+        position: "relative",
+        ...additionalElementStyles,
+        ...isScaled && {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        },
+        ...isScaled && {
+          [`& video`]: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block"
+          }
+        }
+      }
+    }
+  });
+  const button = videoState({
+    element: document.createElement("button")
+  });
+  const setPlay = () => {
+    button.element.setAttribute("aria-label", "Pause");
+    button.element.innerHTML = PAUSE;
+    video.muted = true;
+    video.play().catch((error) => {
+      if (error.name === "NotAllowedError") {
+        setPause();
+      }
+      console.warn("Video play failed:", error);
+    });
+  };
+  const setPause = () => {
+    button.element.setAttribute("aria-label", "Play");
+    button.element.innerHTML = PLAY;
+    video.pause();
+  };
+  button.element.setAttribute("aria-label", "Play");
+  button.element.innerHTML = PLAY;
+  button.element.setAttribute("type", "button");
+  button.element.addEventListener("click", () => {
+    if (video.paused) {
+      if (callback) callback(false);
+      setPlay();
+    } else {
+      if (callback) callback(true);
+      setPause();
+    }
+  });
+  if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
+    setPlay();
+  }
+  composite.element.appendChild(video);
+  composite.element.appendChild(button.element);
+  composite.styles += button.styles;
+  return {
+    ...composite,
+    events: {
+      setPlay,
+      setPause
+    }
+  };
+})();
+export {
+  toggle as default
+};
+//# sourceMappingURL=toggle.mjs.map

package/dist/atomic/assets/video/toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.mjs","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport * as Utility from 'utilities';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = Utility.asset.icon.PAUSE;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = Utility.asset.icon.PLAY;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = Utility.asset.icon.PLAY;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","Utility.asset.icon.PAUSE","Utility.asset.icon.PLAY"],"mappings":";;;;;;AAUA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/atomic/buttons/fullscreen.js

@@ -0,0 +1,29 @@
+"use strict";
+const icons = require("../../utilities/assets/icons.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+require("../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
+const buttons = require("../../model/elements/buttons.js");
+require("../../model/elements/headline.js");
+const create = ({
+  callback,
+  index: index$1
+}) => (() => {
+  const button = document.createElement("button");
+  button.setAttribute("data-index", index$1.toString());
+  button.addEventListener("click", () => {
+    callback(index$1);
+  });
+  button.setAttribute("aria-label", "View Full Screen");
+  button.innerHTML = `Full Screen <span></span>${icons.FULL_SCREEN}`;
+  return buttons.fullScreen({
+    element: button
+  });
+})();
+const fullscreen = {
+  create
+};
+module.exports = fullscreen;
+//# sourceMappingURL=fullscreen.js.map

package/dist/atomic/buttons/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${Utility.asset.icon.FULL_SCREEN}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","Utility.asset.icon.FULL_SCREEN","ElementModel.buttons.fullScreen"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,MAAAA,WAA8B;AAE7E,SAAOC,mBAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;;"}

package/dist/atomic/buttons/fullscreen.mjs

@@ -0,0 +1,30 @@
+import { FULL_SCREEN } from "../../utilities/assets/icons.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+import "../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
+import { fullScreen } from "../../model/elements/buttons.mjs";
+import "../../model/elements/headline.mjs";
+const create = ({
+  callback,
+  index: index$1
+}) => (() => {
+  const button = document.createElement("button");
+  button.setAttribute("data-index", index$1.toString());
+  button.addEventListener("click", () => {
+    callback(index$1);
+  });
+  button.setAttribute("aria-label", "View Full Screen");
+  button.innerHTML = `Full Screen <span></span>${FULL_SCREEN}`;
+  return fullScreen({
+    element: button
+  });
+})();
+const fullscreen = {
+  create
+};
+export {
+  fullscreen as default
+};
+//# sourceMappingURL=fullscreen.mjs.map

package/dist/atomic/buttons/fullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.mjs","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    const button = document.createElement('button');\n    button.setAttribute('data-index', index.toString());\n    button.addEventListener('click', () => {\n      callback(index);\n    });\n    button.setAttribute('aria-label', 'View Full Screen');\n    button.innerHTML = `Full Screen <span></span>${Utility.asset.icon.FULL_SCREEN}`;\n\n    return ElementModel.buttons.fullScreen({\n      element: button,\n    });\n  })();\n\nexport default {\n  create,\n};\n"],"names":["index","Utility.asset.icon.FULL_SCREEN","ElementModel.buttons.fullScreen"],"mappings":";;;;;;;;AAGA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EAAA,OACAA;AACF,OAIG,MAAM;AACL,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,cAAcA,QAAM,SAAA,CAAU;AAClD,SAAO,iBAAiB,SAAS,MAAM;AACrC,aAASA,OAAK;AAAA,EAChB,CAAC;AACD,SAAO,aAAa,cAAc,kBAAkB;AACpD,SAAO,YAAY,4BAA4BC,WAA8B;AAE7E,SAAOC,WAAgC;AAAA,IACrC,SAAS;AAAA,EAAA,CACV;AACH,GAAA;AAEF,MAAA,aAAe;AAAA,EACb;AACF;"}

package/dist/atomic/buttons/index.d.ts

@@ -1,3 +1,2 @@
 export { default as fullscreen } from './fullscreen';
-export { default as videoState } from './video-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/buttons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/atomic/buttons/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fullscreen = require("./fullscreen.js");
+exports.fullscreen = fullscreen;
+//# sourceMappingURL=index.js.map

package/dist/atomic/buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/atomic/buttons/index.mjs

@@ -0,0 +1,5 @@
+import { default as default2 } from "./fullscreen.mjs";
+export {
+  default2 as fullscreen
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/buttons/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/atomic/events/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const meta = require("./meta.js");
+const sign = require("./sign.js");
+exports.meta = meta;
+exports.sign = sign;
+//# sourceMappingURL=index.js.map

package/dist/atomic/events/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/atomic/events/index.mjs

@@ -0,0 +1,7 @@
+import { default as default2 } from "./meta.mjs";
+import { default as default3 } from "./sign.mjs";
+export {
+  default2 as meta,
+  default3 as sign
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/events/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/atomic/events/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/meta.ts"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,SAAS,GAAG,mBAAmB,GAAG;IACrC,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;gCAgFqB,eAAe;;;;;AAAtC,wBA0BE"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../source/atomic/events/meta.ts"],"names":[],"mappings":"AAIA,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,CAAC;AAEJ,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,SAAS,GAAG,mBAAmB,GAAG;IACrC,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;yBAgFc,OAAO,eAAe;;;;;AAAtC,wBA0BE"}