bromcom-ui 2.3.63 → 2.3.67

package/dist/bromcom-ui/bcm-pulldown.entry.js

@@ -0,0 +1,106 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { a as getChilds, i as isTargetComponent } from './utils-1feb01eb.js';
+
+const pulldownCss = "@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}:host(.hidden){display:none}.pulldown{position:relative;display:flex;align-items:center;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);background-color:#ffffff}@media screen and (min-width: 576px){.pulldown{flex-direction:column;align-items:flex-start}}@media screen and (min-width: 576px){.pulldown>*{width:100%}}::slotted(*){height:100%}";
+
+const BcmPulldown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pullDownRootGroupOpen = createEvent(this, "bcm-pulldown-root-group-open", 7);
+    this.pulldownClearSelecteds = createEvent(this, "bcm-pulldown-clear-selecteds", 7);
+    /**
+     * Component Properties
+     */
+    this._items = [];
+    this.hidden = false;
+    /**
+     * Component States
+     */
+    this.items = [];
+  }
+  async setData(_data = []) {
+    this._items = _data;
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.parseItems(this._items);
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentDidRender() {
+    // Get all childs
+    // #
+    const childs = getChilds(this.el, 'bcm-pulldown-item');
+    // Filter only root childs
+    // #
+    const items = childs.filter(child => {
+      return child.parentElement && !isTargetComponent(child.parentElement, 'bcm-pulldown-group');
+    });
+    items.forEach(item => item.root = true);
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handlePulldownRootGroupOpen(event) {
+    const id = event.detail;
+    if (window.innerWidth <= 576)
+      return;
+    // Get only root childs
+    // #
+    getChilds(this.el, 'bcm-pulldown-group').forEach(group => {
+      if (String(group.parentElement.tagName).toLowerCase() !== 'bcm-pulldown-group') {
+        group.id !== id && (group.open = false);
+      }
+    });
+  }
+  /**
+   * @desc
+   * @param item
+   */
+  itemRenderer(item) {
+    return (h("bcm-pulldown-item", null, item.icon && (h("bcm-icon", { icon: item.icon, type: item.iconType ? item.iconType : 'outlined' })), item.text));
+  }
+  /**
+   * @desc
+   * @param group
+   */
+  recursiveGroupRenderer(group) {
+    return (h("bcm-pulldown-group", Object.assign({ title: group.title }, (group.open && { open: true }), (group.direction === 'right' && { direction: 'right' })), group.icon && (h("bcm-icon", { slot: "icon", icon: group.icon, type: group.iconType ? group.iconType : 'outlined' })), group.items.map((item) => ((item.type === 'item' && this.itemRenderer(item)) ||
+      (item.type === 'group' && this.recursiveGroupRenderer(item))))));
+  }
+  /**
+   * @desc
+   */
+  handleMenuItemSelected(event) {
+    this.pulldownClearSelecteds.emit(event.detail);
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.items = JSON.parse(newValue)
+        : this.items = newValue;
+    }
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: "pulldown" }, this.items.length === 0 && (h("slot", null)), this.items.length !== 0 && this.items.map((item) => ((item.type === 'item' && this.itemRenderer(item)) ||
+      (item.type === 'group' && this.recursiveGroupRenderer(item)))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_items": ["parseItems"]
+  }; }
+};
+BcmPulldown.style = pulldownCss;
+
+export { BcmPulldown as bcm_pulldown };

package/dist/bromcom-ui/bcm-radio-group.entry.js

