@energycap/components 0.43.11-ECAP-30624-List-Selection-Toolbar-Changes.20250806-1516 → 0.43.12-ECAP-30812-tours-removed.20250818-1352
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/energycap-components.min.css +1 -1
- package/esm2022/lib/components.module.mjs +1 -6
- package/esm2022/lib/display/tooltip/tooltip.component.mjs +1 -1
- package/esm2022/public-api.mjs +1 -4
- package/fesm2022/energycap-components.mjs +1 -494
- package/fesm2022/energycap-components.mjs.map +1 -1
- package/lib/components.module.d.ts +15 -16
- package/lib/display/tooltip/tooltip.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +0 -3
- package/src/styles/_global-variables.scss +0 -3
- package/esm2022/lib/display/tour/tour-types.mjs +0 -34
- package/esm2022/lib/display/tour/tour.component.mjs +0 -398
- package/esm2022/lib/display/tour/tour.service.mjs +0 -75
- package/lib/display/tour/tour-types.d.ts +0 -70
- package/lib/display/tour/tour.component.d.ts +0 -147
- package/lib/display/tour/tour.service.d.ts +0 -38
@@ -10518,495 +10518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
10518
10518
|
args: ['mouseleave']
|
10519
10519
|
}] } });
|
10520
10520
|
|
10521
|
-
class Tour {
|
10522
|
-
constructor() {
|
10523
|
-
/** Unique identifier for the tour */
|
10524
|
-
this.id = '';
|
10525
|
-
/** List of tour steps to present to the user */
|
10526
|
-
this.steps = [];
|
10527
|
-
}
|
10528
|
-
}
|
10529
|
-
class TourStep {
|
10530
|
-
constructor() {
|
10531
|
-
/** Unique identifier for the tour step */
|
10532
|
-
this.id = '';
|
10533
|
-
/** HTML formatted text that contains the primary content of the tour step */
|
10534
|
-
this.text = '';
|
10535
|
-
}
|
10536
|
-
}
|
10537
|
-
class TourAnchor {
|
10538
|
-
constructor() {
|
10539
|
-
/**
|
10540
|
-
* Selector to attach the tooltip to. If defined but does not exist in the
|
10541
|
-
* DOM skip this step because it is probably hidden to the user because of
|
10542
|
-
* permissions.
|
10543
|
-
*/
|
10544
|
-
this.selector = '';
|
10545
|
-
}
|
10546
|
-
}
|
10547
|
-
class TourEvent {
|
10548
|
-
constructor(tours, tourAction = 'start', isAutoStart = false) {
|
10549
|
-
this.tours = tours;
|
10550
|
-
this.tourAction = tourAction;
|
10551
|
-
this.isAutoStart = isAutoStart;
|
10552
|
-
}
|
10553
|
-
}
|
10554
|
-
|
10555
|
-
class TourService {
|
10556
|
-
constructor(cacheService) {
|
10557
|
-
this.cacheService = cacheService;
|
10558
|
-
this.events = new Subject();
|
10559
|
-
}
|
10560
|
-
/**
|
10561
|
-
* Start a tour of the application. Allows one or many tours to be sent in, each will
|
10562
|
-
* follow the next. If multiple tours have exit steps defined only the final tour will
|
10563
|
-
* execute the exit step.
|
10564
|
-
* @param tours
|
10565
|
-
*/
|
10566
|
-
start(tours, isAutoStart = false) {
|
10567
|
-
let tourEvent = new TourEvent(tours, 'start', isAutoStart);
|
10568
|
-
this.events.next(tourEvent);
|
10569
|
-
}
|
10570
|
-
end() {
|
10571
|
-
let tourEvent = new TourEvent([], 'end');
|
10572
|
-
this.events.next(tourEvent);
|
10573
|
-
}
|
10574
|
-
append(tours, isAutoStart = false) {
|
10575
|
-
let tourEvent = new TourEvent(tours, 'append', isAutoStart);
|
10576
|
-
this.events.next(tourEvent);
|
10577
|
-
}
|
10578
|
-
/**
|
10579
|
-
* Returns a formatted cache key for tours
|
10580
|
-
* @param tour
|
10581
|
-
* @returns
|
10582
|
-
*/
|
10583
|
-
getCacheKey(tour) {
|
10584
|
-
return `TourCompleted_${tour.id}`;
|
10585
|
-
}
|
10586
|
-
/**
|
10587
|
-
* Given a tour, check to see if it's been completed
|
10588
|
-
* @param tour
|
10589
|
-
* @returns
|
10590
|
-
*/
|
10591
|
-
hasTourBeenViewed(tour) {
|
10592
|
-
let cacheValue = this.cacheService.getItem(this.getCacheKey(tour));
|
10593
|
-
if (cacheValue) {
|
10594
|
-
return cacheValue.completed;
|
10595
|
-
}
|
10596
|
-
else {
|
10597
|
-
// If no cache value then we never ran through it and wrote a key
|
10598
|
-
return false;
|
10599
|
-
}
|
10600
|
-
}
|
10601
|
-
/**
|
10602
|
-
* Given a list of tours, check to see if any will show to the user
|
10603
|
-
* @param tours
|
10604
|
-
* @returns
|
10605
|
-
*/
|
10606
|
-
haveAllToursBeenViewed(tours) {
|
10607
|
-
let viewedCount = 0;
|
10608
|
-
tours.forEach(tour => {
|
10609
|
-
if (this.hasTourBeenViewed(tour)) {
|
10610
|
-
viewedCount++;
|
10611
|
-
}
|
10612
|
-
});
|
10613
|
-
return viewedCount === tours.length;
|
10614
|
-
}
|
10615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TourService, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
10616
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TourService, providedIn: 'root' }); }
|
10617
|
-
}
|
10618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TourService, decorators: [{
|
10619
|
-
type: Injectable,
|
10620
|
-
args: [{
|
10621
|
-
providedIn: 'root'
|
10622
|
-
}]
|
10623
|
-
}], ctorParameters: () => [{ type: CacheService }] });
|
10624
|
-
|
10625
|
-
class TourComponent {
|
10626
|
-
constructor(tourService, tooltipService, telemetryService, cacheService, dialogService, translateService, document) {
|
10627
|
-
this.tourService = tourService;
|
10628
|
-
this.tooltipService = tooltipService;
|
10629
|
-
this.telemetryService = telemetryService;
|
10630
|
-
this.cacheService = cacheService;
|
10631
|
-
this.dialogService = dialogService;
|
10632
|
-
this.translateService = translateService;
|
10633
|
-
this.document = document;
|
10634
|
-
/** Used to tell the UI that the step being shown is an exit step. This will change the
|
10635
|
-
* link text and the action when clicked
|
10636
|
-
*/
|
10637
|
-
this.showDoneButton = false;
|
10638
|
-
/** Array of tours provided when the start tour event was detected */
|
10639
|
-
this.tours = [];
|
10640
|
-
// Couple indexes for the current tour/step stored for easier reference when knowing if we are at the end of the steps/tours
|
10641
|
-
this.currentStepIndex = -1;
|
10642
|
-
this.currentTourIndex = -1;
|
10643
|
-
/** Used to know if the restore step should be triggered when the tour is dismissed */
|
10644
|
-
this.isAutoStart = false;
|
10645
|
-
this.destroyed = new Subject();
|
10646
|
-
}
|
10647
|
-
ngOnInit() {
|
10648
|
-
this.tourService.events.pipe(takeUntil(this.destroyed)).subscribe(async (event) => {
|
10649
|
-
if (event.tourAction === 'start') {
|
10650
|
-
await this.setupTourComponent(event);
|
10651
|
-
}
|
10652
|
-
else if (event.tourAction === 'end') {
|
10653
|
-
if (this.currentTour) {
|
10654
|
-
this.writeCompletionKeyForAllTours();
|
10655
|
-
await this.endTour();
|
10656
|
-
}
|
10657
|
-
}
|
10658
|
-
else if (event.tourAction === 'append') {
|
10659
|
-
let visibleTours = event.tours;
|
10660
|
-
// If this was triggered via auto start then we need to remove any tours that have been completed
|
10661
|
-
if (event.isAutoStart) {
|
10662
|
-
visibleTours = this.removeCompletedTours(visibleTours);
|
10663
|
-
}
|
10664
|
-
// If there is already a current tour, then we need to append the new tours to the current tour
|
10665
|
-
if (this.currentTour) {
|
10666
|
-
this.tours = this.tours.concat(visibleTours);
|
10667
|
-
}
|
10668
|
-
else {
|
10669
|
-
// There is not a current tour, so treat this as a start event
|
10670
|
-
await this.setupTourComponent(event);
|
10671
|
-
}
|
10672
|
-
}
|
10673
|
-
});
|
10674
|
-
}
|
10675
|
-
ngOnDestroy() {
|
10676
|
-
this.destroyed.next();
|
10677
|
-
this.destroyed.unsubscribe();
|
10678
|
-
}
|
10679
|
-
/**
|
10680
|
-
* Called when a restore step has been completed
|
10681
|
-
*/
|
10682
|
-
async done() {
|
10683
|
-
this.writeCompletionKey(this.currentTour);
|
10684
|
-
await this.endTour();
|
10685
|
-
}
|
10686
|
-
/**
|
10687
|
-
* Called when a tour begins and when the user clicks next on the current tour step. It will handle any after click actions and then
|
10688
|
-
* find the next step and present it to the user and transition to a restore step or new tour if needed.
|
10689
|
-
*/
|
10690
|
-
async showNextStep() {
|
10691
|
-
// Before moving to the next step, make sure the current step does not have a click after defined. This could be hiding a menu
|
10692
|
-
// that was opened for the soon to be previous step.
|
10693
|
-
await this.waitForTimeout(this.handleClickAfter.bind(this));
|
10694
|
-
// Remove any previous tooltips
|
10695
|
-
this.removeTooltip();
|
10696
|
-
// Get our next step index to display to the user
|
10697
|
-
this.currentStepIndex = this.getNextAvailableStepIndex();
|
10698
|
-
if (this.currentStepIndex === -1) {
|
10699
|
-
// No more steps found, we either need to check for the exit step if this is the last tour
|
10700
|
-
// in the tours array or advance to the next tour
|
10701
|
-
if (this.currentTourIndex === this.tours.length - 1) {
|
10702
|
-
await this.handleExitStep();
|
10703
|
-
}
|
10704
|
-
else {
|
10705
|
-
// Write the completion key for the current tour before we move to the next
|
10706
|
-
this.writeCompletionKey(this.currentTour);
|
10707
|
-
this.currentTourIndex++;
|
10708
|
-
await this.showNextTour();
|
10709
|
-
}
|
10710
|
-
}
|
10711
|
-
else {
|
10712
|
-
this.currentTourStep = this.currentTour?.steps[this.currentStepIndex];
|
10713
|
-
// Now that we have our current step index, take care of any click before elements before showing the
|
10714
|
-
// tooltip. This could be opening a menu to get the tooltip element visible.
|
10715
|
-
await this.waitForTimeout(this.handleClickBefore.bind(this));
|
10716
|
-
// Click befores are done, now let's show the tooltip defined in the tour step
|
10717
|
-
await this.waitForTimeout(this.showStepTooltip.bind(this));
|
10718
|
-
}
|
10719
|
-
}
|
10720
|
-
async setupTourComponent(event) {
|
10721
|
-
// End any tours that may have been in progress if the user kicks off a new one
|
10722
|
-
if (this.currentTour) {
|
10723
|
-
this.writeCompletionKeyForAllTours();
|
10724
|
-
await this.endTour();
|
10725
|
-
}
|
10726
|
-
this.isAutoStart = event.isAutoStart;
|
10727
|
-
if (event.isAutoStart) {
|
10728
|
-
this.tours = this.removeCompletedTours(event.tours);
|
10729
|
-
}
|
10730
|
-
else {
|
10731
|
-
this.tours = event.tours;
|
10732
|
-
}
|
10733
|
-
if (this.tours.length) {
|
10734
|
-
this.showDoneButton = false;
|
10735
|
-
this.currentTourStep = undefined;
|
10736
|
-
this.currentStepIndex = -1;
|
10737
|
-
// Prime the index for the first tour
|
10738
|
-
this.currentTourIndex = 0;
|
10739
|
-
await this.showNextTour();
|
10740
|
-
}
|
10741
|
-
}
|
10742
|
-
/**
|
10743
|
-
* Shows a tour and emits an event that it was started
|
10744
|
-
* @param tour
|
10745
|
-
*/
|
10746
|
-
async showNextTour() {
|
10747
|
-
// Track a tour started event if the consumer of the library has telemetry configured
|
10748
|
-
this.telemetryService.trackEvent('TourStarted', { tourId: this.currentTour.id });
|
10749
|
-
let continueTour = true;
|
10750
|
-
if (this.isAutoStart && this.currentTourIndex === 0 && this.currentTour?.introDialog) {
|
10751
|
-
let result = await lastValueFrom(this.dialogService.openDialog(this.currentTour.introDialog.content, this.currentTour.introDialog.size ?? 'small', this.currentTour.introDialog.context ?? undefined, this.currentTour.introDialog.options ?? undefined));
|
10752
|
-
if (!result.save) {
|
10753
|
-
continueTour = false;
|
10754
|
-
this.writeCompletionKeyForAllTours();
|
10755
|
-
// Advance to the last tour if there are multiple for its exit step
|
10756
|
-
this.currentTourIndex = this.tours.length - 1;
|
10757
|
-
await this.handleExitStep();
|
10758
|
-
}
|
10759
|
-
}
|
10760
|
-
if (continueTour) {
|
10761
|
-
this.showNextStep();
|
10762
|
-
}
|
10763
|
-
}
|
10764
|
-
async endTour() {
|
10765
|
-
// Handle any click afters for the active step shown before shutting it down
|
10766
|
-
await this.waitForTimeout(this.handleClickAfter.bind(this));
|
10767
|
-
this.currentTourStep = undefined;
|
10768
|
-
this.tours = [];
|
10769
|
-
this.removeTooltip();
|
10770
|
-
}
|
10771
|
-
/**
|
10772
|
-
* Displays a tooltip for the current tour step
|
10773
|
-
*/
|
10774
|
-
async showStepTooltip() {
|
10775
|
-
// Track an event if the consumer of the library has telemetry configured
|
10776
|
-
this.telemetryService.trackEvent('TourStepChange', { tourId: this.currentTour.id, tourStepId: this.currentTourStep.id });
|
10777
|
-
const tooltipElement = this.document.querySelector(this.currentTourStep.anchor.selector);
|
10778
|
-
if (tooltipElement) {
|
10779
|
-
// Default width if none provided
|
10780
|
-
let stepWidth = 432;
|
10781
|
-
// Check the current tour step width and decide if it needs to change from the default value
|
10782
|
-
// based on whether the step defined it or not
|
10783
|
-
if (this.currentTourStep?.width !== undefined) {
|
10784
|
-
if (typeof this.currentTourStep.width === 'number') {
|
10785
|
-
stepWidth = this.currentTourStep.width;
|
10786
|
-
}
|
10787
|
-
else if (this.currentTourStep.width === 'auto') {
|
10788
|
-
stepWidth = undefined;
|
10789
|
-
}
|
10790
|
-
}
|
10791
|
-
const options = {
|
10792
|
-
id: `${this.currentTour?.id}_${this.currentTourStep.id}`,
|
10793
|
-
text: this.translateService.instant(this.currentTourStep.text),
|
10794
|
-
title: this.currentTourStep.title ? this.translateService.instant(this.currentTourStep.title) : undefined,
|
10795
|
-
customContent: this.custom,
|
10796
|
-
dismissible: true,
|
10797
|
-
maxWidth: this.currentTourStep?.maxWidth,
|
10798
|
-
width: stepWidth,
|
10799
|
-
backgroundColor: 'var(--ec-background-color-tour)',
|
10800
|
-
titleColor: 'var(--ec-color-tour-title)'
|
10801
|
-
};
|
10802
|
-
this.tooltip = this.tooltipService.show(tooltipElement, this.currentTourStep.anchor?.position, options);
|
10803
|
-
await this.waitForTimeout(this.focusOnNextOrDoneButton.bind(this));
|
10804
|
-
this.subscribeToTooltipOnHide();
|
10805
|
-
}
|
10806
|
-
}
|
10807
|
-
/**
|
10808
|
-
* Subscribes to the tooltips onHide event emitter and reacts if the user dismisses the tooltip
|
10809
|
-
*/
|
10810
|
-
async subscribeToTooltipOnHide() {
|
10811
|
-
let tooltipSubscription = this.tooltip?.onHide.pipe(takeUntil(this.destroyed)).subscribe(async () => {
|
10812
|
-
tooltipSubscription?.unsubscribe();
|
10813
|
-
this.writeCompletionKeyForAllTours();
|
10814
|
-
// If this is dismissed during an auto start tour then handle the exit step
|
10815
|
-
// Check that the done button is shown as well, if the done is shown then we're in the exit step
|
10816
|
-
// and dismissing should just end the tour
|
10817
|
-
if (this.isAutoStart && !this.showDoneButton) {
|
10818
|
-
// Advance to the last tour if there are multiple for its exit step
|
10819
|
-
this.currentTourIndex = this.tours.length - 1;
|
10820
|
-
await this.handleExitStep();
|
10821
|
-
}
|
10822
|
-
else {
|
10823
|
-
await this.endTour();
|
10824
|
-
}
|
10825
|
-
});
|
10826
|
-
}
|
10827
|
-
/**
|
10828
|
-
* Loops through the current tour steps starting after the current step index. It will try to find a visible
|
10829
|
-
* selector and if so return the index.
|
10830
|
-
* @returns
|
10831
|
-
*/
|
10832
|
-
getNextAvailableStepIndex() {
|
10833
|
-
let nextStepIndex = -1;
|
10834
|
-
// Look through the steps starting with the current index and find the next that is avaiable
|
10835
|
-
// for the user.
|
10836
|
-
for (let i = this.currentStepIndex + 1; i < this.currentTour.steps.length; i++) {
|
10837
|
-
if (this.currentTour?.steps[i].anchor && this.stepElementFound(this.currentTour.steps[i].anchor)) {
|
10838
|
-
return i;
|
10839
|
-
}
|
10840
|
-
}
|
10841
|
-
return nextStepIndex;
|
10842
|
-
}
|
10843
|
-
/**
|
10844
|
-
* Try to find the tour step element to know if it is visible for the user. Check for the clickBefore first if defined
|
10845
|
-
* @param anchor
|
10846
|
-
* @returns
|
10847
|
-
*/
|
10848
|
-
stepElementFound(anchor) {
|
10849
|
-
if (anchor.clickBefore) {
|
10850
|
-
return this.document.querySelector(anchor.clickBefore) !== null;
|
10851
|
-
}
|
10852
|
-
else {
|
10853
|
-
return this.document.querySelector(anchor.selector) !== null;
|
10854
|
-
}
|
10855
|
-
}
|
10856
|
-
/**
|
10857
|
-
* Some tour steps may have a click after defined. If so call the click method on the html element
|
10858
|
-
*/
|
10859
|
-
handleClickAfter() {
|
10860
|
-
let selector = this.currentTourStep?.anchor?.clickAfter;
|
10861
|
-
if (selector) {
|
10862
|
-
this.clickElementIfFound(selector);
|
10863
|
-
}
|
10864
|
-
}
|
10865
|
-
/**
|
10866
|
-
* Some tour steps may have a click before defined. If so call the click method on the html element
|
10867
|
-
*/
|
10868
|
-
handleClickBefore() {
|
10869
|
-
if (this.currentTourStep?.anchor?.clickBefore) {
|
10870
|
-
this.clickElementIfFound(this.currentTourStep.anchor?.clickBefore);
|
10871
|
-
}
|
10872
|
-
}
|
10873
|
-
/**
|
10874
|
-
* Checks for an exit step on the current tour and if found displays the step
|
10875
|
-
*/
|
10876
|
-
async handleExitStep() {
|
10877
|
-
if (this.currentTour?.exitStep) {
|
10878
|
-
this.removeTooltip();
|
10879
|
-
this.showDoneButton = true;
|
10880
|
-
this.currentTourStep = this.currentTour?.exitStep;
|
10881
|
-
await this.waitForTimeout(this.handleClickBefore.bind(this));
|
10882
|
-
await this.waitForTimeout(this.showStepTooltip.bind(this));
|
10883
|
-
}
|
10884
|
-
}
|
10885
|
-
/**
|
10886
|
-
* Try to find the element with the selector provided and if so click it. This is how tour steps will open/close menus to
|
10887
|
-
* give a tour to the user
|
10888
|
-
* @param selector
|
10889
|
-
*/
|
10890
|
-
clickElementIfFound(selector) {
|
10891
|
-
if (selector !== undefined) {
|
10892
|
-
const element = this.document.querySelector(selector);
|
10893
|
-
if (element) {
|
10894
|
-
element.click();
|
10895
|
-
}
|
10896
|
-
}
|
10897
|
-
}
|
10898
|
-
/**
|
10899
|
-
* When auto starting tours we will want to remove any that have the local storage key written as completed so
|
10900
|
-
* they are not presented to the user again.
|
10901
|
-
* @param tours
|
10902
|
-
* @returns
|
10903
|
-
*/
|
10904
|
-
removeCompletedTours(tours) {
|
10905
|
-
return tours.filter(tour => {
|
10906
|
-
let cacheValue = this.cacheService.getItem(this.makeCacheKey(tour));
|
10907
|
-
if (cacheValue) {
|
10908
|
-
return !cacheValue.completed;
|
10909
|
-
}
|
10910
|
-
else {
|
10911
|
-
return true;
|
10912
|
-
}
|
10913
|
-
});
|
10914
|
-
}
|
10915
|
-
/**
|
10916
|
-
* Writes a key to local storage so the tour will not be shown again automatically
|
10917
|
-
*/
|
10918
|
-
writeCompletionKey(tour) {
|
10919
|
-
if (tour) {
|
10920
|
-
this.cacheService.setItem(this.makeCacheKey(tour), { completed: true });
|
10921
|
-
}
|
10922
|
-
}
|
10923
|
-
/**
|
10924
|
-
* When dismissing a tour or one being dismissed via a navigation event, etc we will want to mark
|
10925
|
-
* every tour in the array as completed so it doesn't resurface unless the user requests the tour.
|
10926
|
-
* This function will loop over all and write the local storage key
|
10927
|
-
*/
|
10928
|
-
writeCompletionKeyForAllTours() {
|
10929
|
-
this.tours.forEach(tour => {
|
10930
|
-
this.writeCompletionKey(tour);
|
10931
|
-
});
|
10932
|
-
}
|
10933
|
-
/**
|
10934
|
-
* Cache key used to set/get the completion status of a tour
|
10935
|
-
* @param tour
|
10936
|
-
* @returns
|
10937
|
-
*/
|
10938
|
-
makeCacheKey(tour) {
|
10939
|
-
return this.tourService.getCacheKey(tour);
|
10940
|
-
}
|
10941
|
-
/**
|
10942
|
-
* Removes a tooltip from the view, used when switching tour steps and closing a tour
|
10943
|
-
*/
|
10944
|
-
removeTooltip() {
|
10945
|
-
this.tooltip?.overlayRef?.dispose();
|
10946
|
-
}
|
10947
|
-
/**
|
10948
|
-
* Returns the tour based on the current index
|
10949
|
-
*/
|
10950
|
-
get currentTour() {
|
10951
|
-
if (this.currentTourIndex > -1 && this.currentTourIndex < this.tours.length) {
|
10952
|
-
return this.tours[this.currentTourIndex];
|
10953
|
-
}
|
10954
|
-
else {
|
10955
|
-
return undefined;
|
10956
|
-
}
|
10957
|
-
}
|
10958
|
-
/**
|
10959
|
-
* The click before/after and show tooltip functions need to be wrapped in setTimeout for the UI
|
10960
|
-
* to operate correctly but setTimeout is an action we cannot await so we're wrapping it in a promise to return
|
10961
|
-
* so the function calls can await the action
|
10962
|
-
* @param fn
|
10963
|
-
* @returns
|
10964
|
-
*/
|
10965
|
-
waitForTimeout(fn) {
|
10966
|
-
return new Promise(resolve => {
|
10967
|
-
setTimeout(() => {
|
10968
|
-
fn();
|
10969
|
-
resolve();
|
10970
|
-
});
|
10971
|
-
});
|
10972
|
-
}
|
10973
|
-
/**
|
10974
|
-
* Find the "next" or "done" button and focus on it.
|
10975
|
-
*
|
10976
|
-
* They are mutually exclusive, so if we cannot find the next button
|
10977
|
-
* we look for the done button.
|
10978
|
-
*/
|
10979
|
-
focusOnNextOrDoneButton() {
|
10980
|
-
if (!this.focusOnElement(`#${this.currentTourStep.id}_nextButton`)) {
|
10981
|
-
this.focusOnElement(`#${this.currentTourStep.id}_doneButton`);
|
10982
|
-
}
|
10983
|
-
}
|
10984
|
-
/**
|
10985
|
-
* Find an element with given selector and focus on it.
|
10986
|
-
* Return false if element not found.
|
10987
|
-
*/
|
10988
|
-
focusOnElement(selector) {
|
10989
|
-
const element = this.document.querySelector(selector);
|
10990
|
-
if (element) {
|
10991
|
-
element.focus();
|
10992
|
-
return true;
|
10993
|
-
}
|
10994
|
-
return false;
|
10995
|
-
}
|
10996
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TourComponent, deps: [{ token: TourService }, { token: TooltipService }, { token: TelemetryService }, { token: CacheService }, { token: DialogService }, { token: i3.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
10997
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TourComponent, selector: "ec-tour", viewQueries: [{ propertyName: "custom", first: true, predicate: ["tourTooltip"], descendants: true }], ngImport: i0, template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color:var(--ec-tour-action-color, var(--ec-color-brand-green))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
10998
|
-
}
|
10999
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TourComponent, decorators: [{
|
11000
|
-
type: Component,
|
11001
|
-
args: [{ selector: 'ec-tour', template: "<ng-template #tourTooltip>\r\n <div *ngIf=\"currentTourStep?.media\"\r\n class=\"mb-3\">\r\n <img id=\"{{currentTourStep?.id + '_media'}}\"\r\n style=\"max-width: 100%;\"\r\n src=\"{{currentTourStep?.media}}\">\r\n </div>\r\n <div class=\"font-color-primary-light px-3 mb-3\"\r\n [innerHtml]=\"currentTourStep?.text | translate\">\r\n </div>\r\n <a *ngIf=\"currentTourStep?.helpLink\" id=\"{{currentTourStep?.id + '_helpLink'}}\" class=\"d-block mb-3 px-3\" target=\"_blank\" href=\"{{currentTourStep?.helpLink}}\" translate>LearnMore_SC</a>\r\n <footer class=\"px-3 mt-3 d-flex\">\r\n <button id=\"{{currentTourStep?.id + '_nextButton'}}\" *ngIf=\"!showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"showNextStep()\" translate>Next_TC</button>\r\n <button id=\"{{currentTourStep?.id + '_doneButton'}}\" *ngIf=\"showDoneButton\" class=\"ml-auto tourAction\" ecLinkButton (click)=\"done()\" translate>Done_TC</button>\r\n </footer>\r\n</ng-template>", styles: [".tourAction{color:var(--ec-tour-action-color, var(--ec-color-brand-green))!important}\n"] }]
|
11002
|
-
}], ctorParameters: () => [{ type: TourService }, { type: TooltipService }, { type: TelemetryService }, { type: CacheService }, { type: DialogService }, { type: i3.TranslateService }, { type: Document, decorators: [{
|
11003
|
-
type: Inject,
|
11004
|
-
args: [DOCUMENT]
|
11005
|
-
}] }], propDecorators: { custom: [{
|
11006
|
-
type: ViewChild,
|
11007
|
-
args: ['tourTooltip']
|
11008
|
-
}] } });
|
11009
|
-
|
11010
10521
|
class TreeComponent {
|
11011
10522
|
/**
|
11012
10523
|
* The ID of the component, bound to the host element's id attribute and passed
|
@@ -12025,7 +11536,6 @@ class ComponentsModule {
|
|
12025
11536
|
HelpPopoverComponent,
|
12026
11537
|
LinkButtonComponent,
|
12027
11538
|
TooltipComponent,
|
12028
|
-
TourComponent,
|
12029
11539
|
CopyTableButtonDirective,
|
12030
11540
|
TooltipDirective,
|
12031
11541
|
CalendarComponent,
|
@@ -12098,7 +11608,6 @@ class ComponentsModule {
|
|
12098
11608
|
HelpPopoverComponent,
|
12099
11609
|
LinkButtonComponent,
|
12100
11610
|
TooltipComponent,
|
12101
|
-
TourComponent,
|
12102
11611
|
CopyTableButtonDirective,
|
12103
11612
|
TooltipDirective,
|
12104
11613
|
CalendarComponent,
|
@@ -12193,7 +11702,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
12193
11702
|
HelpPopoverComponent,
|
12194
11703
|
LinkButtonComponent,
|
12195
11704
|
TooltipComponent,
|
12196
|
-
TourComponent,
|
12197
11705
|
CopyTableButtonDirective,
|
12198
11706
|
TooltipDirective,
|
12199
11707
|
CalendarComponent,
|
@@ -12283,7 +11791,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
12283
11791
|
HelpPopoverComponent,
|
12284
11792
|
LinkButtonComponent,
|
12285
11793
|
TooltipComponent,
|
12286
|
-
TourComponent,
|
12287
11794
|
CopyTableButtonDirective,
|
12288
11795
|
TooltipDirective,
|
12289
11796
|
CalendarComponent,
|
@@ -13303,5 +12810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
13303
12810
|
* Generated bundle index. Do not edit.
|
13304
12811
|
*/
|
13305
12812
|
|
13306
|
-
export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService,
|
12813
|
+
export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
|
13307
12814
|
//# sourceMappingURL=energycap-components.mjs.map
|