npm - @aquera/nile-elements - Versions diffs - 0.1.67-beta-1.6 → 0.1.67-beta-1.8 - Mend

@aquera/nile-elements 0.1.67-beta-1.6 → 0.1.67-beta-1.8

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

package/demo/index.html CHANGED Viewed

@@ -3,271 +3,176 @@
 <head>
   <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
+  <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 {
+  /* .flex-container {
     display: flex;
-    flex-direction: column;
-    max-width: 1000px;
+    flex-wrap: wrap;
     gap: 30px;
-    padding: 10px;
-    margin: 10px;
+    padding: 0;
+    margin: 0;
+    border: 1px solid silver;
     height: 900px;
-  }
+  } */
+  /* nile-button {
+    flex: 0 0 auto;
+    height: 38px;
+  } */
+  /* div {
+    background-color: #e6e9eba8;
+    font-weight: 700;
+    color: #000;
+    padding: 9px 12px;
+    font-family: colfax-medium;
+    font-size: 16px;
+  } */
-  nile-rte-mentions .mention {
-  background: yellow !important;
-}
+  body {
+    font-family: colfax-regular;
+    margin: 100px;
+  }
-h2{
-  color:red;
-}
+  nile-select::part(listbox) {
+    max-height: 400px;
+  }
 </style>
 <body>
-  <div class="flex-container">
-    <nile-rich-text-editor>
-     <!-- <nile-rte-mentions mentioncolors='{
-      "@": "#eef2ff",
-      "#": "#fff3cd",
-      ":": "#e0f2fe"
-    }'></nile-rte-mentions> -->
-    <nile-rte-mentions>
-      <nile-rte-mentions-item
-        mentionscharacter="@"
-        mentionsprefix="{{"
-        mentionssuffix="}}"
-        mentionsdata='[
-          {"key":"abc","label":"ABC"},
-          {"key":"pqr","label":"PQR"}
-        ]'
-      ></nile-rte-mentions-item>
-      <nile-rte-mentions-item
-      mentionscharacter="#"
-      mentionsdata='[
-        {"key":"alpha","label":"Alpha"},
-        {"key":"bravo","label":"Bravo"},
-        {"key":"charlie","label":"Charlie"},
-        {"key":"delta","label":"Delta"},
-        {"key":"echo","label":"Echo"},
-        {"key":"foxtrot","label":"Foxtrot"},
-        {"key":"golf","label":"Golf"},
-        {"key":"hotel","label":"Hotel"},
-        {"key":"india","label":"India"},
-        {"key":"juliet","label":"Juliet"},
-        {"key":"kilo","label":"Kilo"},
-        {"key":"lima","label":"Lima"},
-        {"key":"mike","label":"Mike"},
-        {"key":"november","label":"November"},
-        {"key":"oscar","label":"Oscar"},
-        {"key":"papa","label":"Papa"},
-        {"key":"quebec","label":"Quebec"},
-        {"key":"romeo","label":"Romeo"},
-        {"key":"sierra","label":"Sierra"},
-        {"key":"tango","label":"Tango"},
-        {"key":"uniform","label":"Uniform"},
-        {"key":"victor","label":"Victor"},
-        {"key":"whiskey","label":"Whiskey"},
-        {"key":"xray","label":"X-Ray"},
-        {"key":"yankee","label":"Yankee"},
-        {"key":"zulu","label":"Zulu"},
-        {"key":"apple","label":"Apple"},
-        {"key":"banana","label":"Banana"},
-        {"key":"cherry","label":"Cherry"},
-        {"key":"date","label":"Date"},
-        {"key":"elderberry","label":"Elderberry"},
-        {"key":"fig","label":"Fig"},
-        {"key":"grape","label":"Grape"},
-        {"key":"honeydew","label":"Honeydew"},
-        {"key":"ice","label":"Ice"},
-        {"key":"jackfruit","label":"Jackfruit"},
-        {"key":"kiwi","label":"Kiwi"},
-        {"key":"lemon","label":"Lemon"},
-        {"key":"mango","label":"Mango"},
-        {"key":"nectarine","label":"Nectarine"},
-        {"key":"orange","label":"Orange"},
-        {"key":"papaya","label":"Papaya"},
-        {"key":"quince","label":"Quince"},
-        {"key":"raspberry","label":"Raspberry"},
-        {"key":"strawberry","label":"Strawberry"},
-        {"key":"tomato","label":"Tomato"},
-        {"key":"ugli","label":"Ugli"},
-        {"key":"vanilla","label":"Vanilla"},
-        {"key":"watermelon","label":"Watermelon"},
-        {"key":"xigua","label":"Xigua"},
-        {"key":"yam","label":"Yam"},
-        {"key":"zucchini","label":"Zucchini"},
-        {"key":"red","label":"Red"},
-        {"key":"orange-color","label":"Orange"},
-        {"key":"yellow","label":"Yellow"},
-        {"key":"green","label":"Green"},
-        {"key":"blue","label":"Blue"},
-        {"key":"indigo","label":"Indigo"},
-        {"key":"violet","label":"Violet"},
-        {"key":"black","label":"Black"},
-        {"key":"white","label":"White"},
-        {"key":"gray","label":"Gray"},
-        {"key":"silver","label":"Silver"},
-        {"key":"gold","label":"Gold"},
-        {"key":"cyan","label":"Cyan"},
-        {"key":"magenta","label":"Magenta"},
-        {"key":"pink","label":"Pink"},
-        {"key":"brown","label":"Brown"},
-        {"key":"beige","label":"Beige"},
-        {"key":"maroon","label":"Maroon"},
-        {"key":"olive","label":"Olive"},
-        {"key":"teal","label":"Teal"},
-        {"key":"navy","label":"Navy"},
-        {"key":"lime","label":"Lime"},
-        {"key":"peach","label":"Peach"},
-        {"key":"plum","label":"Plum"},
-        {"key":"tan","label":"Tan"},
-        {"key":"salmon","label":"Salmon"},
-        {"key":"coral","label":"Coral"},
-        {"key":"crimson","label":"Crimson"},
-        {"key":"amber","label":"Amber"},
-        {"key":"mint","label":"Mint"},
-        {"key":"turquoise","label":"Turquoise"},
-        {"key":"lavender","label":"Lavender"},
-        {"key":"orchid","label":"Orchid"},
-        {"key":"periwinkle","label":"Periwinkle"},
-        {"key":"chartreuse","label":"Chartreuse"},
-        {"key":"emerald","label":"Emerald"},
-        {"key":"jade","label":"Jade"},
-        {"key":"ruby","label":"Ruby"},
-        {"key":"sapphire","label":"Sapphire"},
-        {"key":"topaz","label":"Topaz"},
-        {"key":"amethyst","label":"Amethyst"},
-        {"key":"opal","label":"Opal"},
-        {"key":"onyx","label":"Onyx"},
-        {"key":"quartz","label":"Quartz"},
-        {"key":"diamond","label":"Diamond"},
-        {"key":"pearl","label":"Pearl"},
-        {"key":"garnet","label":"Garnet"},
-        {"key":"spinach","label":"Spinach"}
-      ]'
-    ></nile-rte-mentions-item>
-    </nile-rte-mentions>
-      <nile-rte-toolbar>
-        <nile-rte-select
-          type="heading"
-          options='[
-            {"value":"p","label":"Normal"},
-            {"value":"h1","label":"Heading 1"},
-            {"value":"h2","label":"Heading 2"},
-            {"value":"h3","label":"Heading 3"},
-            {"value":"h4","label":"Heading 4"},
-            {"value":"h5","label":"Heading 5"},
-            {"value":"h6","label":"Heading 6"}
-          ]'></nile-rte-select>
-        <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-color type="foreColor" label="Text" value="#000000"></nile-rte-color>
-        <nile-rte-color mode="background" label="Highlight" value="#ffffff"></nile-rte-color>
-        <!-- <nile-rte-select
-  type="font"
-  label="Font"
-  options='[
-  {"value":"colfax-regular","label":"Colfax Regular"},
-    {"value":"Inter","label":"Inter"},
-    {"value":"Georgia","label":"Georgia"},
-    {"value":"Times New Roman","label":"Times New Roman"},
-    {"value":"Courier New","label":"Courier New"},
-    {"value":"Monaco","label":"Monaco"}
-  ]'>
-</nile-rte-select> -->
+  <nile-select placeholder="Select..." class="virtual-scroll-string" searchEnabled multiple>
+    <!-- <nile-option-group name="date">Date Formats</nile-option-group>
+    <nile-option groupName="date" value="1 DD/MM/YYYY">1DD/MM/YYYY</nile-option>
+    <nile-option groupName="date" value="MM-DD-YYYY">MM-DD-YYYY</nile-option>
+    <nile-option groupName="date" value="YYYY/MM/DD">YYYY/MM/DD</nile-option>
-        <nile-rte-select
-          type="align"
-          options='[
-          {"value":"left" },
-          {"value":"center" },
-          {"value":"right" },
-          {"value":"justify" }
-        ]'
-          label="Align"></nile-rte-select>
-        <!-- <nile-rte-toolbar-item name="ul"  ></nile-rte-toolbar-item>
-        <nile-rte-toolbar-item name="ol"  ></nile-rte-toolbar-item>   -->
-        <nile-rte-divider></nile-rte-divider>
-        <nile-rte-toolbar-item name="clear"  ></nile-rte-toolbar-item>
-        <!-- <nile-rte-toolbar-item name="link"   ></nile-rte-toolbar-item>  -->
-      </nile-rte-toolbar>
-      <!-- Optional live preview -->
-      <nile-rte-preview></nile-rte-preview>
-    </nile-rich-text-editor>
+    <nile-option-group name="currency">
+      <span>Currency Formats</span>
+    </nile-option-group>
+    <nile-option groupName="currency" value="123456 dd">$1,234.56 dd</nile-option>
+    <nile-option groupName="currency" value="123456">€1.234,56</nile-option>
+    <nile-option groupName="currency" value="12345678">₹1,23,456.78</nile-option>
+ </nile-select> -->
-  </div>
+ <!-- <nile-icon name="user"></nile-icon> -->
-  <script>
+ <script>
+  const htmlLabelOptions = [
+    {
+      header: "Fruits",
+      items: [
+        { value: "xyz", label: "Apple" },
+        { value: "2", label: "Banana" },
+        { value: "3", label: "Cherry" },
+        { value: "4", label: "Date" },
+        { value: "5", label: "Elderberry" },
+        { value: "6", label: "Fig" },
+        { value: "7", label: "Grape" }
+      ]
+    },
+    {
+      header: "Vegetables",
+      items: [
+        { value: "8", label: "Carrot" },
+        { value: "9", label: "Broccoli" },
+        { value: "10", label: "Spinach" },
+        { value: "11", label: "Tomato" }
+      ]
+    },
+    {
+      header: "Animals",
+      items: [
+        { value: "12", label: "Dog" },
+        { value: "13", label: "Cat" },
+        { value: "14", label: "Bird" },
+        { value: "15", label: "Fish" }
+      ]
+    },
+    {
+      header: "Colors",
+      items: [
+        { value: "16", label: "Red" },
+        { value: "17", label: "Green" },
+        { value: "18", label: "Blue" },
+        { value: "19", label: "Yellow" }
+      ]
+    }
+  ];
-document.addEventListener('content-changed', e => {
-      console.log('Received from anywhere', e.detail.content);
-    });
-  </script>
-  <!-- <script type="module">
+  const select = document.querySelector('nile-select');
+  const optionData = {
+    prefix: {
+      // icon: {
+      //   name: "action",
+      //   size: "16",
+      //   color: "red"
+      // },
+      image: {
+        src: "https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg",
+        height: "200",
+        width: "200"
+      },
+      // prefixText: "hello"
+    },
+    suffix: {
+      // icon: {
+      //   name: "user",
+      //   size: "16",
+      //   color: "red"
+      // },
+      image: {
+        src: "https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg",
+        height: "400",
+        width: "400"
+      },
+      // suffixText: ""
+    }
+  }
-     const rte = document.querySelector('nile-rich-text-editor');
-rte.value = '<h2>Welcome</h2><p>This came from JS.</p>';
+  htmlLabelOptions.forEach(element => {
+    const optionGroup = document.createElement('nile-option-group');
+    optionGroup.setAttribute('name', element.header);
+    optionGroup.data = optionData;
+    select.appendChild(optionGroup);
-    // Optional: listen to editor content changes (keep if you already use it)
-    document.addEventListener('content-changed', e => {
-      console.log('Received from anywhere', e.detail.content);
+    element.items.forEach(item => {
+      const option = document.createElement('nile-option');
+      option.setAttribute('value', item.value);
+      option.setAttribute('groupName', element.header);
+      option.innerHTML = item.label;
+      select.appendChild(option);
     });
+  })
-    window.addEventListener('DOMContentLoaded', async () => {
-      // Wait for the editor custom element to be ready
-      await customElements.whenDefined('nile-rich-text-editor');
-      const editor = document.querySelector('nile-rich-text-editor');
-      if (!editor) {
-        console.error('nile-rich-text-editor not found');
-        return;
-      }
-      // Ensure there is a <nile-rte-mentions> inside the editor
-      let mentions = editor.querySelector('nile-rte-mentions');
-      if (!mentions) {
-        mentions = document.createElement('nile-rte-mentions');
-        // Put it as the first child of the editor so it's available early
-        editor.prepend(mentions);
-      }
-      const BIG_AT = Array.from({ length: 1000 }, (_, i) => ({
-        key:   `user-${i + 1}`,
-        label: `User ${i + 1}`
-      }));
-      mentions.setExternalConfig({ '@': BIG_AT });
-      mentions.mentionColors = { '@': '#eef2ff' };
-      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
-    });
-  </script> -->
+  // const data = [];
+  // htmlLabelOptions.forEach(group => {
+  //   data.push({
+  //     value: group.header,
+  //     label: `${group.header}`,
+  //     group: {
+  //       header: group.header,
+  //     }
+  //   });
+  //   if(group.names) {
+  //     group.names.forEach(name => {
+  //       data.push({
+  //         value: name,
+  //         label: `${name}`,
+  //         group:{
+  //           groupName: group.header
+  //         }
+  //       });
+  //     });
+  //   }
+  // });
+  // const virtualSelect = document.querySelector('nile-select.virtual-scroll-string');
+  // virtualSelect.data = data;
+</script>
 </body>
-</html>
+</html>

package/dist/aquera-nile-elements-0.1.57-beta-2.0.tgz ADDED Viewed

Binary file