bromcom-ui 2.8.0-rc.8 → 3.0.0-rc.0

package/dist/collection/components/atoms/button/types.js

@@ -3,156 +3,79 @@
  * Copyright (c) Bromcom.
  */
 export const variantOptions = {
-  save: {
-    text: 'Save',
-    color: 'emerald',
-    icon: 'far fa-save',
-    iconPosition: 'prefix',
-  },
-  ok: {
-    text: 'Ok',
-    color: 'emerald',
-    icon: 'far fa-check',
-    iconPosition: 'prefix',
-  },
-  new: {
-    text: 'New',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  add: {
-    text: 'Add',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  create: {
-    text: 'Create',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  prev: {
-    text: 'Prev',
-    color: '',
-    icon: 'far fa-arrow-left',
-    iconPosition: 'prefix',
-  },
-  next: {
-    text: 'Next',
-    color: '',
-    icon: 'far fa-arrow-right',
-    iconPosition: 'suffix',
-  },
-  apply: {
-    text: 'Apply',
-    color: '',
-    icon: 'far fa-check-circle',
-    iconPosition: 'prefix',
-  },
-  submit: {
-    text: 'Submit',
-    color: '',
-    icon: 'far fa-save',
-    iconPosition: 'prefix',
-  },
-  send: {
-    text: 'Send',
-    color: 'emerald',
-    icon: 'far fa-paper-plane',
-    iconPosition: 'prefix',
-  },
-  delete: {
-    text: 'Delete',
-    color: 'red',
-    icon: 'far fa-trash',
-    iconPosition: 'prefix',
-  },
-  cancel: {
-    text: 'Cancel',
-    color: 'red',
-    icon: 'far fa-times',
-    iconPosition: 'prefix',
-  },
-  decline: {
-    text: 'Decline',
-    color: 'red',
-    icon: 'far fa-ban',
-    iconPosition: 'prefix',
-  },
-  close: {
-    text: 'Close',
-    color: 'red',
-    icon: 'far fa-times-circle',
-    iconPosition: 'prefix',
-  },
-  archive: {
-    text: 'Archive',
-    color: 'red',
-    icon: 'far fa-folder-open',
-    iconPosition: 'prefix',
-  },
-  remove: {
-    text: 'Remove',
-    color: 'red',
-    icon: 'far fa-minus-circle',
-    iconPosition: 'prefix',
-  },
-  edit: {
-    text: 'Edit',
-    color: '',
-    icon: 'far fa-edit',
-    iconPosition: 'prefix',
-  },
-  export: {
-    text: 'Export',
-    color: '',
-    icon: 'far fa-sign-out',
-    iconPosition: 'prefix',
-  },
-  import: {
-    text: 'Import',
-    color: '',
-    icon: 'far fa-sign-in',
-    iconPosition: 'prefix',
-  },
-  filter: {
-    text: 'Filter',
-    color: '',
-    icon: 'far fa-filter',
-    iconPosition: 'prefix',
-  },
-  update: {
-    text: 'Update',
-    color: '',
-    icon: 'far fa-sync',
-    iconPosition: 'prefix',
-  },
-  reset: {
-    text: "Reset",
-    color: "",
-    icon: 'far fa-sync',
-    iconPosition: "prefix",
-  },
-  download: {
-    text: 'Download',
-    color: '',
-    icon: 'far fa-download',
-    iconPosition: 'prefix',
-  },
+  // Old variant options
+  save: { text: "Save", color: "emerald", icon: "far fa-save", iconPosition: "prefix" },
+  ok: { text: "Ok", color: "emerald", icon: "far fa-check", iconPosition: "prefix" },
+  new: { text: "New", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  add: { text: "Add", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  create: { text: "Create", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  send: { text: "Send", color: "emerald", icon: "far fa-paper-plane", iconPosition: "prefix" },
+  delete: { text: "Delete", color: "red", icon: "far fa-trash", iconPosition: "prefix" },
+  cancel: { text: "Cancel", color: "red", icon: "far fa-times", iconPosition: "prefix" },
+  decline: { text: "Decline", color: "red", icon: "far fa-ban", iconPosition: "prefix" },
+  close: { text: "Close", color: "red", icon: "far fa-times-circle", iconPosition: "prefix" },
+  archive: { text: "Archive", color: "red", icon: "far fa-folder-open", iconPosition: "prefix" },
+  remove: { text: "Remove", color: "red", icon: "far fa-minus-circle", iconPosition: "prefix" },
+  prev: { text: "Prev", color: "", icon: "far fa-arrow-left", iconPosition: "prefix" },
+  next: { text: "Next", color: "", icon: "far fa-arrow-right", iconPosition: "suffix" },
+  apply: { text: "Apply", color: "", icon: "far fa-check-circle", iconPosition: "prefix" },
+  submit: { text: "Submit", color: "", icon: "far fa-save", iconPosition: "prefix" },
+  edit: { text: "Edit", color: "", icon: "far fa-edit", iconPosition: "prefix" },
+  export: { text: "Export", color: "", icon: "far fa-sign-out", iconPosition: "prefix" },
+  import: { text: "Import", color: "", icon: "far fa-sign-in", iconPosition: "prefix" },
+  filter: { text: "Filter", color: "", icon: "far fa-filter", iconPosition: "prefix" },
+  update: { text: "Update", color: "", icon: "far fa-sync", iconPosition: "prefix" },
+  reset: { text: "Reset", color: "", icon: "far fa-sync", iconPosition: "prefix" },
+  download: { text: "Download", color: "", icon: "far fa-download", iconPosition: "prefix" },
+  // New variant options
+  // edit: { text: "Edit", color: "blue", iconPosition: "prefix", icon: "far fa-pen"},
+  // send: { text: "Send", color: "blue", iconPosition: "prefix", icon: "far fa-paper-plane"},
+  // submit: { text: "Submit", color: "blue", iconPosition: "prefix", icon: "far fa-hand-holding-box"},
+  // add: { text: "Add", color: "blue", iconPosition: "prefix", icon: "far fa-plus"},
+  // setting: { text: "Setting", color: "blue", iconPosition: "prefix", icon: "far fa-cog"},
+  // download: { text: "Download", color: "blue", iconPosition: "prefix", icon: "far fa-download"},
+  // export: { text: "Export", color: "blue", iconPosition: "prefix", icon: "far fa-file-export"},
+  // import: { text: "Import", color: "blue", iconPosition: "prefix", icon: "far fa-file-import"},
+  // filter: { text: "Filter", color: "blue", iconPosition: "prefix", icon: "far fa-filter"},
+  // register: { text: "Register", color: "blue", iconPosition: "prefix", icon: "far fa-file-edit"},
+  // save: { text: "Save", color: "blue", iconPosition: "prefix", icon: "far fa-save"},
+  // create: { text: "Create", color: "blue", iconPosition: "prefix", icon: "far fa-plus-circle"},
+  // okey: { text: "Okey", color: "blue", iconPosition: "prefix", icon: "far fa-thumbs-up"},
+  // back: { text: "Back", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-left"},
+  // return: { text: "Return", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-to-left"},
+  // next: { text: "Next", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-right"},
+  // new: { text: "New", color: "blue", iconPosition: "prefix", icon: "far fa-plus"},
+  // late: { text: "Late", color: "blue", iconPosition: "prefix", icon: "far fa-clock"},
+  // view: { text: "View", color: "blue", iconPosition: "prefix", icon: "far fa-file-alt" },
+  // submit: { text: "Submit", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // save: { text: "Save", color: "emerald", iconPosition: "prefix", icon: "far fa-save" },
+  // confirm: { text: "Confirm", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // proceed: { text: "Proceed", color: "emerald", iconPosition: "prefix", icon: "far fa-chevron-circle-right" },
+  // continue: { text: "Continue", color: "emerald", iconPosition: "prefix", icon: "far fa-arrow-right" },
+  // update: { text: "Update", color: "emerald", iconPosition: "prefix", icon: "far fa-sync" },
+  // agree: { text: "Agree", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // accept: { text: "Accept Terms", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // delete: { text: "Delete", color: "red", iconPosition: "prefix", icon: "far fa-trash-alt" },
+  // cancel: { text: "Cancel", color: "red", iconPosition: "prefix", icon: "far fa-times" },
+  // close: { text: "Close", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // try: { text: "Try Again", color: "red", iconPosition: "prefix", icon: "far fa-redo" },
+  // retry: { text: "Retry", color: "red", iconPosition: "prefix", icon: "far fa-redo" },
+  // decline: { text: "Decline", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // reject: { text: "Reject", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // warning: { text: "Warning", color: "amber", iconPosition: "prefix", icon: "far fa-exclamation-circle" },
+  // retry: { text: "Retry", color: "amber", iconPosition: "prefix", icon: "far fa-redo" },
+  // skip: { text: "Skip", color: "amber", iconPosition: "prefix", icon: "far fa-chevron-double-right" },
+  // review: { text: "Review", color: "amber", iconPosition: "prefix", icon: "far fa-search" },
+  // back: { text: "Back", color: "amber", iconPosition: "prefix", icon: "far fa-arrow-left" },
 };
 export var VariantProps;
 (function (VariantProps) {
+  // Old variant props
   VariantProps["save"] = "save";
-  VariantProps["submit"] = "submit";
   VariantProps["ok"] = "ok";
   VariantProps["new"] = "new";
   VariantProps["add"] = "add";
   VariantProps["create"] = "create";
-  VariantProps["apply"] = "apply";
-  VariantProps["prev"] = "prev";
-  VariantProps["next"] = "next";
   VariantProps["send"] = "send";
   VariantProps["delete"] = "delete";
   VariantProps["cancel"] = "cancel";
@@ -160,11 +83,55 @@ export var VariantProps;
   VariantProps["close"] = "close";
   VariantProps["archive"] = "archive";
   VariantProps["remove"] = "remove";
+  VariantProps["prev"] = "prev";
+  VariantProps["next"] = "next";
+  VariantProps["apply"] = "apply";
+  VariantProps["submit"] = "submit";
   VariantProps["edit"] = "edit";
   VariantProps["export"] = "export";
   VariantProps["import"] = "import";
   VariantProps["filter"] = "filter";
   VariantProps["update"] = "update";
-  VariantProps["reset"] = "Reset";
+  VariantProps["reset"] = "reset";
   VariantProps["download"] = "download";
+  // New variant props
+  // edit = "edit",
+  // send = "send",
+  // submit = "submit",
+  // add = "add",
+  // setting = "setting",
+  // download = "download",
+  // export = "export",
+  // import = "import",
+  // filter = "filter",
+  // register = "register",
+  // save = "save",
+  // create = "create",
+  // okey = "okey",
+  // back = "back",
+  // return = "return",
+  // next = "next",
+  // new = "new",
+  // late = "late",
+  // view = "view",
+  // submit = "submit",
+  // save = "save",
+  // confirm = "confirm",
+  // proceed = "proceed",
+  // continue = "continue",
+  // update = "update",
+  // agree = "agree",
+  // accept = "accept",
+  // delete = "delete",
+  // cancel = "cancel",
+  // close = "close",
+  // try = "try",
+  // retry = "retry",
+  // decline = "decline",
+  // reject = "reject",
+  // warning = "warning",
+  // retry = "retry",
+  // skip = "skip",
+  // review = "review",
+  // back = "back",
 })(VariantProps || (VariantProps = {}));

package/dist/collection/components/atoms/chip/chip.js

@@ -12,38 +12,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
-import cs from 'classnames';
-import { ColorHelper } from '../../../helper/color-helper';
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { h, Host } from "@stencil/core";
+import cs from "classnames";
 export class BcmChip {
   constructor() {
     this._id = Generate.UID();
-    this.type = 'default';
-    this.size = 'medium';
+    this.type = "default";
+    this.size = Bcm.Size.medium;
     this.avatar = undefined;
     this.icon = undefined;
     this.disabled = undefined;
-    this.color = undefined;
-  }
-  // @ts-ignore
-  setColor() {
-    if (!this.color)
-      return;
-    const color = this.color;
-    return {
-      '--bcm-chip-color': ColorHelper.dsColor(color + '-500'),
-      '--bcm-chip-color-hover': ColorHelper.dsColor(color + '-500'),
-      '--bcm-chip-color-focus': ColorHelper.dsColor(color + '-600'),
-      '--bcm-chip-color-active': ColorHelper.dsColor(color + '-700'),
-      '--bcm-chip-color-disabled': ColorHelper.dsColor('slate' + '-300'),
-      '--bcm-chip-background-color': ColorHelper.dsColor(color + '-100'),
-      '--bcm-chip-background-color-hover': ColorHelper.dsColor(color + '-200'),
-      '--bcm-chip-background-color-focus': ColorHelper.dsColor(color + '-300'),
-      '--bcm-chip-background-color-active': ColorHelper.dsColor(color + '-200'),
-      '--bcm-chip-background-color-disabled': ColorHelper.dsColor('slate' + '-100'),
-    };
+    this.color = "slate";
   }
   handleDismiss(e) {
     e.stopPropagation();
@@ -57,28 +39,23 @@ export class BcmChip {
   }
   render() {
     const { type, size, avatar, disabled, color } = this;
-    const hostClasses = cs('bcm-chip', `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
-      'bcm-chip--disabled': disabled,
-      'bcm-chip--avatar': avatar,
-    });
-    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === 'addable' && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" })))));
+    const defaultColors = Generate.getTwColor({ color });
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display bcm-chip", "tw-inline-flex tw-w-fit tw-items-center tw-justify-center tw-gap-1 tw-rounded-full tw-font-sans tw-font-normal tw-outline-none tw-transition tw-duration-100 tw-ease-in-out", {
+        "tw-text-size-3": size === "small",
+        "tw-text-size-4": size === "medium",
+        "tw-text-size-5": size === "large",
+        "tw-px-2": !avatar,
+        "tw-pr-2": avatar,
+        "tw-bg-default-200 tw-text-default-700 hover:tw-bg-default-300": !disabled,
+        "tw-cursor-not-allowed tw-bg-slate-300 tw-text-slate-500": disabled,
+      }), tabindex: "0", style: Object.assign({}, defaultColors), onClick: e => !disabled && this.bcmChipSelect.emit(e) }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && h("i", { class: "far fa-plus", onClick: e => !disabled && this.handleAddable(e) }), h("slot", null), type === "dismissable" && h("i", { class: "fal fa-times tw-cursor-pointer", onClick: e => !disabled && this.handleDismiss(e) })));
   }
   static get is() { return "bcm-chip"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["chip.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["chip.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -96,9 +73,9 @@ export class BcmChip {
       },
       "type": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "'default' | 'dismissable' | 'addable' | 'checkable'",
+          "original": "\"default\" | \"dismissable\" | \"addable\" | \"checkable\"",
           "resolved": "\"addable\" | \"checkable\" | \"default\" | \"dismissable\"",
           "references": {}
         },
@@ -110,15 +87,20 @@ export class BcmChip {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "'small' | 'medium' | 'large'",
+          "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -128,11 +110,11 @@ export class BcmChip {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'medium'"
+        "defaultValue": "Bcm.Size.medium"
       },
       "avatar": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -149,7 +131,7 @@ export class BcmChip {
       },
       "icon": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -166,7 +148,7 @@ export class BcmChip {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "false",
           "resolved": "boolean",
@@ -182,11 +164,11 @@ export class BcmChip {
         "reflect": false
       },
       "color": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -196,7 +178,8 @@ export class BcmChip {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"slate\""
       }
     };
   }

package/dist/collection/components/atoms/divider/divider.js

@@ -12,10 +12,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import Bcm from '../../../models/bcm';
+import { IsLoad } from "@bcm/decorator";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
 export class BcmDivider {
   constructor() {
     this.hidden = false;
@@ -23,27 +23,18 @@ export class BcmDivider {
   }
   render() {
     const { hidden, direction } = this;
-    const hostClasses = cs('bcm-divider', 'bcm-divider__direction-' + direction, {
-      'hidden': hidden
-    });
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null))));
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display bcm-divider", "tw-block tw-border tw-border-solid tw-border-slate-300", {
+        "tw-mx-auto tw-my-1 tw-h-[1px] tw-w-full": direction === Bcm.Direction.horizontal,
+        "tw-mx-1 tw-my-0 tw-h-auto tw-min-h-[24px] tw-w-[1px]": direction === Bcm.Direction.vertical,
+        "tw-hidden": hidden,
+      }) }, h("span", { hidden: true }, h("slot", null))));
   }
   static get is() { return "bcm-divider"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["divider.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["divider.css"]
-    };
-  }
   static get properties() {
     return {
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -61,14 +52,14 @@ export class BcmDivider {
       },
       "direction": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "DirectionTypes",
           "resolved": "\"horizontal\" | \"vertical\"",
           "references": {
             "DirectionTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },

package/dist/collection/components/atoms/icon/icon.js

@@ -12,51 +12,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
+import { IconTemplate } from "@bcm/template";
+import { h } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
 export class BcmIcon {
   constructor() {
-    this.hidden = false;
     this.icon = undefined;
   }
   render() {
-    const { icon, hidden } = this;
-    return (h(Host, { class: `bcm-icon fa ${hidden ? 'hidden' : ''}` }, h("i", { class: `${icon}` })));
+    return h(IconTemplate, { icon: this.icon });
   }
   static get is() { return "bcm-icon"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
   static get properties() {
     return {
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "icon": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",