@daffodil/design 0.62.3 → 0.62.4

package/fesm2020/daffodil-design.mjs

@@ -14,7 +14,7 @@ import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule, GlobalPositionStrategy } from '@angular/cdk/overlay';
-import * as i1$5 from '@angular/cdk/portal';
+import * as i2$1 from '@angular/cdk/portal';
 import { ComponentPortal, TemplatePortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i1$4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -3742,7 +3742,13 @@ const daffFadeAnimations = {
 const getAnimationState$1 = (open) => open ? 'open' : 'closed';
 
 class DaffModalComponent {
-    constructor() {
+    constructor(_focusTrapFactory, _elementRef) {
+        this._focusTrapFactory = _focusTrapFactory;
+        this._elementRef = _elementRef;
+        /**
+         * HostBinding to set the default modal class on the host element.
+         */
+        this.modalClass = true;
         /**
          * Dictates whether or not a modal is open or closed.
          */
@@ -3756,27 +3762,32 @@ class DaffModalComponent {
          */
         this.closedAnimationCompleted = new EventEmitter();
         /**
-         * Event fired when the backdrop is clicked
-         * This is often used to close the modal
+         * Event fired when the backdrop is clicked. This is often used to close the modal.
          */
         this.hide = new EventEmitter();
-        /**
-         * Hostbinding to set the default modal class on the host element
-         *
-         * @docs-private
-         */
-        this.modalClass = true;
+    }
+    ngAfterContentInit() {
+        this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+    }
+    ngAfterViewInit() {
+        const focusableChild = this._elementRef.nativeElement.querySelector(daffFocusableElementsSelector);
+        if (focusableChild) {
+            focusableChild.focus();
+        }
+        else {
+            // There's a timing condition when computing HostBindings afterContentInit
+            // so to allow the menu to be focused, we manually set the tabindex.
+            this._elementRef.nativeElement.tabIndex = 0;
+            this._elementRef.nativeElement.focus();
+        }
     }
     /**
-     * Helper method to attach portable content to modal
+     * Helper method to attach portable content to modal.
      */
     attachContent(portal) {
         this._portalOutlet.attachComponentPortal(portal);
     }
-    /**
-     * Animation hook that controls the entrance and exit animations
-     * of the modal
-     */
+    /** Animation hook that controls the entrance and exit animations of the modal. */
     get fadeState() {
         return getAnimationState$1(this.open);
     }
@@ -3793,19 +3804,19 @@ class DaffModalComponent {
         }
     }
 }
-/** @nocollapse */ DaffModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffModalComponent, selector: "daff-modal", inputs: { open: "open" }, host: { listeners: { "@fade.done": "animationDone($event)" }, properties: { "class.daff-modal": "this.modalClass", "@fade": "this.fadeState" } }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [":host{display:block;border-radius:4px;height:100%;max-width:80vw;overflow:hidden;padding:24px;z-index:3}@media (min-width: 480px){:host{height:auto}}\n"], directives: [{ type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [daffFadeAnimations.fade], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DaffModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffModalComponent, deps: [{ token: i1$4.ConfigurableFocusTrapFactory }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DaffModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffModalComponent, selector: "daff-modal", inputs: { open: "open" }, host: { listeners: { "@fade.done": "animationDone($event)" }, properties: { "class.daff-modal": "this.modalClass", "@fade": "this.fadeState" } }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [":host{display:block;border-radius:4px;height:100%;max-width:80vw;overflow:hidden;padding:24px;z-index:3}@media (min-width: 480px){:host{height:auto}}\n"], directives: [{ type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [daffFadeAnimations.fade], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-modal', animations: [daffFadeAnimations.fade], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template cdkPortalOutlet></ng-template>\n", styles: [":host{display:block;border-radius:4px;height:100%;max-width:80vw;overflow:hidden;padding:24px;z-index:3}@media (min-width: 480px){:host{height:auto}}\n"] }]
-        }], propDecorators: { open: [{
+        }], ctorParameters: function () { return [{ type: i1$4.ConfigurableFocusTrapFactory }, { type: i0.ElementRef }]; }, propDecorators: { modalClass: [{
+                type: HostBinding,
+                args: ['class.daff-modal']
+            }], open: [{
                 type: Input
             }], _portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
-            }], modalClass: [{
-                type: HostBinding,
-                args: ['class.daff-modal']
             }], fadeState: [{
                 type: HostBinding,
                 args: ['@fade']
@@ -4669,14 +4680,14 @@ class DaffSidebarViewportComponent {
     }
 }
 /** @nocollapse */ DaffSidebarViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
+/** @nocollapse */ DaffSidebarViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", outputs: { backdropClicked: "backdropClicked" }, queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <div class=\"daff-sidebar-viewport__nav\"><ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content></div>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:3}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)+.daff-sidebar-viewport__inner{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], components: [{ type: DaffBackdropComponent, selector: "daff-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
         daffSidebarAnimations.transformContent,
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffSidebarViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-sidebar-viewport', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         daffSidebarAnimations.transformContent,
-                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;will-change:transform;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
+                    ], template: "<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<daff-backdrop\n  [@transformContent]=\"_animationState\"\n  class=\"daff-sidebar-viewport__backdrop\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\"></daff-backdrop>\n\n<div class=\"daff-sidebar-viewport__content\" [@transformContent]=\"_animationState\">\n  <div class=\"daff-sidebar-viewport__nav\"><ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content></div>\n  <div class=\"daff-sidebar-viewport__inner\" [style.padding-left.px]=\"_contentPadLeft\" [style.padding-right.px]=\"_contentPadRight\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>", styles: [":host{overflow:hidden;display:flex;min-height:100%;position:relative;width:100%;z-index:1;height:100vh;height:100dvh}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;overflow-y:auto;height:100%}.daff-sidebar-viewport__sidebar{flex-shrink:0}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:3}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)+.daff-sidebar-viewport__inner{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__backdrop{height:100%;position:absolute;width:100%;z-index:4}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { sidebars: [{
                 type: ContentChildren,
                 args: [DaffSidebarComponent, { descendants: false }]