From 81974e30f06146cbe6e19f314a6b40a2a03af5d7 Mon Sep 17 00:00:00 2001
From: frankpagan <frank@cocreate.app>
Date: Mon, 4 Nov 2024 01:09:29 -0500
Subject: [PATCH] feat: add prettier.config.js and format files

---
 docs/index.html | 661 ++++++++++++++++++++++++------------------------
 1 file changed, 333 insertions(+), 328 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index fd633e3..456affd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,341 +1,346 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>CoCreate-google-maps Documentation | CoCreateJS</title>
-        <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="https://cocreate.app/images/favicon.ico" />
-        <meta
-            name="description"
-            content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
-        <meta
-            name="keywords"
-            content="helper classes, utility classes, css framework, css library, inline style classes" />
-        <meta name="robots" content="index,follow" />
-        <meta
-            property="og:image"
-            content="https://cdn.cocreate.app/docs/google-maps.png" />
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CoCreate-google-maps Documentation | CoCreateJS</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="https://cocreate.app/images/favicon.ico"
+    />
+    <meta
+      name="description"
+      content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable."
+    />
+    <meta
+      name="keywords"
+      content="helper classes, utility classes, css framework, css library, inline style classes"
+    />
+    <meta name="robots" content="index,follow" />
+    <meta
+      property="og:image"
+      content="https://cdn.cocreate.app/docs/google-maps.png"
+    />
 
-        <link
-            rel="stylesheet"
-            href="../index.css"
-            array="files"
-            object="60888216117c640e7596303f"
-            key="src"
-            type="text/css"
-            save="true" />
-        <link rel="manifest" href="/manifest.webmanifest" />
-    </head>
+    <link
+      rel="stylesheet"
+      href="../index.css"
+      array="files"
+      object="60888216117c640e7596303f"
+      key="src"
+      type="text/css"
+      save="true"
+    />
+    <link rel="manifest" href="/manifest.webmanifest" />
+  </head>
 
-    <body>
-        <!-- Navbar  -->
-        <nav
-            class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
-            content_id="content"
-            scroll="sticky-nav,"
-            scroll-up="5"
-            scroll-down="5"
-            path="../"
-            src="../components/navbar.html"></nav>
-        <sidenav
-            id="menuL"
-            class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
-            resizable
-            resize-selector="[content_id='content']"
-            resize-property="margin-left"
-            resize-value="width">
-            <menu
-                array="files"
-                object="603717b07de7fb350ae9fec8"
-                key="src"></menu>
-            <div resize="right"></div>
-        </sidenav>
-        <main
-            class="padding-top:15px padding:15px@lg@xl"
-            content_id="content"
-            id="cocreate-google-maps">
-            <div
-                class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
-                <div class="display:flex align-items:center">
-                    <h2>CoCreate-google-maps</h2>
-                </div>
-                <div
-                    class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
-                    <div
-                        class="display:flex align-items:center transition:0.3s padding-left:10px"
-                        share-network="true"
-                        share-text="Enter decription here"
-                        share-title="testing im a title"
-                        share-height="600"
-                        share-width="700"
-                        share-media="https://cdn.cocreate.app/docs/google-maps.png"
-                        hover="display:block!important"
-                        hover-selector=".social-networks">
-                        <div class="display:none social-networks">
-                            <a
-                                class="margin-right:15px"
-                                share-network="twitter"
-                                title="Share on twitter"
-                                ><i src="/assets/svg/twitter.svg"></i
-                            ></a>
-                            <a
-                                class="margin-right:15px"
-                                share-network="facebook"
-                                title="Share on Facebook"
-                                ><i src="/assets/svg/facebook.svg"></i
-                            ></a>
-                            <a
-                                class="margin-right:15px"
-                                share-network="instagram"
-                                title="Share on instagram"
-                                ><i src="/assets/svg/instagram.svg"></i
-                            ></a>
-                        </div>
-                        <a
-                            class="margin-right:15px"
-                            share-network="share"
-                            title="Share on share"
-                            ><i src="/assets/svg/share-alt.svg"></i
-                        ></a>
-                    </div>
-                    <a
-                        href="https://github.com/CoCreate-app/CoCreate-google-maps"
-                        target="_blank"
-                        class="margin-right:15px"
-                        ><i src="/assets/svg/github.svg"></i
-                    ></a>
-                </div>
+  <body>
+    <!-- Navbar  -->
+    <nav
+      class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
+      content_id="content"
+      scroll="sticky-nav,"
+      scroll-up="5"
+      scroll-down="5"
+      path="../"
+      src="../components/navbar.html"
+    ></nav>
+    <sidenav
+      id="menuL"
+      class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
+      resizable
+      resize-selector="[content_id='content']"
+      resize-property="margin-left"
+      resize-value="width"
+    >
+      <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
+      <div resize="right"></div>
+    </sidenav>
+    <main
+      class="padding-top:15px padding:15px@lg@xl"
+      content_id="content"
+      id="cocreate-google-maps"
+    >
+      <div
+        class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
+      >
+        <div class="display:flex align-items:center">
+          <h2>CoCreate-google-maps</h2>
+        </div>
+        <div
+          class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
+        >
+          <div
+            class="display:flex align-items:center transition:0.3s padding-left:10px"
+            share-network="true"
+            share-text="Enter decription here"
+            share-title="testing im a title"
+            share-height="600"
+            share-width="700"
+            share-media="https://cdn.cocreate.app/docs/google-maps.png"
+            hover="display:block!important"
+            hover-selector=".social-networks"
+          >
+            <div class="display:none social-networks">
+              <a
+                class="margin-right:15px"
+                share-network="twitter"
+                title="Share on twitter"
+                ><i src="/assets/svg/twitter.svg"></i
+              ></a>
+              <a
+                class="margin-right:15px"
+                share-network="facebook"
+                title="Share on Facebook"
+                ><i src="/assets/svg/facebook.svg"></i
+              ></a>
+              <a
+                class="margin-right:15px"
+                share-network="instagram"
+                title="Share on instagram"
+                ><i src="/assets/svg/instagram.svg"></i
+              ></a>
             </div>
