bromcom-ui 2.7.37-rc.0 → 2.7.37-rc.2

package/dist/collection/components/other/data-table/table.js

@@ -0,0 +1,92 @@
+/*!
+ * 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, Prop, Element } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { delay } from "../../../utils/utils";
+export class BcmTable {
+  constructor() {
+    this.gridOptions = {};
+  }
+  fetchJsFromCDN(url) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = url;
+      script.onload = () => {
+        resolve(script);
+      };
+      script.onerror = () => {
+        reject(new Error(`Script load error for ${url}`));
+      };
+      document.head.appendChild(script);
+    });
+  }
+  ;
+  async componentDidLoad() {
+    await this.fetchJsFromCDN("https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js").then(() => console.info('agGridCommunity loaded'));
+    await this.fetchJsFromCDN("https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js").then(() => console.info('agGridEnterprise loaded'));
+    await delay(100);
+    const agGrid = window["agGrid"];
+    const gridDiv = this.el.querySelector('#bcm-table');
+    if (gridDiv && agGrid) {
+      this.el.getAttributeNames().forEach(key => {
+        if (key === "class") {
+          gridDiv.classList.add(this.el.getAttribute(key));
+        }
+        else {
+          gridDiv.setAttribute(key, this.el.getAttribute(key));
+        }
+      });
+      try {
+        agGrid.LicenseManager.setLicenseKey(process.env.AG_GRID);
+        new agGrid.Grid(gridDiv, this.gridOptions);
+      }
+      catch (e) {
+        console.log(`agGrid error: ${e}`);
+      }
+    }
+  }
+  render() {
+    return (h("div", { id: "bcm-table", class: "bcm-table ag-theme-balham" }));
+  }
+  static get is() { return "bcm-table"; }
+  static get originalStyleUrls() { return {
+    "$": ["table.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table.css"]
+  }; }
+  static get properties() { return {
+    "gridOptions": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{}"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmTable.prototype, "el", void 0);

package/dist/collection/components/other/default/default.css

@@ -0,0 +1,127 @@
+@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 {
+  display: block;
+}

package/dist/collection/components/other/default/default.js

@@ -0,0 +1,54 @@
+/*!
+ * 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, Host, Prop, Element } from '@stencil/core';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
+export class BcmDefault {
+  constructor() {
+    this._id = Generate.UID();
+  }
+  render() {
+    return (h(Host, null,
+      h("bcm-skeleton", null,
+        h("slot", null))));
+  }
+  static get is() { return "bcm-default"; }
+  static get originalStyleUrls() { return {
+    "$": ["default.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["default.css"]
+  }; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmDefault.prototype, "el", void 0);

package/dist/collection/components/other_deprecated/collapse/collapse.css

@@ -0,0 +1,177 @@
+@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;
+}
+
+.bcm-collapse {
+  display: block;
+  border: 1px solid var(--bcm-color-grey-5);
+}
+.bcm-collapse ::-webkit-details-marker {
+  display: none;
+}
+.bcm-collapse__header {
+  display: flex;
+  align-items: center;
+  color: var(--bcm-color-grey-9);
+  padding: 16px;
+  background-color: var(--bcm-color-grey-2);
+  border-bottom: 1px solid var(--bcm-color-grey-5);
+  cursor: default;
+  user-select: none;
+}
+.bcm-collapse__header:focus {
+  outline: none;
+}
+.bcm-collapse__header .collapse-icon {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bcm-collapse__body {
+  padding: 16px;
+  background-color: var(--bcm-color-grey-1);
+  color: var(--bcm-color-grey-8);
+}
+.bcm-collapse--borderless {
+  border: none;
+}
+.bcm-collapse--borderless:not(.bcm-collapse--no-border) {
+  border-bottom: 1px solid var(--bcm-color-grey-5);
+}
+.bcm-collapse--borderless .bcm-collapse__header {
+  border-bottom: none;
+}
+.bcm-collapse--borderless .bcm-collapse__body {
+  background-color: var(--bcm-color-grey-2);
+  padding: 0 40px 16px;
+}
+.bcm-collapse:not(.bcm-collapse--open) .bcm-collapse__header {
+  border-bottom: none;
+}
+.bcm-collapse:not(:first-child) .collapse {
+  border-top: none;
+}
+.bcm-collapse.hidden {
+  display: none;
+}

package/dist/collection/components/other_deprecated/collapse/collapse.js

@@ -0,0 +1,163 @@
+/*!
+ * 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, Host, Prop, Event, Element } from '@stencil/core';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
+export class BcmCollapse {
+  constructor() {
+    this._id = Generate.UID();
+    this.borderless = false;
+    this.open = false;
+    this.noBorder = false;
+    this.hidden = false;
+  }
+  componentDidRender() {
+    this.open && this.bcmCollapseOpen.emit(this._id);
+  }
+  render() {
+    const { hidden, borderless, open, noBorder, _id } = this;
+    const classes = cs('bcm-collapse', {
+      'bcm-collapse--borderless': borderless,
+      'bcm-collapse--open': open,
+      'bcm-collapse--no-border': noBorder
+    });
+    const caretDown = '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>';
+    const caretRight = '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>';
+    return (h(Host, { class: { hidden }, id: _id },
+      h("details", { class: classes, open: open },
+        h("summary", { class: "bcm-collapse__header size-2", onClick: () => this.open = !open },
+          h("span", { class: "collapse-icon", innerHTML: open ? (caretDown) : (caretRight) }),
+          h("slot", { name: "title" })),
+        h("div", { class: "bcm-collapse__body" },
+          h("slot", { name: "body" })))));
+  }
+  static get is() { return "bcm-collapse"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["collapse.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["collapse.css"]
+  }; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "borderless": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "borderless",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "noBorder": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-border",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "bcmCollapseOpen",
+      "name": "bcm-collapse-open",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmCollapse.prototype, "el", void 0);