@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/overlay/components/bottom-sheet/utils/bottom-sheet.utils.ts

@@ -0,0 +1,28 @@
+import { ElementRef } from '@angular/core';
+import { BOTTOM_SHEET_DEFAULT_OPTIONS } from '../constants';
+import { BottomSheetConfig } from '../types';
+import { createBottomSheetConfig } from './bottom-sheet-config';
+import { BottomSheetRef } from './bottom-sheet-ref';
+
+/**
+ * Finds the closest BottomSheetRef to an element by looking at the DOM.
+ * @param element Element relative to which to look for a bottom sheet.
+ * @param openBottomSheets References to the currently-open bottom sheets.
+ * @deprecated Will be removed in v5.
+ */
+export function getClosestBottomSheet(element: ElementRef<HTMLElement>, openBottomSheets: BottomSheetRef<unknown>[]) {
+  let parent: HTMLElement | null = element.nativeElement.parentElement;
+
+  while (parent && !parent.classList.contains('et-bottom-sheet')) {
+    parent = parent.parentElement;
+  }
+
+  return parent ? openBottomSheets.find((bottomSheet) => bottomSheet.id === parent?.id) : null;
+}
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const provideBottomSheetDefaultConfig = (config: Partial<BottomSheetConfig> | null | undefined = {}) => {
+  return { provide: BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: createBottomSheetConfig(config) };
+};

package/src/lib/components/overlay/components/dialog/components/dialog-container/dialog-container.component.scss

@@ -0,0 +1,25 @@
+.et-dialog.et-with-default-animation {
+  outline: none;
+
+  &.et-animation-enter-from {
+    opacity: 0;
+    transform: scale(1.15);
+  }
+
+  &.et-animation-leave-to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  &.et-animation-enter-active {
+    transition:
+      transform 300ms var(--ease-out-5),
+      opacity 300ms var(--ease-out-5);
+  }
+
+  &.et-animation-leave-active {
+    transition:
+      transform 150ms var(--ease-out-5),
+      opacity 150ms var(--ease-out-5);
+  }
+}

package/src/lib/components/overlay/components/dialog/components/dialog-container/dialog-container.component.ts

@@ -0,0 +1,66 @@
+import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Inject,
+  NgZone,
+  Optional,
+  ViewEncapsulation,
+} from '@angular/core';
+import { AnimatedLifecycleDirective, nextFrame } from '@ethlete/core';
+import { DIALOG_CONFIG } from '../../constants';
+import { DialogContainerBaseComponent } from '../../partials/dialog-container-base';
+import { DialogConfig } from '../../types';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+@Component({
+  selector: 'et-dialog-container',
+  styleUrls: ['./dialog-container.component.scss'],
+  template: `<ng-template cdkPortalOutlet />`,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'et-dialog',
+    tabindex: '-1',
+    '[attr.aria-modal]': '_config.ariaModal',
+    '[id]': '_config.id',
+    '[attr.role]': '_config.role',
+    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
+    '[attr.aria-label]': '_config.ariaLabel',
+    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
+    '[class.et-with-default-animation]': '!_config.customAnimated',
+    '[class]': '_config.containerClass',
+  },
+  standalone: true,
+  imports: [PortalModule],
+  hostDirectives: [AnimatedLifecycleDirective],
+})
+export class DialogContainerComponent extends DialogContainerBaseComponent {
+  constructor(
+    elementRef: ElementRef<HTMLElement>,
+    focusTrapFactory: FocusTrapFactory,
+    @Optional() @Inject(DOCUMENT) document: Document,
+    @Inject(DIALOG_CONFIG)
+    dialogConfig: DialogConfig,
+    checker: InteractivityChecker,
+    ngZone: NgZone,
+    public override overlayRef: OverlayRef,
+    focusMonitor?: FocusMonitor,
+  ) {
+    super(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, focusMonitor);
+  }
+
+  protected override _contentAttached(): void {
+    super._contentAttached();
+
+    nextFrame(() => {
+      this._animatedLifecycle.enter();
+    });
+  }
+}

package/src/lib/components/overlay/components/dialog/constants/dialog.constants.ts

