@igo2/common 16.0.0-rc.3 → 16.0.0-rc.5

package/fesm2022/igo2-common.mjs

@@ -57,7 +57,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { offset } from '@floating-ui/dom';
+import { autoPlacement, offset } from '@floating-ui/dom';
 import * as i3$3 from 'angular-shepherd';
 import * as i1$7 from '@angular/material/sidenav';
 import * as i2$4 from '@angular/material/progress-spinner';
@@ -310,7 +310,7 @@ class ActionbarItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionbarItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\n  *ngIf=\"!action.checkbox\"\n  class=\"actionbar-item\"\n  matTooltipClass=\"actionbarItemTooltip\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n  [ngClass]=\"ngClass$ | async\"\n  (click)=\"onClick()\"\n>\n  <button\n    *ngIf=\"withIcon\"\n    matListItemAvatar\n    mat-icon-button\n    [color]=\"color\"\n    [disabled]=\"disabled$ | async\"\n    [disableRipple]=\"true\"\n  >\n    <mat-icon *ngIf=\"withIcon\" svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n  <span *ngIf=\"withTitle\" matLine>{{ title | translate }}</span>\n</mat-list-item>\n\n<mat-list-item\n  class=\"item-checkbox\"\n  *ngIf=\"action.checkbox\"\n  matTooltipClass=\"actionbarItemTooltip\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n  [ngClass]=\"ngClass$ | async\"\n>\n  <mat-checkbox\n    *ngIf=\"withTitle\"\n    (change)=\"action.handler()\"\n    [checked]=\"checkCondition$ | async\"\n  >\n    {{ title | translate }}\n  </mat-checkbox>\n</mat-list-item>\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:4px}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"] }]
+        args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\r\n  *ngIf=\"!action.checkbox\"\r\n  class=\"actionbar-item\"\r\n  matTooltipClass=\"actionbarItemTooltip\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\r\n  [ngClass]=\"ngClass$ | async\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <button\r\n    *ngIf=\"withIcon\"\r\n    matListItemAvatar\r\n    mat-icon-button\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled$ | async\"\r\n    [disableRipple]=\"true\"\r\n  >\r\n    <mat-icon *ngIf=\"withIcon\" svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n  <span *ngIf=\"withTitle\" matLine>{{ title | translate }}</span>\r\n</mat-list-item>\r\n\r\n<mat-list-item\r\n  class=\"item-checkbox\"\r\n  *ngIf=\"action.checkbox\"\r\n  matTooltipClass=\"actionbarItemTooltip\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\r\n  [ngClass]=\"ngClass$ | async\"\r\n>\r\n  <mat-checkbox\r\n    *ngIf=\"withTitle\"\r\n    (change)=\"action.handler()\"\r\n    [checked]=\"checkCondition$ | async\"\r\n  >\r\n    {{ title | translate }}\r\n  </mat-checkbox>\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:4px}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"] }]
     }], function () { return []; }, { action: [{
             type: Input
         }], color: [{
@@ -7538,17 +7538,21 @@ class InteractiveTourService {
             }, 100);
         });
     }
