bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

package/dist/collection/components/other_deprecated/tabs/tab.js

@@ -0,0 +1,303 @@
+/*!
+ * 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 { Component, Prop, h, Element, Event, Host } from '@stencil/core';
+import { TypeProps } from './types';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+export class BcmTab {
+  constructor() {
+    /**
+     * Component Properties
+     */
+    this.type = TypeProps.normal;
+    this.active = false;
+    this.disabled = false;
+    this.closable = false;
+    this.tabId = (Math.random() * 4).toString(16).replace('.', '');
+    this.formControl = null;
+    this.hidden = false;
+    this.status = 'default';
+    this.badge = false;
+    this.blink = false;
+  }
+  /**
+   * @desc
+   */
+  handleClose() {
+    if (this.disabled)
+      return;
+    this.close.emit();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleClick(event) {
+    if (this.disabled)
+      return;
+    const targetElement = event.target;
+    // Detect close icon clicked
+    // #
+    if (String(targetElement.tagName).toLowerCase() == 'bcm-icon' && targetElement.classList.contains('close')) {
+      this.close.emit(event);
+    }
+    else {
+      this.click.emit(event);
+    }
+  }
+  render() {
+    const { active, disabled, closable } = this;
+    const classes = cs('tab', [this.type], {
+      'active': active,
+      'disabled': disabled,
+      'closable': closable
+    });
+    const hostClasses = cs(this.hidden ? 'hidden' : null);
+    const badgeClasses = cs('badge');
+    return (h(Host, { class: hostClasses },
+      h("div", { class: classes, onClick: (event) => this.handleClick(event) },
+        h("slot", { name: "icon-prefix" }),
+        h("slot", null),
+        h("slot", { name: "icon-suffix" }),
+        this.closable && (h("bcm-icon", { class: "close", icon: "far fa-times" })),
+        this.badge && (h("bcm-badge", { blink: true, class: badgeClasses, size: "small", status: this.status })))));
+  }
+  static get is() { return "bcm-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tab.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TypeProp",
+        "resolved": "\"normal\" | \"pane\" | \"stepper\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component Properties"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "TypeProps.normal"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "closable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "closable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tabId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tab-id",
+      "reflect": false,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "formControl": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form-control",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "status": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'processing' | 'error' | 'warning' | 'success' | 'default'",
+        "resolved": "\"default\" | \"error\" | \"processing\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "status",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "badge": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "blink": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "blink",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "bcm-click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Component Events"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "close",
+      "name": "bcm-close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmTab.prototype, "el", void 0);

package/dist/collection/components/other_deprecated/tabs/tabs-content.css

@@ -0,0 +1,136 @@
+@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
+ */
+.input-size-large {
+  height: 40px;
+}
+
+.input-size-medium {
+  height: 32px;
+}
+
+.input-size-small {
+  height: 24px;
+}
+
+.resize-none textarea {
+  resize: none;
+}
+
+.resize-vertical textarea {
+  resize: vertical;
+}
+
+.resize-auto textarea {
+  height: auto;
+  resize: none;
+}
+
+.textarea-size-large {
+  padding: 4px 0 0 4px;
+  min-height: 40px;
+}
+.textarea-size-large .bcm-input-element {
+  min-height: calc((40px - 8px) + 2px);
+}
+.textarea-size-large .input-clear-button {
+  height: calc( 40px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-medium {
+  padding: 4px 0 0 4px;
+  min-height: 32px;
+}
+.textarea-size-medium .bcm-input-element {
+  min-height: calc((32px - 8px) + 2px);
+}
+.textarea-size-medium .input-clear-button {
+  height: calc( 32px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-small {
+  padding: 0px 0 0 4px;
+  min-height: 24px;
+}
+.textarea-size-small .bcm-input-element {
+  min-height: calc((24px - 8px) + 2px);
+}
+.textarea-size-small .input-clear-button {
+  height: calc( 24px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+:host {
+  width: 100%;
+  display: block;
+  padding: 8px;
+}
+
+:host(.pane) {
+  border: 1px solid transparent;
+  border-top: none;
+  border-color: var(--bcm-color-grey-5);
+  border-radius: 0 0 2px 2px;
+}

package/dist/collection/components/other_deprecated/tabs/tabs-content.js

@@ -0,0 +1,147 @@
+/*!
+ * 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 { Component, h, Element, Prop, Host, Listen } from '@stencil/core';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { getChilds } from '../../../utils/utils';
+import { TypeProps } from './types';
+export class BcmTabsContent {
+  constructor() {
+    this.size = 'medium';
+    this.hidden = false;
+    this.fullWidth = false;
+    this.type = TypeProps.normal;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  handleActivePane(e) {
+    getChilds(this.el, 'bcm-tab-pane').forEach(items => {
+      items.tab == e.detail && (items.active = true);
+      items.tab != e.detail && (items.active = false);
+    });
+  }
+  render() {
+    const classes = cs('tabs-content', this.size);
+    const hostClasses = cs(this.hidden ? 'hidden' : null, this.type);
+    return (h(Host, { class: hostClasses },
+      h("div", { class: classes },
+        h("slot", null))));
+  }
+  static get is() { return "bcm-tabs-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tabs-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tabs-content.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "TypeProp",
+        "resolved": "\"normal\" | \"pane\" | \"stepper\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "TypeProps.normal"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "bcm-tabs-active-item",
+      "method": "handleActivePane",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmTabsContent.prototype, "el", void 0);