-            <h1
-                class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
-                A headless vinilla javascript micro component. Easy
-                configuration using HTML5 attributes or Javscript api.
-            </h1>
-            <div id="google-maps-section" class="display:flex flex-wrap:wrap">
-                <div
-                    class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
-                    <div
-                        id="google-maps-install"
-                        class="border-bottom:1px_solid_lightgrey"
-                        scroll
-                        scroll-intersect="color:dodgerblue"
-                        scroll-selector="#google-maps-install-section">
-                        <span
-                            class="display:flex align-items:center width:fit-content"
-                            hover="display:block!important"
-                            hover-selector="[href='#google-maps-install']">
-                            <h2 class="padding:5px_0px">Install</h2>
-                            <a
-                                class="margin-left:10px display:none"
-                                href="#google-maps-install"
-                                ><i src="/assets/svg/link.svg"></i
-                            ></a>
-                        </span>
-                    </div>
-                    <pre><code class="language-bash">npm i @cocreate/google-maps</code></pre>
-                    <p class="padding:10px_0px line-height:1.5">
-                        Or you can use cdn link:
-                    </p>
-                    <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/google-maps/latest/CoCreate-google-maps.min.js&lt;/script&gt;</code></pre>
+            <a
+              class="margin-right:15px"
+              share-network="share"
+              title="Share on share"
+              ><i src="/assets/svg/share-alt.svg"></i
+            ></a>
+          </div>
+          <a
+            href="https://github.com/CoCreate-app/CoCreate-google-maps"
+            target="_blank"
+            class="margin-right:15px"
+            ><i src="/assets/svg/github.svg"></i
+          ></a>
+        </div>
+      </div>
+      <h1
+        class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
+      >
+        A headless vinilla javascript micro component. Easy configuration using
+        HTML5 attributes or Javscript api.
+      </h1>
+      <div id="google-maps-section" class="display:flex flex-wrap:wrap">
+        <div
+          class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
+        >
+          <div
+            id="google-maps-install"
+            class="border-bottom:1px_solid_lightgrey"
+            scroll
+            scroll-intersect="color:dodgerblue"
+            scroll-selector="#google-maps-install-section"
+          >
+            <span
+              class="display:flex align-items:center width:fit-content"
+              hover="display:block!important"
+              hover-selector="[href='#google-maps-install']"
+            >
+              <h2 class="padding:5px_0px">Install</h2>
+              <a
+                class="margin-left:10px display:none"
+                href="#google-maps-install"
+                ><i src="/assets/svg/link.svg"></i
+              ></a>
+            </span>
+          </div>
+          <pre><code class="language-bash">npm i @cocreate/google-maps</code></pre>
+          <p class="padding:10px_0px line-height:1.5">
+            Or you can use cdn link:
+          </p>
+          <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/google-maps/latest/CoCreate-google-maps.min.js&lt;/script&gt;</code></pre>
 
