npm - @aquera/nile-elements - Versions diffs - 1.3.4-beta-2.2 → 1.3.4-beta-2.3 - Mend

@aquera/nile-elements 1.3.4-beta-2.2 → 1.3.4-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 (651) hide show

package/README.md CHANGED Viewed

@@ -79,6 +79,33 @@ 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.3.4
+- Nile Chip: readonly property added (UIF-1020)
+#### Version 1.3.3
+- Nile Dropdown: Event binding issue fixed (UIF-1016)
+#### Version 1.3.2
+- Nile Radio: Console error when no pre-selected issue fix (UIF-1017)
+#### Version 1.3.1
+- Nile Dropdown: Event binding issue fixed (UIF-1016)
+- Nile Lite Tooltip: UI Improvements for Lite Tooltip (UIF-1015)
+#### Version 1.3.0
+- Nile Inline Edit: autoClose feature added (UIF-1012)
+- Nile Calendar: Nile Calendar UI Improvements and Features Added (UIF-661)
+- Integrate tab/visibility-based closing across UI components (UIF-1013)
+- Dependency Nile 1.1.1
+#### Version 1.2.9
+Nile Dropdown: Portal feature added (UIF-1011)
+#### Version 1.2.8
+-  Nile autocomplete & Chip: Portal feature added (UIF-1008)
+-  Nile Chip: Tooltip added to Tags and Menu (UIF-1009)
 #### Version 1.2.7
 -  Nile Popover: Portal feature added (UIF-1004)
 -  New Component: Nile Lite Tooltip (UIF-1002)

package/demo/index.css CHANGED Viewed

@@ -1,7 +1,4 @@
 body {
-  justify-content: center;
-  align-items: center;
-  display: flex;
   height: 100vh;
 }

package/demo/index.html CHANGED Viewed

@@ -2,99 +2,352 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
-    <!-- <link rel="stylesheet" href="nxtgen.css" id="stylesheet" /> -->
-    <link rel="stylesheet" href="variables.css" id="stylesheet" />
+    <link rel="stylesheet" href="" id="stylesheet" />
+    <script>
+      const params = new URLSearchParams(window.location.search);
+      const style = params.get('style') || 'variables.css';
+      document.getElementById('stylesheet').href = style;
+    </script>
+    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
     <link rel="stylesheet" href="index.css" />
     <style>
+      .container {
+        width: 100%;
+        height: auto;
+        background-color: #f5f5f5;
+      }
+      .container-gray {
+        width: 100%;
+        height: auto;
+        background-color: #d4d4d4;
+      }
+      .container-blue {
+        width: 100%;
+        height: auto;
+        background-color: #e3f2fd;
+      }
+      .container-light-gray {
+        width: 100%;
+        height: auto;
+        background-color: #f0f0f0;
+      }
+      .flex-container {
+        display: flex;
+        gap: 20px;
+        flex-wrap: wrap;
+      }
+      .flex-item {
+        flex: 1;
+        min-width: 200px;
+      }
+      .inline-container {
+        display: inline-block;
+      }
     </style>
     <script type="module" src="index.js"></script>
+    <script>
+      // Panel control functions
+      function openPanel(panelId) {
+        const panel = document.getElementById(panelId);
+        if (panel) {
+          panel.open = true;
+        }
+      }
+      function closePanel(panelId) {
+        const panel = document.getElementById(panelId);
+        if (panel) {
+          panel.open = false;
+        }
+      }
+    </script>
   </head>
