@salla.sa/twilight-components 1.0.99 → 1.0.104

package/example/index.html

@@ -8,13 +8,15 @@
   <title>Salla Web Component Starter</title>
   <script src="//unpkg.com/alpinejs" defer></script>
   <script src="dist/translations.js"></script>
-  <script src="dist/twilight.js"></script>
+  <script src="https://cdn.salla.network/%40salla.sa/twilight/latest/%40salla.sa/twilight.min.js"></script>
   <script>
     let url = window.location.href.split('/').slice(0, -1).join('/') + '/';
     salla.init({ debug: true, store: { api: url } });
   </script>
+  
   <script type="module" src="./../dist/twilight-components/twilight-components.esm.js"></script>
-  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css" rel="stylesheet">
+  <link href="https://assets.salla.sa/cp/assets/css/icons/sallaicons/style.css?v0.twilight" type="text/css"
+    rel="stylesheet">
   <link href="dist/tailwind.css" type="text/css" rel="stylesheet">
   <style>
     :root {
@@ -228,7 +230,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Buttons</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaButton.html" class="text-primary">@see</a></p>
         </div>
 
         <!-- Default -->
@@ -238,13 +241,13 @@
             <p class="text-sm text-gray-500 mt-2">Without any props</p>
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-              <salla-button>Primary</salla-button>
-              <salla-button color="success">success</salla-button>
-              <salla-button color="danger">danger</salla-button>
-              <salla-button color="warning">warning</salla-button>
-              <salla-button color="light">light</salla-button>
-              <salla-button color="gray">gray</salla-button>
-              <salla-button color="dark">dark</salla-button>
+            <salla-button>Primary</salla-button>
+            <salla-button color="success">success</salla-button>
+            <salla-button color="danger">danger</salla-button>
+            <salla-button color="warning">warning</salla-button>
+            <salla-button color="light">light</salla-button>
+            <salla-button color="gray">gray</salla-button>
+            <salla-button color="dark">dark</salla-button>
           </div>
         </div>
 
@@ -258,13 +261,13 @@
           </div>
 
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-              <salla-button fill="outline">Primary</salla-button>
-              <salla-button fill="outline" color="success">success</salla-button>
-              <salla-button fill="outline" color="danger">danger</salla-button>
-              <salla-button fill="outline" color="warning">warning</salla-button>
-              <salla-button fill="outline" color="light">light</salla-button>
-              <salla-button fill="outline" color="gray">gray</salla-button>
-              <salla-button fill="outline" color="dark">dark</salla-button>
+            <salla-button fill="outline">Primary</salla-button>
+            <salla-button fill="outline" color="success">success</salla-button>
+            <salla-button fill="outline" color="danger">danger</salla-button>
+            <salla-button fill="outline" color="warning">warning</salla-button>
+            <salla-button fill="outline" color="light">light</salla-button>
+            <salla-button fill="outline" color="gray">gray</salla-button>
+            <salla-button fill="outline" color="dark">dark</salla-button>
           </div>
         </div>
 
@@ -283,20 +286,20 @@
               <salla-button color="gray" fill="outline" loading>gray</salla-button>
             </div>
             <div class="flex flex-wrap items-center gap-2">
-              <salla-button shape="icon" loading>Primary</salla-button>
-              <salla-button shape="icon" color="success" loading>success</salla-button>
-              <salla-button shape="icon" color="danger" loading>danger</salla-button>
-              <salla-button shape="icon" color="warning" fill="outline" loading>warning</salla-button>
-              <salla-button shape="icon" color="light" fill="outline" loading>light</salla-button>
-              <salla-button shape="icon" color="gray" fill="outline" loading>gray</salla-button>
+              <salla-button shape="icon" loading></salla-button>
+              <salla-button shape="icon" color="success" loading></salla-button>
+              <salla-button shape="icon" color="danger" loading></salla-button>
+              <salla-button shape="icon" color="warning" fill="outline" loading></salla-button>
+              <salla-button shape="icon" color="light" fill="outline" loading></salla-button>
+              <salla-button shape="icon" color="gray" fill="outline" loading></salla-button>
             </div>
             <div class="flex flex-wrap items-center gap-2">
-              <salla-button shape="icon" size="small" loading>Primary</salla-button>
-              <salla-button shape="icon" size="small" color="success" loading>success</salla-button>
-              <salla-button shape="icon" size="small" color="danger" loading>danger</salla-button>
-              <salla-button shape="icon" size="small" color="warning" fill="outline" loading>warning</salla-button>
-              <salla-button shape="icon" size="small" color="light" fill="outline" loading>light</salla-button>
-              <salla-button shape="icon" size="small" color="gray" fill="outline" loading>gray</salla-button>
+              <salla-button shape="icon" size="small" loading></salla-button>
+              <salla-button shape="icon" size="small" color="success" loading></salla-button>
+              <salla-button shape="icon" size="small" color="danger" loading></salla-button>
+              <salla-button shape="icon" size="small" color="warning" fill="outline" loading></salla-button>
+              <salla-button shape="icon" size="small" color="light" fill="outline" loading></salla-button>
+              <salla-button shape="icon" size="small" color="gray" fill="outline" loading></salla-button>
             </div>
           </div>
         </div>
@@ -308,7 +311,7 @@
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
             <salla-button size="large">Large</salla-button>
-            <salla-button >Default</salla-button>
+            <salla-button>Default</salla-button>
             <salla-button size="small">Small</salla-button>
             <salla-button size="large" fill="outline">Large</salla-button>
             <salla-button fill="outline">Default</salla-button>
@@ -332,22 +335,24 @@
             <h3 class="text-gray-900 font-semibold">Disabled</h3>
           </div>
           <div class="col-span-3 space-y-4">
-              <div class="flex flex-wrap items-center gap-2">
-                <salla-button disabled>Disabled</salla-button>
-                <salla-button disabled color="danger">Disabled</salla-button>
-                <salla-button disabled color="warning">Disabled</salla-button>
-                <salla-button fill="outline" disabled>Disabled</salla-button>
-                <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
-                <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
-              </div>
-              <div class="flex flex-wrap items-center gap-2">
-                <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
-                <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
-                <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
-                <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
-                <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
-                <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
-              </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button disabled>Disabled</salla-button>
+              <salla-button disabled color="danger">Disabled</salla-button>
+              <salla-button disabled color="warning">Disabled</salla-button>
+              <salla-button fill="outline" disabled>Disabled</salla-button>
+              <salla-button fill="outline" disabled color="danger">Disabled</salla-button>
+              <salla-button fill="outline" disabled color="warning">Disabled</salla-button>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <salla-button shape="icon" disabled><i class="sicon-shopping-bag"></i></salla-button>
+              <salla-button shape="icon" disabled color="danger"><i class="sicon-shopping-bag"></i></salla-button>
+              <salla-button shape="icon" disabled color="warning"><i class="sicon-shopping-bag"></i></salla-button>
+              <salla-button shape="icon" fill="outline" disabled><i class="sicon-shopping-bag"></i></salla-button>
+              <salla-button shape="icon" fill="outline" disabled color="danger"><i class="sicon-shopping-bag"></i>
+              </salla-button>
+              <salla-button shape="icon" fill="outline" disabled color="warning"><i class="sicon-shopping-bag"></i>
+              </salla-button>
+            </div>
           </div>
         </div>
 
@@ -360,13 +365,13 @@
             </p>
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-              <salla-button shape="link">Primary Link</salla-button>
-              <salla-button shape="link" color="success">success Link</salla-button>
-              <salla-button shape="link" color="danger">danger Link</salla-button>
-              <salla-button shape="link" color="warning">warning Link</salla-button>
-              <salla-button shape="link" color="light">light Link</salla-button>
-              <salla-button shape="link" color="gray">gray Link</salla-button>
-              <salla-button shape="link" color="dark">dark Link</salla-button>
+            <salla-button shape="link">Primary Link</salla-button>
+            <salla-button shape="link" color="success">success Link</salla-button>
+            <salla-button shape="link" color="danger">danger Link</salla-button>
+            <salla-button shape="link" color="warning">warning Link</salla-button>
+            <salla-button shape="link" color="light">light Link</salla-button>
+            <salla-button shape="link" color="gray">gray Link</salla-button>
+            <salla-button shape="link" color="dark">dark Link</salla-button>
           </div>
         </div>
 
@@ -378,12 +383,12 @@
             </p>
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-              <salla-button href="https://salla.sa">Salla</salla-button>
-              <salla-button href="https://salla.dev/">Salla Developers</salla-button>
-              <salla-button href="https://apps.salla.sa">Salla Apps</salla-button>
-              <salla-button shape="link" href="https://salla.sa">Salla</salla-button>
-              <salla-button shape="link" href="https://salla.dev/">Salla Developers</salla-button>
-              <salla-button shape="link" href="https://apps.salla.sa">Salla Apps</salla-button>
+            <salla-button href="https://salla.sa">Salla</salla-button>
+            <salla-button href="https://salla.dev/">Salla Developers</salla-button>
+            <salla-button href="https://apps.salla.sa">Salla Apps</salla-button>
+            <salla-button shape="link" href="https://salla.sa">Salla</salla-button>
+            <salla-button shape="link" href="https://salla.dev/">Salla Developers</salla-button>
+            <salla-button shape="link" href="https://apps.salla.sa">Salla Apps</salla-button>
           </div>
         </div>
 
@@ -434,7 +439,8 @@
             <salla-button shape="icon" color="danger" size="small"><i class="sicon-cancel"></i></salla-button>
             <salla-button shape="icon" size="large" fill="outline"><i class="sicon-shopping-bag"></i></salla-button>
             <salla-button shape="icon" color="success" fill="outline"><i class="sicon-check"></i></salla-button>
-            <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i></salla-button>
+            <salla-button shape="icon" color="danger" size="small" fill="outline"><i class="sicon-cancel"></i>
+            </salla-button>
           </div>
         </div>
       </section>
@@ -445,7 +451,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Modals</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaModal.html" class="text-primary">@see</a></p>
         </div>
 
         <!-- Width -->
@@ -462,12 +469,16 @@
 
             <!-- Modal Size -->
             <template x-for="width in widths" :key="width.id">
-              <salla-button :data-target="'modal-size-' + width.id" onclick="salla.event.dispatch('modal::open')" x-text="width.label"></salla-button>
+              <salla-button :data-target="'modal-size-' + width.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="width.label"></salla-button>
             </template>
 
             <template x-for="width in widths" :key="width.id">
-              <salla-modal :id="'modal-size-' + width.id" :width="width.id" modal-title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
-                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              <salla-modal :id="'modal-size-' + width.id" :width="width.id" modal-title="Vitae atque quisquam ea rem"
+                sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga
+                  obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat
+                  magni ea nulla exercitationem labore debitis.</p>
               </salla-modal>
             </template>
           </div>
@@ -485,17 +496,15 @@
           <div class="col-span-3 flex flex-wrap items-center gap-2">
 
             <template x-for="item in items" :key="item.id">
-              <salla-button :data-target="'modal-position-' + item.id" onclick="salla.event.dispatch('modal::open')" x-text="item.label"></salla-button>
+              <salla-button :data-target="'modal-position-' + item.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="item.label"></salla-button>
             </template>
 
             <template x-for="item in items" :key="item.id">
-              <salla-modal 
-                :id="'modal-position-' + item.id" 
-                :position="item.id" 
-                size="sm"
-                modal-title="Congratulations" 
+              <salla-modal :id="'modal-position-' + item.id" :position="item.id" size="sm" modal-title="Congratulations"
                 sub-title="Good, you are right!">
-                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod.</p>
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga
+                  obcaecati voluptatum et voluptatem illo quod.</p>
               </salla-modal>
               </salla-modal>
             </template>
@@ -515,29 +524,23 @@
           <div class="col-span-3 flex flex-wrap items-center gap-2">
 
             <template x-for="icon in icons" :key="icon.id">
-              <salla-button :data-target="'modal-icon-' + icon.id" onclick="salla.event.dispatch('modal::open')" x-text="icon.label"></salla-button>
+              <salla-button :data-target="'modal-icon-' + icon.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="icon.label"></salla-button>
             </template>
-            <salla-button data-target="modal-icon-image" onclick="salla.event.dispatch('modal::open')">Image as Icon</salla-button>
+            <salla-button data-target="modal-icon-image" onclick="salla.event.dispatch('modal::open')">Image as Icon
+            </salla-button>
 
             <template x-for="icon in icons" :key="icon.id">
-              <salla-modal
-                :id="'modal-icon-' + icon.id"
-                :icon="icon.icon"
-                :icon-style="icon.id"
-                width="sm"
-                modal-title="Vitae atque quisquam ea rem"
-                sub-title="subtitle text here">
-                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              <salla-modal :id="'modal-icon-' + icon.id" :icon="icon.icon" :icon-style="icon.id" width="sm"
+                modal-title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
+                <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga
+                  obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat
+                  magni ea nulla exercitationem labore debitis.</p>
               </salla-modal>
             </template>
 
-            <salla-modal
-              id="modal-icon-image"
-              image-icon="./assets/images/star.png"
-              width="sm"
-              sub-title-first
-              modal-title="Good, You are right!"
-              sub-title="Congratulations">
+            <salla-modal id="modal-icon-image" image-icon="./assets/images/star.png" width="sm" sub-title-first
+              modal-title="Good, You are right!" sub-title="Congratulations">
             </salla-modal>
           </div>
         </div>
@@ -553,18 +556,17 @@
           <div class="col-span-3 flex flex-wrap items-center gap-2">
 
             <template x-for="item in items" :key="item.id">
-              <salla-button :data-target="'modal-subtitle-' + item.id" onclick="salla.event.dispatch('modal::open')" x-text="item.label"></salla-button>
+              <salla-button :data-target="'modal-subtitle-' + item.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="item.label"></salla-button>
             </template>
 
             <template x-for="item in items" :key="item.id">
-              <salla-modal
-                :id="'modal-subtitle-' + item.id"
-                :sub-title-first="item.id == 'first' ? true : false"
-                icon="sicon-shopping-bag"
-                modal-title="Vitae atque quisquam ea rem"
-                icon-style="primary"
+              <salla-modal :id="'modal-subtitle-' + item.id" :sub-title-first="item.id == 'first' ? true : false"
+                icon="sicon-shopping-bag" modal-title="Vitae atque quisquam ea rem" icon-style="primary"
                 sub-title="subtitle text here">
-                <p class="text-gray-500 mb-4 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+                <p class="text-gray-500 mb-4 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                  Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit
+                  at repellat magni ea nulla exercitationem labore debitis.</p>
               </salla-modal>
             </template>
 
@@ -585,13 +587,12 @@
           <div class="col-span-3 flex flex-wrap items-center gap-2">
 
             <template x-for="item in items" :key="item.id">
-              <salla-button :data-target="'modal-padding-' + item.id" onclick="salla.event.dispatch('modal::open')" x-text="item.label"></salla-button>
+              <salla-button :data-target="'modal-padding-' + item.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="item.label"></salla-button>
             </template>
 
             <template x-for="item in items" :key="item.id">
-              <salla-modal
-                :id="'modal-padding-' + item.id"
-                :no-padding="item.id == 'nopadding' ? true : false">
+              <salla-modal :id="'modal-padding-' + item.id" :no-padding="item.id == 'nopadding' ? true : false">
                 <img src="https://source.unsplash.com/ejhjSZKTeeg/1024x800">
               </salla-modal>
             </template>
@@ -604,19 +605,17 @@
             <h3 class="text-gray-900 font-semibold">Is Closable</h3>
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-              <salla-button data-target="modal-not-closable" onclick="salla.event.dispatch('modal::open')">Not Closable</salla-button>
-              <salla-modal
-                icon="sicon-home"
-                icon-style="primary"
-                id="modal-not-closable"
-                modal-title="Not Closable Molda"
-                sub-title="You can't close it by clicking the background overlay and there is'nt cloase button"
-                is-closable="false">
-                <div class="text-center">
-                  <p class="text-gray-500 mb-4">Close button below added as a modal content</p>
-                  <salla-button fill="outline" color="light" onclick="salla.event.dispatch('modal::close')" data-target="modal-not-closable">Close</salla-button>
-                </div>
-              </salla-modal>
+            <salla-button data-target="modal-not-closable" onclick="salla.event.dispatch('modal::open')">Not Closable
+            </salla-button>
+            <salla-modal icon="sicon-home" icon-style="primary" id="modal-not-closable" modal-title="Not Closable Molda"
+              sub-title="You can't close it by clicking the background overlay and there is'nt cloase button"
+              is-closable="false">
+              <div class="text-center">
+                <p class="text-gray-500 mb-4">Close button below added as a modal content</p>
+                <salla-button fill="outline" color="light" onclick="salla.event.dispatch('modal::close')"
+                  data-target="modal-not-closable">Close</salla-button>
+              </div>
+            </salla-modal>
           </div>
         </div>
 
@@ -631,22 +630,24 @@
           <div class="col-span-3 flex flex-wrap items-center gap-2">
 
             <template x-for="item in items" :key="item.id">
-              <salla-button :data-target="'modal-footer-' + item.id" onclick="salla.event.dispatch('modal::open')" x-text="item.label"></salla-button>
+              <salla-button :data-target="'modal-footer-' + item.id" onclick="salla.event.dispatch('modal::open')"
+                x-text="item.label"></salla-button>
             </template>
 
             <template x-for="item in items" :key="item.id">
-              <salla-modal
-                :id="'modal-footer-' + item.id"
-                icon="sicon-shopping-bag"
-                modal-title="Vitae atque quisquam ea rem"
-                icon-style="primary"
-                sub-title="subtitle text here">
-                <p class="text-gray-500 mb-8 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea nulla exercitationem labore debitis.</p>
+              <salla-modal :id="'modal-footer-' + item.id" icon="sicon-shopping-bag"
+                modal-title="Vitae atque quisquam ea rem" icon-style="primary" sub-title="subtitle text here">
+                <p class="text-gray-500 mb-8 text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                  Vitae eius fuga obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit
+                  at repellat magni ea nulla exercitationem labore debitis.</p>
                 <div x-show="item.id == 'footer'" slot="footer" class="grid grid-cols-2 gap-3">
-                  <salla-button class="w-full" fill="outline" color="light" onclick="salla.event.dispatch('modal::close')" :data-target="'modal-footer-' + item.id">Cancel</salla-button>
-                  <salla-button class="w-full" onclick="salla.event.dispatch('modal::close')" :data-target="'modal-footer-' + item.id">Ok</salla-button>
+                  <salla-button class="w-full" fill="outline" color="light"
+                    onclick="salla.event.dispatch('modal::close')" :data-target="'modal-footer-' + item.id">Cancel
+                  </salla-button>
+                  <salla-button class="w-full" onclick="salla.event.dispatch('modal::close')"
+                    :data-target="'modal-footer-' + item.id">Ok</salla-button>
                 </div>
-              </salla-modal> 
+              </salla-modal>
             </template>
 
           </div>
@@ -661,7 +662,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
         </div>
 
 
@@ -673,11 +675,8 @@
             <salla-button onclick="salla.event.dispatch('login::open')">Login with email</salla-button>
             <salla-button onclick="salla.event.dispatch('login::open')">Login with mobile</salla-button>
             <salla-button onclick="salla.event.dispatch('login::open')">Login with both</salla-button>
-            <salla-login-modal 
-              id="login-modal" 
-              is-email-allowed
-              is-mobile-allowed
-              is-email-required></salla-login-modal>
+            <salla-login-modal id="login-modal" is-email-allowed is-mobile-allowed is-email-required>
+            </salla-login-modal>
             <!-- <salla-button x-on:click="method = 'email'" onclick="salla.event.dispatch('login::open')">With email </salla-button>
             <salla-button x-on:click="method = 'phone'" onclick="salla.event.dispatch('login::open')">With phone</salla-button>
             <salla-button x-on:click="method = 'both'" onclick="salla.event.dispatch('login::open')">With both</salla-button>
@@ -695,8 +694,10 @@
       <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
-          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Localization (Language & Currency) Modal</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Localization (Language &
+            Currency) Modal</h2>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
@@ -715,7 +716,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Search</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
@@ -727,7 +729,7 @@
             <salla-search></salla-search>
           </div>
         </div>
-        
+
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
           <div class="col-span-3 xl:col-span-1">
             <h3 class="text-gray-900 font-semibold">Inline Search</h3>
@@ -736,7 +738,7 @@
             <salla-search inline height="50" class="w-full mb-10"></salla-search>
           </div>
         </div>
-        
+
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
           <div class="col-span-3 xl:col-span-1">
             <h3 class="text-gray-900 font-semibold">Oval Input</h3>
@@ -753,7 +755,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Offers Modal</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
@@ -773,7 +776,8 @@
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Branches Modal</h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
@@ -781,8 +785,10 @@
             <h3 class="text-gray-900 font-semibold">Branches Modal</h3>
           </div>
           <div class="col-span-3 flex flex-wrap items-center gap-2">
-            <salla-button data-target="branches-header" onclick="salla.event.dispatch('branches::open')">Choose branche</salla-button>
-            <salla-button data-target="branches-single" onclick="salla.event.dispatch('branches::open')">Products availability</salla-button>
+            <salla-button data-target="branches-header" onclick="salla.event.dispatch('branches::open')">Choose branche
+            </salla-button>
+            <salla-button data-target="branches-single" onclick="salla.event.dispatch('branches::open')">Products
+              availability</salla-button>
 
             <salla-branches id="branches-header" position="header"></salla-branches>
             <salla-branches id="branches-single" position="single"></salla-branches>
@@ -797,7 +803,8 @@
         <div class="pb-6">
           <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Product Availability
           </h2>
-          <p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
+          <p class="text-sm text-gray-500 mt-2">For more info and description <a
+              href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
@@ -815,16 +822,18 @@
       <section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
         style="scroll-margin-top:6.25rem">
         <div class="pb-6">
-          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">International Telephone Input</h2>
-          <p class="text-sm text-gray-500 mt-2">Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
-            Telephone Input</a></p>
+          <h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">International Telephone Input
+          </h2>
+          <p class="text-sm text-gray-500 mt-2">Using: <a class="text-primary"
+              href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
+              Telephone Input</a></p>
         </div>
 
         <div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
           <div class="col-span-3 xl:col-span-1">
             <h3 class="text-gray-900 font-semibold">International
               Telephone Input</h3>
-            
+
             <salla-button shape="link" onclick="getTelValues()">Get Values</salla-button>
           </div>
           <div class="col-span-3 flex flex-wrap items-start gap-2">
@@ -918,30 +927,43 @@
             <h3 class="text-gray-900 font-semibold">Infinite Scroll</h3>
           </div>
           <div class="col-span-3 flex flex-wrap items-center justify-center gap-2">
-            <salla-infinite-scroll
-              next-page="infinit-scroll.html?page=2"
-              container=".i-container"
-              item=".i-item">
-                <div class="mb-4">
-                  <h2 class="text-3xl font-bold">Lorem ipsum dolor sit amet</h2>
-                  <p class="text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsam magni saepe assumenda minus animi voluptates fugit, nulla perspiciatis nihil obcaecati ab repellendus maxime. Sapiente ipsum hic harum tenetur illo?</p>
-                </div>
-                <div class="i-container w-full grid grid-cols-5 p-4 gap-6 border rounded-md">
-                  <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-green-100">1</div>
-                  <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-red-100">2</div>
-                  <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-yellow-100">3</div>
-                  <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-gray-100">4</div>
-                  <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-purple-100">5</div>
-                </div>
+            <salla-infinite-scroll next-page="infinit-scroll.html?page=2" container=".i-container" item=".i-item">
+              <div class="mb-4">
+                <h2 class="text-3xl font-bold">Lorem ipsum dolor sit amet</h2>
+                <p class="text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsam magni
+                  saepe assumenda minus animi voluptates fugit, nulla perspiciatis nihil obcaecati ab repellendus
+                  maxime. Sapiente ipsum hic harum tenetur illo?</p>
+              </div>
+              <div class="i-container w-full grid grid-cols-5 p-4 gap-6 border rounded-md">
+                <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-green-100">1</div>
+                <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-red-100">2</div>
+                <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-yellow-100">3</div>
+                <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-gray-100">4</div>
+                <div class="i-item w-full	h-40 flex items-center justify-center rounded-md bg-purple-100">5</div>
+              </div>
             </salla-infinite-scroll>
           </div>
 
-          
-    
+
+
         </div>
 
       </section>
 
+      <!--  -->
+      <!-- Modal Size -->
+      <!-- <template x-for="width in widths" :key="width.id"> -->
+      <salla-button data-target="testModel" onclick="salla.event.dispatch('modal::open')">Test</salla-button>
+      <!-- </template> -->
+
+      <!-- <template x-for="width in widths" :key="width.id"> -->
+      <salla-modal id="testModel" modal-title="Vitae atque quisquam ea rem" sub-title="subtitle text here">
+        <p class="text-gray-500 mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae eius fuga
+          obcaecati voluptatum et voluptatem illo quod, vero dignissimos nobis aperiam suscipit at repellat magni ea
+          nulla exercitationem labore debitis.</p>
+      </salla-modal>
+      <!-- </template> -->
+
     </div>
   </div>
 
@@ -949,4 +971,4 @@
   <script src="dist/demo.js"></script>
 </body>
 
-</html>
+</html>