bromcom-ui 2.3.55 → 2.3.59

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

@@ -1,467 +0,0 @@
-import { Component, Prop, h, Element, Event, Method, Host, State, Listen } from '@stencil/core';
-import { StatusProps, TypeProps } from './types';
-import cs from 'classnames';
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-export class BcmModal {
-  constructor() {
-    this.slotHeader = false;
-    this.slotContent = false;
-    this.slotFooter = false;
-    this.slotHeaderHtml = '';
-    this.slotContentHtml = '';
-    this.slotFooterHtml = '';
-    this.bodyStyleOverflow = '';
-    this.type = TypeProps.modal;
-    this.status = StatusProps.none;
-    this.okText = 'OK';
-    this.cancelText = 'Cancel';
-    this.isShow = false;
-    this.hidden = false;
-    this.size = 'medium';
-    this.fullWidth = false;
-    this.backdrop = true;
-  }
-  /**
-   * @StencilMethod
-   */
-  componentWillLoad() {
-    if (this.type !== TypeProps.modal && this.status === StatusProps.none)
-      this.status = StatusProps.info;
-    // if ( this.el.querySelector('bcm-modal-header')  ) { 
-    //     this.slotHeaderHtml = this.el.querySelector('bcm-modal-header').innerHTML
-    //     this.slotHeader = true 
-    // }
-    // if ( this.el.querySelector('bcm-modal-content') ) { 
-    //     this.slotContentHtml = this.el.querySelector('bcm-modal-content').outerHTML
-    //     this.slotContent = true 
-    // }
-    // if ( this.el.querySelector('bcm-modal-footer')  ) { 
-    //     this.slotFooter = true 
-    // }
-  }
-  componentDidRender() {
-    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-modal-header') {
-        el.slot = 'header';
-        this.headerArea = true;
-      }
-      if (String(el.tagName).toLowerCase() === 'bcm-modal-footer') {
-        el.slot = 'footer';
-        this.footerArea = true;
-      }
-    });
-  }
-  /**
-   * @desc
-   * @returns {BcmIcon}
-   */
-  getIcon() {
-    switch (this.status) {
-      case StatusProps.info:
-        return h("bcm-icon", { type: "outlined", icon: "info-circle", size: "medium", color: "prime-blue-6" });
-      case StatusProps.error:
-        return h("bcm-icon", { type: "outlined", icon: "close-circle", size: "medium", color: "red-6" });
-      case StatusProps.warning:
-        return h("bcm-icon", { type: "outlined", icon: "exclamation-circle", size: "medium", color: "warmyellow-6" });
-      case StatusProps.success:
-        return h("bcm-icon", { type: "outlined", icon: "check-circle", size: "medium", color: "green-6" });
-    }
-  }
-  /**
-   * @desc
-   */
-  handleOk() {
-    this.ok.emit();
-    this.isShow = false;
-  }
-  /**
-   * @desc
-   */
-  handleCancel() {
-    this.cancel.emit();
-    this.isShow = false;
-  }
-  /**
-   * @desc
-   * @returns {BcmIcon}
-   */
-  getFooterActions() {
-    return ((this.footerArea && (h("footer", null,
-      " ",
-      h("slot", { name: "footer" }),
-      " "))));
-  }
-  handleSubmit(e) {
-    if (lowercase(e.target.nodeName) === 'bcm-button') {
-      if (e.target.dataDismiss) {
-        this.dismiss();
-      }
-    }
-  }
-  /**
-   * @desc Removes component itself
-   */
-  dismiss() {
-    this.isShow = false;
-    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-    // this.el.remove()
-  }
-  handleBackdrop() {
-    if (this.backdrop == true) {
-      this.dismiss();
-    }
-  }
-  /**
-   * @desc
-   */
-  async hide() {
-    this.dismiss();
-  }
-  /**
-   * @desc
-   */
-  async show() {
-    this.isShow = true;
-    if (document.querySelector("body").style.overflow != "hidden") {
-      this.bodyStyleOverflow = document.querySelector("body").style.overflow;
-    }
-    document.querySelector("body").style.overflow = "hidden";
-    // const bcmTabs = this.el.querySelector('bcm-tabs')
-    // if ( bcmTabs ) {
-    //     var getActiveTab = await bcmTabs.getActiveTab()
-    //     bcmTabs.active( getActiveTab )
-    // }
-  }
-  keyboardNavigation(e) {
-    if (this.backdrop == true) {
-      const which = e.which || 0;
-      if (which == 27) {
-        e.preventDefault();
-        this.dismiss();
-      }
-    }
-  }
-  render() {
-    const { type, status, headerTitle, isShow, headerArea, size, fullWidth } = this;
-    const cardClasses = cs('card', status, size, fullWidth ? 'full-width' : null);
-    const modal = cs('modal', {
-      'show': isShow
-    });
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses },
-      h("div", { class: modal },
-        h("div", { class: "overlay", onClick: () => this.handleBackdrop() }),
-        h("div", { class: cardClasses },
-          type === TypeProps.modal && (headerArea && (h("header", null,
-            h("slot", { name: "header" }),
-            " ",
-            h("bcm-icon", { icon: "close", color: "grey-10", onClick: () => this.dismiss() })))),
-          h("div", { class: "text-content" },
-            type !== TypeProps.modal && (h("span", { class: "title" },
-              this.getIcon(),
-              headerArea && (h("slot", { name: "header" })),
-              !headerArea && (headerTitle))),
-            h("p", { class: type !== TypeProps.modal ? 'with-status' : '' },
-              h("slot", null)),
-            type !== TypeProps.modal && this.getFooterActions()),
-          type === TypeProps.modal && (this.getFooterActions())))));
-  }
-  static get is() { return "bcm-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["modal.css"]
-  }; }
-  static get properties() { return {
-    "headerTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Component Properties"
-      },
-      "attribute": "header-title",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TypeProp",
-        "resolved": "\"confirmation\" | \"information\" | \"modal\"",
-        "references": {
-          "TypeProp": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "TypeProps.modal"
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "StatusProp",
-        "resolved": "\"error\" | \"info\" | \"none\" | \"success\" | \"warning\"",
-        "references": {
-          "StatusProp": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "status",
-      "reflect": false,
-      "defaultValue": "StatusProps.none"
-    },
-    "okText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "ok-text",
-      "reflect": false,
-      "defaultValue": "'OK'"
-    },
-    "cancelText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "cancel-text",
-      "reflect": false,
-      "defaultValue": "'Cancel'"
-    },
-    "isShow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true,
-      "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"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SizeProp",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
-        "references": {
-          "SizeProp": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "backdrop": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "true | false | 'static'",
-        "resolved": "\"static\" | boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "backdrop",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "headerArea": {},
-    "footerArea": {}
-  }; }
-  static get events() { return [{
-      "method": "ok",
-      "name": "bcm-ok",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Component Events"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "cancel",
-      "name": "bcm-cancel",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    },
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": [{
-            "name": "desc",
-            "text": undefined
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleSubmit",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "keyboardNavigation",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/molecules/modal/model-footer.js

@@ -1,34 +0,0 @@
-import { Component, h, Host, Prop } from '@stencil/core';
-import cs from 'classnames';
-export class BcmFooter {
-  constructor() {
-    this.hidden = false;
-  }
-  render() {
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses },
-      h("slot", null)));
-  }
-  static get is() { return "bcm-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}

package/dist/collection/components/molecules/modal/types.js

@@ -1,28 +0,0 @@
-/**
- * 'status' prop predefined values
- */
-export var StatusProps;
-(function (StatusProps) {
-  StatusProps["info"] = "info";
-  StatusProps["error"] = "error";
-  StatusProps["warning"] = "warning";
-  StatusProps["success"] = "success";
-  StatusProps["none"] = "none";
-})(StatusProps || (StatusProps = {}));
-/**
- * 'type' prop predefined values
- */
-export var TypeProps;
-(function (TypeProps) {
-  TypeProps["modal"] = "modal";
-  TypeProps["information"] = "information";
-  TypeProps["confirmation"] = "confirmation";
-})(TypeProps || (TypeProps = {}));
-/**
- * 'type' prop predefined values
- */
-export var OrientationProps;
-(function (OrientationProps) {
-  OrientationProps["portrait"] = "portrait";
-  OrientationProps["landscape"] = "landscape";
-})(OrientationProps || (OrientationProps = {}));

package/dist/collection/components/molecules/notification/notification.css

@@ -1,116 +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;
-}
-
-:host(.hidden) {
-  display: none;
-}
-
-.notification {
-  display: none;
-  width: 100%;
-  max-width: 384px;
-  padding: 16px 24px;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-}
-.notification.show {
-  display: flex;
-}
-
-.text-content {
-  width: 100%;
-}
-
-.title {
-  position: relative;
-  display: block;
-  padding-right: 24px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  font-size: 16px;
-  color: var(--bcm-color-grey-9);
-}
-.title bcm-icon {
-  position: absolute;
-  right: 0;
-  top: 10px;
-  cursor: pointer;
-}
-
-p {
-  margin-top: 8px;
-  margin-bottom: 0;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--bcm-color-grey-8);
-}
-
-.icon-content {
-  padding-top: 8px;
-  padding-right: 16px;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 16px;
-}