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

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

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 (346) hide show

package/README.md CHANGED Viewed

@@ -79,6 +79,23 @@ 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.4
+- New Component: Nile Sidebar (UIF-987)
+- Dependency Nile 1.0.7
+#### Version 1.1.3
+- Nile RTE: Added New Property noStyles for (UIF-917)
+- Dependency Nile 1.0.6
+#### 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

@@ -2,329 +2,33 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="variables.css" />
+    <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
+    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
     <link rel="stylesheet" href="index.css" />
     <style>
-.profile {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--nile-color-border, #e5e7eb);
-  }
-  .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;
-  }
-  .profile-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    line-height: 1.2;
-  }
-  .profile-info .name {
-    font-weight: 600;
-    font-size: 0.95rem;
-  }
-  .profile-info .org {
-    font-size: 0.85rem;
-    color: #555;
-  }
-  .profile-info .email {
-    font-size: 0.8rem;
-    color: #777;
-  }
-  .settings-icon {
-    cursor: pointer;
-    color: #6b7280;
-  }
-  .tenant-header {
-    font-weight: 600;
-    font-size: 0.85rem;
-    padding: 0.5rem 1rem;
-    color: #6b7280;
-  }
-  nile-side-bar-action-menu-item[active] {
-    background: #f0f6ff;
-  }
-  nile-side-bar-action-menu-item[active]::part(base) {
-    font-weight: 600;
-  }
-  nile-side-bar-action-menu::part(menu__footer) {
-    border-top: 1px solid #d1d5db;
-    padding: 5px;
-    border-radius: 0px;
-  }
-  .sign-out {
-  position: relative;
-  left: 140px;
-  }
-  nile-button.settings-button::part(base) {
-    height: 30px;
-    width: 30px;
-  }
-  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>
-  <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>
+  <body>
-  </nile-side-bar-group>
-  <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>
-        <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>
-            </div>
-            <!-- HEADER (Tenant Accounts label) -->
-            <!-- <div slot="menu__header" class="tenant-header">Tenant Accounts</div> -->
-            <!-- MENU ITEMS -->
-            <nile-side-bar-action-menu-item>Acme</nile-side-bar-action-menu-item>
-            <nile-side-bar-action-menu-item active>
-              Aquera Internals
-              <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>
+<!-- <nile-input
+  type="password"
+  canSavePassword>
+</nile-input>
+  -->
+  <nile-chip
+   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
+   acceptUserInput
+></nile-chip>
-      <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>
+</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,7 +1160,12 @@
     --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%)
+    --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;