bromcom-ui 2.3.58 → 2.3.62

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

@@ -1,84 +0,0 @@
-import { Component, h, State, Element, Prop, Host } from '@stencil/core';
-import cs from 'classnames';
-export class BcmCard {
-  constructor() {
-    this.size = 'medium';
-    this.hidden = false;
-  }
-  componentDidRender() {
-    const slot = this.host.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-card-header') {
-        el.slot = 'header';
-        this.header = true;
-      }
-      if (String(el.tagName).toLowerCase() === 'bcm-card-footer') {
-        el.slot = 'footer';
-        this.footer = true;
-      }
-    });
-  }
-  render() {
-    const classes = cs('card', this.size);
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses },
-      h("div", { class: classes },
-        this.header && (h("div", { class: "header size-3 weight-semibold" },
-          h("slot", { name: "header" }))),
-        h("div", { class: "card-body" },
-          h("slot", null)),
-        this.footer && (h("div", { class: "footer" },
-          h("slot", { name: "footer" }))))));
-  }
-  static get is() { return "bcm-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["card.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["card.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium'",
-        "resolved": "\"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "header": {},
-    "footer": {}
-  }; }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,248 +0,0 @@
-import { Component, h, Element, Prop, Host } from '@stencil/core';
-import cs from 'classnames';
-export class BcmCheckboxLite {
-  constructor() {
-    /**
-     * Component Properties
-     */
-    this.value = '';
-    this.name = 'checkbox';
-    this.checked = false;
-    this.indeterminate = false;
-    this.disabled = false;
-    this.readOnly = false;
-    this.hidden = false;
-    this.required = false;
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  render() {
-    const { disabled, checked, readOnly, name, required } = this;
-    const hostClasses = cs(this.hidden ? 'hidden' : null, {
-      'indeterminate': this.indeterminate
-    });
-    const iconClasses = cs('icon');
-    return (h(Host, { class: hostClasses },
-      h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }),
-      h("label", { htmlFor: name },
-        h("span", { class: iconClasses },
-          h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
-  }
-  static get is() { return "bcm-checkbox-lite"; }
-  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"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "indeterminate",
-      "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"
-    },
-    "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
-    },
-    "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 elementRef() { return "el"; }
-}

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

@@ -1,322 +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
- */
-.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;
-}
-
-:host {
-  display: inline-block;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-input {
-  display: none;
-}
-
-.svg-icon {
-  filter: brightness(0) invert(1);
-  width: 12px;
-  height: 12px;
-}
-
-label {
-  display: flex;
-  align-items: flex-start;
-  font-size: 14px;
-  color: var(--bcm-color-grey-8);
-  cursor: pointer;
-}
-label span.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  border: 1px solid #D9D9D9;
-  margin-right: 8px;
-  border-radius: 2px;
-  margin-top: 2px;
-  background-color: var(--bcm-color-grey-1);
-}
-
-:host(.indeterminate) label span.icon {
-  position: relative;
-}
-:host(.indeterminate) label span.icon::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  width: 10px;
-  height: 10px;
-  background-color: var(--bcm-color-prime-blue-6);
-  transform: translate(-50%, -50%);
-  opacity: 1;
-  z-index: 1;
-}
-:host(.indeterminate) label span.icon::before {
-  content: "";
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  width: 16px;
-  height: 100%;
-  border-radius: 2px;
-  background-color: var(--bcm-color-grey-1);
-  border: 1px solid var(--bcm-color-grey-5);
-  opacity: 1;
-  z-index: 1;
-}
-:host(.indeterminate) label span.icon:hover:not(.disabled):before {
-  border-color: var(--bcm-color-prime-blue-6);
-  box-shadow: 0px 2px 4px rgba(54, 121, 171, 0.5);
-}
-
-input:checked + label span.icon {
-  background-color: var(--bcm-color-prime-blue-6);
-  border-color: transparent;
-}
-input:checked + label .icon-checked {
-  display: block;
-}
-
-bcm-icon {
-  filter: brightness(0) invert(1);
-}
-
-/**
- * State: Disabled
- */
-input[disabled] + label {
-  cursor: not-allowed;
-}
-input[disabled] + label span.icon {
-  background-color: var(--bcm-color-grey-3);
-  border-color: var(--bcm-color-grey-5);
-}
-input[disabled] + label bcm-icon {
-  filter: brightness(0);
-  opacity: 0.3;
-}
-
-/**
- * State: Hover
- */
-input:not([disabled]) + label:hover span.icon {
-  border-color: var(--bcm-color-prime-blue-6);
-  box-shadow: 0px 2px 4px rgba(54, 121, 171, 0.5);
-}
-
-:host(.error) input:not([disabled]) + label span.icon {
-  border-color: var(--bcm-color-red-6);
-}
-
-.caption-area {
-  margin-bottom: 8px;
-  min-height: 20px;
-  display: block;
-}
-
-.input-caption {
-  display: block;
-}
-
-.caption-default {
-  color: #8C8C8C;
-}
-
-.caption-primary {
-  color: #4293CF;
-}
-
-.caption-success {
-  color: #52C41A;
-}
-
-.caption-warning {
-  color: #FA8C16;
-}
-
-.caption-error {
-  color: #F5222D;
-}
-
-/* Radio Button Styles */
-.radio-button {
-  background-color: var(--bcm-color-grey-1);
-  color: var(--bcm-color-grey-8);
-  border: 1px solid var(--bcm-color-grey-5);
-  padding: 0 16px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.radio-button > span.icon {
-  display: none;
-}
-.radio-button > span.slot {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  user-select: none;
-}
-.radio-button:hover:not(.disabled) {
-  color: var(--bcm-color-prime-blue-5);
-}
-.radio-button:active:not(.disabled) {
-  color: var(--bcm-color-prime-blue-7);
-}
-.radio-button.disabled {
-  background-color: var(--bcm-color-grey-3);
-  color: var(--bcm-color-grey-6);
-  cursor: not-allowed;
-}
-.radio-button.checked.disabled {
-  background-color: var(--bcm-color-grey-4);
-  color: var(--bcm-color-grey-1);
-  border-color: var(--bcm-color-grey-5);
-}
-.radio-button.checked.solid {
-  color: var(--bcm-color-grey-1);
-  background-color: var(--bcm-color-prime-blue-6);
-  border-color: var(--bcm-color-prime-blue-6);
-}
-.radio-button.checked.solid:hover {
-  background-color: var(--bcm-color-prime-blue-5);
-  border-color: var(--bcm-color-prime-blue-5);
-}
-.radio-button.checked.solid:active {
-  background-color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-}
-.radio-button.checked.outline {
-  background-color: var(--bcm-color-grey-1);
-  color: var(--bcm-color-prime-blue-6);
-  border-color: var(--bcm-color-prime-blue-6);
-}
-.radio-button.checked.outline:hover {
-  color: var(--bcm-color-prime-blue-5);
-  border-color: var(--bcm-color-prime-blue-5);
-}
-.radio-button.checked.outline:active {
-  color: var(--bcm-color-prime-blue-7);
-  border-color: var(--bcm-color-prime-blue-7);
-}
-.radio-button.large {
-  height: 40px;
-}
-.radio-button.medium {
-  height: 32px;
-}
-.radio-button.small {
-  height: 24px;
-}