bromcom-ui 2.9.0-rc.0 → 2.9.0-rc.10

package/dist/collection/components/third-parts/table/table.js

@@ -0,0 +1,284 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { ToolbarTemplate } from "@bcm/template";
+import { Host, h } from "@stencil/core";
+import { Grid } from "ag-grid-enterprise";
+import cs from "classnames";
+import snq from "snq";
+import { ExportTypes, tableOptions } from "./table-definations";
+export class BcmTable {
+  constructor() {
+    this._id = Generate.UID();
+    this.gridOptions = {};
+    this.extensions = "csv";
+    this.height = "250px";
+    this.showToolbar = false;
+    this.showFooter = false;
+    this.toolBarConfig = {
+      showNewButton: false,
+      showExportButton: true,
+      showColumnButton: true,
+      showFilterButton: false,
+      showSearchInput: true,
+    };
+    this.agGrid = null;
+    this.columns = undefined;
+    this.fileTypes = [];
+    this.isReady = false;
+    this.footerOptions = {
+      statusBar: {
+        statusPanels: [
+          { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
+          { statusPanel: "agTotalRowCountComponent", align: "right" },
+          { statusPanel: "agFilteredRowCountComponent" },
+          { statusPanel: "agSelectedRowCountComponent" },
+          { statusPanel: "agAggregationComponent" },
+        ],
+      },
+    };
+  }
+  get grid() {
+    var _a;
+    return (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridOptions;
+  }
+  componentDidLoad() {
+    this.initGrid();
+  }
+  initGrid() {
+    var _a;
+    const agGridDiv = this.el.querySelector(`#bcm-table-${this._id}`);
+    if (!agGridDiv)
+      return;
+    const options = Object.assign(Object.assign(Object.assign({}, tableOptions), Object.assign({}, (this.showFooter && this.footerOptions))), this.gridOptions);
+    (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.agGrid = new Grid(agGridDiv, Object.assign(Object.assign({}, options), { onGridReady: params => this.initToolbar(params) }));
+  }
+  initToolbar(params) {
+    this.columns = snq(() => { var _a; return (_a = params === null || params === void 0 ? void 0 : params.api) === null || _a === void 0 ? void 0 : _a.getColumnDefs(); }, [])
+      .filter(Boolean)
+      .filter((col) => !col.hide)
+      .map((column) => {
+      var _a, _b, _c, _d, _e;
+      return ({
+        id: column.colId,
+        type: (_c = (_b = (_a = column === null || column === void 0 ? void 0 : column.filterParams) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : "text",
+        disabled: (_e = (_d = column === null || column === void 0 ? void 0 : column.filterParams) === null || _d === void 0 ? void 0 : _d.disabledColumn) !== null && _e !== void 0 ? _e : false,
+      });
+    });
+    this.fileTypes = snq(() => {
+      var _a;
+      return (_a = this.extensions
+        .toLowerCase()
+        .split(",")) === null || _a === void 0 ? void 0 : _a.map((extention) => extention.trim()).map((extention) => ExportTypes[extention]);
+    }, []);
+    this.isReady = true;
+  }
+  handleColumnVisible({ checked, id }) {
+    if (!id)
+      return;
+    this.grid.columnApi.setColumnVisible(id, checked);
+  }
+  handleFileType({ text }) {
+    if (!text)
+      return;
+    switch (text.toLowerCase()) {
+      case "csv":
+        this.grid.api.exportDataAsCsv();
+        break;
+      case "excel":
+        this.grid.api.exportDataAsExcel();
+        break;
+      case "pdf":
+        alert("PDF export is not supported yet");
+        break;
+    }
+  }
+  handleSearch(text) {
+    if (text === undefined)
+      return;
+    this.grid.api.setQuickFilter(text);
+    if (this.grid.api.getDisplayedRowCount() === 0) {
+      this.grid.api.showNoRowsOverlay();
+    }
+    else {
+      this.grid.api.hideOverlay();
+    }
+  }
+  watchHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.initGrid();
+    }
+  }
+  render() {
+    const { _id, height, toolBarConfig, columns } = this;
+    return (h(Host, null, h("div", { class: cs("bcm-ui-element bcm-ui-table bcm-table", "tw-flex tw-w-full tw-flex-col tw-gap-2", {
+        "tw-hidden": !this.isReady,
+      }) }, this.showToolbar && (h(ToolbarTemplate, { tableId: _id, config: toolBarConfig, columns: columns, onHideColumn: e => this.handleColumnVisible(e), onSearch: e => this.handleSearch(e), onSelectExportType: e => this.handleFileType(e), extensions: this.fileTypes })), h("div", { id: `bcm-table-${this._id}`, class: "ag-theme-bcm", style: { height } }))));
+  }
+  static get is() { return "bcm-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "_id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "gridOptions": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "GridOptions",
+          "resolved": "GridOptions<any>",
+          "references": {
+            "GridOptions": {
+              "location": "import",
+              "path": "ag-grid-enterprise"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      },
+      "extensions": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "extensions",
+        "reflect": true,
+        "defaultValue": "\"csv\""
+      },
+      "height": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": true,
+        "defaultValue": "\"250px\""
+      },
+      "showToolbar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-toolbar",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-footer",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "toolBarConfig": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Bcm.ToolBarButtonProps",
+          "resolved": "ToolBarButtonProps",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{\n        showNewButton: false,\n        showExportButton: true,\n        showColumnButton: true,\n        showFilterButton: false,\n        showSearchInput: true,\n    }"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "agGrid": {},
+      "columns": {},
+      "fileTypes": {},
+      "isReady": {},
+      "footerOptions": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "gridOptions",
+        "methodName": "watchHandler"
+      }];
+  }
+}

