bromcom-ui 2.3.63 → 2.3.67

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

@@ -1,511 +0,0 @@
-import { h, Element, Component, Prop, Event, Host, Method, State } from '@stencil/core';
-import cs from 'classnames';
-import { ColorPalette } from '../../../global/variables/colors';
-import { extractColor } from '../../../utils/utils';
-import { ColorProps } from './types';
-export class BcmCheckbox {
-  constructor() {
-    /**
-     * Component Properties
-     */
-    this.value = '';
-    this.name = 'checkbox';
-    this.checked = false;
-    this.disabled = false;
-    this.readOnly = false;
-    this.hidden = false;
-    this.required = false;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = 'medium';
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  /**
-  * @ComponentMethod
-  */
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  async setClear() {
-    if (this.inputElement.checked == true) {
-      this.inputElement.checked = false;
-      this.handleChange();
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  componentDidLoad() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-  }
-  /**
-   * @desc
-   * @param event
-   * @returns
-   */
-  handleChange() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-    this.change.emit({
-      name: this.name,
-      value: this.value
-    });
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {void}
-   */
-  async check(uncheck) {
-    this.inputElement.checked = uncheck;
-    this.handleChange();
-  }
-  getColor(color) {
-    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
-      return {
-        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
-        borderColor: extractColor(ColorPalette, ColorProps[color] + '-5'),
-        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-5')
-      };
-  }
-  render() {
-    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
-    const hostClasses = cs(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
-    const defaultClasses = cs();
-    const buttonClasses = cs('radio-button', buttonStyle, size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-      'checked': checked,
-      'disabled': disabled,
-    });
-    var fontColor = extractColor(ColorPalette, ColorProps[this.color] + '-6');
-    var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
-      h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }),
-      optionType == 'button' && (h("span", { innerHTML: style })),
-      h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) },
-        h("span", { class: "icon" },
-          h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })),
-        h("span", { class: "slot" },
-          h("slot", null))),
-      !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-        ? h("span", { class: captionClasses },
-          " ",
-          captionError,
-          " ")
-        : caption && h("span", { class: captionClasses },
-          " ",
-          caption,
-          " ")))));
-  }
-  static get is() { return "bcm-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["checkbox.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Component Properties"
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": true,
-      "defaultValue": "'checkbox'"
-    },
-    "checked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "optionType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'button'",
-        "resolved": "\"button\" | \"default\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "option-type",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "buttonStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'solid' | 'outline'",
-        "resolved": "\"outline\" | \"solid\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "button-style",
-      "reflect": false,
-      "defaultValue": "'solid'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ColorPaletteTypes | 'default'",
-        "resolved": "\"default\" | \"black\" | \"white\" | \"prime-blue\" | \"prime-blue-1\" | \"prime-blue-2\" | \"prime-blue-3\" | \"prime-blue-5\" | \"prime-blue-6\" | \"prime-blue-7\" | \"prime-blue-8\" | \"prime-blue-9\" | \"prime-blue-10\" | \"grey\" | \"grey-1\" | \"grey-2\" | \"grey-3\" | \"grey-4\" | \"grey-5\" | \"grey-6\" | \"grey-7\" | \"grey-8\" | \"grey-9\" | \"grey-10\" | \"blue\" | \"blue-1\" | \"blue-2\" | \"blue-3\" | \"blue-4\" | \"blue-5\" | \"blue-6\" | \"blue-7\" | \"blue-8\" | \"blue-9\" | \"blue-10\" | \"warmyellow\" | \"warmyellow-1\" | \"warmyellow-2\" | \"warmyellow-3\" | \"warmyellow-4\" | \"warmyellow-5\" | \"warmyellow-6\" | \"warmyellow-7\" | \"warmyellow-8\" | \"warmyellow-9\" | \"warmyellow-10\" | \"yellow\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\" | \"yellow-4\" | \"yellow-5\" | \"yellow-6\" | \"yellow-7\" | \"yellow-8\" | \"yellow-9\" | \"yellow-10\" | \"limegreen\" | \"limegreen-1\" | \"limegreen-2\" | \"limegreen-3\" | \"limegreen-4\" | \"limegreen-5\" | \"limegreen-6\" | \"limegreen-7\" | \"limegreen-8\" | \"limegreen-9\" | \"limegreen-10\" | \"red\" | \"red-1\" | \"red-2\" | \"red-3\" | \"red-4\" | \"red-5\" | \"red-6\" | \"red-7\" | \"red-8\" | \"red-9\" | \"red-10\" | \"darkorange\" | \"darkorange-1\" | \"darkorange-2\" | \"darkorange-3\" | \"darkorange-4\" | \"darkorange-5\" | \"darkorange-6\" | \"darkorange-7\" | \"darkorange-8\" | \"darkorange-9\" | \"darkorange-10\" | \"orange\" | \"orange-1\" | \"orange-2\" | \"orange-3\" | \"orange-4\" | \"orange-5\" | \"orange-6\" | \"orange-7\" | \"orange-8\" | \"orange-9\" | \"orange-10\" | \"green\" | \"green-1\" | \"green-2\" | \"green-3\" | \"green-4\" | \"green-5\" | \"green-6\" | \"green-7\" | \"green-8\" | \"green-9\" | \"green-10\" | \"turquosie\" | \"turquosie-1\" | \"turquosie-2\" | \"turquosie-3\" | \"turquosie-4\" | \"turquosie-5\" | \"turquosie-6\" | \"turquosie-7\" | \"turquosie-8\" | \"turquosie-9\" | \"turquosie-10\" | \"cobaltblue\" | \"cobaltblue-1\" | \"cobaltblue-2\" | \"cobaltblue-3\" | \"cobaltblue-4\" | \"cobaltblue-5\" | \"cobaltblue-6\" | \"cobaltblue-7\" | \"cobaltblue-8\" | \"cobaltblue-9\" | \"cobaltblue-10\" | \"magenta\" | \"magenta-1\" | \"magenta-2\" | \"magenta-3\" | \"magenta-4\" | \"magenta-5\" | \"magenta-6\" | \"magenta-7\" | \"magenta-8\" | \"magenta-9\" | \"magenta-10\" | \"purple\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"purple-4\" | \"purple-5\" | \"purple-6\" | \"purple-7\" | \"purple-8\" | \"purple-9\" | \"purple-10\" | \"bc-red\" | \"bc-red-1\" | \"bc-red-2\" | \"bc-red-3\" | \"bc-red-4\" | \"bc-red-5\" | \"bc-red-6\" | \"bc-red-7\" | \"bc-red-8\" | \"bc-red-9\" | \"bc-blue\" | \"bc-blue-1\" | \"bc-blue-2\" | \"bc-blue-3\" | \"bc-blue-4\" | \"bc-blue-5\" | \"bc-blue-6\" | \"bc-blue-7\" | \"bc-blue-8\" | \"bc-blue-9\" | \"bc-green\" | \"bc-green-1\" | \"bc-green-2\" | \"bc-green-3\" | \"bc-green-4\" | \"bc-green-5\" | \"bc-green-6\" | \"bc-green-7\" | \"bc-green-8\" | \"bc-green-9\" | \"bc-orange\" | \"bc-orange-1\" | \"bc-orange-2\" | \"bc-orange-3\" | \"bc-orange-4\" | \"bc-orange-5\" | \"bc-orange-6\" | \"bc-orange-7\" | \"bc-orange-8\" | \"bc-orange-9\"",
-        "references": {
-          "ColorPaletteTypes": {
-            "location": "import",
-            "path": "../../../global/variables/colors"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "color",
-      "reflect": true
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "noCaption": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-caption",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "captionError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-error",
-      "reflect": false
-    },
-    "captionType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
-        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-type",
-      "reflect": false,
-      "defaultValue": "'default'"
-    }
-  }; }
-  static get states() { return {
-    "captionCache": {},
-    "captionTypeCache": {}
-  }; }
-  static get events() { return [{
-      "method": "blur",
-      "name": "bcm-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Component Events"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "focus",
-      "name": "bcm-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setClear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "resetCaption": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "check": {
-      "complexType": {
-        "signature": "(uncheck: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }, {
-            "name": "param",
-            "text": "name -"
-          }, {
-            "name": "returns",
-            "text": undefined
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/molecules/checkbox/group.css

@@ -1,190 +0,0 @@
-@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;
-}
-
-/**
- * Generator
- */
-:host {
-  display: block;
-  width: 100%;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-:host(.error) .label {
-  color: var(--bcm-color-red-6) !important;
-}
-
-.group-container {
-  display: flex;
-  gap: 24px;
-}
-.group-container.vertical {
-  gap: unset;
-  flex-direction: column;
-}
-.group-container.button {
-  gap: unset;
-}
-.group-container.full-width {
-  max-width: 100%;
-}
-
-.indeterminate {
-  padding: 0 0 16px 0;
-  margin-bottom: 16px;
-  border-bottom: 1px solid #efefef;
-  /**
-  * State: Disabled
-  */
-  /**
-  * State: Hover
-  */
-  /**
-  * State: indeterminate
-  */
-  /**
-  * State: determinate
-  */
-  /**
-  * State: indeterminate
-  */
-}
-.indeterminate input {
-  display: none;
-}
-.indeterminate label {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  color: var(--bcm-color-grey-8);
-  cursor: pointer;
-}
-.indeterminate label .icon-checked {
-  display: none;
-}
-.indeterminate span {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #D9D9D9;
-  margin-right: 8px;
-  border-radius: 2px;
-}
-.indeterminate span:after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 10px;
-  height: 10px;
-  background-color: var(--bcm-color-prime-blue-6);
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-.indeterminate bcm-icon {
-  filter: brightness(0) invert(1);
-}
-.indeterminate input[disabled] + label {
-  cursor: not-allowed;
-}
-.indeterminate input[disabled] + label span {
-  background-color: var(--bcm-color-grey-3);
-  border-color: var(--bcm-color-grey-5);
-}
-.indeterminate input[disabled] + label span:after {
-  background-color: var(--bcm-color-grey-6);
-}
-.indeterminate input[disabled] + label bcm-icon {
-  filter: brightness(0);
-  opacity: 0.3;
-}
-.indeterminate input:not([disabled]) + label:hover span {
-  border-color: var(--bcm-color-prime-blue-6);
-  box-shadow: 0px 2px 4px rgba(54, 121, 171, 0.5);
-}
-.indeterminate.bcm-uncheck label span {
-  background-color: #ffffff;
-}
-.indeterminate.bcm-determinate bcm-icon {
-  display: block;
-}
-.indeterminate.bcm-determinate label span {
-  background-color: var(--bcm-color-prime-blue-6);
-  border-color: transparent;
-}
-.indeterminate.bcm-determinate label span:after {
-  opacity: 0;
-}
-.indeterminate.bcm-indeterminate bcm-icon {
-  display: none !important;
-}
-.indeterminate.bcm-indeterminate label span {
-  background-color: #ffffff;
-}
-.indeterminate.bcm-indeterminate label span:after {
-  opacity: 1;
-}
-
-.label {
-  display: flex;
-  flex-direction: column;
-  color: var(--bcm-color-grey-9);
-  margin-bottom: 8px;
-}