{"file":"patternlib-avatar.patternlib-flyoutmenu.entry.js","mappings":"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","names":[],"sources":["./src/components/patternlib-avatar/patternlib-avatar.scss?tag=patternlib-avatar&encapsulation=shadow","./src/components/patternlib-avatar/patternlib-avatar.tsx","./src/components/patternlib-flyoutmenu/patternlib-flyoutmenu.scss?tag=patternlib-flyoutmenu&encapsulation=shadow","./src/components/patternlib-flyoutmenu/patternlib-flyoutmenu.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.avatar-wrapper {\n box-sizing: border-box;\n -moz-user-select: none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.avatar {\n background: var(--color-steel-100);\n border-radius: 100%;\n width: 48px;\n height: 48px;\n left: 0px;\n top: 0px;\n line-height: 26px;\n justify-content: center;\n align-items: center;\n display: inline-flex;\n\n &:hover:not(.no-states) {\n background: var(--color-steel-200);\n cursor: pointer;\n }\n\n &:active:not(.no-states) {\n background: var(--avatar-background-color);\n color: var(--avatar-text-color) !important;\n }\n\n &.size-small {\n width: 32px;\n height: 32px;\n line-height: 20px;\n }\n\n &.background-transparent {\n background-color: transparent;\n\n &:hover {\n background-color: transparent;\n color: var(--color-steel-600) !important;\n }\n }\n\n &.avatar-label {\n margin: auto;\n @apply font-text-bold;\n font-size: var(--copytext-font-size);\n color: var(--color-black);\n letter-spacing: var(--letter-spacing-basic);\n\n &.size-small {\n font-size: var(--copytext-font-size-smaller);\n }\n }\n\n &.logged-out {\n span {\n @apply text-[24px];\n\n @media (min-width: theme('screens.md')) {\n @apply text-[32px];\n }\n\n @media (min-width: theme('screens.lg')) {\n @apply text-[24px];\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { ClassNames } from '../../utils/interfaces';\n\n@Component({\n tag: 'patternlib-avatar',\n styleUrl: 'patternlib-avatar.scss',\n shadow: true,\n})\nexport class PatternlibAvatar {\n /**\n * Define initials for the avatar. If more than three characters are supplied\n * the first three are chosen as initials.\n **/\n @Prop() initials = '';\n\n /**\n * Remove style changes whileHover and whileActive\n */\n @Prop() noStates?: boolean;\n\n /**\n * Sets the background color variant.\n */\n @Prop() variant: 'default' | 'dark' = 'default';\n\n /**\n * Sets small variant.\n */\n @Prop() sizeSmall?: boolean;\n\n /**\n * Set an logged-out icon to the avatar.\n */\n @Prop() loggedOut?: boolean = false;\n\n /**\n * Set the width and height of the icon in px.\n */\n @Prop() iconSize: '32px' | '24px' = '32px';\n\n /**\n * toggle the background color\n */\n @Prop() backgroundTransparent?: boolean = false;\n\n render() {\n const label = this.initials.length > 3 ? this.initials.substring(0, 3).toLocaleUpperCase() : this.initials.toLocaleUpperCase();\n\n const loggedOut = (\n \n \n \n );\n\n const avatarClass: ClassNames = {\n 'avatar-wrapper': true,\n 'avatar': true,\n 'avatar-label': true,\n 'no-states': this.noStates,\n 'size-small': this.sizeSmall,\n 'logged-out': this.loggedOut,\n 'background-transparent': this.backgroundTransparent,\n };\n\n return (\n \n
{this.loggedOut ? loggedOut : {label}}
\n \n );\n }\n}\n",":host {\n display: contents;\n}\n\n.flyoutmenu-container {\n & .flyoutmenu-wrapper {\n min-width: 200px;\n }\n\n .flyoutmenu-user-container {\n @apply grid;\n grid-template-columns: 80px 1fr;\n padding: 12px 6px 0 6px;\n\n .flyoutmenu-avatar-container {\n @apply flex items-center justify-center w-[80px] h-[80px];\n }\n\n .flyoutmenu-user-name {\n @apply font-button text-copy;\n }\n\n .flyoutmenu-user-info {\n @apply font-text text-copy-small;\n }\n\n span {\n @apply overflow-hidden;\n text-overflow: ellipsis;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { PatternlibService } from '../../global/runtime';\nimport { ClassNames, LhClose } from '../../utils/interfaces';\n\n@Component({\n tag: 'patternlib-flyoutmenu',\n styleUrl: 'patternlib-flyoutmenu.scss',\n shadow: true,\n})\nexport class PatternlibFlyoutmenu {\n @Element() hostElement: HTMLPatternlibFlyoutmenuElement;\n\n /**\n * Show the Flyoutmenu\n */\n @Prop() show?: boolean = false;\n\n /**\n * Set the width of the Flyoutmenu in px\n */\n @Prop() width = '280px';\n\n /**\n * Set the height of the Flyoutmenu\n */\n @Prop() height = 'auto';\n\n /**\n * Set the user name inside the Flyoutmenu\n */\n @Prop() userName?: string;\n\n /**\n * Set the user info inside the Flyoutmenu\n */\n @Prop() userInfo?: string;\n\n /**\n * Set the user initials inside the Flyoutmenu\n */\n @Prop() userInitials?: string;\n\n /**\n * Set the position of the Flyoutmenu\n */\n @Prop() flyoutPosition: 'top' | 'bottom' | 'auto' = 'auto';\n\n /**\n * Define the Flyoutmenu z-index as a number\n */\n @Prop() zIndex = 100;\n\n /**\n * Set the default alignment of the Flyoutmenu\n */\n @Prop() defaultAlign: 'left' | 'center' | 'right' | 'auto' = 'auto';\n\n /**\n * Wether the component is registered at the FlyoutGroups handler or not.\n */\n @Prop() useFlyoutGroups = true;\n\n /**\n * Flyout group name. Only works if useFlyoutGroups is true.\n */\n @Prop() groupName?: string;\n\n /**\n * Hide Arrow\n */\n @Prop() hideArrow = false;\n\n /**\n * Set offset (needed to set if the Flyoutmenu is used inisde of a scrollable container, to reposition based on the scrollTop value)\n */\n @Prop() offset = 0;\n\n /**\n * Define the gap betwwen the Flyoutmenu button and container\n */\n @Prop() gap = 16;\n\n @Watch('groupName')\n async onGroupNameChange() {\n if (this.useFlyoutGroups) {\n PatternlibService.unregisterFlyout(this, this.groupName);\n\n PatternlibService.registerFlyout(this, this.groupName);\n }\n }\n\n /**\n * Internal state if Flyoutmenu is open\n */\n @State() isOpen: boolean;\n\n /**\n * Emits when closeFlyoutmenu() was invoked.\n */\n @Event({ eventName: 'lhFlyoutClosed' }) flyoutClosed: EventEmitter;\n\n /**\n * Public function to open the Flyoutmenu\n */\n @Method()\n async openFlyoutmenu(): Promise {\n this.isOpen = true;\n\n if (this.useFlyoutGroups) {\n PatternlibService.closeAllOtherFlyouts(this, this.groupName);\n }\n }\n\n /**\n * Public function to close the Flyoutmenu\n */\n @Method()\n async closeFlyoutmenu() {\n this.isOpen = false;\n this.flyoutClosed.emit();\n }\n\n @Watch('show')\n showWatcher(show: boolean) {\n this.isOpen = show;\n if (show) {\n window.addEventListener(\n 'click',\n async (e: Event) => {\n const target = e.target as HTMLElement;\n if (!this.hostElement.contains(target)) {\n await this.closeFlyoutmenu();\n }\n },\n false,\n );\n }\n if (this.useFlyoutGroups && this.isOpen) {\n PatternlibService.closeAllOtherFlyouts(this, this.groupName);\n }\n }\n\n @Watch('isOpen')\n async isOpenWatcher(isOpen: boolean): Promise {\n if (isOpen) {\n if (this.useFlyoutGroups) {\n PatternlibService.closeAllOtherFlyouts(this, this.groupName);\n }\n }\n }\n\n /**\n * Provide a method to monitor if the component gets clicked\n */\n @Listen('click', { target: 'window' })\n handleWindowClick(e: any) {\n if (\n e.target != this.hostElement &&\n this.isOpen &&\n this.show === false &&\n e.target.closest('[slot=\"flyoutmenu-button\"]') === null &&\n e.target.closest('[slot=\"flyoutmenu-content\"]') === null\n ) {\n this.isOpen = false;\n }\n\n const target = e.target as HTMLElement;\n if (!this.hostElement.contains(target)) {\n this.closeFlyoutmenu().catch(error => console.log(error.message));\n }\n }\n\n componentWillLoad() {\n this.isOpen = this.show;\n }\n\n async componentDidLoad() {\n if (this.useFlyoutGroups) {\n PatternlibService.registerFlyout(this, this.groupName);\n }\n }\n\n render() {\n const flyoutmenuContainerClass: ClassNames = {\n 'flyoutmenu-container': true,\n };\n\n const flyoutmenuWrapperClasses: ClassNames = {\n 'flyoutmenu-wrapper': true,\n };\n\n const flyoutmenuAvatarContainerClass: ClassNames = {\n 'flyoutmenu-avatar-container': true,\n };\n\n const flyoutmenuUserNameClasses: ClassNames = {\n 'flyoutmenu-user-name': true,\n 'flex pt-[3px]': true,\n };\n\n const flyoutmenuUserInfoClasses: ClassNames = {\n 'flyoutmenu-user-info': true,\n 'flex pb-[3px]': true,\n };\n\n const flyoutmenuUserContainerClass: ClassNames = {\n 'flyoutmenu-user-container': true,\n };\n\n const flyoutmenuUserWrapperClasses: ClassNames = {\n 'flex flex-col self-center overflow-hidden min-h-[50px]': true,\n };\n\n return (\n \n \n \n
\n
\n
\n {this.userName != null && this.userInfo != null && this.userInitials != null && (\n
\n
\n \n
\n
\n
\n {this.userName}\n
\n
\n {this.userInfo}\n
\n
\n
\n )}\n
\n
\n \n
\n \n \n );\n }\n}\n"],"version":3}