ng-devui

Version:

DevUI components based on Angular

1 lines • 109 kB

Source Map (JSON)

{"version":3,"file":"ng-devui-utils.mjs","sources":["../../devui/utils/animations/animationParameters.ts","../../devui/utils/animations/backdrop-fade-in-out.ts","../../devui/utils/animations/corner-fade-in-out.ts","../../devui/utils/animations/direction-fade-in-out.ts","../../devui/utils/animations/expand-collapse.ts","../../devui/utils/animations/fade-in-out.ts","../../devui/utils/animations/scale-in-out.ts","../../devui/utils/animations/fly-in-out.ts","../../devui/utils/animations/open-close.ts","../../devui/utils/animations/pop-in-out.ts","../../devui/utils/animations/scrollAnimation.ts","../../devui/utils/animations/wipe-in-out.ts","../../devui/utils/cdk-origin-handler.ts","../../devui/utils/cdk-overlay-config.type.ts","../../devui/utils/date-utils.ts","../../devui/utils/default-date-converter.ts","../../devui/utils/dom-utils.ts","../../devui/utils/fun-utils.ts","../../devui/utils/globalConfig/config.ts","../../devui/utils/globalConfig/config.service.ts","../../devui/utils/highlight/highlight.component.ts","../../devui/utils/highlight/highlight.module.ts","../../devui/utils/is-template.pipe.ts","../../devui/utils/is-template.module.ts","../../devui/utils/lazy-load/lazy-load.directive.ts","../../devui/utils/lazy-load/lazy-load.module.ts","../../devui/utils/observeVisibility/observer-visibility.directive.ts","../../devui/utils/observeVisibility/observer-visibility.module.ts","../../devui/utils/str-tpl-outlet/str-tpl-outlet.directive.ts","../../devui/utils/str-tpl-outlet/str-tpl-outlet.module.ts","../../devui/utils/popper/popper.component.ts","../../devui/utils/popper/popper.component.html","../../devui/utils/popper/popper.module.ts","../../devui/utils/safe.pipe.ts","../../devui/utils/safe-pipe.module.ts","../../devui/utils/tree-utils.ts","../../devui/utils/ng-devui-utils.ts"],"sourcesContent":["\nexport class AnimationDuration {\n static SLOW = '0.3s';\n static BASE = '0.2s';\n static FAST = '0.1s';\n}\n\nexport class AnimationNumberDuration {\n static SLOW = 300;\n static BASE = 200;\n static FAST = 100;\n}\n\nexport class AnimationCurves {\n static EASE_OUT = 'cubic-bezier(0.16, 0.75, 0.5, 1)';\n static EASE_IN = 'cubic-bezier(0.5, 0, 0.84, 0.25)';\n static EASE_IN_OUT = 'cubic-bezier(0.5, 0.05, 0.5, 0.95)';\n static LINEAR = 'cubic-bezier(0, 0, 1, 1)';\n /**\n * @deprecated 'EASE_IN_SMOOTH' does not match the actual bezier curve,replaced with 'EASE_IN_OUT_SMOOTH'\n */\n static EASE_IN_SMOOTH = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\n static EASE_IN_OUT_SMOOTH = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\n}\n","import { animate, AnimationTriggerMetadata, group, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\nconst duration = AnimationDuration.FAST;\nconst linear = AnimationCurves.LINEAR;\n\nexport const backdropFadeInOut: AnimationTriggerMetadata = trigger('backdropAnimation', [\n state('void', style({ display: 'none', opacity: 0 })),\n state('in', style({ display: 'block', opacity: 1 })),\n transition('void => in', [\n style({ display: 'block' }),\n animate(`${duration} ${linear}`, style({ opacity: 1 }))\n ]),\n transition('in => void', group([\n animate(`${duration} ${linear}`, style({ opacity: 0 }))\n ])),\n]);\n","import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@angular/animations';\n\n/**\n * @deprecated\n */\nexport const cornerFadeInOut: AnimationTriggerMetadata = trigger('cornerFadeInOut', [\n transition('void => bottom', [\n style({transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 0%', display: 'inline-block'}),\n animate('200ms cubic-bezier(0.23, 1, 0.32, 1)',\n style({transform: 'scale(1)', opacity: 1, transformOrigin: '0% 0%'})),\n ]),\n transition('bottom => void', [\n style({transform: 'scale(1)', opacity: 1, transformOrigin: '0% 0%', display: 'inline-block'}),\n animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)',\n style({transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 0%'}))\n ]),\n transition('void => top', [\n style({transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 100%', display: 'inline-block'}),\n animate('200ms cubic-bezier(0.23, 1, 0.32, 1)',\n style({transform: 'scale(1)', opacity: 1, transformOrigin: '0% 100%'})),\n ]),\n transition('top => void', [\n style({transform: 'scale(1)', opacity: 1, transformOrigin: '0% 100%', display: 'inline-block'}),\n animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)',\n style({transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 100%'}))\n ]\n )\n]);\n","import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\nconst easeOut = AnimationCurves.EASE_OUT;\nconst easeIn = AnimationCurves.EASE_IN;\nconst duration = AnimationDuration.FAST;\nconst scaleY = 'scaleY(0.8)';\nconst scaleX = 'scaleX(0.8)';\nconst scaleY1 = 'scaleY(1)';\nconst scaleX1 = 'scaleX(1)';\nconst scaleXToVoid = 'scaleX(0.8)';\nconst scaleYToVoid = 'scaleY(0.8)';\n\nexport const directionFadeInOut: AnimationTriggerMetadata = trigger('directionFadeInOut', [\n state('void', style({opacity: 0, })),\n state('bottom', style({opacity: 1, })),\n state('bottom-left', style({opacity: 1})),\n state('bottom-right', style({opacity: 1})),\n state('top', style({opacity: 1})),\n state('top-left', style({opacity: 1})),\n state('top-right', style({opacity: 1})),\n state('left', style({opacity: 1})),\n state('left-top', style({opacity: 1})),\n state('left-bottom', style({opacity: 1})),\n state('right', style({opacity: 1})),\n state('right-top', style({opacity: 1})),\n state('right-bottom', style({opacity: 1})),\n // 下方\n transition('* => bottom', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}` }))\n ]),\n transition('bottom => void', [\n style({ transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n transition('* => bottom-left', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}` }))\n ]),\n transition('bottom-left => void', [\n style({ opacity: 1, transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n transition('* => bottom-right', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}` }))\n ]),\n transition('bottom-right => void', [\n style({ opacity: 1, transformOrigin: '50% -8px'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n\n // 上方\n transition('* => top', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}`, }))\n ]),\n transition('top => void', [\n style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n transition('* => top-left', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}`, }))\n ]),\n transition('top-left => void', [\n style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n transition('* => top-right', [\n style({opacity: 0.8 , transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleY1}`, }))\n ]),\n transition('top-right => void', [\n style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleYToVoid}`, opacity: 0.8}))\n ]),\n\n // 左方\n transition('* => left', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}` }))\n ]),\n transition('left => void', [\n style({ opacity: 1, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0.8}))\n ]),\n transition('* => left-top', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}` }))\n ]),\n transition('left-top => void', [\n style({ opacity: 1, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0.8}))\n ]),\n transition('* => left-bottom', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}` }))\n ]),\n transition('left-bottom => void', [\n style({ opacity: 1, transformOrigin: 'calc(100% + 8px)'}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0.8}))\n ]),\n // 右方\n transition('* => right', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}`}))\n ]),\n transition('right => void', [\n style({ opacity: 1, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0}))\n ]),\n transition('* => right-top', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}`}))\n ]),\n transition('right-top => void', [\n style({ opacity: 1, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0.8}))\n ]),\n transition('* => right-bottom', [\n style({opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeOut}`, style({opacity: 1, transform: `${scaleX1}`}))\n ]),\n transition('right-bottom => void', [\n style({ opacity: 1, transformOrigin: '-8px 50% '}),\n animate(`${duration} ${easeIn}`, style({transform: `${scaleXToVoid}`, opacity: 0.8}))\n ]),\n]);\n","import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\n\nconst easeInOut = AnimationCurves.EASE_IN_OUT;\nconst duration = AnimationDuration.SLOW;\n\nexport const expandCollapse: AnimationTriggerMetadata = trigger('collapse', [\n state('expanded', style({ opacity: 1, height: '*', overflow: 'hidden' })),\n state('collapsed', style({ opacity: 0, height: 0, overflow: 'hidden' })),\n transition('collapsed => expanded', animate(`${duration} ${easeInOut}`)),\n transition('expanded => collapsed', animate(`${duration} ${easeInOut}`))\n]);\n\nexport const expandCollapseForDomDestroy: AnimationTriggerMetadata = trigger('collapseForDomDestroy', [\n transition(':enter', [\n style({ opacity: 0, height: 0, overflow: 'hidden' }),\n animate(`${duration} ${easeInOut}`, style({ opacity: 1, height: '*', overflow: 'hidden' }))\n ]),\n transition(':leave', [\n style({ opacity: 1, height: '*', overflow: 'hidden' }),\n animate(`${duration} ${easeInOut}`, style({ opacity: 0, height: 0, overflow: 'hidden' }))\n ]),\n]);\n\nexport const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion', [\n state('expanded', style({ height: '*' })),\n state('collapsed', style({ height: 0 })), // overflow: 'hidden'\n transition('expanded => collapsed', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),\n transition('collapsed => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),\n]);\n","import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\n\nconst easeIn = AnimationCurves.EASE_IN;\nconst easeOut = AnimationCurves.EASE_OUT;\nconst duration = AnimationDuration.BASE;\nexport const fadeInOut: AnimationTriggerMetadata = trigger('fadeInOut', [\n state('void', style({ transform: 'scaleY(0) translateY(-4px)', opacity: 0, transformOrigin: '0 0%', display: 'block' })),\n state('bottom', style({ transform: 'scaleY(0.9999) translateY(0)', opacity: 1, transformOrigin: '0 0%', display: 'block' })),\n state('top', style({ transform: 'scaleY(0.9999) translateY(0)', opacity: 1, transformOrigin: '0 100%', display: 'block' })),\n transition('void => bottom', [\n style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(-4px)' }),\n animate(`${duration} ${easeOut}`)\n ]),\n transition('bottom => void', [\n animate(`${duration} ${easeIn}`,\n style({ transform: 'scaleY(0.8) translateY(-4px)', opacity: 0, transformOrigin: '0 0%', display: 'none' })),\n ]),\n transition('void => top', [\n style({ transform: 'scaleY(0.8) translateY(4px)', opacity: 0.8, transformOrigin: '0 100%', display: 'block' }),\n animate(`${duration} ${easeOut}`)]),\n transition('top => void', [\n animate(`${duration} ${easeIn}`,\n style({ transform: 'scaleY(0.8) translateY(4px)', opacity: 0, transformOrigin: '0 100%', display: 'none' }))\n ])]);\n","import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\n\nconst easeIn = AnimationCurves.EASE_IN;\nconst easeOut = AnimationCurves.EASE_OUT;\nconst duration = AnimationDuration.FAST;\nexport const scaleInOut: AnimationTriggerMetadata = trigger('scaleInOut', [\n transition(':enter', [\n style({ opacity: 0, transform: 'scale(0.8)' }),\n animate(`${duration} ${easeIn}`, style({ opacity: 1, transform: 'scale(1)' })),\n ]),\n transition(':leave', [\n // style({ opacity: 1, transform: 'scale(1)' }),\n animate(`${duration} ${easeOut}`, style({ opacity: 0, transform: 'scale(0.8)' })),\n ]),\n]);\n","import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\nconst easeIn = AnimationCurves.EASE_IN;\nconst easeOut = AnimationCurves.EASE_OUT;\nconst duration = AnimationDuration.SLOW;\n\nexport const flyInOut: AnimationTriggerMetadata = trigger('flyInOut', [\n state('left-void', style({ transform: 'translateX(-100%)', opacity: 0 })),\n state('left-in', style({ transform: 'translateX(0)', opacity: 1 })),\n state('right-void', style({ transform: 'translateX(100%)', opacity: 0.8 })),\n state('right-in', style({ transform: 'translateX(0)', opacity: 1 })),\n // 解决初始化动效为'void'而非'left/right-void'\n transition('void => left-in', [\n style({ transform: 'translateX(-100%)', opacity: 0.8 }),\n animate(`${duration} ${easeOut}`, style({ transform: 'translateX(0)', opacity: 1 })),\n ]),\n transition('void => right-in', [\n style({ transform: 'translateX(100%)', opacity: 0.8 }),\n animate(`${duration} ${easeOut}`, style({ transform: 'translateX(0)', opacity: 1 })),\n ]),\n transition('left-void => left-in', [animate(`${duration} ${easeOut}`)]),\n transition('right-void => right-in', [animate(`${duration} ${easeOut}`)]),\n transition('left-in => left-void', [animate(`${duration} ${easeIn}`)]),\n transition('right-in => right-void', [animate(`${duration} ${easeIn}`)]),\n]);\n","/** @deprecated use collapseForDomDestroy to replace */\n\nimport {\n animate,\n AnimationTriggerMetadata,\n state,\n style,\n transition,\n trigger\n} from '@angular/animations';\n\nexport const openClose: AnimationTriggerMetadata = trigger('openClose', [\n state('void', style({ transform: 'scaleY(0)', height: 0, opacity: 0, transformOrigin: '50% 0% 0px' })),\n state('open', style({ transform: 'scaleY(0.9999)', opacity: 1, transformOrigin: '50% 0% 0px' })),\n transition('void => open', [animate('300ms ease-in-out')]),\n transition('open => void', [animate('300ms ease-in-out')]),\n]);\n","/**\n * @deprecated\n */\nimport { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';\n\nconst isIE = typeof window !== 'undefined' && (window.navigator.userAgent.indexOf('MSIE ') > -1 ||\n window.navigator.userAgent.indexOf('Trident') > -1);\n\nconst ANIMATION = [\n state('void', style({transform: 'scale(0)', transformOrigin: '50% 50%'})),\n state('in', style({transform: 'scale(1)', transformOrigin: '50% 50%'})),\n transition('void => in', [\n animate('200ms cubic-bezier(0.23, 1, 0.32, 1)')]),\n transition('in => void', [\n animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')]),\n];\n\nif (isIE) {\n ANIMATION.splice(2, 2); // remove last two animation transitions\n}\n\nexport const popInOut: AnimationTriggerMetadata = trigger('popInOut', ANIMATION);\n","export function scrollAnimate(target, currentTopValue, targetTopValue, timeGap = 40, scrollTime = 450, callback?) {\n if (typeof document === 'undefined' || typeof window === 'undefined' || !target) {\n return;\n }\n const startTimeStamp = Date.now();\n const drawAnimateFrame = () => {\n const currentTime = Date.now() - startTimeStamp;\n if (currentTime - timeGap > scrollTime) {\n target.scrollTop = targetTopValue;\n if (target === document.documentElement) {\n // 兼容写法，老浏览器/老API模式需要document.body滚动，新的需要documentElement滚动\n document.body.scrollTop = targetTopValue;\n }\n if (callback) {\n callback();\n }\n } else {\n const tempTopValue = easeInOutCubic(currentTime, currentTopValue, targetTopValue, scrollTime);\n target.scrollTop = tempTopValue;\n if (target === document.documentElement) {\n document.body.scrollTop = tempTopValue;\n }\n setTimeout(() => {\n requestAnimationFrame(drawAnimateFrame);\n }, timeGap);\n }\n };\n requestAnimationFrame(drawAnimateFrame);\n}\n\nexport function easeInOutCubic(t: number, b: number, c: number, d: number): number {\n const cc = c - b;\n let tt = t / (d / 2);\n if (tt < 1) {\n return ((cc / 2) * tt * tt * tt + b);\n } else {\n // eslint-disable-next-line no-return-assign\n return ((cc / 2) * ((tt -= 2) * tt * tt + 2) + b);\n }\n}\n","import { animate, AnimationTriggerMetadata, group, state, style, transition, trigger } from '@angular/animations';\nimport { AnimationCurves, AnimationDuration } from './animationParameters';\n\nconst easeOut = AnimationCurves.EASE_OUT;\nconst easeIn = AnimationCurves.EASE_IN;\nconst linear = AnimationCurves.LINEAR;\nconst duration = AnimationDuration.FAST;\n\nexport const wipeInOutAnimation: AnimationTriggerMetadata = trigger('wipeInOutAnimation', [\n state('void', style({ opacity: 0.2, transform: 'translateY(-24px)' })),\n state('in', style({ opacity: 1, transform: 'unset' })),\n transition('void => in', group([\n animate(`${duration} ${easeOut}`, style({ opacity: 1 })),\n animate(`${duration} ${linear}`, style({ transform: 'unset' }))\n ])),\n transition('in => void', group([\n animate(`${duration} ${easeIn}`, style({ opacity: 0.2 })),\n animate(`${duration} ${linear}`, style({ transform: 'translateY(-24px)' }))\n ])),\n]);\n","import { ElementRef } from '@angular/core';\n\nexport function formWithDropDown(ele: ElementRef): ElementRef['nativeElement'] {\n if (ele) {\n if (!ele.nativeElement.classList.contains('devui-dropdown-origin')) {\n const parentEle = ele.nativeElement.parentElement;\n if (parentEle && parentEle.classList.contains('devui-dropdown-origin')) {\n return ele.nativeElement.parentElement;\n } else {\n return;\n }\n } else {\n return ele.nativeElement;\n }\n }\n}\n\nexport function addClassToOrigin(ele: ElementRef): void {\n const originEle = formWithDropDown(ele);\n if (originEle && !originEle.classList.contains('devui-dropdown-origin-open')) {\n originEle.classList.add('devui-dropdown-origin-open');\n }\n}\n\nexport function removeClassFromOrigin(ele: ElementRef): void {\n const originEle = formWithDropDown(ele);\n if (originEle && originEle.classList.contains('devui-dropdown-origin-open')) {\n originEle.classList.remove('devui-dropdown-origin-open');\n }\n}\n","import { ConnectedPosition } from '@angular/cdk/overlay';\r\n\r\n// Block application conditions are to be determined and are not open in APIs.\r\nexport type AppendToBodyScrollStrategyType = 'block' | 'close' | 'noop' | 'reposition';\r\nexport type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';\r\nexport const AppendToBodyDirectionsConfig: {\r\n [p in AppendToBodyDirection]: ConnectedPosition;\r\n} = {\r\n rightDown: {\r\n originX: 'start',\r\n originY: 'bottom',\r\n overlayX: 'start',\r\n overlayY: 'top',\r\n },\r\n rightUp: {\r\n originX: 'start',\r\n originY: 'top',\r\n overlayX: 'start',\r\n overlayY: 'bottom',\r\n },\r\n leftUp: {\r\n originX: 'end',\r\n originY: 'top',\r\n overlayX: 'end',\r\n overlayY: 'bottom',\r\n },\r\n leftDown: {\r\n originX: 'end',\r\n originY: 'bottom',\r\n overlayX: 'end',\r\n overlayY: 'top',\r\n },\r\n centerDown: {\r\n originX: 'center',\r\n originY: 'bottom',\r\n overlayX: 'center',\r\n overlayY: 'top',\r\n },\r\n centerUp: {\r\n originX: 'center',\r\n originY: 'top',\r\n overlayX: 'center',\r\n overlayY: 'bottom',\r\n },\r\n};\r\n","import * as datefns from 'date-fns';\n\nexport function isValidDate(date: Date): boolean {\n return datefns.isDate(date) && !isNaN(date.getTime());\n}\n\nexport function parseDate(date: any, pattern?: string): Date {\n if (!date) {\n return null;\n }\n\n if (datefns.isDate(date)) {\n return date;\n }\n const parsedDate = pattern ? datefns.parse(date, pattern, new Date())\n : datefns.parseISO(date);\n return isValidDate(parsedDate) ? parsedDate : new Date(date);\n}\n\nexport function formatDate(date: Date, pattern = 'y-MM-dd HH:mm:ss'): string {\n return isValidDate(date) ? datefns.format(date, pattern) : '';\n}\n","import { I18nFormat } from 'ng-devui/i18n';\nimport { DateConverter } from './date-converter';\nimport { parseDate } from './date-utils';\n\nexport class DefaultDateConverter implements DateConverter {\n\n parse(date: any, pattern?: string, locale?: string): Date {\n return parseDate(date, pattern);\n }\n\n format(date: Date, pattern?: string, locale?: string): string {\n return I18nFormat.formatDate(date, pattern, locale);\n }\n\n formatDateTime(date: Date, pattern?: string, locale?: string): string {\n return I18nFormat.formatDateTimeWithoutGMT(date, pattern, locale);\n }\n}\n","import { ElementRef } from '@angular/core';\nimport { WindowRef } from 'ng-devui/window-ref';\n\nexport function centerWindowPosition(elementRef: ElementRef, windowRef: WindowRef): { top?: number; left?: number } {\n if (!elementRef.nativeElement || !elementRef.nativeElement.getBoundingClientRect) {\n return {};\n }\n\n const rect = elementRef.nativeElement.getBoundingClientRect();\n const elmHeight = rect.height;\n const elmWidth = rect.width;\n const winHeight = windowRef.innerHeight;\n const winWidth = windowRef.innerWidth;\n\n return {\n left: (winWidth - elmWidth) / 2,\n top: (winHeight - elmHeight) / 2\n };\n}\n\nexport function stopPropagationIfExist($event?: Event) {\n if ($event) {\n $event.stopPropagation();\n }\n}\n","export function unshiftString(str: string, targetLength: number, addString: string): string {\n targetLength = targetLength > 0 ? targetLength : 0;\n addString = String((typeof addString !== 'undefined' && typeof addString !== 'object') ? addString : ' ');\n str = (str === undefined || str === null) ? '' : String(str);\n if (str.length >= targetLength) {\n return String(str);\n } else {\n targetLength = targetLength - str.length;\n if (targetLength > addString.length) {\n addString += addString.repeat(targetLength / addString.length);\n }\n return addString.slice(0, targetLength) + String(str);\n }\n}\n","import { InjectionToken } from '@angular/core';\r\nimport { AppendToBodyScrollStrategyType } from '../cdk-overlay-config.type';\r\nexport interface IGlobalConfig {\r\n showAnimation?: boolean;\r\n showGlowStyle?: boolean;\r\n bodyScrollable?: boolean;\r\n styleType?: 'default' | 'gray';\r\n size?: 'xs' | 'sm' | 'md' | 'lg';\r\n appendToBodyScrollStrategy?: AppendToBodyScrollStrategyType;\r\n}\r\nexport type GlobalConfig = IGlobalConfig;\r\nexport interface TooltipConfig extends IGlobalConfig {\r\n mouseEnterDelay?: number;\r\n mouseLeaveDelay?: number;\r\n}\r\nexport type PanelConfig = IGlobalConfig;\r\nexport type ModalConfig = IGlobalConfig;\r\nexport type DropdownConfig = IGlobalConfig;\r\nexport type AccordionConfig = IGlobalConfig;\r\nexport type TwodatepickerConfig = IGlobalConfig;\r\nexport type PopoverConfig = IGlobalConfig;\r\nexport type SelectConfig = IGlobalConfig;\r\nexport type TreeselectConfig = IGlobalConfig;\r\nexport type PopperConfig = IGlobalConfig;\r\nexport type TreeConfig = IGlobalConfig;\r\nexport type EditableselectConfig = IGlobalConfig;\r\nexport type AutocompleteConfig = IGlobalConfig;\r\nexport type MultiautocompleteConfig = IGlobalConfig;\r\nexport type DatepickerConfig = IGlobalConfig;\r\nexport type CascaderConfig = IGlobalConfig;\r\nexport type TagsinputConfig = IGlobalConfig;\r\nexport type TimepickerConfig = IGlobalConfig;\r\nexport type CheckboxConfig = IGlobalConfig;\r\nexport type TypographyConfig = IGlobalConfig;\r\nexport interface DevUIGlobalConfig {\r\n tooltip?: TooltipConfig;\r\n dropdown?: DropdownConfig;\r\n accordion?: AccordionConfig;\r\n popover?: PopoverConfig;\r\n select?: SelectConfig;\r\n modal?: ModalConfig;\r\n treeselect?: TreeselectConfig;\r\n popper?: PopperConfig;\r\n tree?: TreeConfig;\r\n editableselect?: EditableselectConfig;\r\n autocomplete?: AutocompleteConfig;\r\n multiautocomplete?: MultiautocompleteConfig;\r\n datepicker?: DatepickerConfig;\r\n daterangepicker?: DatepickerConfig;\r\n datepickerappendtobody?: DatepickerConfig;\r\n twodatepicker?: DatepickerConfig;\r\n cascader?: CascaderConfig;\r\n tagsinput?: TagsinputConfig;\r\n timepicker?: TimepickerConfig;\r\n checkbox?: CheckboxConfig;\r\n checkboxgroup?: CheckboxConfig;\r\n panel?: PanelConfig;\r\n typography?: TypographyConfig;\r\n global?: GlobalConfig;\r\n}\r\nexport type DevUIGlobalConfigKey = keyof DevUIGlobalConfig;\r\nexport type DevUIGlobalInsideConfigKey = keyof DevUIGlobalConfig['global'];\r\nexport const DevUIGlobalConfigToken = new InjectionToken<DevUIGlobalConfig>('DevUI_global_config');\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { filter, mapTo } from 'rxjs/operators';\r\nimport { DevUIGlobalConfig, DevUIGlobalConfigKey, DevUIGlobalConfigToken, DevUIGlobalInsideConfigKey } from './config';\r\n\r\nconst isDefined = function (value?: any): boolean {\r\n return value !== undefined;\r\n};\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class DevConfigService {\r\n private configUpdated$ = new Subject<keyof DevUIGlobalConfig>();\r\n private config: DevUIGlobalConfig;\r\n\r\n constructor(@Optional() @Inject(DevUIGlobalConfigToken) defaultConfig?: DevUIGlobalConfig) {\r\n this.config = defaultConfig || {};\r\n }\r\n\r\n getConfigForComponent<T extends DevUIGlobalConfigKey>(componentName: T): DevUIGlobalConfig[T] {\r\n return this.config[componentName];\r\n }\r\n\r\n getConfigForApi<T extends DevUIGlobalInsideConfigKey>(api: T): DevUIGlobalConfig['global'][T] {\r\n const globalConfig = this.config.global || {};\r\n const apiConfig = globalConfig[api];\r\n return apiConfig;\r\n }\r\n\r\n getConfigChangeEventForComponent(componentName: DevUIGlobalConfigKey): Observable<void> {\r\n return this.configUpdated$.pipe(\r\n filter((n) => n === componentName),\r\n mapTo(undefined)\r\n );\r\n }\r\n\r\n set<T extends DevUIGlobalConfigKey>(componentName: T, value: DevUIGlobalConfig[T]): void {\r\n this.config[componentName] = { ...this.config[componentName], ...value };\r\n this.configUpdated$.next(componentName);\r\n }\r\n}\r\n\r\nexport function WithConfig<T>(propertyKey?: T | string) {\r\n return function ConfigDecorator(target: any, propName: any, originalDescriptor?: TypedPropertyDescriptor<T>): any {\r\n const privatePropName = `$$__assignedValue__${propName}`;\r\n if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {\r\n console.warn(`The prop \"${privatePropName}\" is already exist, it will be overrided by withConfig decorator.`);\r\n }\r\n Object.defineProperty(target, privatePropName, {\r\n configurable: true,\r\n writable: true,\r\n enumerable: false,\r\n });\r\n return {\r\n get(): T | undefined {\r\n const originalValue = originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];\r\n const assignedByUser = ((this.assignmentCount || {})[propName] || 0) > 1;\r\n if (assignedByUser && isDefined(originalValue)) {\r\n return originalValue;\r\n }\r\n if (JSON.stringify(this.devConfigService.config) === '{}') {\r\n return originalValue;\r\n }\r\n\r\n let name = this.constructor.name;\r\n name = name.replace('Directive', '');\r\n name = name.replace('Component', '');\r\n name = name.toLowerCase();\r\n\r\n const componentConfig = this.devConfigService.config[name] || {};\r\n const configValue = componentConfig[propName];\r\n const globalConfig = this.devConfigService.config.global || {};\r\n const apiConfig = globalConfig[propName];\r\n const result = isDefined(apiConfig) ? apiConfig : originalValue;\r\n const ret = isDefined(configValue) ? configValue : result;\r\n return ret;\r\n },\r\n set(value?: T): void {\r\n this.assignmentCount = this.assignmentCount || {};\r\n this.assignmentCount[propName] = (this.assignmentCount[propName] || 0) + 1;\r\n if (originalDescriptor && originalDescriptor.set) {\r\n originalDescriptor.set.bind(this)(value);\r\n }\r\n this[privatePropName] = value;\r\n },\r\n configurable: true,\r\n enumerable: true,\r\n };\r\n };\r\n}\r\n","import { DOCUMENT } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@Component({\n selector: 'd-highlight',\n template: ``,\n styleUrls: ['./highlight.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HighlightComponent implements OnChanges {\n @HostBinding('style.display') display = 'inline';\n @Input() value: string;\n @Input() term: string;\n /**\n * @deprecated\n */\n @Input() highlightClass = 'devui-match-highlight';\n document: Document;\n\n constructor(private translateHtml: DomSanitizer, private eleRef: ElementRef, @Inject(DOCUMENT) private doc: any) {\n this.document = this.doc;\n }\n ngOnChanges(changes: SimpleChanges): void {\n this.addDom(this.value, this.term);\n }\n addDom(value: string, term: string): any {\n if (value && term) {\n this.highlight(value, term);\n } else {\n const container = this.eleRef.nativeElement;\n this.emptyChildren(container);\n container.textContent = value;\n }\n }\n emptyChildren(container) {\n while (container.hasChildNodes()) {\n container.removeChild(container.firstChild);\n }\n }\n\n highlight(value: string, term: string) {\n const container = this.eleRef.nativeElement;\n this.emptyChildren(container);\n const reg = (str) => str.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '\\\\$&');\n const regExp = new RegExp('(' + reg(term) + ')', 'gi');\n const temp = value.split(regExp);\n const createHighLight = (text) => {\n const spanDOM = this.document.createElement('span');\n spanDOM.classList.add('devui-match-highlight');\n spanDOM.textContent = text;\n return spanDOM;\n };\n\n temp.forEach((element, index) => {\n if (index % 2 === 0) {\n container.appendChild(this.document.createTextNode(element));\n } else {\n container.appendChild(createHighLight(element));\n }\n });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { HighlightComponent } from './highlight.component';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [HighlightComponent],\n exports: [HighlightComponent]\n})\nexport class HighlightModule { }\n","import { Pipe, PipeTransform, TemplateRef } from '@angular/core';\n\n@Pipe({\n name: 'dIsTemplatePipe',\n})\nexport class IsTemplatePipe implements PipeTransform {\n transform(content: string | TemplateRef<any>, defaultTemplate: TemplateRef<any>): TemplateRef<any> {\n return content instanceof TemplateRef ? content : defaultTemplate;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { IsTemplatePipe } from './is-template.pipe';\n\n@NgModule({\n declarations: [IsTemplatePipe],\n exports: [IsTemplatePipe],\n})\nexport class IsTemplateModule {}\n","import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';\r\nimport { Subscription, fromEvent } from 'rxjs';\r\nimport { debounceTime, distinctUntilChanged } from 'rxjs/operators';\r\n\r\n@Directive({ selector: '[dLazyLoad]' })\r\nexport class LazyLoadDirective implements OnDestroy, OnChanges, AfterViewInit {\r\n // 启用懒加载，默认不启用\r\n @Input() enableLazyLoad = false;\r\n // 懒加载模式，默认列表模式\r\n @Input() contentMode: 'img' | 'list' = 'list';\r\n // 滚动监听的目标，默认是宿主，\r\n @Input() target: HTMLElement | Window;\r\n // 图片懒加载模式的图片地址\r\n @Input() imgLoadSrc: string;\r\n // 懒加载滚动方向\r\n @Input() direction: 'vertical' | 'horizontal' = 'vertical';\r\n // 加载更多\r\n @Output() loadMore = new EventEmitter<any>();\r\n\r\n scrollSubscription: Subscription;\r\n\r\n // 触发懒加载的距离\r\n loadFactor = 5;\r\n\r\n constructor(private el: ElementRef) {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n const element = this.target ? this.target : this.el.nativeElement;\r\n if (changes?.enableLazyLoad) {\r\n if (changes.enableLazyLoad.currentValue) {\r\n const scrollEvent = fromEvent(element, 'scroll');\r\n let scrollEventFormat = scrollEvent;\r\n if (this.contentMode === 'list') {\r\n scrollEventFormat = scrollEvent.pipe(debounceTime(300), distinctUntilChanged());\r\n }\r\n this.scrollSubscription = scrollEventFormat.subscribe((event) => this.scrollList(event));\r\n } else if (this.scrollSubscription) {\r\n this.scrollSubscription.unsubscribe();\r\n } else {\r\n return;\r\n }\r\n }\r\n }\r\n\r\n ngAfterViewInit() {\r\n if (this.contentMode === 'img') {\r\n setTimeout(() => {\r\n const target = this.target ? this.target : this.el.nativeElement;\r\n const mockEvent = { target };\r\n this.scrollList(mockEvent);\r\n });\r\n }\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.scrollSubscription) {\r\n this.scrollSubscription.unsubscribe();\r\n }\r\n }\r\n\r\n scrollList(event) {\r\n const targetEl = event.target.scrollingElement ? event.target.scrollingElement : event.target;\r\n const { clientWidth, clientHeight, scrollLeft, scrollTop, scrollWidth, scrollHeight } = targetEl;\r\n if (this.contentMode === 'img') {\r\n const rect = this.el.nativeElement.getBoundingClientRect();\r\n const imgCondition =\r\n this.direction === 'vertical'\r\n ? rect.top >= 0 && clientHeight >= rect.top + this.loadFactor\r\n : rect.left >= 0 && clientWidth >= rect.left + this.loadFactor;\r\n if (imgCondition) {\r\n if (this.imgLoadSrc) {\r\n this.el.nativeElement.src = this.imgLoadSrc;\r\n }\r\n this.loadMore.emit(event);\r\n this.scrollSubscription.unsubscribe();\r\n }\r\n } else {\r\n const etcCondition =\r\n this.direction === 'vertical'\r\n ? scrollTop !== 0 && scrollTop + clientHeight + this.loadFactor >= scrollHeight\r\n : scrollLeft !== 0 && scrollLeft + clientWidth + this.loadFactor >= scrollWidth;\r\n if (etcCondition) {\r\n this.loadMore.emit(event);\r\n }\r\n }\r\n }\r\n}\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { LazyLoadDirective } from './lazy-load.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [LazyLoadDirective],\n exports: [LazyLoadDirective]\n})\nexport class LazyLoadModule { }\n","import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { delay, filter } from 'rxjs/operators';\n\n@Directive({\n selector: '[dObserveVisibility]',\n})\nexport class ObserveVisibilityDirective\nimplements OnDestroy, OnInit, AfterViewInit {\n @Input() debounceTime = 0;\n @Input() threshold = 1;\n @Input() root: HTMLElement;\n @Input() rootMargin = '0px';\n @Output() show = new EventEmitter<HTMLElement>();\n @Output() hide = new EventEmitter<HTMLElement>();\n\n private observer: IntersectionObserver | undefined;\n private subject$ = new Subject<{\n entry: IntersectionObserverEntry;\n observer: IntersectionObserver;\n }>();\n\n constructor(private element: ElementRef) { }\n\n ngOnInit() {\n this.createObserver();\n }\n\n ngAfterViewInit() {\n this.startObservingElements();\n }\n\n ngOnDestroy() {\n if (this.observer) {\n this.observer.disconnect();\n this.observer = undefined;\n }\n\n this.subject$.next({entry: null, observer: null});\n this.subject$.complete();\n }\n\n private isVisible(element: HTMLElement) {\n return new Promise(resolve => {\n const observer = new IntersectionObserver(([entry]) => {\n resolve(entry.intersectionRatio === 1);\n observer.disconnect();\n });\n\n observer.observe(element);\n });\n }\n\n private createObserver() {\n const options = {\n root: this.root,\n rootMargin: this.rootMargin,\n threshold: this.threshold,\n };\n\n const isIntersecting = (entry: IntersectionObserverEntry) =>\n entry.isIntersecting || entry.intersectionRatio > 0;\n\n this.observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (isIntersecting(entry)) {\n this.subject$.next({ entry, observer });\n }\n });\n }, options);\n }\n\n private startObservingElements() {\n if (!this.observer) {\n return;\n }\n\n this.observer.observe(this.element.nativeElement);\n\n this.subject$\n .pipe(delay(this.debounceTime), filter(Boolean))\n .subscribe(async ({ entry, observer }) => {\n const target = entry.target as HTMLElement;\n const isStillVisible = await this.isVisible(target);\n\n if (isStillVisible) {\n this.show.emit(target);\n } else {\n this.hide.emit(target);\n }\n });\n }\n}\n\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ObserveVisibilityDirective } from './observer-visibility.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [ObserveVisibilityDirective],\n exports: [ObserveVisibilityDirective]\n})\nexport class ObserverVisibilityModule { }\n","import { Directive, EmbeddedViewRef, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { isEqual } from 'lodash-es';\n\n@Directive({\n selector: '[dStrTplOutlet]'\n})\nexport class StrTplOutletDirective<T = Record<string, any>> implements OnChanges {\n private embeddedViewRef: EmbeddedViewRef<T> | null = null;\n @Input() dStrTplOutlet: TemplateRef<T> | string;\n @Input() dStrTplOutletContext: T;\n constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<T>) { }\n ngOnChanges(changes: SimpleChanges): void {\n const { dStrTplOutlet, dStrTplOutletContext } = changes;\n if (dStrTplOutlet) {\n this.viewContainer.clear();\n const template = (this.dStrTplOutlet instanceof TemplateRef) ? this.dStrTplOutlet : this.templateRef;\n this.embeddedViewRef = this.viewContainer.createEmbeddedView(template, this.dStrTplOutletContext);\n }\n\n if (dStrTplOutletContext && !dStrTplOutletContext.firstChange && this.embeddedViewRef) {\n const isTemplateRef = this.dStrTplOutlet instanceof TemplateRef;\n const newCtx = isTemplateRef ? this.dStrTplOutletContext : {};\n const oldCtx = this.embeddedViewRef.context;\n if (!isEqual(newCtx, oldCtx)) {\n for (const propName of Object.keys(newCtx)) {\n oldCtx[propName] = newCtx[propName];\n }\n }\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { StrTplOutletDirective } from './str-tpl-outlet.directive';\n\n@NgModule({\n declarations: [StrTplOutletDirective],\n exports: [StrTplOutletDirective]\n })\nexport class StrTplOutletModule { }\n","import { DOCUMENT } from '@angular/common';\r\nimport {\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n Component,\r\n ElementRef,\r\n EventEmitter,\r\n Inject,\r\n Input,\r\n NgZone,\r\n OnDestroy,\r\n Output,\r\n Renderer2,\r\n ViewChild\r\n} from '@angular/core';\r\nimport { createPopper } from '@popperjs/core';\r\nimport { Observable, Subject } from 'rxjs';\r\nimport { AnimationCurves, AnimationDuration } from '../animations';\r\n\r\ninterface ExtraSetConfig {\r\n extraWidth?: number;\r\n offset?: string;\r\n}\r\n\r\n@Component({\r\n selector: 'd-popper-component',\r\n templateUrl: './popper.component.html',\r\n styleUrls: [`./popper.component.scss`],\r\n})\r\nexport class PopperComponent implements AfterViewInit, OnDestroy {\r\n\r\n get open() {\r\n return this._isOpen;\r\n }\r\n\r\n @Input() set open(value) {\r\n if (this._isOpen === value) { return; }\r\n this.animate = true;\r\n if (value) {\r\n this.show();\r\n } else {\r\n this.close();\r\n }\r\n this._isOpen = value;\r\n\r\n PopperComponent.nextTick(() => {\r\n this.openChange.emit(value);\r\n this.setBlurListener();\r\n });\r\n }\r\n @Input() fluidPopper = true;\r\n @Input() poppoverAppendDirection = 'bottom';\r\n @Input() appendTo = 'body';\r\n @Input() extraConfig: ExtraSetConfig;\r\n @Input() showAnimation = true;\r\n protected popper = null;\r\n protected _isOpen: any = false;\r\n protected animate: boolean;\r\n protected popperDirection: string;\r\n protected directionAnimationTransformOrigin = {\r\n 'top': '0 100%',\r\n 'bottom': '0 0'\r\n };\r\n protected popperNode;\r\n protected popperParent;\r\n private directionSubject = new Subject<string>();\r\n document: Document;\r\n\r\n @Output() openChange = new EventEmitter<any>();\r\n @ViewChild('popperActivator', { static: true }) popperActivator: ElementRef;\r\n @ViewChild('popperContainer', { static: true }) popperContainer: ElementRef;\r\n\r\n static nextTick(fn) {\r\n // Force to run fn after current data changed.\r\n setTimeout(() => fn.bind(this)());\r\n }\r\n onDocumentClick = ($event: MouseEvent) => {\r\n if (!!this.appendTo && this.popperContainer.nativeElement !== $event.target &&\r\n !this.popperContainer.nativeElement.contains($event.target)) {\r\n this.open = false;\r\n } else if (!this.appendTo && this.open && !this.el.nativeElement.contains($event.target)) {\r\n this.open = false;\r\n }\r\n };\r\n private blockEvent = ($event: MouseEvent) => {\r\n $event.preventDefault();\r\n $event.stopPropagation();\r\n };\r\n\r\n constructor(protected el: ElementRef, protected renderer: Renderer2, protected ngZone: NgZone,\r\n protected changeDetectorRef: ChangeDetectorRef, @Inject(DOCUMENT) private doc: any) {\r\n this.document = this.doc;\r\n }\r\n\r\n show() {\r\n // Append to selector or original parent.\r\n if (this.appendTo) {\r\n if (this.fluidPopper) {\r\n let popperWidth = this.popperActivator.nativeElement && this.popperActivator.nativeElement.offsetWidth;\r\n if (this.extraConfig && this.extraConfig.extraWidth) {\r\n popperWidth = popperWidth + this.extraConfig.extraWidth;\r\n }\r\n const firstEle = this.popperContainer.nativeElement.firstElementChild;\r\n if (firstEle.classList.contains('devui-search-container')) {\r\n for (const child of this.popperContainer.nativeElement.children) {\r\n child.style.width = `${popperWidth}px`;\r\n }\r\n } else {\r\n firstEle.style.width = `${popperWidth}px`;\r\n }\r\n }\r\n this.attachPopperContainerToSelector(this.appendTo);\r\n } else {\r\n this.attachPopperContainerToNode(this.popperParent);\r\n }\r\n this.popper = this.createCustomPopper();\r\n this.renderer.setStyle(this.popperContainer.nativeElement, 'display', 'block');\r\n }\r\n\r\n private close() {\r\n const popperContainer = this.popperContainer.nativeElement;\r\n this.setTransition('close');\r\n // For IE 11/Edge\r\n if (popperContainer.style.transform.match(/scale3d\$1, 1, 1\$/)) {\r\n // Replace transform open state with close state\r\n this.renderer.setStyle(popperContainer, 'transform',\r\n popperContainer.style.transform.replace('scale3d(1, 1, 1)', 'scale3d(1, 0.8, 1)'));\r\n } else {\r\n // perspective(1px) solves pixel shift caused by webkit transform\r\n this.renderer.setStyle(popperContainer, 'transform',\r\n popperContainer.style.transform + ` scale3d(1, 0.8, 1) perspective(1px)`);\r\n }\r\n // Set container to transparent\r\n this.renderer.setStyle(popperContainer, 'opacity', 0.8);\r\n\r\n // Can't use bind(this) since it calls itself\r\n const that = this;\r\n const handler = (e) => {\r\n if (!that.open && that.popper) {\r\n // Set final state of container to invisible\r\n that.renderer.setStyle(popperContainer, 'display', 'none');\r\n that.animate = false;\r\n // Remove transition\r\n that.setTransition();\r\n that.popper.destroy();\r\n that.popper = null;\r\n that.detachPopperContainer();\r\n }\r\n e.currentTarget.removeEventListener(e.type, handler);\r\n };\r\n if (this.showAnimation) {\r\n this.popperContainer.nativeElement.addEventListener('transitionend', handler);\r\n } else {\r\n that.renderer.setStyle(popperContainer, 'display', 'none');\r\n that.animate = false;\r\n that.popper.destroy();\r\n that.popper = null;\r\n that.detachPopperContainer();\r\n }\r\n }\r\n\r\n setBlurListener() {\r\n this.ngZone.runOutsideAngular(() => {\r\n if (this.open) {\r\n this.document.addEventListener('click', this.onDocumentClick);\r\n this.popperContainer.nativeElement.addEventListener('click', this.blockEvent);\r\n } else {\r\n this.document.removeEventListener('click', this.onDocumentClick);\r\n this.popperContainer.nativeElement.removeEventListener('click', this.blockEvent);\r\n }\r\n });\r\n }\r\n\r\n private applyTransitionStyle = (data) => {\r\n const optionsContainer = this.popperContainer.nativeElement;\r\n this.updateContainerTransitionDirection(data?.state?.modifiersData?.flip?._skip);\r\n if (this.animate) {\r\n // perspective(1px) solves pixel shift caused by webkit transform\r\n this.renderer.setStyle(optionsContainer, 'transform',\r\n optionsContainer.style.transform +\r\n ` scale3d(1, 0.8, 1) perspective(1px) ${this.popperDirection === 'bottom' ? 'translateY(-4px)' : 'translateY(4px)'}`);\r\n // Set container init state to transparent as beginning of the transition.\r\n this.renderer.setStyle(optionsContainer, 'opacity', 0);\r\n PopperComponent.nextTick(() => {\r\n this.setTransition('open');\r\n const that = this;\r\n const handler = (e) => {\r\n // remove transition\r\n that.setTransition();\r\n e.currentTarget.removeEventListener(e.type, handler);\r\n };\r\n\r\n optionsContainer.addEventListener('transitionend', handler);\r\n this.renderer.setStyle(optionsContainer, 'transform',\r\n optionsContainer.style.transform.replace('scale3d(1, 0.8, 1)', 'scale3d(1, 1, 1)'));\r\n this.popperDirection === 'bottom' ?\r\n this.renderer.setStyle(optionsContainer, 'transform',\r\n optionsContainer.style.transform.replace('translateY(-4px)', 'translateY(0)')) :\r\n this.renderer.setStyle(optionsContainer, 'transform',\r\n optionsContainer.style.transform.replace('translateY(4px)', 'translateY(0)'));\r\n this.renderer.setStyle(optionsContainer, 'opacity', 1);\r\n this.animat