npm - bromcom-ui - Versions diffs - 2.12.1-test.0 → 3.0.0-preview.0 - Mend

bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (581) hide show

package/dist/components/checkbox.js CHANGED Viewed

@@ -3,30 +3,24 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { C as CaptionTemplate } from './caption-template.js';
+import './color-helper.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
-import { S as SlotTemplate } from './slot-template.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
 import { a as Bcm } from './bcm.js';
-import { d as delay } from './utils.js';
-import { C as ColorHelper } from './color-helper.js';
-import { I as IsLoad } from './is-load-decorator.js';
+import { c as checkboxStyle } from './checkbox.style.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import './index2.js';
+import './types.js';
+import './types2.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './label.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
-const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}";
+const checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-checkbox-text:var(--bcm-ui-color-text-default);--bcm-checkbox-border:var(--bcm-ui-color-border-default);--bcm-checkbox-border-hover:var(--bcm-ui-color-border-primary-info);--bcm-checkbox-bg:var(--bcm-ui-color-background-default-default);--bcm-checkbox-bg-hover:var(--bcm-ui-color-background-default-default);--bcm-checkbox-checked-border:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-checkbox-checked-bg:var(--bcm-ui-color-background-primary-info-default);--bcm-checkbox-checked-bg-hover:var(--bcm-ui-color-background-primary-info-hover)}";
-var __decorate = (undefined && undefined.__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;
-};
 const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -36,32 +30,33 @@ const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.change = createEvent(this, "bcm-change", 7);
     this.changeCheckbox = createEvent(this, "bcm-change-checkbox", 7);
     this._id = Generate.UID();
-    this.inGroup = false;
     this.value = false;
     this.checked = false;
-    this.name = undefined;
+    this.name = "";
     this.disabled = false;
     this.hidden = false;
     this.required = false;
     this.label = undefined;
     this.readonly = false;
     this.size = Bcm.Size.medium;
-    this.indeterminate = null;
-    this.color = "blue";
+    this.indeterminate = undefined;
+    this.color = undefined;
     this.caption = undefined;
     this.noCaption = false;
     this.captionError = undefined;
     this.captionType = Bcm.Status.default;
-    this.captionCache = undefined;
-    this.captionTypeCache = undefined;
+    this.noMargin = false;
   }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-    this.value = this.checked;
+  componentDidLoad() {
+    this.caption && (this.captionCache = this.caption);
+    this.captionType && (this.captionTypeCache = this.captionType);
   }
