bromcom-ui 2.8.1-rc.0 → 2.8.1-rc.10-0

package/dist/collection/components/molecules/menu/menu.css

@@ -128,29 +128,32 @@
 }
 
 .bcm-menu {
-  --bcm-menu-color-default: var(--bcm-new-ds-color-slate-600);
+  --bcm-menu-color-default: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-background-color-default: var(--bcm-new-ds-color-transparent);
-  --bcm-menu-icon-color-default: var(--bcm-new-ds-color-slate-400);
-  --bcm-menu-color-hover: var(--bcm-new-ds-color-slate-700);
+  --bcm-menu-icon-color-default: var(--bcm-new-ds-color-slate-600);
+  --bcm-menu-color-hover: var(--bcm-new-ds-color-slate-800);
   --bcm-menu-background-color-hover: var(--bcm-new-ds-color-slate-50);
-  --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-500);
+  --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active: var(--bcm-new-ds-color-blue-500);
+  --bcm-menu-background-color-active: var(--bcm-color-primary-500);
   --bcm-menu-icon-color-active: var(--bcm-new-ds-color-white);
   --bcm-menu-color-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-focus-visible: var(--bcm-new-ds-color-blue-600);
+  --bcm-menu-background-color-focus-visible: var(--bcm-color-primary-600);
   --bcm-menu-icon-color-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-background-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-menu-icon-color-disabled: var(--bcm-new-ds-color-slate-50);
+  --bcm-menu-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
+  --bcm-menu-background-color-dropdownDisabled: var(--bcm-new-ds-color-transparent);
+  --bcm-menu-icon-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
   --bcm-menu-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-hover: var(--bcm-new-ds-color-blue-600);
+  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-400);
   --bcm-menu-icon-color-active-hover: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-focus-visible: var(--bcm-new-ds-color-blue-700);
+  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-700);
   --bcm-menu-icon-color-active-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-active: var(--bcm-new-ds-color-blue-800);
+  --bcm-menu-background-color-active-active: var(--bcm-color-primary-800);
   --bcm-menu-icon-color-active-active: var(--bcm-new-ds-color-white);
   font-family: "Inter", sans-serif;
   font-size: 14px;
@@ -170,7 +173,6 @@
   align-items: stretch;
   justify-content: flex-start;
   flex-wrap: nowrap;