-                    <div
-                        id="google-maps-usage"
-                        class="margin-top:80px border-bottom:1px_solid_lightgrey"
-                        scroll
-                        scroll-intersect="color:dodgerblue"
-                        scroll-selector="#google-maps-usage-section">
-                        <span
-                            class="display:flex align-items:center width:fit-content"
-                            hover="display:block!important"
-                            hover-selector="[href='#google-maps-usage']">
-                            <h2 class="padding:5px_0px">Usage</h2>
-                            <a
-                                class="margin-left:10px display:none"
-                                href="#google-maps-usage"
-                                ><i src="/assets/svg/link.svg"></i
-                            ></a>
-                        </span>
-                    </div>
-                    <div class="">
-                        <p class="padding:10px_0px line-height:1.5">
-                            This is google-maps usage
-                        </p>
+          <div
+            id="google-maps-usage"
+            class="margin-top:80px border-bottom:1px_solid_lightgrey"
+            scroll
+            scroll-intersect="color:dodgerblue"
+            scroll-selector="#google-maps-usage-section"
+          >
+            <span
+              class="display:flex align-items:center width:fit-content"
+              hover="display:block!important"
+              hover-selector="[href='#google-maps-usage']"
+            >
+              <h2 class="padding:5px_0px">Usage</h2>
+              <a class="margin-left:10px display:none" href="#google-maps-usage"
+                ><i src="/assets/svg/link.svg"></i
+              ></a>
+            </span>
+          </div>
+          <div class="">
+            <p class="padding:10px_0px line-height:1.5">
+              This is google-maps usage
+            </p>
 
-                        <div class="flex-grow:1 min-width:300px width:100%">
-                            <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
-                        </div>
-                        <p class="padding:10px_0px line-height:1.5">
-                            This is google-maps usage
-                        </p>
-                        <p class="padding:10px_0px line-height:1.5">
-                            This is google-maps usage
-                        </p>
-                    </div>
-                    <div
-                        id="google-maps-attributes"
-                        class="margin-top:80px border-bottom:1px_solid_lightgrey"
-                        scroll
-                        scroll-intersect="color:dodgerblue"
-                        scroll-selector="#google-maps-attributes-section">
-                        <span
-                            class="display:flex align-items:center width:fit-content"
-                            hover="display:block!important"
-                            hover-selector="[href='#google-maps-attributes']">
-                            <h2 class="padding:5px_0px">Attributes</h2>
-                            <a
-                                class="margin-left:10px display:none"
-                                href="#google-maps-attributes"
-                                ><i src="/assets/svg/link.svg"></i
-                            ></a>
-                        </span>
-                    </div>
-                    <ul class="list-style-type:none">
-                        <li
-                            class="padding:15px_0px border-bottom:1px_solid_lightgrey">
-                            <h4>
-                                <span>google-maps</span>
-                                <span class="cocreate-badge success"
-                                    >string</span
-                                >
-                                <span class="cocreate-badge warning"
-                                    >optional</span
-                                >
-                            </h4>
-                            <p>google-maps-attribute</p>
-                        </li>
-                        <li
-                            class="padding:15px_0px border-bottom:1px_solid_lightgrey">
-                            <h4>
-                                <span>google-maps</span>
-                                <span class="cocreate-badge success"
-                                    >string</span
-                                >
-                                <span class="cocreate-badge warning"
-                                    >optional</span
-                                >
-                            </h4>
-                            <p>google-maps-attribute</p>
-                        </li>
-                    </ul>
-                </div>
+            <div class="flex-grow:1 min-width:300px width:100%">
+              <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
+            </div>
+            <p class="padding:10px_0px line-height:1.5">
+              This is google-maps usage
+            </p>
+            <p class="padding:10px_0px line-height:1.5">
+              This is google-maps usage
+            </p>
+          </div>
+          <div
+            id="google-maps-attributes"
+            class="margin-top:80px border-bottom:1px_solid_lightgrey"
+            scroll
+            scroll-intersect="color:dodgerblue"
+            scroll-selector="#google-maps-attributes-section"
+          >
+            <span
+              class="display:flex align-items:center width:fit-content"
+              hover="display:block!important"
+              hover-selector="[href='#google-maps-attributes']"
+            >
+              <h2 class="padding:5px_0px">Attributes</h2>
+              <a
+                class="margin-left:10px display:none"
+                href="#google-maps-attributes"
+                ><i src="/assets/svg/link.svg"></i
+              ></a>
+            </span>
+          </div>
+          <ul class="list-style-type:none">
+            <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+              <h4>
+                <span>google-maps</span>
+                <span class="cocreate-badge success">string</span>
+                <span class="cocreate-badge warning">optional</span>
+              </h4>
+              <p>google-maps-attribute</p>
+            </li>
+            <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+              <h4>
+                <span>google-maps</span>
+                <span class="cocreate-badge success">string</span>
+                <span class="cocreate-badge warning">optional</span>
+              </h4>
+              <p>google-maps-attribute</p>
+            </li>
+          </ul>
+        </div>
 