package/dist/collection/decorators/bcm-decorator.js

@@ -0,0 +1,28 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { getElement } from "@stencil/core";
+export function BcmComponent() {
+  return (target, _propertyKey) => {
+    const originalComponentDidLoad = target.componentWillRender;
+    target.componentWillRender = function () {
+      const hostElement = getElement(this); //
+      const isStopChange = hostElement.hasAttribute("stop-change");
+      if (isStopChange) {
+        hostElement.addEventListener("bcm-change", (event) => {
+          event.stopImmediatePropagation();
+        }, {
+          capture: true,
+          once: true,
+        });
+      }
+      else {
+        hostElement.removeAttribute("stop-change");
+      }
+      if (originalComponentDidLoad) {
+        originalComponentDidLoad.call(this);
+      }
+    };
+  };
+}

package/dist/collection/decorators/index.js

@@ -6,3 +6,4 @@ export * from './id-decorator';
 export * from './is-load-decorator';
 export * from './json-parse-decarator';
 export * from './property-decorators';
+export * from './bcm-decorator';

package/dist/collection/global/global.js

@@ -1,23 +1,37 @@
+import { version } from "../../package.json";
+import { LicenseManager } from "ag-grid-enterprise";
+import { Env } from "@stencil/core";
+
+window.bcm = (function () {
+    return {
+        version: version,
+    };
+})();
+
 function addHeadScript(obj) {
     const head = document.head;
-    const script = document.createElement('script');
+    const script = document.createElement("script");
     Object.keys(obj).forEach(key => {
         script[key] = obj[key];
     });
     head.appendChild(script);
 }
 
-addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
+addHeadScript({ src: "https://kit.fontawesome.com/5e86bea963.js", crossOrigin: "anonymous" });
+
+(() => {
+    LicenseManager.setLicenseKey(Env["AG_GRID_LICENSE_KEY"]);
+})();
 
 async function fetchJSON(url = null) {
     const response = await fetch(url);
     return await response.json();
 }
 
