bromcom-ui-next 0.1.23 → 0.1.25

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

@@ -0,0 +1,206 @@
+'use strict';
+
+var index = require('./index-DHDrXFLM.js');
+var tv = require('./tv-ngpIbGlG.js');
+
+const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
+
+const BcmDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmOpen = index.createEvent(this, "bcmOpen", 7);
+        this.bcmClose = index.createEvent(this, "bcmClose", 7);
+        this.bcmBeforeOpen = index.createEvent(this, "bcmBeforeOpen", 7);
+        this.bcmBeforeClose = index.createEvent(this, "bcmBeforeClose", 7);
+        this.open = false;
+        this.size = 'medium';
+        this.position = 'right';
+        this.fullWidth = false;
+        this.noHeader = false;
+        this.drawerClass = tv.tv({
+            slots: {
+                backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
+                wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
+                header: 'flex justify-between items-center bg-color-default text-color-default',
+                title: 'font-semibold m-0 text-size-6',
+                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                content: 'overflow-y-auto flex-grow',
+            },
+            variants: {
+                open: {
+                    true: {
+                        backdrop: 'opacity-100 visible',
+                    },
+                    false: {
+                        backdrop: 'opacity-0 invisible',
+                    },
+                },
+                position: {
+                    left: {
+                        wrapper: 'top-0 left-0 bottom-0',
+                    },
+                    right: {
+                        wrapper: 'top-0 right-0 bottom-0',
+                    },
+                    top: {
+                        wrapper: 'top-0 left-0 right-0',
+                    },
+                    bottom: {
+                        wrapper: 'bottom-0 left-0 right-0',
+                    },
+                },
+                size: {
+                    small: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                    medium: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                    large: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                },
+                noHeader: {
+                    true: {
+                        header: 'hidden',
+                    },
+                },
+            },
+            compoundVariants: [
+                {
+                    open: true,
+                    position: ['left', 'right'],
+                    class: {
+                        wrapper: 'translate-x-0',
+                    },
+                },
+                {
+                    open: true,
+                    position: ['top', 'bottom'],
+                    class: {
+                        wrapper: 'translate-y-0',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'left',
+                    class: {
+                        wrapper: '-translate-x-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'right',
+                    class: {
+                        wrapper: 'translate-x-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'top',
+                    class: {
+                        wrapper: '-translate-y-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'bottom',
+                    class: {
+                        wrapper: 'translate-y-full',
+                    },
+                },
+            ],
+        });
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            this.bcmOpen.emit();
+        }
+        else {
+            document.body.style.overflow = '';
+            this.bcmClose.emit();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            this.hide();
+        }
+    }
+    async show() {
+        const event = this.bcmBeforeOpen.emit();
+        if (!event.defaultPrevented) {
+            this.open = true;
+        }
+    }
+    async hide() {
+        const event = this.bcmBeforeClose.emit();
+        if (!event.defaultPrevented) {
+            this.open = false;
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    getWrapperStyle() {
+        const style = {};
+        if (this.fullWidth) {
+            if (this.position === 'left' || this.position === 'right') {
+                style.width = '100vw';
+            }
+            else {
+                style.height = '100vh';
+            }
+            return style;
+        }
+        if (this.position === 'left' || this.position === 'right') {
+            switch (this.size) {
+                case 'small':
+                    style.width = '320px';
+                    break;
+                case 'medium':
+                    style.width = '480px';
+                    break;
+                case 'large':
+                    style.width = '1064px';
+                    break;
+            }
+        }
+        else {
+            switch (this.size) {
+                case 'small':
+                    style.height = '40vh';
+                    break;
+                case 'medium':
+                    style.height = '60vh';
+                    break;
+                case 'large':
+                    style.height = '90vh';
+                    break;
+            }
+        }
+        return style;
+    }
+    render() {
+        const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({
+            open: this.open,
+            position: this.position,
+            size: this.size,
+            noHeader: this.noHeader,
+        });
+        return (index.h("div", { key: '44379905f1499a16d625ac4d1ff5e89fc6367d46', part: "base" }, index.h("div", { key: 'bc53e5322a61cd4af0691905c509d4c5fb765939', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), index.h("div", { key: 'd5a666671d24b2f3b55b7462b5218a3e11358982', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, index.h("div", { key: '5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a', part: "header", class: header() }, index.h("h2", { key: '8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15', part: "title", class: title() }, index.h("slot", { key: '949ae8f65d13e9e1c973c16a9f90205ac7e7042f', name: "header" }, this.headerText)), index.h("button", { key: 'a0c42761ee859e87dee5c267ea7245dde4fb8756', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, index.h("bcm-icon", { key: '2df273d63da93eda2280759a909906fe4ae0c493', name: "fa-solid fa-xmark" }))), index.h("div", { key: 'b2532537d10f9aa0dcfa2fca8ac806577363e05b', part: "content", class: content() }, index.h("slot", { key: 'bfec5cff35a7bf7bf1d9801ba89559501e6f301f' })), index.h("div", { key: '4d44fdba62c74fd5c893c5296f998754228cf961', part: "footer" }, index.h("slot", { key: 'fd0a58127fd2f0ba0955cef629e55700142a8f32', name: "footer" })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+BcmDrawer.style = drawerCss;
+
+exports.bcm_drawer = BcmDrawer;
+//# sourceMappingURL=bcm-drawer.entry.cjs.js.map
+
+//# sourceMappingURL=bcm-drawer.cjs.entry.js.map

package/dist/cjs/bcm-drawer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"bcm-drawer.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: DrawerSize = 'medium';\n  @Prop() position: DrawerPosition = 'right';\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop() headerText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n      wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-center bg-color-default text-color-default',\n      title: 'font-semibold m-0 text-size-6',\n      closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n      content: 'overflow-y-auto flex-grow',\n    },\n    variants: {\n      open: {\n        true: {\n          backdrop: 'opacity-100 visible',\n        },\n        false: {\n          backdrop: 'opacity-0 invisible',\n        },\n      },\n      position: {\n        left: {\n          wrapper: 'top-0 left-0 bottom-0',\n        },\n        right: {\n          wrapper: 'top-0 right-0 bottom-0',\n        },\n        top: {\n          wrapper: 'top-0 left-0 right-0',\n        },\n        bottom: {\n          wrapper: 'bottom-0 left-0 right-0',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        medium: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        large: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        open: true,\n        position: ['left', 'right'],\n        class: {\n          wrapper: 'translate-x-0',\n        },\n      },\n      {\n        open: true,\n        position: ['top', 'bottom'],\n        class: {\n          wrapper: 'translate-y-0',\n        },\n      },\n      {\n        open: false,\n        position: 'left',\n        class: {\n          wrapper: '-translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'right',\n        class: {\n          wrapper: 'translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'top',\n        class: {\n          wrapper: '-translate-y-full',\n        },\n      },\n      {\n        open: false,\n        position: 'bottom',\n        class: {\n          wrapper: 'translate-y-full',\n        },\n      },\n    ],\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n      this.bcmOpen.emit();\n    } else {\n      document.body.style.overflow = '';\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    const event = this.bcmBeforeOpen.emit();\n    if (!event.defaultPrevented) {\n      this.open = true;\n    }\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    const event = this.bcmBeforeClose.emit();\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private getWrapperStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    if (this.position === 'left' || this.position === 'right') {\n      switch (this.size) {\n        case 'small':\n          style.width = '320px';\n          break;\n        case 'medium':\n          style.width = '480px';\n          break;\n        case 'large':\n          style.width = '1064px';\n          break;\n      }\n    } else {\n      switch (this.size) {\n        case 'small':\n          style.height = '40vh';\n          break;\n        case 'medium':\n          style.height = '60vh';\n          break;\n        case 'large':\n          style.height = '90vh';\n          break;\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n      open: this.open,\n      position: this.position,\n      size: this.size,\n      noHeader: this.noHeader,\n    });\n\n    return (\n      <div part=\"base\">\n        <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n        <div\n          part=\"wrapper\"\n          class={wrapper()}\n          style={this.getWrapperStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-label={this.headerText}\n        >\n          <div part=\"header\" class={header()}>\n            <h2 part=\"title\" class={title()}>\n              <slot name=\"header\">{this.headerText}</slot>\n            </h2>\n            <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n              <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n            </button>\n          </div>\n          <div part=\"content\" class={content()}>\n            <slot />\n          </div>\n          <div part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-drawer.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-drawer.entry.cjs.js","sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: DrawerSize = 'medium';\n  @Prop() position: DrawerPosition = 'right';\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop() headerText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n      wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-center bg-color-default text-color-default',\n      title: 'font-semibold m-0 text-size-6',\n      closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n      content: 'overflow-y-auto flex-grow',\n    },\n    variants: {\n      open: {\n        true: {\n          backdrop: 'opacity-100 visible',\n        },\n        false: {\n          backdrop: 'opacity-0 invisible',\n        },\n      },\n      position: {\n        left: {\n          wrapper: 'top-0 left-0 bottom-0',\n        },\n        right: {\n          wrapper: 'top-0 right-0 bottom-0',\n        },\n        top: {\n          wrapper: 'top-0 left-0 right-0',\n        },\n        bottom: {\n          wrapper: 'bottom-0 left-0 right-0',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        medium: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        large: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        open: true,\n        position: ['left', 'right'],\n        class: {\n          wrapper: 'translate-x-0',\n        },\n      },\n      {\n        open: true,\n        position: ['top', 'bottom'],\n        class: {\n          wrapper: 'translate-y-0',\n        },\n      },\n      {\n        open: false,\n        position: 'left',\n        class: {\n          wrapper: '-translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'right',\n        class: {\n          wrapper: 'translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'top',\n        class: {\n          wrapper: '-translate-y-full',\n        },\n      },\n      {\n        open: false,\n        position: 'bottom',\n        class: {\n          wrapper: 'translate-y-full',\n        },\n      },\n    ],\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n      this.bcmOpen.emit();\n    } else {\n      document.body.style.overflow = '';\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    const event = this.bcmBeforeOpen.emit();\n    if (!event.defaultPrevented) {\n      this.open = true;\n    }\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    const event = this.bcmBeforeClose.emit();\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private getWrapperStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    if (this.position === 'left' || this.position === 'right') {\n      switch (this.size) {\n        case 'small':\n          style.width = '320px';\n          break;\n        case 'medium':\n          style.width = '480px';\n          break;\n        case 'large':\n          style.width = '1064px';\n          break;\n      }\n    } else {\n      switch (this.size) {\n        case 'small':\n          style.height = '40vh';\n          break;\n        case 'medium':\n          style.height = '60vh';\n          break;\n        case 'large':\n          style.height = '90vh';\n          break;\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n      open: this.open,\n      position: this.position,\n      size: this.size,\n      noHeader: this.noHeader,\n    });\n\n    return (\n      <div part=\"base\">\n        <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n        <div\n          part=\"wrapper\"\n          class={wrapper()}\n          style={this.getWrapperStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-label={this.headerText}\n        >\n          <div part=\"header\" class={header()}>\n            <h2 part=\"title\" class={title()}>\n              <slot name=\"header\">{this.headerText}</slot>\n            </h2>\n            <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n              <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n            </button>\n          </div>\n          <div part=\"content\" class={content()}>\n            <slot />\n          </div>\n          <div part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":"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"}

package/dist/cjs/bcm-dropdown-item.cjs.entry.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var index = require('./index-DHDrXFLM.js');
+var tv = require('./tv-ngpIbGlG.js');
+
+const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
+
+const DropdownItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmDropDownItemChange = index.createEvent(this, "bcmDropDownItemChange", 1);
+        this.selected = false;
+        this.error = false;
+        this.disabled = false;
+        this.dropdownItemClass = tv.tv({
+            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
+            variants: {
+                selected: {
+                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
+                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
+                },
+                error: {
+                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
+                    false: '',
+                },
+                disabled: {
+                    true: '', // should be discuss with ux team
+                    false: '',
+                },
+            },
+            defaultVariants: {
+                selected: false,
+                error: false,
+                disabled: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    handleClick() {
+        this.selected = true;
+        this.bcmDropDownItemChange.emit({
+            element: this.host,
+            selected: this.selected,
+        });
+    }
+    render() {
+        var _a;
+        return (index.h("div", { key: '69beaac4c9225bc7803b4002f1543c18e76e36cc', "aria-checked": this.selected, class: this.dropdownItemClass({
+                selected: this.selected,
+                error: this.error,
+            }), onClick: () => this.handleClick() }, index.h("slot", { key: 'ca2712023285689a1774b5869d982e87d3add46a', name: "left-content" }, this.icon && index.h("bcm-icon", { key: 'bef7483a47c823ed746c39ae37acc3a2360f0c59', "icon-name": this.icon })), index.h("div", { key: 'a9bdddf97d4a4e07e601599a4adb11354227dd0f', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '51c488350d2daabc32fc9693211a4e89d8cce16f' }, this.text)), index.h("slot", { key: '9bf3f8b4affa41ea72f181a073aea8cd56f8a2df', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
+    }
+    get host() { return index.getElement(this); }
+};
+DropdownItem.style = dropdownItemCss;
+
+exports.bcm_dropdown_item = DropdownItem;
+//# sourceMappingURL=bcm-dropdown-item.entry.cjs.js.map
+
+//# sourceMappingURL=bcm-dropdown-item.cjs.entry.js.map

package/dist/cjs/bcm-dropdown-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"bcm-dropdown-item.entry.cjs.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,86CAA86C;;MCQz7C,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkB1C,QAAA,IAAiB,CAAA,iBAAA,GAAGA,KAAE,CAC5B;AACE,YAAA,IAAI,EAAE,6GAA6G;AACnH,YAAA,QAAQ,EAAE;AACR,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE,uGAAuG;AAC7G,oBAAA,KAAK,EAAE,sDAAsD;AAC9D,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,uHAAuH;AAC7H,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACD,gBAAA,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE;AACR,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAwBF;IA1DS,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IA+BJ,MAAM,GAAA;;QACJ,QACEC,OACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAIA,OAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACvB,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,IAAI,KACxBA,OAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;","names":["tv","h"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-dropdown-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-dropdown-item.entry.cjs.js","sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,86CAA86C;;MCQz7C,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkB1C,QAAA,IAAiB,CAAA,iBAAA,GAAGA,KAAE,CAC5B;AACE,YAAA,IAAI,EAAE,6GAA6G;AACnH,YAAA,QAAQ,EAAE;AACR,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE,uGAAuG;AAC7G,oBAAA,KAAK,EAAE,sDAAsD;AAC9D,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,uHAAuH;AAC7H,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACD,gBAAA,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE;AACR,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAwBF;IA1DS,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IA+BJ,MAAM,GAAA;;QACJ,QACEC,OACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAIA,OAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACvB,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,IAAI,KACxBA,OAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;"}

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-DHDrXFLM.js');
+var tv = require('./tv-ngpIbGlG.js');
+
+const dropdownCss = ".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
+
+const Dropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmDropdownChange = index.createEvent(this, "bcmDropdownChange", 1);
+        this.isReady = false;
+        this.dropdownItems = [];
+        this.dropdownClass = tv.tv({
+            base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
+        });
+        this.handleSlotChange = () => {
+            this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
+            if (this.dropdownItems.length === 0) {
+                console.warn('No dropdown items found in dropdown component');
+            }
+        };
+    }
+    componentDidLoad() {
+        const button = this.host.shadowRoot.querySelector('bcm-button');
+        if (button) {
+            this.buttonRef = button;
+            this.isReady = true;
+        }
+    }
+    handleDropdownItemChange(event) {
+        var _a;
+        const { element, selected } = event === null || event === void 0 ? void 0 : event.detail;
+        (_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+            if (item != element) {
+                item.selected = false;
+            }
+        });
+        this.bcmDropdownChange.emit({
+            element: element,
+            selected,
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '6aaff12c84d38c32df5bc8dccb83421afb315eef' }, index.h("bcm-button", { key: '5612cef7303a6b839531e125c895a4e7b8d32282', kind: "outline" }, index.h("span", { key: '951418845cb1ec71fe6dc5bbbc33c49934447640', part: "text" }, this.text)), this.isReady && (index.h("bcm-linked", { key: 'd594359d6a9b7c673307c6a92e6d69cc47be3e1a', targetElement: this.buttonRef }, index.h("div", { key: '9badba5b1e99af6a5d58b02e849cb0923e49dfd8', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: 'c8191f215600170475d514bb6b4056047e6442d2', onSlotchange: this.handleSlotChange }))))));
+    }
+    get host() { return index.getElement(this); }
+};
+Dropdown.style = dropdownCss;
+
+exports.bcm_dropdown = Dropdown;
+//# sourceMappingURL=bcm-dropdown.entry.cjs.js.map
+
+//# sourceMappingURL=bcm-dropdown.cjs.entry.js.map

package/dist/cjs/bcm-dropdown.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"bcm-dropdown.entry.cjs.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,m0BAAm0B;;MCQ10B,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUW,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAExB,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAoCjD,QAAA,IAAa,CAAA,aAAA,GAAGA,KAAE,CAAC;AACzB,YAAA,IAAI,EAAE,uIAAuI;AAC9I,SAAA,CAAC;AAEM,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;YAEhF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,gBAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC;;AAEjE,SAAC;AAkBF;IApDC,gBAAgB,GAAA;AACd,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB;QACvF,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM;AACvB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;AAKvB,IAAA,wBAAwB,CAAC,KAAkB,EAAA;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM;QAE3C,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAC,IAAI,IAAG;AACjC,YAAA,IAAI,IAAI,IAAI,OAAO,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAEzB,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,YAAA,OAAO,EAAE,OAAO;YAChB,QAAQ;AACT,SAAA,CAAC;;IAeJ,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACxBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACZ,IAAI,CAAC,OAAO,KACXA,yEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,EAAA,EACvCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAC9C,CACK,CACd,CACI;;;;;;;;","names":["tv","h","Host"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-dropdown.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-dropdown.entry.cjs.js","sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["tv","h","Host"],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,m0BAAm0B;;MCQ10B,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUW,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAExB,QAAA,IAAa,CAAA,aAAA,GAAiC,EAAE;AAoCjD,QAAA,IAAa,CAAA,aAAA,GAAGA,KAAE,CAAC;AACzB,YAAA,IAAI,EAAE,uIAAuI;AAC9I,SAAA,CAAC;AAEM,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;YAEhF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,gBAAA,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC;;AAEjE,SAAC;AAkBF;IApDC,gBAAgB,GAAA;AACd,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB;QACvF,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM;AACvB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;AAKvB,IAAA,wBAAwB,CAAC,KAAkB,EAAA;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM;QAE3C,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAC,IAAI,IAAG;AACjC,YAAA,IAAI,IAAI,IAAI,OAAO,EAAE;AACnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;AAEzB,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,YAAA,OAAO,EAAE,OAAO;YAChB,QAAQ;AACT,SAAA,CAAC;;IAeJ,MAAM,GAAA;QACJ,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACxBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACZ,IAAI,CAAC,OAAO,KACXA,yEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,EAAA,EACvCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EACxDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAC9C,CACK,CACd,CACI;;;;;;;;"}