Generic Button and Improved UI

src/components.d.ts

@@ -140,6 +140,32 @@ export namespace Components {
         "iconPosition": 'right' | 'left';
         "type": 'outlined' | 'contained';
     }
+    interface IconButtonBasic {
+        "clickHandler": any;
+        "color": 'primary' | 'secondary' | 'tertiary';
+        "customClass": string;
+        "disabled": boolean;
+        "icon": any;
+        "loading": boolean;
+        "size": 'lg' | 'md' | 'sm';
+        "title": string | null;
+        "type": 'button' | 'submit';
+        "width": 'full' | 'auto';
+    }
+    interface IconLabelSubmitButton {
+        "clickHandler": any;
+        "color": 'primary' | 'secondary' | 'tertiary';
+        "customClass": string;
+        "disabled": boolean;
+        "endIcon": any;
+        "loading": boolean;
+        "size": 'lg' | 'md' | 'sm';
+        "startIcon": any;
+        "title": string | null;
+        "type": 'button' | 'submit';
+        "varient": 'contained' | 'outlined' | 'text';
+        "width": 'full' | 'auto';
+    }
     interface InsertNodeModal {
         "fetchNavigators": Function;
     }
@@ -215,6 +241,7 @@ export namespace Components {
     interface PaginationComponent {
         "jumpPageHandler": Function;
         "limit": number;
+        "loading": true | false;
         "nextHandler": Function;
         "offset": number;
         "prevHandler": Function;
@@ -438,6 +465,18 @@ declare global {
         prototype: HTMLIconButtonElement;
         new (): HTMLIconButtonElement;
     };
+    interface HTMLIconButtonBasicElement extends Components.IconButtonBasic, HTMLStencilElement {
+    }
+    var HTMLIconButtonBasicElement: {
+        prototype: HTMLIconButtonBasicElement;
+        new (): HTMLIconButtonBasicElement;
+    };
+    interface HTMLIconLabelSubmitButtonElement extends Components.IconLabelSubmitButton, HTMLStencilElement {
+    }
+    var HTMLIconLabelSubmitButtonElement: {
+        prototype: HTMLIconLabelSubmitButtonElement;
+        new (): HTMLIconLabelSubmitButtonElement;
+    };
     interface HTMLInsertNodeModalElement extends Components.InsertNodeModal, HTMLStencilElement {
     }
     var HTMLInsertNodeModalElement: {
@@ -658,6 +697,8 @@ declare global {
         "editor-res": HTMLEditorResElement;
         "fluid-container": HTMLFluidContainerElement;
         "icon-button": HTMLIconButtonElement;
+        "icon-button-basic": HTMLIconButtonBasicElement;
+        "icon-label-submit-button": HTMLIconLabelSubmitButtonElement;
         "insert-node-modal": HTMLInsertNodeModalElement;
         "invite-component": HTMLInviteComponentElement;
         "json-response-viewer": HTMLJsonResponseViewerElement;
@@ -828,6 +869,32 @@ declare namespace LocalJSX {
         "iconPosition"?: 'right' | 'left';
         "type"?: 'outlined' | 'contained';
     }
+    interface IconButtonBasic {
+        "clickHandler"?: any;
+        "color"?: 'primary' | 'secondary' | 'tertiary';
+        "customClass"?: string;
+        "disabled"?: boolean;
+        "icon"?: any;
+        "loading"?: boolean;
+        "size"?: 'lg' | 'md' | 'sm';
+        "title"?: string | null;
+        "type"?: 'button' | 'submit';
+        "width"?: 'full' | 'auto';
+    }
+    interface IconLabelSubmitButton {
+        "clickHandler"?: any;
+        "color"?: 'primary' | 'secondary' | 'tertiary';
+        "customClass"?: string;
+        "disabled"?: boolean;
+        "endIcon"?: any;
+        "loading"?: boolean;
+        "size"?: 'lg' | 'md' | 'sm';
+        "startIcon"?: any;
+        "title"?: string | null;
+        "type"?: 'button' | 'submit';
+        "varient"?: 'contained' | 'outlined' | 'text';
+        "width"?: 'full' | 'auto';
+    }
     interface InsertNodeModal {
         "fetchNavigators"?: Function;
     }
@@ -903,6 +970,7 @@ declare namespace LocalJSX {
     interface PaginationComponent {
         "jumpPageHandler"?: Function;
         "limit"?: number;
+        "loading"?: true | false;
         "nextHandler"?: Function;
         "offset"?: number;
         "prevHandler"?: Function;
@@ -1020,6 +1088,8 @@ declare namespace LocalJSX {
         "editor-res": EditorRes;
         "fluid-container": FluidContainer;
         "icon-button": IconButton;
+        "icon-button-basic": IconButtonBasic;
+        "icon-label-submit-button": IconLabelSubmitButton;
         "insert-node-modal": InsertNodeModal;
         "invite-component": InviteComponent;
         "json-response-viewer": JsonResponseViewer;
@@ -1080,6 +1150,8 @@ 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>;
+            "icon-button-basic": LocalJSX.IconButtonBasic & JSXBase.HTMLAttributes<HTMLIconButtonBasicElement>;
+            "icon-label-submit-button": LocalJSX.IconLabelSubmitButton & JSXBase.HTMLAttributes<HTMLIconLabelSubmitButtonElement>;
             "insert-node-modal": LocalJSX.InsertNodeModal & JSXBase.HTMLAttributes<HTMLInsertNodeModalElement>;
             "invite-component": LocalJSX.InviteComponent & JSXBase.HTMLAttributes<HTMLInviteComponentElement>;
             "json-response-viewer": LocalJSX.JsonResponseViewer & JSXBase.HTMLAttributes<HTMLJsonResponseViewerElement>;

src/components/common/buttons/icon-button-basic/icon-button-basic.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/components/common/buttons/icon-button-basic/icon-button-basic.tsx

@@ -0,0 +1,63 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'icon-button-basic',
+  styleUrl: 'icon-button-basic.css',
+  scoped: true,
+})
+export class IconButtonBasic {
+  @Prop() customClass = '';
+  @Prop() width: 'full' | 'auto' = 'auto';
+  @Prop() clickHandler: any;
+  @Prop() disabled = false;
+  @Prop() color: 'primary' | 'secondary' | 'tertiary' = 'primary';
+  @Prop() size: 'lg' | 'md' | 'sm' = 'sm';
+  @Prop() loading: boolean = false;
+  @Prop() title: string | null = null;
+  @Prop() type: 'button' | 'submit' = 'button';
+  @Prop() icon: any;
+
+  colorClasses = {
+    primary: 'gray',
+    secondary: 'indigo',
+    tertiary: 'blue',
+  };
+  sizeClasses = {
+    sm: 'py-2 px-4  rounded-md',
+    md: 'py-2 px-4 rounded-md',
+    lg: 'py-3 px-5 rounded-lg',
+  };
+
+  svgSize = {
+    sm: 'h-5 w-5',
+    md: 'h-6 w-6',
+    lg: 'h-7 w-7',
+  };
+
+  render() {
+    return (
+      <button
+        class={`flex border border-transparent ${this.sizeClasses[this.size]}  text-${this.colorClasses[this.color]}-600 hover:text-${
+          this.colorClasses[this.color]
+        }-800 justify-center w-${this.width} ${this.customClass} cursor-pointer disabled:cursor-default disabled:text-${this.colorClasses[this.color]}-400 `}
+        title={this.title}
+        onClick={this.clickHandler}
+        disabled={this.disabled || this.loading}
+        type={this.type}
+      >
+        {!this.loading && this.icon}
+        {this.loading && (
+          <span class="animate-spin ml-2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={this.svgSize[this.size]}>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+              />
+            </svg>
+          </span>
+        )}
+      </button>
+    );
+  }
+}

src/components/common/buttons/icon-button-basic/readme.md

@@ -0,0 +1,47 @@
+# icon-button-basic
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description | Type                                     | Default     |
+| -------------- | --------------- | ----------- | ---------------------------------------- | ----------- |
+| `clickHandler` | `click-handler` |             | `any`                                    | `undefined` |
+| `color`        | `color`         |             | `"primary" \| "secondary" \| "tertiary"` | `'primary'` |
+| `customClass`  | `custom-class`  |             | `string`                                 | `''`        |
+| `disabled`     | `disabled`      |             | `boolean`                                | `false`     |
+| `icon`         | `icon`          |             | `any`                                    | `undefined` |
+| `loading`      | `loading`       |             | `boolean`                                | `false`     |
+| `size`         | `size`          |             | `"lg" \| "md" \| "sm"`                   | `'sm'`      |
+| `title`        | `title`         |             | `string`                                 | `null`      |
+| `type`         | `type`          |             | `"button" \| "submit"`                   | `'button'`  |
+| `width`        | `width`         |             | `"auto" \| "full"`                       | `'auto'`    |
+
+
+## Dependencies
+
+### Used by
+
+ - [code-editor](../../../editorPage/code-editor)
+ - [download-result-modal](../../../editorPage/download-result-modal)
+ - [editor-page](../../../editorPage/editor-page)
+ - [insert-node-modal](../../../editorPage/insert-node-modal)
+ - [side-bar](../../../settingsPage/side-bar)
+
+### Graph
+```mermaid
+graph TD;
+  code-editor --> icon-button-basic
+  download-result-modal --> icon-button-basic
+  editor-page --> icon-button-basic
+  insert-node-modal --> icon-button-basic
+  side-bar --> icon-button-basic
+  style icon-button-basic fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/common/buttons/icon-label-submit-button/icon-label-submit-button.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/components/common/buttons/icon-label-submit-button/icon-label-submit-button.tsx

@@ -0,0 +1,80 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'icon-label-submit-button',
+  styleUrl: 'icon-label-submit-button.css',
+  scoped: true,
+})
+export class IconLabelSubmitButton {
+  @Prop() customClass = '';
+  @Prop() width: 'full' | 'auto' = 'auto';
+  @Prop() clickHandler: any;
+  @Prop() disabled = false;
+  @Prop() varient: 'contained' | 'outlined' | 'text' = 'contained';
+  @Prop() color: 'primary' | 'secondary' | 'tertiary' = 'primary';
+  @Prop() size: 'lg' | 'md' | 'sm' = 'sm';
+  @Prop() loading: boolean = false;
+  @Prop() startIcon: any;
+  @Prop() endIcon: any;
+  @Prop() title: string | null = null;
+  @Prop() type: 'button' | 'submit' = 'button';
+
+  colorClasses = {
+    primary: 'gray',
+    secondary: 'sky',
+    tertiary: 'indigo',
+  };
+  sizeClasses = {
+    sm: 'py-2 px-4 text-sm font-medium rounded-md',
+    md: 'py-5 px-5 text-base font-medium rounded-md',
+    lg: 'py-6 px-6 text-xl font-semibold rounded-lg',
+  };
+
+  containedClass = `flex border border-transparent ${this.sizeClasses[this.size]}  text-white bg-${this.colorClasses[this.color]}-600 hover:bg-${
+    this.colorClasses[this.color]
+  }-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${this.colorClasses[this.color]}-500 justify-center  capitalize w-${this.width} ${
+    this.customClass
+  } cursor-pointer disabled:cursor-default disabled:text-white disabled:bg-gray-300 `;
+
+  textClass = `flex justify-center border border-transparent ${this.sizeClasses[this.size]}  text-${this.colorClasses[this.color]}-600 focus:outline-none  capitalize w-${
+    this.width
+  } ${this.customClass} hover:text-${this.colorClasses[this.color]}-900 cursor-pointer disabled:cursor-default disabled:text-gray-400`;
+
+  outlinedClass = `flex justify-center  ${this.sizeClasses[this.size]} border border-${this.colorClasses[this.color]}-500 shadow-sm bg-white text-${
+    this.colorClasses[this.color]
+  }-700 hover:bg-${this.colorClasses[this.color]}-50  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${this.colorClasses[this.color]}-500 w-${
+    this.width
+  } cursor-pointer disabled:cursor-default disabled:text-gray-400 disabled:border-gray-400 ${this.customClass}`;
+
+  btnClassType = {
+    contained: this.containedClass,
+    outlined: this.outlinedClass,
+    text: this.textClass,
+  };
+  svgSize = {
+    sm: 'h-5 w-5',
+    md: 'h-6 w-6',
+    lg: 'h-7 w-7',
+  };
+
+  render() {
+    return (
+      <button title={this.title} class={this.btnClassType[this.varient]} onClick={this.clickHandler} disabled={this.disabled || this.loading} type={this.type}>
+        {!this.loading && <span class="mr-2">{this.startIcon}</span>}
+        <slot />
+        {!this.loading && <span class="mr-2">{this.endIcon}</span>}
+        {this.loading && (
+          <span class="animate-spin ml-2">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class={this.svgSize[this.size]}>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+              />
+            </svg>
+          </span>
+        )}
+      </button>
+    );
+  }
+}

src/components/common/buttons/icon-label-submit-button/readme.md

@@ -0,0 +1,59 @@
+# icon-label-submit-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description | Type                                     | Default       |
+| -------------- | --------------- | ----------- | ---------------------------------------- | ------------- |
+| `clickHandler` | `click-handler` |             | `any`                                    | `undefined`   |
+| `color`        | `color`         |             | `"primary" \| "secondary" \| "tertiary"` | `'primary'`   |
+| `customClass`  | `custom-class`  |             | `string`                                 | `''`          |
+| `disabled`     | `disabled`      |             | `boolean`                                | `false`       |
+| `endIcon`      | `end-icon`      |             | `any`                                    | `undefined`   |
+| `loading`      | `loading`       |             | `boolean`                                | `false`       |
+| `size`         | `size`          |             | `"lg" \| "md" \| "sm"`                   | `'sm'`        |
+| `startIcon`    | `start-icon`    |             | `any`                                    | `undefined`   |
+| `title`        | `title`         |             | `string`                                 | `null`        |
+| `type`         | `type`          |             | `"button" \| "submit"`                   | `'button'`    |
+| `varient`      | `varient`       |             | `"contained" \| "outlined" \| "text"`    | `'contained'` |
+| `width`        | `width`         |             | `"auto" \| "full"`                       | `'auto'`      |
+
+
+## Dependencies
+
+### Used by
+
+ - [add-role](../../../permissionPage/add-role)
+ - [code-editor](../../../editorPage/code-editor)
+ - [dialog-component](../../../usersPage/dialog-component)
+ - [download-result-modal](../../../editorPage/download-result-modal)
+ - [edit-table-modal](../../../editorPage/edit-table-modal)
+ - [edit-user](../../../usersPage/edit-user)
+ - [permission-editor](../../../permissionPage/permission-editor)
+ - [profile-component](../../../profilePage/profile-component)
+ - [side-bar](../../../settingsPage/side-bar)
+ - [table-search-modal-form](../../../editorPage/table-search-modal-form)
+
+### Graph
+```mermaid
+graph TD;
+  add-role --> icon-label-submit-button
+  code-editor --> icon-label-submit-button
+  dialog-component --> icon-label-submit-button
+  download-result-modal --> icon-label-submit-button
+  edit-table-modal --> icon-label-submit-button
+  edit-user --> icon-label-submit-button
+  permission-editor --> icon-label-submit-button
+  profile-component --> icon-label-submit-button
+  side-bar --> icon-label-submit-button
+  table-search-modal-form --> icon-label-submit-button
+  style icon-label-submit-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*