bromcom-ui 2.3.59 → 2.3.63

package/dist/cjs/bcm-breadcrumb.cjs.entry.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const breadcrumbCss = "@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}*{box-sizing:border-box}:host{display:inline-block}:host(.hidden){display:none}::-webkit-details-marker{display:none}.breadcrumb{margin:0;padding:0;list-style-type:none;display:flex}.breadcrumb li+li::before{content:\"/\";display:inline-block;text-align:center;color:var(--bcm-color-grey-7);width:24px}.breadcrumb-item{font-size:14px;display:inline-flex;color:var(--bcm-color-grey-7)}.breadcrumb-item:last-child .non-link-item{color:var(--bcm-color-grey-8)}.breadcrumb-item .non-link-item{display:inline-flex}.breadcrumb-item .non-link-item bcm-icon{margin-right:4px}.dropdown{position:relative}.dropdown summary{display:inline-flex;align-items:center;cursor:pointer}.dropdown summary:focus{outline:none}.dropdown summary:hover{color:var(--bcm-color-prime-blue-6)}.dropdown summary:active{color:var(--bcm-color-grey-8)}.dropdown summary.open{color:var(--bcm-color-grey-8)}.dropdown summary bcm-icon{margin-left:4px}.dropdown-menu{position:absolute;min-width:140px;background-color:var(--bcm-color-grey-1);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);margin-top:4px}.dropdown-menu .dropdown-item{display:flex;padding:4px 8px}.dropdown-menu .dropdown-item bcm-link{width:100%}";
+
+const BcmBreadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmBreadcrumb = index.createEvent(this, "bcm-breadcrumb-click", 7);
+    this.hidden = false;
+  }
+  handleClickOutside(e) {
+    if (!this.host.contains(e.target)) {
+      if (this.isOpen)
+        this.isOpen = false;
+    }
+  }
+  handleOpen() {
+    this.isOpen = !this.isOpen;
+  }
+  handleItemClick(item) {
+    this.bcmBreadcrumb.emit(item);
+  }
+  decideRender(item, isLast) {
+    let iconExist = false;
+    let labelExist = false;
+    let hrefExist = false;
+    let dropdownExist = false;
+    Object.keys(item).map(prop => {
+      prop === 'icon' && (iconExist = true);
+      prop === 'label' && (labelExist = true);
+      prop === 'href' && (hrefExist = true);
+      prop === 'dropdown' && (dropdownExist = true);
+    });
+    if (dropdownExist) {
+      return (index.h("details", { class: "dropdown", open: this.isOpen }, index.h("summary", { onClick: () => this.handleOpen(), class: this.isOpen && 'open' }, index.h("span", null, iconExist ? index.h("bcm-icon", { icon: item.icon, size: 16 }) : null, labelExist ? item.label : null), index.h("bcm-icon", { icon: "down", size: 12 })), index.h("div", { class: "dropdown-menu" }, item.dropdown.map(link => (index.h("span", { class: "size-2 dropdown-item" }, index.h("bcm-link", { target: link.target, href: link.href, icon: link.icon ? link.icon : null }, link.label ? link.label : null)))))));
+    }
+    else if (!hrefExist || isLast) {
+      return (index.h("span", { class: "non-link-item" }, iconExist ? index.h("bcm-icon", { icon: item.icon, size: 16 }) : null, labelExist ? item.label : null));
+    }
+    return (index.h("bcm-link", { target: item.target, href: item.href, icon: iconExist ? item.icon : null }, labelExist ? item.label : null));
+  }
+  render() {
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("ul", { class: "breadcrumb" }, this.items.map((item, index$1) => (index.h("li", { class: "breadcrumb-item", onClick: () => this.handleItemClick(item) }, this.decideRender(item, index$1 === this.items.length - 1)))))));
+  }
+  get host() { return index.getElement(this); }
+};
+BcmBreadcrumb.style = breadcrumbCss;
+
+exports.bcm_breadcrumb = BcmBreadcrumb;

package/dist/cjs/bcm-card-footer.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+
+const BcmCardFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+
+exports.bcm_card_footer = BcmCardFooter;

package/dist/cjs/bcm-card-header.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+
+const BcmCardHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+
+exports.bcm_card_header = BcmCardHeader;

