bromcom-ui-next 0.1.25 → 0.1.27

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

@@ -1 +0,0 @@
-{"version":3,"file":"bcm-drawer.entry.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":[],"mappings":"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"}