@@ -0,0 +1,63 @@
+import { ScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';
+import { InjectionToken } from '@angular/core';
+import { RouterStateService, SmartBlockScrollStrategy } from '@ethlete/core';
+import { DialogConfig } from '../types';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_DATA = new InjectionToken('DialogData');
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_DEFAULT_OPTIONS = new InjectionToken<DialogConfig>('DialogDefaultOptions');
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('DialogScrollStrategy');
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_CONFIG = new InjectionToken<DialogConfig>('DialogConfig');
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export function DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(
+  ruler: ViewportRuler,
+  routerState: RouterStateService,
+): () => ScrollStrategy {
+  return () => new SmartBlockScrollStrategy(ruler, routerState, document);
+}
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_SCROLL_STRATEGY_PROVIDER = {
+  provide: DIALOG_SCROLL_STRATEGY,
+  deps: [ViewportRuler, RouterStateService],
+  useFactory: DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY,
+};
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DIALOG_DEFAULT_CONFIG: DialogConfig = {
+  role: 'dialog',
+  hasBackdrop: true,
+  disableClose: false,
+  maxWidth: '80vw',
+  data: null,
+  ariaDescribedBy: null,
+  ariaLabelledBy: null,
+  ariaLabel: null,
+  ariaModal: true,
+  customAnimated: false,
+  autoFocus: 'first-tabbable',
+  restoreFocus: true,
+  delayFocusTrap: true,
+  closeOnNavigation: true,
+} as const;

package/src/lib/components/overlay/components/dialog/dialog.imports.ts

@@ -0,0 +1,18 @@
+import { DIALOG_SCROLL_STRATEGY_PROVIDER as CDK_DIALOG_SCROLL_STRATEGY_PROVIDER, Dialog } from '@angular/cdk/dialog';
+import { DialogContainerComponent } from './components/dialog-container';
+import { DIALOG_SCROLL_STRATEGY_PROVIDER } from './constants';
+import { DialogCloseDirective } from './partials/dialog-close';
+import { DialogTitleDirective } from './partials/dialog-title';
+import { DialogService } from './services';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const DialogImports = [DialogContainerComponent, DialogCloseDirective, DialogTitleDirective] as const;
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+export const provideDialog = () => {
+  return [DialogService, DIALOG_SCROLL_STRATEGY_PROVIDER, Dialog, CDK_DIALOG_SCROLL_STRATEGY_PROVIDER];
+};

package/src/lib/components/overlay/components/dialog/partials/dialog-close/dialog-close.directive.ts

@@ -0,0 +1,76 @@
+import {
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  inject,
+} from '@angular/core';
+import { DialogService } from '../../services';
+import { DialogRef, getClosestDialog } from '../../utils';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+@Directive({
+  selector: '[et-dialog-close], [etDialogClose]',
+  exportAs: 'etDialogClose',
+  host: {
+    '[attr.aria-label]': 'ariaLabel || null',
+  },
+  standalone: true,
+})
+export class DialogCloseDirective implements OnInit, OnChanges {
+  private _dialogRef = inject(DialogRef, { optional: true });
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _dialogService = inject(DialogService);
+
+  @Input('aria-label')
+  ariaLabel?: string;
+
+  @Input()
+  @HostBinding('attr.type')
+  type: 'submit' | 'button' | 'reset' = 'button';
+
+  @Input('et-dialog-close')
+  dialogResult: unknown;
+
+  @Input('etDialogClose')
+  _etDialogClose: unknown;
+
+  ngOnInit() {
+    if (!this._dialogRef) {
+      const closestRef = getClosestDialog(this._elementRef, this._dialogService.openDialogs);
+
+      if (!closestRef) {
+        throw Error('No closest ref found');
+      }
+
+      this._dialogRef = closestRef;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const change = changes['_etDialogClose'];
+
+    if (change) {
+      this.dialogResult = change.currentValue;
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  _onButtonClick(event: MouseEvent) {
+    if (!this._dialogRef) {
+      return;
+    }
+
+    this._dialogRef._closeDialogVia(
+      this._dialogRef,
+      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
+      this.dialogResult,
+    );
+  }
+}

package/src/lib/components/overlay/components/dialog/partials/dialog-container-base/dialog-container-base.component.ts

@@ -0,0 +1,51 @@
+import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+import { CdkDialogContainer } from '@angular/cdk/dialog';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
+import { Component, ElementRef, Inject, NgZone, Optional, inject } from '@angular/core';
+import { ANIMATED_LIFECYCLE_TOKEN } from '@ethlete/core';
+import { DIALOG_CONFIG } from '../../constants';
+import { DialogConfig } from '../../types';
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+@Component({ selector: 'et-dialog-container-base', template: '' })
+export abstract class DialogContainerBaseComponent extends CdkDialogContainer<DialogConfig> {
+  readonly _animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
+
+  constructor(
+    public elementRef: ElementRef<HTMLElement>,
+    focusTrapFactory: FocusTrapFactory,
+    @Optional() @Inject(DOCUMENT) _document: Document,
+    @Inject(DIALOG_CONFIG)
+    dialogConfig: DialogConfig,
+    interactivityChecker: InteractivityChecker,
+    ngZone: NgZone,
+    public overlayRef: OverlayRef,
+    focusMonitor?: FocusMonitor,
+  ) {
+    super(
+      elementRef,
+      focusTrapFactory,
+      _document,
+      dialogConfig,
+      interactivityChecker,
+      ngZone,
+      overlayRef,
+      focusMonitor,
+    );
+  }
+
+  protected override _captureInitialFocus(): void {
+    if (!this._config.delayFocusTrap) {
+      this._trapFocus();
+    }
+  }
+
+  protected _openAnimationDone() {
+    if (this._config.delayFocusTrap) {
+      this._trapFocus();
+    }
+  }
+}

package/src/lib/components/overlay/components/dialog/partials/dialog-title/dialog-title.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, ElementRef, HostBinding, inject, Input, OnInit } from '@angular/core';
+import { DialogService } from '../../services';
+import { DialogRef, getClosestDialog } from '../../utils';
+
+let dialogElementUid = 0;
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+@Directive({
+  selector: '[et-dialog-title], [etDialogTitle]',
+  exportAs: 'etDialogTitle',
+  standalone: true,
+})
+export class DialogTitleDirective implements OnInit {
+  private _dialogRef = inject(DialogRef, { optional: true });
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _dialogService = inject(DialogService);
+
+  @Input()
+  @HostBinding('attr.id')
+  id = `et-dialog-title-${dialogElementUid++}`;
+
+  ngOnInit() {
+    if (!this._dialogRef) {
+      const closestRef = getClosestDialog(this._elementRef, this._dialogService.openDialogs);
+
+      if (!closestRef) {
+        throw Error('No closest ref found');
+      }
+
+      this._dialogRef = closestRef;
+    }
+
+    Promise.resolve().then(() => this._dialogRef?._containerInstance?._ariaLabelledByQueue?.push(this.id));
+  }
+}

package/src/lib/components/overlay/components/dialog/services/dialog-base.service.ts

@@ -0,0 +1,151 @@
+import { Dialog as CdkDialog, DialogConfig as CdkDialogConfig } from '@angular/cdk/dialog';
+import { ComponentType, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { Directive, InjectionToken, Injector, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { Observable, Subject, defer, startWith } from 'rxjs';
+import { DIALOG_CONFIG } from '../constants';
+import { DialogContainerBaseComponent } from '../partials/dialog-container-base';
+import { DialogConfig } from '../types';
+import { DialogRef, createDialogConfig } from '../utils';
+
+let uniqueId = 0;
+
+/**
+ * @deprecated Will be removed in v5.
+ */
+@Directive()
+export abstract class DialogServiceBase<C extends DialogContainerBaseComponent> implements OnDestroy {
+  private readonly _openDialogsAtThisLevel: DialogRef[] = [];
+  private readonly _afterAllClosedAtThisLevel = new Subject<void>();
+  private readonly _afterOpenedAtThisLevel = new Subject<DialogRef>();
+  private _scrollStrategy: () => ScrollStrategy;
+  protected _idPrefix = 'et-dialog-';
+  private _dialog: CdkDialog;
+
+  readonly afterAllClosed: Observable<void> = defer(() =>
+    this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)),
+  ) as Observable<void>;
+
+  get openDialogs(): DialogRef[] {
+    return this._parentDialogService ? this._parentDialogService.openDialogs : this._openDialogsAtThisLevel;
+  }
+
+  get afterOpened(): Subject<DialogRef> {
+    return this._parentDialogService ? this._parentDialogService.afterOpened : this._afterOpenedAtThisLevel;
+  }
+
+  private _getAfterAllClosed(): Subject<void> {
+    const parent = this._parentDialogService;
+    return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
+  }
+
+  constructor(
+    private _overlay: Overlay,
+    injector: Injector,
+    private _defaultOptions: DialogConfig | undefined,
+    private _parentDialogService: DialogServiceBase<C> | undefined,
+    scrollStrategy: () => ScrollStrategy,
+    private _dialogRefConstructor: Type<DialogRef>,
+    private _dialogContainerType: Type<C>,
+    private _dialogDataToken: InjectionToken<unknown>,
+  ) {
+    this._scrollStrategy = scrollStrategy;
+    this._dialog = injector.get(CdkDialog);
+  }
+
+  open<T, D = unknown, R = unknown>(component: ComponentType<T>, config?: DialogConfig<D>): DialogRef<T, R>;
+
+  open<T, D = unknown, R = unknown>(template: TemplateRef<T>, config?: DialogConfig<D>): DialogRef<T, R>;
+
+  open<T, D = unknown, R = unknown>(
+    template: ComponentType<T> | TemplateRef<T>,
+    config?: DialogConfig<D>,
+  ): DialogRef<T, R>;
+
+  open<T, D = unknown, R = unknown>(
+    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
+    config?: DialogConfig<D>,
+  ): DialogRef<T, R> {
+    let dialogRef: DialogRef<T, R>;
+    config = createDialogConfig<D>(this._defaultOptions as DialogConfig<D>, config);
+    config.id = config.id || `${this._idPrefix}${uniqueId++}`;
+    config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
+
+    const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
+      ...config,
+      positionStrategy:
+        config.positionStrategy ?? this._overlay.position().global().centerHorizontally().centerVertically(),
+      disableClose: true,
+      closeOnDestroy: false,
+      container: {
+        type: this._dialogContainerType,
+        providers: () => [
+          { provide: DIALOG_CONFIG, useValue: config },
+          { provide: CdkDialogConfig, useValue: config },
+        ],
+      },
+      templateContext: () => ({ dialogRef }),
+      providers: (ref, cdkConfig, dialogContainer) => {
+        if (config?.overlayClass) {
+          const overlayRefClasses = Array.isArray(config.overlayClass)
+            ? config.overlayClass.join(' ')
+            : config.overlayClass;
+
+          ref.overlayRef.hostElement.classList.add(overlayRefClasses);
+        }
+
+        dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);
+        dialogRef.updatePosition(config?.position);
+        return [
+          { provide: this._dialogContainerType, useValue: dialogContainer },
+          { provide: this._dialogDataToken, useValue: cdkConfig.data },
+          { provide: this._dialogRefConstructor, useValue: dialogRef },
+        ];
+      },
+    });
+
+    /* eslint-disable @typescript-eslint/no-non-null-assertion*/
+
+    dialogRef!.componentInstance = cdkRef.componentInstance!;
+
+    this.openDialogs.push(dialogRef!);
+    this.afterOpened.next(dialogRef!);
+
+    dialogRef!.afterClosed().subscribe(() => {
+      const index = this.openDialogs.indexOf(dialogRef);
+
+      if (index > -1) {
+        this.openDialogs.splice(index, 1);
+
+        if (!this.openDialogs.length) {
+          this._getAfterAllClosed().next();
+        }
+      }
+    });
+
+    return dialogRef!;
+
+    /* eslint-enable @typescript-eslint/no-non-null-assertion*/
+  }
+
+  closeAll(): void {
+    this._closeDialogs(this.openDialogs);
+  }
+
+  getDialogById(id: string): DialogRef | undefined {
+    return this.openDialogs.find((dialog) => dialog.id === id);
+  }
+
+  ngOnDestroy() {
+    this._closeDialogs(this._openDialogsAtThisLevel);
+    this._afterAllClosedAtThisLevel.complete();
+    this._afterOpenedAtThisLevel.complete();
+  }
+
+  private _closeDialogs(dialogs: DialogRef[]) {
+    let i = dialogs.length;
+
+    while (i--) {
+      dialogs[i]?.close();
+    }
+  }
+}

