| import { EventEmitter, Directive, ElementRef, ChangeDetectorRef, Optional, Inject, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Injector, TemplateRef, InjectFlags, Type, InjectionToken, Injectable, SkipSelf, Input, NgModule } from '@angular/core'; |
| import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal'; |
| import { AnimationDurations, AnimationCurves, MatCommonModule } from '@angular/material/core'; |
| import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog'; |
| import { OverlayConfig, Overlay } from '@angular/cdk/overlay'; |
| import { FocusTrapFactory, FocusMonitor } from '@angular/cdk/a11y'; |
| import { DOCUMENT } from '@angular/common'; |
| import { trigger, state, style, transition, animate } from '@angular/animations'; |
| import { Subject, of } from 'rxjs'; |
| import { filter, take } from 'rxjs/operators'; |
| import { Directionality } from '@angular/cdk/bidi'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet.animation.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const tdSideSheetAnimations = { |
| /** |
| * Animation that is applied on the side-sheet container by default. |
| */ |
| sideSheetContainer: trigger('sideSheetContainer', [ |
| state('void, exit', style({ transform: 'translateX(100%)' })), |
| state('enter', style({ transform: 'translateX(0%)', opacity: 1 })), |
| transition('* => enter', animate(`${AnimationDurations.ENTERING} ${AnimationCurves.ACCELERATION_CURVE}`, style({ transform: 'translateX(0)', opacity: 1 }))), |
| transition('* => void, * => exit', animate(`${AnimationDurations.EXITING} ${AnimationCurves.ACCELERATION_CURVE}`, style({ transform: 'translateX(100%)' }))), |
| ]), |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet.config.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * @template D |
| */ |
| class CovalentSideSheetConfig extends MatDialogConfig { |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet-container.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * @return {?} |
| */ |
| function _getFocusedElementPierceShadowDom() { |
| /** @type {?} */ |
| let activeElement = typeof document !== 'undefined' && document ? ((/** @type {?} */ (document.activeElement))) : null; |
| while (activeElement && activeElement.shadowRoot) { |
| /** @type {?} */ |
| const newActiveElement = (/** @type {?} */ (activeElement.shadowRoot.activeElement)); |
| if (newActiveElement === activeElement) { |
| break; |
| } |
| else { |
| activeElement = newActiveElement; |
| } |
| } |
| return activeElement; |
| } |
| /** |
| * Base class for the `CovalentSideSheetContainer`. The base class does not implement |
| * animations as these are left to implementers of the side-sheet container. |
| * @abstract |
| */ |
| class _CovalentSideSheetContainerBase extends BasePortalOutlet { |
| /** |
| * @param {?} _elementRef |
| * @param {?} _focusTrapFactory |
| * @param {?} _changeDetectorRef |
| * @param {?} _document |
| * @param {?} _config |
| * @param {?=} _focusMonitor |
| */ |
| constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, _config, _focusMonitor) { |
| super(); |
| this._elementRef = _elementRef; |
| this._focusTrapFactory = _focusTrapFactory; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._config = _config; |
| this._focusMonitor = _focusMonitor; |
| /** |
| * Emits when an animation state changes. |
| */ |
| this._animationStateChanged = new EventEmitter(); |
| /** |
| * Element that was focused before the side-sheet was opened. Save this to restore upon close. |
| */ |
| this._elementFocusedBeforeSideSheetWasOpened = null; |
| /** |
| * Type of interaction that led to the side-sheet being closed. This is used to determine |
| * whether the focus style will be applied when returning focus to its original location |
| * after the side-sheet is closed. |
| */ |
| this._closeInteractionType = null; |
| /** |
| * Attaches a DOM portal to the side-sheet container. |
| * @param portal Portal to be attached. |
| * @deprecated To be turned into a method. |
| */ |
| this.attachDomPortal = (/** |
| * @param {?} portal |
| * @return {?} |
| */ |
| (portal) => { |
| return this._portalOutlet.attachDomPortal(portal); |
| }); |
| this._ariaLabelledBy = _config.ariaLabelledBy || null; |
| this._document = _document; |
| } |
| /** |
| * Initializes the side-sheet container with the attached content. |
| * @return {?} |
| */ |
| _initializeWithAttachedContent() { |
| this._setupFocusTrap(); |
| // Save the previously focused element. This element will be re-focused |
| // when the side-sheet closes. |
| this._capturePreviouslyFocusedElement(); |
| } |
| /** |
| * Attach a ComponentPortal as content to this side-sheet container. |
| * @template T |
| * @param {?} portal Portal to be attached as the side-sheet content. |
| * @return {?} |
| */ |
| attachComponentPortal(portal) { |
| return this._portalOutlet.attachComponentPortal(portal); |
| } |
| /** |
| * Attach a TemplatePortal as content to this side-sheet container. |
| * @template C |
| * @param {?} portal Portal to be attached as the side-sheet content. |
| * @return {?} |
| */ |
| attachTemplatePortal(portal) { |
| return this._portalOutlet.attachTemplatePortal(portal); |
| } |
| /** |
| * Moves focus back into the side-sheet if it was moved out. |
| * @return {?} |
| */ |
| _recaptureFocus() { |
| if (!this._containsFocus()) { |
| this._trapFocus(); |
| } |
| } |
| /** |
| * Moves the focus inside the focus trap. When autoFocus is not set to 'side-sheet', if focus |
| * cannot be moved then focus will go to the side-sheet container. |
| * @protected |
| * @return {?} |
| */ |
| _trapFocus() { |
| /** @type {?} */ |
| const element = this._elementRef.nativeElement; |
| if (!this._config.autoFocus) { |
| if (!this._containsFocus()) { |
| element.focus(); |
| } |
| } |
| else { |
| this._focusTrap.focusInitialElementWhenReady().then((/** |
| * @param {?} focusedSuccessfully |
| * @return {?} |
| */ |
| (focusedSuccessfully) => { |
| // If we weren't able to find a focusable element in the side-sheet, then focus the side-sheet |
| // container instead. |
| if (!focusedSuccessfully) { |
| this._focusSideSheetContainer(); |
| } |
| })); |
| } |
| } |
| /** |
| * Restores focus to the element that was focused before the side-sheet opened. |
| * @protected |
| * @return {?} |
| */ |
| _restoreFocus() { |
| /** @type {?} */ |
| const previousElement = this._elementFocusedBeforeSideSheetWasOpened; |
| // We need the extra check, because IE can set the `activeElement` to null in some cases. |
| if (this._config.restoreFocus && previousElement && typeof previousElement.focus === 'function') { |
| /** @type {?} */ |
| const activeElement = _getFocusedElementPierceShadowDom(); |
| /** @type {?} */ |
| const element = this._elementRef.nativeElement; |
| // Make sure that focus is still inside the side-sheet or is on the body (usually because a |
| // non-focusable element like the backdrop was clicked) before moving it. It's possible that |
| // the consumer moved it themselves before the animation was done, in which case we shouldn't |
| // do anything. |
| if (!activeElement || |
| activeElement === this._document.body || |
| activeElement === element || |
| element.contains(activeElement)) { |
| if (this._focusMonitor) { |
| this._focusMonitor.focusVia(previousElement, this._closeInteractionType); |
| this._closeInteractionType = null; |
| } |
| else { |
| previousElement.focus(); |
| } |
| } |
| } |
| if (this._focusTrap) { |
| this._focusTrap.destroy(); |
| } |
| } |
| /** |
| * Sets up the focus trap. |
| * @private |
| * @return {?} |
| */ |
| _setupFocusTrap() { |
| this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); |
| } |
| /** |
| * Captures the element that was focused before the side-sheet was opened. |
| * @private |
| * @return {?} |
| */ |
| _capturePreviouslyFocusedElement() { |
| if (this._document) { |
| this._elementFocusedBeforeSideSheetWasOpened = _getFocusedElementPierceShadowDom(); |
| } |
| } |
| /** |
| * Focuses the side-sheet container. |
| * @private |
| * @return {?} |
| */ |
| _focusSideSheetContainer() { |
| // Note that there is no focus method when rendering on the server. |
| if (this._elementRef.nativeElement.focus) { |
| this._elementRef.nativeElement.focus(); |
| } |
| } |
| /** |
| * Returns whether focus is inside the side-sheet. |
| * @private |
| * @return {?} |
| */ |
| _containsFocus() { |
| /** @type {?} */ |
| const element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| const activeElement = _getFocusedElementPierceShadowDom(); |
| return element === activeElement || element.contains(activeElement); |
| } |
| } |
| _CovalentSideSheetContainerBase.decorators = [ |
| { type: Directive } |
| ]; |
| /** @nocollapse */ |
| _CovalentSideSheetContainerBase.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: FocusTrapFactory }, |
| { type: ChangeDetectorRef }, |
| { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, |
| { type: CovalentSideSheetConfig }, |
| { type: FocusMonitor } |
| ]; |
| _CovalentSideSheetContainerBase.propDecorators = { |
| _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }] |
| }; |
| if (false) { |
| /** |
| * @type {?} |
| * @protected |
| */ |
| _CovalentSideSheetContainerBase.prototype._document; |
| /** |
| * The portal outlet inside of this container into which the side-sheet content will be loaded. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._portalOutlet; |
| /** |
| * The class that traps and manages focus within the side-sheet. |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetContainerBase.prototype._focusTrap; |
| /** |
| * Emits when an animation state changes. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._animationStateChanged; |
| /** |
| * Element that was focused before the side-sheet was opened. Save this to restore upon close. |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetContainerBase.prototype._elementFocusedBeforeSideSheetWasOpened; |
| /** |
| * Type of interaction that led to the side-sheet being closed. This is used to determine |
| * whether the focus style will be applied when returning focus to its original location |
| * after the side-sheet is closed. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._closeInteractionType; |
| /** |
| * ID of the element that should be considered as the side-sheet's label. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._ariaLabelledBy; |
| /** |
| * ID for the container DOM element. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._id; |
| /** |
| * Attaches a DOM portal to the side-sheet container. |
| * \@param portal Portal to be attached. |
| * @deprecated To be turned into a method. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype.attachDomPortal; |
| /** |
| * @type {?} |
| * @protected |
| */ |
| _CovalentSideSheetContainerBase.prototype._elementRef; |
| /** |
| * @type {?} |
| * @protected |
| */ |
| _CovalentSideSheetContainerBase.prototype._focusTrapFactory; |
| /** |
| * @type {?} |
| * @protected |
| */ |
| _CovalentSideSheetContainerBase.prototype._changeDetectorRef; |
| /** |
| * The side-sheet configuration. |
| * @type {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._config; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetContainerBase.prototype._focusMonitor; |
| /** |
| * Starts the side-sheet exit animation. |
| * @abstract |
| * @return {?} |
| */ |
| _CovalentSideSheetContainerBase.prototype._startExitAnimation = function () { }; |
| } |
| /** |
| * Internal component that wraps the generated side-sheet content. |
| * This animation below is the only reason for duplicating most of the Material dialog code |
| */ |
| class CovalentSideSheetContainer extends _CovalentSideSheetContainerBase { |
| constructor() { |
| super(...arguments); |
| /** |
| * State of the side-sheet animation. |
| */ |
| this._state = 'enter'; |
| } |
| /** |
| * Callback, invoked whenever an animation on the host completes. |
| * @param {?} __0 |
| * @return {?} |
| */ |
| _onAnimationDone({ toState, totalTime }) { |
| if (toState === 'enter') { |
| this._trapFocus(); |
| this._animationStateChanged.next({ state: 'opened', totalTime }); |
| } |
| else if (toState === 'exit') { |
| this._restoreFocus(); |
| this._animationStateChanged.next({ state: 'closed', totalTime }); |
| } |
| } |
| /** |
| * Callback, invoked when an animation on the host starts. |
| * @param {?} __0 |
| * @return {?} |
| */ |
| _onAnimationStart({ toState, totalTime }) { |
| if (toState === 'enter') { |
| this._animationStateChanged.next({ state: 'opening', totalTime }); |
| } |
| else if (toState === 'exit' || toState === 'void') { |
| this._animationStateChanged.next({ state: 'closing', totalTime }); |
| } |
| } |
| /** |
| * Starts the side-sheet exit animation. |
| * @return {?} |
| */ |
| _startExitAnimation() { |
| this._state = 'exit'; |
| this._changeDetectorRef.markForCheck(); |
| } |
| } |
| CovalentSideSheetContainer.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-side-sheet-container', |
| template: ` |
| <ng-template cdkPortalOutlet></ng-template> |
| `, |
| encapsulation: ViewEncapsulation.None, |
| changeDetection: ChangeDetectionStrategy.Default, |
| animations: [tdSideSheetAnimations.sideSheetContainer], |
| host: { |
| 'class': 'td-side-sheet-container', |
| 'tabindex': '-1', |
| 'aria-modal': 'true', |
| '[id]': '_id', |
| '[attr.role]': '_config.role', |
| '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy', |
| '[attr.aria-label]': '_config.ariaLabel', |
| '[attr.aria-describedby]': '_config.ariaDescribedBy || null', |
| '[@sideSheetContainer]': '_state', |
| '(@sideSheetContainer.start)': '_onAnimationStart($event)', |
| '(@sideSheetContainer.done)': '_onAnimationDone($event)', |
| }, |
| styles: [".td-side-sheet-container{background-color:#fff;box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);box-sizing:border-box;display:block;height:100%;max-height:inherit;min-height:inherit;outline:0;overflow:auto;padding:24px;width:100%}.td-side-sheet-wrapper{-ms-flex-direction:column;display:-ms-flexbox;display:flex;flex-direction:column;height:100%}.td-side-sheet-content{-ms-flex:1;-webkit-overflow-scrolling:touch;flex:1;margin:0 -24px;overflow:auto;padding:0 24px}.td-side-sheet-title{margin:-16px 0 20px}.td-side-sheet-actions,.td-side-sheet-title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.td-side-sheet-actions{-ms-flex-pack:justify;-ms-flex-wrap:wrap;box-sizing:content-box;flex-wrap:wrap;justify-content:space-between;margin:0 -16px -24px;padding:8px 0}.td-side-sheet-actions[align=end]{-ms-flex-pack:end;justify-content:flex-end}.td-side-sheet-actions[align=center]{-ms-flex-pack:center;justify-content:center}.td-side-sheet-actions .mat-button-base+.mat-button-base,.td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .td-side-sheet-actions .mat-button-base+.mat-button-base,[dir=rtl] .td-side-sheet-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}"] |
| }] } |
| ]; |
| if (false) { |
| /** |
| * State of the side-sheet animation. |
| * @type {?} |
| */ |
| CovalentSideSheetContainer.prototype._state; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet-ref.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Counter for unique dialog ids. |
| /** @type {?} */ |
| let uniqueId = 0; |
| // Create a new side sheet ref to change the id of the ref |
| /** |
| * @template T, R |
| */ |
| class CovalentSideSheetRef extends MatDialogRef { |
| /** |
| * @param {?} overlayRef |
| * @param {?} _containerInstance |
| * @param {?=} id |
| */ |
| constructor(overlayRef, _containerInstance, id = `td-side-sheet-${uniqueId++}`) { |
| super(overlayRef, _containerInstance, id); |
| this.overlayRef = overlayRef; |
| this._containerInstance = _containerInstance; |
| this.id = id; |
| } |
| } |
| if (false) { |
| /** @type {?} */ |
| CovalentSideSheetRef.prototype.overlayRef; |
| /** @type {?} */ |
| CovalentSideSheetRef.prototype._containerInstance; |
| /** @type {?} */ |
| CovalentSideSheetRef.prototype.id; |
| } |
| /** |
| * @template R |
| * @param {?} ref |
| * @param {?} interactionType |
| * @param {?=} result |
| * @return {?} |
| */ |
| function _closeSideSheetVia(ref, interactionType, result) { |
| // Some mock dialog ref instances in tests do not have the `_containerInstance` property. |
| // For those, we keep the behavior as is and do not deal with the interaction type. |
| if (ref._containerInstance !== undefined) { |
| ref._containerInstance._closeInteractionType = interactionType; |
| } |
| return ref.close(result); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * @template C |
| */ |
| class _CovalentSideSheetBase { |
| /** |
| * @param {?} _overlay |
| * @param {?} _injector |
| * @param {?} _defaultOptions |
| * @param {?} _parentSideSheet |
| * @param {?} _sideSheetRefConstructor |
| * @param {?} _sideSheetContainerType |
| * @param {?} _sideSheetDataToken |
| */ |
| constructor(_overlay, _injector, _defaultOptions, _parentSideSheet, _sideSheetRefConstructor, _sideSheetContainerType, _sideSheetDataToken) { |
| this._overlay = _overlay; |
| this._injector = _injector; |
| this._defaultOptions = _defaultOptions; |
| this._parentSideSheet = _parentSideSheet; |
| this._sideSheetRefConstructor = _sideSheetRefConstructor; |
| this._sideSheetContainerType = _sideSheetContainerType; |
| this._sideSheetDataToken = _sideSheetDataToken; |
| this._openSideSheetsAtThisLevel = []; |
| this._afterAllClosedAtThisLevel = new Subject(); |
| this._afterOpenedAtThisLevel = new Subject(); |
| this.defaultSidebarConfig = { |
| minWidth: '400px', |
| maxWidth: '100vw', |
| }; |
| } |
| /** |
| * Keeps track of the currently-open side-sheets. |
| * @return {?} |
| */ |
| get openSideSheets() { |
| return this._parentSideSheet ? this._parentSideSheet.openSideSheets : this._openSideSheetsAtThisLevel; |
| } |
| /** |
| * @template T, D, R |
| * @param {?} componentOrTemplateRef |
| * @param {?=} config |
| * @return {?} |
| */ |
| open(componentOrTemplateRef, config) { |
| config = Object.assign(Object.assign(Object.assign({}, (this._defaultOptions || new CovalentSideSheetConfig())), this.defaultSidebarConfig), config); |
| /** @type {?} */ |
| const overlayRef = this._createOverlay(config); |
| /** @type {?} */ |
| const sideSheetContainer = this._attachSideSheetContainer(overlayRef, config); |
| /** @type {?} */ |
| const sideSheetRef = this._attachSideSheetContent(componentOrTemplateRef, sideSheetContainer, overlayRef, config); |
| /** @type {?} */ |
| const prevSideSheetRef = this.openSideSheets.slice(-1)[0]; |
| /** @type {?} */ |
| const prevOverlayRef = prevSideSheetRef === null || prevSideSheetRef === void 0 ? void 0 : prevSideSheetRef.overlayRef; |
| // Animate previous side sheet to full width |
| if (prevOverlayRef === null || prevOverlayRef === void 0 ? void 0 : prevOverlayRef.overlayElement) { |
| prevOverlayRef.overlayElement.style.transition = `${AnimationDurations.COMPLEX} ${AnimationCurves.DECELERATION_CURVE}`; |
| prevOverlayRef.overlayElement.style.minWidth = `${((/** @type {?} */ (window))).innerWidth}px`; |
| } |
| // Revert the previous side sheet config & size |
| sideSheetRef._containerInstance._animationStateChanged |
| .pipe(filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| (event) => event.state === 'closing' && !!(prevSideSheetRef && prevOverlayRef))), take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| () => { |
| prevOverlayRef.overlayElement.style.transition = `${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`; |
| prevSideSheetRef.updateSize(); |
| })); |
| // Add new side sheet to open list |
| this.openSideSheets.push(sideSheetRef); |
| // Remove side sheet ref after closed |
| sideSheetRef |
| .afterClosed() |
| .pipe(take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| () => this._removeOpenSideSheet(sideSheetRef))); |
| // Notify the side-sheet container that the content has been attached. |
| sideSheetContainer._initializeWithAttachedContent(); |
| return sideSheetRef; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| // Only close the side-sheets at this level on destroy |
| // since the parent service may still be active. |
| this._closeSideSheets(this._openSideSheetsAtThisLevel); |
| this._afterAllClosedAtThisLevel.complete(); |
| this._afterOpenedAtThisLevel.complete(); |
| // Clean up any subscriptions to side-sheet that never finished opening. |
| if (this._animationStateSubscriptions) { |
| this._animationStateSubscriptions.unsubscribe(); |
| } |
| } |
| /** |
| * Closes all of the currently-open side-sheets. |
| * @return {?} |
| */ |
| closeAll() { |
| this._closeSideSheets(this.openSideSheets); |
| } |
| /** |
| * @private |
| * @template T |
| * @param {?} config |
| * @return {?} |
| */ |
| _createOverlay(config) { |
| /** @type {?} */ |
| const overlayConfig = new OverlayConfig({ |
| positionStrategy: this._overlay.position().global(), |
| scrollStrategy: this._overlay.scrollStrategies.block(), |
| panelClass: config.panelClass, |
| hasBackdrop: config.hasBackdrop, |
| direction: config.direction, |
| minWidth: config.minWidth, |
| minHeight: config.minHeight, |
| maxWidth: config.maxWidth, |
| }); |
| /** @type {?} */ |
| const overlayRef = this._overlay.create(overlayConfig); |
| /** @type {?} */ |
| const positionStrategy = (/** @type {?} */ (overlayRef.getConfig().positionStrategy)); |
| positionStrategy.right('0px'); |
| return overlayRef; |
| } |
| /** |
| * Attaches a container to a side-sheets's already-created overlay. |
| * @private |
| * @param {?} overlay Reference to the side-sheet's underlying overlay. |
| * @param {?} config The side-sheet configuration. |
| * @return {?} A promise resolving to a ComponentRef for the attached container. |
| */ |
| _attachSideSheetContainer(overlay, config) { |
| /** @type {?} */ |
| const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| /** @type {?} */ |
| const injector = Injector.create({ |
| parent: userInjector || this._injector, |
| providers: [{ provide: CovalentSideSheetConfig, useValue: config }], |
| }); |
| /** @type {?} */ |
| const containerPortal = new ComponentPortal(this._sideSheetContainerType, config.viewContainerRef, injector, config.componentFactoryResolver); |
| /** @type {?} */ |
| const containerRef = overlay.attach(containerPortal); |
| return containerRef.instance; |
| } |
| /** |
| * Attaches the user-provided component to the already-created side sheet container. |
| * @private |
| * @template T, R |
| * @param {?} componentOrTemplateRef The type of component being loaded into the side-sheet, |
| * or a TemplateRef to instantiate as the content. |
| * @param {?} sideSheetContainer |
| * @param {?} overlayRef Reference to the overlay in which the side-sheet resides. |
| * @param {?} config The side-sheet configuration. |
| * @return {?} A promise resolving to the CovalentSideSheetRef that should be returned to the user. |
| */ |
| _attachSideSheetContent(componentOrTemplateRef, sideSheetContainer, overlayRef, config) { |
| // Create a reference to the side-sheet we're creating in order to give the user a handle |
| // to modify and close it. |
| /** @type {?} */ |
| const sideSheetRef = new this._sideSheetRefConstructor(overlayRef, sideSheetContainer, config.id); |
| if (componentOrTemplateRef instanceof TemplateRef) { |
| sideSheetContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, (/** @type {?} */ (null)), (/** @type {?} */ ({ |
| $implicit: config.data, |
| sideSheetRef, |
| })))); |
| } |
| else { |
| /** @type {?} */ |
| const injector = this._createInjector(config, sideSheetRef, sideSheetContainer); |
| /** @type {?} */ |
| const contentRef = sideSheetContainer.attach(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector)); |
| sideSheetRef.componentInstance = contentRef.instance; |
| } |
| sideSheetRef.updateSize(config.width, config.height); |
| return sideSheetRef; |
| } |
| /** |
| * @private |
| * @template T |
| * @param {?} config |
| * @param {?} sideSheetRef |
| * @param {?} sideSheetContainer |
| * @return {?} |
| */ |
| _createInjector(config, sideSheetRef, sideSheetContainer) { |
| /** @type {?} */ |
| const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| // The side-sheet container should be provided as the side-sheet container and the side-sheet's |
| // content are created out of the same `ViewContainerRef` and as such, are siblings |
| // for injector purposes. To allow the hierarchy that is expected, the side-sheet |
| // container is explicitly provided in the injector. |
| /** @type {?} */ |
| const providers = [ |
| { provide: this._sideSheetContainerType, useValue: sideSheetContainer }, |
| { provide: this._sideSheetDataToken, useValue: config.data }, |
| { provide: this._sideSheetRefConstructor, useValue: sideSheetRef }, |
| ]; |
| if (config.direction && |
| (!userInjector || !userInjector.get(Directionality, null, InjectFlags.Optional))) { |
| providers.push({ |
| provide: Directionality, |
| useValue: { value: config.direction, change: of() }, |
| }); |
| } |
| return Injector.create({ parent: userInjector || this._injector, providers }); |
| } |
| /** |
| * Removes a side sheet from the array of open side sheets. |
| * @private |
| * @param {?} sideSheetRef Side Sheet to be removed. |
| * @return {?} |
| */ |
| _removeOpenSideSheet(sideSheetRef) { |
| /** @type {?} */ |
| const index = this.openSideSheets.indexOf(sideSheetRef); |
| if (index > -1) { |
| this.openSideSheets.splice(index, 1); |
| } |
| } |
| /** |
| * Closes all of the side-sheet in an array. |
| * @private |
| * @param {?} sideSheets |
| * @return {?} |
| */ |
| _closeSideSheets(sideSheets) { |
| /** @type {?} */ |
| let i = sideSheets.length; |
| while (i--) { |
| sideSheets[i].close(); |
| } |
| } |
| } |
| _CovalentSideSheetBase.decorators = [ |
| { type: Directive } |
| ]; |
| /** @nocollapse */ |
| _CovalentSideSheetBase.ctorParameters = () => [ |
| { type: Overlay }, |
| { type: Injector }, |
| { type: undefined }, |
| { type: undefined }, |
| { type: Type }, |
| { type: Type }, |
| { type: InjectionToken } |
| ]; |
| if (false) { |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._openSideSheetsAtThisLevel; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._afterAllClosedAtThisLevel; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._afterOpenedAtThisLevel; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._animationStateSubscriptions; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype.defaultSidebarConfig; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._overlay; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._injector; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._defaultOptions; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._parentSideSheet; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._sideSheetRefConstructor; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._sideSheetContainerType; |
| /** |
| * @type {?} |
| * @private |
| */ |
| _CovalentSideSheetBase.prototype._sideSheetDataToken; |
| } |
| /** |
| * Service to open Covalent Design side-sheet. |
| */ |
| class CovalentSideSheet extends _CovalentSideSheetBase { |
| /** |
| * @param {?} overlay |
| * @param {?} injector |
| * @param {?} defaultOptions |
| * @param {?} parentSideSheet |
| */ |
| constructor(overlay, injector, defaultOptions, parentSideSheet) { |
| super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainer, MAT_DIALOG_DATA); |
| } |
| } |
| CovalentSideSheet.decorators = [ |
| { type: Injectable } |
| ]; |
| /** @nocollapse */ |
| CovalentSideSheet.ctorParameters = () => [ |
| { type: Overlay }, |
| { type: Injector }, |
| { type: CovalentSideSheetConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }, |
| { type: CovalentSideSheet, decorators: [{ type: Optional }, { type: SkipSelf }] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet.content-directives.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Counter used to generate unique IDs for dialog elements. |
| * @type {?} |
| */ |
| let dialogElementUid = 0; |
| /** |
| * Button that will close the current dialog. |
| */ |
| class CovalentSideSheetClose { |
| /** |
| * @param {?} dialogRef |
| * @param {?} _elementRef |
| * @param {?} _dialog |
| */ |
| constructor(dialogRef, _elementRef, _dialog) { |
| this.dialogRef = dialogRef; |
| this._elementRef = _elementRef; |
| this._dialog = _dialog; |
| /** |
| * Default to "button" to prevents accidental form submits. |
| */ |
| this.type = 'button'; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnInit() { |
| if (!this.dialogRef) { |
| // When this directive is included in a dialog via TemplateRef (rather than being |
| // in a Component), the DialogRef isn't available via injection because embedded |
| // views cannot be given a custom injector. Instead, we look up the DialogRef by |
| // ID. This must occur in `onInit`, as the ID binding for the dialog container won't |
| // be resolved at constructor time. |
| this.dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openSideSheets))); |
| } |
| } |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| ngOnChanges(changes) { |
| /** @type {?} */ |
| const proxiedChange = changes['_CovalentSideSheetClose'] || changes['_CovalentSideSheetCloseResult']; |
| if (proxiedChange) { |
| this.dialogResult = proxiedChange.currentValue; |
| } |
| } |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| _onButtonClick(event) { |
| // Determinate the focus origin using the click event, because using the FocusMonitor will |
| // result in incorrect origins. Most of the time, close buttons will be auto focused in the |
| // dialog, and therefore clicking the button won't result in a focus change. This means that |
| // the FocusMonitor won't detect any origin change, and will always output `program`. |
| _closeSideSheetVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult); |
| } |
| } |
| CovalentSideSheetClose.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[td-side-sheet-close], [CovalentSideSheetClose]', |
| exportAs: 'CovalentSideSheetClose', |
| host: { |
| '(click)': '_onButtonClick($event)', |
| '[attr.aria-label]': 'ariaLabel || null', |
| '[attr.type]': 'type', |
| }, |
| },] } |
| ]; |
| /** @nocollapse */ |
| CovalentSideSheetClose.ctorParameters = () => [ |
| { type: CovalentSideSheetRef, decorators: [{ type: Optional }] }, |
| { type: ElementRef }, |
| { type: CovalentSideSheet } |
| ]; |
| CovalentSideSheetClose.propDecorators = { |
| ariaLabel: [{ type: Input, args: ['aria-label',] }], |
| type: [{ type: Input }], |
| dialogResult: [{ type: Input, args: ['td-side-sheet-close',] }], |
| _CovalentSideSheetClose: [{ type: Input, args: ['CovalentSideSheetClose',] }] |
| }; |
| if (false) { |
| /** |
| * Screenreader label for the button. |
| * @type {?} |
| */ |
| CovalentSideSheetClose.prototype.ariaLabel; |
| /** |
| * Default to "button" to prevents accidental form submits. |
| * @type {?} |
| */ |
| CovalentSideSheetClose.prototype.type; |
| /** |
| * Dialog close input. |
| * @type {?} |
| */ |
| CovalentSideSheetClose.prototype.dialogResult; |
| /** @type {?} */ |
| CovalentSideSheetClose.prototype._CovalentSideSheetClose; |
| /** @type {?} */ |
| CovalentSideSheetClose.prototype.dialogRef; |
| /** |
| * @type {?} |
| * @private |
| */ |
| CovalentSideSheetClose.prototype._elementRef; |
| /** |
| * @type {?} |
| * @private |
| */ |
| CovalentSideSheetClose.prototype._dialog; |
| } |
| /** |
| * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling. |
| */ |
| class CovalentSideSheetTitle { |
| /** |
| * @param {?} _dialogRef |
| * @param {?} _elementRef |
| * @param {?} _dialog |
| */ |
| constructor(_dialogRef, _elementRef, _dialog) { |
| this._dialogRef = _dialogRef; |
| this._elementRef = _elementRef; |
| this._dialog = _dialog; |
| /** |
| * Unique id for the dialog title. If none is supplied, it will be auto-generated. |
| */ |
| this.id = `td-side-sheet-title-${dialogElementUid++}`; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnInit() { |
| if (this._dialogRef) { |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| () => { |
| /** @type {?} */ |
| const container = this._dialogRef._containerInstance; |
| if (container && !container._ariaLabelledBy) { |
| container._ariaLabelledBy = this.id; |
| } |
| })); |
| } |
| else { |
| this._dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openSideSheets))); |
| } |
| } |
| } |
| CovalentSideSheetTitle.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[td-side-sheet-title], [CovalentSideSheetTitle]', |
| exportAs: 'CovalentSideSheetTitle', |
| host: { |
| 'class': 'td-side-sheet-title', |
| '[id]': 'id', |
| }, |
| },] } |
| ]; |
| /** @nocollapse */ |
| CovalentSideSheetTitle.ctorParameters = () => [ |
| { type: CovalentSideSheetRef, decorators: [{ type: Optional }] }, |
| { type: ElementRef }, |
| { type: CovalentSideSheet } |
| ]; |
| CovalentSideSheetTitle.propDecorators = { |
| id: [{ type: Input }] |
| }; |
| if (false) { |
| /** |
| * Unique id for the dialog title. If none is supplied, it will be auto-generated. |
| * @type {?} |
| */ |
| CovalentSideSheetTitle.prototype.id; |
| /** |
| * @type {?} |
| * @private |
| */ |
| CovalentSideSheetTitle.prototype._dialogRef; |
| /** |
| * @type {?} |
| * @private |
| */ |
| CovalentSideSheetTitle.prototype._elementRef; |
| /** |
| * @type {?} |
| * @private |
| */ |
| CovalentSideSheetTitle.prototype._dialog; |
| } |
| /** |
| * Scrollable content container of a dialog. |
| */ |
| class CovalentSideSheetContent { |
| } |
| CovalentSideSheetContent.decorators = [ |
| { type: Directive, args: [{ |
| selector: `[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]`, |
| host: { class: 'td-side-sheet-content' }, |
| },] } |
| ]; |
| /** |
| * Container for the bottom action buttons in a dialog. |
| * Stays fixed to the bottom when scrolling. |
| */ |
| class CovalentSideSheetActions { |
| } |
| CovalentSideSheetActions.decorators = [ |
| { type: Directive, args: [{ |
| selector: `[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]`, |
| host: { class: 'td-side-sheet-actions' }, |
| },] } |
| ]; |
| /** |
| * Container for the wrapper part of the dialog |
| */ |
| class CovalentSideSheetWrapper { |
| } |
| CovalentSideSheetWrapper.decorators = [ |
| { type: Directive, args: [{ |
| selector: `[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]`, |
| host: { class: 'td-side-sheet-wrapper' }, |
| },] } |
| ]; |
| /** |
| * Finds the closest CovalentSideSheetRef to an element by looking at the DOM. |
| * @param {?} element Element relative to which to look for a dialog. |
| * @param {?} openDialogs References to the currently-open dialogs. |
| * @return {?} |
| */ |
| function getClosestDialog(element, openDialogs) { |
| /** @type {?} */ |
| let parent = element.nativeElement.parentElement; |
| while (parent && !parent.classList.contains('td-side-sheet-container')) { |
| parent = parent.parentElement; |
| } |
| return parent ? openDialogs.find((/** |
| * @param {?} dialog |
| * @return {?} |
| */ |
| (dialog) => dialog.id === (/** @type {?} */ (parent)).id)) : null; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: side-sheet.module.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class CovalentSideSheetModule { |
| } |
| CovalentSideSheetModule.decorators = [ |
| { type: NgModule, args: [{ |
| declarations: [ |
| CovalentSideSheetContainer, |
| CovalentSideSheetActions, |
| CovalentSideSheetClose, |
| CovalentSideSheetContent, |
| CovalentSideSheetTitle, |
| CovalentSideSheetWrapper, |
| ], |
| exports: [ |
| CovalentSideSheetActions, |
| CovalentSideSheetClose, |
| CovalentSideSheetContent, |
| CovalentSideSheetTitle, |
| CovalentSideSheetWrapper, |
| ], |
| imports: [PortalModule, MatDialogModule, MatCommonModule], |
| providers: [CovalentSideSheet], |
| },] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: public-api.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: index.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * Generated from: covalent-core-side-sheet.ts |
| * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentSideSheet, CovalentSideSheetActions, CovalentSideSheetClose, CovalentSideSheetConfig, CovalentSideSheetContent, CovalentSideSheetModule, CovalentSideSheetRef, CovalentSideSheetTitle, CovalentSideSheetWrapper, _CovalentSideSheetBase, _closeSideSheetVia, _CovalentSideSheetContainerBase as ɵa, CovalentSideSheetContainer as ɵb, tdSideSheetAnimations as ɵc }; |
| //# sourceMappingURL=covalent-core-side-sheet.js.map |