-  componentDidRender() {
+  toggleChecked() {
+    this.checked = !this.checked;
+    this.value = this.checked;
     this.inputElement.checked = this.checked;
+    this.change.emit({ name: this.name, value: this.checked });
+    this.changeCheckbox.emit();
   }
   async onBcmFocus() {
     this.el.focus();
@@ -70,35 +65,43 @@ const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.blur();
   }
   async setClear() {
-    this.check(false);
+    this.inputElement.checked = false;
     this.handleChange();
-    await delay(10);
     return Promise.resolve();
   }
   async resetCaption() {
-    await delay(10);
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-    await delay(10);
+    if (this.caption !== this.captionCache) {
+      this.caption = this.captionCache;
+    }
+    if (this.captionType !== this.captionTypeCache) {
+      this.captionType = this.captionTypeCache;
+    }
+    if (this.captionError) {
+      this.captionError = undefined;
+    }
     return Promise.resolve();
   }
   handleChange() {
-    this.checked = this.inputElement.checked;
-    this.value = this.checked;
-    if (!this.indeterminate) {
-      this.changeCheckbox.emit();
+    const isChecked = this.inputElement.checked;
+    if (this.checked !== isChecked) {
+      this.checked = isChecked;
+      this.value = isChecked;
       this.change.emit({
         name: this.name,
-        value: this.checked
+        value: isChecked
       });
+      this.changeCheckbox.emit();
     }
   }
-  watchIndeterminate(newValue, oldValue) {
-    if (newValue != oldValue) {
-      this.inputElement.checked = this.indeterminate == Bcm.IndeterminateType.determinate ? true : false;
-      this.handleChange();
+  watchIndeterminate(newValue) {
+    if (newValue === Bcm.IndeterminateType.indeterminate) {
+      this.inputElement.indeterminate = true;
     }
+    else {
+      this.inputElement.checked = newValue === Bcm.IndeterminateType.determinate;
+      this.inputElement.indeterminate = false;
+    }
+    this.handleChange();
   }
   async set(data) {
     if (typeof data === 'boolean') {
@@ -106,63 +109,55 @@ const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   async get() {
-    return this.checked || false;
+    return this.checked;
   }
-  async check(uncheck = true) {
-    this.inputElement.checked = uncheck;
-    this.handleChange();
+  async check(shouldCheck = true) {
+    if (this.checked !== shouldCheck) {
+      this.inputElement.checked = shouldCheck;
+      this.handleChange();
+    }
   }
-  handleKeyUp(ev) {
-    if (ev.keyCode == Bcm.KeyCode.space || ev.keyCode == Bcm.KeyCode.enter) {
-      if (!this.disabled && !this.readonly) {
-        this.inputElement.checked = !this.inputElement.checked;
-        this.handleChange();
+  handleKeyDown(ev) {
+    if (ev.key === ' ' || ev.key === 'Enter') {
+      if (this.disabled || this.readonly) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        return;
       }
+      this.toggleChecked();
       ev.stopPropagation();
       ev.preventDefault();
-      return false;
     }
   }
   watchChecked() {
-    if (this.checked) {
+    this.value = this.checked;
+    if (this.checked && this.captionType === Bcm.Status.error) {
       this.resetCaption();
     }
-    this.value = this.checked;
-  }
-  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')
-    };
   }
   render() {
-    const { label, _id, indeterminate, hidden, disabled, checked, readonly, required, caption, captionError, captionType, noCaption, size } = this;
-    //////
-    const bcmCheckboxClass = classnames('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      'error': captionType == Bcm.Status.error,
-      hidden,
-      checked,
+    const { _id, label, captionType, size, required, checked, disabled, hidden, readonly, indeterminate, noCaption, captionError, caption, noMargin, color } = this;
+    const { host, inputContainer, input, slot, labelContainer, checkmark } = checkboxStyle({
+      size,
+      error: captionType === Bcm.Status.error,
       disabled,
-      required,
+      hidden,
       readonly,
+      indeterminate: indeterminate === Bcm.IndeterminateType.indeterminate,
+      checked: checked || indeterminate === Bcm.IndeterminateType.indeterminate,
+      noMargin
     });
-    const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-      'bcm-checkbox__label-icon-checked': checked,
-    });
-    const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
-    const bcmCheckboxInputClass = classnames('bcm-checkbox__input');
-    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    const style = Object.assign({}, color && Generate.getTwColor({
+      color: color,
+      tones: {
+        700: ["border-hover", "checked-bg", "checked-border"],
+        800: ["checked-border-hover", "checked-bg-hover"],
+      },
+      variable: "--bcm-checkbox",
+    }));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: style, class: host(), disabled: disabled }, label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: inputContainer() }, h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el), class: input() }), h("label", { class: labelContainer(), htmlFor: `input-${_id}` }, h("span", { class: checkmark() }, indeterminate === Bcm.IndeterminateType.indeterminate
+      ? h("i", { class: "fa-sharp fa-regular fa-minus" })
+      : h("i", { class: "fa-sharp fa-regular fa-check" })), h("span", { class: slot() }, h("slot", null)))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -171,25 +166,23 @@ const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return checkboxCss; }
 }, [4, "bcm-checkbox", {
-    "_id": [1537, "id"],
-    "inGroup": [1028, "in-group"],
+    "_id": [513, "id"],
     "value": [1028],
     "checked": [1028],
-    "name": [1025],
-    "disabled": [1028],
-    "hidden": [1028],
-    "required": [1028],
-    "label": [1025],
-    "readonly": [1028],
-    "size": [1025],
-    "indeterminate": [1025],
-    "color": [1025],
+    "name": [1],
+    "disabled": [4],
+    "hidden": [4],
+    "required": [4],
+    "label": [1],
+    "readonly": [4],
+    "size": [1],
+    "indeterminate": [1],
+    "color": [1],
     "caption": [1025],
-    "noCaption": [1028, "no-caption"],
+    "noCaption": [4, "no-caption"],
     "captionError": [1025, "caption-error"],
     "captionType": [1025, "caption-type"],
-    "captionCache": [32],
-    "captionTypeCache": [32],
+    "noMargin": [4, "no-margin"],
     "onBcmFocus": [64],
     "onBcmBlur": [64],
     "setClear": [64],
@@ -197,10 +190,7 @@ const BcmCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "set": [64],
     "get": [64],
     "check": [64]
-  }, [[0, "keydown", "handleKeyUp"]]]);
-__decorate([
-  IsLoad()
-], BcmCheckbox.prototype, "el", void 0);
+  }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/checkbox.style.js ADDED Viewed

