bromcom-ui 2.3.63 → 2.3.67

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const dividerCss = "@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:flex;justify-content:center}:host(.hidden){display:none}.divider{background-color:var(--bcm-color-grey-5)}.divider.horizontal{height:1px;margin:4px 0}.divider.vertical{height:100%;width:1px;margin:0 4px}";
+
+const BcmBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.direction = 'horizontal';
+    this.width = '100';
+    this.hidden = false;
+  }
+  render() {
+    const classes = classnames('divider', this.direction);
+    const styles = {
+      width: this.width + '%'
+    };
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes, style: this.direction === 'horizontal' && styles })));
+  }
+};
+BcmBadge.style = dividerCss;
+
+export { BcmBadge as bcm_divider };

package/dist/bromcom-ui/bcm-dropdown-button.entry.js

@@ -0,0 +1,86 @@
+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 { i as iconSizes } from './types-0e4b533d.js';
+
+const dropdownButtonCss = "@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}.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}button,a{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;padding:unset;text-decoration:none;box-sizing:border-box;position:relative;border:none}.button .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.button.rounded{border-radius:100%}.button.rounded .loading{border-radius:100%}.button:before,.button:after{content:\"\"}.solid button,.solid a{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid button .loading,.solid a .loading{background-color:var(--bcm-color-prime-blue-6)}.solid button:hover,.solid button:focus,.solid a:hover,.solid a:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid button:active,.solid a:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid button:disabled,.solid a:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.solid.outline button,.solid.outline a{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline button .loading,.solid.outline a .loading{background-color:var(--bcm-color-grey-1)}.solid.outline button:hover,.solid.outline button:focus,.solid.outline a:hover,.solid.outline a:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline button:active,.solid.outline a:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.ghost button,.ghost a{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost button .loading,.ghost a .loading{background-color:var(--bcm-color-grey-1)}.ghost button:hover,.ghost button:focus,.ghost a:hover,.ghost a:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost button:active,.ghost a:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost button:disabled,.ghost a:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.ghost.outline button,.ghost.outline a{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.button>bcm-icon.prefix{margin-right:4px}.button>bcm-icon.suffix{margin-left:4px}.large{min-height:40px;min-width:120px}.large bcm-icon.prefix{margin-right:16px}.large bcm-icon.suffix{margin-left:16px}.large:not(.rounded){padding:0 16px}.large:not(.rounded).with_suffix{padding-right:0}.medium{min-height:32px;min-width:32px}.medium:not(.rounded){padding:0 16px}.medium:not(.rounded).with_suffix{padding-right:0}.small{min-height:24px;min-width:24px}.small:not(.rounded){padding:0 8px}.small:not(.rounded).with_suffix{padding-right:0}.dropdown-button{display:flex;align-items:center;justify-content:center;flex-direction:row;border-radius:2px}.dropdown-button.split.solid .button:not(:disabled){border-right-color:var(--bcm-color-prime-blue-7)}.dropdown-button.split.outline .button:not(:disabled){border-right-color:var(--bcm-color-grey-5)}.dropdown-button.split button.large bcm-icon.prefix,.dropdown-button.split a.large bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.large.button,.dropdown-button.split a.large.button{padding:0 16px}.dropdown-button.split button.large.caret,.dropdown-button.split a.large.caret{border-left:0px;padding:0;min-width:40px}.dropdown-button.split button.medium bcm-icon.prefix,.dropdown-button.split a.medium bcm-icon.prefix{margin-right:8px}.dropdown-button.split button.medium.button,.dropdown-button.split a.medium.button{padding:0 8px}.dropdown-button.split button.medium.caret,.dropdown-button.split a.medium.caret{border-left:0px;padding:0;min-width:30px}.dropdown-button.split button.small bcm-icon.prefix,.dropdown-button.split a.small bcm-icon.prefix{margin-right:16px}.dropdown-button.split button.small.button,.dropdown-button.split a.small.button{padding:0 8px}.dropdown-button.split button.small.caret,.dropdown-button.split a.small.caret{border-left:0px;padding:0;min-width:30px}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmDropdownButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dropdownOpen = createEvent(this, "bcm-dropdown-open", 7);
+    this.menuItemSelected = createEvent(this, "bcm-dropdown-item-selected", 7);
+    /**
+     * Component Properties
+     */
+    this.kind = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.outline = false;
+    this.loading = false;
+    this.type = 'dropdown';
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleDropdownOpen() {
+    this.isOpen = false;
+  }
+  handleClickOutside(e) {
+    const target = e.target;
+    if (!this.el.parentElement.contains(target)) {
+      if (this.isOpen) {
+        this.isOpen = false;
+        this.dropdownOpen.emit(this.isOpen);
+      }
+    }
+    if (target && (lowercase(target.tagName) === 'bcm-dropdown-item'))
+      this.isOpen = false;
+  }
+  handleOpen() {
+    if (!this.disabled) {
+      this.isOpen = !this.isOpen;
+      this.dropdownOpen.emit(this.isOpen);
+    }
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    const parentElement = this.el.parentElement;
+    if (parentElement.getAttribute('size')) {
+      this.size = parentElement.getAttribute('size');
+    }
+  }
+  render() {
+    const { size, kind, disabled, outline, icon, href, target, loading, type } = this;
+    const iconSize = iconSizes.default[size];
+    const Component = (href && !disabled) ? 'a' : 'button';
+    const classesCaret = classnames('caret', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const classesButton = classnames('button', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const classes = classnames('dropdown-button', type, kind, {
+      'open': this.isOpen,
+      'outline': outline,
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h(Component, { class: classesButton, disabled: disabled, href: type === "split" && href, target: type === "split" && target, onClick: () => type == 'dropdown' && (this.handleOpen()) }, loading && h("div", { class: "loading" }, " ", h("bcm-icon", { type: "animated", class: "prefix", icon: "loading", size: iconSize }), " "), icon && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("slot", null), type === "dropdown" && h("bcm-icon", { icon: this.isOpen ? 'caret-up' : 'caret-down', type: "outlined", class: "suffix", size: iconSize })), type === "split" &&
+      h("button", { class: classesCaret, disabled: disabled, onClick: () => this.handleOpen() }, h("bcm-icon", { icon: this.isOpen ? 'caret-up' : 'caret-down', type: "outlined", size: iconSize })))));
+  }
+  get el() { return getElement(this); }
+};
+BcmDropdownButton.style = dropdownButtonCss;
+
+export { BcmDropdownButton as bcm_dropdown_button };

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

