@aquera/nile-elements 1.4.4 → 1.4.5-beta-1.1

package/demo/index.html

@@ -31,15 +31,127 @@
   -->
  
 
-  <nile-chip
-   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
-   acceptUserInput
-></nile-chip>
 
 
-<nile-button id="small-btn1">Small tooltip</nile-button>
-<nile-lite-tooltip for="small-btn1" id="small-tooltip1" content="This is a small tooltip." size="small"></nile-lite-tooltip>
 
+ <div style="width: 1000px; height: 1000px; margin: 0 auto;"> 
+<nile-rich-text-editor id="rte-example-1" whitelist='["width", "height", "border", "padding", "border-collapse", "border-top", "border-right", "border-radius", "max-width", "max-height", "min-width", "min-height", "height", "display", "object-fit"]'>
+ 
+  <nile-rte-mentions>
+    <nile-rte-mentions-item 
+      mentionsCharacter="^"
+      mentionsData='[
+        { "key":"alice", "label":"Alice Smith" },
+        { "key":"bob",   "label":"Bob Jones"  }
+      ]'>
+    </nile-rte-mentions-item>
+  </nile-rte-mentions>
+
+  <nile-rte-toolbar>
+   
+
+    <nile-rte-toolbar-item name="bold" label="Bold"></nile-rte-toolbar-item>
+    <nile-rte-toolbar-item name="italic" label="Italic"></nile-rte-toolbar-item>
+    <nile-rte-toolbar-item name="underline" label="Underline"></nile-rte-toolbar-item>
+    
+<nile-rte-divider></nile-rte-divider>
+    <nile-rte-select
+      type="align"
+      label="Align"></nile-rte-select>
 
+    <nile-rte-toolbar-item name="ul" label="Bulleted list"></nile-rte-toolbar-item>
+    <nile-rte-toolbar-item name="ol" label="Numbered list"></nile-rte-toolbar-item>
+
+  </nile-rte-toolbar>
+
+  <nile-rte-preview></nile-rte-preview>
+</nile-rich-text-editor>
+ 
+</div>
+ 
   </body>
+  <script>
+    const rte = document.getElementById('rte-example-1');
+rte.addEventListener('nile-change', (e) => {
+  console.log('Rich text editor changed:', e.detail.content);
+});
+rte.value =
+"<style>" +
+"  .email-wrapper { font-family: Arial, sans-serif; background-color:#f3f4f6; padding:24px; text-align:center; line-height:1.6; }" +
+"  .email-container { max-width:600px; margin:0 auto; background-color:#ffffff; border-radius:8px; overflow:hidden; }" +
+
+"  .td-banner { background-color:#2563eb; background-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/chartdotjs.svg'); background-repeat:no-repeat; background-position:center 20px; background-size:120px; padding:80px 24px 32px 24px; text-align:center; }" +
+"  .td-body { padding:24px; text-align:center; color:#111827; }" +
+"  .td-footer { background-color:#f9fafb; padding:12px; text-align:center; font-size:12px; color:#6b7280; }" +
+
+"  .p-greeting { font-size:18px; margin:0 0 12px 0; }" +
+"  .p-intro { font-size:16px; margin:0 0 20px 0; color:#374151; }" +
+"  .p-text { font-size:16px; margin:24px 0 8px 0; color:#374151; }" +
+"  .p-signoff { font-size:16px; margin:0; }" +
+"  .p-team { font-size:16px; font-weight:700; margin:0; }" +
+
+"  .h1-title { margin:0; font-size:28px; font-weight:700; color:#ffffff; }" +
+"  .h2-title { font-size:22px; font-weight:700; margin:24px 0 12px 0; color:#111827; }" +
+
+"  .table-metrics { width:100%; border-collapse:collapse; margin-top:16px; border:1px solid #d1d5db; }" +
+"  .th-metric { padding:12px; border:1px solid #d1d5db; background-color:#f9fafb; font-size:15px; text-align:left; }" +
+"  .td-metric { padding:12px; border:1px solid #d1d5db; text-align:left; }" +
+"</style>" +
+
+"<div class=\"email-wrapper\">" +
+"  <table class=\"email-container\" align=\"center\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">" +
+
+"    <tr>" +
+"      <td class=\"td-banner\">" +
+"        <h1 class=\"h1-title\">Your Performance Report</h1>" +
+"      </td>" +
+"    </tr>" +
+
+"    <tr>" +
+"      <td class=\"td-body\">" +
+"        <p class=\"p-greeting\">" +
+"          Hello <strong><span class=\"mention\" data-mention-prefix=\"${\" data-mention-suffix=\"}\" data-mention-label=\"userName\" data-mention-key=\"userName\" data-mention-trigger=\"$\">$userName</span></strong>," +
+"        </p>" +
+"        <p class=\"p-intro\">" +
+"          Here's your latest performance summary with key metrics and insights." +
+"        </p>" +
+
+"        <h2 class=\"h2-title\">Report Summary</h2>" +
+
+"        <table class=\"table-metrics\" cellpadding=\"0\" cellspacing=\"0\">" +
+"          <tr>" +
+"            <th class=\"th-metric\">Metric</th>" +
+"            <th class=\"th-metric\">Count</th>" +
+"          </tr>" +
+"          <tr><td class=\"td-metric\">Total Users Processed</td><td class=\"td-metric\">1,247</td></tr>" +
+"          <tr><td class=\"td-metric\">Successfully Synced</td><td class=\"td-metric\">1,198</td></tr>" +
+"          <tr><td class=\"td-metric\">Failed Syncs</td><td class=\"td-metric\">12</td></tr>" +
+"          <tr><td class=\"td-metric\">Skipped (No Changes)</td><td class=\"td-metric\">37</td></tr>" +
+"          <tr><td class=\"td-metric\">New Users Created</td><td class=\"td-metric\">45</td></tr>" +
+"          <tr><td class=\"td-metric\">Users Updated</td><td class=\"td-metric\">1,153</td></tr>" +
+"          <tr><td class=\"td-metric\">Users Deactivated</td><td class=\"td-metric\">8</td></tr>" +
+"          <tr><td class=\"td-metric\">Sync Duration</td><td class=\"td-metric\">12m 34s</td></tr>" +
+"          <tr><td class=\"td-metric\">Last Successful Sync</td><td class=\"td-metric\">2024-12-17 09:30:00</td></tr>" +
+"          <tr><td class=\"td-metric\">Errors Requiring Attention</td><td class=\"td-metric\">3</td></tr>" +
+"        </table>" +
+
+"        <p class=\"p-text\">" +
+"          This report provides a comprehensive overview of your recent activity and performance metrics." +
+"        </p>" +
+"        <p class=\"p-signoff\">Best regards,</p>" +
+"        <p class=\"p-team\">The Analytics Team</p>" +
+"      </td>" +
+"    </tr>" +
+
+"    <tr>" +
+"      <td class=\"td-footer\">Powered by Aquera</td>" +
+"    </tr>" +
+
+"  </table>" +
+"</div>";
+
+
+
+
+  </script>
 </html>

package/demo/variables.css

@@ -895,6 +895,7 @@
   --nile-icon-done-02: done-02;
   --nile-icon-move-right: moveright;
   --nile-icon-move-left: moveleft;
+  --nile-icon-radiodone: radiodone;
 
   /* stroke width */
   --nile-icon-stroke-width-1-3: 1.3;