bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/collection/components/other/arrow/arrow.js

@@ -0,0 +1,70 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import { Generate } from "../../../helper/generate";
+export class BcmArrow {
+  constructor() {
+    this._id = Generate.UID();
+    this.position = undefined;
+  }
+  render() {
+    const hostClasses = cs({
+      [`arrow  ${this.position}`]: true,
+    });
+    return h(Host, { class: hostClasses });
+  }
+  static get is() { return "bcm-arrow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["arrow.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["arrow.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/other/resizable-pane/resizable-pane.js

@@ -0,0 +1,79 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+export class BcmResizablePane {
+  constructor() {
+    this.initialLeftPanelWidth = 50;
+    this.isDragging = false;
+    this.startClientX = 0;
+    this.leftPanelWidth = this.initialLeftPanelWidth;
+  }
+  onMouseMove(event) {
+    if (!this.isDragging) {
+      return;
+    }
+    const diff = event.clientX - this.startClientX;
+    const containerWidth = this.el.offsetWidth;
+    this.leftPanelWidth = Math.max(0, Math.min(100, this.leftPanelWidth + (diff / containerWidth) * 100));
+    this.startClientX = event.clientX;
+  }
+  onMouseUp() {
+    this.isDragging = false;
+  }
+  handleMouseDown(event) {
+    this.isDragging = true;
+    this.startClientX = event.clientX;
+  }
+  render() {
+    const rightPanelWidth = 100 - this.leftPanelWidth;
+    return (h(Host, { class: "tw-block tw-h-full tw-w-full" }, h("div", { class: "resizable-panes tw-flex tw-h-full" }, h("div", { class: "panel panel-left tw-flex-1 ", style: { flexBasis: `${this.leftPanelWidth}%` } }, h("slot", { name: "left-panel" })), h("div", { class: "splitter tw-flex tw-cursor-ew-resize tw-items-center tw-justify-center tw-bg-gray-300 tw-p-1 tw-text-color-gray-500", role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-valuenow": this.leftPanelWidth, title: "Interact to resize", onMouseDown: event => this.handleMouseDown(event) }, h("slot", { name: "splitter" }, h("i", { class: "fa-light fa-grip-lines-vertical" }))), h("div", { class: "panel panel-right tw-flex-1 ", style: { flexBasis: `${rightPanelWidth}%` } }, h("slot", { name: "right-panel" })))));
+  }
+  static get is() { return "bcm-resizable-pane"; }
+  static get properties() {
+    return {
+      "initialLeftPanelWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-left-panel-width",
+        "reflect": false,
+        "defaultValue": "50"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isDragging": {},
+      "startClientX": {},
+      "leftPanelWidth": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "mousemove",
+        "method": "onMouseMove",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseup",
+        "method": "onMouseUp",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/other/segment-picker/segment-picker-item.js

@@ -0,0 +1,158 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import { segmentPickerStyle } from "./segment-picker.style";
+export class BcmSegmentPickerItem {
+  constructor() {
+    this.size = Bcm.Size.medium;
+    this.text = "";
+    this.color = "--bcm-ui-color-background-primary-info-default";
+    this.value = "";
+    this.disabled = false;
+    this.active = false;
+  }
+  render() {
+    const { text, disabled, active, size } = this;
+    const { item } = segmentPickerStyle({ size, disabled, active });
+    return (h(Host, { class: item(), onClick: () => this.click.emit() }, h("slot", null, text)));
+  }
+  static get is() { return "bcm-segment-picker-item"; }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"--bcm-ui-color-background-primary-info-default\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "click",
+        "name": "bcm-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/other/segment-picker/segment-picker.js

@@ -0,0 +1,252 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import { segmentPickerStyle } from "./segment-picker.style";
+export class BcmSegmentPicker {
+  constructor() {
+    this.handleChange = (event) => {
+      event.preventDefault();
+      const target = event.target;
+      this.change.emit(target.value);
+      this.changeSegment.emit(target.value);
+      this.setSegmentItemActive(target.value);
+    };
+    this.setSegmentItemActive = (value) => {
+      const segmentItems = this.el.querySelectorAll("bcm-segment-picker-item");
+      segmentItems.forEach((item) => {
+        if (item.value == value) {
+          item.active = true;
+          this.value = value;
+          const color = item.getAttribute("color");
+          const { offsetWidth, offsetLeft } = item;
+          const { style } = this.el;
+          style.setProperty("--highlight-width", `${offsetWidth}px`);
+          style.setProperty("--highlight-x-pos", `${offsetLeft}px`);
+          style.setProperty("--highlight-color", `var(${color})`);
+        }
+        else {
+          item.active = false;
+        }
+      });
+    };
+    this.size = Bcm.Size.medium;
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.disabled = false;
+    this.fullWidth = false;
+    this.block = false;
+    this.data = [];
+  }
+  componentDidLoad() {
+    const { defaultValue } = this;
+    if (defaultValue) {
+      this.setSegmentItemActive(defaultValue);
+    }
+  }
+  render() {
+    const { base } = segmentPickerStyle({ size: this.size });
+    return (h(Host, { class: base(), "onbcm-click": this.handleChange }, h("slot", null)));
+  }
+  static get is() { return "bcm-segment-picker"; }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "block": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ value: string; text: string; disabled?: boolean }[]",
+          "resolved": "{ value: string; text: string; disabled?: boolean; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{{ value: string, text: string }[]}"
+            }, {
+              "name": "memberof",
+              "text": "BcmSegmentPicker"
+            }, {
+              "name": "example",
+              "text": "[\n { value: '1', text: 'Option 1' },\n { value: '2', text: 'Option 2' },\n { value: '3', text: 'Option 3' },\n]"
+            }, {
+              "name": "default",
+              "text": "[]"
+            }],
+          "text": "Options to be displayed in the select"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "changeSegment",
+        "name": "bcm-segment-picker:change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/other/segment-picker/segment-picker.style.js

@@ -0,0 +1,50 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const segmentPickerStyle = tv({
+  slots: {
+    base: [
+      "bcm-segment-picker bcm-ui-element bcm-ui-action",
+      "tw-bg-color-default tw-rounded-cards tw-p-1 tw-gap-0.5 tw-text-color",
+      "tw-text-size-5 tw-font-medium",
+      "tw-flex tw-flex-row tw-justify-center tw-items-center",
+      "tw-relative",
+      "before:tw-bg-[var(--highlight-color)] before:tw-rounded before:tw-absolute before:tw-z-0 before:tw-top-1 before:tw-bottom-1 before:tw-left-0",
+      "before:tw-w-[var(--highlight-width)] before:tw-transform before:tw-translate-x-[var(--highlight-x-pos)]",
+      "before:tw-transition-all before:tw-duration-300 before:tw-ease-in-out",
+    ],
+    item: [
+      "bcm-segment-picker__item",
+      "tw-py-2 tw-px-3 tw-gap-2.5 tw-rounded",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-relative tw-z-10",
+      "tw-transition-color tw-duration-300 tw-ease-in-out",
+    ],
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+    disabled: {
+      true: { item: "tw-cursor-not-allowed" },
+      false: {
+        item: ["tw-cursor-pointer", "tw-text-color"],
+      },
+    },
+    active: {
+      true: {
+        item: ["", "tw-text-color-base"],
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+    active: false,
+  },
+});

package/dist/collection/components/other/shortcut/shortcut.js

@@ -5,7 +5,7 @@
 import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { Host, h } from "@stencil/core";
-import cs from "classnames";
+import { shortcutStyle } from "./shortcut.style";
 const osKeys = {
   ctrl: "⌘",
   alt: "⌥",
@@ -37,11 +37,17 @@ export class BcmShortcut {
   }
   render() {
     const { size, color, hotkey } = this;
-    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-default-300 tw-bg-default-100 tw-text-default-700", "tw-text-center tw-font-medium tw-capitalize", {
-        "tw-text-2": size === Bcm.Size.small,
-        "tw-text-3": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: Object.assign({}, Generate.getTwColor({ color })) }, this.getHotkey(hotkey)));
+    const { host } = shortcutStyle({ size });
+    const style = Generate.getTwColor({
+      color: color,
+      tones: {
+        100: ["bg"],
+        300: ["border"],
+        700: ["text"],
+      },
+      variable: "--bcm-shortcut",
+    });
+    return (h(Host, { class: host(), style: style }, this.getHotkey(hotkey)));
   }
   static get is() { return "bcm-shortcut"; }
   static get properties() {

package/dist/collection/components/other/shortcut/shortcut.style.js

@@ -0,0 +1,38 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const shortcutStyle = tv({
+  slots: {
+    host: [
+      "bcm-shortcut",
+      "bcm-ui-element bcm-ui-content-display",
+      "tw-block tw-h-fit tw-w-fit tw-rounded-md tw-border tw-border-solid tw-px-1",
+      "tw-border-[--bcm-shortcut-border] tw-bg-[--bcm-shortcut-bg] tw-text-[--bcm-shortcut-text]",
+      "tw-text-center tw-font-medium tw-capitalize",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: [
+          "tw-text-size-3",
+        ],
+      },
+      medium: {
+        host: [
+          "tw-text-size-4",
+        ],
+      },
+      large: {
+        host: [
+          "tw-text-size-5",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});