-  <body>
-    <nile-grid style="height: 400px">
-      <nile-grid-head sticky>
-        <nile-grid-row>
-          <nile-grid-head-item resizable>Title</nile-grid-head-item>
-          <nile-grid-head-item resizable>Author</nile-grid-head-item>
-          <nile-grid-head-item resizable>Genre</nile-grid-head-item>
-          <nile-grid-head-item>Year</nile-grid-head-item>
-          <nile-grid-head-item lockWidth width="200px" resizable>Status</nile-grid-head-item>
-        </nile-grid-row>
-      </nile-grid-head>
-      <nile-grid-body>
-        <nile-grid-row>
-          <nile-grid-cell-item>The Great Gatsby</nile-grid-cell-item>
-          <nile-grid-cell-item>F. Scott Fitzgerald</nile-grid-cell-item>
-          <nile-grid-cell-item>Fiction</nile-grid-cell-item>
-          <nile-grid-cell-item>1925</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>1984</nile-grid-cell-item>
-          <nile-grid-cell-item>George Orwell</nile-grid-cell-item>
-          <nile-grid-cell-item>Dystopian</nile-grid-cell-item>
-          <nile-grid-cell-item>1949</nile-grid-cell-item>
-          <nile-grid-cell-item>Checked Out</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>To Kill a Mockingbird</nile-grid-cell-item>
-          <nile-grid-cell-item>Harper Lee</nile-grid-cell-item>
-          <nile-grid-cell-item>Classic</nile-grid-cell-item>
-          <nile-grid-cell-item>1960</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>The Hobbit</nile-grid-cell-item>
-          <nile-grid-cell-item>J.R.R. Tolkien</nile-grid-cell-item>
-          <nile-grid-cell-item>Fantasy</nile-grid-cell-item>
-          <nile-grid-cell-item>1937</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Moby Dick</nile-grid-cell-item>
-          <nile-grid-cell-item>Herman Melville</nile-grid-cell-item>
-          <nile-grid-cell-item>Adventure</nile-grid-cell-item>
-          <nile-grid-cell-item>1851</nile-grid-cell-item>
-          <nile-grid-cell-item>Checked Out</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Brave New World</nile-grid-cell-item>
-          <nile-grid-cell-item>Aldous Huxley</nile-grid-cell-item>
-          <nile-grid-cell-item>Dystopian</nile-grid-cell-item>
-          <nile-grid-cell-item>1932</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Crime and Punishment</nile-grid-cell-item>
-          <nile-grid-cell-item>Fyodor Dostoevsky</nile-grid-cell-item>
-          <nile-grid-cell-item>Philosophical</nile-grid-cell-item>
-          <nile-grid-cell-item>1866</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Frankenstein</nile-grid-cell-item>
-          <nile-grid-cell-item>Mary Shelley</nile-grid-cell-item>
-          <nile-grid-cell-item>Horror</nile-grid-cell-item>
-          <nile-grid-cell-item>1818</nile-grid-cell-item>
-          <nile-grid-cell-item>Checked Out</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>The Catcher in the Rye</nile-grid-cell-item>
-          <nile-grid-cell-item>J.D. Salinger</nile-grid-cell-item>
-          <nile-grid-cell-item>Fiction</nile-grid-cell-item>
-          <nile-grid-cell-item>1951</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-        <nile-grid-row>
-          <nile-grid-cell-item>Anne of Green Gables</nile-grid-cell-item>
-          <nile-grid-cell-item>Lucy Maud Montgomery</nile-grid-cell-item>
-          <nile-grid-cell-item>Classic</nile-grid-cell-item>
-          <nile-grid-cell-item>1908</nile-grid-cell-item>
-          <nile-grid-cell-item>Available</nile-grid-cell-item>
-        </nile-grid-row>
-      </nile-grid-body>
-    </nile-grid>
+  <body>
+    <style>
+      body {
+        padding: 40px;
+        font-family: sans-serif;
+      }
+      .demo-section {
+        margin: 60px 0;
+        padding: 40px;
+        border: 2px dashed #ccc;
+        border-radius: 8px;
+        display: flex;
+        justify-content: flex-start;
+      }
+      .demo-section h4 {
+        margin-top: 0;
+        color: #333;
+      }
+      .nested-container {
+        padding: 30px;
+        background: #f5f5f5;
+        border-radius: 4px;
+        margin: 20px 0;
+      }
+      .deeply-nested {
+        padding: 20px;
+        background: #e8e8e8;
+        border-radius: 4px;
+        margin: 15px;
+      }
+      .button-demo {
+        padding: 10px 20px;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 5px;
+      }
+      .button-demo:hover {
+        background: #0056b3;
+      }
+      .close-button {
+        padding: 6px 12px;
+        background: #dc3545;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-top: 10px;
+        font-size: 12px;
+      }
+      .close-button:hover {
+        background: #c82333;
+      }
+      #my-container {
+        padding: 20px;
+        background: #fff3cd;
+        border: 2px solid #ffc107;
+        border-radius: 4px;
+        margin: 20px 0;
+      }
+      .trigger-button {
+        padding: 10px 20px;
+        background: #28a745;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 5px;
+      }
+      .trigger-button:hover {
+        background: #218838;
+      }
+    </style>
+    <!-- Example 1: Basic - Position Right (Trigger after panel) -->
+    <div class="demo-section">
+      <h4>Example 1: Position Right (Trigger after panel - next sibling)</h4>
+      <nile-floating-panel id="panel1" position="right">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This is a basic floating panel positioned to the right.</p>
+          <nile-button onclick="closePanel('panel1')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <nile-button onclick="openPanel('panel1')">Open Floating Panel</nile-button>
+    </div>
+    <!-- Example 2: Position Left (Trigger before panel) -->
+    <div class="demo-section">
+      <h4>Example 2: Position Left (Trigger before panel - previous sibling)</h4>
+      <nile-button onclick="openPanel('panel2')">Open Floating Panel</nile-button>
+      <nile-floating-panel id="panel2" position="left">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel is positioned to the left of the trigger.</p>
+          <nile-button onclick="closePanel('panel2')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+    </div>
+    <!-- Example 3: Position Top -->
+    <div class="demo-section">
+      <h4>Example 3: Position Top</h4>
+      <nile-floating-panel id="panel3" position="top">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel appears above the trigger.</p>
+          <nile-button onclick="closePanel('panel3')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <nile-button onclick="openPanel('panel3')">Open Floating Panel (Top)</nile-button>
+    </div>
+    <!-- Example 4: Position Bottom -->
+    <div class="demo-section">
+      <h4>Example 4: Position Bottom</h4>
+      <nile-floating-panel id="panel4" position="bottom">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel appears below the trigger.</p>
+          <nile-button onclick="closePanel('panel4')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <nile-button onclick="openPanel('panel4')">Open Floating Panel (Bottom)</nile-button>
+    </div>
+    <!-- Example 5: Explicit Trigger Attribute (ID selector) -->
+    <div class="demo-section">
+      <h4>Example 5: Explicit Trigger (using trigger attribute with ID)</h4>
+      <button id="trigger-btn-5" class="trigger-button">Trigger Button (ID)</button>
+      <nile-floating-panel id="panel5" position="right" trigger="#trigger-btn-5">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel uses an explicit trigger attribute pointing to an element ID.</p>
+          <nile-button onclick="closePanel('panel5')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+    </div>
+    <!-- Example 6: Explicit Trigger Attribute (Class selector) -->
+    <div class="demo-section">
+      <h4>Example 6: Explicit Trigger (using trigger attribute with class selector)</h4>
+      <button class="trigger-button custom-trigger-6">Trigger Button (Class)</button>
+      <nile-floating-panel id="panel6" position="left" trigger=".custom-trigger-6">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel uses a class selector for the trigger.</p>
+          <nile-button onclick="closePanel('panel6')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+    </div>
+    <!-- Example 7: Multiple Panels -->
+    <div class="demo-section">
+      <h4>Example 7: Multiple Panels (Different positions)</h4>
+      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <nile-floating-panel id="panel7a" position="top">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>Panel 7A - Top</p>
+            <nile-button onclick="closePanel('panel7a')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+        <nile-button onclick="openPanel('panel7a')">Top</nile-button>
+        <nile-floating-panel id="panel7b" position="right">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>Panel 7B - Right</p>
+            <nile-button onclick="closePanel('panel7b')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+        <nile-button onclick="openPanel('panel7b')">Right</nile-button>
+        <nile-floating-panel id="panel7c" position="bottom">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>Panel 7C - Bottom</p>
+            <nile-button onclick="closePanel('panel7c')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+        <nile-button onclick="openPanel('panel7c')">Bottom</nile-button>
+        <nile-floating-panel id="panel7d" position="left">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>Panel 7D - Left</p>
+            <nile-button onclick="closePanel('panel7d')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+        <nile-button onclick="openPanel('panel7d')">Left</nile-button>
+      </div>
+    </div>
+    <!-- Example 8: Nested Container -->
+    <div class="demo-section">
+      <h4>Example 8: Panel in Nested Container</h4>
+      <div class="nested-container">
+        <div class="deeply-nested">
+          <nile-floating-panel id="panel8" position="right">
+            <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+              <p>This panel is inside nested containers.</p>
+              <nile-button onclick="closePanel('panel8')">Close</nile-button>
+            </div>
+          </nile-floating-panel>
+          <nile-button onclick="openPanel('panel8')">Open Panel (Nested)</nile-button>
+        </div>
+      </div>
+    </div>
+    <!-- Example 9: Trigger Far Away (using explicit trigger) -->
+    <div class="demo-section" id="remote-trigger-container">
+      <h4>Example 9: Trigger Far Away (using explicit trigger attribute)</h4>
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <button id="remote-trigger" class="trigger-button">Remote Trigger Button</button>
+        <div style="width: 200px;"></div>
+        <nile-floating-panel id="panel9" position="left" trigger="#remote-trigger">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>This panel is positioned relative to a trigger that's far away.</p>
+            <nile-button onclick="closePanel('panel9')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+      </div>
+    </div>
+    <!-- Example 10: Custom Anchor -->
+    <div class="demo-section">
+      <h4>Example 10: Custom Anchor Container</h4>
+      <div id="custom-anchor" style="padding: 20px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 4px;">
+        <nile-floating-panel id="panel10" position="right" anchor="#remote-trigger-container">
+          <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+            <p>This panel is anchored to a custom container.</p>
+            <nile-button onclick="closePanel('panel10')">Close</nile-button>
+          </div>
+        </nile-floating-panel>
+        <nile-button onclick="openPanel('panel10')">Open Panel (Custom Anchor)</nile-button>
+      </div>
+    </div>
+    <!-- Example 11: No Close on Outside Click -->
+    <div class="demo-section">
+      <h4>Example 11: Disabled Close on Outside Click</h4>
+      <nile-floating-panel id="panel11" position="right" close-on-outside-click="false">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>This panel won't close when clicking outside. You must use the close button.</p>
+          <nile-button onclick="closePanel('panel11')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <nile-button onclick="openPanel('panel11')">Open Panel (No Auto-Close)</nile-button>
+    </div>
+    <!-- Example 12: Edge Case - Text Node Between Elements -->
+    <div class="demo-section">
+      <h4>Example 12: Text Node Between Elements (should skip text nodes)</h4>
+      <nile-floating-panel id="panel12" position="right">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>Panel with text node between trigger.</p>
+          <nile-button onclick="closePanel('panel12')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <!-- This text node should be skipped -->
+      Some text here
+      <nile-button onclick="openPanel('panel12')">Open Panel</nile-button>
+    </div>
+    <!-- Example 13: Edge Case - Multiple Siblings -->
+    <div class="demo-section">
+      <h4>Example 13: Multiple Siblings (should use first valid sibling)</h4>
+      <nile-floating-panel id="panel13" position="right">
+        <div style="padding: 16px; background: white; border: 1px solid #ccc; border-radius: 4px;">
+          <p>Panel with multiple siblings after it.</p>
+          <nile-button onclick="closePanel('panel13')">Close</nile-button>
+        </div>
+      </nile-floating-panel>
+      <span>Text node (should be skipped)</span>
+      <nile-button onclick="openPanel('panel13')">First Button (Should be trigger)</nile-button>
+      <nile-button onclick="openPanel('panel13')">Second Button (Should not be trigger)</nile-button>
+    </div>
+    <script>
+      // Additional helper to demonstrate programmatic trigger setting
+      window.addEventListener('DOMContentLoaded', () => {
+        // Example of programmatically setting trigger (for framework integration demo)
+        const panel14 = document.createElement('nile-floating-panel');
+        panel14.id = 'panel14';
+        panel14.position = 'right';
+        const triggerBtn = document.getElementById('trigger-btn-5');
+        if (triggerBtn && panel14) {
+          // This demonstrates how frameworks can set trigger programmatically
+          // panel14.trigger = triggerBtn; // Uncomment to test
+        }
+      });
+    </script>
   </body>
 </html>