-  gap: 16px;
 }
 .bcm-menu__item {
   display: flex;
@@ -286,6 +288,14 @@
 .bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle {
   color: var(--bcm-menu-icon-color-disabled);
 }
+.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) {
+  color: var(--bcm-menu-color-dropdownDisabled);
+  background-color: var(--bcm-menu-background-color-dropdownDisabled);
+}
+.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,
+.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle {
+  color: var(--bcm-menu-icon-color-dropdownDisabled);
+}
 .bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) {
   color: var(--bcm-menu-color-active);
   background-color: var(--bcm-menu-background-color-active);
@@ -465,4 +475,16 @@
 .bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active {
   color: var(--bcm-menu-color-active);
   background-color: var(--bcm-menu-background-color-active);
+}
+.bcm-menu__dropdown {
+  width: auto;
+  max-width: 210px;
+}
+.bcm-menu__dropdown .bcm-menu__item-link--disabled {
+  color: var(--bcm-menu-color-dropdownDisabled);
+  background-color: var(--bcm-menu-background-color-dropdownDisabled);
+}
+.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,
+.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle {
+  color: var(--bcm-menu-icon-color-dropdownDisabled);
 }

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

@@ -30,6 +30,8 @@ export class BcmMenu {
     this.maxHeight = '500px';
     this.minHeight = '150px';
     this.selectable = true;
+    this.gap = "16px";
+    this.dropdown = false;
     this.placement = 'bottom-start';
     this.activeItemId = undefined;
     this.data = [];
@@ -77,7 +79,8 @@ export class BcmMenu {
   render() {
     const { data, collapsible, collapse } = this;
     const hostClasses = cs('bcm-menu', `bcm-menu__size-${this.size}`, {
-      'bcm-menu__collapse': collapse
+      'bcm-menu__collapse': collapse,
+      'bcm-menu__dropdown': this.dropdown,
     });
     const MenuLinkTemplate = (item, index) => {
       if (!item.text)
@@ -105,7 +108,7 @@ export class BcmMenu {
           'bcm-menu__item-submenu--open': item.isOpen,
         }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
     };
-    return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container" }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
+    return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container", style: { gap: this.gap } }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: cs('bcm-menu__collapse-button', {
         'bcm-menu__collapse-button--collapsed': collapse,
       }), onClick: () => {
         this.collapse = !collapse;
@@ -340,6 +343,42 @@ export class BcmMenu {
         "reflect": false,
         "defaultValue": "true"
       },
+      "gap": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "gap",
+        "reflect": false,
+        "defaultValue": "\"16px\""
+      },
+      "dropdown": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "placement": {
         "type": "string",
         "mutable": true,

package/dist/collection/components/molecules/modal/modal.css

@@ -228,7 +228,7 @@
   line-height: calc(16px + 8px);
   font-weight: 500;
   color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-color-primary-50);
+  background-color: var(--bcm-new-ds-color-slate-100);
   position: relative;
 }
 .bcm-modal__container-header span.full-width {

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

@@ -54,14 +54,20 @@ export class BcmModal {
       this.hide();
     }
   }
-  async hide() {
-    this.beforeClose.emit(this.el);
-    this.isShow = false;
-    this.close.emit(this);
+  async hide(obj = { force: false }) {
+    if (obj === null || obj === void 0 ? void 0 : obj.force) {
+      this.isShow = false;
+      this.close.emit(); // Deprecated
+      return;
+    }
+    this.modalBeforeClose.emit(this.el);
   }
-  async show() {
-    this.beforeOpen.emit(this.el);
-    this.isShow = true;
+  async show(obj = { force: false }) {
+    if (obj === null || obj === void 0 ? void 0 : obj.force) {
+      this.isShow = true;
+      return;
+    }
+    this.modalBeforeOpen.emit(this.el);
   }
   keyboardNavigation(e) {
     if (this.backdrop == true) {
@@ -72,6 +78,24 @@ export class BcmModal {
       }
     }
   }
+  async showModal(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      this.isShow = true;
+      // document.body.appendChild(this.el); A solution must be found for this.
+    }
+  }
+  async hideModal(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      this.isShow = false;
+      this.close.emit(); // Deprecated
+    }
+  }
   _openHandler() {
     const disableScrollClass = `bcm-modal--disable-scroll-${this._id}`;
     if (this.isShow) {
@@ -265,8 +289,8 @@ export class BcmModal {
   }
   static get events() {
     return [{
-        "method": "beforeOpen",
-        "name": "beforeOpen",
+        "method": "close",
+        "name": "bcm-close",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -280,8 +304,8 @@ export class BcmModal {
           "references": {}
         }
       }, {
-        "method": "beforeClose",
-        "name": "beforeClose",
+        "method": "modalBeforeClose",
+        "name": "bcm-modal-before-close",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -295,8 +319,8 @@ export class BcmModal {
           "references": {}
         }
       }, {
-        "method": "close",
-        "name": "bcm-close",
+        "method": "modalBeforeOpen",
+        "name": "bcm-modal-before-open",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -315,8 +339,11 @@ export class BcmModal {
     return {
       "hide": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(obj?: { force: boolean; }) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -331,8 +358,11 @@ export class BcmModal {
       },
       "show": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(obj?: { force: boolean; }) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -367,6 +397,18 @@ export class BcmModal {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "bcm-modal-before-open",
+        "method": "showModal",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-modal-before-close",
+        "method": "hideModal",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -14,9 +14,10 @@ export class BcmPopover {
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
-    this.targetId = undefined;
     this.openDelay = 0;
     this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
     this.popover = undefined;
   }
   emitShow() {
@@ -35,6 +36,7 @@ export class BcmPopover {
       trigger: this.trigger,
       openDelay: this.openDelay,
       closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
       emitShow: () => this.emitShow(),
       emitHide: () => this.emitHide(),
     });
@@ -49,6 +51,9 @@ export class BcmPopover {
     this.popover.placement = placement;
     this.popover.color = color;
     this.popover.trigger = trigger;
+    this.popover.openDelay = this.openDelay;
+    this.popover.closeDelay = this.closeDelay;
+    this.popover.autoHide = this.autoHide;
     this.popover.update();
   }
   disconnectedCallback() {
@@ -205,12 +210,12 @@ export class BcmPopover {
         "reflect": false,
         "defaultValue": "\"white\""
       },
-      "targetId": {
-        "type": "string",
+      "openDelay": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
@@ -219,10 +224,11 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "target-id",
-        "reflect": false
+        "attribute": "open-delay",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "openDelay": {
+      "closeDelay": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -236,16 +242,16 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "open-delay",
+        "attribute": "close-delay",
         "reflect": false,
         "defaultValue": "0"
       },
-      "closeDelay": {
-        "type": "number",
+      "autoHide": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -254,9 +260,26 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "close-delay",
+        "attribute": "auto-hide",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "false"
+      },
+      "targetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target-id",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/molecules/search/search.css

@@ -356,7 +356,6 @@
   -moz-appearance: none;
   appearance: none;
   outline: none;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -446,9 +445,6 @@
 .bcm-input__container--large {
   font-size: 16px;
 }
-.bcm-input__textarea .bcm-input-element {
-  white-space: normal;
-}
 .bcm-input__textarea.clearable .bcm-input-element {
   padding-right: 24px;
 }