npm - @aquera/nile-elements - Versions diffs - 0.1.75-beta-1.1 → 0.1.75-beta-2.0 - Mend

@aquera/nile-elements 0.1.75-beta-1.1 → 0.1.75-beta-2.0

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

package/README.md CHANGED Viewed

@@ -79,6 +79,9 @@ 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 0.1.75
+- Nile Code Editor: new property containerWidth added [UIF-969]
 #### Version 0.1.74
 - Technical Changes: Nile Badge, Parts Exposed. [UIF-973]

package/demo/index.html CHANGED Viewed

@@ -1,194 +1,134 @@
 <!DOCTYPE html>
 <html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="variables.css" id="stylesheet" />
+    <script type="module" src="index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
+  </head>
+  <style>
+    .flex-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 30px;
+      padding: 0;
+      margin: 0;
+      border: 1px solid silver;
+      height: 900px;
+    }
+    nile-button {
+      flex: 0 0 auto;
+      height: 38px;
+    }
+  </style>
-<head>
-  <meta charset="utf-8" />
-  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
-  <link rel="stylesheet" href="index.css" />
-  <script type="module" src="index.js"></script>
-</head>
-<style>
-  .demo-container {
-    padding: 30px;
-    max-width: 600px;
-    margin: 0;
-  }
-  .popup-trigger {
-    margin-bottom: 20px;
-  }
-  .code-editor-popup {
-    width: 400px;
-    height: 400px;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-  }
-</style>
+  <body>
+    <nile-select
+      placeholder="Please select one option"
+      multiple
+      searchEnabled
+      disableLocalSearch
+    >
+    </nile-select>
-<body>
-    <div class="demo-container">
-        <h2>Nile Code Editor with Custom Auto Completion</h2>
-        <p>This demo shows a code editor with custom auto completion similar to the image. Try typing:</p>
-        <ul>
-            <li><code>SOURCE.</code> - to see data field suggestions</li>
-            <li><code>TARGET.</code> - to see target field suggestions</li>
-            <li><code>FUNCTIONS.</code> - to see function suggestions</li>
-        </ul>
-        <div class="popup-trigger">
-            <nile-button id="openCodeEditor">Open Code Editor with Auto Completion</nile-button>
-        </div>
-        <nile-popup id="codeEditorPopup" placement="right" strategy="fixed" distance="20" flip="true" shift="true">
-            <div slot="anchor"></div>
-            <div class="code-editor-popup">
-                <h3>Code Editor</h3>
-                <nile-code-editor
-                    language="javascript"
-                    multiline="true"
-                    lineNumbers="true"
-                    containerWidth="true"
-                    placeholder="Type 'SOURCE.' to see auto completion suggestions..."
-                    value="// Custom Auto Completion Demo
-// Type 'SOURCE.' to see data field suggestions
-// Type 'TARGET.' to see target field suggestions
-// Type 'FUNCTIONS.' to see function suggestions
+    <script type="module">
+      import '@aquera/nile-elements';
-// Example usage:
-// SOURCE.dfep_1710741356583_String_BRA_Employee_ID
-// TARGET.employee_id
-// FUNCTIONS.CONCAT">
-                </nile-code-editor>
-                <div style="margin-top: 15px; text-align: right;">
-                    <nile-button variant="secondary" id="closeCodeEditor">Close</nile-button>
-                </div>
-            </div>
-        </nile-popup>
-    </div>
+      // --- Define series arrays ---
+      const aSeries = [
+        { name: 'A1', value: 'A1' },
+        { name: 'A2', value: 'A2' },
+        { name: 'A3', value: 'A3' },
+        { name: 'A4', value: 'A4' },
+        { name: 'A5', value: 'A5' },
+        { name: 'A6', value: 'A6' },
+        { name: 'A7', value: 'A7' },
+        { name: 'A8', value: 'A8' },
+      ];
-    <script>
-        const openButton = document.getElementById('openCodeEditor');
-        const closeButton = document.getElementById('closeCodeEditor');
-        const popup = document.getElementById('codeEditorPopup');
-        const codeEditor = document.querySelector('nile-code-editor');
-        // Custom auto completion data similar to the image
-        const customAutoCompletions = {
-            SOURCE: {
-                'dfep_159919315192_String_BRA_Father_s_Name_EffectiveStartDate': 'Father Name Effective Start Date',
-                'dfep_170956526734_String_BRA_Business_Title': 'Business Title',
-                'dfep_170956526734_String_BRA_Business_Title_EffectiveStartDate': 'Business Title Effective Start Date',
-                'dfep_1710741356582_PickList_Compensation_Plan_Eligibility': 'Compensation Plan Eligibility',
-                'dfep_1710741356583_String_BRA_Employee_ID': 'Employee ID',
-                'dfep_1710741356584_String_BRA_First_Name': 'First Name',
-                'dfep_1710741356585_String_BRA_Last_Name': 'Last Name',
-                'dfep_1710741356586_String_BRA_Email_Address': 'Email Address',
-                'dfep_1710741356587_String_BRA_Phone_Number': 'Phone Number',
-                'dfep_1710741356588_String_BRA_Department': 'Department',
-                'dfep_1710741356589_String_BRA_Manager_Name': 'Manager Name',
-                'dfep_1710741356590_String_BRA_Location': 'Location',
-                'dfep_1710741356591_String_BRA_Job_Code': 'Job Code',
-                'dfep_1710741356592_String_BRA_Salary': 'Salary',
-                'dfep_1710741356593_String_BRA_Hire_Date': 'Hire Date',
-                'dfep_1710741356594_String_BRA_Termination_Date': 'Termination Date'
-            },
-            TARGET: {
-                'employee_id': 'Employee ID',
-                'first_name': 'First Name',
-                'last_name': 'Last Name',
-                'email': 'Email Address',
-                'phone': 'Phone Number',
-                'department': 'Department',
-                'manager': 'Manager Name',
-                'location': 'Location',
-                'job_title': 'Job Title',
-                'salary': 'Salary',
-                'hire_date': 'Hire Date',
-                'status': 'Employment Status'
-            },
-            FUNCTIONS: {
-                'CONCAT': 'Concatenate strings',
-                'UPPER': 'Convert to uppercase',
-                'LOWER': 'Convert to lowercase',
-                'TRIM': 'Remove whitespace',
-                'LENGTH': 'Get string length',
-                'SUBSTRING': 'Extract substring',
-                'REPLACE': 'Replace text',
-                'FORMAT_DATE': 'Format date',
-                'PARSE_DATE': 'Parse date string',
-                'IS_NULL': 'Check if null',
-                'IS_EMPTY': 'Check if empty',
-                'ROUND': 'Round number',
-                'FLOOR': 'Floor number',
-                'CEIL': 'Ceiling number'
-            }
-        };
+      const bSeries = [
+        { name: 'B1', value: 'B1' },
+        { name: 'B2', value: 'B2' },
+        { name: 'B3', value: 'B3' },
+        { name: 'B4', value: 'B4' },
+        { name: 'B5', value: 'B5' },
+        { name: 'B6', value: 'B6' },
+        { name: 'B7', value: 'B7' },
+        { name: 'B8', value: 'B8' },
+      ];
-        // Custom completion paths for direct access
-        const customCompletionsPaths = [
-            'SOURCE.dfep_159919315192_String_BRA_Father_s_Name_EffectiveStartDate',
-            'SOURCE.dfep_170956526734_String_BRA_Business_Title',
-            'SOURCE.dfep_170956526734_String_BRA_Business_Title_EffectiveStartDate',
-            'SOURCE.dfep_1710741356582_PickList_Compensation_Plan_Eligibility',
-            'SOURCE.dfep_1710741356583_String_BRA_Employee_ID',
-            'SOURCE.dfep_1710741356584_String_BRA_First_Name',
-            'SOURCE.dfep_1710741356585_String_BRA_Last_Name',
-            'SOURCE.dfep_1710741356586_String_BRA_Email_Address',
-            'SOURCE.dfep_1710741356587_String_BRA_Phone_Number',
-            'SOURCE.dfep_1710741356588_String_BRA_Department',
-            'SOURCE.dfep_1710741356589_String_BRA_Manager_Name',
-            'SOURCE.dfep_1710741356590_String_BRA_Location',
-            'SOURCE.dfep_1710741356591_String_BRA_Job_Code',
-            'SOURCE.dfep_1710741356592_String_BRA_Salary',
-            'SOURCE.dfep_1710741356593_String_BRA_Hire_Date',
-            'SOURCE.dfep_1710741356594_String_BRA_Termination_Date',
-            'TARGET.employee_id',
-            'TARGET.first_name',
-            'TARGET.last_name',
-            'TARGET.email',
-            'TARGET.phone',
-            'TARGET.department',
-            'TARGET.manager',
-            'TARGET.location',
-            'TARGET.job_title',
-            'TARGET.salary',
-            'TARGET.hire_date',
-            'TARGET.status'
-        ];
+      const cSeries = [
+        { name: 'C1', value: 'C1' },
+        { name: 'C2', value: 'C2' },
+        { name: 'C3', value: 'C3' },
+        { name: 'C4', value: 'C4' },
+        { name: 'C5', value: 'C5' },
+        { name: 'C6', value: 'C6' },
+        { name: 'C7', value: 'C7' },
+        { name: 'C8', value: 'C8' },
+      ];
-        // Set up the code editor with custom auto completion
-        if (codeEditor) {
-            codeEditor.customAutoCompletions = customAutoCompletions;
-            codeEditor.customCompletionsPaths = customCompletionsPaths;
-            codeEditor.allowVariableInCustomSuggestion = true;
-        }
-        openButton.addEventListener('click', () => {
-            popup.active = true;
+      const dSeries = [
+        { name: 'D1', value: 'D1' },
+        { name: 'D2', value: 'D2' },
+        { name: 'D3', value: 'D3' },
+        { name: 'D4', value: 'D4' },
+        { name: 'D5', value: 'D5' },
+        { name: 'D6', value: 'D6' },
+        { name: 'D7', value: 'D7' },
+        { name: 'D8', value: 'D8' },
+      ];
+      const allSeries = [...aSeries, ...bSeries, ...cSeries, ...dSeries];
+      // Track selected options
+      let selectedArray = [];
+      let selectedArrayValues = [];
+      let allOptions = []; // Store all created options
+      window.onload = () => {
+        const select = document.querySelector('nile-select');
+        // Load all options initially
+        renderAllOptions(select);
+        // Handle selection changes
+        select.addEventListener('nile-change', e => {
+          const values = e.detail.value;
+          selectedArray = allSeries.filter(item => values.includes(item.value));
+          selectedArrayValues = selectedArray.map(item => item.value);
+          // select.remoteValues = selectedArrayValues;
+        });
+        // Handle search across ALL series
+        select.addEventListener('nile-search', e => {
+          const query = e.detail.query.toLowerCase();
+          // Show/hide options based on search query
+          filterOptions(query);
         });
-        closeButton.addEventListener('click', () => {
-            popup.active = false;
+      };
+      // Create all options initially
+      function renderAllOptions(select) {
+        allSeries.forEach(item => {
+          const option = document.createElement('nile-option');
+          option.value = item.value;
+          option.textContent = item.name;
+          select.appendChild(option);
+          allOptions.push(option);
         });
-        // Close popup when clicking outside
-        document.addEventListener('click', (event) => {
-            if (!popup.contains(event.target) && !openButton.contains(event.target)) {
-                popup.active = false;
-            }
+        select.values = selectedArrayValues;
+      }
+      // Filter options by showing/hiding them
+      function filterOptions(query) {
+        allOptions.forEach(option => {
+          const value = option.value || '';
+          const shouldShow = value.toLowerCase().includes(query);
+          option.hidden = !shouldShow;
         });
+      }
     </script>
-    <!-- Version test -->
-    <script>
-        // Test version access
-        console.log('Nile Elements Version:', window.nileElementsVersion);
-        console.log('Nile Version:', window.nileVersion);
-    </script>
-</body>
+  </body>
 </html>