bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

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

@@ -0,0 +1,288 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
+import { Grid, ModuleRegistry } from "@ag-grid-community/core";
+import { ExcelExportModule } from "@ag-grid-enterprise/excel-export";
+import { StatusBarModule } from "@ag-grid-enterprise/status-bar";
+import { Generate } from "@bcm/helpers";
+import { ToolbarTemplate } from "@bcm/template";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import snq from "snq";
+import { ExportTypes, tableOptions } from "./table-definations";
+ModuleRegistry.registerModules([StatusBarModule, ClientSideRowModelModule, ExcelExportModule]);
+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-community/core"
+            }
+          }
+        },
+        "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/event-decorator.js

@@ -0,0 +1,31 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { getElement } from "@stencil/core";
+export function BcmEventControl() {
+  return (target, _propertyKey) => {
+    const originalComponentWillRender = target.componentWillRender;
+    target.componentWillRender = function () {
+      const hostElement = getElement(this);
+      const stopEvents = hostElement["stopEvents"];
+      if (stopEvents) {
+        const events = hostElement["stopEvents"];
+        const eventList = (events === null || events === void 0 ? void 0 : events.split(",")) || [];
+        (eventList === null || eventList === void 0 ? void 0 : eventList.length) > 0
+          ? eventList.forEach(event => {
+            hostElement.addEventListener(event, (event) => {
+              event.stopPropagation();
+            }, {
+              capture: true,
+              once: true,
+            });
+          })
+          : null;
+      }
+      if (originalComponentWillRender) {
+        originalComponentWillRender.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 './event-decorator';

package/dist/collection/decorators/is-load-decorator.js

@@ -8,8 +8,9 @@ export function IsLoad() {
     const { componentDidLoad } = proto;
     proto.componentDidLoad = function () {
       const host = getElement(this);
+      const { openIntersecting } = host;
       initProps(host);
-      registerAttrReflect(host);
+      openIntersecting && registerAttrReflect(host);
       return componentDidLoad && componentDidLoad.call(this);
     };
   };

package/dist/collection/global/global.js

@@ -1,23 +1,37 @@
+import { version } from "../../package.json";
+import { LicenseManager } from "@ag-grid-enterprise/core";
+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/global/helper/toast.js

@@ -19,6 +19,7 @@ export class Toast {
    * "message-icon": "check",
    * "view-button": true,
    * "close-button": true,
+   * "remove-after-close": true, // This will remove the toast from the DOM after it is closed
    * bcmToastView: (event) => {
    * // This Event fires when the view button is clicked
    * // do something

package/dist/collection/global/helper/toast.ts

@@ -8,6 +8,7 @@ interface ToastOptions {
     "message-icon"?: string;
     "view-button"?: boolean;
     "close-button"?: boolean;
+    "remove-after-close"?: boolean;
 }
 
 interface ToastEvents {
@@ -36,6 +37,7 @@ export class Toast {
      * "message-icon": "check",
      * "view-button": true,
      * "close-button": true,
+     * "remove-after-close": true, // This will remove the toast from the DOM after it is closed
      * bcmToastView: (event) => {
      * // This Event fires when the view button is clicked
      * // do something

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/string-helper.js

@@ -40,10 +40,10 @@ StringHelper.slugify = (str) => slugify(str, {
   trim: false, // trim leading and trailing replacement chars, defaults to `true`
 });
 StringHelper.highlight = (str, search) => {
-  const searchText = search;
-  const regex = new RegExp(searchText, 'gi');
   let text = str;
   text = text.replace(/(<mark>|<\/mark>)/gim, '');
+  const escapedSearch = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); // Özel karakterleri kaçış dizileri ile kaçır
+  const regex = new RegExp(escapedSearch, 'gi');
   const newText = text.replace(regex, '<mark>$&</mark>');
   return newText;
 };

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]`,
         });
       }
     };