feat(wizard): add back inline wizards in 15.x (#1067)

This reverts commit 7470769 (#419),
removes the deprecated comments, and adds a comment explaining when
inline wizards are used.

Inline wizards are used by vSphere plugins to display a wizard inside an iframe
that is inside a modal.

CDE-154

.storybook/stories/modal/modal.stories.ts

@@ -25,6 +25,7 @@ const defaultStory: Story = args => ({
       [clrModalCloseButtonAriaLabel]="clrModalCloseButtonAriaLabel"
       [clrModalLabelledById]="clrModalLabelledById"
       [clrModalOpen]="clrModalOpen"
+      [clrModalOverrideScrollService]="clrModalOverrideScrollService"
       [clrModalPreventClose]="clrModalPreventClose"
       [clrModalSize]="clrModalSize"
       [clrModalSkipAnimation]="clrModalSkipAnimation"

projects/angular/clarity.api.md

@@ -2650,6 +2650,8 @@ export class ClrModal implements OnChanges, OnDestroy {
     // (undocumented)
     altClose: EventEmitter<boolean>;
     // (undocumented)
+    bypassScrollService: boolean;
+    // (undocumented)
     closable: boolean;
     // (undocumented)
     close(): void;
@@ -2684,7 +2686,7 @@ export class ClrModal implements OnChanges, OnDestroy {
     // (undocumented)
     stopClose: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "closeButtonAriaLabel": "clrModalCloseButtonAriaLabel"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "closeButtonAriaLabel": "clrModalCloseButtonAriaLabel"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; "bypassScrollService": "clrModalOverrideScrollService"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrModal, never>;
 }
@@ -4283,7 +4285,7 @@ export class ClrVerticalNavModule {
 
 // @public (undocumented)
 export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
-    constructor(platformId: any, commonStrings: ClrCommonStringsService, navService: WizardNavigationService, pageCollection: PageCollectionService, buttonService: ButtonHubService, headerActionService: HeaderActionService, differs: IterableDiffers);
+    constructor(platformId: any, commonStrings: ClrCommonStringsService, navService: WizardNavigationService, pageCollection: PageCollectionService, buttonService: ButtonHubService, headerActionService: HeaderActionService, elementRef: ElementRef<HTMLElement>, differs: IterableDiffers);
     // Warning: (ae-forgotten-export) The symbol "ButtonHubService" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -4314,6 +4316,8 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     // (undocumented)
     get isFirst(): boolean;
     // (undocumented)
+    get isInline(): boolean;
+    // (undocumented)
     get isLast(): boolean;
     modalCancel(): void;
     // Warning: (ae-forgotten-export) The symbol "WizardNavigationService" needs to be exported by the entry point index.d.ts
@@ -4349,6 +4353,9 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     stepnavAriaLabel: string;
     get stopCancel(): boolean;
     set stopCancel(value: boolean);
+    // (undocumented)
+    get stopModalAnimations(): string;
+    _stopModalAnimations: boolean;
     get stopNavigation(): boolean;
     set stopNavigation(value: boolean);
     get stopNext(): boolean;
@@ -4360,7 +4367,7 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     // (undocumented)
     protected wizardTitle: ClrWizardTitle;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrWizard, "clr-wizard", never, { "stepnavAriaLabel": "clrWizardStepnavAriaLabel"; "size": "clrWizardSize"; "closable": "clrWizardClosable"; "forceForward": "clrWizardForceForwardNavigation"; "clrWizardOpen": "clrWizardOpen"; "stopNext": "clrWizardPreventDefaultNext"; "stopCancel": "clrWizardPreventDefaultCancel"; "stopNavigation": "clrWizardPreventNavigation"; "disableStepnav": "clrWizardDisableStepnav"; }, { "_openChanged": "clrWizardOpenChange"; "onCancel": "clrWizardOnCancel"; "wizardFinished": "clrWizardOnFinish"; "onReset": "clrWizardOnReset"; "currentPageChanged": "clrWizardCurrentPageChanged"; "onMoveNext": "clrWizardOnNext"; "onMovePrevious": "clrWizardOnPrevious"; }, ["wizardTitle", "pages", "headerActions"], ["clr-wizard-title", "clr-wizard-header-action", "*", "clr-wizard-button"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrWizard, "clr-wizard", never, { "stepnavAriaLabel": "clrWizardStepnavAriaLabel"; "size": "clrWizardSize"; "closable": "clrWizardClosable"; "_stopModalAnimations": "clrWizardPreventModalAnimation"; "forceForward": "clrWizardForceForwardNavigation"; "clrWizardOpen": "clrWizardOpen"; "stopNext": "clrWizardPreventDefaultNext"; "stopCancel": "clrWizardPreventDefaultCancel"; "stopNavigation": "clrWizardPreventNavigation"; "disableStepnav": "clrWizardDisableStepnav"; }, { "_openChanged": "clrWizardOpenChange"; "onCancel": "clrWizardOnCancel"; "wizardFinished": "clrWizardOnFinish"; "onReset": "clrWizardOnReset"; "currentPageChanged": "clrWizardCurrentPageChanged"; "onMoveNext": "clrWizardOnNext"; "onMovePrevious": "clrWizardOnPrevious"; }, ["wizardTitle", "pages", "headerActions"], ["clr-wizard-title", "clr-wizard-header-action", "*", "clr-wizard-button"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrWizard, never>;
 }

projects/angular/src/modal/modal.ts

@@ -54,6 +54,9 @@ export class ClrModal implements OnChanges, OnDestroy {
 
   @Input('clrModalLabelledById') labelledBy = this.modalId;
 
+  // presently this is only used by inline wizards
+  @Input('clrModalOverrideScrollService') bypassScrollService = false;
+
   constructor(
     private _scrollingService: ScrollingService,
     public commonStrings: ClrCommonStringsService,
@@ -62,7 +65,7 @@ export class ClrModal implements OnChanges, OnDestroy {
 
   // Detect when _open is set to true and set no-scrolling to true
   ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
-    if (changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
+    if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
       if (changes._open.currentValue) {
         this._scrollingService.stopScrolling();
         this.modalStackService.trackModalOpen(this);

projects/angular/src/wizard/_wizard.clarity.scss

@@ -661,6 +661,89 @@
     }
   }
 
+  // Inline wizards are used by vSphere plugins to display a wizard inside an iframe that is inside a modal.
+  .clr-wizard--inline {
+    display: block;
+    width: 100%;
+    // you will want to set a fixed width and height for these static wizards
+    // otherwise, you'll get some minor jumping along the right edge when it is
+    // closed...
+
+    & > clr-modal > .modal:focus {
+      // need to remove the outline style or trap-focus directive will make
+      // outline appear in Safari and Microsoft browsers
+      outline-style: none;
+      outline-color: transparent;
+    }
+
+    clr-modal {
+      @include mixins.equilateral(100%);
+      display: block;
+    }
+
+    .modal {
+      padding: 0;
+      position: static;
+      height: 100%;
+      max-height: 100%;
+
+      .content-container {
+        height: 100%;
+
+        .nav-panel {
+          @include mixins.equilateral(99%);
+        }
+      }
+
+      .modal-content {
+        box-shadow: none;
+      }
+
+      .modal-dialog {
+        min-height: 100%;
+        @include mixins.equilateral(100%);
+        z-index: auto;
+      }
+    }
+
+    .modal-body-wrapper {
+      height: 100%;
+    }
+
+    .modal-header .close {
+      display: none;
+    }
+
+    .nav.navList {
+      padding-top: 0;
+    }
+
+    .modal-dialog .modal-content .modal-body .content-area {
+      overflow-y: auto;
+    }
+
+    .modal-backdrop {
+      @include mixins.equilateral(0);
+      display: none;
+    }
+
+    .modal-content-wrapper {
+      align-items: stretch;
+      height: 100%;
+    }
+
+    .clr-wizard-stepnav-wrapper,
+    &.clr-wizard .modal-content {
+      min-height: 100%;
+      height: auto;
+      max-height: 100%;
+
+      .clr-wizard-stepnav {
+        height: 100%;
+      }
+    }
+  }
+
   .clr-wizard--no-shadow {
     .modal-content-wrapper,
     .modal-dialog {

projects/angular/src/wizard/wizard.html

@@ -9,6 +9,8 @@
   [clrModalSize]="size"
   [clrModalClosable]="closable"
   [clrModalStaticBackdrop]="true"
+  [clrModalSkipAnimation]="stopModalAnimations"
+  [clrModalOverrideScrollService]="isInline"
   [clrModalPreventClose]="true"
   (clrModalAlternateClose)="modalCancel()"
   [clrModalLabelledById]="wizardId"

projects/angular/src/wizard/wizard.ts

@@ -64,6 +64,13 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
    */
   @Input('clrWizardClosable') closable = true;
 
+  /**
+   * Used to communicate to the underlying modal that animations are not
+   * wanted. Primary use is for the display of static/inline wizards.
+   * Set using `[clrWizardPreventModalAnimation]` input.
+   */
+  @Input('clrWizardPreventModalAnimation') _stopModalAnimations = false;
+
   /**
    * Emits when the wizard is opened or closed.
    * Listen via `(clrWizardOpenChange)` event.
@@ -132,6 +139,7 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     public pageCollection: PageCollectionService,
     public buttonService: ButtonHubService,
     public headerActionService: HeaderActionService,
+    private elementRef: ElementRef<HTMLElement>,
     differs: IterableDiffers
   ) {
     this.subscriptions.push(
@@ -250,9 +258,18 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     return this.navService.currentPageIsFirst;
   }
 
+  get isInline(): boolean {
+    return this.elementRef.nativeElement.classList.contains('clr-wizard--inline');
+  }
+
+  get stopModalAnimations(): string {
+    return this._stopModalAnimations ? 'true' : 'false';
+  }
+
   ngAfterContentInit(): void {
     this.pageCollection.pages = this.pages;
     this.headerActionService.wizardHeaderActions = this.headerActions;
+    this.initializeButtons();
   }
 
   ngDoCheck(): void {
@@ -481,6 +498,13 @@ export class ClrWizard implements OnDestroy, AfterContentInit, DoCheck {
     }
   }
 
+  private initializeButtons(): void {
+    // Only trigger buttons ready if default is open (inlined)
+    if (this._open) {
+      this.buttonService.buttonsReady = true;
+    }
+  }
+
   private emitWizardFinished(): void {
     if (!this.stopNext) {
       this.forceFinish();

projects/demo/src/app/wizard/wizard-inline.demo.html

@@ -0,0 +1,63 @@
+<!--
+  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+  ~ This software is released under MIT license.
+  ~ The full license information can be found in LICENSE in the root directory of this project.
+  -->
+<button class="btn btn-primary" (click)="wizard.open()">Inline Wizard</button>
+
+<clr-wizard
+  #wizard
+  [(clrWizardOpen)]="open"
+  [clrWizardSize]="'lg'"
+  [clrWizardPreventModalAnimation]="true"
+  class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
+  style="height: 500px"
+>
+  <clr-wizard-title>Inline Wizard</clr-wizard-title>
+
+  <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
+  <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
+  <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
+  <clr-wizard-button [type]="'finish'">Submit</clr-wizard-button>
+
+  <clr-wizard-page>
+    <ng-template clrPageTitle>Page 1</ng-template>
+    <!-- optional -->
+
+    <p>Content for page 1</p>
+    <p class="content-for-page-1">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia, officiis rem id explicabo
+      incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur quas! Quaerat explicabo expedita placeat vero.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia, officiis rem id explicabo
+      incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur quas! Quaerat explicabo expedita placeat vero.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia, officiis rem id explicabo
+      incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur quas! Quaerat explicabo expedita placeat vero.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia, officiis rem id explicabo
+      incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur quas! Quaerat explicabo expedita placeat vero.
+    </p>
+  </clr-wizard-page>
+
+  <clr-wizard-page>
+    <ng-template clrPageTitle>Page 2</ng-template>
+    <!-- mandatory -->
+
+    <p>Content for page 2</p>
+    <p class="content-for-page-2">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae minima inventore quia, officiis rem id explicabo
+      incidunt, illum deleniti qui doloremque voluptatem, saepe tenetur quas! Quaerat explicabo expedita placeat vero.
+    </p>
+  </clr-wizard-page>
+
+  <clr-wizard-page>
+    <ng-template clrPageTitle>Page 3</ng-template>
+    <!-- mandatory -->
+
+    <p class="content-for-page-3">Content for page 3</p>
+  </clr-wizard-page>
+</clr-wizard>

projects/demo/src/app/wizard/wizard-inline.demo.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import { ClrWizard } from '@clr/angular';
+
+@Component({
+  selector: 'clr-wizard-inline',
+  templateUrl: './wizard-inline.demo.html',
+})
+export class WizardInlineDemo {
+  @ViewChild('wizard') wizard: ClrWizard;
+
+  open = true;
+}

projects/demo/src/app/wizard/wizard.demo.module.ts

@@ -17,6 +17,7 @@ import { WizardCustomButtonsDemo } from './wizard-custom-buttons.demo';
 import { WizardForceForwardDemo } from './wizard-force-forward.demo';
 import { WizardFormValidation } from './wizard-form-validation.demo';
 import { WizardHeaderActionsDemo } from './wizard-header-actions.demo';
+import { WizardInlineDemo } from './wizard-inline.demo';
 import { WizardJumpToDemo } from './wizard-jump-to.demo';
 import { WizardNotClosableDemo } from './wizard-not-closable.demo';
 import { WizardResetDemo } from './wizard-reset.demo';
@@ -39,6 +40,7 @@ import { ROUTING } from './wizard.demo.routing';
     WizardResetDemo,
     WizardHeaderActionsDemo,
     WizardAltCancelDemo,
+    WizardInlineDemo,
     WizardJumpToDemo,
     WizardAltNextDemo,
     WizardForceForwardDemo,
@@ -55,6 +57,7 @@ import { ROUTING } from './wizard.demo.routing';
     WizardCustomButtonsDemo,
     WizardHeaderActionsDemo,
     WizardAltCancelDemo,
+    WizardInlineDemo,
     WizardResetDemo,
     WizardJumpToDemo,
     WizardAltNextDemo,

projects/demo/src/app/wizard/wizard.demo.routing.ts

@@ -15,6 +15,7 @@ import { WizardCustomButtonsDemo } from './wizard-custom-buttons.demo';
 import { WizardForceForwardDemo } from './wizard-force-forward.demo';
 import { WizardFormValidation } from './wizard-form-validation.demo';
 import { WizardHeaderActionsDemo } from './wizard-header-actions.demo';
+import { WizardInlineDemo } from './wizard-inline.demo';
 import { WizardJumpToDemo } from './wizard-jump-to.demo';
 import { WizardNotClosableDemo } from './wizard-not-closable.demo';
 import { WizardResetDemo } from './wizard-reset.demo';
@@ -37,6 +38,7 @@ const ROUTES: Routes = [
       { path: 'custom-buttons', component: WizardCustomButtonsDemo },
       { path: 'header-actions', component: WizardHeaderActionsDemo },
       { path: 'alt-cancel', component: WizardAltCancelDemo },
+      { path: 'inline', component: WizardInlineDemo },
       { path: 'jump-to', component: WizardJumpToDemo },
       { path: 'reset', component: WizardResetDemo },
       { path: 'alt-next', component: WizardAltNextDemo },

projects/demo/src/app/wizard/wizard.demo.ts

@@ -29,6 +29,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
           <li><a [routerLink]="['./header-actions']">Header actions</a></li>
           <li><a [routerLink]="['./alt-cancel']">Alt cancel</a></li>
           <li><a [routerLink]="['./alt-next']">Alt next</a></li>
+          <li><a [routerLink]="['./inline']">Inline/static wizard</a></li>
           <li><a [routerLink]="['./force-forward']">Force forward</a></li>
           <li><a [routerLink]="['./stop-navigation']">Stop navigation</a></li>
         </ul>