bromcom-ui 2.8.1-rc.2 → 2.8.1-rc.4

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

@@ -150,6 +150,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  min-width: 150px;
 }
 .bcm-stepper__header-item--container {
   display: flex;
@@ -162,12 +163,14 @@
   position: relative;
   width: 32px;
   height: 32px;
+  min-width: 32px;
+  min-height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: var(--bcm-color-prime-blue-6);
-  color: var(--bcm-color-grey-1);
+  background-color: var(--bcm-new-ds-color-blue-600);
+  color: var(--bcm-new-ds-color-slate-700);
   line-height: 1;
   margin-bottom: 16px;
   user-select: none;
@@ -176,7 +179,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  border: 2px solid var(--bcm-color-prime-blue-6);
+  border: 2px solid var(--bcm-new-ds-color-blue-600);
   border-color: transparent;
   position: absolute;
   z-index: 0;
@@ -185,7 +188,16 @@
   left: -6px;
 }
 .bcm-stepper__header-item-title {
-  color: var(--bcm-color-grey-8);
+  color: var(--bcm-new-ds-color-slate-700);
+}
+.bcm-stepper__header-item-description {
+  color: var(--bcm-new-ds-color-slate-600);
+}
+.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title {
+  color: var(--bcm-new-ds-color-slate-500);
+}
+.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description {
+  color: var(--bcm-new-ds-color-slate-500);
 }
 .bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -198,15 +210,17 @@
   position: absolute;
   width: calc(50% - 24px);
   height: 2px;
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
   top: 16px;
   box-sizing: content-box;
 }
 .bcm-stepper__header-item::after {
   right: 0;
+  border-radius: 3px 0 0 3px;
 }
 .bcm-stepper__header-item::before {
   left: 0;
+  border-radius: 0 3px 3px 0;
 }
 .bcm-stepper__header-item:first-of-type::before {
   display: none;
@@ -216,7 +230,7 @@
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before {
   content: "";
-  border: 2px solid var(--bcm-color-prime-blue-6);
+  border: 2px solid var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-title {
   font-weight: 500;
@@ -225,134 +239,152 @@
   width: 100%;
   flex: 1;
   height: 2px;
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
   margin-top: 16px;
 }
 .bcm-stepper__header-line--warning {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-line--warning + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning::after {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-warmyellow-6);
+  border-color: var(--bcm-new-ds-color-amber-600);
+}
+.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-warmyellow-5);
+  background-color: var(--bcm-new-ds-color-amber-700);
 }
 .bcm-stepper__header-line--success {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-line--success + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success::after {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-green-6);
+  border-color: var(--bcm-new-ds-color-emerald-600);
+}
+.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-green-5);
+  background-color: var(--bcm-new-ds-color-emerald-700);
 }
 .bcm-stepper__header-line--error {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--error + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--error::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--error .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-red-6);
+  background-color: var(--bcm-new-ds-color-red-600);
 }
 .bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-red-6);
+  border-color: var(--bcm-new-ds-color-red-600);
+}
+.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-red-5);
+  background-color: var(--bcm-new-ds-color-red-700);
 }
 .bcm-stepper__header-line--default {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--default + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--default::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-new-ds-color-blue-600);
+}
+.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-5);
+  background-color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-line--loading {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-line--loading + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading::after {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-new-ds-color-blue-600);
+}
+.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-5);
+  background-color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-line--disabled {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--disabled + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-grey-6);
+  border-color: var(--bcm-new-ds-color-slate-300);
+}
+.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-grey-5);
+  background-color: var(--bcm-new-ds-color-slate-400);
 }
 .bcm-stepper__header-item--disabled {
   cursor: not-allowed;

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

@@ -156,16 +156,31 @@ export class BcmStepper {
   getItems() {
     return snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
   }
+  headerClick(index) {
+    this.bcmStepperBeforeChange.emit({
+      current: this.getActiveIndex() - 1,
+      next: index,
+    });
+  }
+  async handleBcmStepBeforeChange(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      const { next } = e.detail;
+      this.next(next);
+    }
+  }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = cs("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
+    const hostClasses = cs("bcm-ui-element tw-font-sans tw-antialiased", "bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
       "bcm-stepper__linear": linear,
       hidden,
     });
     const lineClasses = item => cs("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
-      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.next(step - 1) })),
+      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.headerClick(step - 1) })),
       items.length > index + 1 && h("div", { class: lineClasses(item) }),
     ])), h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => h("bcm-step", Object.assign({}, item))) : h("slot", null)))));
   }
@@ -386,6 +401,21 @@ export class BcmStepper {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmStepperBeforeChange",
+        "name": "bcm-step-before-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -508,6 +538,12 @@ export class BcmStepper {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "bcm-step-before-change",
+        "method": "handleBcmStepBeforeChange",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/organism/list/list.css

@@ -711,7 +711,9 @@
   z-index: 1;
 }
 .bcm-list__input-container {
-  width: 100%;
+  flex: 1;
+  display: block;
+  overflow: hidden;
 }
 .bcm-list__input-container.value-empty {
   color: var(--bcm-color-grey-6);
@@ -739,14 +741,13 @@
   align-items: center;
   justify-content: flex-end;
   grid-gap: 4px;
-  min-width: 40px;
 }
 .bcm-list__input-buttons-button {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 4px;
+  padding: 4px 4px 0 4px;
   font-size: 16px;
   color: var(--bcm-new-ds-color-slate-500);
 }