-                <div
-                    class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
-                    <!-- SandBox -->
-                    <div
-                        id="google-maps-demo"
-                        class="border-bottom:1px_solid_lightgrey"
-                        scroll
-                        scroll-intersect="color:dodgerblue"
-                        scroll-selector="#google-maps-demo-section">
-                        <span
-                            class="display:flex align-items:center width:fit-content"
-                            hover="display:block!important"
-                            hover-selector="[href='#google-maps-demo']">
-                            <h2 class="padding:5px_0px">Demo</h2>
-                            <a
-                                class="margin-left:10px display:none"
-                                href="#google-maps-demo"
-                                ><i src="/assets/svg/link.svg"></i
-                            ></a>
-                        </span>
-                    </div>
-                    <div
-                        class="position:sticky top:0 padding:15px_0px height:100vh">
-                        <!-- SandBox -->
-                        <div
-                            class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
-                            id="playground">
-                            <div
-                                id="demo-code"
-                                resizable
-                                class="position:relative height:50%">
-                                <textarea
-                                    type="code"
-                                    lang="html"
-                                    array="demos"
-                                    object=""
-                                    key="demo"
-                                    save="false"
-                                    id="demo"
-                                    input-selector=".demopreview"
-                                    input-attribute="value"
-                                    input-events="input, onload"
-                                    class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
-                                <div
-                                    resize="bottom"
-                                    class="background:lightgrey"></div>
-                            </div>
+        <div
+          class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
+        >
+          <!-- SandBox -->
+          <div
+            id="google-maps-demo"
+            class="border-bottom:1px_solid_lightgrey"
+            scroll
+            scroll-intersect="color:dodgerblue"
+            scroll-selector="#google-maps-demo-section"
+          >
+            <span
+              class="display:flex align-items:center width:fit-content"
+              hover="display:block!important"
+              hover-selector="[href='#google-maps-demo']"
+            >
+              <h2 class="padding:5px_0px">Demo</h2>
+              <a class="margin-left:10px display:none" href="#google-maps-demo"
+                ><i src="/assets/svg/link.svg"></i
+              ></a>
+            </span>
+          </div>
+          <div class="position:sticky top:0 padding:15px_0px height:100vh">
+            <!-- SandBox -->
+            <div
+              class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
+              id="playground"
+            >
+              <div
+                id="demo-code"
+                resizable
+                class="position:relative height:50%"
+              >
+                <textarea
+                  type="code"
+                  lang="html"
+                  array="demos"
+                  object=""
+                  key="demo"
+                  save="false"
+                  id="demo"
+                  input-selector=".demopreview"
+                  input-attribute="value"
+                  input-events="input, onload"
+                  class="height:100% width:100% outline:none border:none resize:none padding:5px"
+                ></textarea>
+                <div resize="bottom" class="background:lightgrey"></div>
+              </div>
 
