bromcom-ui 2.4.26 → 2.4.29

package/dist/collection/components/molecules/popconfirm/popconfirm-box.css

@@ -18532,7 +18532,7 @@
   /* left-start & right-start */
   /* left-end & right-end */
 }
-.bcm-popconfirm-box .box {
+.bcm-popconfirm-box .bcm-pop-box {
   position: absolute;
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -18545,19 +18545,19 @@
   filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));
   padding: 8px 16px;
 }
-.bcm-popconfirm-box .box .content {
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content {
   display: flex;
 }
-.bcm-popconfirm-box .box .content .icon {
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content .icon {
   margin-right: 8px;
   margin-top: 4px;
 }
-.bcm-popconfirm-box .box .buttons {
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons {
   display: flex;
   justify-content: flex-end;
   margin-top: 8px;
 }
-.bcm-popconfirm-box .box .buttons bcm-button:first-child {
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child {
   margin-right: 8px;
 }
 .bcm-popconfirm-box::after {
@@ -18568,19 +18568,19 @@
   z-index: 10700;
   pointer-events: none;
 }
-.bcm-popconfirm-box.open {
+.bcm-popconfirm-box.bcm-pop-open {
   display: block;
   z-index: 10700;
 }
-.bcm-popconfirm-box.open .box {
+.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box {
   z-index: 10700;
   overflow: unset;
   visibility: unset;
 }
-.bcm-popconfirm-box.open .box, .bcm-popconfirm-box.open::after {
+.bcm-popconfirm-box.bcm-pop-open .bcm-pop-box, .bcm-popconfirm-box.bcm-pop-open::after {
   display: block;
 }
-.bcm-popconfirm-box.top .box {
+.bcm-popconfirm-box.top .bcm-pop-box {
   bottom: 100%;
   margin-bottom: 16px;
 }
@@ -18589,7 +18589,7 @@
   margin-bottom: 4px;
   border-color: #FFFFFF transparent transparent transparent;
 }
-.bcm-popconfirm-box.bottom .box {
+.bcm-popconfirm-box.bottom .bcm-pop-box {
   top: 100%;
   margin-top: 16px;
 }
@@ -18598,7 +18598,7 @@
   margin-top: 4px;
   border-color: transparent transparent #FFFFFF transparent;
 }
-.bcm-popconfirm-box.left .box {
+.bcm-popconfirm-box.left .bcm-pop-box {
   right: 100%;
   margin-right: 16px;
 }
@@ -18607,7 +18607,7 @@
   margin-right: 4px;
   border-color: transparent transparent transparent #FFFFFF;
 }
-.bcm-popconfirm-box.right .box {
+.bcm-popconfirm-box.right .bcm-pop-box {
   left: 100%;
   margin-left: 16px;
 }
@@ -18616,7 +18616,7 @@
   margin-left: 4px;
   border-color: transparent #FFFFFF transparent transparent;
 }
-.bcm-popconfirm-box.top.center .box, .bcm-popconfirm-box.bottom.center .box {
+.bcm-popconfirm-box.top.center .bcm-pop-box, .bcm-popconfirm-box.bottom.center .bcm-pop-box {
   left: 50%;
   transform: translateX(-50%);
 }
@@ -18624,19 +18624,19 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.bcm-popconfirm-box.top.start .box, .bcm-popconfirm-box.bottom.start .box {
+.bcm-popconfirm-box.top.start .bcm-pop-box, .bcm-popconfirm-box.bottom.start .bcm-pop-box {
   left: 0;
 }
 .bcm-popconfirm-box.top.start::after, .bcm-popconfirm-box.bottom.start::after {
   left: 16px;
 }
-.bcm-popconfirm-box.top.end .box, .bcm-popconfirm-box.bottom.end .box {
+.bcm-popconfirm-box.top.end .bcm-pop-box, .bcm-popconfirm-box.bottom.end .bcm-pop-box {
   right: 0;
 }
 .bcm-popconfirm-box.top.end::after, .bcm-popconfirm-box.bottom.end::after {
   right: 16px;
 }
-.bcm-popconfirm-box.left.center .box, .bcm-popconfirm-box.right.center .box {
+.bcm-popconfirm-box.left.center .bcm-pop-box, .bcm-popconfirm-box.right.center .bcm-pop-box {
   top: 50%;
   transform: translateY(-50%);
 }
@@ -18644,13 +18644,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.bcm-popconfirm-box.left.start .box, .bcm-popconfirm-box.right.start .box {
+.bcm-popconfirm-box.left.start .bcm-pop-box, .bcm-popconfirm-box.right.start .bcm-pop-box {
   top: 0;
 }
 .bcm-popconfirm-box.left.start::after, .bcm-popconfirm-box.right.start::after {
   top: 12px;
 }
-.bcm-popconfirm-box.left.end .box, .bcm-popconfirm-box.right.end .box {
+.bcm-popconfirm-box.left.end .bcm-pop-box, .bcm-popconfirm-box.right.end .bcm-pop-box {
   bottom: 0;
 }
 .bcm-popconfirm-box.left.end::after, .bcm-popconfirm-box.right.end::after {
@@ -18668,9 +18668,9 @@
 .bcm-popconfirm-box.right {
   transform: translateX(-1px);
 }
-.bcm-popconfirm-box.top.open, .bcm-popconfirm-box.bottom.open {
+.bcm-popconfirm-box.top.bcm-pop-open, .bcm-popconfirm-box.bottom.bcm-pop-open {
   transform: translateY(0);
 }
-.bcm-popconfirm-box.left.open, .bcm-popconfirm-box.right.open {
+.bcm-popconfirm-box.left.bcm-pop-open, .bcm-popconfirm-box.right.bcm-pop-open {
   transform: translateX(0);
 }

package/dist/collection/components/molecules/popconfirm/popconfirm-box.js

@@ -37,7 +37,7 @@ export class BcmPopconfirmBox {
   calculateLocation() {
     if (this.open) {
       var placement = this.placement;
-      const box = this.el.querySelector('.box');
+      const box = this.el.querySelector('.bcm-pop-box');
       const targetElement = document.getElementById(this._target_id).children[0];
       if (box && targetElement) {
         getPlacement(box, targetElement, placement, (place) => placement = place);
@@ -66,16 +66,16 @@ export class BcmPopconfirmBox {
   render() {
     const { message, cancelText, okeyText, open, placement_string, status } = this;
     const statusies = statuses[status];
-    const boxClasses = cs('box');
+    const boxClasses = cs('bcm-pop-box');
     const hostClasses = cs('bcm-popconfirm-box', placement_string, {
-      open
+      'bcm-pop-open': open,
     });
     return (h(Host, { class: hostClasses },
       h("div", { class: boxClasses },
-        h("div", { class: "content" },
+        h("div", { class: "bcm-pop-content" },
           h("bcm-icon", { class: "icon", icon: statusies[0], type: "fill", color: statusies[1] }),
           h("bcm-text", { scale: "size-2", innerHTML: message })),
-        h("div", { class: "buttons" },
+        h("div", { class: "bcm-pop-buttons" },
           h("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText),
           h("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
   }
@@ -269,7 +269,7 @@ export class BcmPopconfirmBox {
   }; }
   static get events() { return [{
       "method": "onConfirm",
-      "name": "bcm-confirm",
+      "name": "bcm-popconfirm-confirm",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -284,7 +284,7 @@ export class BcmPopconfirmBox {
       }
     }, {
       "method": "onCancel",
-      "name": "bcm-cancel",
+      "name": "bcm-popconfirm-cancel",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Method, Prop, Event, Element } from '@stencil/core';
+import { Component, h, Host, Method, Prop, Event, Element, Listen } from '@stencil/core';
 import cs from 'classnames';
 import { Generate } from '../../../helper/generate';
 import Bcm from '../../../models/bcm';
@@ -66,6 +66,12 @@ export class BcmPopconfirm {
       default: break;
     }
   }
+  onBcmConfirm(e) {
+    e.detail == this._id && (this.onConfirm.emit(this._id));
+  }
+  onBcmCancel(e) {
+    e.detail == this._id && (this.onCancel.emit(this._id));
+  }
   render() {
     const popconfirmClasses = cs('bcm-popconfirm');
     return (h(Host, { class: popconfirmClasses, onclick: () => this.listenTrigger('click'), tabindex: 0 },
@@ -281,6 +287,36 @@ export class BcmPopconfirm {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "onConfirm",
+      "name": "bcm-confirm",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onCancel",
+      "name": "bcm-cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "show": {
@@ -317,4 +353,17 @@ export class BcmPopconfirm {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "bcm-popconfirm-confirm",
+      "method": "onBcmConfirm",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-popconfirm-cancel",
+      "method": "onBcmCancel",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/molecules/popover/popover-box.css

@@ -18532,7 +18532,7 @@
   /* left-start & right-start */
   /* left-end & right-end */
 }
-.bcm-popover-box .box {
+.bcm-popover-box .bcm-pop-box {
   position: absolute;
   box-sizing: border-box;
   background-color: #FFFFFF;
@@ -18549,21 +18549,21 @@
   z-index: -99999;
   filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));
 }
-.bcm-popover-box .box.open {
+.bcm-popover-box .bcm-pop-box.bcm-pop-open {
   overflow: unset;
   visibility: visible;
   height: unset;
 }
-.bcm-popover-box .box .heading,
-.bcm-popover-box .box .content {
+.bcm-popover-box .bcm-pop-box .bcm-pop-heading,
+.bcm-popover-box .bcm-pop-box .bcm-pop-content {
   display: block;
 }
-.bcm-popover-box .box .heading {
+.bcm-popover-box .bcm-pop-box .bcm-pop-heading {
   padding: 4px 16px;
   border-bottom: 1px solid #D9D9D9;
   color: var(--bcm-color-grey-9);
 }
-.bcm-popover-box .box .content {
+.bcm-popover-box .bcm-pop-box .bcm-pop-content {
   padding: 8px 16px;
   color: var(--bcm-color-grey-8);
 }
@@ -18575,19 +18575,19 @@
   z-index: 10700;
   pointer-events: none;
 }
-.bcm-popover-box.open {
+.bcm-popover-box.bcm-pop-open {
   display: block;
   z-index: 10700;
 }
-.bcm-popover-box.open .box {
+.bcm-popover-box.bcm-pop-open .bcm-pop-box {
   z-index: 10700;
   overflow: unset;
   visibility: unset;
 }
-.bcm-popover-box.open .box, .bcm-popover-box.open::after {
+.bcm-popover-box.bcm-pop-open .bcm-pop-box, .bcm-popover-box.bcm-pop-open::after {
   display: block;
 }
-.bcm-popover-box.top .box {
+.bcm-popover-box.top .bcm-pop-box {
   bottom: 100%;
   margin-bottom: 16px;
 }
@@ -18596,7 +18596,7 @@
   margin-bottom: 4px;
   border-color: #FFFFFF transparent transparent transparent;
 }
-.bcm-popover-box.bottom .box {
+.bcm-popover-box.bottom .bcm-pop-box {
   top: 100%;
   margin-top: 16px;
 }
@@ -18605,7 +18605,7 @@
   margin-top: 4px;
   border-color: transparent transparent #FFFFFF transparent;
 }
-.bcm-popover-box.left .box {
+.bcm-popover-box.left .bcm-pop-box {
   right: 100%;
   margin-right: 16px;
 }
@@ -18614,7 +18614,7 @@
   margin-right: 4px;
   border-color: transparent transparent transparent #FFFFFF;
 }
-.bcm-popover-box.right .box {
+.bcm-popover-box.right .bcm-pop-box {
   left: 100%;
   margin-left: 16px;
 }
@@ -18623,7 +18623,7 @@
   margin-left: 4px;
   border-color: transparent #FFFFFF transparent transparent;
 }
-.bcm-popover-box.top.center .box, .bcm-popover-box.bottom.center .box {
+.bcm-popover-box.top.center .bcm-pop-box, .bcm-popover-box.bottom.center .bcm-pop-box {
   left: 50%;
   transform: translateX(-50%);
 }
@@ -18631,19 +18631,19 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.bcm-popover-box.top.start .box, .bcm-popover-box.bottom.start .box {
+.bcm-popover-box.top.start .bcm-pop-box, .bcm-popover-box.bottom.start .bcm-pop-box {
   left: 0;
 }
 .bcm-popover-box.top.start::after, .bcm-popover-box.bottom.start::after {
   left: 16px;
 }
-.bcm-popover-box.top.end .box, .bcm-popover-box.bottom.end .box {
+.bcm-popover-box.top.end .bcm-pop-box, .bcm-popover-box.bottom.end .bcm-pop-box {
   right: 0;
 }
 .bcm-popover-box.top.end::after, .bcm-popover-box.bottom.end::after {
   right: 16px;
 }
-.bcm-popover-box.left.center .box, .bcm-popover-box.right.center .box {
+.bcm-popover-box.left.center .bcm-pop-box, .bcm-popover-box.right.center .bcm-pop-box {
   top: 50%;
   transform: translateY(-50%);
 }
@@ -18651,13 +18651,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.bcm-popover-box.left.start .box, .bcm-popover-box.right.start .box {
+.bcm-popover-box.left.start .bcm-pop-box, .bcm-popover-box.right.start .bcm-pop-box {
   top: 0;
 }
 .bcm-popover-box.left.start::after, .bcm-popover-box.right.start::after {
   top: 12px;
 }
-.bcm-popover-box.left.end .box, .bcm-popover-box.right.end .box {
+.bcm-popover-box.left.end .bcm-pop-box, .bcm-popover-box.right.end .bcm-pop-box {
   bottom: 0;
 }
 .bcm-popover-box.left.end::after, .bcm-popover-box.right.end::after {
@@ -18675,9 +18675,9 @@
 .bcm-popover-box.right {
   transform: translateX(-1px);
 }
-.bcm-popover-box.top.open, .bcm-popover-box.bottom.open {
+.bcm-popover-box.top.bcm-pop-open, .bcm-popover-box.bottom.bcm-pop-open {
   transform: translateY(0);
 }
-.bcm-popover-box.left.open, .bcm-popover-box.right.open {
+.bcm-popover-box.left.bcm-pop-open, .bcm-popover-box.right.bcm-pop-open {
   transform: translateX(0);
 }

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

@@ -28,7 +28,7 @@ export class BcmPopoverBox {
   calculateLocation() {
     if (this.open) {
       var placement = this.placement;
-      const box = this.el.querySelector('.box');
+      const box = this.el.querySelector('.bcm-pop-box');
       const targetElement = document.getElementById(this._target_id).children[0];
       if (box && targetElement) {
         getPlacement(box, targetElement, placement, (place) => placement = place);
@@ -49,13 +49,13 @@ export class BcmPopoverBox {
   render() {
     const { message, _title, open, placement_string } = this;
     const classes = cs('bcm-popover-box', placement_string, {
-      open
+      'bcm-pop-open': open,
     });
-    const boxClasses = cs('box');
+    const boxClasses = cs('bcm-pop-box');
     return (h(Host, { class: classes },
       h("div", { class: boxClasses },
-        _title && h("span", { class: "heading size-2 weight-medium", innerHTML: _title }),
-        h("span", { class: "content size-2", innerHTML: message }))));
+        _title && h("span", { class: "bcm-pop-heading size-2 weight-medium", innerHTML: _title }),
+        h("span", { class: "bcm-pop-content size-2", innerHTML: message }))));
   }
   static get is() { return "bcm-popover-box"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/molecules/tooltip/tooltip-box.css

@@ -18534,7 +18534,7 @@
   /* left-start & right-start */
   /* left-end & right-end */
 }
-.bcm-tooltip-box .box {
+.bcm-tooltip-box .bcm-pop-box {
   position: absolute;
   box-sizing: border-box;
   background-color: var(--background-color);
@@ -18555,19 +18555,19 @@
   z-index: 10700;
   pointer-events: none;
 }
-.bcm-tooltip-box.open {
+.bcm-tooltip-box.bcm-pop-open {
   display: block;
   z-index: 10700;
 }
-.bcm-tooltip-box.open .box {
+.bcm-tooltip-box.bcm-pop-open .bcm-pop-box {
   z-index: 10700;
   overflow: unset;
   visibility: unset;
 }
-.bcm-tooltip-box.open .box, .bcm-tooltip-box.open::after {
+.bcm-tooltip-box.bcm-pop-open .bcm-pop-box, .bcm-tooltip-box.bcm-pop-open::after {
   display: block;
 }
-.bcm-tooltip-box.top .box {
+.bcm-tooltip-box.top .bcm-pop-box {
   bottom: 100%;
   margin-bottom: 8px;
 }
@@ -18576,7 +18576,7 @@
   margin-bottom: -4px;
   border-color: var(--background-color) transparent transparent transparent;
 }
-.bcm-tooltip-box.bottom .box {
+.bcm-tooltip-box.bottom .bcm-pop-box {
   top: 100%;
   margin-top: 8px;
 }
@@ -18585,7 +18585,7 @@
   margin-top: -4px;
   border-color: transparent transparent var(--background-color) transparent;
 }
-.bcm-tooltip-box.left .box {
+.bcm-tooltip-box.left .bcm-pop-box {
   right: 100%;
   margin-right: 8px;
 }
@@ -18594,7 +18594,7 @@
   margin-right: -4px;
   border-color: transparent transparent transparent var(--background-color);
 }
-.bcm-tooltip-box.right .box {
+.bcm-tooltip-box.right .bcm-pop-box {
   left: 100%;
   margin-left: 8px;
 }
@@ -18603,7 +18603,7 @@
   margin-left: -4px;
   border-color: transparent var(--background-color) transparent transparent;
 }
-.bcm-tooltip-box.top.center .box, .bcm-tooltip-box.bottom.center .box {
+.bcm-tooltip-box.top.center .bcm-pop-box, .bcm-tooltip-box.bottom.center .bcm-pop-box {
   left: 50%;
   transform: translateX(-50%);
 }
@@ -18611,19 +18611,19 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.bcm-tooltip-box.top.start .box, .bcm-tooltip-box.bottom.start .box {
+.bcm-tooltip-box.top.start .bcm-pop-box, .bcm-tooltip-box.bottom.start .bcm-pop-box {
   left: 0;
 }
 .bcm-tooltip-box.top.start::after, .bcm-tooltip-box.bottom.start::after {
   left: 8px;
 }
-.bcm-tooltip-box.top.end .box, .bcm-tooltip-box.bottom.end .box {
+.bcm-tooltip-box.top.end .bcm-pop-box, .bcm-tooltip-box.bottom.end .bcm-pop-box {
   right: 0;
 }
 .bcm-tooltip-box.top.end::after, .bcm-tooltip-box.bottom.end::after {
   right: 8px;
 }
-.bcm-tooltip-box.left.center .box, .bcm-tooltip-box.right.center .box {
+.bcm-tooltip-box.left.center .bcm-pop-box, .bcm-tooltip-box.right.center .bcm-pop-box {
   top: 50%;
   transform: translateY(-50%);
 }
@@ -18631,13 +18631,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.bcm-tooltip-box.left.start .box, .bcm-tooltip-box.right.start .box {
+.bcm-tooltip-box.left.start .bcm-pop-box, .bcm-tooltip-box.right.start .bcm-pop-box {
   top: 0;
 }
 .bcm-tooltip-box.left.start::after, .bcm-tooltip-box.right.start::after {
   top: 4px;
 }
-.bcm-tooltip-box.left.end .box, .bcm-tooltip-box.right.end .box {
+.bcm-tooltip-box.left.end .bcm-pop-box, .bcm-tooltip-box.right.end .bcm-pop-box {
   bottom: 0;
 }
 .bcm-tooltip-box.left.end::after, .bcm-tooltip-box.right.end::after {
@@ -18655,10 +18655,10 @@
 .bcm-tooltip-box.right {
   transform: translateX(-1px);
 }
-.bcm-tooltip-box.top.open, .bcm-tooltip-box.bottom.open {
+.bcm-tooltip-box.top.bcm-pop-open, .bcm-tooltip-box.bottom.bcm-pop-open {
   transform: translateY(0);
 }
-.bcm-tooltip-box.left.open, .bcm-tooltip-box.right.open {
+.bcm-tooltip-box.left.bcm-pop-open, .bcm-tooltip-box.right.bcm-pop-open {
   transform: translateX(0);
 }
 .bcm-tooltip-box a {

package/dist/collection/components/molecules/tooltip/tooltip-box.js

@@ -31,7 +31,7 @@ export class BcmTooltipBox {
   calculateLocation() {
     if (this.open) {
       var placement = this.placement;
-      const box = this.el.querySelector('.box');
+      const box = this.el.querySelector('.bcm-pop-box');
       const targetElement = document.getElementById(this._target_id).children[0];
       if (box && targetElement) {
         getPlacement(box, targetElement, placement, (place) => placement = place);
@@ -52,9 +52,9 @@ export class BcmTooltipBox {
   render() {
     const { open, message, placement_string } = this;
     const bcmTooltipHost = cs('bcm-tooltip-box', placement_string, {
-      open
+      'bcm-pop-open': open,
     });
-    const boxClasses = cs('box');
+    const boxClasses = cs('bcm-pop-box');
     return (h(Host, { class: bcmTooltipHost, style: { '--background-color': ColorHelper.convertColorToHex(this.color), '--font-color': ColorHelper.reverseColor(this.color) } },
       h("div", { class: boxClasses },
         h("span", { innerHTML: message }))));