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

package/dist/collection/components/molecules/expansion-panel/bcm-expansion-panel-description.js

@@ -0,0 +1,16 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmExpansionPanelDescription {
+  constructor() {
+    this.el.slot = "description";
+  }
+  render() {
+    return (h(Host, { class: cs("") }, h("slot", null)));
+  }
+  static get is() { return "bcm-expansion-panel-description"; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/expansion-panel/bcm-expansion-panel-extra.js

@@ -0,0 +1,16 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmExpansionPanelExtra {
+  constructor() {
+    this.el.slot = "extra";
+  }
+  render() {
+    return (h(Host, { class: cs("bcm-expansion-panel__header-content tw-flex tw-items-center tw-gap-1") }, h("slot", null)));
+  }
+  static get is() { return "bcm-expansion-panel-extra"; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/expansion-panel/bcm-expansion-panel-header.js

@@ -0,0 +1,16 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmExpansionPanelHeader {
+  constructor() {
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: cs("bcm-expansion-panel__header-content tw-flex tw-items-center tw-justify-start tw-gap-1") }, h("slot", null)));
+  }
+  static get is() { return "bcm-expansion-panel-header"; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/expansion-panel/expansion-panel.js

@@ -2,11 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import { Generate } from '../../../helper/generate';
-import cs from 'classnames';
-import { StringHelper } from '../../../helper/string-helper';
-import { ColorHelper } from '../../../helper/color-helper';
+import { h, Host } from "@stencil/core";
+import { ColorHelper } from "../../../helper/color-helper";
+import { Generate } from "../../../helper/generate";
+import { expansionPanelStyle } from "./expansion-panel.style";
 export class BcmExpansionPanel {
   constructor() {
     this._id = Generate.UID();
@@ -15,20 +14,16 @@ export class BcmExpansionPanel {
     this.hidden = false;
     this.valid = true;
     this.hideToggle = false;
-    this.expandIconPosition = 'right';
-    this.headerColor = 'white';
+    this.expandIconPosition = "right";
     this.tooltip = undefined;
     this.tooltipDefaultValue = {
-      message: '',
-      placement: 'top',
-      trigger: 'hover',
-      icon: 'fas fa-question-circle',
-      color: 'grey-8',
+      message: "",
+      placement: "top",
+      trigger: "hover",
+      icon: "fas fa-question-circle",
+      color: "slate-700",
     };
   }
-  componentWillRender() {
-    this.restoreSlots();
-  }
   componentDidLoad() {
     this.checkExpanded();
   }
@@ -47,67 +42,47 @@ export class BcmExpansionPanel {
     return tool;
   }
   checkExpanded() {
-    this.expanded = !!this.el['expanded'];
-  }
-  restoreSlots() {
-    const slots = this.el.querySelectorAll('bcm-expansion-panel-header, bcm-expansion-panel-description, bcm-expansion-panel-extra');
-    if (slots) {
-      slots.forEach(element => {
-        let slotName = StringHelper.lowercase(StringHelper.split(element.nodeName, '-').pop());
-        element.slot = slotName;
-        element.classList.add(`bcm-expansion-panel__${slotName}-content`);
-        let color = element.getAttribute('color');
-        if (color) {
-          color = color == 'white' ? color : color + '-50';
-          this.headerColor = color;
-        }
-      });
-    }
+    this.expanded = !!this.el["expanded"];
   }
   toggle() {
     if (this.disabled) {
       return;
     }
     this.expanded = !this.expanded;
+    this.bcmExpansionPanelToggle.emit(this._id);
     if (this.expanded) {
       this.bcmOpen.emit(this._id);
+      this.bcmExpansionPanelOpen.emit(this._id);
     }
     else {
       this.bcmClose.emit(this._id);
+      this.bcmExpansionPanelClose.emit(this._id);
     }
   }
   clickExtra(e) {
     e.stopPropagation();
     this.bcmExtra.emit(e);
+    this.bcmExpansionPanelExtra.emit(e);
   }
   render() {
     const { _id, expanded, disabled, hidden, hideToggle, tooltip, valid } = this;
     const { message, placement, icon, trigger, color } = tooltip ? this.createTooltip() : {};
-    const hostClasses = cs('bcm-expansion-panel', valid ? 'bcm-expansion-panel--valid' : 'bcm-expansion-panel--invalid', {
-      'bcm-expansion-panel--expanded': expanded,
-      'bcm-expansion-panel--disabled': disabled,
-      'bcm-expansion-panel--hide-toggle': hideToggle,
-      'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
+    const { host, header, headerTitle, headerTitleDescription, headerTooltip, headerExtra, headerToggle, body } = expansionPanelStyle({
+      valid,
+      expanded,
+      disabled,
+      hideToggle,
+      expandIconPosition: this.expandIconPosition,
       hidden,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
+    return (h(Host, { class: host() }, h("div", { class: header(), onClick: () => this.toggle() }, h("div", { class: headerTitle() }, h("span", { id: _id + "-header" }, h("slot", { name: "header" })), tooltip && (h("span", { class: headerTooltip(), style: Object.assign({}, (color && { color: ColorHelper.getTwColor(color) })) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("i", { class: icon })))), h("span", { id: _id + "-description", class: headerTitleDescription() }, h("slot", { name: "description" }))), h("span", { id: _id + "-extra", class: headerExtra(), onClick: e => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: headerToggle() }, h("i", { class: "fas fa-chevron-down" })))), h("div", { class: body(), id: _id + "-body" }, h("slot", null))));
   }
   static get is() { return "bcm-expansion-panel"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["expansion-panel.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["expansion-panel.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -143,7 +118,7 @@ export class BcmExpansionPanel {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -161,7 +136,7 @@ export class BcmExpansionPanel {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -179,7 +154,7 @@ export class BcmExpansionPanel {
       },
       "valid": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -197,7 +172,7 @@ export class BcmExpansionPanel {
       },
       "hideToggle": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -215,9 +190,9 @@ export class BcmExpansionPanel {
       },
       "expandIconPosition": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "'right' | 'left'",
+          "original": "\"right\" | \"left\"",
           "resolved": "\"left\" | \"right\"",
           "references": {}
         },
@@ -229,11 +204,11 @@ export class BcmExpansionPanel {
         },
         "attribute": "expand-icon-position",
         "reflect": false,
-        "defaultValue": "'right'"
+        "defaultValue": "\"right\""
       },
       "tooltip": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -252,7 +227,6 @@ export class BcmExpansionPanel {
   }
   static get states() {
     return {
-      "headerColor": {},
       "tooltipDefaultValue": {}
     };
   }
@@ -272,6 +246,21 @@ export class BcmExpansionPanel {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmExpansionPanelOpen",
+        "name": "bcm-expansion-panel-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }, {
         "method": "bcmClose",
         "name": "bcm-close",
@@ -287,6 +276,21 @@ export class BcmExpansionPanel {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmExpansionPanelClose",
+        "name": "bcm-expansion-panel-close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }, {
         "method": "bcmExtra",
         "name": "bcm-extra",
@@ -302,6 +306,36 @@ export class BcmExpansionPanel {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmExpansionPanelExtra",
+        "name": "bcm-expansion-panel-extra",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmExpansionPanelToggle",
+        "name": "bcm-expansion-panel-toggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/molecules/expansion-panel/expansion-panel.style.js

@@ -0,0 +1,91 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const expansionPanelStyle = tv({
+  slots: {
+    base: "",
+    host: ["bcm-expansion-panel bcm-ui-element bcm-ui-feedback", "tw-block tw-w-full tw-bg-color-surface-card tw-rounded-cards tw-border tw-border-solid tw-border-color", "[&+.bcm-expansion-panel]:tw-mt-1"],
+    header: [
+      "bcm-expansion-panel__header",
+      "tw-flex tw-items-center tw-justify-start tw-gap-2 tw-select-none tw-min-h-14 tw-p-4 tw-text-color  tw-cursor-pointer",
+      "tw-border-solid tw-border-t-0 tw-border-x-0 tw-border-b",
+    ],
+    headerTitle: ["bcm-expansion-panel__header-title", "tw-order-1 tw-select-none tw-w-full tw-flex tw-items-baseline tw-justify-start tw-gap-2", "tw-text-size-6 tw-font-semibold "],
+    headerTitleDescription: ["bcm-expansion-panel__header-title-description", "tw-text-color-helper tw-text-size-3 tw-font-normal"],
+    headerTooltip: ["bcm-expansion-panel__header-tooltip", "tw-leading-none tw-text-size-5 tw-text-color-helper"],
+    headerExtra: ["bcm-expansion-panel__header-extra", "empty:tw-hidden tw-flex tw-items-center tw-order-5 tw-leading-none tw-py-0 tw-px-2"],
+    headerToggle: ["bcm-expansion-panel__header-toggle", "tw-h-full tw-w-5 tw-flex tw-items-center tw-justify-center  tw-transition-transform tw-duration-200 tw-text-size-5"],
+    body: "bcm-expansion-panel__body tw-p-4",
+  },
+  variants: {
+    valid: {
+      true: {
+        host: "bcm-expansion-panel--valid",
+      },
+      false: {
+        host: "bcm-expansion-panel--invalid",
+        headerToggle: "tw-text-red-500",
+        headerTitle: "tw-text-red-500",
+      },
+    },
+    expanded: {
+      true: {
+        host: ["bcm-expansion-panel--expanded", "tw-border-b"],
+        header: "tw-rounded-t-cards tw-rounded-b-none tw-border-b-color",
+        headerToggle: "tw-rotate-180",
+        body: "tw-block",
+      },
+      false: {
+        host: "bcm-expansion-panel--collapsed",
+        header: "tw-rounded-cards  tw-border-b-transparent",
+        headerToggle: "tw-rotate-0 ",
+        body: "tw-hidden",
+      },
+    },
+    disabled: {
+      true: {
+        host: "bcm-expansion-panel--disabled ",
+      },
+      false: {
+        host: "",
+      },
+    },
+    hideToggle: {
+      true: {
+        host: "bcm-expansion-panel--hide-toggle",
+      },
+      false: {
+        host: "",
+      },
+    },
+    expandIconPosition: {
+      right: {
+        host: "bcm-expansion-panel--icon-right",
+        // header: "tw-justify-between tw-pl-6",
+        headerToggle: "tw-order-6",
+      },
+      left: {
+        host: "bcm-expansion-panel--icon-left ",
+        // headerToggle: "tw-pr-6",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden",
+      },
+      false: {
+        host: "",
+      },
+    },
+  },
+  defaultVariants: {
+    valid: true,
+    expanded: false,
+    disabled: false,
+    hideToggle: false,
+    expandIconPosition: "right",
+    hidden: false,
+  },
+});