bromcom-ui 2.7.38-rc.3-0 → 2.7.38-rc.3

package/dist/cjs/bcm-button_9.cjs.entry.js

@@ -1381,7 +1381,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || generate.Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -1411,14 +1412,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -1427,7 +1428,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const getValue = id => generate.snq(() => state.value.get(id), {});
@@ -1527,7 +1528,7 @@ __decorate$2([
   isLoadDecorator.IsLoad()
 ], BcmStep.prototype, "el", void 0);
 
-const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
+const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = index$2.classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
     'bcm-stepper__header-item--active': active,
     'bcm-stepper__header-item--valid': valid,
@@ -1544,7 +1545,7 @@ const StepperHeaderTemplate = ({ title, description, status, valid, index, loadi
   return (index$1.h("div", { class: classes },
     index$1.h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
       index$1.h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? index$1.h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
-      index$1.h("div", { class: "bcm-stepper__header-item-title size-2" }, title),
+      index$1.h("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
       index$1.h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
 };
 
@@ -1609,7 +1610,7 @@ const BcmStepper = class {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          generate.Generate.setAttributes(item, Object.assign({ title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          generate.Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
             item.removeAttribute('hidden');
           }
@@ -1634,7 +1635,7 @@ const BcmStepper = class {
       stepperStates.changeActiveStep(this.stepperId, index);
       this.bcmStepChange.emit(index);
     }
-    this.markForCheck();
+    index$1.forceUpdate(this.el);
     return Promise.resolve(index);
   }
   async prev() {
@@ -1650,6 +1651,7 @@ const BcmStepper = class {
         await this.onStepChange(index);
       }
     }
+    index$1.forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
@@ -1665,6 +1667,7 @@ const BcmStepper = class {
     else {
       step.status = 'error';
     }
+    index$1.forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async setActive(index) {

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

@@ -5,6 +5,7 @@
 import { createStore } from '@stencil/store';
 import snq from 'snq';
 import { Generate } from '../../../helper/generate';
+import { forceUpdate } from '@stencil/core';
 const { state } = createStore({
   value: new Map(),
   setData: {},
@@ -16,7 +17,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -46,14 +48,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -62,7 +64,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const getValue = id => snq(() => state.value.get(id), {});

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

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import cs from 'classnames';
 import snq from 'snq';
 import { IsLoad } from '../../../decorators/is-load-decorator';
@@ -68,7 +68,7 @@ export class BcmStepper {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
             item.removeAttribute('hidden');
           }
@@ -93,7 +93,7 @@ export class BcmStepper {
       stepperStates.changeActiveStep(this.stepperId, index);
       this.bcmStepChange.emit(index);
     }
-    this.markForCheck();
+    forceUpdate(this.el);
     return Promise.resolve(index);
   }
   async prev() {
@@ -109,6 +109,7 @@ export class BcmStepper {
         await this.onStepChange(index);
       }
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
@@ -124,6 +125,7 @@ export class BcmStepper {
     else {
       step.status = 'error';
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async setActive(index) {

package/dist/collection/templates/step-template.js

@@ -4,7 +4,7 @@
  */
 import { h } from '@stencil/core';
 import cs from 'classnames';
-export const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
+export const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = cs('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
     'bcm-stepper__header-item--active': active,
     'bcm-stepper__header-item--valid': valid,
@@ -18,5 +18,5 @@ export const StepperHeaderTemplate = ({ title, description, status, valid, index
     error: 'fal fa-times',
   };
   const customIcon = (icon || (statusIcon && defaultIcons[status])) && h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
-  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title size-2" }, title), h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
+  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title size-2" }, _title), h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
 };

package/dist/components/bcm-stepper.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
 import { I as IsLoad } from './is-load-decorator.js';
@@ -11,7 +11,7 @@ import { g as getChildElements } from './utils.js';
 import { s as stepperStates, d as defineCustomElement$2 } from './step.js';
 import { d as defineCustomElement$3 } from './icon.js';
 
-const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
+const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
     'bcm-stepper__header-item--active': active,
     'bcm-stepper__header-item--valid': valid,
@@ -28,7 +28,7 @@ const StepperHeaderTemplate = ({ title, description, status, valid, index, loadi
   return (h("div", { class: classes },
     h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
       h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
-      h("div", { class: "bcm-stepper__header-item-title size-2" }, title),
+      h("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
       h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
 };
 
@@ -94,7 +94,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
             item.removeAttribute('hidden');
           }
@@ -119,7 +119,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       stepperStates.changeActiveStep(this.stepperId, index);
       this.bcmStepChange.emit(index);
     }
-    this.markForCheck();
+    forceUpdate(this.el);
     return Promise.resolve(index);
   }
   async prev() {
@@ -135,6 +135,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         await this.onStepChange(index);
       }
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
@@ -150,6 +151,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     else {
       step.status = 'error';
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async setActive(index) {

package/dist/components/step.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { forceUpdate, proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate, s as snq } from './generate.js';
@@ -19,7 +19,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -49,14 +50,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -65,7 +66,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const getValue = id => snq(() => state.value.get(id), {});

package/dist/esm/bcm-button_9.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-58077b32.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, f as forceUpdate } from './index-58077b32.js';
 import { s as snq, G as Generate } from './generate-2cdc77b7.js';
 import { B as Bcm, a as Bcm$1 } from './bcm-b8d8a236.js';
 import { c as classnames } from './index-ba2edd32.js';
@@ -1377,7 +1377,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -1407,14 +1408,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -1423,7 +1424,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const getValue = id => snq(() => state.value.get(id), {});
@@ -1523,7 +1524,7 @@ __decorate$2([
   IsLoad()
 ], BcmStep.prototype, "el", void 0);
 
-const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
+const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
     'bcm-stepper__header-item--active': active,
     'bcm-stepper__header-item--valid': valid,
@@ -1540,7 +1541,7 @@ const StepperHeaderTemplate = ({ title, description, status, valid, index, loadi
   return (h("div", { class: classes },
     h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) },
       h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index),
-      h("div", { class: "bcm-stepper__header-item-title size-2" }, title),
+      h("div", { class: "bcm-stepper__header-item-title size-2" }, _title),
       h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
 };
 
@@ -1605,7 +1606,7 @@ const BcmStepper = class {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
             item.removeAttribute('hidden');
           }
@@ -1630,7 +1631,7 @@ const BcmStepper = class {
       stepperStates.changeActiveStep(this.stepperId, index);
       this.bcmStepChange.emit(index);
     }
-    this.markForCheck();
+    forceUpdate(this.el);
     return Promise.resolve(index);
   }
   async prev() {
@@ -1646,6 +1647,7 @@ const BcmStepper = class {
         await this.onStepChange(index);
       }
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
@@ -1661,6 +1663,7 @@ const BcmStepper = class {
     else {
       step.status = 'error';
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async setActive(index) {

package/dist/types/templates/step-template.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from '../stencil-public-runtime';
 interface StepperHeaderTemplateProps {
-  title: string;
+  _title: string;
   description: string;
   status: 'default' | 'success' | 'warning' | 'error';
   statusIcon: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bromcom-ui",
-    "version": "2.7.38-rc.3-0",
+    "version": "2.7.38-rc.3",
     "description": "Stencil Component Starter",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",