bromcom-ui 2.3.70 → 2.3.71

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 };