bromcom-ui 2.3.58 → 2.3.59

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

@@ -1,296 +0,0 @@
-import { Component, h, Method, Prop, State, Watch, Element, Host } from '@stencil/core';
-import cs from 'classnames';
-const sizes = {
-  small: ['size-1', 14],
-  medium: ['size-2', 16]
-};
-/*
-    size(width-height), radius, text-size, icon-size
-*/
-const circleSizes = {
-  small: [80, 36, 'size-3', 22],
-  medium: [120, 52, 'size-5', 30]
-};
-export class BcmProgress {
-  constructor() {
-    this.percent = 0;
-    this.size = 'medium';
-    this.type = 'line-rounded';
-    this.info = 'icon';
-    this.error = false;
-    this.hidden = false;
-    this.isCompleted = false;
-  }
-  maxPercent(newValue) {
-    if (newValue >= 100) {
-      this.percent = 100;
-      this.isCompleted = true;
-    }
-    if (newValue < 100) {
-      this.isCompleted = false;
-    }
-    if (newValue <= 0) {
-      this.percent = 0;
-    }
-  }
-  async increment(percent) {
-    !this.error && (this.percent += percent);
-  }
-  async decrement(percent) {
-    !this.error && (this.percent -= percent);
-  }
-  async setPercent(percent) {
-    !this.error && (this.percent = percent);
-  }
-  displayValue() {
-    const [textSize, iconSize] = sizes[this.size];
-    if (this.error) {
-      return (h("bcm-icon", { class: "value", icon: "close-circle", color: "grey-10", size: iconSize, type: "fill" }));
-    }
-    else if (this.info === 'percent' || !this.isCompleted) {
-      return (h("text", { class: textSize + ' value' },
-        this.percent,
-        "%"));
-    }
-    return (h("bcm-icon", { class: "value", icon: "check-circle", color: "green-6", size: iconSize, type: "fill" }));
-  }
-  displayCircleIcon() {
-    const iconSize = circleSizes[this.size][3];
-    if (this.error) {
-      return (h("bcm-icon", { icon: "close", color: "grey-10", size: iconSize }));
-    }
-    else if (this.info === 'icon' && this.isCompleted) {
-      return (h("bcm-icon", { icon: "check", color: "green-6", size: iconSize }));
-    }
-  }
-  componentWillLoad() {
-    this.maxPercent(this.percent);
-  }
-  componentDidRender() {
-    const circle = this.host.shadowRoot.querySelector('#circle');
-    if (circle) {
-      const radius = circle.r.baseVal.value;
-      const circumference = radius * 2 * Math.PI;
-      const offset = circumference - this.percent / 100 * circumference;
-      circle.style.strokeDasharray = `${circumference} ${circumference}`;
-      circle.style.strokeDashoffset = `${circumference}`;
-      circle.style.strokeDashoffset = `${offset}`;
-    }
-  }
-  render() {
-    const isIcon = this.info === 'icon';
-    const [size, r, textSize] = circleSizes[this.size];
-    const xy = size / 2;
-    const completeState = {
-      'completed': isIcon && this.isCompleted,
-      'error': this.error
-    };
-    const classes = cs('progress', this.size, this.type, completeState);
-    const circleClasses = cs('progress-circle', 'bar', completeState);
-    const containerStyle = {
-      width: `${size}px`,
-      height: `${size}px`
-    };
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    if (this.type === 'circle') {
-      return (h(Host, { class: hostClasses },
-        h("div", { class: "progress-circle-container", style: containerStyle },
-          h("svg", { width: size, height: size },
-            h("circle", { class: "progress-circle", r: r, cx: xy, cy: xy }),
-            h("circle", { id: "circle", class: circleClasses, r: r, cx: xy, cy: xy }),
-            (this.info === 'percent' || !this.isCompleted) && !this.error && h("text", { x: xy, y: xy, "text-anchor": "middle", class: textSize, "alignment-baseline": "middle" },
-              this.percent,
-              "%")),
-          this.displayCircleIcon())));
-    }
-    return (h(Host, { class: hostClasses },
-      h("div", { class: "progress-container" },
-        h("progress", { class: classes, value: this.percent, max: 100 }),
-        this.displayValue())));
-  }
-  static get is() { return "bcm-progress"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["progress.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["progress.css"]
-  }; }
-  static get properties() { return {
-    "percent": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "percent",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "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'"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'line' | 'line-rounded' | 'circle'",
-        "resolved": "\"circle\" | \"line\" | \"line-rounded\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'line-rounded'"
-    },
-    "info": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'percent' | 'icon'",
-        "resolved": "\"icon\" | \"percent\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info",
-      "reflect": false,
-      "defaultValue": "'icon'"
-    },
-    "error": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error",
-      "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"
-    }
-  }; }
-  static get states() { return {
-    "isCompleted": {}
-  }; }
-  static get methods() { return {
-    "increment": {
-      "complexType": {
-        "signature": "(percent: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "decrement": {
-      "complexType": {
-        "signature": "(percent: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setPercent": {
-      "complexType": {
-        "signature": "(percent: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "percent",
-      "methodName": "maxPercent"
-    }]; }
-}

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

@@ -1,132 +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;
-  margin: 0 0 8px 0;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-:host(.error) label {
-  color: var(--bcm-color-red-6) !important;
-}
-
-.caption-default {
-  color: #8C8C8C;
-}
-
-.caption-primary {
-  color: #4293CF;
-}
-
-.caption-success {
-  color: #52C41A;
-}
-
-.caption-warning {
-  color: #FA8C16;
-}
-
-.caption-error {
-  color: #F5222D;
-}
-
-.radio-group {
-  display: flex;
-}
-.radio-group.horizontal {
-  flex-direction: row;
-  margin-bottom: 5px;
-}
-.radio-group.horizontal ::slotted(bcm-radio:not(:last-of-type)) {
-  margin-right: 16px;
-}
-.radio-group.horizontal bcm-radio:not(:last-of-type) {
-  margin-right: 16px;
-}
-.radio-group.vertical {
-  flex-direction: column;
-}
-.radio-group.vertical label {
-  margin-bottom: 4px;
-}
-.radio-group.vertical ::slotted(bcm-radio:not(:last-of-type)) {
-  margin-bottom: 8px;
-}
-.radio-group.vertical bcm-radio:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.label {
-  display: flex;
-  flex-direction: column;
-  color: var(--bcm-color-grey-9);
-  padding-right: 4px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-.caption-area {
-  min-height: 20px;
-}
-
-.input-caption {
-  display: block;
-}