-async function componentInit(component, componentId, componentContainerId = '0') {
+async function componentInit(component, componentId, componentContainerId = "0") {
     await removeComponent(componentId);
     const element = await createComponent(component, componentId, componentContainerId);
-    if (component.substring(0, 4) === 'bcm-') {
+    if (component.substring(0, 4) === "bcm-") {
         await customElements.whenDefined(component);
         await element.componentOnReady();
     }
@@ -27,7 +41,7 @@ async function componentInit(component, componentId, componentContainerId = '0')
 async function createComponent(tag, id, target) {
     var elem = document.createElement(tag);
     elem.id = id;
-    if (target !== '0') {
+    if (target !== "0") {
         document.getElementById(target).appendChild(elem);
     }
 

package/dist/collection/helper/color-helper.js

@@ -6,6 +6,26 @@ import { ColorPalette } from '../global/variables/colors';
 import { extractColor } from '../utils/utils';
 import tailwindColor from 'tailwindcss/colors';
 export class ColorHelper {
+  /**
+   * @param color - color string in format of `colorName-tone` or `colorName` (default tone is 600)
+   * @return `{ tone: number, colorName: string }`
+   * @description
+   * Parse color string to get color name and tone
+   * @example
+   * parseColor("red-500") // { tone: 500, colorName: "red" }
+   * parseColor("red") // { tone: 600, colorName: "red" }
+   * parseColor(null) // { tone: null, colorName: null }
+   */
+  static parseColor(color, defaultTone = 600) {
+    if (!color)
+      return { tone: null, colorName: null };
+    const [colorName, tone] = color.split("-");
+    const parsedTone = tone ? parseInt(tone) : defaultTone;
+    return {
+      tone: parsedTone,
+      colorName,
+    };
+  }
 }
 ColorHelper.isHex = (str) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str);
 ColorHelper.isRgb = (str) => /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
@@ -42,7 +62,7 @@ ColorHelper.reverseColor = (color) => {
     const g = parseInt(hexColor.substring(3, 5), 16);
     const b = parseInt(hexColor.substring(5, 7), 16);
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 200 ? '#475569' : '#f8fafc';
+    return yiq >= 200 ? '#334155' : '#fff';
   }
 };
 ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
@@ -79,3 +99,9 @@ ColorHelper.twColor = (colorName, tone = '500') => {
   return 'blue-500';
 };
 ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));
+/**
+ * @param object
+ * @return string
+ * @description Convert style object to string
+ */
+ColorHelper.generateStyleString = (obj) => Object.keys(obj).reduce((acc, key) => { return `${acc}${key}:${obj[key]};`; }, "");

package/dist/collection/helper/generate.js

@@ -33,15 +33,65 @@ if (isAllowedDomain()) {
   }
 })();
 export class Generate {
-  static getTwColor(color, variable = "--bcm-color-default") {
+  /**
+      const dc = Generate.getTwColor({
+          color: "blue",
+          tones: {
+              200: ["text"],
+              700: ["bg", "border"],
+              800: ["bg-hover", "border-hover"],
+          },
+          variable: "--bcm-avatar",
+      });
+
+      return {
+          --bcm-avatar-text: --tw-blue-200;
+          --bcm-avatar-bg: --tw-blue-700;
+          --bcm-avatar-bg-hover: --tw-blue-800;
+          --bcm-avatar-border: --tw-blue-700;
+          --bcm-avatar-border-hover: --tw-blue-800;
+      }
+      
+   */
+  static getTwColor(args) {
+    const { color, variable, tones } = (args = Object.assign({
+      variable: "--bcm-color-default",
+      defaultTone: "600",
+      tones: {
+        50: {},
+        100: {},
+        200: {},
+        300: {},
+        400: {},
+        500: {},
+        600: {},
+        700: {},
+        800: {},
+        900: {},
+        950: {},
+      },
+    }, args));
     if (!color || !colors[color]) {
       return false;
     }
-    const colorObj = colors[color];
     const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
+    if (typeof colors[color] === "string") {
+      result[variable] = colors[color];
+      return result;
     }
+    const toneList = Array.isArray(tones) ? tones : Object.keys(tones);
+    toneList.forEach(tone => {
+      if (colors[color][tone]) {
+        if (Array.isArray(tones[tone])) {
+          tones[tone].forEach(item => {
+            result[`${variable}-${item}`] = colors[color][tone];
+          });
+        }
+        else {
+          result[`${variable}-${tone}`] = colors[color][tone];
+        }
+      }
+    });
     return result;
   }
 }

package/dist/collection/helper/popover-helper.js

@@ -14,25 +14,29 @@ export class Popover {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
-    this.exepcitonColors = {
-      white: "slate-300",
-      black: "slate-700",
-    };
     this.target = () => document.getElementById(this.targetId);
     this.init = () => {
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-popover",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
+      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
             ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
             ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-popover-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
             tw-shadow`,
         "role": "popover",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": inner,
       });
     };
@@ -88,7 +92,7 @@ export class Popover {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-popover-bg]`,
         });
       }
     };