package/dist/cjs/bcm-card.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const cardCss = "@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}:host{display:inline-block;width:100%}:host(.hidden){display:none}.card{width:100%;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px}.card.medium .header,.card.medium .footer{padding:16px 24px}.card.medium .card-body{padding:24px}.card.small .header,.card.small .footer{padding:8px 16px}.card.small .card-body{padding:16px}.card .header{border-bottom:1px solid #D9D9D9}.card .footer{border-top:1px solid #D9D9D9}";
+
+const BcmCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 'medium';
+    this.hidden = false;
+  }
+  componentDidRender() {
+    const slot = this.host.shadowRoot.querySelector('slot').assignedElements();
+    slot.map(el => {
+      if (String(el.tagName).toLowerCase() === 'bcm-card-header') {
+        el.slot = 'header';
+        this.header = true;
+      }
+      if (String(el.tagName).toLowerCase() === 'bcm-card-footer') {
+        el.slot = 'footer';
+        this.footer = true;
+      }
+    });
+  }
+  render() {
+    const classes = index$1.classnames('card', this.size);
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, this.header && (index.h("div", { class: "header size-3 weight-semibold" }, index.h("slot", { name: "header" }))), index.h("div", { class: "card-body" }, index.h("slot", null)), this.footer && (index.h("div", { class: "footer" }, index.h("slot", { name: "footer" }))))));
+  }
+  get host() { return index.getElement(this); }
+};
+BcmCard.style = cardCss;
+
+exports.bcm_card = BcmCard;

package/dist/cjs/bcm-checkbox-group.cjs.entry.js

