npm - @aquera/nile-elements - Versions diffs - 1.2.1-beta-1.0 → 1.2.1-beta-1.1 - Mend

@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

package/README.md CHANGED Viewed

@@ -79,6 +79,32 @@ 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.2.0
+- New Component: Nile Inline-Sidebar (UIF-993)
+#### Version 1.1.9
+- Nile Rich Text Editor: RTE Bug Fixes(UIF-992).
+#### Version 1.1.8
+- Nile Virtual Select: Show Selected defect fix (UIF-990).
+#### Version 1.1.7
+- Nile Virtual Select: Portal feature defect fixes (UIF-986).
+#### Version 1.1.6
+- Nile Select/Virtual Select: Angular CDK overflow issue fix (UIF-986).
+#### Version 1.1.5
+- Nile Chip: noAutoComplete Property added. (UIF-988)
+#### 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)

package/demo/index.html CHANGED Viewed

@@ -4,165 +4,97 @@
     <meta charset="utf-8" />
     <!-- <link rel="stylesheet" href="nxtgen.css" id="stylesheet" /> -->
     <link rel="stylesheet" href="variables.css" id="stylesheet" />
-    <link rel="stylesheet" href="index.css" />
+    <!-- <link rel="stylesheet" href="index.css" /> -->
+    <script type="module" src="index.js"></script>
+  </head>
+  <body>
     <style>
-      .hello {
-        max-width: 1000px;
-        height: 100%;
-      }
       body {
+        font-family: sans-serif;
         display: flex;
         flex-direction: column;
+        gap: 2rem;
+        padding: 2rem;
       }
