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

package/dist/collection/components/organism/form-2/form-2.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/organism/form-2/form-2.js

@@ -0,0 +1,329 @@
+/*!
+ * 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, Element, Event, forceUpdate, h, Host, Listen, Method, Prop } from '@stencil/core';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
+import { StringHelper } from '../../../helper/string-helper';
+import Bcm from '../../../models/bcm';
+import { BcmFormComponents } from './bcm-form-components';
+import snq from 'snq';
+export class BcmForm2 {
+  constructor() {
+    this._id = Generate.UID();
+    this.validation = false;
+    this.isLoad = false;
+    this.formData = {};
+    this.formObj = new Map();
+  }
+  componentDidLoad() {
+    this.isLoad = true;
+    forceUpdate(this);
+  }
+  componentIsValid(element) {
+    if (!element.hidden) {
+      this.checkIsGroup(element);
+      const noValid = ['bcm-checkbox', 'bcm-switch'].includes(StringHelper.lowercase(element.tagName)) ? element.value == false : StringHelper.isNullOrEmpty(element.value);
+      if (element.required) {
+        if (noValid) {
+          element.captionError = Bcm.FormErrorMessages.required;
+          element.captionType = 'error';
+          this.formObj.set(element.id, {
+            name: element.name,
+            valid: false,
+            errorDetails: element.captionError,
+          });
+        }
+        else {
+          element.captionError = null;
+          element.captionType = 'default';
+          this.formObj.delete(element.id);
+        }
+      }
+    }
+  }
+  isGroup(el) {
+    return ['bcm-checkbox-group'].includes(StringHelper.lowercase(el.tagName));
+  }
+  checkIsGroup(element) {
+    if (this.isGroup(element)) {
+      for (let checkbox of Array.from(element.querySelectorAll('bcm-checkbox'))) {
+        checkbox && this.componentIsValid(checkbox);
+      }
+    }
+  }
+  changeCheckboxGroup(event) {
+    const element = event.target;
+    const { changed } = event.detail;
+    const checkboxes = Array.from(element.querySelectorAll('bcm-checkbox'));
+    for (let checkbox of checkboxes) {
+      if (checkbox.id == changed.element.id) {
+        checkbox.value = changed.event.value;
+        this.componentIsValid(checkbox);
+      }
+    }
+  }
+  bcmComponentList() {
+    return snq(() => Array.from(this.el.querySelectorAll('*'))
+      .filter(item => BcmFormComponents.includes(item.tagName) && (!item['s-hn'] || item['s-hn'] == 'BCM-FORM-2'))
+      .filter(Boolean), []);
+  }
+  formResponse() {
+    const formRespObj = {
+      formData: this.formData,
+      isValid: this.formObj.size == 0,
+      errorDetails: Object.assign({}, (this.formObj.size > 0 &&
+        Array.from(this.formObj).map(([_, value]) => ({
+          [value.name]: value.errorDetails,
+        })))),
+      message: this.formObj.size == 0 ? '' : 'Please fill in all inputs',
+    };
+    this.bcmForm.emit(formRespObj);
+    return formRespObj;
+  }
+  async setMethodType(type) {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      for (const component of this.bcmComponentList()) {
+        try {
+          await component[type]();
+          type == 'setClear' && validation && (this.componentIsValid(component));
+        }
+        catch (e) {
+          console.error(component.nodeName, type, e);
+        }
+      }
+    }
+    return Promise.resolve();
+  }
+  async submit() {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      for (const item of this.bcmComponentList()) {
+        const { name, value } = item;
+        this.formData[name] = StringHelper.isNullOrEmpty(value) ? null : value;
+        validation && this.componentIsValid(item);
+      }
+    }
+    return Promise.resolve(this.formResponse());
+  }
+  async set(data) {
+    var _a, _b, _c;
+    if (this.isLoad && data && ((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      for (let key of Object.keys(data)) {
+        const element = (_c = (_b = this.bcmComponentList()) === null || _b === void 0 ? void 0 : _b.find((item) => item.name == key)) !== null && _c !== void 0 ? _c : {};
+        if (element) {
+          try {
+            await element.set(data[key]);
+            this.componentIsValid(element);
+          }
+          catch (error) {
+            console.warn('set: ', key, element.nodeName);
+          }
+        }
+      }
+    }
+  }
+  async get() {
+    var _a;
+    let form = {};
+    if (((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      for (let element of this.bcmComponentList()) {
+        const value = await element.get();
+        form = Object.assign(Object.assign({}, form), { [element.name]: StringHelper.isNullOrEmpty(value) ? null : value });
+      }
+    }
+    return Promise.resolve(form);
+  }
+  async resetCaption() {
+    return Promise.resolve(await this.setMethodType('resetCaption'));
+  }
+  async setClear() {
+    this.formData = {};
+    this.formObj = new Map();
+    return Promise.resolve(await this.setMethodType('setClear'));
+  }
+  onChange(event) {
+    const { isLoad, validation } = this;
+    if (isLoad) {
+      const target = event.target;
+      const isBcmElement = target && target.tagName.toLowerCase().startsWith('bcm-');
+      if (validation && isBcmElement) {
+        if (this.isGroup(target))
+          return this.changeCheckboxGroup(event);
+        this.componentIsValid(target);
+      }
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "bcm-form-2"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-2.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-2.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()"
+    },
+    "validation": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "validation",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "bcmForm",
+      "name": "bcm-form",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "submit": {
+      "complexType": {
+        "signature": "() => Promise<object>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<object>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "set": {
+      "complexType": {
+        "signature": "(data: Object) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Object": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "get": {
+      "complexType": {
+        "signature": "() => Promise<{}>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{}>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "bcm-change",
+      "method": "onChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmForm2.prototype, "el", void 0);

package/dist/collection/components/organism/list/list-key-control.js

@@ -0,0 +1,125 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import Bcm from "../../../models/bcm";
+import { KeyControl } from "../../../models/abstract-classes/abstract-key-control";
+export class ListKeyControl extends KeyControl {
+  constructor(keyCode, element, treeview, checkBoxes) {
+    super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
+    this.isTreeview = false;
+    this.isCheckBoxes = false;
+    this.isTreeview = treeview;
+    this.isCheckBoxes = checkBoxes;
+  }
+  keyUpControl() {
+    if (this.isTreeview) {
+      this.keyUpTreeview();
+    }
+    else {
+      if (this.isFirstElement()) {
+        this.setFocus(this.getLastElement());
+      }
+      else {
+        this.setFocus(this.getPreviousElement());
+      }
+    }
+  }
+  keyDownTreeView() {
+    var _a;
+    if (this.isTreeview) {
+      if (this.isRootElement() && this.isRootElementIsOpen()) {
+        const childs = this.getChildElement();
+        if (childs) {
+          this.setFocus(childs.firstChild);
+        }
+      }
+      else {
+        if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
+          this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
+        }
+        else {
+          this.setFocus(this.getNextElement());
+        }
+      }
+    }
+  }
+  keyUpTreeview() {
+    if (this.isFirstElement()) {
+      const parent = this.getParentElement(this.getFocusedElement());
+      this.setFocus(parent);
+    }
+    else {
+      const previousElement = this.getPreviousElement();
+      if (previousElement) {
+        if (previousElement.classList.contains('bcm-list__item--open')) {
+          const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
+          console.log({ getChildElement });
+          this.setFocus(getChildElement.lastChild);
+        }
+        else {
+          this.setFocus(previousElement);
+        }
+      }
+    }
+  }
+  keyDownControl() {
+    if (this.isTreeview) {
+      this.keyDownTreeView();
+    }
+    else {
+      if (this.isLastElement()) {
+        this.setFocus(this.getFirstElement());
+      }
+      else {
+        this.setFocus(this.getNextElement());
+      }
+    }
+  }
+  keyRightControl() {
+    if (this.isTreeview) {
+      if (!this.isRootElementIsOpen() && this.isRootElement()) {
+        const { id } = this.getFocusedElement();
+        this.openGroup(id);
+      }
+    }
+  }
+  keyLeftControl() {
+    if (this.isTreeview) {
+      if (this.isRootElementIsOpen() && this.isRootElement()) {
+        const { id } = this.getFocusedElement();
+        this.openGroup(id);
+      }
+    }
+  }
+  keyEnterControl() { }
+  keySpaceControl() {
+    if (this.isCheckBoxes) {
+      const { id } = this.getFocusedElement();
+      this.checkedItem(id);
+    }
+  }
+  keyDown() {
+    switch (this.getKeyCode()) {
+      case Bcm.KeyCode.up:
+        this.keyUpControl();
+        break;
+      case Bcm.KeyCode.down:
+        this.keyDownControl();
+        break;
+      case Bcm.KeyCode.left:
+        this.keyLeftControl();
+        break;
+      case Bcm.KeyCode.right:
+        this.keyRightControl();
+        break;
+      case Bcm.KeyCode.enter:
+        this.keyEnterControl();
+        break;
+      case Bcm.KeyCode.space:
+        this.keySpaceControl();
+        break;
+    }
+  }
+  keyUp() { }
+}