-                            <div
-                                id="demo-preview"
-                                class="position:relative overflow:auto background-color:white">
-                                <div class="demopreview padding:20px"></div>
-                            </div>
+              <div
+                id="demo-preview"
+                class="position:relative overflow:auto background-color:white"
+              >
+                <div class="demopreview padding:20px"></div>
+              </div>
 
-                            <div
-                                class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
-                                <a
-                                    class="margin-right:10px"
-                                    id="eye"
-                                    show="#eye-slash"
-                                    hide="#eye, #demo-preview"
-                                    toggle="code-height"
-                                    toggle-selector="#demo-code"
-                                    ><i
-                                        class="height:18px"
-                                        src="/assets/svg/eye.svg"></i
-                                ></a>
-                                <a
-                                    class="margin-right:10px"
-                                    hidden
-                                    id="eye-slash"
-                                    show="#eye, #demo-preview"
-                                    hide="#eye-slash"
-                                    toggle="code-height"
-                                    toggle-selector="#demo-code"
-                                    ><i src="/assets/svg/eye-slash.svg"></i
-                                ></a>
-                                <a
-                                    class="margin-right:10px"
-                                    id="code"
-                                    show="#code-slash"
-                                    hide="#code, #demo-code"
-                                    ><i src="/assets/svg/code.svg"></i
-                                ></a>
-                                <a
-                                    class="margin-right:10px"
-                                    hidden
-                                    id="code-slash"
-                                    show="#code, #demo-code"
-                                    hide="#code-slash"
-                                    ><i
-                                        class="height:18px"
-                                        src="/assets/svg/code.svg"></i
-                                ></a>
-                                <a
-                                    class="margin-right:5px"
-                                    fullscreen
-                                    fullscreen-selector="#playground"></a>
-                            </div>
-                        </div>
-                        <!-- End SandBox -->
-                    </div>
-                </div>
+              <div
+                class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
+              >
+                <a
+                  class="margin-right:10px"
+                  id="eye"
+                  show="#eye-slash"
+                  hide="#eye, #demo-preview"
+                  toggle="code-height"
+                  toggle-selector="#demo-code"
+                  ><i class="height:18px" src="/assets/svg/eye.svg"></i
+                ></a>
+                <a
+                  class="margin-right:10px"
+                  hidden
+                  id="eye-slash"
+                  show="#eye, #demo-preview"
+                  hide="#eye-slash"
+                  toggle="code-height"
+                  toggle-selector="#demo-code"
+                  ><i src="/assets/svg/eye-slash.svg"></i
+                ></a>
+                <a
+                  class="margin-right:10px"
+                  id="code"
+                  show="#code-slash"
+                  hide="#code, #demo-code"
+                  ><i src="/assets/svg/code.svg"></i
+                ></a>
+                <a
+                  class="margin-right:10px"
+                  hidden
+                  id="code-slash"
+                  show="#code, #demo-code"
+                  hide="#code-slash"
+                  ><i class="height:18px" src="/assets/svg/code.svg"></i
+                ></a>
+                <a
+                  class="margin-right:5px"
+                  fullscreen
+                  fullscreen-selector="#playground"
+                ></a>
+              </div>
             </div>
-            <button
-                href="https://github.com/CoCreate-app/CoCreate-google-maps/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
-                target="_blank"
-                class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                <i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
-            </button>
-        </main>
+            <!-- End SandBox -->
+          </div>
+        </div>
+      </div>
+      <button
+        href="https://github.com/CoCreate-app/CoCreate-google-maps/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
+        target="_blank"
+        class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)"
+      >
+        <i src="../assets/svg/pencil-alt.svg"></i>
+      </button>
+    </main>
 
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
-    </body>
+    <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+  </body>
 </html>