-    </style>
-    <script type="module" src="index.js"></script>
-  </head>
-  <body>
-    <button>Insert Column</button>
-    <button id="remove-col">Remove Last Column</button>
-    <nile-grid enableResizeScroll>
-      <nile-grid-head sticky>
-        <nile-grid-row>
-          <nile-grid-head-item colSticky resizable>Name</nile-grid-head-item>
-          <nile-grid-head-item width="100px" resizable>Email</nile-grid-head-item>
-          <nile-grid-head-item resizable>Role</nile-grid-head-item>
-          <nile-grid-head-item resizable>Department</nile-grid-head-item>
-          <nile-grid-head-item resizable>Location</nile-grid-head-item>
-          <nile-grid-head-item lastColSticky resizable>Last Login</nile-grid-head-item>
-        </nile-grid-row>
-      </nile-grid-head>
-      <nile-grid-body>
-        <nile-grid-row>
-          <nile-grid-cell-item>Alice Johnson</nile-grid-cell-item>
-          <nile-grid-cell-item>alice.johnson&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>User</nile-grid-cell-item>
-          <nile-grid-cell-item>Engineering</nile-grid-cell-item>
-          <nile-grid-cell-item>Seattle</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-21 10:05</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row class="row-2">
-          <nile-grid-cell-item>Bob Martinez</nile-grid-cell-item>
-          <nile-grid-cell-item>bob.martinez&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>Manager</nile-grid-cell-item>
-          <nile-grid-cell-item>Sales</nile-grid-cell-item>
-          <nile-grid-cell-item>Chicago</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-22 08:47</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Carol Nguyen</nile-grid-cell-item>
-          <nile-grid-cell-item>carol.nguyen&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>Analyst</nile-grid-cell-item>
-          <nile-grid-cell-item>Finance</nile-grid-cell-item>
-          <nile-grid-cell-item>New York</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-18 16:12</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>David Clark</nile-grid-cell-item>
-          <nile-grid-cell-item>david.clark&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>Admin</nile-grid-cell-item>
-          <nile-grid-cell-item>IT</nile-grid-cell-item>
-          <nile-grid-cell-item>Austin</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-24 09:31</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Eve Patel</nile-grid-cell-item>
-          <nile-grid-cell-item>eve.patel&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>Support</nile-grid-cell-item>
-          <nile-grid-cell-item>Customer Success</nile-grid-cell-item>
-          <nile-grid-cell-item>Denver</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-25 13:20</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Frank Romero</nile-grid-cell-item>
-          <nile-grid-cell-item>frank.romero&#64;gmail.com</nile-grid-cell-item>
-          <nile-grid-cell-item>Owner</nile-grid-cell-item>
-          <nile-grid-cell-item>Executive</nile-grid-cell-item>
-          <nile-grid-cell-item>San Francisco</nile-grid-cell-item>
-          <nile-grid-cell-item>2025-09-26 07:55</nile-grid-cell-item>
-        </nile-grid-row>
-      </nile-grid-body>
-    </nile-grid>
-    <script>
-      function insertColumnUsingCarry(
-        nileGrid,
-        targetCol,
-        {
-          headerText = 'New Col',
-          cellFactory = r => {
-            const c = document.createElement('nile-grid-cell-item');
-            c.textContent = `R${r + 1}`;
-            return c;
-          },
-        } = {}
-      ) {
-        // HEAD
-        const headRow = nileGrid.querySelector('nile-grid-head nile-grid-row');
-        if (headRow) {
-          const h = document.createElement('nile-grid-head-item');
-          h.setAttribute('resizable', '');
-          h.textContent = headerText;
-          const headRef = Array.from(headRow.children).find(
-            el => Number(el.dataset?.cStart || Infinity) >= targetCol + 1
-          );
-          headRef ? headRow.insertBefore(h, headRef) : headRow.appendChild(h);
-        }
-        // BODY
-        const rows = Array.from(
-          nileGrid.querySelectorAll('nile-grid-body nile-grid-row')
-        );
-        const carry = []; // carry[c] rows left covered by a rowspan from above
-        rows.forEach((row, rIdx) => {
-          const covered = (carry[targetCol] || 0) > 0;
-          if (!covered) {
-            // find insertion ref by visual column (set by your layout pass)
-            const items = Array.from(
-              row.querySelectorAll('nile-grid-cell-item')
-            );
-            const ref = items.find(
-              el => Number(el.dataset?.cStart || Infinity) >= targetCol + 1
-            );
-            const cell = cellFactory(rIdx, row);
-            ref ? row.insertBefore(cell, ref) : row.appendChild(cell);
-            const rs = Math.max(1, Number(cell.getAttribute('rowspan')) || 1);
-            if (rs > 1)
-              carry[targetCol] = Math.max(carry[targetCol] || 0, rs - 1);
-          }
-          // step rowspans down for next row
-          for (let i = 0; i < carry.length; i++) if (carry[i] > 0) carry[i]--;
-        });
+      .calendar-block {
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        padding: 1rem;
       }
-      document.querySelector('button').addEventListener('click', () => {
-        insertColumnUsingCarry(document.querySelector('nile-grid'), 2, {
-          headerText: 'New Col',
+      pre {
+        background: #f7f7f7;
+        padding: 0.75rem;
+        border-radius: 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        font-size: 0.9rem;
+      }
+    </style>
+    </head>
+    <body>
+    <div class="calendar-block">
+      <h3>Calendar 1 — Range + hideTypes</h3>
+      <nile-calendar id="cal1" range hideTypes showMonthDropdown showYearDropdown showManualInputs allowClear></nile-calendar>
+      <pre id="log1"></pre>
+    </div>
+    <div class="calendar-block">
+      <h3>Calendar 2 — Range (default types shown)</h3>
+      <nile-calendar id="cal2" range></nile-calendar>
+      <pre id="log2"></pre>
+    </div>
+    <div class="calendar-block">
+      <h3>Calendar 3 — Year Range (2010–2030)</h3>
+      <nile-calendar id="cal3" startYear="2010" endYear="2030"></nile-calendar>
+      <pre id="log3"></pre>
+    </div>
+    <div class="calendar-block">
+      <h3>Calendar 4 — Range + allowClear</h3>
+      <nile-calendar id="cal4" range allowclear></nile-calendar>
+      <pre id="log4"></pre>
+    </div>
+    <script type="module">
+      const calendars = [
+        { id: 'cal1', log: 'log1' },
+        { id: 'cal2', log: 'log2' },
+        { id: 'cal3', log: 'log3' },
+        { id: 'cal4', log: 'log4' },
+      ];
+      const eventList = [
+        'nile-init',
+        'nile-destroy',
+        'nile-change',
+        'nile-changed',
+        'nile-clear',
+        'nile-type-change',
+        'nile-month-change',
+        'nile-year-change',
+      ];
+      calendars.forEach(({ id, log }) => {
+        const cal = document.getElementById(id);
+        const logEl = document.getElementById(log);
+        const logEvent = (eventName, detail) => {
+          const time = new Date().toLocaleTimeString();
+          const message = `[${time}] ${eventName}: ${JSON.stringify(detail, null, 2)}\n`;
+          logEl.textContent = message + logEl.textContent;
+        };
+        eventList.forEach(eventName => {
+          cal.addEventListener(eventName, e => {
+            logEvent(eventName, e.detail);
+          });
         });
       });
-  function removeLastColumn(nileGrid) {
-    // Remove last header
-    const headRow = nileGrid.querySelector('nile-grid-head nile-grid-row');
-    if (headRow?.lastElementChild) headRow.removeChild(headRow.lastElementChild);
-    // Remove last cell from each row
-    const rows = nileGrid.querySelectorAll('nile-grid-body nile-grid-row');
-    rows.forEach(row => {
-      if (row.lastElementChild) row.removeChild(row.lastElementChild);
-    });
-  }
-  document
-    .getElementById('remove-col')
-    .addEventListener('click', () =>
-      removeLastColumn(document.querySelector('nile-grid'))
-    );
     </script>
+    </body>
   </body>
-</html>
+</html>

package/demo/variables.css CHANGED Viewed

@@ -307,8 +307,8 @@
   --nile-colors-primary-700: #005291;
   --nile-colors-primary-600: #005EA6;
   --nile-colors-primary-500: #80AED3;
-  --nile-colors-primary-400: rgba(0, 94, 166, 0.25);
-  --nile-colors-primary-100: #E5EFF8;
+  --nile-colors-primary-400: #BFD7E9;
+  --nile-colors-primary-100: #E6EFF6;
   --nile-colors-neutral-700: #777D82;
   --nile-colors-neutral-500: #C7CED4;
   --nile-colors-neutral-400: #E6E9EB;
@@ -525,6 +525,7 @@
   --nile-box-shadow-10: 0 0 0 1px rgba(14, 165, 233, 0.4);
   --nile-box-shadow-11: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
   --nile-box-shadow-12: hsl(198.6 88.7% 48.4% / 40%);
+  --nile-box-shadow-13: 0 2px 4px 0 rgba(119, 125, 130, 0.15);
     /* Border Radius */