package/demo/nxtgen.css CHANGED Viewed

@@ -412,6 +412,9 @@
   --ng-spacing-2-5: 10px;
   --ng-spacing-3-5: 14px;
   --ng-spacing-4-5: 18px;
+  --ng-spacing-312: 312px;
+  --ng-spacing-164: 164px;
+  --ng-spacing-108: 108px;
   /* Typography tokens */
@@ -877,6 +880,9 @@
   --ng-width-360: var(--ng-spacing-360);
   --ng-width-400: var(--ng-spacing-400);
   --ng-width-480: var(--ng-spacing-480);
+  --ng-width-312: var(--ng-spacing-312);
+  --ng-width-164: var(--ng-spacing-164);
+  --ng-width-108: var(--ng-spacing-108);
 }
 :root {

package/demo/variables.css CHANGED Viewed

@@ -320,7 +320,7 @@
   --nile-colors-dark-900: #000000;
   --nile-colors-dark-500: #636363;
   --nile-colors-dark-200: #F5F7F7;
-  --nile-colors-dark-100: rgba(0, 0, 0, 0.1);
+  --nile-colors-dark-100: #E6E6E6;
   --nile-colors-blue-700: #1978B8;
   --nile-colors-blue-500: #42A3E5;
   --nile-colors-blue-400: #A5D3F3;
@@ -527,6 +527,7 @@
   --nile-box-shadow-12: hsl(198.6 88.7% 48.4% / 40%);
   --nile-box-shadow-13: 3px -20px 28px 0px rgba(119, 125, 130, 0.15);
   --nile-box-shadow-14: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);
+  --nile-box-shadow-15: 0 2px 4px 0 rgba(119, 125, 130, 0.15);
     /* Border Radius */
@@ -629,6 +630,9 @@
 --nile-width-535px: 535px;
 --nile-width-352px: 352px;
 --nile-width-none: none;
+--nile-width-288px: 288px;
+--nile-width-150px: 150px;
+--nile-width-99px: 99px;
 /* Height */
@@ -809,7 +813,6 @@
   /* Colors */
-  --nile-colors-primary-600-alt: #005ea680;
   --nile-bg-color-dialog: #0000006e;
   --nile-border-color-transparent: transparent;
   --nile-colors-transparent: transparent;