package/src/lib/components/overlay/components/dialog/services/dialog.service.ts

@@ -0,0 +1,32 @@
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { Inject, Injectable, Injector, Optional, SkipSelf } from '@angular/core';
+import { DialogContainerComponent } from '../components/dialog-container';
+import { DIALOG_DATA, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY } from '../constants';
+import { DialogConfig } from '../types';
+import { DialogRef } from '../utils';
+import { DialogServiceBase } from './dialog-base.service';
+
+/**
+ * @deprecated Use `OverlayService` instead. Will be removed in v5.
+ */
+@Injectable()
+export class DialogService extends DialogServiceBase<DialogContainerComponent> {
+  constructor(
+    overlay: Overlay,
+    injector: Injector,
+    @Optional() @Inject(DIALOG_DEFAULT_OPTIONS) defaultOptions: DialogConfig,
+    @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: () => ScrollStrategy,
+    @Optional() @SkipSelf() parentDialogService: DialogService,
+  ) {
+    super(
+      overlay,
+      injector,
+      defaultOptions,
+      parentDialogService,
+      scrollStrategy,
+      DialogRef,
+      DialogContainerComponent,
+      DIALOG_DATA,
+    );
+  }
+}

package/src/lib/components/overlay/components/dialog/stories/components/dialog-host.storybook.component.ts

