bromcom-ui 2.3.62 → 2.3.63

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

@@ -0,0 +1,296 @@
+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

@@ -0,0 +1,132 @@
+@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;
+}