ng-devui
Version:
DevUI components based on Angular
811 lines (807 loc) • 103 kB
JavaScript
import * as i3 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Inject, TemplateRef, Component, Input, NgModule } from '@angular/core';
import { Subject, BehaviorSubject, fromEvent, fromEventPattern } from 'rxjs';
import { takeUntil, debounceTime } from 'rxjs/operators';
import * as i2 from 'ng-devui/i18n';
import * as i4 from 'ng-devui/button';
import { ButtonModule } from 'ng-devui/button';
import * as i5 from 'ng-devui/icon';
import { IconModule } from 'ng-devui/icon';
import * as i6 from 'ng-devui/utils';
import { SafePipeModule } from 'ng-devui/utils';
import * as i1 from 'ng-devui/overlay-container';
import * as i5$1 from 'ng-devui/dropdown';
import { DropDownModule } from 'ng-devui/dropdown';
const ARROW_WIDTH = 8;
const PANEL_TO_ELEMENT = 10;
class PanelPostion {
constructor(document) {
this.document = document;
}
calculateAvailablePosition(curStepRect, panelRect) {
if (this.step.position !== undefined) {
this.availablePosition = this.step.position.split('-')[0];
}
else {
if (curStepRect.bottom + panelRect.height + PANEL_TO_ELEMENT <= this.document.documentElement.clientHeight) {
this.availablePosition = 'bottom';
}
else if (curStepRect.top - panelRect.height - PANEL_TO_ELEMENT > 0) {
this.availablePosition = 'top';
}
else if (curStepRect.right + panelRect.width + PANEL_TO_ELEMENT <= this.document.documentElement.clientWidth) {
this.availablePosition = 'right';
}
else if (curStepRect.left - panelRect.width - PANEL_TO_ELEMENT > 0) {
this.availablePosition = 'left';
}
}
}
calculateTopAndLeft(curStepRect, panelRect) {
if (this.availablePosition === 'bottom') {
this.top = curStepRect.bottom + PANEL_TO_ELEMENT;
this.arrowTopBias = ARROW_WIDTH / 2;
}
else if (this.availablePosition === 'top') {
this.arrowTopBias = panelRect.height - ARROW_WIDTH / 2;
this.top = curStepRect.top - panelRect.height - PANEL_TO_ELEMENT;
}
else if (this.availablePosition === 'right') {
this.left = curStepRect.right + PANEL_TO_ELEMENT;
this.arrowLeftBias = -ARROW_WIDTH / 2;
}
else if (curStepRect.left - panelRect.width - PANEL_TO_ELEMENT > 0) {
this.left = curStepRect.left - panelRect.width - PANEL_TO_ELEMENT;
this.arrowLeftBias = panelRect.width - ARROW_WIDTH / 2;
}
}
calculateAlignDirection(curStepRect, panelRect) {
if (this.step.position !== undefined) {
this.alignDirection = this.step.position.split('-')[1] || 'middle';
}
else {
if (this.availablePosition === 'bottom' || this.availablePosition === 'top') {
this.calculateTopBottomAlign(curStepRect, panelRect);
}
else if (this.availablePosition === 'left' || this.availablePosition === 'right') {
this.calculateLeftRightAlign(curStepRect, panelRect);
}
}
}
calculateTopBottomAlign(curStepRect, panelRect) {
if (curStepRect.left + panelRect.width < this.document.documentElement.clientWidth) {
this.alignDirection = 'left';
}
else if (curStepRect.right - panelRect.width > 0) {
this.alignDirection = 'right';
}
if (panelRect.width < curStepRect.width ||
(curStepRect.left + curStepRect.width / 2 - panelRect.width / 2 > 0 &&
curStepRect.left + curStepRect.width / 2 + panelRect.width / 2 < this.document.documentElement.clientWidth)) {
this.alignDirection = 'middle';
}
}
calculateLeftRightAlign(curStepRect, panelRect) {
if (panelRect.height < curStepRect.height ||
(curStepRect.top + curStepRect.height / 2 - panelRect.height / 2 > 0 &&
curStepRect.top + curStepRect.height / 2 + panelRect.height / 2 < this.document.documentElement.clientHeight)) {
this.alignDirection = 'middle';
}
else if (curStepRect.top + panelRect.height < this.document.documentElement.clientWidth) {
this.alignDirection = 'top';
}
else if (curStepRect.bottom - panelRect.height > 0) {
this.alignDirection = 'bottom';
}
}
calculateBias(curStepRect, panelRect) {
if (this.availablePosition === 'bottom' || this.availablePosition === 'top') {
this.calculateTopBottomBias(curStepRect, panelRect);
}
else if (this.availablePosition === 'left' || this.availablePosition === 'right') {
this.calculateLeftRightBias(curStepRect, panelRect);
}
}
calculateTopBottomBias(curStepRect, panelRect) {
if (this.alignDirection === 'middle') {
this.left = curStepRect.left + curStepRect.width / 2 - panelRect.width / 2;
this.arrowLeftBias = panelRect.width / 2 - ARROW_WIDTH / 2;
}
else if (this.alignDirection === 'left') {
this.left = curStepRect.left;
this.arrowLeftBias = PANEL_TO_ELEMENT + ARROW_WIDTH;
}
else if (this.alignDirection === 'right') {
this.left = curStepRect.right - panelRect.width;
this.arrowLeftBias = panelRect.width - PANEL_TO_ELEMENT - ARROW_WIDTH;
}
}
calculateLeftRightBias(curStepRect, panelRect) {
if (this.alignDirection === 'middle') {
this.top = curStepRect.top + curStepRect.height / 2 - panelRect.height / 2;
this.arrowTopBias = panelRect.height / 2;
}
else if (this.alignDirection === 'top') {
this.top = curStepRect.top;
this.arrowTopBias = PANEL_TO_ELEMENT + ARROW_WIDTH;
}
else if (this.alignDirection === 'bottom') {
this.top = curStepRect.bottom - panelRect.height;
this.arrowTopBias = panelRect.height - PANEL_TO_ELEMENT - ARROW_WIDTH;
}
}
getRealClientRect(step) {
const stepRect = step.element?.getBoundingClientRect();
const realRect = {
top: stepRect?.top - (step?.highlightOffset ? step.highlightOffset[0] : 0),
right: stepRect?.right + (step?.highlightOffset ? step.highlightOffset[1] : 0),
left: stepRect?.left - (step?.highlightOffset ? step.highlightOffset[3] : 0),
bottom: stepRect?.bottom + (step?.highlightOffset ? step.highlightOffset[2] : 0),
width: stepRect?.width + (step?.highlightOffset ? step.highlightOffset[3] + step.highlightOffset[1] : 0),
height: stepRect?.height + (step?.highlightOffset ? step.highlightOffset[0] + step.highlightOffset[2] : 0),
};
return realRect;
}
calculatePosition(step) {
const panel = this.document.querySelector('.user-guide-panel');
const panelRect = panel.getBoundingClientRect();
this.step = step;
const curStepRect = this.getRealClientRect(step);
this.calculateAvailablePosition(curStepRect, panelRect);
this.calculateTopAndLeft(curStepRect, panelRect);
this.calculateAlignDirection(curStepRect, panelRect);
this.calculateBias(curStepRect, panelRect);
const panelArrow = this.document.querySelector('.devui-user-guide-panel-arrow');
if (panelArrow) {
panelArrow.style.top = `${this.arrowTopBias}px`;
panelArrow.style.left = `${this.arrowLeftBias}px`;
}
panel.style.cssText = `
top: ${this.top}px;
left: ${this.left}px;
`;
}
}
function disableClick(e) {
e.preventDefault();
e.stopPropagation();
}
function documentRealHeight(document) {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
}
class UserGuideCoreService {
constructor(rendererFactory2, doc) {
this.rendererFactory2 = rendererFactory2;
this.doc = doc;
this.steps = []; // 用户输入的指引步骤
this.stepsDetails = []; // 经过处理加入细节的指引步骤
this.isStart = false;
this._destory = new Subject();
this.interactableEvent = {
eventType: null,
element: null,
eventFunction: null,
};
this._showOverlayState = {
showMaskLayer: false,
showNormalOverlay: false,
showTopOverlay: false,
showBottomOverlay: false,
showLeftOverlay: false,
showRightOverlay: false,
showBorder: false,
};
this.curContent = new BehaviorSubject('start');
this.curSubContent = new BehaviorSubject('');
this.curStep = new BehaviorSubject(-1);
this.canNext = new BehaviorSubject(true);
this.canPrev = new BehaviorSubject(true);
this.canFinish = new BehaviorSubject(false);
this.isFinished = new BehaviorSubject(false);
this.showButtons = new BehaviorSubject(true);
this.showOverlayState = new BehaviorSubject(this._showOverlayState);
this.showOperateZone = new BehaviorSubject(false);
this.showPrevButton = new BehaviorSubject(true);
this.curStepType = new BehaviorSubject('normal');
const renderer = this.rendererFactory2.createRenderer(null, null);
this.document = this.doc;
this.panelPostion = new PanelPostion(this.document);
this.createOnResizeObservable(renderer);
this.onScroll = fromEvent(window, 'scroll')
.pipe(takeUntil(this._destory), debounceTime(100))
.subscribe(() => {
if (this.isStart && this.stepsDetails[this.currentStep].type !== 'display') {
this.updateCurrentStepElement();
this.setStepShow(this.currentType, this.currentStep);
}
});
this.onResize.subscribe((e) => {
if (this.isStart && this.stepsDetails[this.currentStep].type !== 'display') {
this.updateCurrentStepElement();
this.setStepShow(this.currentType, this.currentStep);
}
});
this.curStep.subscribe((index) => {
if (index !== -1) {
this.canChange(index).then((canChange) => {
if (canChange) {
this.changeStep();
}
});
}
});
}
ngOnDestroy() {
this._destory.next();
this._destory.complete();
if (this.curContent) {
this.curContent.unsubscribe();
}
if (this.curSubContent) {
this.curSubContent.unsubscribe();
}
if (this.curStep) {
this.curStep.unsubscribe();
}
if (this.canNext) {
this.canNext.unsubscribe();
}
if (this.canPrev) {
this.canPrev.unsubscribe();
}
if (this.canFinish) {
this.canFinish.unsubscribe();
}
if (this.isFinished) {
this.isFinished.unsubscribe();
}
if (this.showButtons) {
this.showButtons.unsubscribe();
}
if (this.showOverlayState) {
this.showOverlayState.unsubscribe();
}
if (this.showOperateZone) {
this.showOperateZone.unsubscribe();
}
if (this.curStepType) {
this.curStepType.unsubscribe();
}
if (this.showPrevButton) {
this.showPrevButton.unsubscribe();
}
}
start() {
if (this.steps.length === 0) {
return;
}
this.generateStepsDetails();
this.setInitialState();
}
generateStepsDetails() {
this.steps.forEach((item) => {
if (item.element === undefined) {
this.stepsDetails.push({
title: item.title,
content: item.content,
type: 'display',
beforeChange: item?.beforeChange,
showPrevButton: item?.showPrevButton === undefined ? true : item.showPrevButton,
});
}
else {
const rect = (this.document.getElementById(item.element) || this.document.querySelector(item.element))?.getBoundingClientRect();
this.stepsDetails.push({
element: this.document.getElementById(item.element) || this.document.querySelector(item.element),
title: item.title,
content: item.content,
position: item.position,
highlightOffset: item?.highlightOffset,
top: rect?.top,
left: rect?.left,
width: rect?.width,
height: rect?.height,
type: item.type === undefined ? 'normal' : item.type,
eventType: item?.eventType,
inputData: item?.inputData,
waitingTime: item?.waitingTime,
beforeChange: item?.beforeChange,
showPrevButton: item?.showPrevButton === undefined ? true : item.showPrevButton,
});
}
});
}
setInitialState() {
this.isStart = true;
// 初始状态,令currentStep为-1
this.currentStep = -1;
this.prevStep = -2;
this.nextStep = 0;
}
setSteps(steps) {
this.steps = steps;
}
setExitFunction(exit) {
this.onExit = exit;
}
updateNextStepElement() {
for (let i = this.nextStep; i < this.steps.length; i++) {
if (this.stepsDetails[i].type !== 'display') {
this.stepsDetails[i].element =
this.document.getElementById(this.steps[i].element) || this.document.querySelector(this.steps[i].element);
const rect = this.stepsDetails[i]?.element?.getBoundingClientRect();
this.stepsDetails[i].top = rect?.top;
this.stepsDetails[i].left = rect?.left;
this.stepsDetails[i].width = rect?.width;
this.stepsDetails[i].height = rect?.height;
}
}
}
updateCurrentStepElement() {
const cur = this.currentStep;
this.stepsDetails[cur].element =
this.document.getElementById(this.steps[cur].element) || this.document.querySelector(this.steps[cur].element);
if (this.stepsDetails[cur].element) {
const rect = this.stepsDetails[cur].element.getBoundingClientRect();
const hasHighlightOffset = this.stepsDetails[cur].highlightOffset;
const scrollTop = this.document.documentElement.scrollTop;
this.stepsDetails[cur].top = rect?.top - (hasHighlightOffset ? this.stepsDetails[cur].highlightOffset[0] : 0) + scrollTop;
this.stepsDetails[cur].left = rect?.left - (hasHighlightOffset ? this.stepsDetails[cur].highlightOffset[3] : 0);
this.stepsDetails[cur].width =
rect?.width + (hasHighlightOffset ? this.stepsDetails[cur].highlightOffset[3] + this.stepsDetails[cur].highlightOffset[1] : 0);
this.stepsDetails[cur].height =
rect?.height + (hasHighlightOffset ? this.stepsDetails[cur].highlightOffset[0] + this.stepsDetails[cur].highlightOffset[2] : 0);
}
}
canChange(index) {
let changeResult = Promise.resolve(true);
if (this.stepsDetails[index]?.beforeChange !== undefined) {
const result = this.stepsDetails[index].beforeChange();
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = result.toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
next() {
this.changeStepState('forward');
}
prev() {
this.changeStepState('backward');
}
exit() {
if (this.currentStep === this.steps.length - 1) {
this.isFinished.next(true);
this.canFinish.next(false);
}
try {
localStorage.setItem('devui-user-guide-last-step', this.currentStep);
}
catch (error) {
console.error(error);
}
if (this.interactableEvent.eventType !== null) {
this.interactableEvent.element.forEach((item, index) => {
item.removeEventListener(this.interactableEvent.eventType[index], this.interactableEvent.eventFunction[index]);
});
}
this.clearInteractableEvent();
if (this.onExit) {
this.onExit();
}
this.currentType = undefined;
this.steps = [];
this.stepsDetails = [];
this.isStart = false;
this.onExit = undefined;
}
goStep(index) {
if (index > this.currentStep) {
this.changeStepState('forward', Math.abs(this.currentStep - index));
}
else if (index < this.currentStep) {
this.changeStepState('backward', Math.abs(this.currentStep - index));
}
}
onBeforeChange(index) {
this.clearInteractableEvent();
this.registerInteractableEvent(index);
}
getCurrentStep() {
return this.currentStep;
}
getCurrentDirection() {
return this.currentDirection;
}
getStepLength() {
return this.steps.length;
}
registerInteractableEvent(index) {
if (this.stepsDetails[index].eventType === 'clickable') {
this.registerClickEvent(index);
}
else if (this.stepsDetails[index].eventType === 'inputable') {
this.registerInputEvent(index);
}
else if (this.stepsDetails[index].eventType === 'exit') {
this.registerExitEvent(index);
}
}
clearInteractableEvent() {
if (this.interactableEvent.eventType !== null) {
this.interactableEvent.eventType = null;
this.interactableEvent.element = null;
this.interactableEvent.eventFunction = null;
this.showButtons.next(true);
this.showOperateZone.next(false);
this.canPrev.next(false);
}
}
registerClickEvent(index) {
const clickElement = this.stepsDetails[index].element;
this.interactableEvent.eventType = ['click'];
this.interactableEvent.element = [clickElement];
this.interactableEvent.eventFunction = [this.clickEventHandle.bind(this)];
this.showButtons.next(false);
clickElement.addEventListener('click', this.interactableEvent.eventFunction[0], { once: true });
}
clickEventHandle() {
const waitingTime = this.stepsDetails[this.currentStep].waitingTime || 300;
this.document.body.addEventListener('click', disableClick, true);
setTimeout(() => {
this.updateNextStepElement();
this.next();
}, waitingTime);
setTimeout(() => {
this.document.body.removeEventListener('click', disableClick, true);
}, 1000);
}
registerInputEvent(index) {
this.showOperateZone.next(true);
setTimeout(() => {
const inputElement = this.document.querySelector('.operate-zone');
this.interactableEvent.eventType = ['input', 'click'];
this.interactableEvent.element = [this.stepsDetails[this.currentStep].element, inputElement];
this.interactableEvent.eventFunction = [this.inputEventHandle.bind(this), this.inputOperateZoneHandle.bind(this)];
this.showButtons.next(false);
this.stepsDetails[this.currentStep].element.addEventListener('input', this.interactableEvent.eventFunction[0], { once: true });
inputElement.addEventListener('click', this.interactableEvent.eventFunction[1], { once: true });
});
}
inputEventHandle() {
const operateZone = this.document.querySelector('.operate-zone');
operateZone.innerHTML = '<p><i class="icon icon-right-o" style="color: rgb(61, 204, 166); padding-right: 4px;"></i>Good！</p>';
this.showButtons.next(true);
}
inputOperateZoneHandle() {
this.stepsDetails[this.currentStep].element.value = this.stepsDetails[this.currentStep].inputData;
const operateZone = this.document.querySelector('.operate-zone');
operateZone.innerHTML = '<p><i class="icon icon-right-o" style="color: rgb(61, 204, 166); padding-right: 4px;"></i>Good！</p>';
this.showButtons.next(true);
}
registerExitEvent(index) {
const clickElement = this.stepsDetails[index].element;
this.interactableEvent.eventType = ['click'];
this.interactableEvent.element = [clickElement];
this.interactableEvent.eventFunction = [this.ExitEventHandle.bind(this)];
this.showButtons.next(false);
clickElement.addEventListener('click', this.interactableEvent.eventFunction[0], { once: true });
}
ExitEventHandle() {
this.generateOverlay('display');
this.currentType = 'display';
const panel = this.document.querySelector('.user-guide-panel');
panel.style.cssText = `
top: 50%;
left:50%;
transform: translate(-50%, -50%);
`;
const closeButton = this.document.querySelector('.user-guide-panel-close');
closeButton.style.display = 'none';
const carouselDots = this.document.querySelector('.devui-carousel-dots');
if (carouselDots) {
carouselDots.style.display = 'none';
}
const operateZone = this.document.querySelector('.user-guide-panel-multiple-body');
operateZone.style.maxWidth = 'unset';
operateZone.innerHTML = `<div style="text-align: center;">
<i class="icon icon-right-o" style="color: rgb(61, 204, 166); font-size: 36px;"></i>
<p style="margin-top: 4px; font-size: 16px;">Congratulations！</p></div>`;
setTimeout(() => {
this.exit();
}, 2000);
}
ChooseProperOverlay() {
if (this.stepsDetails[this.currentStep].type !== this.currentType) {
this.generateOverlay(this.stepsDetails[this.currentStep].type);
this.currentType = this.stepsDetails[this.currentStep].type;
}
}
generateOverlay(type) {
switch (type) {
case 'normal':
this.generateNormalOverlay();
break;
case 'interactable':
this.generateInteractableOverlay();
break;
case 'display':
this.generateDisplayOverlay();
break;
case 'tip':
this.generateTipOverlay();
break;
default:
break;
}
}
setStepShow(type, index) {
this.curStepType.next(type);
switch (type) {
case 'normal':
this.setNormalStepShow(index);
break;
case 'interactable':
this.setInteractableStepShow(index);
break;
case 'display':
this.setDisplayStepShow(index);
break;
case 'tip':
this.setTipStepShow(index);
break;
default:
break;
}
}
changeStepState(direction, times = 1) {
this.currentDirection = direction;
for (let i = 0; i < times; i++) {
if (direction === 'forward' && this.nextStep < this.steps.length) {
this.prevStep = this.currentStep;
this.currentStep++;
this.nextStep = this.currentStep + 1;
}
else if (direction === 'backward' && this.prevStep >= 0) {
this.nextStep = this.currentStep;
this.currentStep--;
this.prevStep = this.currentStep - 1;
}
}
this.curStep.next(this.currentStep);
this.canNext.next(false);
this.canPrev.next(false);
}
changeStep() {
if (this.currentStep >= 0 && this.currentStep < this.steps.length) {
this.onBeforeChange(this.currentStep);
this.ChooseProperOverlay();
this.updateCurrentStepElement();
this.setStepShow(this.currentType, this.currentStep);
}
if (this.nextStep === this.steps.length) {
this.canNext.next(false);
this.canFinish.next(true);
}
else {
this.canNext.next(true);
this.canFinish.next(false);
}
if (this.prevStep === -1) {
this.canPrev.next(false);
}
else {
this.canPrev.next(true);
}
}
generateNormalOverlay() {
this._showOverlayState = {
showMaskLayer: false,
showNormalOverlay: true,
showTopOverlay: true,
showBottomOverlay: true,
showLeftOverlay: true,
showRightOverlay: true,
showBorder: false,
};
this.showOverlayState.next(this._showOverlayState);
}
setNormalStepShow(index) {
this.setInteractableStepShow(index);
}
generateInteractableOverlay() {
this._showOverlayState = {
showMaskLayer: false,
showNormalOverlay: false,
showTopOverlay: true,
showBottomOverlay: true,
showLeftOverlay: true,
showRightOverlay: true,
showBorder: true,
};
this.showOverlayState.next(this._showOverlayState);
}
setInteractableStepShow(index) {
const topOverlay = this.document.querySelector('.user-guide-top-overlay');
topOverlay.style.cssText = `
height: ${this.stepsDetails[index].top}px;
`;
const bottomOverlay = this.document.querySelector('.user-guide-bottom-overlay');
bottomOverlay.style.cssText = `
top: ${this.stepsDetails[index].top + this.stepsDetails[index].height}px;
height: ${documentRealHeight(this.document) - (this.stepsDetails[index].top + this.stepsDetails[index].height)}px;
`;
const leftOverlay = this.document.querySelector('.user-guide-left-overlay');
leftOverlay.style.cssText = `
top: ${this.stepsDetails[index].top}px;
width: ${this.stepsDetails[index].left}px;
height: ${this.stepsDetails[index].height}px;
`;
const rightOverlay = this.document.querySelector('.user-guide-right-overlay');
rightOverlay.style.cssText = `
top: ${this.stepsDetails[index].top}px;
left: ${this.stepsDetails[index].left + this.stepsDetails[index].width}px;
width: ${this.document.documentElement.clientWidth - (this.stepsDetails[index].left + this.stepsDetails[index].width)}px;
height: ${this.stepsDetails[index].height}px;
`;
const activeShadow = this.document.querySelector('.user-guide-active-shadow');
activeShadow.style.cssText = `
top: ${this.stepsDetails[index].top}px;
left: ${this.stepsDetails[index].left}px;
width: ${this.stepsDetails[index].width}px;
height: ${this.stepsDetails[index].height}px;
`;
setTimeout(() => {
this.panelPostion.calculatePosition(this.stepsDetails[this.currentStep]);
}, 0);
this.curContent.next(this.stepsDetails[index].title);
this.curSubContent.next(this.stepsDetails[index].content);
this.showPrevButton.next(this.stepsDetails[index].showPrevButton);
}
generateDisplayOverlay() {
this._showOverlayState = {
showMaskLayer: true,
showNormalOverlay: false,
showTopOverlay: false,
showBottomOverlay: false,
showLeftOverlay: false,
showRightOverlay: false,
showBorder: false,
};
this.showOverlayState.next(this._showOverlayState);
}
setDisplayStepShow(index) {
const panel = this.document.querySelector('.user-guide-panel');
panel.style.cssText = `
top: 50%;
left:50%;
transform: translate(-50%, -50%);
`;
this.curContent.next(this.stepsDetails[index].title);
this.curSubContent.next(this.stepsDetails[index].content);
this.showPrevButton.next(this.stepsDetails[index].showPrevButton);
}
generateTipOverlay() {
this._showOverlayState = {
showMaskLayer: false,
showNormalOverlay: false,
showTopOverlay: false,
showBottomOverlay: false,
showLeftOverlay: false,
showRightOverlay: false,
showBorder: false,
};
this.showOverlayState.next(this._showOverlayState);
}
setTipStepShow(index) {
this.setInteractableStepShow(index);
}
createOnResizeObservable(renderer) {
let removeResizeEventListener;
const createResizeEventListener = (handler) => {
removeResizeEventListener = renderer.listen('window', 'resize', handler);
};
this.onResize = fromEventPattern(createResizeEventListener, () => removeResizeEventListener()).pipe(takeUntil(this._destory));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserGuideCoreService, deps: [{ token: i0.RendererFactory2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserGuideCoreService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserGuideCoreService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }] });
class UserGuideUIComponent {
get contentTemplate() {
return this.content;
}
get nextButtonType() {
return (this.extraConfig?.nextButtonType || 'primary');
}
constructor(userGuideCoreService, i18n) {
this.userGuideCoreService = userGuideCoreService;
this.i18n = i18n;
this.showDots = false;
this.maxContentWidth = 320;
this.isCover = true;
this.showMaskLayer = false;
this.showNormalOverlay = false;
this.showTopOverlay = false;
this.showBottomOverlay = false;
this.showLeftOverlay = false;
this.showRightOverlay = false;
this.showBorder = false;
this.showButtons = true;
this.showOperateZone = false;
this.showPrevButton = true;
this.items = [];
}
ngOnInit() {
this.userGuideCoreService.curContent.subscribe(item => { this.title = item; });
this.userGuideCoreService.curSubContent.subscribe(item => { this.content = item; });
this.userGuideCoreService.canNext.subscribe(item => { this.canNext = item; });
this.userGuideCoreService.canPrev.subscribe(item => { this.canPrev = item; });
this.userGuideCoreService.canFinish.subscribe(item => { this.canFinish = item; });
this.userGuideCoreService.curStep.subscribe(item => { this.currentStep = item; });
this.userGuideCoreService.curStepType.subscribe(item => { this.curStepType = item; });
this.userGuideCoreService.showButtons.subscribe(item => { this.showButtons = item; });
this.userGuideCoreService.showOperateZone.subscribe(item => { this.showOperateZone = item; });
this.userGuideCoreService.showOverlayState.subscribe(item => {
this.showMaskLayer = item.showMaskLayer;
this.showNormalOverlay = item.showNormalOverlay;
this.showTopOverlay = item.showTopOverlay;
this.showBottomOverlay = item.showBottomOverlay;
this.showLeftOverlay = item.showLeftOverlay;
this.showRightOverlay = item.showRightOverlay;
this.showBorder = item.showBorder;
});
this.userGuideCoreService.showPrevButton.subscribe(item => { this.showPrevButton = item; });
this.stepsLength = this.userGuideCoreService.getStepLength();
for (let i = 0; i < this.stepsLength; i++) {
this.items.push(i);
}
this.i18nCommonText = this.i18n.getI18nText().userGuide;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nCommonText = data.userGuide;
});
}
next() {
this.userGuideCoreService.next();
}
prev() {
this.userGuideCoreService.prev();
}
exit() {
this.userGuideCoreService.exit();
this.close();
}
close() {
}
switchStep(index) {
this.userGuideCoreService.goStep(index);
}
disableClick(event) {
event.preventDefault();
event.stopPropagation();
}
isTemplateContent() {
return this.content instanceof TemplateRef;
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserGuideUIComponent, deps: [{ token: UserGuideCoreService }, { token: i2.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserGuideUIComponent, selector: "d-user-guide-ui", inputs: { showDots: "showDots", maxContentWidth: "maxContentWidth", isCover: "isCover", extraConfig: "extraConfig" }, ngImport: i0, template: "<div [class.show-overlay]=\"showMaskLayer && isCover\" class=\"user-guide-mask-layer\"></div>\n<div [class.show-overlay]=\"showNormalOverlay && isCover\" class=\"user-guide-normal-overlay\"></div>\n\n<div [class.show-overlay]=\"showTopOverlay && isCover\" class=\"user-guide-top-overlay\" (click)=\"disableClick($event)\"></div>\n<div [class.show-overlay]=\"showBottomOverlay && isCover\" class=\"user-guide-bottom-overlay\" (click)=\"disableClick($event)\"></div>\n<div [class.show-overlay]=\"showLeftOverlay && isCover\" class=\"user-guide-left-overlay\" (click)=\"disableClick($event)\"></div>\n<div [class.show-overlay]=\"showRightOverlay && isCover\" class=\"user-guide-right-overlay\" (click)=\"disableClick($event)\"></div>\n\n<div [class.show-overlay]=\"showBorder && isCover\" class=\"user-guide-active-shadow\" (click)=\"disableClick($event)\"></div>\n\n<div class=\"user-guide-panel\">\n <div\n *ngIf=\"!isCover && (stepsLength !== 1 || curStepType !== 'tip') && curStepType !== 'display'\"\n class=\"devui-user-guide-panel-arrow\"\n [style.background-color]=\"extraConfig?.panelBackground\"\n ></div>\n <div\n *ngIf=\"stepsLength !== 1 || curStepType !== 'tip'\"\n id=\"devui-user-guide\"\n class=\"user-guide-panel-multiple\"\n [style.background]=\"extraConfig?.panelBackground\"\n >\n <div class=\"user-guide-panel-multiple-header\">\n <d-icon class=\"user-guide-panel-close\" [icon]=\"closeTemplate\" [operable]=\"true\" (click)=\"exit()\"> </d-icon>\n </div>\n <div class=\"user-guide-panel-multiple-body\" [style.maxWidth.px]=\"maxContentWidth\">\n <div *ngIf=\"title\" class=\"user-guide-panel-title\" [style.color]=\"extraConfig?.infoColor\">\n <div class=\"user-guide-panel-title-index\">\n <svg\n width=\"24px\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <linearGradient x1=\"39.5307261%\" y1=\"4.02342885%\" x2=\"62.2425974%\" y2=\"95.9765712%\" id=\"star-linearGradient-1\">\n <stop stop-color=\"#FFDC42\" offset=\"0%\"></stop>\n <stop stop-color=\"#FAA631\" offset=\"100%\"></stop>\n </linearGradient>\n <linearGradient x1=\"50.4447351%\" y1=\"9.89598169%\" x2=\"50.4447351%\" y2=\"100%\" id=\"star-linearGradient-2\">\n <stop stop-color=\"#FFFDF5\" offset=\"0%\"></stop>\n <stop stop-color=\"#FFE46C\" offset=\"45.8568177%\"></stop>\n <stop stop-color=\"#FFE46C\" offset=\"77.1796784%\"></stop>\n <stop stop-color=\"#FFB84C\" offset=\"100%\"></stop>\n </linearGradient>\n <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"star-linearGradient-3\">\n <stop stop-color=\"#FDD461\" offset=\"0%\"></stop>\n <stop stop-color=\"#FAA932\" offset=\"100%\"></stop>\n </linearGradient>\n <linearGradient x1=\"49.9999995%\" y1=\"100%\" x2=\"49.9999995%\" y2=\"6.6099008%\" id=\"star-linearGradient-4\">\n <stop stop-color=\"#FFCB7E\" offset=\"0%\"></stop>\n <stop stop-color=\"#FFA60C\" offset=\"31.1380841%\"></stop>\n <stop stop-color=\"#FFDA65\" offset=\"64.2551587%\"></stop>\n <stop stop-color=\"#F8E7B3\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"\u9875\u9762-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"\u661F\u661F\">\n <rect id=\"\u77E9\u5F62\" opacity=\"0.848224019\" x=\"0\" y=\"0\" width=\"24\" height=\"24\" rx=\"1.5\"></rect>\n <g id=\"\u7F16\u7EC4-30\" transform=\"translate(1.500000, 0.750000)\">\n <path\n d=\"M10.2849545,0.00312821355 C9.01530446,0.0801671154 7.93648512,1.57985131 6.82414587,4.47008186 L6.68705842,4.83270968 L6.25577388,4.89811591 L5.72946472,4.9840674 L5.22697862,5.07265412 L4.74822094,5.16405115 L4.29309704,5.25843358 C1.78084521,5.80205672 0.4023952,6.4979103 0.0802523031,7.48936419 L0.0527435764,7.58351023 C-0.223764928,8.64745912 0.589252054,9.94431065 2.43691735,11.6231017 L2.79546598,11.9423873 L3.1781838,12.2708429 L3.66780035,12.6765484 L3.53907311,13.3293274 L3.44799898,13.829093 L3.36780146,14.3082434 C3.34289719,14.4645382 3.3198289,14.6174178 3.29861979,14.7669031 L3.24059321,15.2051965 C2.95237883,17.5600309 3.17664519,18.9963886 4.01764407,19.60741 L4.09594063,19.6608172 C4.99328277,20.2344195 6.41801766,19.867408 8.49419949,18.6398756 L8.87889319,18.4072233 C8.94421443,18.3668735 9.01014077,18.325738 9.07667568,18.2838189 L9.4832155,18.0229203 L9.90452651,17.7433245 L10.3925423,17.409 L10.6636031,17.592728 L11.0861157,17.8731527 L11.4939736,18.1359757 L11.8873453,18.3811025 C11.9517094,18.420477 12.015477,18.4591102 12.0786514,18.4970002 L12.4506094,18.7154052 C12.6330581,18.8201324 12.8102323,18.9181349 12.9822267,19.0093594 L13.3193373,19.1827553 C14.9155955,19.9770028 16.0337342,20.1345728 16.7593115,19.60741 L16.8322112,19.5509531 C17.4404328,19.0494252 17.6883676,18.0458603 17.6249485,16.4915 L17.603775,16.1078533 L17.5707959,15.7029063 C17.5449079,15.4258082 17.5112498,15.1344101 17.4700218,14.8285121 L17.4025276,14.3587654 C17.3903407,14.2786535 17.377687,14.1976291 17.3645695,14.1156891 L17.2803251,13.613037 L17.1851018,13.0882608 L17.1057681,12.6812903 L17.1896115,12.6144018 C17.3293157,12.5014059 17.4650241,12.3899369 17.5967223,12.2799601 L17.9797719,11.9544721 L18.3386732,11.6377301 C20.2460636,9.91931968 21.0537817,8.58833879 20.6967032,7.48936419 L20.663964,7.39795277 C20.3400348,6.57159251 19.3245511,5.9514404 17.5893825,5.46113493 L17.1761707,5.35025772 C17.0341664,5.31404381 16.8878908,5.27856346 16.7373311,5.24378192 L16.2727869,5.14149897 C16.1136462,5.10808029 15.9502086,5.07532566 15.7824614,5.04320033 L15.2662775,4.94867745 L14.7241587,4.85772181 L14.5451229,4.82932258 L14.4696753,4.66957886 C12.9812146,1.55985477 11.7071674,-7.32747196e-14 10.3884778,-7.32747196e-14 L10.2849545,0.00312821355 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-1)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M10.3884778,1.35483871 C10.698933,1.35483871 11.1473381,1.73828119 11.6929355,2.50673715 L11.8684127,2.76220752 C11.8981815,2.80691957 11.9282076,2.85269859 11.9584852,2.89954482 L12.1431199,3.1934305 L12.333503,3.51294013 L12.5293494,3.85808471 L12.7303739,4.22887523 L12.9362911,4.62532267 L13.1468159,5.04743805 C13.1822715,5.11993022 13.2179072,5.19349234 13.2537171,5.26812464 L13.4706185,5.72876252 L13.6241243,6.06080357 L13.9859608,6.11455876 C14.1641422,6.14102976 14.3380531,6.16803704 14.5076775,6.19553742 L15.0036752,6.27947467 L15.4738587,6.36611146 C15.5500662,6.38076149 15.625194,6.3955132 15.6992403,6.41036121 L16.1305234,6.50056152 C16.2002355,6.51577309 16.2688621,6.53107015 16.3364011,6.54644731 L16.7285692,6.63962823 L17.0945412,6.73447239 C17.2121552,6.76633553 17.3253874,6.7984327 17.4342217,6.83072071 L17.7475153,6.92811413 C18.7477431,7.25437947 19.3065985,7.59541179 19.4081751,7.90803238 C19.4934424,8.17045841 19.2883637,8.62751564 18.7797589,9.24774919 L18.5989641,9.46049412 C18.4389036,9.64274596 18.2553099,9.83731888 18.0479004,10.0435387 L17.7875595,10.2965499 L17.5042469,10.5604832 C17.4551078,10.6053678 17.4050071,10.6506968 17.3539424,10.6964647 L17.0359691,10.9762958 L16.6947531,11.2664018 L16.3301858,11.5665238 C16.2674726,11.6173645 16.203782,11.6686116 16.1391116,11.72026 L15.6136198,12.1349914 L15.697482,12.5445924 C16.08423,14.433552 16.2763848,15.9111437 16.2763848,16.9661037 C16.2763848,17.8761079 16.1311295,18.3891382 15.9629573,18.5113225 C15.8300053,18.6079177 15.5616817,18.601431 15.1681121,18.486175 L14.9776083,18.425236 L14.7695393,18.3487262 C14.6611504,18.3065578 14.5462574,18.2585039 14.424985,18.2044944 L14.1739709,18.0885141 L13.9061659,17.956528 L13.6217912,17.8084121 L13.321068,17.644042 L13.0042177,17.4632934 L12.4991875,17.1611893 L12.142987,16.938951 L11.7714335,16.6998995 L11.3847483,16.4439104 L10.9831526,16.1708594 L10.3859552,15.7553852 L9.99736535,16.0311488 C9.81569992,16.1600681 9.63812068,16.2841165 9.46464912,16.4032906 L8.95657891,16.7461861 C7.88255303,17.4574274 6.98298347,17.9625763 6.26376755,18.2606573 C5.46502915,18.5916966 4.97946103,18.6315382 4.81399828,18.5113225 C4.62937748,18.3771876 4.47932656,17.8617864 4.47932656,16.9506689 C4.47932656,16.269409 4.56255815,15.4131874 4.72973741,14.3851273 L4.82925578,13.8073442 C4.88318197,13.5099505 4.94336188,13.1998176 5.00981004,12.877009 L5.16574773,12.1400686 L4.83794663,11.8788974 C4.50171066,11.6110058 4.18930468,11.3532121 3.90081117,11.1057047 L3.48601555,10.7421818 C2.82461448,10.1492467 2.31292405,9.62119004 1.952233,9.16095683 C1.46234724,8.53587427 1.30403179,8.10730838 1.36878049,7.90803238 C1.43601883,7.70109403 1.89806718,7.38372936 2.79109438,7.07213055 C3.75858961,6.73454804 5.14367806,6.43046355 6.93848028,6.16463381 L7.68453956,6.05800922 L7.82258087,5.6732626 C7.9090951,5.43213148 7.9950492,5.20119982 8.08026573,4.98044224 L8.24966276,4.55248498 C8.36186839,4.27621374 8.47255245,4.01799966 8.5812943,3.77778255 L8.74289786,3.43094709 L8.90127264,3.11106196 C8.92738184,3.05999112 8.95334337,3.01004133 8.97915065,2.96121166 L9.13209074,2.68166738 C9.63537056,1.79460735 10.0716926,1.35483871 10.3884778,1.35483871 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-2)\"\n ></path>\n <path\n d=\"M18,0.5625 C17.0680195,0.5625 16.3125,1.31801948 16.3125,2.25 C16.3125,3.18198052 17.0680195,3.9375 18,3.9375 C18.9319805,3.9375 19.6875,3.18198052 19.6875,2.25 C19.6875,1.31801948 18.9319805,0.5625 18,0.5625 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-3)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M18,0.9375 C18.7248737,0.9375 19.3125,1.52512627 19.3125,2.25 C19.3125,2.97487373 18.7248737,3.5625 18,3.5625 C17.2751263,3.5625 16.6875,2.97487373 16.6875,2.25 C16.6875,1.52512627 17.2751263,0.9375 18,0.9375 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-4)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M10.5,19.3125 C9.56801948,19.3125 8.8125,20.0680195 8.8125,21 C8.8125,21.9319805 9.56801948,22.6875 10.5,22.6875 C11.4319805,22.6875 12.1875,21.9319805 12.1875,21 C12.1875,20.0680195 11.4319805,19.3125 10.5,19.3125 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-3)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M10.5,19.6875 C11.2248737,19.6875 11.8125,20.2751263 11.8125,21 C11.8125,21.7248737 11.2248737,22.3125 10.5,22.3125 C9.77512627,22.3125 9.1875,21.7248737 9.1875,21 C9.1875,20.2751263 9.77512627,19.6875 10.5,19.6875 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-4)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M3,0.5625 C2.06801948,0.5625 1.3125,1.31801948 1.3125,2.25 C1.3125,3.18198052 2.06801948,3.9375 3,3.9375 C3.93198052,3.9375 4.6875,3.18198052 4.6875,2.25 C4.6875,1.31801948 3.93198052,0.5625 3,0.5625 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-3)\"\n fill-rule=\"nonzero\"\n ></path>\n <path\n d=\"M3,0.9375 C3.72487373,0.9375 4.3125,1.52512627 4.3125,2.25 C4.3125,2.97487373 3.72487373,3.5625 3,3.5625 C2.27512627,3.5625 1.6875,2.97487373 1.6875,2.25 C1.6875,1.52512627 2.27512627,0.9375 3,0.9375 Z\"\n id=\"\u8DEF\u5F84\"\n fill=\"url(#star-linearGradient-4)\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </g>\n </g>\n </svg>\n </div>\n {{ title }}\n </div>\n <div *ngIf=\"content\" class=\"user-guide-panel-content\" [style.color]=\"extraConfig?.infoColor\">\n <div *ngIf=\"!isTemplateContent()\" [innerHTML]=\"content | safe : 'html'\"></div>\n <ng-container *ngIf=\"isTemplateContent()\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"showOperateZone\" class=\"operate-zone\">\n <p><i class=\"icon icon-info-o\" style=\"color: rgb(81, 112, 255); padding-right: 4px\"></i>{{ i18nCommonText.autoFill }}</p>\n </div>\n </div>\n <div class=\"user-guide-panel-multiple-footer\" [class.user-guide-panel-multiple-footer-only-dot]=\"!showButtons\">\n <div class=\"user-guide-panel-multiple-footer-left\">\n <ul class=\"devui-carousel-dots\" *ngIf=\"stepsLength > 1 && showDots\">\n <li\n class=\"dot-item\"\n [ngClass]=\"{ active: currentStep === index }\"\n [style.background]=\"currentStep === index ? extraConfig?.operationColor : extraConfig?.dotColor\"\n *ngFor=\"let item of items; let index = index\"\n (click)=\"switchStep(index)\"\n ></li>\n </ul>\n </div>\n <div *ngIf=\"showButtons\" class=\"user-guide-panel-multiple-footer-right\">\n <d-button bsStyle=\"common\" [disabled]=\"!canPrev\" *ngIf=\"showPrevButton\" (btnClick)=\"prev()\">{{ i18nCommonText.prev }}</d-button>\n <d-button *ngIf=\"!canFinish\" [disabled]=\"!canNext\" [bsStyle]=\"nextButtonType\" (btnClick)=\"next()\">{{\n i18nCommonText.next\n }}</d-button>\n <d-button\n *ngIf=\"currentStep === stepsLength - 1 && canFinish\"\n [bsStyle]=\"nextButtonType\"\n [disabled]=\"!canFinish\"\n (btnClick)=\"exit()\"\n >{{ i18nCommonText.finish }}</d-button\n >\n </div>\n </div>\n </div>\n\n <div *ngIf=\"stepsLength === 1 && curStepType === 'tip'\">\n <div *ngIf=\"curStepType === 'tip'\" class=\"devui-user-guide-panel-arrow\"></div>\n <div [class.user-guide-panel-tip]=\"curStepType === 'tip'\" [class.user-guide-panel-single]=\"curStepType !== 'tip'\">\n {{ title }}\n <div *ngIf=\"content\" class=\"user-guide-panel-content\" [innerHTML]=\"content | safe : 'html'\"></div>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"exit()\">\n <svg class=\"svg-icon-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 12 12\" version=\"1.1\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-2.000000, -2.000000)\" fill-rule=\"nonzero\">\n <polygon\n points=\"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575\"\n />\n </g>\n </g>\n </svg>\n </button>\n </div>\n </div>\n</div>\n<ng-template #closeTemplate>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http