npm - @aquera/nile-elements - Versions diffs - 1.1.3-beta-2.1 → 1.1.3-beta-2.3 - Mend

@aquera/nile-elements 1.1.3-beta-2.1 → 1.1.3-beta-2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (835) hide show

package/README.md CHANGED Viewed

@@ -79,15 +79,6 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
-#### Version 1.1.2
-- Nile Table: bodyStyle attribute fix (UIF-982)
-- Nile Button: Button Style Defects for  (UIF-981)
-- Dependency Nile 1.0.5
-#### Version 1.1.1
-- Nile Stepper: Added manual property for UIF-978
-- Nile Code Editor: Style update for UIF-980
 #### Version 1.1.0
 - Nile Stepper, Checkbox, Input, Code Editor changes added

package/demo/index.html CHANGED Viewed

@@ -1,133 +1,330 @@
 <!DOCTYPE html>
 <html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="variables.css" />
+    <link rel="stylesheet" href="index.css" />
-<head>
-  <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables.css" id="stylesheet" />
-  <link rel="stylesheet" href="index.css" />
-  <script type="module" src="index.js"></script>
-</head>
-<style>
-  .flex-container {
-    width: 300px;
-    margin: 20px;
+    <style>
+.profile {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--nile-color-border, #e5e7eb);
   }
-  .container-with-overflow {
-    width: 300px;
-    height: 200px;
-    overflow: hidden;
-    border: 2px solid #ccc;
-    margin: 20px;
-    padding: 10px;
-    position: relative;
+  .avatar {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--nile-color-primary, #2563eb);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
   }
-  .container-with-transform {
-    width: 300px;
-    height: 200px;
-    transform: translateX(50px);
-    border: 2px solid blue;
-    margin: 20px;
-    padding: 10px;
-    position: relative;
+  .profile-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
   }
-  nile-button {
-    flex: 0 0 auto;
-    height: 38px;
+  .profile-info .name {
+    font-weight: 600;
+    font-size: 0.95rem;
   }
-  .demo-section {
-    margin: 40px 0;
+  .profile-info .org {
+    font-size: 0.85rem;
+    color: #555;
   }
-  h2 {
-    color: #333;
-    margin-bottom: 10px;
+  .profile-info .email {
+    font-size: 0.8rem;
+    color: #777;
   }
-  /* Ensure body append container has proper styling */
-  .nile-virtual-select-body-append {
-    position: absolute !important;
-    z-index: 9999 !important;
-    pointer-events: auto !important;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    max-height: 300px;
-    overflow: hidden;
+  .settings-icon {
+    cursor: pointer;
+    color: #6b7280;
   }
-  .nile-virtual-select-body-append .select__listbox {
-    display: block !important;
-    position: relative !important;
-    background: white;
-    border: none;
-    border-radius: 4px;
-    max-height: 300px;
-    overflow-y: auto;
+  .tenant-header {
+    font-weight: 600;
+    font-size: 0.85rem;
+    padding: 0.5rem 1rem;
+    color: #6b7280;
   }
-  /* Ensure proper styling for search input */
-  .nile-virtual-select-body-append .select__search {
-    padding: 8px;
-    border-bottom: 1px solid #e0e0e0;
+  nile-side-bar-action-menu-item[active] {
+    background: #f0f6ff;
   }
-  /* Ensure proper styling for options */
-  .nile-virtual-select-body-append .select__options {
-    max-height: 200px;
-    overflow-y: auto;
+  nile-side-bar-action-menu-item[active]::part(base) {
+    font-weight: 600;
   }
-  /* Ensure proper styling for footer */
-  .nile-virtual-select-body-append .select__footer {
-    padding: 8px;
-    border-top: 1px solid #e0e0e0;
-    background: #f8f9fa;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  nile-side-bar-action-menu::part(menu__footer) {
+    border-top: 1px solid #d1d5db;
+    padding: 5px;
+    border-radius: 0px;
+  }
+  .sign-out {
+  position: relative;
+  left: 140px;
   }
-  /* Style the virtualized container */
-  .nile-virtual-select-body-append .virtualized {
-    max-height: 200px;
-    overflow-y: auto;
+  nile-button.settings-button::part(base) {
+    height: 30px;
+    width: 30px;
   }
-</style>
-<body>
+  nile-avatar::part(avatar__content ) {
+   border: none;
+  }
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        min-height: 100vh;
+        margin: 0;
+        background: #f3f4f6;
+        font-family: sans-serif;
+      }
+      .demo-container {
+        display: flex;
+        width: 900px;
+        height: 600px;
+        border: 1px solid #d1d5db;
+        border-radius: 8px;
+        background: white;
+        overflow: hidden;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+      }
+      nile-side-bar {
+        flex-shrink: 0;
+        border-right: 1px solid #e5e7eb;
+      }
+      .main-container {
+        flex: 1;
+        padding: 1.5rem;
+        background: #f9fafb;
+        overflow-y: auto;
+      }
+      .content-box {
+        border: 2px dashed #e5e7eb;
+        background: white;
+        min-height: 400px;
+        padding: 2rem;
+        font-size: 1rem;
+      }
+    </style>
+    <script type="module" src="index.js"></script>
+    <script>
+      window.addEventListener("DOMContentLoaded", (e) => {
+        const sidebar = document.querySelector("nile-side-bar");
+        if (!sidebar) {
+          console.error("No <nile-side-bar> found in DOM");
+          return;
+        }
+        sidebar.addEventListener("nile-select", (e) => {
+          console.log(e.detail);
+          const { text } = e.detail;
+          const content = document.getElementById("content");
+          // Find actual item from event path
+          const item = e.composedPath().find(
+            el => el.tagName && el.tagName.toLowerCase() === "nile-side-bar-group-item"
+          );
+          if (!item) return;
+          // Clear other actives
+          document.querySelectorAll("nile-side-bar-group-item")
+            .forEach(i => i.removeAttribute("active"));
+          // Mark clicked one active
+          item.setAttribute("active", "");
+          // Update main content
+          content.innerHTML = `<h2>${text}</h2><p>You clicked <strong>${text}</strong>.</p>`;
+        });
+      });
+      </script>
+  </head>
+  <body>
+    <div class="demo-container">
+ <nile-side-bar   collapsed>
+  <nile-side-bar-header>
+    <nile-side-bar-logo slot="logo"   collapsedSrc=""></nile-side-bar-logo>
+    <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
+  </nile-side-bar-header>
-    <div class="demo-section">
-      <h2>Body Append Virtual Select (escapes container)</h2>
-      <div class="container-with-overflow">
-        <nile-select id="bodyAppendSelect" placeholder="Body append select" searchEnabled multiple bodyAppend enableVirtualScroll>
-        </nile-select>
-      </div>
-    </div>
+  <nile-side-bar-group  >
+    <nile-side-bar-group-item href="https://www.google.com" active>
+      <nile-side-bar-group-item-icon icon="dashboard" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Dashboard </nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="application" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Applications </nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="logs" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Logs</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="agent" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Agent</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="user" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Users</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+  </nile-side-bar-group>
-    <script>
-      const arrOptions = Array.from({ length: 1000 }, (_, i) => ({
-          value: `option-${i + 1}`,
-          label: `Option ${i + 1}`,
-      }));
+  <nile-side-bar-group divider>
+    <nile-side-bar-group-item href="https://biratdatta.vercel.app/">
+      <nile-side-bar-group-item-icon icon="flowmap-orchestration" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Integrations</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="persistentdata" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Data Loader</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item disabled>
+      <nile-side-bar-group-item-icon icon="data-insight" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text >Data Insights</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="document" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text  text="item 4">Tasks</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+    <nile-side-bar-group-item >
+      <nile-side-bar-group-item-icon icon="transaction_monitor" slot="icon"></nile-side-bar-group-item-icon>
+      <nile-side-bar-group-item-text  text="item 4">Operations Center</nile-side-bar-group-item-text>
+    </nile-side-bar-group-item>
+ </nile-side-bar-group>
+    <nile-side-bar-footer>
+      <nile-side-bar-footer-item type="support">
+        <span slot="icon"><nile-icon name="helpandsupport"> </nile-icon></span>
+        <nile-side-bar-footer-text
+        text="Help and Support"
+        slot="text">
+      </nile-side-bar-footer-text>
+        <nile-side-bar-action slot="action" placement="right" hoist distance="5" skidding="-22"  >
+          <nile-icon name="arrowright" slot="trigger"></nile-icon>
+      <nile-side-bar-action-menu>
+          <nile-side-bar-action-menu-item>Help Center</nile-side-bar-action-menu-item>
+          <nile-side-bar-action-menu-item>API Documentation</nile-side-bar-action-menu-item>
+        </nile-side-bar-action-menu>
+      </nile-side-bar-footer-item>
+    </nile-side-bar-action>
+      <nile-side-bar-footer-item type="avatar">
+        <span slot="icon">
+          <nile-avatar
+          name="James Albert"
+          variant="text"
+          size="lg"
+          bg-color="#005EA6"
+          text-color="white">
+        </nile-avatar>
+        </span>
+        <nile-side-bar-footer-text
+        text="James Albert"
+        subtext="Aquera Internals"
+        slot="text">
+      </nile-side-bar-footer-text>
-      document.addEventListener("DOMContentLoaded", ()=> {
+        <nile-side-bar-action slot="action" placement="right" hoist distance="2" skidding="-22"  >
+          <nile-icon name="arrowright" slot="trigger"></nile-icon>
+          <nile-side-bar-action-menu searchEnabled>
+            <!-- PRE-HEADER (Profile Section) -->
+            <div slot="menu__pre-header" class="profile">
+              <nile-avatar
+              name="James Albert"
+              variant="text"
+              size="xl"
+              bg-color="#005EA6"
+              text-color="white">
+            </nile-avatar>
+              <div class="profile-info">
+                <div class="name">James Albert</div>
+                <div class="org">Aquera Internals</div>
+                <div class="email">jamesalbert@gmail.com</div>
+              </div>
+              <nile-button variant="tertiary" class="settings-button" >      <nile-icon name="settings" class="settings-icon"></nile-icon> </nile-button>
-        // Body append select
-        const bodyAppendSelect = document.querySelector('nile-select#bodyAppendSelect');
-        bodyAppendSelect.data = arrOptions;
+            </div>
+            <!-- HEADER (Tenant Accounts label) -->
+            <!-- <div slot="menu__header" class="tenant-header">Tenant Accounts</div> -->
-        setTimeout(()=> {
-          bodyAppendSelect.value = ['option-5','option-6'];
-        }, 2000)
-    });
-    </script>
-</body>
+            <!-- MENU ITEMS -->
+            <nile-side-bar-action-menu-item>Acme</nile-side-bar-action-menu-item>
+            <nile-side-bar-action-menu-item active>
+              Aquera Internals
-</html>
+              <nile-icon name="tick" slot="suffix"></nile-icon>
+            </nile-side-bar-action-menu-item>
+            <nile-side-bar-action-menu-item>Dayforce to Okta Saas</nile-side-bar-action-menu-item>
+            <nile-side-bar-action-menu-item>Andrew Wells</nile-side-bar-action-menu-item>
+            <nile-side-bar-action-menu-item>Villa Groups</nile-side-bar-action-menu-item>
+            <!-- FOOTER -->
+            <div slot="menu__footer" class="footer">
+              <nile-button variant="tertiary" class="sign-out">Sign Out</nile-button>
+            </div>
+          </nile-side-bar-action-menu>
+        </nile-side-bar-action>
+      </nile-side-bar-footer-item>
+</nile-side-bar>
+      <div class="main-container">
+        <div id="content" class="content-box">
+          <h2>Welcome</h2>
+          <p>Select a sidebar item to see its content here.</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/demo/nxtgen.css CHANGED Viewed

@@ -904,7 +904,7 @@
   --ng-border-style-outset: outset;
   --ng-border-style-hidden: hidden;
-  --ng-border-none: none;
 }
 :root{
@@ -1160,12 +1160,7 @@
     --ng-linear-gradient-05:linear-gradient(270deg, #FCB69F 0%, #FFECD2 100%);
     --ng-linear-gradient-06:linear-gradient(180deg, #FECFEF 0%, #FF989C 100%);
     --ng-linear-gradient-07:linear-gradient(45deg, #FF9DE4 0%, #FFEAF6 100%);
-    --ng-linear-gradient-20:linear-gradient(45deg, #E9DEFA 0%, #FFF6EB 100%);
-    /* Extra Tokens */
-    --ng-mask-rim: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    --ng-mask-composite-xor: xor;
-    --ng-mask-composite-exclude: exclude;
+    --ng-linear-gradient-20:linear-gradient(45deg, #E9DEFA 0%, #FFF6EB 100%)