@@ -0,0 +1,121 @@
+import { Component, inject, Input } from '@angular/core';
+import { DialogImports, provideDialog } from '../../dialog.imports';
+import { DialogService } from '../../services';
+import { createDialogConfig } from '../../utils';
+import { DialogStorybookComponent } from './dialog.storybook.component';
+
+@Component({
+  selector: 'et-sb-dialog-host',
+  template: `
+    <button (click)="showDialog()" type="button">Show dialog</button> <br />
+    <br />
+    <button (click)="toggleScrollable()" type="button">Toggle scrollable</button> <br />
+    @if (_isScrollable) {
+      <div style="background:#171717; height:200vh; margin-top: 2rem"></div>
+    }
+  `,
+  standalone: true,
+  imports: [DialogImports],
+  providers: [provideDialog()],
+})
+export class DialogHostStorybookComponent {
+  private readonly _defaultConfig = createDialogConfig();
+  private readonly _dialogService = inject(DialogService);
+
+  @Input()
+  ariaDescribedBy = this._defaultConfig.ariaDescribedBy;
+
+  @Input()
+  ariaLabel = this._defaultConfig.ariaLabel;
+
+  @Input()
+  ariaLabelledBy = this._defaultConfig.ariaLabelledBy;
+
+  @Input()
+  autoFocus = this._defaultConfig.autoFocus;
+
+  @Input()
+  backdropClass = this._defaultConfig.backdropClass;
+
+  @Input()
+  overlayClass = this._defaultConfig.overlayClass;
+
+  @Input()
+  closeOnNavigation = this._defaultConfig.closeOnNavigation;
+
+  @Input()
+  data = this._defaultConfig.data;
+
+  @Input()
+  delayFocusTrap = this._defaultConfig.delayFocusTrap;
+
+  @Input()
+  direction = this._defaultConfig.direction;
+
+  @Input()
+  disableClose = this._defaultConfig.disableClose;
+
+  @Input()
+  hasBackdrop = this._defaultConfig.hasBackdrop;
+
+  @Input()
+  height = this._defaultConfig.height;
+
+  @Input()
+  id = this._defaultConfig.id;
+
+  @Input()
+  injector = this._defaultConfig.injector;
+
+  @Input()
+  maxHeight = this._defaultConfig.maxHeight;
+
+  @Input()
+  maxWidth = this._defaultConfig.maxWidth;
+
+  @Input()
+  minHeight = this._defaultConfig.minHeight;
+
+  @Input()
+  minWidth = this._defaultConfig.minWidth;
+
+  @Input()
+  panelClass = this._defaultConfig.panelClass;
+
+  @Input()
+  containerClass = this._defaultConfig.containerClass;
+
+  @Input()
+  customAnimated = this._defaultConfig.customAnimated;
+
+  @Input()
+  position = this._defaultConfig.position;
+
+  @Input()
+  restoreFocus = this._defaultConfig.restoreFocus;
+
+  @Input()
+  role = this._defaultConfig.role;
+
+  @Input()
+  scrollStrategy = this._defaultConfig.scrollStrategy;
+
+  @Input()
+  positionStrategy = this._defaultConfig.positionStrategy;
+
+  @Input()
+  viewContainerRef = this._defaultConfig.viewContainerRef;
+
+  @Input()
+  width = this._defaultConfig.width;
+
+  _isScrollable = false;
+
+  toggleScrollable() {
+    this._isScrollable = !this._isScrollable;
+  }
+
+  showDialog() {
+    this._dialogService.open(DialogStorybookComponent, this);
+  }
+}