bromcom-ui 2.7.38-rc.9 → 2.7.38

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

@@ -2,100 +2,49 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        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 { Bcm } from "@bcm/model";
+import { Generate } from "@bcm/helpers";
 import cs from 'classnames';
-import { IsLoad } from "../../../decorators/is-load-decorator";
-import { ColorHelper } from "../../../helper/color-helper";
-import { Generate } from "../../../helper/generate";
-import Bcm from "../../../models/bcm";
-import { SlotTemplate } from "../../../templates/slot-template";
 export class BcmRadio {
   constructor() {
     this._id = Generate.UID();
     this.checked = undefined;
     this.value = undefined;
-    this.disabled = undefined;
+    this.disabled = false;
     this.size = Bcm.Size.medium;
-    this.hidden = false;
-    this.required = false;
-    this.color = "blue";
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const prefix = `--bcm-checkbox`;
-    return {
-      [`${prefix}-primary-color-default`]: ColorHelper.dsColor(color + '-500'),
-      [`${prefix}-primary-color-hover`]: ColorHelper.dsColor(color + '-600'),
-      [`${prefix}-primary-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-      [`${prefix}-primary-color-active`]: ColorHelper.dsColor(color + '-700'),
-      // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-      [`${prefix}-secondary-color-default`]: ColorHelper.dsColor('white'),
-      [`${prefix}-secondary-color-hover`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-active`]: ColorHelper.dsColor('slate-50'),
-      // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
-    };
+    this.color = undefined;
   }
   render() {
-    const { checked, value, disabled, size, hidden, required } = this;
-    // const defaultClasses = cs(
-    //     'radio-container',
-    //     'size-2',
-    //     {
-    //         'checked': checked,
-    //         'disabled': disabled
-    //     }
-    // )
-    // const buttonClasses = cs(
-    //     'radio-button',
-    //     buttonStyle,
-    //     size,
-    //     {
-    //         'size-2': size === 'small' || size === 'medium',
-    //         'size-3': size === 'large',
-    //         'checked': checked,
-    //         'disabled': disabled,
-    //     }
-    // )
-    const bcmRadioHostClasses = cs('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      hidden,
-      checked,
-      disabled,
-      required
-    });
-    const bcmRadioLabelClass = cs('bcm-checkbox__label');
-    const bcmCheckboxInputClass = cs('bcm-checkbox__input');
-    return (h(Host, { class: bcmRadioHostClasses, onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit(), style: this.setColor(this.color) }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmCheckboxInputClass }, h("label", { class: bcmRadioLabelClass }, h("input", { type: "radio", value: value, checked: checked, disabled: disabled }), h("span", { class: cs("bcm-checkbox__label-icon", "bcm-radio__icon", {
-        'bcm-checkbox__label-icon-checked': checked,
-      }) }, h("span", { class: 'bcm-radio__icon-inner' })), h(SlotTemplate, { className: "slot" })))));
+    const { value, size, disabled, checked, _id, color } = this;
+    return (h(Host, { class: cs("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
+        "tw-cursor-pointer tw-text-slate-600": !disabled,
+        "tw-cursor-not-allowed tw-text-slate-400": disabled,
+        "tw-text-1": size === Bcm.Size.small,
+        "tw-text-2.5": size === Bcm.Size.medium,
+        "tw-text-4": size === Bcm.Size.large,
+      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
+        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
+        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
+        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
+      }, "focus:tw-outline-none focus:tw-shadow-outline", 
+      // default
+      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
+      // disabled
+      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && cs(
+      // hover
+      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
+      // focus-visible 
+      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
+      // active
+      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
   }
   static get is() { return "bcm-radio"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["radio.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["radio.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -105,7 +54,7 @@ export class BcmRadio {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Props *"
+          "text": ""
         },
         "attribute": "id",
         "reflect": true,
@@ -113,7 +62,7 @@ export class BcmRadio {
       },
       "checked": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -130,7 +79,7 @@ export class BcmRadio {
       },
       "value": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string | number",
           "resolved": "number | string",
@@ -147,7 +96,7 @@ export class BcmRadio {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -160,18 +109,19 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -185,48 +135,12 @@ export class BcmRadio {
         "reflect": false,
         "defaultValue": "Bcm.Size.medium"
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "color": {
-        "type": "string",
-        "mutable": true,
+        "type": "any",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -236,15 +150,14 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"blue\""
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "change",
-        "name": "bcm-change",
+        "method": "radioChange",
+        "name": "bcm-radio-change",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -291,6 +204,3 @@ export class BcmRadio {
   }
   static get elementRef() { return "el"; }
 }
-__decorate([
-  IsLoad()
-], BcmRadio.prototype, "el", void 0);

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

@@ -33,6 +33,7 @@ export class BcmSearch {
     this.size = Bcm.Size.medium;
     this.limit = 10;
     this.searchIsOnlyChilds = false;
+    this.minSearchLength = 2;
     this.data = [];
     this.tick = {};
     this.isActiveClearable = false;
@@ -87,7 +88,7 @@ export class BcmSearch {
   }
   onSearchValue(event, instance) {
     const { value, id } = event.target;
-    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= 2 ? searchState.searchData(id, value, null) : null;
+    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= this.minSearchLength ? searchState.searchData(id, value, null) : null;
     const { bcmOnSearch, inputElement } = instance;
     bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
   }
@@ -257,6 +258,24 @@ export class BcmSearch {
         "reflect": false,
         "defaultValue": "false"
       },
+      "minSearchLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-search-length",
+        "reflect": false,
+        "defaultValue": "2"
+      },
       "data": {
         "type": "any",
         "mutable": true,

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

@@ -12,15 +12,15 @@ 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 { forceUpdate, h, Host } from '@stencil/core';
-import cs from 'classnames';
-import snq from 'snq';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
-import Bcm from '../../../models/bcm';
-import { StepperHeaderTemplate } from '../../../templates/step-template';
-import { getChildElements } from '../../../utils/utils';
-import stepperStates from '../states/stepper-states';
+import { forceUpdate, h, Host } from "@stencil/core";
+import snq from "snq";
+import cs from "classnames";
+import { Generate } from "@bcm/helpers";
+import { IsLoad } from "@bcm/decorator";
+import { StepperHeaderTemplate } from "@bcm/template";
+import { delay, getChildElements } from "@bcm/utils";
+import { Bcm } from "@bcm/model";
+import stepperStates from "../states/stepper-states";
 export class BcmStepper {
   constructor() {
     this.hidden = false;
@@ -63,14 +63,14 @@ export class BcmStepper {
     this.setSteps(this.getItems());
   }
   setSteps(steps) {
-    const slots = getChildElements(this.el, 'bcm-step');
+    const slots = getChildElements(this.el, "bcm-step");
     if (slots.length > 0) {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          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 })));
+          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');
+            item.removeAttribute("hidden");
           }
         }
       });
@@ -86,7 +86,7 @@ export class BcmStepper {
     return stepperStates.getActiveIndex(this.stepperId);
   }
   getSlotElements() {
-    return snq(() => getChildElements(this.el, 'bcm-step'), []);
+    return snq(() => getChildElements(this.el, "bcm-step"), []);
   }
   async onStepChange(index) {
     if (index) {
@@ -117,36 +117,53 @@ export class BcmStepper {
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
-      this.linear && lastStep.id != step.id && (step.status = 'success');
+      this.linear && lastStep.id != step.id && (step.status = "success");
       if (index < this.getItems().length) {
         await this.onStepChange(index + 1);
       }
     }
     else {
-      step.status = 'error';
+      step.status = "error";
     }
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
-  async setActive(index) {
+  async setActive(index, force = false) {
     if (!index)
       return;
-    if (this.linear) {
-      const prevStepIsValid = this.getItems()
-        .filter(item => item.index < index)
-        .map(item => ({
-        id: item.id,
-        status: item.status,
-        disabled: item.disabled,
-      }))
-        .every(item => !item.disabled && (item.status === 'success' || item.status === 'default'));
-      if (prevStepIsValid) {
-        await this.next(index - 1);
+    if (force) {
+      if (this.getActiveIndex() < index) {
+        while (this.getActiveIndex() < index) {
+          await this.next();
+          await delay(100);
+        }
+      }
+      else {
+        while (this.getActiveIndex() > index) {
+          await this.prev();
+          await delay(100);
+        }
       }
     }
     else {
-      stepperStates.setActiveIndex(this.stepperId, index);
-      await this.next(index - 1);
+      if (this.linear) {
+        const prevStepIsValid = this.getItems()
+          .filter(item => item.index < index)
+          .map(item => ({
+          id: item.id,
+          status: item.status,
+          disabled: item.disabled,
+        }))
+          .every(item => !item.disabled && (item.status === "success" || item.status === "default"));
+        console.log("prevStepIsValid", prevStepIsValid);
+        if (prevStepIsValid) {
+          await this.next(index - 1);
+        }
+      }
+      else {
+        stepperStates.setActiveIndex(this.stepperId, index);
+        await this.next(index - 1);
+      }
     }
   }
   async reset() {
@@ -166,11 +183,11 @@ export class BcmStepper {
   }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = cs('bcm-stepper', 'bcm-stepper__direction-' + direction, 'bcm-stepper__size-' + size, {
-      'bcm-stepper__linear': linear,
+    const hostClasses = cs("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 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.onStepChange(step) })),
@@ -235,7 +252,7 @@ export class BcmStepper {
           "references": {
             "DirectionTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -276,7 +293,7 @@ export class BcmStepper {
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -435,10 +452,13 @@ export class BcmStepper {
       },
       "setActive": {
         "complexType": {
-          "signature": "(index: number) => Promise<void>",
+          "signature": "(index: number, force?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {

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

@@ -125,7 +125,7 @@ export class BcmSwitch {
     const bcmSwitchContainer = cs('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
     const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) && (h("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
     const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) && h("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-switch"; }
   static get originalStyleUrls() {