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

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

@@ -2,54 +2,41 @@
  * 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 cs from 'classnames';
-import { CaptionTemplate } from '../../../templates/caption-template';
-import { Generate } from '../../../helper/generate';
-import { SlotTemplate } from '../../../templates/slot-template';
-import Bcm from '../../../models/bcm';
-import { delay } from '../../../utils/utils';
-import { ColorHelper } from '../../../helper/color-helper';
-import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { checkboxStyle } from "./checkbox.style";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate } from "@bcm/template";
 export class BcmCheckbox {
   constructor() {
     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();
@@ -58,35 +45,43 @@ export class BcmCheckbox {
     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') {
@@ -94,63 +89,55 @@ export class BcmCheckbox {
     }
   }
   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 = cs('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 = cs('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-      'bcm-checkbox__label-icon-checked': checked,
-    });
-    const bcmCheckboxLabelClass = cs('bcm-checkbox__label');
-    const bcmCheckboxInputClass = cs('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 })));
   }
   static get is() { return "bcm-checkbox"; }
   static get originalStyleUrls() {
@@ -167,7 +154,7 @@ export class BcmCheckbox {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -177,30 +164,12 @@ export class BcmCheckbox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Props *"
+          "text": ""
         },
         "attribute": "id",
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "inGroup": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component Properties"
-        },
-        "attribute": "in-group",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "value": {
         "type": "boolean",
         "mutable": true,
@@ -239,7 +208,7 @@ export class BcmCheckbox {
       },
       "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -252,11 +221,12 @@ export class BcmCheckbox {
           "text": ""
         },
         "attribute": "name",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -274,7 +244,7 @@ export class BcmCheckbox {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -292,7 +262,7 @@ export class BcmCheckbox {
       },
       "required": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -310,14 +280,14 @@ export class BcmCheckbox {
       },
       "label": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -327,7 +297,7 @@ export class BcmCheckbox {
       },
       "readonly": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -345,14 +315,14 @@ export class BcmCheckbox {
       },
       "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"
             }
           }
         },
@@ -368,30 +338,29 @@ export class BcmCheckbox {
       },
       "indeterminate": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "IndeterminateTypes",
           "resolved": "\"determinate\" | \"indeterminate\" | \"uncheck\"",
           "references": {
             "IndeterminateTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "indeterminate",
-        "reflect": false,
-        "defaultValue": "null"
+        "reflect": false
       },
       "color": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -404,8 +373,7 @@ export class BcmCheckbox {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"blue\""
+        "reflect": false
       },
       "caption": {
         "type": "string",
@@ -416,7 +384,7 @@ export class BcmCheckbox {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -426,7 +394,7 @@ export class BcmCheckbox {
       },
       "noCaption": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -451,7 +419,7 @@ export class BcmCheckbox {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -468,7 +436,7 @@ export class BcmCheckbox {
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -481,15 +449,27 @@ export class BcmCheckbox {
         "attribute": "caption-type",
         "reflect": false,
         "defaultValue": "Bcm.Status.default"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "captionCache": {},
-      "captionTypeCache": {}
-    };
-  }
   static get events() {
     return [{
         "method": "blur",
@@ -621,7 +601,7 @@ export class BcmCheckbox {
       },
       "set": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(data: boolean | undefined) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -656,7 +636,7 @@ export class BcmCheckbox {
       },
       "check": {
         "complexType": {
-          "signature": "(uncheck?: boolean) => Promise<void>",
+          "signature": "(shouldCheck?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -688,13 +668,10 @@ export class BcmCheckbox {
   static get listeners() {
     return [{
         "name": "keydown",
-        "method": "handleKeyUp",
+        "method": "handleKeyDown",
         "target": undefined,
         "capture": false,
         "passive": false
       }];
   }
 }
-__decorate([
-  IsLoad()
-], BcmCheckbox.prototype, "el", void 0);

package/dist/collection/components/molecules/checkbox/checkbox.style.js

@@ -0,0 +1,156 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const checkboxStyle = tv({
+  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,
+  },
+});