\n ui-kit works!\n
\n `,\n styles: [\n ]\n})\nexport class YupmaUiKitComponent {\n\n}\n","export enum AccordionType {\n COMPACT = 'compact',\n RELAXED = 'relaxed',\n FULL_WIDTH = 'full_width',\n}","export enum AlertType {\n INFO = 'info',\n DANGER = 'danger',\n WARNING = 'warning',\n SUCCESS = 'success',\n TIP = 'tip',\n}","export enum AvatarSize {\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n XL = 'extra_large',\n}","export enum BadgeType {\n DEFAULT = 'default',\n NEUTRAL = 'neutral',\n SUCCESS = 'success',\n DANGER = 'danger',\n WARNING = 'warning',\n INFO = 'info',\n TIP = 'tip',\n PRIMARY = 'primary',\n}","export enum BadgeSize {\n BASE = 'base',\n SM = 'small'\n}","export enum ButtonSize {\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n}","export enum ButtonType {\n DEFAULT = 'default',\n PRIMARY = 'primary',\n DANGER = 'danger',\n SUCCESS = 'success',\n INFO = 'info',\n WARNING = 'warning',\n GHOST = 'ghost',\n GHOST_LINK = 'ghost_link',\n GHOST_INVERT = 'ghost_invert',\n}","export enum ButtonVariant {\n DEFAULT = 'default',\n DROPDOWN = 'dropdown',\n ICON_AND_TEXT = 'icon_and_text',\n ICON_ONLY = 'icon_only',\n ICON_DROPDOWN = 'icon_dropdown',\n ICON_TEXT_AND_DROPDOWN = 'icon_text_and_dropdown',\n}","export enum SplitButtonSize {\n SM = 'sm',\n BASE = 'base',\n}","export enum SplitButtonType {\n DEFAULT = 'default',\n PRIMARY = 'primary',\n}","export enum ButtonGroupType {\n DEFAULT = 'default',\n GHOST = 'ghost',\n}","export enum ButtonGroupSize {\n SM = 'sm',\n BASE = 'base',\n}","export enum ButtonGroupItemVariant {\n DEFAULT = 'default',\n DROPDOWN = 'dropdown',\n ICON_AND_TEXT = 'icon_and_text',\n ICON_ONLY = 'icon_only',\n ICON_DROPDOWN = 'icon_dropdown',\n ICON_TEXT_AND_DROPDOWN = 'icon_text_and_dropdown',\n}","export enum DateSelectorType {\n DATE = 'date',\n MONTH = 'month',\n YEAR = 'year',\n}\n\nexport const MONTHS = [\n 'January', 'February', 'March', 'April', 'May', 'June',\n 'July', 'August', 'September', 'October', 'November', 'December'\n ];","export enum Months {\n JANUARY = 'January',\n FEBRIARY = 'February',\n MARCH = 'March',\n APRIL = 'April',\n MAY = 'May',\n JUNE = 'June',\n JULY = 'July',\n AUGUST = 'August',\n SEPTEMBER = 'September',\n OCTOBER = 'October',\n NOVEMBER = 'November',\n DECEMBER = 'December',\n }","export enum DrawerSize{\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n FULL_PAGE = 'full_page',\n}","export enum DropdownOptionType {\n DEFAULT = 'default',\n DANGER = 'danger',\n}","export enum DropdownOptionVariant {\n DEFAULT = 'default',\n AVATAR = 'avatar',\n LABEL = 'label',\n ICON = 'icon',\n}","export enum DropdownSelectionType{\n DEFAULT = 'default',\n CHECKMARK = 'checkmark',\n RADIO = 'radio',\n CHECKBOX = 'checkbox',\n}","export enum IconName {\n LOGO = 'icon-logo',\n BUILDINGS = 'icon-buildings',\n BUILDINGS_FILLED = 'icon-buildings-filled',\n CHECK = 'icon-check',\n CLIPBOARD_CHECK = 'icon-clipboard-check',\n CLIPBOARD_CHECK_FILLED = 'icon-clipboard-check-filled',\n CROSS = 'icon-cross',\n EDIT = 'icon-edit',\n DELETE = 'icon-delete',\n ELLIPSIS = 'icon-ellipsis',\n BULB = 'icon-bulb',\n BULB_FILLED = 'icon-bulb-filled',\n SUCCESS = 'icon-success',\n INFO_FILLED = 'icon-info-filled',\n INFO = 'icon-info',\n ERROR = 'icon-error',\n WARNING = 'icon-warning',\n HELP = 'icon-help',\n HELP_FILLED = 'icon-help-filled',\n CHEVRON_DOWN = 'icon-chevron-down',\n CHEVRON_UP = 'icon-chevron-up',\n CHEVRON_RIGHT = 'icon-chevron-right',\n CHEVRON_LEFT = 'icon-chevron-left',\n CARET_DOWN = 'icon-caret-down',\n CARET_UP = 'icon-caret-up',\n CARET_RIGHT = 'icon-caret-right',\n CARET_LEFT = 'icon-caret-left',\n EXTERNAL_LINK = 'icon-external-link',\n USER = 'icon-user',\n USERS = 'icon-users',\n USERS_FILLED = 'icon-users-filled',\n CIRCLE_USER_FILLED = 'icon-circle-user-filled',\n CIRCLE_USER = 'icon-circle-user',\n SEARCH = 'icon-search',\n SEARCH_FILLED = 'icon-search-filled',\n CIRCLE_CROSS_FILLED = 'icon-circle-cross-filled',\n CALENDAR = 'icon-calendar',\n CHEVRON_expand = 'icon-chevron-expand',\n CHEVRON_COLLAPSE = 'icon-chevron-collapse',\n PLUS = 'icon-plus',\n PLUS_CIRCLE = 'icon-plus-circle',\n MINUS = 'icon-minus',\n ARROW_SORT = 'icon-arrow-sort',\n ARROW_SORT_UP_LINES = 'icon-arrow-sort-up-lines',\n ARROW_SORT_DOWN_LINES = 'icon-arrow-sort-down-lines',\n ARROW_LEFT = 'icon-arrow-left',\n ARROW_RIGHT = 'icon-arrow-right',\n UPLOAD = 'icon-upload',\n DOWNLOAD = 'icon-download',\n STAR = 'icon-star',\n STAR_FILLED = 'icon-star-filled',\n SETTINGS = 'icon-settings',\n SETTINGS_FILLED = 'icon-settings-filled',\n FILTER = 'icon-filter',\n MENU = 'icon-menu',\n THEME_DEFAULT = 'icon-theme-default',\n THEME_LIGHT = 'icon-theme-light',\n THEME_DARK = 'icon-theme-dark',\n REQUIRED = 'icon-required',\n STARS = 'icon-stars',\n FEEDBACK = 'icon-feedback',\n MESSAGE = 'icon-message',\n YOUTUBE = 'icon-youtube',\n FACEBOOK = 'icon-facebook',\n INSTAGRAM = 'icon-instagram',\n WHATSAPP = 'icon-whatsapp',\n LINKEDIN = 'icon-linkedin',\n TWITTER = 'icon-twitter',\n TWITTER_X = 'icon-twitter-x',\n STACKOVERFLOW = 'icon-stackoverflow',\n GITHUB = 'icon-github',\n EMAIL = 'icon-email',\n PHONE = 'icon-phone',\n PHONE_FILLED = 'icon-phone-filled',\n GLOBE = 'icon-globe',\n FILE = 'icon-file',\n HOME = 'icon-home',\n HOME_FILLED = 'icon-home-filled',\n SLASH = 'icon-slash',\n PIN = 'icon-pin',\n PIN_FILLED = 'icon-pin-filled',\n IMAGE = 'icon-image',\n LINK = 'icon-link',\n SHARE = 'icon-share',\n BELL = 'icon-bell',\n CHART = 'icon-chart',\n CHART_FILLED = 'icon-chart-filled',\n BOX = 'icon-box',\n BOX_FILLED = 'icon-box-filled',\n INBOX = 'icon-inbox',\n INBOX_FILLED = 'icon-inbox-filled',\n CLOCK = 'icon-clock',\n LOCK = 'icon-lock',\n GRIP_VERTICAL = 'icon-grip-vertical',\n MEGAPHONE = 'icon-megaphone',\n MEGAPHONE_FILLED = 'icon-megaphone-filled',\n DEAL = 'icon-deal',\n DEAL_FILLED = 'icon-deal-filled',\n STICKY = 'icon-sticky',\n ATTACH = 'icon-attach',\n EYE = 'icon-eye',\n EYE_SLASH = 'icon-eye-slash',\n SHOP = 'icon-shop',\n SHOP_FILLED = 'icon-shop-filled',\n BOT = 'icon-bot',\n BOT_FILLED = 'icon-bot-filled',\n COPY = 'icon-copy',\n FORM = 'icon-form',\n FORM_NEW = 'icon-form-new',\n ARROW_SWAP = 'icon-arrow-swap',\n SIGN_OUT = 'icon-sign-out',\n BOARD = 'icon-board',\n BOARD_FILLED = 'icon-board-filled',\n PAYMENT = 'icon-payment',\n ALPHABET = 'icon-alphabet',\n HASH = 'icon-hash',\n SELECT_ALL_ON = 'icon-select-all-on',\n CHECKBOX = 'icon-checkbox',\n ARROW_COUNTER_CLOCKWISE = 'icon-arrow-counter-clockwise',\n GOOGLE_COLOR = 'icon-google-color',\n FACEBOOK_COLOR = 'icon-facebook-color',\n FOOD = 'icon-food',\n FLAG = 'icon-flag',\n WRENCH = 'icon-wrench',\n CAR = 'icon-car',\n TAG = 'icon-tag',\n KEY = 'icon-key',\n AIRPLANE = 'icon-airplane',\n BRIEFCASE = 'icon-briefcase',\n TROPHY = 'icon-trophy',\n CAMERA = 'icon-camera',\n VIDEO_CLIP = 'icon-video-clip',\n CROWN = 'icon-crown',\n LIGHTNING = 'icon-lightning',\n PANEL_LEFT_CONTRACT = 'icon-panel-left-contract',\n PANEL_LEFT_EXPAND = 'icon-panel-left-expand',\n BOLD = 'icon-bold',\n ITALIC = 'icon-italic',\n STRIKETHROUGH = 'icon-strikethrough',\n UNDERLINE = 'icon-underline',\n NUMBER_LIST = 'icon-number-list',\n BULLET_LIST = 'icon-bullet-list',\n CLEAR_FORMATTING = 'icon-clear-formatting',\n HIGHLIGHT = 'icon-highlight',\n TEXT_COLOR = 'icon-text-color',\n CODE = 'icon-code',\n TEXT_QUOTE = 'icon-text-quote',\n TEXT_ALIGN_LEFT = 'icon-text-align-left',\n TEXT_ALIGN_CENTER = 'icon-text-align-center',\n TEXT_ALIGN_RIGHT = 'icon-text-align-right',\n TEXT_ALIGN_JUSTIFY = 'icon-text-align-justify',\n HORIZONTAL_RULE = 'icon-horizontal-rule',\n PAUSE = 'icon-pause',\n PAUSE_FILLED = 'icon-pause-filled',\n PLAY = 'icon-play',\n PLAY_FILLED = 'icon-play-filled',\n STOP_FILLED = 'icon-stop-filled',\n VIDEO = 'icon-video',\n VIDEO_OFF = 'icon-video-off',\n MIC = 'icon-mic',\n MIC_OFF = 'icon-mic-off',\n SHARE_SCREEN = 'icon-share-screen',\n PICTURE_IN_PICTURE_ENTER = 'icon-picture-in-picture-enter',\n PICTURE_IN_PICTURE_EXIT = 'icon-picture-in-picture-exit',\n}","export enum LabelType {\n GRAY = 'gray',\n GREEN = 'green',\n RED = 'red',\n // BROWN = 'brown',\n BLUE = 'blue',\n // YELLOW = 'yellow',\n ORANGE = 'orange',\n PURPLE = 'purple',\n AQUA = 'aqua',\n MAGENTA = 'magenta',\n}","export enum SpinnerSize {\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n XL = 'extra_large',\n}","export enum ModalSize {\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n XL = 'extra_large',\n}","export enum PopoverPosition {\n ABOVE = 'above',\n ABOVE_LEFT_START = 'above_left_start',\n ABOVE_RIGHT_START = 'above_right_start',\n BELOW = 'below',\n BELOW_LEFT_START = 'below_left_start',\n BELOW_RIGHT_START = 'below_right_start',\n LEFT_START = 'left_start',\n RIGHT_START = 'right_start',\n LEFT = 'left',\n RIGHT = 'right',\n}","export enum TooltipPosition {\n ABOVE = 'above',\n ABOVE_LEFT_START = 'above_left_start',\n ABOVE_RIGHT_START = 'above_right_start',\n BELOW = 'below',\n BELOW_LEFT_START = 'below_left_start',\n BELOW_RIGHT_START = 'below_right_start',\n LEFT_START = 'left_start',\n RIGHT_START = 'right_start',\n LEFT = 'left',\n RIGHT = 'right',\n}","export enum ToggleSize{\n SM = 'small',\n BASE = 'base',\n LG = 'large',\n}","export enum AnchorTarget {\n _BLANK = '_blank',\n _SELF = '_self',\n _PARENT = '_parent',\n _TOP = '_top',\n}","export enum Direction {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}","export enum Breakpoints {\n SM = 'small',\n MD = 'medium',\n LG = 'large',\n XL = 'extra_large',\n}","export enum DateTimeFormat {\n SHORT = 'short',\n MEDIUM = 'medium',\n LONG = 'long',\n RELATIVE = 'relative',\n}","export enum TextCase {\n LOWER_CASE = 'lower_case',\n UPPER_CASE = 'upper_case',\n CAMEL_CASE = 'camel_case',\n PASCAL_CASE = 'pascal_case',\n SNAKE_CASE = 'snake_case',\n KEBAB_CASE = 'kebab_case',\n TITLE_CASE = 'title_case',\n SENTENCE_CASE = 'sentence_case',\n}","export enum InputMode {\n TEXT = 'text',\n DATE = 'date',\n TIME = 'time',\n DATE_RANGE = 'date_range',\n EMAIL = 'email',\n NUMBER = 'number',\n PHONE = 'phone',\n URL = 'url',\n}","export enum InputSize {\n BASE = 'base',\n SM = 'small',\n LG = 'large',\n}","export enum SelectSize {\n BASE = 'base',\n SM = 'small',\n LG = 'large',\n}","// Available format options enum\nexport enum RichTextFormatOption {\n BOLD = 'bold',\n ITALIC = 'italic',\n UNDERLINE = 'underline',\n LINK = 'link',\n FONT = 'font',\n SIZE = 'size',\n TEXT_COLOR = 'textColor',\n TEXT_HIGHLIGHT = 'textHighlight',\n BLOCKQUOTE = 'blockquote',\n LIST = 'list',\n ALIGNMENT = 'alignment',\n STRIKETHROUGH = 'strikethrough',\n CODE = 'code',\n HORIZONTAL_RULE = 'horizontalRule'\n}\n","export enum StepperType {\n UPCOMING = 'upcoming',\n COMPLETED = 'completed',\n ERROR = 'error',\n DISABLED = 'disabled'\n}","export enum StepperSize {\n BASE = 'base',\n SM = 'small',\n}","export enum ProgressBarType {\n PRIMARY = 'primary',\n SECONDARY = 'secondary'\n}","export enum ProgressBarSize {\n SM = 'small',\n BASE = 'base',\n}","export enum SegmentedControlVariant {\n ICON_ONLY = 'icon_only',\n TEXT_ONLY = 'text_only',\n ICON_AND_TEXT = 'icon_and_text',\n}","export enum InlineInfoPosition {\n LEFT = 'left',\n RIGHT = 'right',\n ABOVE = 'above',\n BELOW = 'below'\n}","export enum ToastType {\n DEFAULT = 'default',\n SUCCESS = 'success',\n WARNING = 'warning',\n ERROR = 'error',\n LOADING = 'loading',\n}","export enum TableSize {\n SM = 'sm',\n BASE = 'base',\n}","import { Component, Input } from '@angular/core';\nimport { IconName } from '../../enums';\n\n@Component({\n selector: 'ym-icon',\n // standalone: true,\n templateUrl: './icon.component.html',\n styleUrl: './icon.component.scss'\n})\nexport class IconComponent {\n @Input() iconName: IconName | String;\n\n}\n","","// animations.ts\nimport { trigger, transition, style, animate, state } from '@angular/animations';\n\nexport enum AnimationState {\n OPEN = 'open',\n CLOSE = 'close',\n}\n\nexport const accordionAnimation = trigger('accordionAnimation', [\n transition(':enter', [\n style({ height: '0', opacity: 0, }), // Initial state\n animate('200ms ease-out', style({ height: '*', opacity: 1 })) // Final state\n ]),\n transition(':leave', [\n style({ height: '*', opacity: 1 }), // Initial state\n animate('200ms ease-out', style({ height: '0', opacity: 0 })) // Final state\n ])\n]);\n\nexport const tooltipAnimation = trigger('tooltipAnimation', [\n transition(':enter', [\n style({ scale: 0.8, opacity: 0 }), // Initial state\n animate('200ms ease-out', style({ scale: 1, opacity: 1 })) // Final state\n ]),\n transition(':leave', [\n style({ scale: 1, opacity: 1 }), // Initial state\n animate('200ms ease-out', style({ scale: 0.8, opacity: 0 })) // Final state\n ])\n]);\n\nexport const spinnerAnimation = trigger('spinnerAnimation', [\n transition(':enter', [\n style({ scale: 0.8, opacity: 0 }),\n animate('200ms ease-out', style({ scale: 1, opacity: 1 }))\n ]),\n transition(':leave', [\n style({ scale: 1, opacity: 1 }),\n animate('200ms ease-out', style({ scale: 0.8, opacity: 0 }))\n ])\n]);\n\nexport const backdropAnimation = trigger('backdropAnimation', [\n state(AnimationState.OPEN, style({\n opacity: 0.6\n })),\n state(AnimationState.CLOSE, style({\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const modalAnimation = trigger('modalAnimation', [\n state(AnimationState.OPEN, style({\n transform: 'none',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n transform: 'translate(0,100%)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const discardChangesAnimation = trigger('discardChangesAnimation', [\n state(AnimationState.OPEN, style({\n // transform: 'none',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n // transform: 'translate(0,100%)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const dialogAnimation = trigger('dialogAnimation', [\n state(AnimationState.OPEN, style({\n transform: 'none',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n transform: 'translate(0,-100%)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const drawerAnimation = trigger('drawerAnimation', [\n state(AnimationState.OPEN, style({\n transform: 'none',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n transform: 'translate(100%,0)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const sidebarAnimation = trigger('sidebarAnimation', [\n state(AnimationState.OPEN, style({\n transform: 'none',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n transform: 'translate(-100%,0)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const promoOverlayAnimation = trigger('promoOverlayAnimation', [\n state(AnimationState.OPEN, style({\n scale: 1,\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n scale: 0.7,\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('400ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('400ms ease-in-out'))\n]);\n\nexport const popoverAnimation = trigger('popoverAnimation', [\n state(AnimationState.OPEN, style({\n scale: 1,\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n scale: 0.9,\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('200ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('200ms ease-in-out'))\n]);\n\nexport const fadeStickyHeaderAnimation = trigger('fadeStickyHeaderAnimation', [\n state(AnimationState.OPEN, style({\n transform: 'translateY(0)',\n opacity: 1\n })),\n state(AnimationState.CLOSE, style({\n transform: 'translateY(12px)',\n opacity: 0\n })),\n transition(`${AnimationState.CLOSE} => ${AnimationState.OPEN}`, animate('200ms ease-in-out')),\n transition(`${AnimationState.OPEN} => ${AnimationState.CLOSE}`, animate('200ms ease-in-out'))\n]);","import { Component, Input } from '@angular/core';\nimport { TooltipPosition } from '../../enums';\nimport { tooltipAnimation } from '../../animations/animations';\n\n@Component({\n selector: 'ym-tooltip',\n // standalone: true,\n // imports: [],\n templateUrl: './tooltip.component.html',\n styleUrl: './tooltip.component.scss',\n animations: [tooltipAnimation]\n})\nexport class TooltipComponent {\n @Input() text: string | number = '';\n\n @Input() ymTooltip?: string;\n @Input() position: TooltipPosition = TooltipPosition.BELOW;\n\n}\n","","import { Directive, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';\nimport { Overlay, OverlayRef, OverlayPositionBuilder, ConnectedPosition } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { TooltipPosition } from '../../enums';\nimport { TooltipComponent } from './tooltip.component';\n\n@Directive({\n selector: '[ymTooltip]',\n // standalone: true\n})\nexport class TooltipDirective implements OnDestroy, OnChanges, OnInit {\n @Input('ymTooltip') tooltipText: string | number = '';\n @Input('ymTooltipPosition') preferredPosition: TooltipPosition = TooltipPosition.BELOW;\n @Input('ymTooltipDisabled') disabled: boolean = false;\n @Input('ymTooltipOffset') offset: number = 4;\n @Input('ymTooltipShowDelay') showDelay: number = 600;\n @Input('ymTooltipHideDelay') hideDelay: number = 0;\n private overlayRef: OverlayRef;\n private showTimeoutId: any;\n private hideTimeoutId: any;\n\n constructor(\n private overlay: Overlay,\n private overlayPositionBuilder: OverlayPositionBuilder,\n private elementRef: ElementRef,\n ) { }\n ngOnInit(): void {\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (!this.tooltipText) {\n this.disabled = true;\n }\n if (changes['disabled']) {\n clearTimeout(this.showTimeoutId);\n this.hideTooltip();\n }\n }\n\n @HostListener('mouseenter')\n @HostListener('focusin')\n @HostListener('tocuhstart')\n onEnter() {\n if (this.disabled) return;\n clearTimeout(this.hideTimeoutId);\n clearTimeout(this.showTimeoutId);\n this.showTimeoutId = setTimeout(() => {\n this.showTooltip();\n }, this.showDelay);\n }\n\n\n @HostListener('mouseleave')\n @HostListener('focusout')\n onLeave() {\n if (this.disabled) return;\n clearTimeout(this.showTimeoutId);\n this.scheduleHideTooltip();\n }\n\n @HostListener('touchend')\n onMobileLeave() {\n if (this.disabled) return;\n this.scheduleHideTooltip(3000);\n }\n\n private scheduleHideTooltip(delay: number = this.hideDelay) {\n clearTimeout(this.hideTimeoutId);\n this.hideTimeoutId = setTimeout(() => {\n this.hideTooltip();\n }, delay);\n }\n\n showTooltip() {\n const positionStrategy = this.getPositionStrategy();\n const scrollStrategy = this.overlay.scrollStrategies.close();\n\n if (!this.overlayRef) {\n this.overlayRef = this.overlay.create({ positionStrategy, scrollStrategy });\n }\n\n if (!this.overlayRef.hasAttached()) {\n const tooltipPortal = new ComponentPortal(TooltipComponent);\n const tooltipRef = this.overlayRef.attach(tooltipPortal);\n tooltipRef.instance.text = this.tooltipText\n }\n }\n\n hideTooltip() {\n if (this.overlayRef) {\n this.overlayRef.detach();\n }\n }\n\n private getPositionStrategy() {\n const positions: ConnectedPosition[] = [\n { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -this.offset },//Above\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -this.offset },//Above_left\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -this.offset },//Above_right\n { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: this.offset },//Below\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: this.offset },//Below_left\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: this.offset },//Below_right\n { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -this.offset },//Left\n { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: this.offset },//Right\n { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -this.offset },//Left_middle\n { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: this.offset },//Right_middle\n ]\n const positionMap: { [key in TooltipPosition]: ConnectedPosition[] } = {\n [TooltipPosition.ABOVE]: [\n positions[0], positions[1], positions[2], positions[3], positions[4], positions[5] // These are directly above, center and offset to left and right\n ],\n [TooltipPosition.ABOVE_LEFT_START]: [\n positions[1], positions[0], positions[2], positions[4], positions[3], positions[5]\n ],\n [TooltipPosition.ABOVE_RIGHT_START]: [\n positions[2], positions[0], positions[1], positions[5], positions[3], positions[4],\n ],\n [TooltipPosition.BELOW]: [\n positions[3], positions[4], positions[5], positions[0], positions[1], positions[2] // These are directly below, center and offset to left and right\n ],\n [TooltipPosition.BELOW_LEFT_START]: [\n positions[4], positions[3], positions[5], positions[1], positions[0], positions[2]\n ],\n [TooltipPosition.BELOW_RIGHT_START]: [\n positions[5], positions[3], positions[4], positions[2], positions[0], positions[1],\n ],\n [TooltipPosition.LEFT_START]: [\n positions[6], positions[7], positions[0], positions[3], positions[1], positions[2], positions[4], positions[5]\n ],\n [TooltipPosition.RIGHT_START]: [\n positions[7], positions[6], positions[0], positions[3], positions[1], positions[2], positions[4], positions[5]\n ],\n [TooltipPosition.LEFT]: [\n positions[8], positions[3], positions[7], positions[0], positions[1], positions[2], positions[4], positions[5]\n ],\n [TooltipPosition.RIGHT]: [\n positions[9], positions[3], positions[7], positions[0], positions[1], positions[2], positions[4], positions[5]\n ]\n };\n\n return this.overlayPositionBuilder\n .flexibleConnectedTo(this.elementRef)\n .withPositions(positionMap[this.preferredPosition] || positionMap[TooltipPosition.BELOW]).withPush(true);\n }\n\n ngOnDestroy() {\n clearTimeout(this.hideTimeoutId);\n clearTimeout(this.showTimeoutId);\n this.hideTooltip();\n }\n\n}\n","import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\nimport { AvatarSize, IconName, TooltipPosition } from '../../enums';\n\nenum AvatarType {\n ICON = 'icon',\n PHOTO = 'photo',\n INITIAL = 'initial'\n}\n\n@Component({\n selector: 'ym-avatar',\n // standalone: true,\n // imports: [],\n templateUrl: './avatar.component.html',\n styleUrl: './avatar.component.scss'\n})\nexport class AvatarComponent implements OnChanges {\n @Input() size: AvatarSize = AvatarSize.BASE;\n @Input() icon: IconName = IconName.CIRCLE_USER_FILLED;\n @Input() src: string = \"\";\n @Input() name: string = \"\";\n @Input() color: string = \"\";\n @Input() bgColor: string = \"\";\n @Input() isCircle: boolean = true;\n @Input() hideTooltip: boolean = false;\n @Input() tooltipPosition: TooltipPosition = TooltipPosition.BELOW;\n @Input() tooltipOffset: number = 4;\n iconName = IconName;\n avatarType: AvatarType = AvatarType.ICON;\n avatarTypes = AvatarType;\n initial: string = \"\";\n\n ngOnChanges(changes: SimpleChanges) {\n this.getAvatarType();\n }\n\n private getAvatarType() {\n this.initial = this.name?.trim().replace(/[^a-zA-Z0-9]/g, '').substring(0, 1);\n\n if (this.src) {\n this.avatarType = AvatarType.PHOTO;\n } else if (this.name && this.initial) {\n this.avatarType = AvatarType.INITIAL;\n } else {\n this.avatarType = AvatarType.ICON;\n }\n }\n\n get avatarClasses(): string[] {\n const classes = [`avatar-${this.size}`, `avatar-${this.avatarType}`];\n switch (this.size) {\n case AvatarSize.SM:\n classes.push('ym-svg-base');\n break;\n case AvatarSize.BASE:\n classes.push('ym-svg-lg');\n break;\n case AvatarSize.LG:\n classes.push('ym-svg-xl');\n break;\n case AvatarSize.XL:\n classes.push('ym-svg-xxl');\n break;\n default:\n break;\n }\n if (!this.isCircle) {\n classes.push('avatar-square');\n }\n return classes;\n }\n}\n","\n\n {{headerDescription}}
\n