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

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

@@ -4,60 +4,38 @@
  */
 import { Host, getAssetPath, h } from "@stencil/core";
 const customIconList = {
-  "message-bot": "message-bot.svg",
+  "message-bot": {
+    icon: "message-bot.svg",
+    type: "image", // font, image
+  },
 };
 export class BcmIcon {
   constructor() {
-    this.hidden = false;
     this.icon = undefined;
   }
   getIcon() {
     const { icon } = this;
-    if (icon in customIconList) {
-      const _icon = getAssetPath("./static/" + customIconList[icon]);
-      return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    if (customIconList[icon]) {
+      if (customIconList[icon].type === "image") {
+        const _icon = getAssetPath("./static/" + customIconList[icon].icon);
+        return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+      }
+      else {
+        return h("i", { class: `${customIconList[icon].icon}` });
+      }
     }
     return h("i", { class: `${icon}` });
   }
   render() {
-    const { /*icon,*/ hidden } = this;
-    return h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
+    return h(Host, { class: "bcm-icon" }, this.getIcon());
   }
   static get is() { return "bcm-icon"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
   static get assetsDirs() { return ["static"]; }
   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",
@@ -74,5 +52,4 @@ export class BcmIcon {
       }
     };
   }
-  static get elementRef() { return "el"; }
 }

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

@@ -29,10 +29,11 @@ export class BcmLabel {
     this.hidden = false;
     this.type = Bcm.Status.default;
     this.tooltip = undefined;
+    this.noMargin = false;
   }
   render() {
-    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
-    return (h(Host, { class: "tw-inline-block tw-leading-none" }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+    const { required, value, label, size, form, htmlFor, type, tooltip, noMargin } = this;
+    return (h(Host, { class: "tw-inline-block tw-leading-none" }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip, noMargin: noMargin })));
   }
   static get is() { return "bcm-label"; }
   static get properties() {
@@ -221,6 +222,24 @@ export class BcmLabel {
         },
         "attribute": "tooltip",
         "reflect": false
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -2,58 +2,63 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import Bcm from '../../../models/bcm';
+import { Host, h } from "@stencil/core";
+import Bcm from "../../../models/bcm";
+import { linkStyle } from "./link.style";
 export class BcmLink {
   constructor() {
-    this.hidden = false;
+    this.isLink = () => !!this.href;
+    this.isExternal = (url) => url && !!(url.startsWith("http") || url.startsWith("//"));
     this.href = undefined;
-    this.target = undefined;
+    this.target = Bcm.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
     this.icon = undefined;
     this.disabled = false;
     this.iconPosition = Bcm.IconPosition.prefix;
-  }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  linkIsExternal(url) {
-    return url && !!(url.startsWith('http') || url.startsWith('//'));
+    this.size = Bcm.Size.medium;
   }
   render() {
-    const { href, icon, hidden, target, iconPosition, disabled } = this;
-    const hostClasses = cs('bcm-link', {
+    const { icon, iconPosition, disabled, size } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": "link" }, (!disabled && {
+      onClick: e => {
+        this.bcmLinkClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "span";
+    const { hostStyle, base } = linkStyle({
+      size,
       disabled,
-      hidden
     });
-    const classes = cs('bcm-link__anchor', iconPosition, {
-      'suffix': this.linkIsExternal(href)
-    });
-    const ElementTagType = href ? 'a' : 'span';
-    return (h(Host, { disabled: disabled, class: hostClasses }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (h(Host, { class: hostStyle() }, h(Tag, Object.assign({ class: base() }, (this.isLink() ? linkAttributes : {}), commonAttributes), icon && iconPosition === Bcm.IconPosition.prefix && h("i", { class: icon }), h("slot", null), this.isExternal(href) && h("i", { class: "far fa-external-link-alt" }))));
   }
   static get is() { return "bcm-link"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["link.css"]
-    };
-  }
   static get properties() {
     return {
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
+      "href": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -62,13 +67,35 @@ export class BcmLink {
           "tags": [],
           "text": ""
         },
-        "attribute": "hidden",
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TargetTypes | string",
+          "resolved": "string",
+          "references": {
+            "TargetTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "Bcm.Target[\"_blank\"]"
       },
-      "href": {
+      "rel": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -80,29 +107,30 @@ export class BcmLink {
           "tags": [],
           "text": ""
         },
-        "attribute": "href",
-        "reflect": false
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "\"noreferrer noopener\""
       },
-      "target": {
+      "download": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "target",
+        "attribute": "download",
         "reflect": false
       },
       "icon": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -119,7 +147,7 @@ export class BcmLink {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -132,12 +160,12 @@ export class BcmLink {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "iconPosition": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "IconPositionTypes",
           "resolved": "\"prefix\" | \"suffix\"",
@@ -157,17 +185,63 @@ export class BcmLink {
         "attribute": "icon-position",
         "reflect": false,
         "defaultValue": "Bcm.IconPosition.prefix"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes | \"inherit\"",
+          "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "../../../models/bcm-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
       }
     };
   }
-  static get elementRef() { return "el"; }
-  static get listeners() {
+  static get events() {
     return [{
-        "name": "click",
-        "method": "handleOnClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
+        "method": "bcmLinkClick",
+        "name": "bcm-link-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmClick",
+        "name": "bcm-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
 }

package/dist/collection/components/atoms/link/link.style.js

@@ -0,0 +1,39 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const linkStyle = tv({
+  slots: {
+    base: ["bcm-link__anchor tw-flex tw-items-baseline tw-justify-center tw-gap-2 tw-no-underline", "tw-outline-none"],
+    hostStyle: "bcm-link bcm-ui-element bcm-ui-action tw-inline tw-w-fit",
+  },
+  variants: {
+    size: {
+      small: {
+        base: "tw-text-size-4 tw-font-medium",
+      },
+      medium: {
+        base: "tw-text-size-5 tw-font-medium",
+      },
+      large: {
+        base: "tw-text-size-6 tw-font-medium",
+      },
+      inherit: {
+        base: "",
+      },
+    },
+    disabled: {
+      true: {
+        base: "tw-cursor-not-allowed tw-pointer-events-none tw-text-color-disabled",
+      },
+      false: {
+        base: "tw-cursor-pointer tw-text-color-primary hover:tw-underline visited:tw-text-color-visited focus-visible:tw-ring",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false
+  },
+});

package/dist/collection/components/molecules/accordion/accordion.js

@@ -54,24 +54,14 @@ export class BcmAccordion {
     }
   }
   render() {
-    return (h(Host, { id: this._id }, h("slot", null)));
+    return (h(Host, { id: this._id, class: "tw-block" }, h("slot", null)));
   }
   static get is() { return "bcm-accordion"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["accordion.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["accordion.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -89,7 +79,7 @@ export class BcmAccordion {
       },
       "multi": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",