package/dist/collection/helper/tooltip-helper.js

@@ -15,7 +15,6 @@ export class Tooltip {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
     this.sizeClass = () => {
       switch (this.size) {
@@ -30,13 +29,22 @@ export class Tooltip {
       }
     };
     this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
         "role": "tooltip",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": StringHelper.trim(this.message),
       });
     };
@@ -92,7 +100,7 @@ export class Tooltip {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
         });
       }
     };

package/dist/collection/models/bcm.js

@@ -456,6 +456,7 @@ export var Bcm;
     TriggerType["hover"] = "hover";
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
+    TriggerType["custom"] = "custom";
   })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
   let ListType;
   (function (ListType) {

package/dist/collection/templates/index.js

@@ -15,3 +15,5 @@ export * from './list-template';
 export * from './slot-template';
 export * from './step-template';
 export * from './tag-template';
+export * from './toolbar-template';
+export * from './toolbar-hamburger-template';

package/dist/collection/templates/toolbar-hamburger-template.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { StringHelper } from "@bcm/helpers";
+import { Fragment, h } from "@stencil/core";
+export const ToolbarHamburgerTemplate = ({ hamburgerMenuId, config, column, extensions, onHideColumn, onSelectExportType }) => {
+  const { showColumnButton, showExportButton, showNewButton } = config;
+  return (h(Fragment, null, h("bcm-linked", { class: "lg:tw-hidden md:tw-hidden", "target-id": hamburgerMenuId, "main-linked": true }, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[180px] tw-flex-col tw-gap-2 tw-p-4" }, showNewButton && (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", null, "New")))), showColumnButton && (h("bcm-item", { id: hamburgerMenuId + "-hamburger-linked", color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", { class: "tw-mr-2" }, "Add Column"), h("i", { class: "fas fa-chevron-right" })))), showExportButton && (h("bcm-item", { id: hamburgerMenuId + "-hamburger-extentions", color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", { class: "tw-mr-2" }, "Exports"), h("i", { class: "fas fa-chevron-right" })))))), h("bcm-linked", { trigger: "hover", "target-id": hamburgerMenuId + "-hamburger-linked", placement: "left-start", "hide-delay": "200" }, h(Fragment, null, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, column === null || column === void 0 ? void 0 : column.map(col => {
+    return (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-5 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1" }, h("span", null, StringHelper.capitalize(col.id)), h("bcm-switch", { disabled: col.disabled, accessKey: col.id, id: col.id, class: "tw-mt-2", "no-caption": true, checked: true, "onBcm-change": e => onHideColumn({ checked: e.detail, id: col.id }) }))));
+  })))), h("bcm-linked", { trigger: "hover", "target-id": hamburgerMenuId + "-hamburger-extentions", placement: "left-start", "hide-delay": "200" }, h(Fragment, null, h("div", { class: "tw-shadow-custom tw-flex tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, extensions === null || extensions === void 0 ? void 0 : extensions.map(ext => {
+    return (h("div", { class: "tw-flex tw-w-full tw-flex-1 tw-cursor-pointer tw-flex-row tw-items-center tw-justify-start tw-gap-2 tw-rounded tw-bg-white tw-px-3 tw-py-[5px] tw-font-sans tw-text-size-4 tw-font-medium tw-antialiased hover:tw-bg-slate-100", onClick: () => onSelectExportType(ext) }, h("span", null, h("i", { class: "tw-text-size-5 " + ext.icon })), h("span", null, ext.text)));
+  }))))));
+};

package/dist/collection/templates/toolbar-template.js

