@dimanoid/ngx-dm-tour
Version:
1,378 lines (1,367 loc) • 52.4 kB
JavaScript
import { InjectionToken, Injectable, RendererFactory2, Inject, Optional, ɵɵdefineInjectable, ɵɵinject, Directive, ElementRef, Input, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { __values, __spread } from 'tslib';
import { Subject, Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import ResizeObserver from 'resize-observer-polyfill';
/**
* @fileoverview added by tsickle
* Generated from: lib/models/dm-tour-config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IDmTourConfig() { }
if (false) {
/** @type {?|undefined} */
IDmTourConfig.prototype.rootPath;
/** @type {?|undefined} */
IDmTourConfig.prototype.loadIndexOnStart;
/** @type {?|undefined} */
IDmTourConfig.prototype.loaderHtml;
/** @type {?|undefined} */
IDmTourConfig.prototype.defaultShape;
/** @type {?|undefined} */
IDmTourConfig.prototype.customCssClass;
/** @type {?|undefined} */
IDmTourConfig.prototype.debug;
}
var DmTourConfig = /** @class */ (function () {
function DmTourConfig(json) {
this.rootPath = 'assets/help';
this.loadIndexOnStart = true;
this.loaderHtml = "\n <span style=\"color: steelblue;\n text-shadow: 0 0 10px white, 0 0 10px white, 0 0 20px white, 0 0 20px white, 0 0 30px white, 0 0 30px white;\n margin: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n font-weight: bold;\n font-size: 30px;\n transform: translate(-50%, -50%);\"\n >\n Loading...\n </span>\n ";
this.defaultShape = 'auto';
this.debug = 0;
this.apply(json);
}
/**
* @param {?=} json
* @return {?}
*/
DmTourConfig.prototype.apply = /**
* @param {?=} json
* @return {?}
*/
function (json) {
var e_1, _a;
if (json) {
try {
for (var _b = __values(Object.keys(json)), _c = _b.next(); !_c.done; _c = _b.next()) {
var fn = _c.value;
if (json[fn] !== undefined) {
this[fn] = json[fn];
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
}
return this;
};
return DmTourConfig;
}());
if (false) {
/** @type {?} */
DmTourConfig.prototype.rootPath;
/** @type {?} */
DmTourConfig.prototype.loadIndexOnStart;
/** @type {?} */
DmTourConfig.prototype.loaderHtml;
/** @type {?} */
DmTourConfig.prototype.defaultShape;
/** @type {?} */
DmTourConfig.prototype.customCssClass;
/** @type {?} */
DmTourConfig.prototype.debug;
}
/** @type {?} */
var DM_TOUR_CONF = new InjectionToken('ngx-dm-tour-config');
/**
* @fileoverview added by tsickle
* Generated from: lib/models/dm-tour-section.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function DmTourSection() { }
if (false) {
/** @type {?} */
DmTourSection.prototype.id;
/** @type {?} */
DmTourSection.prototype.title;
/** @type {?|undefined} */
DmTourSection.prototype.html;
/** @type {?|undefined} */
DmTourSection.prototype.controlsLoaded;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/models/dm-tour-control.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function DmTourControl() { }
if (false) {
/** @type {?} */
DmTourControl.prototype.id;
/** @type {?|undefined} */
DmTourControl.prototype.children;
/** @type {?|undefined} */
DmTourControl.prototype.text;
/** @type {?|undefined} */
DmTourControl.prototype.el;
/** @type {?|undefined} */
DmTourControl.prototype.shape;
/** @type {?|undefined} */
DmTourControl.prototype.pos;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/models/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/coercions.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} value
* @return {?}
*/
function _isNumberValue(value) {
return !isNaN(parseFloat((/** @type {?} */ (value)))) && !isNaN(Number(value));
}
/**
* @param {?} value
* @return {?}
*/
function coerceCssPixelValue(value) {
if (value == null) {
return '';
}
return typeof value === 'string' ? value : value + "px";
}
/**
* @param {?} value
* @return {?}
*/
function toBoolean(value) {
return value != null && "" + value !== 'false';
}
/**
* @param {?} value
* @param {?=} fallbackValue
* @return {?}
*/
function toNumber(value, fallbackValue) {
if (fallbackValue === void 0) { fallbackValue = 0; }
return _isNumberValue(value) ? Number(value) : fallbackValue;
}
/**
* @param {?} value
* @return {?}
*/
function toCssPixel(value) {
return coerceCssPixelValue(value);
}
/**
* @template T, D
* @param {?} name
* @param {?} fallback
* @return {?}
*/
function propDecoratorFactory(name, fallback) {
/**
* @param {?} target
* @param {?} propName
* @return {?}
*/
function propDecorator(target, propName) {
/** @type {?} */
var privatePropName = "$$__" + propName;
if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
console.warn("The prop \"" + privatePropName + "\" is already exist, it will be overrided by " + name + " decorator.");
}
Object.defineProperty(target, privatePropName, {
configurable: true,
writable: true
});
Object.defineProperty(target, propName, {
get: /**
* @return {?}
*/
function () {
return this[privatePropName];
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this[privatePropName] = fallback(value);
}
});
}
return propDecorator;
}
/**
* @return {?}
*/
function InputBoolean() {
return propDecoratorFactory('InputBoolean', toBoolean);
}
/**
* @return {?}
*/
function InputCssPixel() {
return propDecoratorFactory('InputCssPixel', toCssPixel);
}
/**
* @return {?}
*/
function InputNumber() {
return propDecoratorFactory('InputNumber', toNumber);
}
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/logs.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: no-console
/** @type {?} */
var _D = console.debug;
/** @type {?} */
var _L = console.log;
/** @type {?} */
var _I = console.info;
/** @type {?} */
var _W = console.warn;
/** @type {?} */
var _E = console.error;
/** @type {?} */
var _tS = console.time;
/** @type {?} */
var _tL = ((/** @type {?} */ (console))).timeLog ? ((/** @type {?} */ (console))).timeLog : console.log;
/** @type {?} */
var _tE = console.timeEnd;
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/elems.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} elem
* @return {?}
*/
function isElemVisible(elem) {
if (!(!!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length))) {
return false;
}
var _a = elem.getBoundingClientRect(), top = _a.top, left = _a.left, height = _a.height, width = _a.width;
/** @type {?} */
var el = elem.parentNode;
do {
/** @type {?} */
var rect = el.getBoundingClientRect();
if (rect.height > 0 && rect.width > 0) {
if ((top <= rect.bottom === false)
|| ((top + height) <= rect.top)
|| (left <= rect.right === false)
|| ((left + width) <= rect.left)) {
return false;
}
}
el = el.parentNode;
} while (el != document.body);
return top <= document.documentElement.clientHeight && left <= document.documentElement.clientWidth;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/dm-tour.styles.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var GLOBAL_STYLES = "\n #ngxDmTourRoot,\n #ngxDmTourLoading,\n #ngxDmTourBackdrop,\n #ngxDmTourDialogContainer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n }\n #ngxDmTourLoading {\n background-color: transparent;\n transition: background-color .5s;\n }\n #ngxDmTourBackdrop {\n opacity: 0;\n transition: opacity .5s;\n }\n #ngxDmTourRoot.ngx-dm-tour-show #ngxDmTourBackdrop {\n opacity: var(--ngx-dm-tour-backdrop-opacity, .3);\n }\n #ngxDmTourRoot.ngx-dm-tour-show #ngxDmTourDialog {\n opacity: 1;\n }\n #ngxDmTourRoot.ngx-dm-tour-show .ngx-dm-tour-text {\n opacity: 1;\n }\n #ngxDmTourBackdrop.ngx-dm-tour-dialog {\n background-color: var(--ngx-dm-tour-backdrop-color, black);\n }\n #ngxDmTourDialogContainer {\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: auto;\n }\n #ngxDmTourDialog {\n transition: opacity .5s;\n opacity: 0;\n min-width: 800px;\n min-height: 600px;\n background-color: white;\n box-shadow: 0 0 10px rgba(0,153,228,.5);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 10px 0;\n position: relative;\n }\n #ngxDmTourDialogTitle {\n color: #0099e4;\n padding: 0 16px 8px;\n font-weight: bold;\n font-size: 1.5em;\n }\n #ngxDmTourDialogDesc {\n position: relative;\n display: flex;\n flex: 1;\n flex-basis: 1e-9px;\n }\n #ngxDmTourDialogDescInner {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n padding: 10px;\n }\n #ngxDmTourDialogFooter {\n padding: 8px 8px 0 8px;\n text-align: right;\n margin-top: 2px;\n }\n .ngx-dm-tour-button {\n transition: all .15s;\n height: 26px;\n line-height: 1.5;\n position: relative;\n display: inline-block;\n font-weight: 400;\n text-align: center;\n border: 1px solid #d9d9d9;\n cursor: pointer;\n padding: 0 8px;\n font-size: 14px;\n color: white;\n background-color: #0099e4;\n border-color: #1890ff;\n box-shadow: 0 2px 0 rgba(0,0,0,.045);\n }\n .ngx-dm-tour-button:hover {\n box-shadow: 0 2px 5px rgba(0,153,228,.5);\n top: 0 !important;\n }\n #ngxDmTourDialogBtnIndex:before {\n content: \"Content Index\"\n }\n #ngxDmTourDialogBtnControls{\n margin-left: 8px;\n position: absolute;\n top: -2px;\n right: 30px;\n border-bottom-left-radius: 12px;\n border-bottom-right-radius: 12px;\n padding: 0 8px;\n border-top: none;\n }\n #ngxDmTourDialogBtnControls:before {\n content: \"Highlight Important Controls\"\n }\n #ngxDmTourDialogBtnClose {\n position: absolute;\n right: 0;\n top: -2px;\n padding: 0 4px;\n border-radius: 0;\n border-bottom-left-radius: 50%;\n border-top: none;\n border-right: none;\n }\n #ngxDmTourDialogBtnClose:before {\n content: \"\\01F5D9\"\n }\n .ngx-dm-tour-text {\n transition: opacity .5s;\n opacity: 0;\n position: absolute;\n border: 2px solid white;\n border-radius: 8px;\n background: #0099e4;\n text-align: center;\n min-width: 70px;\n max-width: 400px;\n max-height: 200px;\n box-shadow: 0 0 4px rgba(0,0,0,.25);\n }\n .ngx-dm-tour-text > .ngx-dm-tour-text-inner {\n color: white;\n padding: 8px;\n }\n .ngx-dm-tour-text:after {\n border: 2px solid;\n border-color: transparent white white transparent;\n box-shadow: 2px 2px 2px rgba(0,0,0,.25);\n background: #0099e4;\n content: \" \";\n position: absolute;\n z-index: -1\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-top-left:after {\n bottom: -8px;\n left: 8px;\n width: 16px;\n height: 16px;\n transform: rotate(45deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-top-center:after {\n bottom: -8px;\n left: calc(50% - 8px);\n width: 16px;\n height: 16px;\n transform: rotate(45deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-top-right:after {\n bottom: -8px;\n right: 8px;\n width: 16px;\n height: 16px;\n transform: rotate(45deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-bottom-left:after {\n top: -8px;\n left: 8px;\n width: 16px;\n height: 16px;\n transform: rotate(-135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-bottom-center:after {\n top: -8px;\n left: calc(50% - 8px);\n width: 16px;\n height: 16px;\n transform: rotate(-135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-bottom-right:after {\n top: -8px;\n right: 8px;\n width: 16px;\n height: 16px;\n transform: rotate(-135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-right-top:after {\n top: 8px;\n left: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-right-center:after {\n top: calc(50% - 8px);\n left: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-right-bottom:after {\n bottom: 8px;\n left: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(135deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-left-top:after {\n top: 8px;\n right: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(-45deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-left-center:after {\n top: calc(50% - 8px);\n right: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(-45deg);\n }\n .ngx-dm-tour-text.ngx-dm-tour-text-left-bottom:after {\n bottom: 8px;\n right: -8px;\n width: 16px;\n height: 16px;\n transform: rotate(-45deg);\n }\n";
/**
* @fileoverview added by tsickle
* Generated from: lib/dm-tour.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DmTourService = /** @class */ (function () {
function DmTourService(_rendererFactory, _http, document, cfg) {
var _this = this;
this._rendererFactory = _rendererFactory;
this._http = _http;
this.document = document;
this._controls = {};
this._hlVisible = null;
this._cfg = new DmTourConfig(cfg);
this._r2 = this._rendererFactory.createRenderer(null, null);
if (this._cfg.loadIndexOnStart) {
this._addGlobalStyles();
this._loadSections().subscribe((/**
* @return {?}
*/
function () { }), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}
if (ResizeObserver) {
/** @type {?} */
var resized_1 = new Subject();
new ResizeObserver((/**
* @return {?}
*/
function () { return resized_1.next(); })).observe(this.document.body);
resized_1.pipe(debounceTime(500)).subscribe((/**
* @return {?}
*/
function () { return _this._resized(); }));
}
}
/**
* @private
* @return {?}
*/
DmTourService.prototype._resized = /**
* @private
* @return {?}
*/
function () {
this._L('_resized', this._hlVisible);
if (this._r2 && this._root && this._hlVisible && this._hlVisible.type == 'controls') {
/** @type {?} */
var bd = this.document.querySelector('#ngxDmTourRoot');
this._L('_resized, bd:', bd);
if (bd) {
bd.remove();
this._root = null;
}
if (this._onClickRemove) {
this._onClickRemove();
this._onClickRemove = null;
}
if (this._onKeyupRemove) {
this._onKeyupRemove();
this._onKeyupRemove = null;
}
/** @type {?} */
var sid = this._hlVisible.sectionId;
this._hlVisible = null;
this._showControlsHelp(sid);
}
};
/**
* @param {?} sectionId
* @param {?} id
* @param {?} el
* @return {?}
*/
DmTourService.prototype.registerControl = /**
* @param {?} sectionId
* @param {?} id
* @param {?} el
* @return {?}
*/
function (sectionId, id, el) {
if (!sectionId || !id || !el) {
return;
}
this._L("registerControl, sectionId: " + sectionId + ", is: " + id + ", el:", el);
if (!this._controls[sectionId]) {
this._controls[sectionId] = {};
}
if (!this._controls[sectionId][id]) {
this._controls[sectionId][id] = { id: id };
}
this._controls[sectionId][id].el = el.nativeElement;
};
/**
* @param {?} sectionId
* @param {?} id
* @return {?}
*/
DmTourService.prototype.unregisterControl = /**
* @param {?} sectionId
* @param {?} id
* @return {?}
*/
function (sectionId, id) {
if (!this._controls[sectionId] || this._controls[sectionId][id]) {
return;
}
this._L("unregisterControl, sectionId: " + sectionId + ", is: " + id);
delete this._controls[sectionId][id].el;
};
/**
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype.showControlsHelp = /**
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var _this = this;
if (this._hlVisible) {
return;
}
if (!this._sections) {
this._addGlobalStyles();
this._loadSections().subscribe((/**
* @return {?}
*/
function () {
_this._loadSectionControls(sectionId).subscribe((/**
* @return {?}
*/
function () { return _this._showControlsHelp(sectionId); }), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}
else if (!this._sections[sectionId]) {
this._handleLoadError("There is no a section \"" + sectionId + "\" defined.");
}
else if (this._sections[sectionId] && !this._sections[sectionId].controlsLoaded) {
this._loadSectionControls(sectionId).subscribe((/**
* @return {?}
*/
function () { return _this._showControlsHelp(sectionId); }), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}
else {
this._showControlsHelp(sectionId);
}
};
/**
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype.showHelp = /**
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var _this = this;
if (this._hlVisible) {
return;
}
if (!this._sections) {
this._addGlobalStyles();
this._loadSections().subscribe((/**
* @return {?}
*/
function () {
_this._loadSectionHtml(sectionId).subscribe((/**
* @return {?}
*/
function () { return _this._showHelp(sectionId); }), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}
else if (!this._sections[sectionId]) {
this._handleLoadError("There is no a section \"" + sectionId + "\" defined.");
}
else if (this._sections[sectionId] && !this._sections[sectionId].controlsLoaded) {
this._loadSectionHtml(sectionId).subscribe((/**
* @return {?}
*/
function () { return _this._showHelp(sectionId); }), (/**
* @param {?} err
* @return {?}
*/
function (err) { return _this._handleLoadError(err); }));
}
else {
this._showHelp(sectionId);
}
};
/**
* @private
* @return {?}
*/
DmTourService.prototype._loadSections = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._showLoading();
return new Observable((/**
* @param {?} obs
* @return {?}
*/
function (obs) {
_this._http.get(_this._cfg.rootPath + '/index.json').subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
var e_1, _a;
_this._hideLoading();
if (res && res.sections) {
_this._sections = {};
try {
for (var _b = __values(res.sections), _c = _b.next(); !_c.done; _c = _b.next()) {
var section = _c.value;
_this._sections[section.id] = section;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
obs.next();
}
else {
obs.error('Wrong data format in ${this._cfg.rootPath}/index.json');
}
}), (/**
* @param {?} err
* @return {?}
*/
function (err) {
_this._hideLoading();
obs.error(err);
}));
}));
};
/**
* @private
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype._loadSectionControls = /**
* @private
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var _this = this;
this._showLoading();
if (!this._controls[sectionId]) {
this._controls[sectionId] = {};
}
return new Observable((/**
* @param {?} obs
* @return {?}
*/
function (obs) {
_this._http.get(_this._cfg.rootPath + "/" + sectionId + "/index.json").subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
var e_2, _a;
_this._hideLoading();
if (res && res.controls) {
try {
for (var _b = __values(res.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
var ctrl = _c.value;
/** @type {?} */
var c = _this._controls[sectionId][ctrl.id];
_this._controls[sectionId][ctrl.id] = ctrl;
_this._controls[sectionId][ctrl.id].el = c ? c.el : null;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
obs.next();
}
else {
obs.error('${this._cfg.rootPath}/${sectionId}/index.json');
}
}), (/**
* @param {?} err
* @return {?}
*/
function (err) {
_this._hideLoading();
obs.error(err);
}));
}));
};
/**
* @private
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype._loadSectionHtml = /**
* @private
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var _this = this;
this._showLoading();
return new Observable((/**
* @param {?} obs
* @return {?}
*/
function (obs) {
_this._http.get(_this._cfg.rootPath + "/" + sectionId + "/index.html", { responseType: 'text' }).subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
_this._L('section html:', res);
_this._hideLoading();
_this._sections[sectionId].html = res;
obs.next();
}), (/**
* @param {?} err
* @return {?}
*/
function (err) {
_this._hideLoading();
obs.error(err);
}));
}));
};
/**
* @private
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype._showControlsHelp = /**
* @private
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var e_3, _a, e_4, _b, e_5, _c;
var _this = this;
/** @type {?} */
var ids = this._controls[sectionId] ? Object.keys(this._controls[sectionId]) : [];
if (!ids || ids.length == 0) {
this._W("There are no visible controls registered for the section \"" + sectionId + "\"");
return;
}
/** @type {?} */
var R = this._r2;
/** @type {?} */
var bd = this.document.querySelector('#ngxDmTourRoot');
if (bd) {
R.removeChild(this.document.body, bd);
}
/** @type {?} */
var svg = R.createElement('svg', 'svg');
/** @type {?} */
var defs = R.createElement('defs', 'svg');
/** @type {?} */
var stop;
/** @type {?} */
var rgr = R.createElement('radialGradient', 'svg');
R.setAttribute(rgr, 'id', 'ngxDmTourGradientR');
stop = R.createElement('stop', 'svg');
R.setAttribute(stop, 'offset', '90%');
R.setAttribute(stop, 'stop-color', 'black');
R.appendChild(rgr, stop);
stop = R.createElement('stop', 'svg');
R.setAttribute(stop, 'offset', '100%');
R.setAttribute(stop, 'stop-color', 'transparent');
R.appendChild(rgr, stop);
R.appendChild(defs, rgr);
/** @type {?} */
var mask = R.createElement('mask', 'svg');
R.setAttribute(mask, 'id', 'ngxDmTourControlsMask');
/** @type {?} */
var mrect = R.createElement('rect', 'svg');
R.setAttribute(mrect, 'width', '10000');
R.setAttribute(mrect, 'height', '10000');
R.setAttribute(mrect, 'fill', 'white');
R.appendChild(mask, mrect);
/** @type {?} */
var tts = [];
try {
for (var ids_1 = __values(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
var id = ids_1_1.value;
/** @type {?} */
var c = this._controls[sectionId][id];
if (c && c.el) {
if (!c.children && c.text) {
/** @type {?} */
var tt = this._addControlHl(c, mask);
if (tt) {
tts.push(tt);
}
}
else if (c.children) {
try {
for (var _d = (e_4 = void 0, __values(c.children)), _e = _d.next(); !_e.done; _e = _d.next()) {
var ch = _e.value;
if (ch.text) {
/** @type {?} */
var tt = this._addControlHl(ch, mask);
if (tt) {
tts.push(tt);
}
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
}
finally { if (e_4) throw e_4.error; }
}
}
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (ids_1_1 && !ids_1_1.done && (_a = ids_1.return)) _a.call(ids_1);
}
finally { if (e_3) throw e_3.error; }
}
if (tts.length == 0) {
this._W("There are no visible controls registered for the section \"" + sectionId + "\"");
return;
}
R.appendChild(defs, mask);
R.appendChild(svg, defs);
/** @type {?} */
var rect = R.createElement('rect', 'svg');
R.setAttribute(rect, 'width', '10000');
R.setAttribute(rect, 'height', '10000');
R.setAttribute(rect, 'x', '0');
R.setAttribute(rect, 'y', '0');
R.setAttribute(rect, 'fill', 'var(--ngx-dm-tour-backdrop-color, black)');
R.setAttribute(rect, 'mask', 'url(#ngxDmTourControlsMask)');
R.appendChild(svg, rect);
R.setAttribute(svg, 'width', '10000px');
R.setAttribute(svg, 'height', '10000px');
this._root = R.createElement('div');
R.setAttribute(this._root, 'id', 'ngxDmTourRoot');
if (this._cfg.customCssClass) {
R.addClass(this._root, this._cfg.customCssClass);
}
/** @type {?} */
var root = R.createElement('div');
R.appendChild(this._root, root);
R.setAttribute(root, 'id', 'ngxDmTourBackdrop');
R.appendChild(root, svg);
try {
for (var tts_1 = __values(tts), tts_1_1 = tts_1.next(); !tts_1_1.done; tts_1_1 = tts_1.next()) {
var tt = tts_1_1.value;
R.appendChild(this._root, tt);
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (tts_1_1 && !tts_1_1.done && (_c = tts_1.return)) _c.call(tts_1);
}
finally { if (e_5) throw e_5.error; }
}
this.document.activeElement.blur();
this._hlVisible = { type: 'controls', sectionId: sectionId };
R.appendChild(this.document.body, this._root);
setTimeout((/**
* @return {?}
*/
function () {
R.addClass(_this._root, 'ngx-dm-tour-show');
_this._onClickRemove = R.listen(_this.document, 'click', (/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.hideControlsHelp(e); }));
_this._onKeyupRemove = R.listen(_this.document, 'keyup', (/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.hideControlsHelp(e); }));
}), 300);
};
/**
* @private
* @param {?} c
* @param {?} mask
* @return {?}
*/
DmTourService.prototype._addControlHl = /**
* @private
* @param {?} c
* @param {?} mask
* @return {?}
*/
function (c, mask) {
/** @type {?} */
var dr = this.document.body.getBoundingClientRect();
/** @type {?} */
var MR = Math.round;
/** @type {?} */
var R = this._r2;
/** @type {?} */
var el = typeof c.el === 'string' ? this.document.querySelector(c.el) : c.el;
/** @type {?} */
var b = this._getBoundaries(el);
/** @type {?} */
var vis = isElemVisible(el);
this._L('control:', c, '\nelem:', el, '\nboundaries:', b, '\nisVisible:', vis);
if (!vis || !b || b.width == 0 || b.height == 0) {
return null;
}
/** @type {?} */
var shape = c.shape
? c.shape
: this._cfg.defaultShape == 'auto'
? (b.width > 200 || b.height > 200 ? 'square' : 'circle')
: this._cfg.defaultShape;
if (shape == 'square') {
/** @type {?} */
var hl = R.createElement('rect', 'svg');
R.setAttribute(hl, 'x', '' + MR(b.left - 10));
R.setAttribute(hl, 'y', '' + MR(b.top - 10));
R.setAttribute(hl, 'width', '' + MR(b.width + 20));
R.setAttribute(hl, 'height', '' + MR(b.height + 20));
R.setAttribute(hl, 'rx', '8');
R.setAttribute(hl, 'fill', 'black');
R.setAttribute(hl, 'stroke', 'black');
R.setAttribute(hl, 'stroke-width', 'var(--ngx-dm-tour-hl-stroke-width, 15)');
R.setAttribute(hl, 'stroke-opacity', 'var(--ngx-dm-tour-hl-stroke-opacity, .3)');
R.appendChild(mask, hl);
}
else {
/** @type {?} */
var hl = R.createElement('circle', 'svg');
/** @type {?} */
var r = b.width > b.height ? b.width / 2 : b.height / 2;
R.setAttribute(hl, 'cx', '' + MR(b.left + b.width / 2));
R.setAttribute(hl, 'cy', '' + MR(b.top + b.height / 2));
R.setAttribute(hl, 'r', '' + MR(r + 10));
R.setAttribute(hl, 'fill', 'black');
R.setAttribute(hl, 'stroke', 'black');
R.setAttribute(hl, 'stroke-width', 'var(--ngx-dm-tour-hl-stroke-width, 15)');
R.setAttribute(hl, 'stroke-opacity', 'var(--ngx-dm-tour-hl-stroke-opacity, .3)');
R.appendChild(mask, hl);
}
/** @type {?} */
var tt = R.createElement('div');
R.addClass(tt, 'ngx-dm-tour-text');
/** @type {?} */
var tti = R.createElement('div');
R.addClass(tti, 'ngx-dm-tour-text-inner');
R.appendChild(tti, R.createText(c.text));
R.appendChild(tt, tti);
/** @type {?} */
var pos = c.pos && c.pos != 'auto' ? c.pos.split('-') : null;
if (!pos) {
if (b.top > 250) {
pos = ['top', 'center'];
}
else if (dr.width - b.right > 250) {
pos = ['right', 'center'];
}
else if (dr.height - b.bottom > 250) {
pos = ['bottom', 'center'];
}
else if (b.left > 250) {
pos = ['left', 'center'];
}
else {
pos = ['center', 'center'];
}
}
else if (pos.length == 1) {
pos.push('center');
}
/** @type {?} */
var x = MR(b.left + b.width / 2);
/** @type {?} */
var y = MR(b.top + b.height / 2);
/** @type {?} */
var tx = -50;
/** @type {?} */
var ty = -50;
if (pos[0] == 'top') {
ty = -100;
y = b.top - 20;
if (pos[1] == 'left') {
tx = 0;
x = b.left;
}
else if (pos[1] == 'right') {
tx = -100;
x = b.right;
}
}
else if (pos[0] == 'bottom') {
ty = 0;
y = b.bottom + 20;
if (pos[1] == 'left') {
tx = 0;
x = b.left;
}
else if (pos[1] == 'right') {
tx = -100;
x = b.right;
}
}
else if (pos[0] == 'left') {
tx = -100;
x = b.left - 20;
if (pos[1] == 'top') {
ty = 0;
y = b.top;
}
else if (pos[1] == 'bottom') {
ty = -100;
y = b.bottom;
}
}
else if (pos[0] == 'right') {
tx = 0;
x = b.right + 20;
if (pos[1] == 'top') {
ty = 0;
y = b.top;
}
else if (pos[1] == 'bottom') {
ty = -100;
y = b.bottom;
}
}
// console.log(`[${c.id}] pos:`, pos, '\n\tb:', b, `-> ${x}x${y}`, '\n\tc:', c);
R.setStyle(tt, 'top', y + "px");
R.setStyle(tt, 'left', x + "px");
R.setStyle(tt, 'transform', "translate(" + tx + "%, " + ty + "%) scale(1)");
R.addClass(tt, "ngx-dm-tour-text-" + pos[0] + "-" + pos[1]);
return tt;
};
/**
* @private
* @param {?} sectionId
* @return {?}
*/
DmTourService.prototype._showHelp = /**
* @private
* @param {?} sectionId
* @return {?}
*/
function (sectionId) {
var _this = this;
/** @type {?} */
var sec = this._sections[sectionId];
/** @type {?} */
var R = this._r2;
/** @type {?} */
var obd = this.document.querySelector('ngxDmTourRoot');
if (obd) {
obd.remove();
}
this._root = R.createElement('div');
R.setAttribute(this._root, 'id', 'ngxDmTourRoot');
if (this._cfg.customCssClass) {
R.addClass(this._root, this._cfg.customCssClass);
}
/** @type {?} */
var root = R.createElement('div');
R.appendChild(this._root, root);
R.setAttribute(root, 'id', 'ngxDmTourBackdrop');
R.addClass(root, 'ngx-dm-tour-dialog');
/** @type {?} */
var dc = R.createElement('div');
R.appendChild(this._root, dc);
R.setAttribute(dc, 'id', 'ngxDmTourDialogContainer');
/** @type {?} */
var d = R.createElement('div');
R.appendChild(dc, d);
R.setAttribute(d, 'id', 'ngxDmTourDialog');
R.addClass(d, "ngx-dm-tour-section-" + sec.id);
/** @type {?} */
var btnClose = R.createElement('button');
R.appendChild(d, btnClose);
R.setAttribute(btnClose, 'id', 'ngxDmTourDialogBtnClose');
R.addClass(btnClose, 'ngx-dm-tour-button');
/** @type {?} */
var btnControls = R.createElement('button');
R.appendChild(d, btnControls);
R.setAttribute(btnControls, 'id', 'ngxDmTourDialogBtnControls');
R.addClass(btnControls, 'ngx-dm-tour-button');
R.listen(btnControls, 'click', (/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.hideHelp(e, (/**
* @return {?}
*/
function () { return _this.showControlsHelp(sectionId); })); }));
/** @type {?} */
var dt = R.createElement('div');
R.appendChild(d, dt);
R.setAttribute(dt, 'id', 'ngxDmTourDialogTitle');
R.appendChild(dt, R.createText("Section \"" + sec.title + "\""));
/** @type {?} */
var dd = R.createElement('div');
R.appendChild(d, dd);
R.setAttribute(dd, 'id', 'ngxDmTourDialogDesc');
/** @type {?} */
var ddi = R.createElement('div');
R.appendChild(dd, ddi);
R.setAttribute(ddi, 'id', 'ngxDmTourDialogDescInner');
ddi.innerHTML = sec.html;
this.document.activeElement.blur();
this._hlVisible = { type: 'help', sectionId: sectionId };
R.appendChild(this.document.body, this._root);
this._L('_showHelp, root:', this._root);
setTimeout((/**
* @return {?}
*/
function () {
R.addClass(_this._root, 'ngx-dm-tour-show');
_this._onClickRemove = R.listen(_this.document, 'click', (/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.hideControlsHelp(e); }));
_this._onKeyupRemove = R.listen(_this.document, 'keyup', (/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.hideControlsHelp(e); }));
}));
};
/**
* @param {?=} e
* @return {?}
*/
DmTourService.prototype.hideControlsHelp = /**
* @param {?=} e
* @return {?}
*/
function (e) {
this.hideHelp(e);
};
/**
* @param {?=} e
* @param {?=} cb
* @return {?}
*/
DmTourService.prototype.hideHelp = /**
* @param {?=} e
* @param {?=} cb
* @return {?}
*/
function (e, cb) {
var _this = this;
this._L('hideHelp');
if (e) {
e.stopImmediatePropagation();
e.preventDefault();
}
if (this._onClickRemove) {
this._onClickRemove();
this._onClickRemove = null;
}
if (this._onKeyupRemove) {
this._onKeyupRemove();
this._onKeyupRemove = null;
}
if (this._root && this._r2) {
this._r2.removeClass(this._root, 'ngx-dm-tour-show');
setTimeout((/**
* @return {?}
*/
function () {
if (_this._root) {
_this._root.remove();
}
_this._hlVisible = null;
if (cb) {
cb();
}
}), 500);
}
else {
this._hlVisible = null;
if (cb) {
cb();
}
}
};
/**
* @private
* @param {?} el
* @return {?}
*/
DmTourService.prototype._getBoundaries = /**
* @private
* @param {?} el
* @return {?}
*/
function (el) {
if (!el || !el.getBoundingClientRect) {
return null;
}
return el.getBoundingClientRect();
};
/**
* @private
* @return {?}
*/
DmTourService.prototype._showLoading = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var R = this._r2;
/** @type {?} */
var obd = this.document.querySelector('#ngxDmTourLoading');
if (obd) {
obd.remove();
}
/** @type {?} */
var root = R.createElement('div');
R.setAttribute(root, 'id', 'ngxDmTourLoading');
if (this._cfg.customCssClass) {
R.addClass(root, this._cfg.customCssClass);
}
root.innerHTML = this._cfg.loaderHtml;
this.document.activeElement.blur();
R.appendChild(this.document.body, root);
setTimeout((/**
* @return {?}
*/
function () { return R.setStyle(root, 'background-color', 'var(--ngx-dm-tour-loading-bg-color, rgba(0,0,0,.3))'); }));
};
/**
* @private
* @return {?}
*/
DmTourService.prototype._hideLoading = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var R = this._r2;
/** @type {?} */
var obd = this.document.querySelector('#ngxDmTourLoading');
if (obd) {
obd.remove();
}
};
/**
* @private
* @param {?} err
* @return {?}
*/
DmTourService.prototype._handleLoadError = /**
* @private
* @param {?} err
* @return {?}
*/
function (err) {
this._W('[ngx-dm-tour] load error:', err);
};
/**
* @private
* @return {?}
*/
DmTourService.prototype._addGlobalStyles = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var obd = this.document.head.querySelector('#ngxDmTourStyles');
if (!obd) {
/** @type {?} */
var R = this._r2;
/** @type {?} */
var root = R.createElement('style');
R.setAttribute(root, 'id', 'ngxDmTourStyles');
root.innerHTML = GLOBAL_STYLES;
R.appendChild(this.document.head, root);
}
};
/**
* @private
* @param {...?} args
* @return {?}
*/
DmTourService.prototype._L = /**
* @private
* @param {...?} args
* @return {?}
*/
function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (this._cfg.debug > 0) {
console.log.apply(console, __spread(['[ngx-dm-tour]'], args));
}
};
/**
* @private
* @param {...?} args
* @return {?}
*/
DmTourService.prototype._W = /**
* @private
* @param {...?} args
* @return {?}
*/
function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (this._cfg.debug > 1) {
console.warn.apply(console, __spread(['[ngx-dm-tour]'], args));
}
};
DmTourService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
DmTourService.ctorParameters = function () { return [
{ type: RendererFactory2 },
{ type: HttpClient },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: DmTourConfig, decorators: [{ type: Inject, args: [DM_TOUR_CONF,] }, { type: Optional }] }
]; };
/** @nocollapse */ DmTourService.ɵprov = ɵɵdefineInjectable({ factory: function DmTourService_Factory() { return new DmTourService(ɵɵinject(RendererFactory2), ɵɵinject(HttpClient), ɵɵinject(DOCUMENT), ɵɵinject(DM_TOUR_CONF, 8)); }, token: DmTourService, providedIn: "root" });
return DmTourService;
}());
if (false) {
/**
* @type {?}
* @private
*/
DmTourService.prototype._cfg;
/**
* @type {?}
* @private
*/
DmTourService.prototype._sections;
/**
* @type {?}
* @private
*/
DmTourService.prototype._controls;
/**
* @type {?}
* @private
*/
DmTourService.prototype._r2;
/**
* @type {?}
* @private
*/
DmTourService.prototype._root;
/**
* @type {?}
* @private
*/
DmTourService.prototype._onClickRemove;
/**
* @type {?}
* @private
*/
DmTourService.prototype._onKeyupRemove;
/**
* @type {?}
* @private
*/
DmTourService.prototype._hlVisible;
/**
* @type {?}
* @private
*/
DmTourService.prototype._rendererFactory;
/**
* @type {?}
* @private
*/
DmTourService.prototype._http;
/**
* @type {?}
* @private
*/
DmTourService.prototype.document;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/dm-tour.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DmTourDirective = /** @class */ (function () {
function DmTourDirective(_el, _ts) {
this._el = _el;
this._ts = _ts;
}
/**
* @return {?}
*/
DmTourDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (!this.item) {
return;
}
/** @type {?} */
var path = this.item.split('.');
if (!path || path.length != 2) {
console.warn('[dm-tour] tour element ID must be in form "sectionID.ItemID": ', this.item);
return;
}
this._ts.registerControl(path[0], path[1], this._el);
};
/**
* @retu