techvariable · abhishekctv · Apr 5, 2023 · Apr 3, 2023 · Apr 3, 2023 · Apr 4, 2023
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -23,6 +23,12 @@ export namespace Components {
         "backDropHandler": any;
         "showBackDrop": boolean;
     }
+    interface BasicDropdown {
+        "label": string;
+        "optionHandler": any;
+        "propOptions": any;
+        "propSelectedOptionLabel": string;
+    }
     interface CheckBox {
         "name": string;
     }
@@ -37,6 +43,11 @@ export namespace Components {
         "formatter": Function;
         "onClickRun": Function;
     }
+    interface CustomDropDown {
+        "dropDownValue": string;
+        "optionListProp": { label: string; selected: boolean; }[];
+        "selectHandler": any;
+    }
     interface DataTable {
         "columns": {
     id: number | string;
@@ -126,6 +137,8 @@ export namespace Components {
         "iconPosition": 'right' | 'left';
         "type": 'outlined' | 'contained';
     }
+    interface InsertNodeModal {
+    }
     interface InviteComponent {
         "apiurl": string;
         "email": string;
@@ -312,6 +325,12 @@ declare global {
         prototype: HTMLBackdropFilterElement;
         new (): HTMLBackdropFilterElement;
     };
+    interface HTMLBasicDropdownElement extends Components.BasicDropdown, HTMLStencilElement {
+    }
+    var HTMLBasicDropdownElement: {
+        prototype: HTMLBasicDropdownElement;
+        new (): HTMLBasicDropdownElement;
+    };
     interface HTMLCheckBoxElement extends Components.CheckBox, HTMLStencilElement {
     }
     var HTMLCheckBoxElement: {
@@ -330,6 +349,12 @@ declare global {
         prototype: HTMLCodeEditorElement;
         new (): HTMLCodeEditorElement;
     };
+    interface HTMLCustomDropDownElement extends Components.CustomDropDown, HTMLStencilElement {
+    }
+    var HTMLCustomDropDownElement: {
+        prototype: HTMLCustomDropDownElement;
+        new (): HTMLCustomDropDownElement;
+    };
     interface HTMLDataTableElement extends Components.DataTable, HTMLStencilElement {
     }
     var HTMLDataTableElement: {
@@ -402,6 +427,12 @@ declare global {
         prototype: HTMLIconButtonElement;
         new (): HTMLIconButtonElement;
     };
+    interface HTMLInsertNodeModalElement extends Components.InsertNodeModal, HTMLStencilElement {
+    }
+    var HTMLInsertNodeModalElement: {
+        prototype: HTMLInsertNodeModalElement;
+        new (): HTMLInsertNodeModalElement;
+    };
     interface HTMLInviteComponentElement extends Components.InviteComponent, HTMLStencilElement {
     }
     var HTMLInviteComponentElement: {
@@ -598,9 +629,11 @@ declare global {
         "add-role": HTMLAddRoleElement;
         "all-users": HTMLAllUsersElement;
         "backdrop-filter": HTMLBackdropFilterElement;
+        "basic-dropdown": HTMLBasicDropdownElement;
         "check-box": HTMLCheckBoxElement;
         "chips-list": HTMLChipsListElement;
         "code-editor": HTMLCodeEditorElement;
+        "custom-drop-down": HTMLCustomDropDownElement;
         "data-table": HTMLDataTableElement;
         "data-table-updated": HTMLDataTableUpdatedElement;
         "dialog-component": HTMLDialogComponentElement;
@@ -613,6 +646,7 @@ declare global {
         "editor-res": HTMLEditorResElement;
         "fluid-container": HTMLFluidContainerElement;
         "icon-button": HTMLIconButtonElement;
+        "insert-node-modal": HTMLInsertNodeModalElement;
         "invite-component": HTMLInviteComponentElement;
         "json-response-viewer": HTMLJsonResponseViewerElement;
         "last-logs": HTMLLastLogsElement;
@@ -665,6 +699,12 @@ declare namespace LocalJSX {
         "backDropHandler"?: any;
         "showBackDrop"?: boolean;
     }
+    interface BasicDropdown {
+        "label"?: string;
+        "optionHandler"?: any;
+        "propOptions"?: any;
+        "propSelectedOptionLabel"?: string;
+    }
     interface CheckBox {
         "name"?: string;
     }
@@ -679,6 +719,11 @@ declare namespace LocalJSX {
         "formatter"?: Function;
         "onClickRun"?: Function;
     }
+    interface CustomDropDown {
+        "dropDownValue"?: string;
+        "optionListProp"?: { label: string; selected: boolean; }[];
+        "selectHandler"?: any;
+    }
     interface DataTable {
         "columns"?: {
     id: number | string;
@@ -768,6 +813,8 @@ declare namespace LocalJSX {
         "iconPosition"?: 'right' | 'left';
         "type"?: 'outlined' | 'contained';
     }
+    interface InsertNodeModal {
+    }
     interface InviteComponent {
         "apiurl"?: string;
         "email"?: string;
@@ -938,9 +985,11 @@ declare namespace LocalJSX {
         "add-role": AddRole;
         "all-users": AllUsers;
         "backdrop-filter": BackdropFilter;
+        "basic-dropdown": BasicDropdown;
         "check-box": CheckBox;
         "chips-list": ChipsList;
         "code-editor": CodeEditor;
+        "custom-drop-down": CustomDropDown;
         "data-table": DataTable;
         "data-table-updated": DataTableUpdated;
         "dialog-component": DialogComponent;
@@ -953,6 +1002,7 @@ declare namespace LocalJSX {
         "editor-res": EditorRes;
         "fluid-container": FluidContainer;
         "icon-button": IconButton;
+        "insert-node-modal": InsertNodeModal;
         "invite-component": InviteComponent;
         "json-response-viewer": JsonResponseViewer;
         "last-logs": LastLogs;
@@ -994,9 +1044,11 @@ declare module "@stencil/core" {
             "add-role": LocalJSX.AddRole & JSXBase.HTMLAttributes<HTMLAddRoleElement>;
             "all-users": LocalJSX.AllUsers & JSXBase.HTMLAttributes<HTMLAllUsersElement>;
             "backdrop-filter": LocalJSX.BackdropFilter & JSXBase.HTMLAttributes<HTMLBackdropFilterElement>;
+            "basic-dropdown": LocalJSX.BasicDropdown & JSXBase.HTMLAttributes<HTMLBasicDropdownElement>;
             "check-box": LocalJSX.CheckBox & JSXBase.HTMLAttributes<HTMLCheckBoxElement>;
             "chips-list": LocalJSX.ChipsList & JSXBase.HTMLAttributes<HTMLChipsListElement>;
             "code-editor": LocalJSX.CodeEditor & JSXBase.HTMLAttributes<HTMLCodeEditorElement>;
+            "custom-drop-down": LocalJSX.CustomDropDown & JSXBase.HTMLAttributes<HTMLCustomDropDownElement>;
             "data-table": LocalJSX.DataTable & JSXBase.HTMLAttributes<HTMLDataTableElement>;
             "data-table-updated": LocalJSX.DataTableUpdated & JSXBase.HTMLAttributes<HTMLDataTableUpdatedElement>;
             "dialog-component": LocalJSX.DialogComponent & JSXBase.HTMLAttributes<HTMLDialogComponentElement>;
@@ -1009,6 +1061,7 @@ declare module "@stencil/core" {
             "editor-res": LocalJSX.EditorRes & JSXBase.HTMLAttributes<HTMLEditorResElement>;
             "fluid-container": LocalJSX.FluidContainer & JSXBase.HTMLAttributes<HTMLFluidContainerElement>;
             "icon-button": LocalJSX.IconButton & JSXBase.HTMLAttributes<HTMLIconButtonElement>;
+            "insert-node-modal": LocalJSX.InsertNodeModal & JSXBase.HTMLAttributes<HTMLInsertNodeModalElement>;
             "invite-component": LocalJSX.InviteComponent & JSXBase.HTMLAttributes<HTMLInviteComponentElement>;
             "json-response-viewer": LocalJSX.JsonResponseViewer & JSXBase.HTMLAttributes<HTMLJsonResponseViewerElement>;
             "last-logs": LocalJSX.LastLogs & JSXBase.HTMLAttributes<HTMLLastLogsElement>;

diff --git a/src/components/common/basic-dropdown/basic-dropdown.css b/src/components/common/basic-dropdown/basic-dropdown.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/common/basic-dropdown/basic-dropdown.tsx b/src/components/common/basic-dropdown/basic-dropdown.tsx
@@ -0,0 +1,99 @@
+import { Component, Host, h, Prop, State, Watch } from '@stencil/core';
+
+const visibilityClasses = {
+  true: '',
+  false: 'hidden',
+};
+
+@Component({
+  tag: 'basic-dropdown',
+  styleUrl: 'basic-dropdown.css',
+  scoped: true,
+})
+export class BasicDropdown {
+  @Prop() propOptions: any;
+  @Prop() propSelectedOptionLabel: string;
+  @Prop() label: string = 'DropDown';
+  @Prop() optionHandler: any;
+  @State() options: any;
+  @State() toggle: boolean = false;
+  @State() selectedOption: string = '';
+  @Watch('propSelectedOptionLabel')
+  validateName(newValue: string, oldValue: string) {
+    if (newValue !== oldValue) {
+      this.options = [...this.options].map(option => {
+        if (option.label === newValue) {
+          return {
+            label: newValue,
+            selected: true,
+          };
+        }
+        return {
+          label: option.label,
+          selected: false,
+        };
+      });
+      this.selectedOption = this.propSelectedOptionLabel;
+      this.optionHandler(this.selectedOption);
+    }
+  }
+
+  componentWillLoad() {
+    this.selectedOption = this.propSelectedOptionLabel;
+    this.options = this.propOptions;
+  }
+
+  toggleDropDown() {
+    this.toggle = !this.toggle;
+  }
+
+  selectHandler(selectedLabel) {
+    this.selectedOption = selectedLabel;
+    this.options = [...this.options].map(option => {
+      if (option.label === selectedLabel) {
+        return {
+          label: selectedLabel,
+          selected: true,
+        };
+      }
+      return {
+        label: option.label,
+        selected: false,
+      };
+    });
+    this.optionHandler(selectedLabel);
+    this.toggleDropDown();
+  }
+
+  render() {
+    return (
+      <Host>
+        <button
+          onClick={() => this.toggleDropDown()}
+          id="dropdownDefaultButton"
+          data-dropdown-toggle="dropdown"
+          class="justify-between bg-gray-100 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-2 py-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 w-full"
+          type="button"
+        >
+          {this.label} {this.selectedOption}{' '}
+          <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </button>
+        <div id="dropdown" class={`absolute my-2 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-40 dark:bg-gray-700 ${visibilityClasses[this.toggle.toString()]}`}>
+          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+            {this.options.map(option => {
+              return (
+                <li onClick={() => this.selectHandler(option.label)}>
+                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                    {option.label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/common/basic-dropdown/readme.md b/src/components/common/basic-dropdown/readme.md
@@ -0,0 +1,33 @@
+# basic-dropdown
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                  | Attribute                    | Description | Type     | Default      |
+| ------------------------- | ---------------------------- | ----------- | -------- | ------------ |
+| `label`                   | `label`                      |             | `string` | `'DropDown'` |
+| `optionHandler`           | `option-handler`             |             | `any`    | `undefined`  |
+| `propOptions`             | `prop-options`               |             | `any`    | `undefined`  |
+| `propSelectedOptionLabel` | `prop-selected-option-label` |             | `string` | `undefined`  |
+
+
+## Dependencies
+
+### Used by
+
+ - [insert-node-modal](../../editorPage/insert-node-modal)
+
+### Graph
+```mermaid
+graph TD;
+  insert-node-modal --> basic-dropdown
+  style basic-dropdown fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/common/custom-drop-down/custom-drop-down.css b/src/components/common/custom-drop-down/custom-drop-down.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}