-    getShepherdSteps(stepConfig) {
+    getShepherdSteps(tourConfig) {
         const shepherdSteps = [];
         let i = 0;
-        for (const step of stepConfig.steps) {
+        for (const step of tourConfig.steps) {
+            const position = step.position ?? tourConfig.position;
             shepherdSteps.push({
                 attachTo: {
                     element: step.element,
-                    on: (step.position || stepConfig.position) // PopperPlacement
+                    on: position // PopperPlacement
                 },
                 floatingUIOptions: {
-                    middleware: [offset({ mainAxis: 15 })]
+                    middleware: [
+                        position === 'auto' && autoPlacement(),
+                        offset({ mainAxis: 15 })
+                    ].filter(Boolean)
                 },
                 beforeShowPromise: () => {
                     return Promise.all([
@@ -7558,18 +7562,18 @@ class InteractiveTourService {
                 },
                 buttons: this.getButtons(i === 0
                     ? 'first'
-                    : i + 1 === stepConfig.steps.length
+                    : i + 1 === tourConfig.steps.length
                         ? 'last'
-                        : stepConfig.steps[i].noBackButton
+                        : tourConfig.steps[i].noBackButton
                             ? 'noBackButton'
                             : undefined),
                 classes: step.class,
                 highlightClass: step.highlightClass,
-                scrollTo: step.scrollToElement || stepConfig.scrollToElement || true,
+                scrollTo: step.scrollToElement || tourConfig.scrollToElement || true,
                 canClickTarget: step.disableInteraction
                     ? !step.disableInteraction
                     : undefined,
-                title: this.languageService.translate.instant(step.title || stepConfig.title),
+                title: this.languageService.translate.instant(step.title || tourConfig.title),
                 text: [this.languageService.translate.instant(step.text)],
                 when: {
                     show: () => {
@@ -7757,7 +7761,7 @@ class InteractiveTourComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InteractiveTourComponent, [{
         type: Component,
-        args: [{ selector: 'igo-interactive-tour', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"showTourButton\">\n  <button\n    *ngIf=\"styleButton === 'icon'; else raisedButton\"\n    (click)=\"startInteractiveTour()\"\n    [ngClass]=\"getClass()\"\n    color=\"primary\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      disabledTourButton\n        ? ('igo.common.interactiveTour.disaledTooltipTourToolButton'\n          | translate)\n        : ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\n    \"\n    [disabled]=\"disabledTourButton\"\n  >\n    <mat-icon iconPositionEnd svgIcon=\"presentation-play\"> </mat-icon>\n  </button>\n\n  <ng-template #raisedButton>\n    <button\n      (click)=\"startInteractiveTour()\"\n      [ngClass]=\"getClass()\"\n      color=\"primary\"\n      mat-raised-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"disabledTourButton\"\n    >\n      {{ 'igo.common.interactiveTour.buttonTitle' | translate }}\n      {{ discoverTitleInLocale$ | async | translate }}\n      <mat-icon\n        iconPositionEnd\n        svgIcon=\"presentation-play\"\n        [matTooltip]=\"\n          disabledTourButton\n            ? ('igo.common.interactiveTour.disaledTooltipTourToolButton'\n              | translate)\n            : ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\n        \"\n      >\n      </mat-icon>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: ["igo-interactive-tour>button.mat-mdc-raised-button.tour-button-tool-icon{box-shadow:none}.shepherd-has-title .shepherd-content .shepherd-header{padding:.5em .75em}.shepherd-title{margin:0!important;font-weight:revert!important}.shepherd-progress{margin-right:15px;color:#737373}.shepherd-text{font-size:14px!important}.shepherd-element{border:1px solid;border-color:#474747;box-shadow:4px 5px #65656599}\n"] }]
+        args: [{ selector: 'igo-interactive-tour', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"showTourButton\">\r\n  <button\r\n    *ngIf=\"styleButton === 'icon'; else raisedButton\"\r\n    (click)=\"startInteractiveTour()\"\r\n    [ngClass]=\"getClass()\"\r\n    color=\"primary\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      disabledTourButton\r\n        ? ('igo.common.interactiveTour.disaledTooltipTourToolButton'\r\n          | translate)\r\n        : ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\r\n    \"\r\n    [disabled]=\"disabledTourButton\"\r\n  >\r\n    <mat-icon iconPositionEnd svgIcon=\"presentation-play\"> </mat-icon>\r\n  </button>\r\n\r\n  <ng-template #raisedButton>\r\n    <button\r\n      (click)=\"startInteractiveTour()\"\r\n      [ngClass]=\"getClass()\"\r\n      color=\"primary\"\r\n      mat-raised-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"disabledTourButton\"\r\n    >\r\n      {{ 'igo.common.interactiveTour.buttonTitle' | translate }}\r\n      {{ discoverTitleInLocale$ | async | translate }}\r\n      <mat-icon\r\n        iconPositionEnd\r\n        svgIcon=\"presentation-play\"\r\n        [matTooltip]=\"\r\n          disabledTourButton\r\n            ? ('igo.common.interactiveTour.disaledTooltipTourToolButton'\r\n              | translate)\r\n            : ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\r\n        \"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: ["igo-interactive-tour>button.mat-mdc-raised-button.tour-button-tool-icon{box-shadow:none}.shepherd-has-title .shepherd-content .shepherd-header{padding:.5em .75em}.shepherd-title{margin:0!important;font-weight:revert!important}.shepherd-progress{margin-right:15px;color:#737373}.shepherd-text{font-size:14px!important}.shepherd-element{border:1px solid;border-color:#474747;box-shadow:4px 5px #65656599}\n"] }]
     }], function () { return [{ type: InteractiveTourService }, { type: ToolService }]; }, { tourToStart: [{
             type: Input
         }], styleButton: [{