@@ -0,0 +1,273 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+
+const groupCss = "@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}:host{display:block;width:100%}:host(.hidden){display:none}:host(.error) .label{color:var(--bcm-color-red-6) !important}.group-container{display:flex;gap:24px}.group-container.vertical{gap:unset;flex-direction:column}.group-container.button{gap:unset}.group-container.full-width{max-width:100%}.indeterminate{padding:0 0 16px 0;margin-bottom:16px;border-bottom:1px solid #efefef;}.indeterminate input{display:none}.indeterminate label{display:flex;align-items:center;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.indeterminate label .icon-checked{display:none}.indeterminate span{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px}.indeterminate span:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:0}.indeterminate bcm-icon{filter:brightness(0) invert(1)}.indeterminate input[disabled]+label{cursor:not-allowed}.indeterminate input[disabled]+label span{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.indeterminate input[disabled]+label span:after{background-color:var(--bcm-color-grey-6)}.indeterminate input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.indeterminate input:not([disabled])+label:hover span{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.indeterminate.bcm-uncheck label span{background-color:#ffffff}.indeterminate.bcm-determinate bcm-icon{display:block}.indeterminate.bcm-determinate label span{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.indeterminate.bcm-determinate label span:after{opacity:0}.indeterminate.bcm-indeterminate bcm-icon{display:none !important}.indeterminate.bcm-indeterminate label span{background-color:#ffffff}.indeterminate.bcm-indeterminate label span:after{opacity:1}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:8px}";
+
+const BcmCheckboxGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.groupChange = index.createEvent(this, "bcm-group-change", 7);
+    this.groupCheckedList = index.createEvent(this, "bcm-group-checked-list", 7);
+    /**
+     * Private variables
+     */
+    this.checkboxes = [];
+    /**
+     * Component Properties
+     */
+    this.direction = 'horizontal';
+    this.items = [];
+    this.indeterminate = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = null;
+    this.gap = null;
+    this.fullWidth = "false";
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.noCaption = false;
+    this.captionType = 'default';
+    /**
+     * Component State Variables
+     */
+    this.indeterminateState = 'uncheck';
+    this.checkboxesProp = [];
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.parseItems(this.items);
+    this.parseOptions();
+  }
+  /**
+   * @ComponentMethod
+   */
+  connectedCallback() { }
+  componentDidLoad() {
+    let checkboxesInit = [];
+    checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      if (this.fullWidth != "false") {
+        if (this.fullWidth === "flex") {
+          checkbox.style.flex = "auto";
+        }
+        else {
+          checkbox.style.width = "100%";
+        }
+      }
+      this.optionType && (checkbox.optionType = this.optionType);
+      this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
+      this.size && (checkbox.size = this.size);
+      // this.required == true && checkbox.required == true && (
+      //     checkbox.required = true
+      // )
+      this.disabled == true && (checkbox.disabled = true);
+    });
+    this.groupChecked().then(values => this.value = values);
+  }
+  async setClear() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.setClear();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  async resetCaption() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.resetCaption();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentDidRender() {
+    let slotElements;
+    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
+    this.checkboxes = [];
+    // Get only bcm-checkbox elements from 
+    // slot childs
+    slotElements.map(element => {
+      String(element.tagName).toLowerCase() == 'bcm-checkbox'
+        && this.checkboxes.push(element);
+    });
+    this.setIndeterminateState();
+    if (this.items.length > 0) {
+      let checkboxesInit = [];
+      checkboxesInit = this.getAllInputs();
+      checkboxesInit.map(checkbox => {
+        this.defaultValueState && (this.defaultValueState.find(e => e === checkbox.name) && checkbox.check(checkbox.name));
+      });
+    }
+  }
+  componentDidUpdate() {
+    this.handleChange();
+  }
+  /**
+   * @desc
+   */
+  inputChange() {
+    this.groupChecked().then(values => this.value = values);
+    this.setIndeterminateState();
+  }
+  /**
+   * @desc Returns merged slot and prop
+   * checkbox items
+   * @returns {Array<BcmCheckbox>}
+   */
+  getAllInputs() {
+    return [
+      ...this.checkboxes,
+      ...this.el.shadowRoot.querySelectorAll('bcm-checkbox')
+    ];
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllInputs().map((checkbox) => {
+      checkbox.checked && (allUnchecked = false);
+      !checkbox.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  indeterminateClick() {
+    if (this.disabled == false) {
+      let checkAll = true;
+      if (this.indeterminateState == 'determinate') {
+        checkAll = false;
+      }
+      this.getAllInputs().map((checkbox) => {
+        checkbox.check(checkAll);
+      });
+    }
+  }
+  parseOptions() {
+    if (this.defaultValue) {
+      this.defaultValueState = JSON.parse(this.defaultValue);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.checkboxesProp = JSON.parse(newValue)
+        : this.checkboxesProp = newValue;
+    }
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async check(options) {
+    if (options) {
+      typeof options == 'string'
+        ? options = JSON.parse(options)
+        : options = options;
+    }
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    const inBoth = (list1, list2) => list1.filter(a => true === list2.some(b => a.name === b.name));
+    let optionsArray = options;
+    inBoth(checkboxes, options).map(item => {
+      item.check(optionsArray.find(x => x.name === item.name).checked);
+    });
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async groupChecked(name) {
+    let retVal = null;
+    let checkeds = {};
+    let checkboxes = [];
+    if (typeof retVal != 'boolean' && !retVal) {
+      retVal = checkeds;
+    }
+    // Merge slotted items with prop items
+    // #
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      !checkbox.checked && (checkeds[checkbox.name] = {
+        value: false,
+        name: checkbox.name
+      });
+      if (checkbox.name === name) {
+        retVal = checkbox.checked;
+      }
+    });
+    return retVal;
+  }
+  handleChange() {
+    let checkeds = {};
+    let changes = {};
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      changes[checkbox.name] = {
+        value: checkbox.checked ? true : false,
+        name: checkbox.name
+      };
+    });
+    this.groupChange.emit(changes);
+    this.groupCheckedList.emit(checkeds);
+  }
+  render() {
+    const { checkboxesProp, indeterminate, disabled, label, required, captionType } = this;
+    const groupContainerClasses = index$1.classnames('group-container', this.direction, this.optionType, this.fullWidth, {
+      'full-width': this.fullWidth
+    });
+    const indeterminateClasses = index$1.classnames('indeterminate', 'bcm-' + this.indeterminateState, {
+      'disabled': disabled
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    var customStyle = {};
+    this.gap && (customStyle = { 'gap': this.gap });
+    return (index.h(index.Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), indeterminate && (index.h("div", { class: indeterminateClasses }, index.h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), index.h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, index.h("span", null, index.h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), index.h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => index.h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "defaultValue": ["parseOptions"],
+    "items": ["parseItems"]
+  }; }
+};
+BcmCheckboxGroup.style = groupCss;
+
+exports.bcm_checkbox_group = BcmCheckboxGroup;