ng-devui
Version:
DevUI components based on Angular
1,104 lines (1,073 loc) • 66.9 kB
JavaScript
import { trigger, state, style, transition, animate, group } from '@angular/animations';
import * as datefns from 'date-fns';
import { I18nFormat } from 'ng-devui/i18n';
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Optional, Inject, Component, ChangeDetectionStrategy, HostBinding, Input, NgModule, TemplateRef, Pipe, EventEmitter, Directive, Output, ViewChild } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { filter, mapTo, debounceTime, distinctUntilChanged, delay } from 'rxjs/operators';
import * as i1$1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i1 from '@angular/platform-browser';
import { isEqual } from 'lodash-es';
import { createPopper } from '@popperjs/core';
class AnimationDuration {
static { this.SLOW = '0.3s'; }
static { this.BASE = '0.2s'; }
static { this.FAST = '0.1s'; }
}
class AnimationNumberDuration {
static { this.SLOW = 300; }
static { this.BASE = 200; }
static { this.FAST = 100; }
}
class AnimationCurves {
static { this.EASE_OUT = 'cubic-bezier(0.16, 0.75, 0.5, 1)'; }
static { this.EASE_IN = 'cubic-bezier(0.5, 0, 0.84, 0.25)'; }
static { this.EASE_IN_OUT = 'cubic-bezier(0.5, 0.05, 0.5, 0.95)'; }
static { this.LINEAR = 'cubic-bezier(0, 0, 1, 1)'; }
/**
* @deprecated 'EASE_IN_SMOOTH' does not match the actual bezier curve,replaced with 'EASE_IN_OUT_SMOOTH'
*/
static { this.EASE_IN_SMOOTH = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; }
static { this.EASE_IN_OUT_SMOOTH = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; }
}
const duration$6 = AnimationDuration.FAST;
const linear$1 = AnimationCurves.LINEAR;
const backdropFadeInOut = trigger('backdropAnimation', [
state('void', style({ display: 'none', opacity: 0 })),
state('in', style({ display: 'block', opacity: 1 })),
transition('void => in', [
style({ display: 'block' }),
animate(`${duration$6} ${linear$1}`, style({ opacity: 1 }))
]),
transition('in => void', group([
animate(`${duration$6} ${linear$1}`, style({ opacity: 0 }))
])),
]);
/**
* @deprecated
*/
const cornerFadeInOut = trigger('cornerFadeInOut', [
transition('void => bottom', [
style({ transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 0%', display: 'inline-block' }),
animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', style({ transform: 'scale(1)', opacity: 1, transformOrigin: '0% 0%' })),
]),
transition('bottom => void', [
style({ transform: 'scale(1)', opacity: 1, transformOrigin: '0% 0%', display: 'inline-block' }),
animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({ transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 0%' }))
]),
transition('void => top', [
style({ transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 100%', display: 'inline-block' }),
animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', style({ transform: 'scale(1)', opacity: 1, transformOrigin: '0% 100%' })),
]),
transition('top => void', [
style({ transform: 'scale(1)', opacity: 1, transformOrigin: '0% 100%', display: 'inline-block' }),
animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({ transform: 'scale(0.9)', opacity: 0, transformOrigin: '0% 100%' }))
])
]);
const easeOut$4 = AnimationCurves.EASE_OUT;
const easeIn$4 = AnimationCurves.EASE_IN;
const duration$5 = AnimationDuration.FAST;
const scaleY = 'scaleY(0.8)';
const scaleX = 'scaleX(0.8)';
const scaleY1 = 'scaleY(1)';
const scaleX1 = 'scaleX(1)';
const scaleXToVoid = 'scaleX(0.8)';
const scaleYToVoid = 'scaleY(0.8)';
const directionFadeInOut = trigger('directionFadeInOut', [
state('void', style({ opacity: 0, })),
state('bottom', style({ opacity: 1, })),
state('bottom-left', style({ opacity: 1 })),
state('bottom-right', style({ opacity: 1 })),
state('top', style({ opacity: 1 })),
state('top-left', style({ opacity: 1 })),
state('top-right', style({ opacity: 1 })),
state('left', style({ opacity: 1 })),
state('left-top', style({ opacity: 1 })),
state('left-bottom', style({ opacity: 1 })),
state('right', style({ opacity: 1 })),
state('right-top', style({ opacity: 1 })),
state('right-bottom', style({ opacity: 1 })),
// 下方
transition('* => bottom', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}` }))
]),
transition('bottom => void', [
style({ transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
transition('* => bottom-left', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}` }))
]),
transition('bottom-left => void', [
style({ opacity: 1, transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
transition('* => bottom-right', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}` }))
]),
transition('bottom-right => void', [
style({ opacity: 1, transformOrigin: '50% -8px' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
// 上方
transition('* => top', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}`, }))
]),
transition('top => void', [
style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
transition('* => top-left', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}`, }))
]),
transition('top-left => void', [
style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
transition('* => top-right', [
style({ opacity: 0.8, transform: `${scaleY}`, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleY1}`, }))
]),
transition('top-right => void', [
style({ opacity: 1, transformOrigin: '50% calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleYToVoid}`, opacity: 0.8 }))
]),
// 左方
transition('* => left', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('left => void', [
style({ opacity: 1, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0.8 }))
]),
transition('* => left-top', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('left-top => void', [
style({ opacity: 1, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0.8 }))
]),
transition('* => left-bottom', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('left-bottom => void', [
style({ opacity: 1, transformOrigin: 'calc(100% + 8px)' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0.8 }))
]),
// 右方
transition('* => right', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('right => void', [
style({ opacity: 1, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0 }))
]),
transition('* => right-top', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('right-top => void', [
style({ opacity: 1, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0.8 }))
]),
transition('* => right-bottom', [
style({ opacity: 0.8, transform: `${scaleX}`, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeOut$4}`, style({ opacity: 1, transform: `${scaleX1}` }))
]),
transition('right-bottom => void', [
style({ opacity: 1, transformOrigin: '-8px 50% ' }),
animate(`${duration$5} ${easeIn$4}`, style({ transform: `${scaleXToVoid}`, opacity: 0.8 }))
]),
]);
const easeInOut = AnimationCurves.EASE_IN_OUT;
const duration$4 = AnimationDuration.SLOW;
const expandCollapse = trigger('collapse', [
state('expanded', style({ opacity: 1, height: '*', overflow: 'hidden' })),
state('collapsed', style({ opacity: 0, height: 0, overflow: 'hidden' })),
transition('collapsed => expanded', animate(`${duration$4} ${easeInOut}`)),
transition('expanded => collapsed', animate(`${duration$4} ${easeInOut}`))
]);
const expandCollapseForDomDestroy = trigger('collapseForDomDestroy', [
transition(':enter', [
style({ opacity: 0, height: 0, overflow: 'hidden' }),
animate(`${duration$4} ${easeInOut}`, style({ opacity: 1, height: '*', overflow: 'hidden' }))
]),
transition(':leave', [
style({ opacity: 1, height: '*', overflow: 'hidden' }),
animate(`${duration$4} ${easeInOut}`, style({ opacity: 0, height: 0, overflow: 'hidden' }))
]),
]);
const collapseMotion = trigger('collapseMotion', [
state('expanded', style({ height: '*' })),
state('collapsed', style({ height: 0 })), // overflow: 'hidden'
transition('expanded => collapsed', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
transition('collapsed => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
]);
const easeIn$3 = AnimationCurves.EASE_IN;
const easeOut$3 = AnimationCurves.EASE_OUT;
const duration$3 = AnimationDuration.BASE;
const fadeInOut = trigger('fadeInOut', [
state('void', style({ transform: 'scaleY(0) translateY(-4px)', opacity: 0, transformOrigin: '0 0%', display: 'block' })),
state('bottom', style({ transform: 'scaleY(0.9999) translateY(0)', opacity: 1, transformOrigin: '0 0%', display: 'block' })),
state('top', style({ transform: 'scaleY(0.9999) translateY(0)', opacity: 1, transformOrigin: '0 100%', display: 'block' })),
transition('void => bottom', [
style({ opacity: 0.8, transform: 'scaleY(0.8) translateY(-4px)' }),
animate(`${duration$3} ${easeOut$3}`)
]),
transition('bottom => void', [
animate(`${duration$3} ${easeIn$3}`, style({ transform: 'scaleY(0.8) translateY(-4px)', opacity: 0, transformOrigin: '0 0%', display: 'none' })),
]),
transition('void => top', [
style({ transform: 'scaleY(0.8) translateY(4px)', opacity: 0.8, transformOrigin: '0 100%', display: 'block' }),
animate(`${duration$3} ${easeOut$3}`)
]),
transition('top => void', [
animate(`${duration$3} ${easeIn$3}`, style({ transform: 'scaleY(0.8) translateY(4px)', opacity: 0, transformOrigin: '0 100%', display: 'none' }))
])
]);
const easeIn$2 = AnimationCurves.EASE_IN;
const easeOut$2 = AnimationCurves.EASE_OUT;
const duration$2 = AnimationDuration.FAST;
const scaleInOut = trigger('scaleInOut', [
transition(':enter', [
style({ opacity: 0, transform: 'scale(0.8)' }),
animate(`${duration$2} ${easeIn$2}`, style({ opacity: 1, transform: 'scale(1)' })),
]),
transition(':leave', [
// style({ opacity: 1, transform: 'scale(1)' }),
animate(`${duration$2} ${easeOut$2}`, style({ opacity: 0, transform: 'scale(0.8)' })),
]),
]);
const easeIn$1 = AnimationCurves.EASE_IN;
const easeOut$1 = AnimationCurves.EASE_OUT;
const duration$1 = AnimationDuration.SLOW;
const flyInOut = trigger('flyInOut', [
state('left-void', style({ transform: 'translateX(-100%)', opacity: 0 })),
state('left-in', style({ transform: 'translateX(0)', opacity: 1 })),
state('right-void', style({ transform: 'translateX(100%)', opacity: 0.8 })),
state('right-in', style({ transform: 'translateX(0)', opacity: 1 })),
// 解决初始化动效为'void'而非'left/right-void'
transition('void => left-in', [
style({ transform: 'translateX(-100%)', opacity: 0.8 }),
animate(`${duration$1} ${easeOut$1}`, style({ transform: 'translateX(0)', opacity: 1 })),
]),
transition('void => right-in', [
style({ transform: 'translateX(100%)', opacity: 0.8 }),
animate(`${duration$1} ${easeOut$1}`, style({ transform: 'translateX(0)', opacity: 1 })),
]),
transition('left-void => left-in', [animate(`${duration$1} ${easeOut$1}`)]),
transition('right-void => right-in', [animate(`${duration$1} ${easeOut$1}`)]),
transition('left-in => left-void', [animate(`${duration$1} ${easeIn$1}`)]),
transition('right-in => right-void', [animate(`${duration$1} ${easeIn$1}`)]),
]);
/** @deprecated use collapseForDomDestroy to replace */
const openClose = trigger('openClose', [
state('void', style({ transform: 'scaleY(0)', height: 0, opacity: 0, transformOrigin: '50% 0% 0px' })),
state('open', style({ transform: 'scaleY(0.9999)', opacity: 1, transformOrigin: '50% 0% 0px' })),
transition('void => open', [animate('300ms ease-in-out')]),
transition('open => void', [animate('300ms ease-in-out')]),
]);
/**
* @deprecated
*/
const isIE = typeof window !== 'undefined' && (window.navigator.userAgent.indexOf('MSIE ') > -1 ||
window.navigator.userAgent.indexOf('Trident') > -1);
const ANIMATION = [
state('void', style({ transform: 'scale(0)', transformOrigin: '50% 50%' })),
state('in', style({ transform: 'scale(1)', transformOrigin: '50% 50%' })),
transition('void => in', [
animate('200ms cubic-bezier(0.23, 1, 0.32, 1)')
]),
transition('in => void', [
animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')
]),
];
if (isIE) {
ANIMATION.splice(2, 2); // remove last two animation transitions
}
const popInOut = trigger('popInOut', ANIMATION);
function scrollAnimate(target, currentTopValue, targetTopValue, timeGap = 40, scrollTime = 450, callback) {
if (typeof document === 'undefined' || typeof window === 'undefined' || !target) {
return;
}
const startTimeStamp = Date.now();
const drawAnimateFrame = () => {
const currentTime = Date.now() - startTimeStamp;
if (currentTime - timeGap > scrollTime) {
target.scrollTop = targetTopValue;
if (target === document.documentElement) {
// 兼容写法，老浏览器/老API模式需要document.body滚动，新的需要documentElement滚动
document.body.scrollTop = targetTopValue;
}
if (callback) {
callback();
}
}
else {
const tempTopValue = easeInOutCubic(currentTime, currentTopValue, targetTopValue, scrollTime);
target.scrollTop = tempTopValue;
if (target === document.documentElement) {
document.body.scrollTop = tempTopValue;
}
setTimeout(() => {
requestAnimationFrame(drawAnimateFrame);
}, timeGap);
}
};
requestAnimationFrame(drawAnimateFrame);
}
function easeInOutCubic(t, b, c, d) {
const cc = c - b;
let tt = t / (d / 2);
if (tt < 1) {
return ((cc / 2) * tt * tt * tt + b);
}
else {
// eslint-disable-next-line no-return-assign
return ((cc / 2) * ((tt -= 2) * tt * tt + 2) + b);
}
}
const easeOut = AnimationCurves.EASE_OUT;
const easeIn = AnimationCurves.EASE_IN;
const linear = AnimationCurves.LINEAR;
const duration = AnimationDuration.FAST;
const wipeInOutAnimation = trigger('wipeInOutAnimation', [
state('void', style({ opacity: 0.2, transform: 'translateY(-24px)' })),
state('in', style({ opacity: 1, transform: 'unset' })),
transition('void => in', group([
animate(`${duration} ${easeOut}`, style({ opacity: 1 })),
animate(`${duration} ${linear}`, style({ transform: 'unset' }))
])),
transition('in => void', group([
animate(`${duration} ${easeIn}`, style({ opacity: 0.2 })),
animate(`${duration} ${linear}`, style({ transform: 'translateY(-24px)' }))
])),
]);
function formWithDropDown(ele) {
if (ele) {
if (!ele.nativeElement.classList.contains('devui-dropdown-origin')) {
const parentEle = ele.nativeElement.parentElement;
if (parentEle && parentEle.classList.contains('devui-dropdown-origin')) {
return ele.nativeElement.parentElement;
}
else {
return;
}
}
else {
return ele.nativeElement;
}
}
}
function addClassToOrigin(ele) {
const originEle = formWithDropDown(ele);
if (originEle && !originEle.classList.contains('devui-dropdown-origin-open')) {
originEle.classList.add('devui-dropdown-origin-open');
}
}
function removeClassFromOrigin(ele) {
const originEle = formWithDropDown(ele);
if (originEle && originEle.classList.contains('devui-dropdown-origin-open')) {
originEle.classList.remove('devui-dropdown-origin-open');
}
}
const AppendToBodyDirectionsConfig = {
rightDown: {
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
},
rightUp: {
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
},
leftUp: {
originX: 'end',
originY: 'top',
overlayX: 'end',
overlayY: 'bottom',
},
leftDown: {
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
},
centerDown: {
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
},
centerUp: {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
},
};
function isValidDate(date) {
return datefns.isDate(date) && !isNaN(date.getTime());
}
function parseDate(date, pattern) {
if (!date) {
return null;
}
if (datefns.isDate(date)) {
return date;
}
const parsedDate = pattern ? datefns.parse(date, pattern, new Date())
: datefns.parseISO(date);
return isValidDate(parsedDate) ? parsedDate : new Date(date);
}
function formatDate(date, pattern = 'y-MM-dd HH:mm:ss') {
return isValidDate(date) ? datefns.format(date, pattern) : '';
}
class DefaultDateConverter {
parse(date, pattern, locale) {
return parseDate(date, pattern);
}
format(date, pattern, locale) {
return I18nFormat.formatDate(date, pattern, locale);
}
formatDateTime(date, pattern, locale) {
return I18nFormat.formatDateTimeWithoutGMT(date, pattern, locale);
}
}
function centerWindowPosition(elementRef, windowRef) {
if (!elementRef.nativeElement || !elementRef.nativeElement.getBoundingClientRect) {
return {};
}
const rect = elementRef.nativeElement.getBoundingClientRect();
const elmHeight = rect.height;
const elmWidth = rect.width;
const winHeight = windowRef.innerHeight;
const winWidth = windowRef.innerWidth;
return {
left: (winWidth - elmWidth) / 2,
top: (winHeight - elmHeight) / 2
};
}
function stopPropagationIfExist($event) {
if ($event) {
$event.stopPropagation();
}
}
function unshiftString(str, targetLength, addString) {
targetLength = targetLength > 0 ? targetLength : 0;
addString = String((typeof addString !== 'undefined' && typeof addString !== 'object') ? addString : ' ');
str = (str === undefined || str === null) ? '' : String(str);
if (str.length >= targetLength) {
return String(str);
}
else {
targetLength = targetLength - str.length;
if (targetLength > addString.length) {
addString += addString.repeat(targetLength / addString.length);
}
return addString.slice(0, targetLength) + String(str);
}
}
const DevUIGlobalConfigToken = new InjectionToken('DevUI_global_config');
const isDefined = function (value) {
return value !== undefined;
};
class DevConfigService {
constructor(defaultConfig) {
this.configUpdated$ = new Subject();
this.config = defaultConfig || {};
}
getConfigForComponent(componentName) {
return this.config[componentName];
}
getConfigForApi(api) {
const globalConfig = this.config.global || {};
const apiConfig = globalConfig[api];
return apiConfig;
}
getConfigChangeEventForComponent(componentName) {
return this.configUpdated$.pipe(filter((n) => n === componentName), mapTo(undefined));
}
set(componentName, value) {
this.config[componentName] = { ...this.config[componentName], ...value };
this.configUpdated$.next(componentName);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DevConfigService, deps: [{ token: DevUIGlobalConfigToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DevConfigService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DevConfigService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DevUIGlobalConfigToken]
}] }] });
function WithConfig(propertyKey) {
return function ConfigDecorator(target, propName, originalDescriptor) {
const privatePropName = `$$__assignedValue__${propName}`;
if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
console.warn(`The prop "${privatePropName}" is already exist, it will be overrided by withConfig decorator.`);
}
Object.defineProperty(target, privatePropName, {
configurable: true,
writable: true,
enumerable: false,
});
return {
get() {
const originalValue = originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];
const assignedByUser = ((this.assignmentCount || {})[propName] || 0) > 1;
if (assignedByUser && isDefined(originalValue)) {
return originalValue;
}
if (JSON.stringify(this.devConfigService.config) === '{}') {
return originalValue;
}
let name = this.constructor.name;
name = name.replace('Directive', '');
name = name.replace('Component', '');
name = name.toLowerCase();
const componentConfig = this.devConfigService.config[name] || {};
const configValue = componentConfig[propName];
const globalConfig = this.devConfigService.config.global || {};
const apiConfig = globalConfig[propName];
const result = isDefined(apiConfig) ? apiConfig : originalValue;
const ret = isDefined(configValue) ? configValue : result;
return ret;
},
set(value) {
this.assignmentCount = this.assignmentCount || {};
this.assignmentCount[propName] = (this.assignmentCount[propName] || 0) + 1;
if (originalDescriptor && originalDescriptor.set) {
originalDescriptor.set.bind(this)(value);
}
this[privatePropName] = value;
},
configurable: true,
enumerable: true,
};
};
}
class HighlightComponent {
constructor(translateHtml, eleRef, doc) {
this.translateHtml = translateHtml;
this.eleRef = eleRef;
this.doc = doc;
this.display = 'inline';
/**
* @deprecated
*/
this.highlightClass = 'devui-match-highlight';
this.document = this.doc;
}
ngOnChanges(changes) {
this.addDom(this.value, this.term);
}
addDom(value, term) {
if (value && term) {
this.highlight(value, term);
}
else {
const container = this.eleRef.nativeElement;
this.emptyChildren(container);
container.textContent = value;
}
}
emptyChildren(container) {
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
}
highlight(value, term) {
const container = this.eleRef.nativeElement;
this.emptyChildren(container);
const reg = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
const regExp = new RegExp('(' + reg(term) + ')', 'gi');
const temp = value.split(regExp);
const createHighLight = (text) => {
const spanDOM = this.document.createElement('span');
spanDOM.classList.add('devui-match-highlight');
spanDOM.textContent = text;
return spanDOM;
};
temp.forEach((element, index) => {
if (index % 2 === 0) {
container.appendChild(this.document.createTextNode(element));
}
else {
container.appendChild(createHighLight(element));
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HighlightComponent, selector: "d-highlight", inputs: { value: "value", term: "term", highlightClass: "highlightClass" }, host: { properties: { "style.display": "this.display" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: [":host ::ng-deep .devui-match-highlight{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightComponent, decorators: [{
type: Component,
args: [{ selector: 'd-highlight', template: ``, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host ::ng-deep .devui-match-highlight{font-weight:700}\n"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { display: [{
type: HostBinding,
args: ['style.display']
}], value: [{
type: Input
}], term: [{
type: Input
}], highlightClass: [{
type: Input
}] } });
class HighlightModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: HighlightModule, declarations: [HighlightComponent], imports: [CommonModule], exports: [HighlightComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [HighlightComponent],
exports: [HighlightComponent]
}]
}] });
class IsTemplatePipe {
transform(content, defaultTemplate) {
return content instanceof TemplateRef ? content : defaultTemplate;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsTemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IsTemplatePipe, name: "dIsTemplatePipe" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsTemplatePipe, decorators: [{
type: Pipe,
args: [{
name: 'dIsTemplatePipe',
}]
}] });
class IsTemplateModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IsTemplateModule, declarations: [IsTemplatePipe], exports: [IsTemplatePipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsTemplateModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IsTemplateModule, decorators: [{
type: NgModule,
args: [{
declarations: [IsTemplatePipe],
exports: [IsTemplatePipe],
}]
}] });
class LazyLoadDirective {
constructor(el) {
this.el = el;
// 启用懒加载，默认不启用
this.enableLazyLoad = false;
// 懒加载模式，默认列表模式
this.contentMode = 'list';
// 懒加载滚动方向
this.direction = 'vertical';
// 加载更多
this.loadMore = new EventEmitter();
// 触发懒加载的距离
this.loadFactor = 5;
}
ngOnChanges(changes) {
const element = this.target ? this.target : this.el.nativeElement;
if (changes?.enableLazyLoad) {
if (changes.enableLazyLoad.currentValue) {
const scrollEvent = fromEvent(element, 'scroll');
let scrollEventFormat = scrollEvent;
if (this.contentMode === 'list') {
scrollEventFormat = scrollEvent.pipe(debounceTime(300), distinctUntilChanged());
}
this.scrollSubscription = scrollEventFormat.subscribe((event) => this.scrollList(event));
}
else if (this.scrollSubscription) {
this.scrollSubscription.unsubscribe();
}
else {
return;
}
}
}
ngAfterViewInit() {
if (this.contentMode === 'img') {
setTimeout(() => {
const target = this.target ? this.target : this.el.nativeElement;
const mockEvent = { target };
this.scrollList(mockEvent);
});
}
}
ngOnDestroy() {
if (this.scrollSubscription) {
this.scrollSubscription.unsubscribe();
}
}
scrollList(event) {
const targetEl = event.target.scrollingElement ? event.target.scrollingElement : event.target;
const { clientWidth, clientHeight, scrollLeft, scrollTop, scrollWidth, scrollHeight } = targetEl;
if (this.contentMode === 'img') {
const rect = this.el.nativeElement.getBoundingClientRect();
const imgCondition = this.direction === 'vertical'
? rect.top >= 0 && clientHeight >= rect.top + this.loadFactor
: rect.left >= 0 && clientWidth >= rect.left + this.loadFactor;
if (imgCondition) {
if (this.imgLoadSrc) {
this.el.nativeElement.src = this.imgLoadSrc;
}
this.loadMore.emit(event);
this.scrollSubscription.unsubscribe();
}
}
else {
const etcCondition = this.direction === 'vertical'
? scrollTop !== 0 && scrollTop + clientHeight + this.loadFactor >= scrollHeight
: scrollLeft !== 0 && scrollLeft + clientWidth + this.loadFactor >= scrollWidth;
if (etcCondition) {
this.loadMore.emit(event);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LazyLoadDirective, selector: "[dLazyLoad]", inputs: { enableLazyLoad: "enableLazyLoad", contentMode: "contentMode", target: "target", imgLoadSrc: "imgLoadSrc", direction: "direction" }, outputs: { loadMore: "loadMore" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadDirective, decorators: [{
type: Directive,
args: [{ selector: '[dLazyLoad]' }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableLazyLoad: [{
type: Input
}], contentMode: [{
type: Input
}], target: [{
type: Input
}], imgLoadSrc: [{
type: Input
}], direction: [{
type: Input
}], loadMore: [{
type: Output
}] } });
class LazyLoadModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadModule, declarations: [LazyLoadDirective], imports: [CommonModule], exports: [LazyLoadDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [LazyLoadDirective],
exports: [LazyLoadDirective]
}]
}] });
class ObserveVisibilityDirective {
constructor(element) {
this.element = element;
this.debounceTime = 0;
this.threshold = 1;
this.rootMargin = '0px';
this.show = new EventEmitter();
this.hide = new EventEmitter();
this.subject$ = new Subject();
}
ngOnInit() {
this.createObserver();
}
ngAfterViewInit() {
this.startObservingElements();
}
ngOnDestroy() {
if (this.observer) {
this.observer.disconnect();
this.observer = undefined;
}
this.subject$.next({ entry: null, observer: null });
this.subject$.complete();
}
isVisible(element) {
return new Promise(resolve => {
const observer = new IntersectionObserver(([entry]) => {
resolve(entry.intersectionRatio === 1);
observer.disconnect();
});
observer.observe(element);
});
}
createObserver() {
const options = {
root: this.root,
rootMargin: this.rootMargin,
threshold: this.threshold,
};
const isIntersecting = (entry) => entry.isIntersecting || entry.intersectionRatio > 0;
this.observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (isIntersecting(entry)) {
this.subject$.next({ entry, observer });
}
});
}, options);
}
startObservingElements() {
if (!this.observer) {
return;
}
this.observer.observe(this.element.nativeElement);
this.subject$
.pipe(delay(this.debounceTime), filter(Boolean))
.subscribe(async ({ entry, observer }) => {
const target = entry.target;
const isStillVisible = await this.isVisible(target);
if (isStillVisible) {
this.show.emit(target);
}
else {
this.hide.emit(target);
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObserveVisibilityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ObserveVisibilityDirective, selector: "[dObserveVisibility]", inputs: { debounceTime: "debounceTime", threshold: "threshold", root: "root", rootMargin: "rootMargin" }, outputs: { show: "show", hide: "hide" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObserveVisibilityDirective, decorators: [{
type: Directive,
args: [{
selector: '[dObserveVisibility]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { debounceTime: [{
type: Input
}], threshold: [{
type: Input
}], root: [{
type: Input
}], rootMargin: [{
type: Input
}], show: [{
type: Output
}], hide: [{
type: Output
}] } });
class ObserverVisibilityModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObserverVisibilityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ObserverVisibilityModule, declarations: [ObserveVisibilityDirective], imports: [CommonModule], exports: [ObserveVisibilityDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObserverVisibilityModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObserverVisibilityModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [ObserveVisibilityDirective],
exports: [ObserveVisibilityDirective]
}]
}] });
class StrTplOutletDirective {
constructor(viewContainer, templateRef) {
this.viewContainer = viewContainer;
this.templateRef = templateRef;
this.embeddedViewRef = null;
}
ngOnChanges(changes) {
const { dStrTplOutlet, dStrTplOutletContext } = changes;
if (dStrTplOutlet) {
this.viewContainer.clear();
const template = (this.dStrTplOutlet instanceof TemplateRef) ? this.dStrTplOutlet : this.templateRef;
this.embeddedViewRef = this.viewContainer.createEmbeddedView(template, this.dStrTplOutletContext);
}
if (dStrTplOutletContext && !dStrTplOutletContext.firstChange && this.embeddedViewRef) {
const isTemplateRef = this.dStrTplOutlet instanceof TemplateRef;
const newCtx = isTemplateRef ? this.dStrTplOutletContext : {};
const oldCtx = this.embeddedViewRef.context;
if (!isEqual(newCtx, oldCtx)) {
for (const propName of Object.keys(newCtx)) {
oldCtx[propName] = newCtx[propName];
}
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: StrTplOutletDirective, selector: "[dStrTplOutlet]", inputs: { dStrTplOutlet: "dStrTplOutlet", dStrTplOutletContext: "dStrTplOutletContext" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletDirective, decorators: [{
type: Directive,
args: [{
selector: '[dStrTplOutlet]'
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { dStrTplOutlet: [{
type: Input
}], dStrTplOutletContext: [{
type: Input
}] } });
class StrTplOutletModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletModule, declarations: [StrTplOutletDirective], exports: [StrTplOutletDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrTplOutletModule, decorators: [{
type: NgModule,
args: [{
declarations: [StrTplOutletDirective],
exports: [StrTplOutletDirective]
}]
}] });
class PopperComponent {
get open() {
return this._isOpen;
}
set open(value) {
if (this._isOpen === value) {
return;
}
this.animate = true;
if (value) {
this.show();
}
else {
this.close();
}
this._isOpen = value;
PopperComponent.nextTick(() => {
this.openChange.emit(value);
this.setBlurListener();
});
}
static nextTick(fn) {
// Force to run fn after current data changed.
setTimeout(() => fn.bind(this)());
}
constructor(el, renderer, ngZone, changeDetectorRef, doc) {
this.el = el;
this.renderer = renderer;
this.ngZone = ngZone;
this.changeDetectorRef = changeDetectorRef;
this.doc = doc;
this.fluidPopper = true;
this.poppoverAppendDirection = 'bottom';
this.appendTo = 'body';
this.showAnimation = true;
this.popper = null;
this._isOpen = false;
this.directionAnimationTransformOrigin = {
'top': '0 100%',
'bottom': '0 0'
};
this.directionSubject = new Subject();
this.openChange = new EventEmitter();
this.onDocumentClick = ($event) => {
if (!!this.appendTo && this.popperContainer.nativeElement !== $event.target &&
!this.popperContainer.nativeElement.contains($event.target)) {
this.open = false;
}
else if (!this.appendTo && this.open && !this.el.nativeElement.contains($event.target)) {
this.open = false;
}
};
this.blockEvent = ($event) => {
$event.preventDefault();
$event.stopPropagation();
};
this.applyTransitionStyle = (data) => {
const optionsContainer = this.popperContainer.nativeElement;
this.updateContainerTransitionDirection(data?.state?.modifiersData?.flip?._skip);
if (this.animate) {
// perspective(1px) solves pixel shift caused by webkit transform
this.renderer.setStyle(optionsContainer, 'transform', optionsContainer.style.transform +
` scale3d(1, 0.8, 1) perspective(1px) ${this.popperDirection === 'bottom' ? 'translateY(-4px)' : 'translateY(4px)'}`);
// Set container init state to transparent as beginning of the transition.
this.renderer.setStyle(optionsContainer, 'opacity', 0);
PopperComponent.nextTick(() => {
this.setTransition('open');
const that = this;
const handler = (e) => {
// remove transition
that.setTransition();
e.currentTarget.removeEventListener(e.type, handler);
};
optionsContainer.addEventListener('transitionend', handler);
this.renderer.setStyle(optionsContainer, 'transform', optionsContainer.style.transform.replace('scale3d(1, 0.8, 1)', 'scale3d(1, 1, 1)'));
this.popperDirection === 'bottom' ?
this.renderer.setStyle(optionsContainer, 'transform', optionsContainer.style.transform.replace('translateY(-4px)', 'translateY(0)')) :
this.renderer.setStyle(optionsContainer, 'transform', optionsContainer.style.transform.replace('translateY(4px)', 'translateY(0)'));
this.renderer.setStyle(optionsContainer, 'opacity', 1);
this.animate = false;
});
}
else {
// handle popper re-rendering, incoming transform doesn't have scale info
this.renderer.setStyle(optionsContainer, 'transform', optionsContainer.style.transform + (this.open ? ' scale3d(1, 1, 1)' : ' scale3d(1, 0.8, 1)') + ' perspective(1px)');
}
};
this.document = this.doc;
}
show() {
// Append to selector or original parent.
if (this.appendTo) {
if (this.fluidPopper) {
let popperWidth = this.popperActivator.nativeElement && this.popperActivator.nativeElement.offsetWidth;
if (this.extraConfig && this.extraConfig.extraWidth) {
popperWidth = popperWidth + this.extraConfig.extraWidth;
}
const firstEle = this.popperContainer.nativeElement.firstElementChild;
if (firstEle.classList.contains('devui-search-container')) {
for (const child of this.popperContainer.nativeElement.children) {
child.style.width = `${popperWidth}px`;
}
}
else {
firstEle.style.width = `${popperWidth}px`;
}
}
this.attachPopperContainerToSelector(this.appendTo);
}
else {
this.attachPopperContainerToNode(this.popperParent);
}
this.popper = this.createCustomPopper();
this.renderer.setStyle(this.popperContainer.nativeElement, 'display', 'block');
}
close() {
const popperContainer = this.popperContainer.nativeElement;
this.setTransition('close');
// For IE 11/Edge
if (popperContainer.style.transform.match(/scale3d\(1, 1, 1\)/)) {
// Replace transform open state with close state
this.renderer.setStyle(popperContainer, 'transform', popperContainer.style.transform.replace('scale3d(1, 1, 1)', 'scale3d(1, 0.8, 1)'));
}
else {
// perspective(1px) solves pixel shift caused by webkit transform
this.renderer.setStyle(popperContainer, 'transform', popperContainer.style.transform + ` scale3d(1, 0.8, 1) perspective(1px)`);
}
// Set container to transparent
this.renderer.setStyle(popperContainer, 'opacity', 0.8);
// Can't use bind(this) since it calls itself
const that = this;
const handler = (e) => {
if (!that.open && that.popper) {
// Set final state of container to invisible
that.renderer.setStyle(popperContainer, 'display', 'none');
that.animate = false;
// Remove transition
that.setTransition();
that.popper.destroy();
that.popper = null;
that.detachPopperContainer();
}
e.currentTarget.removeEventListener(e.type, handler);
};
if (this.sh