@@ -0,0 +1,120 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.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;margin:0 0 8px 0}:host(.hidden){display:none}:host(.error) label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-group{display:flex}.radio-group.horizontal{flex-direction:row;margin-bottom:5px}.radio-group.horizontal ::slotted(bcm-radio:not(:last-of-type)){margin-right:16px}.radio-group.horizontal bcm-radio:not(:last-of-type){margin-right:16px}.radio-group.vertical{flex-direction:column}.radio-group.vertical label{margin-bottom:4px}.radio-group.vertical ::slotted(bcm-radio:not(:last-of-type)){margin-bottom:8px}.radio-group.vertical bcm-radio:not(:last-of-type){margin-bottom:8px}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}";
+
+const BcmRadioGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.childRadios = [];
+    this.direction = 'horizontal';
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.hidden = false;
+    this.label = null;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.radioOptions = [];
+    this.usingSlots = true;
+  }
+  async setData(_data) {
+    setTimeout(() => {
+      this.options = _data;
+    }, 100);
+    return Promise.resolve(true);
+  }
+  async getValue() {
+    return this.value;
+  }
+  async check(value) {
+    this.defaultValue = value;
+    this.value = value;
+  }
+  async setClear() {
+    this.value = '';
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  parseOptions(newValue) {
+    if (newValue) {
+      typeof newValue === 'string'
+        ? this.radioOptions = JSON.parse(newValue)
+        : this.radioOptions = newValue;
+      if (this.radioOptions.length > 0)
+        this.usingSlots = false;
+    }
+  }
+  // If checked radio changes, emits change event
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
+  // Controls radios styles and states
+  controlRadio(elements) {
+    elements.forEach((radio) => {
+      radio.checked = this.value ? radio.value === this.value : this.defaultValue ? radio.value === this.defaultValue : null;
+      radio.disabled = this.disabled;
+      radio.optionType = this.optionType;
+      radio.buttonStyle = this.buttonStyle;
+      radio.size = this.size;
+      radio.addEventListener('bcm-change', (e) => {
+        e.stopPropagation();
+        if (e.detail.checked) {
+          this.value = radio.value;
+        }
+      }, { once: true });
+    });
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillLoad() {
+    this.parseOptions(this.options);
+  }
+  componentDidRender() {
+    let elements = [];
+    if (this.usingSlots) {
+      elements = this.host.shadowRoot.querySelector('slot').assignedElements();
+      this.childRadios = [];
+      elements.map(el => {
+        String(el.tagName).toLowerCase() == 'bcm-radio' && this.childRadios.push(el);
+      });
+      this.controlRadio(this.childRadios);
+    }
+    else {
+      elements = Array.from(this.host.shadowRoot.querySelectorAll('bcm-radio'));
+      this.controlRadio(elements);
+    }
+  }
+  render() {
+    const { label, required, noCaption, caption, captionError, captionType } = this;
+    const classes = classnames('radio-group', {
+      [this.direction]: this.optionType === 'default'
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    if (this.radioOptions) {
+      return (h(Host, { class: hostClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { class: classes }, this.radioOptions && this.radioOptions.map(radio => (h("bcm-radio", { value: radio.value, disabled: radio.disabled, checked: radio.checked }, " ", radio.label, " "))), h("slot", null)), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+        ? h("span", { class: captionClasses }, " ", captionError, " ")
+        : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+    }
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "options": ["parseOptions"],
+    "value": ["handleChange"]
+  }; }
+};
+BcmRadioGroup.style = groupCss;
+
+export { BcmRadioGroup as bcm_radio_group };

package/dist/bromcom-ui/bcm-radio.entry.js

@@ -0,0 +1,99 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { e as extractColor, C as ColorPalette } from './utils-1feb01eb.js';
+
+/**
+ * 'color' prop predefined values
+ */
+var ColorProps;
+(function (ColorProps) {
+  ColorProps["black"] = "black";
+  ColorProps["white"] = "white";
+  ColorProps["prime-blue"] = "prime-blue";
+  ColorProps["grey"] = "grey";
+  ColorProps["blue"] = "blue";
+  ColorProps["warmyellow"] = "warmyellow";
+  ColorProps["yellow"] = "yellow";
+  ColorProps["limegreen"] = "limegreen";
+  ColorProps["red"] = "red";
+  ColorProps["darkorange"] = "darkorange";
+  ColorProps["orange"] = "orange";
+  ColorProps["green"] = "green";
+  ColorProps["turquosie"] = "turquosie";
+  ColorProps["cobaltblue"] = "cobaltblue";
+  ColorProps["magenta"] = "magenta";
+  ColorProps["purple"] = "purple";
+  ColorProps["bc-red"] = "bc-red";
+  ColorProps["bc-blue"] = "bc-blue";
+  ColorProps["bc-green"] = "bc-green";
+  ColorProps["bc-orange"] = "bc-orange";
+})(ColorProps || (ColorProps = {}));
+
+const radioCss = "@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}:host(.hidden){display:none}input[type=radio]{position:absolute;width:0;height:0;opacity:0}label{user-select:none;display:inline-flex;align-items:center;color:var(--bcm-color-grey-8);cursor:pointer}.radio-container .radio{width:16px;height:16px;min-width:16px;min-height:16px;border:1px solid var(--bcm-color-grey-5);border-radius:100%;background-color:var(--bcm-color-grey-1);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition-duration:0.3s;margin-right:8px}.radio-container .radio .inner{width:8px;height:8px;border-radius:100%;background-color:var(--bcm-color-grey-1)}.radio-container:hover:not(.disabled) .radio{border-color:var(--bcm-color-prime-blue-6);filter:drop-shadow(0px 2px 4px rgba(54, 121, 171, 0.5))}.radio-container.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-container.disabled .radio{border-color:var(--bcm-color-grey-5)}.radio-container.checked .radio{border-color:var(--bcm-color-prime-blue-6)}.radio-container.checked .inner{background-color:var(--bcm-color-prime-blue-6)}.radio-container.checked.disabled .radio{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.radio-container.checked.disabled .inner{background-color:var(--bcm-color-grey-6)}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+
+const BcmRadio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 3);
+    this.focus = createEvent(this, "bcm-focus", 3);
+    this.blur = createEvent(this, "bcm-blur", 3);
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.hidden = false;
+    this.required = false;
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {void}
+   */
+  async check(uncheck) {
+    this.radio.checked = uncheck;
+    this.handleChange();
+  }
+  handleChange() {
+    this.checked = this.radio.checked;
+    this.change.emit({
+      value: this.radio.value,
+      checked: this.radio.checked
+    });
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  getColor(color) {
+    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
+      return {
+        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-5'),
+        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-5')
+      };
+  }
+  render() {
+    const { checked, value, disabled, optionType, buttonStyle, size } = this;
+    const defaultClasses = classnames('radio-container', 'size-2', {
+      'checked': checked,
+      'disabled': disabled
+    });
+    const buttonClasses = classnames('radio-button', buttonStyle, size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+      'checked': checked,
+      'disabled': disabled,
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("label", { class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("input", { type: "radio", value: value, checked: checked, ref: el => (this.radio = el), onChange: this.handleChange, disabled: disabled }), optionType === 'default' && (h("span", { class: "radio" }, h("span", { class: "inner" }))), h("slot", null))));
+  }
+};
+BcmRadio.style = radioCss;
+
+export { BcmRadio as bcm_radio };