@@ -0,0 +1,159 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as ce } from './index4.js';
+const checkboxStyle = ce({
+  slots: {
+    host: [
+      "bcm-checkbox2",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-inline-flex tw-w-fit tw-flex-col tw-mb-2"
+    ],
+    inputContainer: [
+      "bcm-checkbox2__input",
+      "tw-flex tw-items-start tw-justify-start tw-pt-1"
+    ],
+    labelContainer: [
+      "bcm-checkbox2__label tw-group",
+      "tw-flex tw-items-center tw-justify-start",
+    ],
+    input: [
+      "bcm-checkbox2__input-input",
+      "tw-appearance-none tw-sr-only tw-hidden",
+    ],
+    slot: [
+      "bcm-checkbox2__slot slot",
+      "empty:tw-hidden",
+      "tw-text-[--bcm-checkbox-text] tw-font-medium"
+    ],
+    checkmark: [
+      "bcm-checkbox2__label-icon",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-border tw-border-solid tw-rounded",
+      ""
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-checkbox2-size-small",
+        inputContainer: "tw-min-h-6 ",
+        checkmark: "tw-w-3.5 tw-h-3.5 tw-text-size-2",
+        labelContainer: "tw-gap-2"
+      },
+      medium: {
+        host: "bcm-checkbox2-size-medium ",
+        inputContainer: "tw-min-h-8",
+        checkmark: "tw-w-4 tw-h-4 tw-text-size-3",
+        labelContainer: "tw-gap-2.5"
+      },
+      large: {
+        host: "bcm-checkbox2-size-large",
+        inputContainer: "tw-min-h-10 tw-gap-3",
+        checkmark: "tw-w-4.5 tw-h-4.5 tw-text-size-4",
+        labelContainer: "tw-gap-3"
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled  ",
+        labelContainer: "tw-cursor-not-allowed",
+      },
+      false: {
+        labelContainer: "tw-cursor-pointer",
+        slot: "",
+      }
+    },
+    hidden: {
+      true: {
+        host: "hidden",
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    indeterminate: {
+      true: {
+        host: "indeterminate",
+        checkmark: "bcm-checkbox2__label-icon-indeterminate",
+      },
+    },
+    checked: {
+      true: {
+        host: "checked",
+        checkmark: [
+          "bcm-checkbox2__label-icon-checked",
+        ],
+      },
+      false: {
+        host: "",
+        checkmark: "",
+      }
+    },
+    noMargin: {
+      true: {
+        host: "!tw-m-0",
+        inputContainer: " !tw-min-h-0 !tw-p-0",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      checked: true,
+      class: {
+        checkmark: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled",
+      }
+    },
+    {
+      disabled: true,
+      checked: false,
+      class: {
+        checkmark: "tw-bg-color-disabled tw-border-color-disabled tw-text-transparent",
+      }
+    },
+    {
+      disabled: false,
+      checked: true,
+      class: {
+        checkmark: [
+          "tw-text-white",
+          "tw-bg-[--bcm-checkbox-checked-bg] tw-border-[--bcm-checkbox-checked-border]",
+          "group-hover:tw-bg-[--bcm-checkbox-checked-bg-hover] group-hover:tw-border-[--bcm-checkbox-checked-border-hover]",
+        ],
+      }
+    },
+    {
+      disabled: false,
+      checked: false,
+      class: {
+        checkmark: [
+          "tw-text-transparent",
+          "tw-bg-[--bcm-checkbox-bg] tw-border-[--bcm-checkbox-border]",
+          "group-hover:tw-bg-[--bcm-checkbox-bg-hover] group-hover:tw-border-[--bcm-checkbox-border-hover]",
+        ],
+      }
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    error: false,
+    disabled: false,
+    hidden: false,
+    readonly: false,
+    indeterminate: false,
+    checked: false,
+    noMargin: false,
+  },
+});
+export { checkboxStyle as c };