@@ -0,0 +1,15 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { StringHelper } from "@bcm/helpers";
+import { Fragment, h } from "@stencil/core";
+import { ToolbarHamburgerTemplate } from "./toolbar-hamburger-template";
+export const ToolbarTemplate = ({ columns, config, extensions, tableId, onHideColumn, onSearch, onSelectExportType }) => {
+  const { showColumnButton, showExportButton, showNewButton, showFilterButton, showSearchInput } = config;
+  return (h("div", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-between" }, h("div", { class: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-2" }, h("slot", { name: "left" }), showFilterButton && (h("bcm-dropdown", { kind: "ghost" }, h("bcm-icon", { icon: "far fa-filter" }), "Filter", h("bcm-badge", { color: "blue", size: "small", value: "1" }, "1"))), showSearchInput && h("bcm-input", { class: "!tw-mb-0", placeholder: "Search", type: "search", "no-caption": true, "onBcm-input": e => onSearch(e.detail) })), h("div", null), h("div", { class: "tw-flex tw-flex-row tw-flex-wrap tw-items-center tw-justify-start tw-gap-2", id: "test" }, h("slot", { name: "right" }), showNewButton && h("bcm-button", { icon: "fas fa-plus" }, "New"), showColumnButton && (h("section", { class: "tw-hidden lg:tw-block md:tw-block" }, h("bcm-dropdown", { kind: "ghost", placement: "bottom-end" }, h("bcm-icon", { icon: "far fa-plus" }), "Add Column", h(Fragment, null, h("bcm-content", { class: "tw-hidden lg:tw-block md:tw-block" }, h("div", { class: "tw-shadow-custom tw-w-full tw-min-w-[256px] tw-flex-col tw-gap-2 tw-p-4" }, columns === null || columns === void 0 ? void 0 : columns.map(col => {
+    return (h("bcm-item", { color: "white" }, h("div", { class: "tw-flex tw-h-4 tw-w-full tw-flex-1 tw-items-center tw-justify-between tw-gap-1 tw-font-medium" }, h("span", null, StringHelper.capitalize(col.id)), h("bcm-switch", { class: "!tw-mt-2", disabled: col.disabled, "onBcm-change": e => onHideColumn({ checked: e.detail, id: col.id }), accessKey: col.id, id: col.id, "no-caption": true, checked: true }))));
+  }))))))), showExportButton && (h("section", { class: "tw-hidden lg:tw-block md:tw-block" }, (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 1 && (h("bcm-dropdown", { id: tableId + "extention-content", selectable: false, kind: "ghost", class: "!tw-font-medium" }, "Export As", h("bcm-content", { class: "tw-hidden lg:tw-block md:tw-block" }, h("div", { class: "tw-shadow-custom tw-flex tw-w-full tw-min-w-[200px] tw-flex-col tw-gap-2 tw-p-4" }, extensions === null || extensions === void 0 ? void 0 : extensions.map(ext => {
+    return (h("div", { class: "tw-flex tw-w-full tw-flex-1 tw-cursor-pointer tw-flex-row tw-items-center tw-justify-start tw-gap-2 tw-rounded tw-bg-white tw-px-3 tw-py-[5px] tw-font-sans tw-text-size-4 tw-font-medium tw-antialiased hover:tw-bg-slate-100", onClick: () => onSelectExportType(ext) }, h("span", null, h("i", { class: "tw-text-size-5 " + ext.icon })), h("span", null, ext.text)));
+  }))))), (extensions === null || extensions === void 0 ? void 0 : extensions.length) == 1 && (h("bcm-button", { outline: true, onClick: () => onSelectExportType(extensions[0]) }, h("img", { src: "assets/" + extensions[0].path }), " Export as ", extensions[0].text))))), h("bcm-button", { outline: true, id: tableId + "-hamburger-menu", class: "sm:tw-block lg:tw-hidden md:tw-hidden", icon: "fas fa-bars" }), h(ToolbarHamburgerTemplate, { hamburgerMenuId: tableId + "-hamburger-menu", config: config, column: columns, extensions: extensions, onHideColumn: onHideColumn, onSelectExportType: onSelectExportType })));
+};

package/dist/components/_commonjsHelpers.js

@@ -18,8 +18,23 @@ function createCommonjsModule(fn, basedir, module) {
 	}, fn(module, module.exports), module.exports;
 }
 
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, createCommonjsModule as c, getDefaultExportFromCjs as g };
+export { commonjsGlobal as a, getDefaultExportFromCjs as b, createCommonjsModule as c, getAugmentedNamespace as g };