@@ -0,0 +1,58 @@
+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 dropdownGroupCss = "@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}@media screen and (min-width: 576px){:host{width:100%}}:host(.hidden){display:none}.dropdown-group{--const-padding-vertical-sub:8px;--const-padding-horizontal-sub:40px;--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}.dropdown-group ::slotted(bcm-dropdown-item){--padding-vertical-sub:var(--const-padding-vertical-sub);--padding-horizontal-sub:var(--const-padding-horizontal-sub);--hover-color:var(--bcm-color-prime-blue-6);--selected-bg-color:var(--bcm-color-prime-blue-6)}.dropdown-group.open .title{background-color:var(--bcm-color-prime-blue-6);color:#ffffff}.dropdown-group.open .title:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-7);color:#ffffff}.dropdown-group.open .inner{display:block}.inner{position:absolute;top:calc(100% + 5px);display:none;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow)}@media screen and (min-width: 576px){.inner{position:relative;box-shadow:none}}.title{display:flex;align-items:center;justify-content:space-between;color:var(--bcm-color-grey-8);cursor:pointer;padding:8px 8px;height:100%}.title .text-content{display:flex;align-items:center}.title .collapse-icon{margin-left:8px}.title ::slotted(bcm-icon){margin-right:10px}.title:hover{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}@media screen and (min-width: 576px){.title{padding:var(--const-padding-vertical-sub) var(--const-padding-horizontal-sub)}}.dropdown-group .title{padding:var(--const-padding-vertical-sub) var(--const-padding-horizontal-sub);white-space:nowrap}.dropdown-group .inner{position:relative;box-shadow:none}.dropdown-group.right{position:relative;--nowrap-sub:nowrap}.dropdown-group.right .inner{position:absolute;top:0;left:100%;margin-left:2px;box-shadow:var(--group-shadow)}@media screen and (min-width: 576px){.dropdown-group.right .inner{position:relative;left:0;box-shadow:none}}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmDropdownGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dropdownRootGroupOpen = createEvent(this, "bcm-dropdown-root-group-open", 7);
+    /**
+     * Component Properties
+     */
+    this._title = '';
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.size = 'medium';
+    this.open = false;
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   */
+  handleTitleClick() {
+    this.open = !this.open;
+    this.dropdownRootGroupOpen.emit(this._id);
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    const target = event.target;
+    if (target && (lowercase(target.tagName) === 'bcm-dropdown-list' ||
+      lowercase(target.tagName) === 'bcm-dropdown-group' ||
+      lowercase(target.tagName) === 'bcm-dropdown-item'))
+      return;
+    this.open = false;
+  }
+  render() {
+    const { _title, direction, open, size } = this;
+    const classes = classnames('dropdown-group', size, {
+      'open': this.open,
+      'right': this.direction === 'right',
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large'
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: "title", onClick: () => this.handleTitleClick() }, h("div", { class: "text-content" }, h("slot", { name: "icon" }), _title), h("bcm-icon", { class: "collapse-icon", size: 8, icon: direction === 'right' ? open ? 'caret-right' : 'caret-right' : open ? 'caret-up' : 'caret-down', type: "fill" })), h("div", { class: "inner" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+BcmDropdownGroup.style = dropdownGroupCss;
+
+export { BcmDropdownGroup as bcm_dropdown_group };

package/dist/bromcom-ui/bcm-dropdown-item.entry.js

@@ -0,0 +1,37 @@
+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 { i as iconSizes } from './types-0e4b533d.js';
+
+const dropdownItemCss = "@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}@media screen and (min-width: 576px){:host{width:100%}}:host(.hidden){display:none}.dropdown-item{--padding-vertical:8px;--padding-horizontal:8px;--nowrap:normal}.dropdown-item{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;color:var(--bcm-color-grey-8);background-color:transparent;text-decoration:none;box-sizing:border-box;position:relative;border:none;padding:var(--padding-vertical-sub, var(--padding-vertical)) var(--padding-horizontal-sub, var(--padding-horizontal));white-space:var(--nowrap-sub, var(--nowrap));min-width:150px;width:100%;cursor:pointer}.dropdown-item.disabled{color:var(--bcm-color-grey-6)}.dropdown-item.selected{background-color:var(--bcm-color-prime-blue-6);color:#ffffff}.dropdown-item.selected:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-7);color:#ffffff}.dropdown-item:hover:not(.disabled){color:var(--hover-color, var(--bcm-color-prime-blue-6));background-color:var(--hover-bg-color, var(--bcm-color-prime-blue-1))}.dropdown-item bcm-icon{margin-right:10px}";
+
+const BcmDropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuItemSelected = createEvent(this, "bcm-dropdown-item-selected", 7);
+    this.size = 'medium';
+    this.disabled = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.menuItemSelected.emit(this._id);
+  }
+  render() {
+    const { disabled, icon, target, href, size } = this;
+    const iconSize = iconSizes.default[size];
+    const Component = (href && !disabled) ? 'a' : 'button';
+    const classes = classnames('dropdown-item', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h(Component, { class: classes, disabled: disabled, href: href, target: target }, icon && h("bcm-icon", { type: "outlined", class: "prefix", icon: icon, size: iconSize }), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+BcmDropdownItem.style = dropdownItemCss;
+
+export { BcmDropdownItem as bcm_dropdown_item };

package/dist/bromcom-ui/bcm-dropdown-list.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const dropdownListCss = "@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}";
+
+const BcmDropdownList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this._items = [];
+    this.size = 'medium';
+    this.hidden = false;
+    /**
+     * Component States
+     */
+    this.items = [];
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    const parentElement = this.el.parentElement;
+    if (parentElement.getAttribute('size')) {
+      this.size = parentElement.getAttribute('size');
+    }
+    this.parseItems(this._items);
+  }
+  /**
+   * @desc
+   * @param item
+   */
+  itemRenderer(item) {
+    return (h("bcm-dropdown-item", Object.assign({}, (item.size && { size: this.size }), (item.disabled && { disabled: item.disabled }), (item.icon && { icon: item.icon }), (item.href && { href: item.href }), (item.target && { target: item.target }), (item.id && { id: item.id })), item.text));
+  }
+  /**
+   * @desc
+   * @param group
+   */
+  recursiveGroupRenderer(group) {
+    return (h("bcm-dropdown-group", Object.assign({ title: group.title }, (group.size && { size: this.size }), (group.direction && { direction: group.direction })), 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
+   * @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 }, 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"]
+  }; }
+};
+BcmDropdownList.style = dropdownListCss;
+
+export { BcmDropdownList as bcm_dropdown_list };

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

@@ -0,0 +1,61 @@
+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 } from './utils-1feb01eb.js';
+
+const dropdownCss = "@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:fit-content}:host(.hidden){display:none}*{box-sizing:border-box}::-webkit-details-marker{display:none}summary{display:inline-block}.items-container{--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}details{position:relative}.items-container{min-width:150px;transition:height 0.3s ease;position:absolute;left:0;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow);z-index:10000}";
+
+const BcmDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dropdownRootGroupOpen = createEvent(this, "bcm-dropdown-root-group-open", 7);
+    this.menuItemSelected = createEvent(this, "bcm-dropdown-item-selected", 7);
+    this.dropdownOpen = createEvent(this, "bcm-dropdown-open", 7);
+    this.isOpen = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.disabled = false;
+    this.size = 'medium';
+    this.hidden = false;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleDropdownOpen(e) {
+    if (!this.disabled) {
+      if (e.detail == true) {
+        this.isOpen = true;
+      }
+      else {
+        this.isOpen = false;
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleBcmDropdownItemSelected() {
+    this.isOpen = false;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleSplitRootGroupOpen(event) {
+    const id = event.detail;
+    if (window.innerWidth <= 576)
+      return;
+    // Get only root childs
+    // #
+    getChilds(this.el.querySelector('bcm-dropdown-list'), 'bcm-dropdown-group').forEach(group => {
+      group.id !== id && (group.open = false);
+    });
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, open: this.isOpen }, h("details", { open: this.isOpen }, h("summary", null, h("slot", { name: "button" })), h("div", { class: "items-container" }, h("slot", { name: "list" })))));
+  }
+  get el() { return getElement(this); }
+};
+BcmDropdown.style = dropdownCss;
+
+export { BcmDropdown as bcm_dropdown };

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

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, f as Host, i as getAssetPath, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+/**
+ * 'image' prop predefined values
+ */
+var ImageProps;
+(function (ImageProps) {
+  ImageProps["default"] = "default.svg";
+  ImageProps["simple"] = "simple.svg";
+})(ImageProps || (ImageProps = {}));
+/**
+ * 'size' prop predefined values
+ */
+var SizeProps;
+(function (SizeProps) {
+  SizeProps["small"] = "small";
+  SizeProps["medium"] = "medium";
+  SizeProps["big"] = "big";
+})(SizeProps || (SizeProps = {}));
+
+const emptyCss = "@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}.empty.small{max-width:100px}.empty.medium{max-width:140px}.empty.big{max-width:200px}.text{font-size:14px;color:var(--bcm-color-grey-8)}.content{text-align:center}img{max-width:100%}";
+
+const BcmEmpty = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this._image = ImageProps.default;
+    this.size = SizeProps.medium;
+    this.hidden = false;
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentWillLoad() {
+    this.parseImage(this._image);
+  }
+  /**
+  * @desc
+  * @param newValue
+  * @returns {void}
+  */
+  parseImage(newValue) {
+    if (newValue) {
+      newValue in ImageProps
+        ? this.image = ImageProps[newValue]
+        : this.image = ImageProps.default;
+    }
+  }
+  render() {
+    const classes = classnames('empty', {
+      [this.size]: this.size
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("img", { src: getAssetPath(`./static/${this.image}`) }), h("div", { class: "content" }, this.text && (h("span", { class: "text" }, this.text)), h("slot", null)))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_image": ["parseImage"]
+  }; }
+};
+BcmEmpty.style = emptyCss;
+
+export { BcmEmpty as bcm_empty };

package/dist/bromcom-ui/bcm-error-layout.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const errorLayoutCss = "@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}.error-layout{padding:12px 12px 12px 25px;background:#fff1f0;border:2px solid #ffa39e;box-sizing:border-box;border-radius:2px;color:#f5222d;font-size:12px}";
+
+const BcmErrorLayout = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'medium';
+    this.hidden = false;
+    this.items = [];
+    this.itemsProp = [];
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() {
+    this.parseItems(this.items);
+  }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.itemsProp = JSON.parse(newValue)
+        : this.itemsProp = newValue;
+    }
+  }
+  async set(val) {
+    this.items = val;
+  }
+  async clear() {
+    this.items = [];
+  }
+  render() {
+    const { itemsProp } = this;
+    const classes = classnames('error-layout', this.size);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, this.itemsProp.map((item) => h("li", null, item))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "items": ["parseItems"]
+  }; }
+};
+BcmErrorLayout.style = errorLayoutCss;
+
+export { BcmErrorLayout as bcm_error_layout };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const BcmFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("slot", null)));
+  }
+};
+
+export { BcmFooter as bcm_footer };

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+
+const formGroupCss = "@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}";
+
+const BcmFormGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+    this.validation = false;
+    this.name = "";
+  }
+  inputChange() {
+    //   console.log("diğişti")
+  }
+  render() {
+    return (h(Host, { "on-bcm-change": () => this.inputChange() }, h("form", { class: "bcm-form" }, h("slot", null))));
+  }
+};
+BcmFormGroup.style = formGroupCss;
+
+export { BcmFormGroup as bcm_form_group };