@daffodil/design 0.87.1 → 0.88.1

package/fesm2022/daffodil-design-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-select.mjs","sources":["../../../libs/design/select/src/animation/state.enum.ts","../../../libs/design/select/src/animation/select-animation.ts","../../../libs/design/select/src/animation/select-animation-state.ts","../../../libs/design/select/src/option/option.directive.ts","../../../libs/design/select/src/select/select.component.ts","../../../libs/design/select/src/select/select.component.html","../../../libs/design/select/src/select.ts","../../../libs/design/select/src/daffodil-design-select.ts"],"sourcesContent":["export enum DaffSelectAnimationState {\n  OPEN = 'open',\n  CLOSED = 'closed'\n};\n","import {\n  state,\n  style,\n  trigger,\n  AnimationTriggerMetadata,\n} from '@angular/animations';\n\nimport { DaffSelectAnimationState } from './state.enum';\n\nexport const daffSelectAnimations: {\n  readonly openSelect: AnimationTriggerMetadata;\n} = {\n  openSelect: trigger('openSelect', [\n    state(DaffSelectAnimationState.OPEN, style({\n      height: '*',\n    })),\n    state(DaffSelectAnimationState.CLOSED, style({\n      height: '0',\n    })),\n  ]),\n};\n","import { DaffSelectAnimationState } from './state.enum';\n\n/**\n * Turns a boolean into a string of 'open' or 'close'.\n *\n * @param open A boolean representing the open status of an select.\n */\nexport const getAnimationState = (open: boolean): DaffSelectAnimationState => {\n  if (open) {\n    return DaffSelectAnimationState.OPEN;\n  } else {\n    return DaffSelectAnimationState.CLOSED;\n  }\n};\n","import {\n  Directive,\n  Optional,\n  TemplateRef,\n} from '@angular/core';\n\n/**\n * The directive provides the template for a list of options inside the select dropdown.\n */\n@Directive({\n  selector: '[daffSelectOption]',\n})\nexport class DaffSelectOptionDirective {\n  constructor(@Optional() public templateRef?: TemplateRef<unknown>) {}\n}\n","import {\n  Overlay,\n  OverlayModule,\n  OverlayRef,\n} from '@angular/cdk/overlay';\nimport {\n  PortalModule,\n  TemplatePortal,\n} from '@angular/cdk/portal';\nimport {\n  DOCUMENT,\n  NgTemplateOutlet,\n} from '@angular/common';\nimport {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  HostBinding,\n  ChangeDetectorRef,\n  OnInit,\n  ElementRef,\n  Inject,\n  Optional,\n  Self,\n  ContentChild,\n  ViewChild,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NgControl,\n} from '@angular/forms';\nimport {\n  Subject,\n  delay,\n  map,\n  merge,\n  of,\n  takeUntil,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\nimport { daffSelectAnimations } from '../animation/select-animation';\nimport { getAnimationState } from '../animation/select-animation-state';\nimport { DaffSelectAnimationState } from '../animation/state.enum';\nimport { DaffSelectOptionDirective } from '../option/option.directive';\n\nlet daffSelectOtionsId = 0;\n\n/**\n * DaffSelectComponent is a form control component that presents a list of selectable options,\n * similar to the native `<select>` element we call `<daff-native-select>`.\n *\n */\n@Component({\n  selector: 'daff-select',\n  templateUrl: './select.component.html',\n  styleUrls: ['./select.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    daffSelectAnimations.openSelect,\n  ],\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n    },\n  ],\n  providers: [\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    { provide: DaffFormFieldControl, useExisting: DaffSelectComponent },\n  ],\n  imports: [\n    NgTemplateOutlet,\n    OverlayModule,\n    PortalModule,\n  ],\n})\nexport class DaffSelectComponent<T = unknown> extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {\n  /** @docs-private */\n  controlType = 'custom-select';\n\n  /**\n   * @docs-private\n   */\n  supportsAutoLabelling = false;\n\n  private _destroyed = new Subject<boolean>();\n  private _overlay: OverlayRef;\n  private _value = null;\n  private _highlighted = 0;\n  private _animationState: DaffSelectAnimationState;\n  private _animationFinishCallbackQueue: Array<() => void> = [];\n\n  /**\n   * @docs-private\n   */\n  get focused() {\n    return this.document.activeElement === this.buttonElement?.nativeElement || this.document.activeElement === this.optionsElement?.nativeElement;\n  }\n\n  /**\n   * @docs-private\n   */\n  get raised() {\n    return this.focused && this.isOpen;\n  }\n\n  /** @docs-private */\n  focus() {\n    (<HTMLElement>this.buttonElement?.nativeElement)?.focus();\n    this.emitState();\n  }\n\n  /** @docs-private */\n  blur() {\n    (<HTMLElement>this.buttonElement?.nativeElement)?.blur();\n    this.emitState();\n  }\n\n  /**\n   * @docs-private\n   */\n  _disabled = false;\n  @Input() disabled = false;\n\n  @Input() options: T[] = [];\n\n  /**\n   * @docs-private\n   */\n  get isOpen() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-select') class = true;\n\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.disabled') get disabledClass() {\n    return this.disabled || this._disabled;\n  }\n\n  /**\n   * @docs-private\n   *\n   * `aria-labelledby` for the select.\n   */\n  @HostBinding('attr.aria-labelledby') ariaLabelledBy = '';\n\n  /**\n   * The unique id of the select options. Defaults to an autogenerated value.\n   */\n  @Input() optionsId: string = 'daff-select-options' + '-' + ++daffSelectOtionsId;\n\n  constructor(\n    private cd: ChangeDetectorRef,\n    @Inject(DOCUMENT) private document: Document,\n    @Optional() @Self() public ngControl: NgControl,\n    private overlay: Overlay,\n    private openDirective: DaffOpenableDirective,\n    private formField: DaffFormFieldComponent,\n  ) {\n    super(ngControl);\n\n    this.ariaLabelledBy = this.formField.id;\n\n    this.openDirective.stateless = false;\n\n    this.document.addEventListener('keydown', (event) => {\n      if (event.key === 'Tab' && this.isOpen) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        this.focusOptionsList();\n      }\n    });\n\n    if (this.ngControl != null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('field') buttonElement: ElementRef<HTMLButtonElement>;\n  /**\n   * @docs-private\n   */\n  @ViewChild('optionsTemplate') optionsTemplatePortal: TemplatePortal<unknown>;\n  /**\n   * @docs-private\n   */\n  @ViewChild('optionsEl', { read: ElementRef<HTMLDivElement> }) optionsElement: ElementRef<HTMLDivElement>;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffSelectOptionDirective) optionTemplate?: DaffSelectOptionDirective;\n\n  /**\n   * @docs-private\n   */\n  get animationState() {\n    return this._animationState;\n  }\n\n  /**\n   * @docs-private\n   */\n  get value() {\n    return this._value;\n  }\n\n  /**\n   * @docs-private\n   */\n  get highlighted(): number {\n    return this._highlighted;\n  }\n\n  set highlighted(val: number) {\n    this._highlighted = val;\n    this.cd.markForCheck();\n  }\n\n  private focusOptionsList() {\n    this.optionsElement?.nativeElement.focus();\n  }\n\n  private focusButton() {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnDestroy(): void {\n    this._destroyed.next(true);\n    this._overlay?.dispose();\n  }\n\n  private onChange(value: T): void {};\n  private onTouched(value: T): void {};\n\n  /**\n   * @docs-private\n   */\n  writeValue(value: T): void {\n    this._value = value;\n    this.cd.markForCheck();\n  }\n\n  /**\n   * @docs-private\n   */\n  registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @docs-private\n   */\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @docs-private\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this._disabled = isDisabled;\n  }\n\n  /**\n   * @docs-private\n   */\n  flushValue() {\n    this.ngControl?.control?.setValue(this._value);\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n    );\n    this._animationState = getAnimationState(this.openDirective.open);\n  }\n\n  /**\n   * @docs-private\n   */\n  animationFinished() {\n    this._animationFinishCallbackQueue.forEach((cb) => {\n      cb();\n    });\n    this._animationFinishCallbackQueue = [];\n  }\n\n  /**\n   * Opens the options list.\n   */\n  open(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (!this.openDirective.open) {\n      this.openDirective.open = true;\n      this._animationState = getAnimationState(this.openDirective.open);\n      if (this._value) {\n        this._highlighted = this.options.findIndex((v) => v === this._value);\n      }\n\n      // Get the width of the button element to use for the overlay\n      const buttonWidth = this.buttonElement.nativeElement.getBoundingClientRect().width;\n\n      this._overlay = this.overlay.create({\n        hasBackdrop: true,\n        backdropClass: 'cdk-overlay-transparent-backdrop',\n        scrollStrategy: this.overlay.scrollStrategies.block(),\n        disposeOnNavigation: true,\n        width: `${buttonWidth}px`, // Set the exact width of the button element\n        positionStrategy: this.overlay\n          .position()\n          .flexibleConnectedTo(this.buttonElement)\n          .withPositions([\n            {\n              originX: 'start',\n              originY: 'bottom',\n              overlayX: 'start',\n              overlayY: 'top',\n              offsetY: 2,\n            },\n            {\n              originX: 'start',\n              originY: 'top',\n              overlayX: 'start',\n              overlayY: 'bottom',\n              offsetY: -2,\n            },\n          ]),\n      });\n      this._overlay.attachments().pipe(\n        takeUntil(this._destroyed),\n        delay(0),\n      ).subscribe(() => {\n        this.focusOptionsList();\n      });\n      this._overlay.attach(this.optionsTemplatePortal);\n\n      this._overlay.backdropClick().pipe(\n        takeUntil(this._destroyed),\n      ).subscribe(() => {\n        this.close();\n      });\n\n      this.cd.markForCheck();\n    }\n  }\n\n  /**\n   * Closes the options list.\n   */\n  close(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.openDirective.open) {\n      this.openDirective.open = false;\n      this._animationState = getAnimationState(this.openDirective.open);\n      this.cd.markForCheck();\n      // do we actually have to dispose and recreate the overlay every time we want to close the dropdown?\n      this._animationFinishCallbackQueue.push(() => {\n        this._overlay?.dispose();\n        this._overlay = null;\n        this.focusButton();\n      });\n    }\n  }\n\n  /**\n   * Selects the value in a particular position in the options list.\n   */\n  private selectValueInPosition(position: number) {\n    if (position >= 0 && position < this.options.length) {\n      this.writeValue(this.options[position]);\n    }\n\n    this.close();\n  }\n\n  /**\n   * Selects an option.\n   */\n  selectOption(option: T) {\n    if (this.ngControl?.control) {\n      this.ngControl.control.setValue(option);\n    } else {\n      this.writeValue(option);\n    }\n\n    this.close();\n  }\n\n  /**\n   * Selects the option referenced by the highlighted index.\n   */\n  selectHighlighted(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this.selectValueInPosition(this._highlighted);\n\n    this.onChange(this._value);\n  }\n\n  /**\n   * Highlights the next option in the list.\n   */\n  highlightNext(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this._highlighted = this._highlighted < this.options.length - 1 ? this._highlighted + 1 : 0;\n    (<HTMLElement>event?.target).children[this._highlighted].scrollIntoView();\n  }\n\n  /**\n   * Highlights the previous option in the list.\n   */\n  highlightPrevious(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this._highlighted = this._highlighted > 0 ? this._highlighted - 1 : this.options.length - 1;\n    (<HTMLElement>event?.target).children[this._highlighted].scrollIntoView();\n  }\n}\n","<button #field class=\"daff-select__field\"\n  type=\"button\"\n  (click)=\"open($event)\"\n  (focus)=\"focus()\"\n  (blur)=\"blur()\"\n  [disabled]=\"disabled || _disabled\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-controls]=\"optionsId\"\n  (keydown.arrowdown)=\"open($event)\"\n  (keydown.arrowup)=\"open($event)\"\n  (keydown.alt.arrowup)=\"open($event)\"\n  (keydown.alt.arrowdown)=\"open($event)\"\n  (keydown.space)=\"open($event)\"\n  (keydown.enter)=\"open($event)\">\n  @if (value) {\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate?.templateRef\"\n      [ngTemplateOutletContext]=\"{option: value}\"><div></div>\n    </ng-container>\n  }\n</button>\n<ng-template cdkPortal #optionsTemplate=\"cdkPortal\">\n  <div class=\"daff-select__options\" #optionsEl\n    [id]=\"optionsId\"\n    tabindex=\"0\"\n    role=\"listbox\"\n    [@openSelect]=\"animationState\"\n    (@openSelect.done)=\"animationFinished()\"\n    (keydown.enter)=\"selectHighlighted($event)\"\n    (keydown.space)=\"selectHighlighted($event)\"\n    (keydown.escape)=\"close($event)\"\n    (keydown.arrowdown)=\"highlightNext($event)\"\n    (keydown.arrowup)=\"highlightPrevious($event)\">\n    @for (option of options; track $index; let i = $index) {\n      <div class=\"daff-select__option\"\n      [class.selected]=\"value === option\"\n      [class.highlighted]=\"highlighted === i\"\n      (click)=\"selectOption(option)\">\n        <ng-container\n          [ngTemplateOutlet]=\"optionTemplate?.templateRef\"\n          [ngTemplateOutletContext]=\"{\n            isSelected: value === option,\n            isHighlighted: highlighted === i,\n            option\n          }\">\n        </ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n","import {\n  DaffErrorMessageComponent,\n  DaffFormLabelDirective,\n} from '@daffodil/design';\n\nimport { DaffSelectOptionDirective } from './option/option.directive';\nimport { DaffSelectComponent } from './select/select.component';\n\nexport const DAFF_SELECT_COMPONENTS = <const> [\n  DaffSelectComponent,\n  DaffSelectOptionDirective,\n  DaffErrorMessageComponent,\n  DaffFormLabelDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-select.mjs","sources":["../../../libs/design/select/src/option/option.directive.ts","../../../libs/design/select/src/select/select.component.ts","../../../libs/design/select/src/select/select.component.html","../../../libs/design/select/src/select.ts","../../../libs/design/select/src/daffodil-design-select.ts"],"sourcesContent":["import {\n  Directive,\n  Optional,\n  TemplateRef,\n} from '@angular/core';\n\n/**\n * The directive provides the template for a list of options inside the select dropdown.\n */\n@Directive({\n  selector: '[daffSelectOption]',\n})\nexport class DaffSelectOptionDirective {\n  constructor(@Optional() public templateRef?: TemplateRef<unknown>) {}\n}\n","import {\n  Overlay,\n  OverlayModule,\n  OverlayRef,\n} from '@angular/cdk/overlay';\nimport {\n  PortalModule,\n  TemplatePortal,\n} from '@angular/cdk/portal';\nimport {\n  DOCUMENT,\n  NgTemplateOutlet,\n} from '@angular/common';\nimport {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  ChangeDetectorRef,\n  OnInit,\n  ElementRef,\n  Inject,\n  Optional,\n  Self,\n  ContentChild,\n  ViewChild,\n  OnDestroy,\n  booleanAttribute,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport {\n  Subject,\n  delay,\n  map,\n  merge,\n  of,\n  takeUntil,\n  tap,\n} from 'rxjs';\n\nimport {\n  DaffFormFieldComponent,\n  DaffFormFieldControl,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\nimport { DaffSelectOptionDirective } from '../option/option.directive';\n\nlet daffSelectOtionsId = 0;\n\n/**\n * DaffSelectComponent is a form control component that presents a list of selectable options,\n * similar to the native `<select>` element we call `<daff-native-select>`.\n *\n */\n@Component({\n  selector: 'daff-select',\n  templateUrl: './select.component.html',\n  styleUrls: ['./select.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n    },\n  ],\n  host: {\n    class: 'daff-select',\n    '[attr.aria-labelledby]': 'ariaLabelledBy',\n  },\n  providers: [\n\n    { provide: DaffFormFieldControl, useExisting: DaffSelectComponent },\n  ],\n  imports: [\n    NgTemplateOutlet,\n    OverlayModule,\n    PortalModule,\n  ],\n})\nexport class DaffSelectComponent<T = unknown> extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {\n  /** @docs-private */\n  controlType = 'custom-select';\n\n  /**\n   * @docs-private\n   */\n  supportsAutoLabelling = false;\n\n  private _destroyed = new Subject<boolean>();\n  private _overlay: OverlayRef;\n  private _value = null;\n  private _highlighted = 0;\n\n  /**\n   * @docs-private\n   */\n  get focused() {\n    return this.document.activeElement === this.buttonElement?.nativeElement || this.document.activeElement === this.optionsElement?.nativeElement;\n  }\n\n  /**\n   * @docs-private\n   */\n  get raised() {\n    return this.focused && this.isOpen;\n  }\n\n  /** @docs-private */\n  focus() {\n    (<HTMLElement>this.buttonElement?.nativeElement)?.focus();\n    this.emitState();\n  }\n\n  /** @docs-private */\n  blur() {\n    this.onTouched();\n    this.emitState(true);\n  }\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  private _required = false;\n\n  /**\n   * @docs-private\n   *\n   * Implemented as part of DaffFormFieldControl.\n   */\n  @Input({ transform: booleanAttribute })\n  get required(): boolean {\n    return this.ngControl?.control?.hasValidator(Validators.required) ?? this._required;\n  }\n  set required(value: boolean) {\n    this._required = value;\n  }\n\n  @Input() options: T[] = [];\n\n  /**\n   * @docs-private\n   */\n  get isOpen() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * @docs-private\n   *\n   * `aria-labelledby` for the select.\n   */\n  ariaLabelledBy = '';\n\n  /**\n   * The unique id of the select options. Defaults to an autogenerated value.\n   */\n  @Input() optionsId: string = 'daff-select-options' + '-' + ++daffSelectOtionsId;\n\n  constructor(\n    private cd: ChangeDetectorRef,\n    @Inject(DOCUMENT) private document: Document,\n    @Optional() @Self() public ngControl: NgControl,\n    private overlay: Overlay,\n    private openDirective: DaffOpenableDirective,\n    @Optional() private formField: DaffFormFieldComponent,\n  ) {\n    super(ngControl);\n\n    if(!this.formField) {\n      throw new Error('DaffSelectComponent needs to be used with the DaffFormFieldComponent.');\n    }\n\n    this.ariaLabelledBy = this.formField.id;\n\n    this.openDirective.stateless = false;\n\n    this.document.addEventListener('keydown', (event) => {\n      if (event.key === 'Tab' && this.isOpen) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        this.focusOptionsList();\n      }\n    });\n\n    if (this.ngControl != null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @docs-private\n   */\n  @ViewChild('field') buttonElement: ElementRef<HTMLButtonElement>;\n  /**\n   * @docs-private\n   */\n  @ViewChild('optionsTemplate') optionsTemplatePortal: TemplatePortal<unknown>;\n  /**\n   * @docs-private\n   */\n  @ViewChild('optionsEl', { read: ElementRef<HTMLDivElement> }) optionsElement: ElementRef<HTMLDivElement>;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffSelectOptionDirective) optionTemplate?: DaffSelectOptionDirective;\n\n  /**\n   * @docs-private\n   */\n  get value() {\n    return this._value;\n  }\n\n  /**\n   * @docs-private\n   */\n  get highlighted(): number {\n    return this._highlighted;\n  }\n\n  set highlighted(val: number) {\n    this._highlighted = val;\n    this.cd.markForCheck();\n  }\n\n  private focusOptionsList() {\n    this.optionsElement?.nativeElement.focus();\n  }\n\n  private focusButton() {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnDestroy(): void {\n    this._destroyed.next(true);\n    this._overlay?.dispose();\n  }\n\n  private onChange(value: T): void {};\n  private onTouched(): void {};\n\n  /**\n   * @docs-private\n   */\n  writeValue(value: T): void {\n    this._value = value;\n    this.cd.markForCheck();\n  }\n\n  /**\n   * @docs-private\n   */\n  registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @docs-private\n   */\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @docs-private\n   */\n  flushValue() {\n    this.ngControl?.control?.setValue(this._value);\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.stateChanges = merge(\n      this._stateChanges.asObservable(),\n      this.ngControl ? this.ngControl.statusChanges : of(undefined),\n    ).pipe(\n      map(() => this.state),\n      tap((state) => this.disabled = state.disabled),\n    );\n  }\n\n  /**\n   * Opens the options list.\n   */\n  open(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (!this.openDirective.open) {\n      this.openDirective.open = true;\n\n      if (this._value) {\n        this._highlighted = this.options.findIndex((v) => v === this._value);\n      }\n\n      const formFieldEl = this.formField.elementRef.nativeElement;\n      const formFieldWidth = formFieldEl.getBoundingClientRect().width;\n\n      this._overlay = this.overlay.create({\n        hasBackdrop: true,\n        backdropClass: 'cdk-overlay-transparent-backdrop',\n        scrollStrategy: this.overlay.scrollStrategies.block(),\n        disposeOnNavigation: true,\n        width: `${formFieldWidth}px`,\n        positionStrategy: this.overlay\n          .position()\n          .flexibleConnectedTo(formFieldEl)\n          .withPositions([\n            {\n              originX: 'start',\n              originY: 'bottom',\n              overlayX: 'start',\n              overlayY: 'top',\n              offsetY: 2,\n            },\n            {\n              originX: 'start',\n              originY: 'top',\n              overlayX: 'start',\n              overlayY: 'bottom',\n              offsetY: -2,\n            },\n          ]),\n      });\n\n      this._overlay.attachments().pipe(\n        takeUntil(this._destroyed),\n        delay(0),\n      ).subscribe(() => {\n        this.focusOptionsList();\n      });\n\n      this._overlay.attach(this.optionsTemplatePortal);\n\n      this._overlay.backdropClick().pipe(\n        takeUntil(this._destroyed),\n      ).subscribe(() => this.close());\n      this.cd.markForCheck();\n    }\n  }\n\n  /**\n   * Closes the options list.\n   */\n  close(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.openDirective.open) {\n      this.openDirective.open = false;\n      this.cd.markForCheck();\n\n      // do we actually have to dispose and recreate the overlay every time we want to close the dropdown?\n      this._overlay?.dispose();\n      this._overlay = null;\n      this.focusButton();\n    }\n  }\n\n  /**\n   * Selects the value in a particular position in the options list.\n   */\n  private selectValueInPosition(position: number) {\n    if (position >= 0 && position < this.options.length) {\n      this.writeValue(this.options[position]);\n    }\n\n    this.close();\n  }\n\n  /**\n   * Selects an option.\n   */\n  selectOption(option: T) {\n    this._value = option;\n    this.onChange(this._value);\n\n    this.close();\n  }\n\n  /**\n   * Selects the option referenced by the highlighted index.\n   */\n  selectHighlighted(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this.selectValueInPosition(this._highlighted);\n\n    this.onChange(this._value);\n  }\n\n  /**\n   * Highlights the next option in the list.\n   */\n  highlightNext(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this._highlighted = this._highlighted < this.options.length - 1 ? this._highlighted + 1 : 0;\n    (<HTMLElement>event?.target).children[this._highlighted].scrollIntoView();\n  }\n\n  /**\n   * Highlights the previous option in the list.\n   */\n  highlightPrevious(event?: KeyboardEvent | MouseEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this._highlighted = this._highlighted > 0 ? this._highlighted - 1 : this.options.length - 1;\n    (<HTMLElement>event?.target).children[this._highlighted].scrollIntoView();\n  }\n}\n","<button #field class=\"daff-select__field\"\n  type=\"button\"\n  (click)=\"open($event)\"\n  (focus)=\"focus()\"\n  [disabled]=\"disabled\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-controls]=\"optionsId\"\n  (keydown.arrowdown)=\"open($event)\"\n  (keydown.arrowup)=\"open($event)\"\n  (keydown.alt.arrowup)=\"open($event)\"\n  (keydown.alt.arrowdown)=\"open($event)\"\n  (keydown.space)=\"open($event)\"\n  (keydown.enter)=\"open($event)\">\n  @if (value) {\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplate?.templateRef\"\n      [ngTemplateOutletContext]=\"\n      {\n        option: value,\n        isSelected: true,\n        isHighlighted: true,\n      }\n      \"><div></div>\n    </ng-container>\n  }\n</button>\n<ng-template cdkPortal #optionsTemplate=\"cdkPortal\">\n  <div class=\"daff-select__options\" #optionsEl\n    [id]=\"optionsId\"\n    tabindex=\"0\"\n    role=\"listbox\"\n    (blur)=\"blur()\"\n    (keydown.enter)=\"selectHighlighted($event)\"\n    (keydown.space)=\"selectHighlighted($event)\"\n    (keydown.escape)=\"close($event)\"\n    (keydown.arrowdown)=\"highlightNext($event)\"\n    (keydown.arrowup)=\"highlightPrevious($event)\">\n    @for (option of options; track $index; let i = $index) {\n      <div class=\"daff-select__option\"\n      [class.selected]=\"value === option\"\n      [class.highlighted]=\"highlighted === i\"\n      (click)=\"selectOption(option)\">\n        <ng-container\n          [ngTemplateOutlet]=\"optionTemplate?.templateRef\"\n          [ngTemplateOutletContext]=\"{\n            isSelected: value === option,\n            isHighlighted: highlighted === i,\n            option\n          }\">\n        </ng-container>\n      </div>\n    }\n  </div>\n</ng-template>\n","import { DaffSelectOptionDirective } from './option/option.directive';\nimport { DaffSelectComponent } from './select/select.component';\n\nexport const DAFF_SELECT_COMPONENTS = <const> [\n  DaffSelectComponent,\n  DaffSelectOptionDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-sidebar-examples.mjs

@@ -25,7 +25,6 @@ class OverandUnderSidebarsComponent {
     constructor() {
         this.faTimes = faTimes;
         this.open = false;
-        this.sideControl = new FormControl('left');
         this.modeControl = new FormControl('over');
     }
     openSidebar() {
@@ -35,7 +34,7 @@ class OverandUnderSidebarsComponent {
         this.open = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OverandUnderSidebarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: OverandUnderSidebarsComponent, isStandalone: true, selector: "over-and-under-sidebars", ngImport: i0, template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n    \n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"], dependencies: [{ kind: "component", type: i1.DaffSidebarComponent, selector: "daff-sidebar", inputs: ["side", "mode"], outputs: ["escapePressed"] }, { kind: "component", type: i1.DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: ["navPlacement"], outputs: ["backdropClicked"] }, { kind: "component", type: i1.DaffSidebarHeaderComponent, selector: "daff-sidebar-header", inputs: ["dismissible"], outputs: ["closeSidebar"] }, { kind: "component", type: i1.DaffSidebarFooterComponent, selector: "daff-sidebar-footer" }, { kind: "directive", type: i1.DaffSidebarHeaderTitleDirective, selector: "[daffSidebarHeaderTitle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: OverandUnderSidebarsComponent, isStandalone: true, selector: "over-and-under-sidebars", ngImport: i0, template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" side=\"left\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"], dependencies: [{ kind: "component", type: i1.DaffSidebarComponent, selector: "daff-sidebar", inputs: ["side", "mode"], outputs: ["escapePressed"] }, { kind: "component", type: i1.DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: ["navPlacement"], outputs: ["backdropClicked"] }, { kind: "component", type: i1.DaffSidebarHeaderComponent, selector: "daff-sidebar-header", inputs: ["dismissible"], outputs: ["closeSidebar"] }, { kind: "component", type: i1.DaffSidebarFooterComponent, selector: "daff-sidebar-footer" }, { kind: "directive", type: i1.DaffSidebarHeaderTitleDirective, selector: "[daffSidebarHeaderTitle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OverandUnderSidebarsComponent, decorators: [{
             type: Component,
@@ -45,7 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         ReactiveFormsModule,
                         DaffButtonComponent,
                         DaffIconButtonComponent,
-                    ], template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n    \n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"] }]
+                    ], template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" side=\"left\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"] }]
         }] });
 
 class SideFixedSidebarComponent {
@@ -57,6 +56,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             args: [{ selector: 'side-fixed-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DAFF_SIDEBAR_COMPONENTS, DAFF_NAVBAR_COMPONENTS], template: "<daff-sidebar-viewport navPlacement=\"beside\">\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"side-fixed-sidebar\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <nav daff-sidebar-viewport-nav daff-navbar>Navbar</nav>\n  <div class=\"content\">\n    Page content\n  </div>\n</daff-sidebar-viewport>", styles: ["daff-sidebar-viewport{height:288px}.side-fixed-sidebar{border-right:1px solid rgb(var(--daff-theme-contrast-rgb),.1)}.content{padding:24px;height:480px}\n"] }]
         }] });
 
+class SidebarSidesComponent {
+    constructor() {
+        this.faTimes = faTimes;
+        this.open = false;
+        this.sideControl = new FormControl('left');
+    }
+    openSidebar() {
+        this.open = !this.open;
+    }
+    closeSidebar() {
+        this.open = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SidebarSidesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SidebarSidesComponent, isStandalone: true, selector: "sidebar-sides", ngImport: i0, template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" mode=\"over\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"], dependencies: [{ kind: "component", type: i1.DaffSidebarComponent, selector: "daff-sidebar", inputs: ["side", "mode"], outputs: ["escapePressed"] }, { kind: "component", type: i1.DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: ["navPlacement"], outputs: ["backdropClicked"] }, { kind: "component", type: i1.DaffSidebarHeaderComponent, selector: "daff-sidebar-header", inputs: ["dismissible"], outputs: ["closeSidebar"] }, { kind: "component", type: i1.DaffSidebarFooterComponent, selector: "daff-sidebar-footer" }, { kind: "directive", type: i1.DaffSidebarHeaderTitleDirective, selector: "[daffSidebarHeaderTitle]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SidebarSidesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sidebar-sides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DAFF_SIDEBAR_COMPONENTS,
+                        FaIconComponent,
+                        ReactiveFormsModule,
+                        DaffButtonComponent,
+                        DaffIconButtonComponent,
+                    ], template: "<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" mode=\"over\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n", styles: ["daff-sidebar-viewport{height:288px}.over-and-under-sidebars__options-container{display:flex;gap:8px;margin:0 0 16px}.over-and-under-sidebars__footer,.over-and-under-sidebars__sidebar-content{padding:16px}\n"] }]
+        }] });
+
 class SidebarWithStickyContentComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SidebarWithStickyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SidebarWithStickyContentComponent, isStandalone: true, selector: "sidebar-with-sticky-content", ngImport: i0, template: "<daff-sidebar-viewport>\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"sidebar-with-sticky-content\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <div class=\"content\">\n    <div class=\"sticky\">\n      <div>Sticky content</div>\n    </div>\n    <div class=\"inner-content\">Inner content</div>\n  </div>\n</daff-sidebar-viewport>", styles: ["daff-sidebar-viewport{height:288px}.sidebar-with-sticky-content{border-right:1px solid rgb(var(--daff-theme-contrast-rgb),.1)}.content{height:480px}.sticky{position:sticky;background:#fafafa;padding:16px;top:0}.inner-content{padding:16px}\n"], dependencies: [{ kind: "component", type: i1.DaffSidebarComponent, selector: "daff-sidebar", inputs: ["side", "mode"], outputs: ["escapePressed"] }, { kind: "component", type: i1.DaffSidebarViewportComponent, selector: "daff-sidebar-viewport", inputs: ["navPlacement"], outputs: ["backdropClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -73,6 +98,7 @@ const SIDEBAR_EXAMPLES = [
     OverandUnderSidebarsComponent,
     SideFixedSidebarComponent,
     SidebarWithStickyContentComponent,
+    SidebarSidesComponent,
 ];
 
 /**

package/fesm2022/daffodil-design-sidebar-examples.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-sidebar-examples.mjs","sources":["../../../libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.ts","../../../libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html","../../../libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.ts","../../../libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html","../../../libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.ts","../../../libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.html","../../../libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.component.ts","../../../libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.component.html","../../../libs/design/sidebar/examples/src/public_api.ts","../../../libs/design/sidebar/examples/src/daffodil-design-sidebar-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-sidebar',\n  templateUrl: './basic-sidebar.component.html',\n  styleUrls: ['./basic-sidebar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n  ],\n})\nexport class BasicSidebarComponent {}\n","<daff-sidebar-viewport>\n  <daff-sidebar class=\"basic-sidebar\">\n    <daff-sidebar-header>\n      Sidebar Title\n    </daff-sidebar-header>\n    Sidebar content\n  </daff-sidebar>\n  <div class=\"basic-sidebar__content\">\n    Page content\n  </div>\n</daff-sidebar-viewport>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  FormControl,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffButtonComponent,\n  DaffIconButtonComponent,\n} from '@daffodil/design/button';\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'over-and-under-sidebars',\n  templateUrl: './over-and-under-sidebars.component.html',\n  styleUrls: ['over-and-under-sidebars.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n    FaIconComponent,\n    ReactiveFormsModule,\n    DaffButtonComponent,\n    DaffIconButtonComponent,\n  ],\n})\nexport class OverandUnderSidebarsComponent {\n  faTimes = faTimes;\n\n  open = false;\n\n  sideControl: FormControl = new FormControl('left');\n  modeControl: FormControl = new FormControl('over');\n\n  openSidebar() {\n    this.open = !this.open;\n  }\n\n  closeSidebar() {\n    this.open = false;\n  }\n}\n","<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n    \n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'side-fixed-sidebar',\n  templateUrl: './side-fixed-sidebar.component.html',\n  styleUrls: ['side-fixed-sidebar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [DAFF_SIDEBAR_COMPONENTS, DAFF_NAVBAR_COMPONENTS],\n})\nexport class SideFixedSidebarComponent {}\n","<daff-sidebar-viewport navPlacement=\"beside\">\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"side-fixed-sidebar\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <nav daff-sidebar-viewport-nav daff-navbar>Navbar</nav>\n  <div class=\"content\">\n    Page content\n  </div>\n</daff-sidebar-viewport>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'sidebar-with-sticky-content',\n  templateUrl: './sidebar-with-sticky-content.component.html',\n  styleUrls: ['sidebar-with-sticky-content.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n  ],\n})\nexport class SidebarWithStickyContentComponent {}\n","<daff-sidebar-viewport>\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"sidebar-with-sticky-content\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <div class=\"content\">\n    <div class=\"sticky\">\n      <div>Sticky content</div>\n    </div>\n    <div class=\"inner-content\">Inner content</div>\n  </div>\n</daff-sidebar-viewport>","import { BasicSidebarComponent } from './basic-sidebar/basic-sidebar.component';\nimport { OverandUnderSidebarsComponent } from './over-and-under-sidebars/over-and-under-sidebars.component';\nimport { SideFixedSidebarComponent } from './side-fixed-sidebar/side-fixed-sidebar.component';\nimport { SidebarWithStickyContentComponent } from './sidebar-with-sticky-content/sidebar-with-sticky-content.component';\n\nexport const SIDEBAR_EXAMPLES = [\n  BasicSidebarComponent,\n  OverandUnderSidebarsComponent,\n  SideFixedSidebarComponent,\n  SidebarWithStickyContentComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}
+{"version":3,"file":"daffodil-design-sidebar-examples.mjs","sources":["../../../libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.ts","../../../libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html","../../../libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.ts","../../../libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html","../../../libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.ts","../../../libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.component.html","../../../libs/design/sidebar/examples/src/sidebar-sides/sidebar-sides.component.ts","../../../libs/design/sidebar/examples/src/sidebar-sides/sidebar-sides.component.html","../../../libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.component.ts","../../../libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.component.html","../../../libs/design/sidebar/examples/src/public_api.ts","../../../libs/design/sidebar/examples/src/daffodil-design-sidebar-examples.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'basic-sidebar',\n  templateUrl: './basic-sidebar.component.html',\n  styleUrls: ['./basic-sidebar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n  ],\n})\nexport class BasicSidebarComponent {}\n","<daff-sidebar-viewport>\n  <daff-sidebar class=\"basic-sidebar\">\n    <daff-sidebar-header>\n      Sidebar Title\n    </daff-sidebar-header>\n    Sidebar content\n  </daff-sidebar>\n  <div class=\"basic-sidebar__content\">\n    Page content\n  </div>\n</daff-sidebar-viewport>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  FormControl,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffButtonComponent,\n  DaffIconButtonComponent,\n} from '@daffodil/design/button';\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'over-and-under-sidebars',\n  templateUrl: './over-and-under-sidebars.component.html',\n  styleUrls: ['over-and-under-sidebars.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n    FaIconComponent,\n    ReactiveFormsModule,\n    DaffButtonComponent,\n    DaffIconButtonComponent,\n  ],\n})\nexport class OverandUnderSidebarsComponent {\n  faTimes = faTimes;\n\n  open = false;\n\n  modeControl: FormControl = new FormControl('over');\n\n  openSidebar() {\n    this.open = !this.open;\n  }\n\n  closeSidebar() {\n    this.open = false;\n  }\n}\n","<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" [mode]=\"modeControl.value\" side=\"left\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Mode:</div>\n      <select [formControl]=\"modeControl\">\n        <option value=\"over\">Over</option>\n        <option value=\"under\">Under</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'side-fixed-sidebar',\n  templateUrl: './side-fixed-sidebar.component.html',\n  styleUrls: ['side-fixed-sidebar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [DAFF_SIDEBAR_COMPONENTS, DAFF_NAVBAR_COMPONENTS],\n})\nexport class SideFixedSidebarComponent {}\n","<daff-sidebar-viewport navPlacement=\"beside\">\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"side-fixed-sidebar\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <nav daff-sidebar-viewport-nav daff-navbar>Navbar</nav>\n  <div class=\"content\">\n    Page content\n  </div>\n</daff-sidebar-viewport>","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\nimport {\n  FormControl,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffButtonComponent,\n  DaffIconButtonComponent,\n} from '@daffodil/design/button';\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'sidebar-sides',\n  templateUrl: './sidebar-sides.component.html',\n  styleUrls: ['sidebar-sides.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n    FaIconComponent,\n    ReactiveFormsModule,\n    DaffButtonComponent,\n    DaffIconButtonComponent,\n  ],\n})\nexport class SidebarSidesComponent {\n  faTimes = faTimes;\n\n  open = false;\n\n  sideControl: FormControl = new FormControl('left');\n\n  openSidebar() {\n    this.open = !this.open;\n  }\n\n  closeSidebar() {\n    this.open = false;\n  }\n}\n","<daff-sidebar-viewport (backdropClicked)=\"closeSidebar()\">\n  <daff-sidebar class=\"over-sidebar\" mode=\"over\" [side]=\"sideControl.value\" [open]=\"open\" (escapePressed)=\"closeSidebar()\">\n    <daff-sidebar-header [dismissible]=\"true\" (closeSidebar)=\"closeSidebar()\">\n      <div daffSidebarHeaderTitle>Title</div>\n    </daff-sidebar-header>\n    <div class=\"over-and-under-sidebars__sidebar-content\">\n      Sidebar content\n    </div>\n    <daff-sidebar-footer>\n      <div class=\"over-and-under-sidebars__footer\">\n        Sidebar footer\n      </div>\n    </daff-sidebar-footer>\n  </daff-sidebar>\n  <div class=\"over-and-under-sidebars__body-content\">\n    <div class=\"over-and-under-sidebars__options-container\">\n      <div class=\"over-and-under-sidebars__option-text\">Side:</div>\n      <select [formControl]=\"sideControl\">\n        <option value=\"left\">Left</option>\n        <option value=\"right\">Right</option>\n      </select>\n    </div>\n\n    <button daff-button (click)=\"openSidebar()\">\n      Open\n    </button>\n  </div>\n</daff-sidebar-viewport>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'sidebar-with-sticky-content',\n  templateUrl: './sidebar-with-sticky-content.component.html',\n  styleUrls: ['sidebar-with-sticky-content.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DAFF_SIDEBAR_COMPONENTS,\n  ],\n})\nexport class SidebarWithStickyContentComponent {}\n","<daff-sidebar-viewport>\n  <daff-sidebar mode=\"side-fixed\" [open]=\"true\" class=\"sidebar-with-sticky-content\">\n    Fixed sidebar content\n  </daff-sidebar>\n  <div class=\"content\">\n    <div class=\"sticky\">\n      <div>Sticky content</div>\n    </div>\n    <div class=\"inner-content\">Inner content</div>\n  </div>\n</daff-sidebar-viewport>","import { BasicSidebarComponent } from './basic-sidebar/basic-sidebar.component';\nimport { OverandUnderSidebarsComponent } from './over-and-under-sidebars/over-and-under-sidebars.component';\nimport { SideFixedSidebarComponent } from './side-fixed-sidebar/side-fixed-sidebar.component';\nimport { SidebarSidesComponent } from './sidebar-sides/sidebar-sides.component';\nimport { SidebarWithStickyContentComponent } from './sidebar-with-sticky-content/sidebar-with-sticky-content.component';\n\nexport const SIDEBAR_EXAMPLES = [\n  BasicSidebarComponent,\n  OverandUnderSidebarsComponent,\n  SideFixedSidebarComponent,\n  SidebarWithStickyContentComponent,\n  SidebarSidesComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/daffodil-design-sidebar.mjs

@@ -111,19 +111,6 @@ const getSidebarAnimationWidth = (side, width) => side === 'left' ? -1 * width +
  * ```
  */
 class DaffSidebarComponent {
-    /**
-     * @docs-private
-     *
-     * The CSS classes set.
-     */
-    get classes() {
-        return {
-            'daff-sidebar': true,
-            [this.side]: true,
-            [this.mode]: true,
-        };
-    }
-    ;
     /**
      * @docs-private
      *
@@ -250,7 +237,7 @@ class DaffSidebarComponent {
         this.openDirective.toggle();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }, { token: i2.DaffOpenableDirective }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarComponent, isStandalone: true, selector: "daff-sidebar", inputs: { side: "side", mode: "mode" }, outputs: { escapePressed: "escapePressed" }, host: { listeners: { "@transformSidebar.start": "onAnimationStart($event)", "@transformSidebar.done": "onAnimationComplete($event)" }, properties: { "class": "this.classes", "@transformSidebar": "this.transformSidebar" } }, hostDirectives: [{ directive: i2.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"], animations: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarComponent, isStandalone: true, selector: "daff-sidebar", inputs: { side: "side", mode: "mode" }, outputs: { escapePressed: "escapePressed" }, host: { listeners: { "@transformSidebar.start": "onAnimationStart($event)", "@transformSidebar.done": "onAnimationComplete($event)" }, properties: { "class.side": "mode === \"side\"", "class.over": "mode === \"over\"", "class.under": "mode === \"under\"", "class.side-fixed": "mode === \"side-fixed\"", "class.left": "side === \"left\"", "class.right": "side === \"right\"", "@transformSidebar": "this.transformSidebar" }, classAttribute: "daff-sidebar" }, hostDirectives: [{ directive: i2.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift, 64px);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift, 64px))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"], animations: [
             daffSidebarAnimations.transformSidebar,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -260,16 +247,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             directive: DaffOpenableDirective,
                             inputs: ['open'],
                             outputs: ['toggled'],
-                        }], animations: [
+                        }], host: {
+                        'class': 'daff-sidebar',
+                        '[class.side]': 'mode === "side"',
+                        '[class.over]': 'mode === "over"',
+                        '[class.under]': 'mode === "under"',
+                        '[class.side-fixed]': 'mode === "side-fixed"',
+                        '[class.left]': 'side === "left"',
+                        '[class.right]': 'side === "right"',
+                    }, animations: [
                         daffSidebarAnimations.transformSidebar,
-                    ], template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"] }]
+                    ], template: "<ng-content select=\"daff-sidebar-header\"></ng-content>\n<div class=\"daff-sidebar__body\">\n\t<ng-content></ng-content>\n</div>\n<ng-content select=\"daff-sidebar-footer\"></ng-content>", styles: [":host{display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:15rem}:host.left{width:var(--daff-sidebar-left-width, 15rem)}:host.right{width:var(--daff-sidebar-right-width, 15rem)}:host.side-fixed{visibility:hidden;position:fixed;bottom:0;z-index:5;top:var(--daff-sidebar-side-fixed-top-shift, 64px);height:calc(100dvh - var(--daff-sidebar-side-fixed-top-shift, 64px))}:host.side-fixed.left{left:0}:host.side-fixed.right{right:0}@media (min-width: 1024px){:host.side-fixed{visibility:visible}}:host.over,:host.under{position:fixed;top:0;bottom:0}:host.over.left,:host.under.left{left:0}:host.over.right,:host.under.right{right:0}:host.over{z-index:7}:host.under{z-index:2}:host-context(daff-sidebar-viewport daff-sidebar-viewport).side-fixed{position:sticky}:host-context(.daff-sidebar-viewport.beside).side-fixed{top:0;height:100%}.daff-sidebar__body{flex-grow:1;height:100%;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ConfigurableFocusTrapFactory }, { type: i2.DaffFocusStackService }, { type: i2.DaffOpenableDirective }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], transformSidebar: [{
+                }] }], propDecorators: { transformSidebar: [{
                 type: HostBinding,
                 args: ['@transformSidebar']
             }], escapePressed: [{
@@ -286,6 +278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['@transformSidebar.done', ['$event']]
             }] } });
 
+/* eslint-disable quote-props */
 /**
  * Sidebar footer is a child component of the sidebar that is used to display a
  * footer container, positioned at the bottom of a sidebar.
@@ -295,23 +288,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * ```
  */
 class DaffSidebarFooterComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarFooterComponent, isStandalone: true, selector: "daff-sidebar-footer", host: { properties: { "class.daff-sidebar-footer": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:100%;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarFooterComponent, isStandalone: true, selector: "daff-sidebar-footer", host: { classAttribute: "daff-sidebar-footer" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;width:100%;flex-grow:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;flex-grow:0}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-sidebar-footer']
-            }] } });
+            args: [{ selector: 'daff-sidebar-footer', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'daff-sidebar-footer',
+                    }, styles: [":host{display:block;width:100%;flex-grow:0}\n"] }]
+        }] });
 
+/**
+ * @deprecated in favor of the `dismissible` property on `DaffSidebarHeaderComponent`. Deprecated in version 0.88.0. Will be removed in version 0.91.0.
+ */
 class DaffSidebarHeaderActionDirective {
     constructor() {
         /**
@@ -361,6 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['class.daff-sidebar-header__title']
             }] } });
 
+/* eslint-disable quote-props */
 /**
  * Sidebar header is a child component of the sidebar that is used to display a header container,
  * positioned at the top of a sidebar. It includes an optional title (`[daffSidebarHeaderTitle]`)
@@ -376,10 +366,6 @@ class DaffSidebarHeaderComponent {
          * @docs-private
          */
         this.faTimes = faTimes;
-        /**
-         * @docs-private
-         */
-        this.class = true;
         /** Whether or not a sidebar header should display the close icon. */
         this.dismissible = false;
         /**
@@ -394,22 +380,19 @@ class DaffSidebarHeaderComponent {
         this.closeSidebar.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarHeaderComponent, isStandalone: true, selector: "daff-sidebar-header", inputs: { dismissible: "dismissible" }, outputs: { closeSidebar: "closeSidebar" }, host: { properties: { "class.daff-sidebar-header": "this.class", "class.dismissible": "this.dismissible" } }, ngImport: i0, template: "<button class=\"daff-sidebar-header__close-icon\" aria-label=\"Close Sidebar\" *ngIf=\"dismissible\" (click)=\"onCloseSidebar($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\" size=\"lg\"></fa-icon>\n</button>\n<div class=\"daff-sidebar-header__content\">\n  <ng-content></ng-content>\n</div>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;padding:0 1rem;min-height:3rem;max-height:3rem;width:100%}.daff-sidebar-header__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;appearance:none;background:none;border:none;color:currentColor;height:3rem;margin:0;min-height:3rem;min-width:3rem;padding:0;width:3rem;left:initial;right:0;top:0}.daff-sidebar-header__title,.daff-sidebar-header__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 1.75rem 0 0}.daff-sidebar.right .daff-sidebar-header__close-icon{left:0;right:initial}.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__title,.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 0 0 1.75rem}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarHeaderComponent, isStandalone: true, selector: "daff-sidebar-header", inputs: { dismissible: "dismissible" }, outputs: { closeSidebar: "closeSidebar" }, host: { properties: { "class.dismissible": "dismissible" }, classAttribute: "daff-sidebar-header" }, ngImport: i0, template: "<button class=\"daff-sidebar-header__close-icon\" aria-label=\"Close Sidebar\" *ngIf=\"dismissible\" (click)=\"onCloseSidebar($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\" size=\"lg\"></fa-icon>\n</button>\n<div class=\"daff-sidebar-header__content\">\n  <ng-content></ng-content>\n</div>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;padding:0 1rem;min-height:3rem;max-height:3rem;width:100%}.daff-sidebar-header__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;appearance:none;background:none;border:none;color:currentColor;height:3rem;margin:0;min-height:3rem;min-width:3rem;padding:0;width:3rem;left:initial;right:0;top:0}.daff-sidebar-header__title,.daff-sidebar-header__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 1.75rem 0 0}.daff-sidebar.right .daff-sidebar-header__close-icon{left:0;right:initial}.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__title,.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 0 0 1.75rem}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-sidebar-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'daff-sidebar-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'daff-sidebar-header',
+                        '[class.dismissible]': 'dismissible',
+                    }, imports: [
                         FaIconComponent,
                         NgIf,
                     ], template: "<button class=\"daff-sidebar-header__close-icon\" aria-label=\"Close Sidebar\" *ngIf=\"dismissible\" (click)=\"onCloseSidebar($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\" size=\"lg\"></fa-icon>\n</button>\n<div class=\"daff-sidebar-header__content\">\n  <ng-content></ng-content>\n</div>", styles: [".daff-sidebar-header{display:flex;align-items:center;position:relative;padding:0 1rem;min-height:3rem;max-height:3rem;width:100%}.daff-sidebar-header__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;appearance:none;background:none;border:none;color:currentColor;height:3rem;margin:0;min-height:3rem;min-width:3rem;padding:0;width:3rem;left:initial;right:0;top:0}.daff-sidebar-header__title,.daff-sidebar-header__content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1rem;font-weight:500}.daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 1.75rem 0 0}.daff-sidebar.right .daff-sidebar-header__close-icon{left:0;right:initial}.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__title,.daff-sidebar.right .daff-sidebar-header__close-icon+.daff-sidebar-header__content{margin:0 0 0 1.75rem}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-sidebar-header']
-            }], dismissible: [{
+        }], propDecorators: { dismissible: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.dismissible']
             }], closeSidebar: [{
                 type: Output
             }] } });
@@ -667,24 +650,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * ```
  */
 class DaffSidebarViewportComponent {
-    /**
-     * @docs-private
-     */
-    get classes() {
-        return {
-            'daff-sidebar-viewport': true,
-            [this.navPlacement]: true,
-            'pad-left': this._isPaddedLeft,
-            'pad-right': this._isPaddedRight,
-        };
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get isNavOnSide() {
-        return this.navPlacement === DaffNavPlacementEnum.BESIDE;
-    }
     /**
      * @docs-private
      */
@@ -707,10 +672,6 @@ class DaffSidebarViewportComponent {
         this.bodyScroll = bodyScroll;
         this.parentViewport = parentViewport;
         this.scroll = scroll;
-        /**
-         * @docs-private
-         */
-        this.hostClass = true;
         /**
          * The placement of the nav in relation to the sidebar. Note that this is really only available when there is a `side-fixed` sidebar.
          */
@@ -807,12 +768,12 @@ class DaffSidebarViewportComponent {
         this.backdropClicked.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSidebarViewportComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DAFF_SIDEBAR_SCROLL_TOKEN, skipSelf: true }, { token: DaffSidebarViewportComponent, optional: true, skipSelf: true }, { token: DAFF_SIDEBAR_SCROLL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarViewportComponent, isStandalone: true, selector: "daff-sidebar-viewport", inputs: { navPlacement: "navPlacement" }, outputs: { backdropClicked: "backdropClicked" }, host: { properties: { "class.daff-sidebar-viewport": "this.hostClass", "class": "this.classes" } }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffSidebarViewportComponent, isStandalone: true, selector: "daff-sidebar-viewport", inputs: { navPlacement: "navPlacement" }, outputs: { backdropClicked: "backdropClicked" }, host: { properties: { "class.beside": "navPlacement === \"beside\"", "class.above": "navPlacement === \"above\"", "class.pad-left": "_isPaddedLeft", "class.pad-right": "_isPaddedRight" }, classAttribute: "daff-sidebar-viewport" }, providers: [
             {
                 provide: DAFF_SIDEBAR_SCROLL_TOKEN,
                 useFactory: daffSidebarViewportScrollFactory,
             },
-        ], queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], dependencies: [{ kind: "component", type: DaffSidebarViewportBackdropComponent, selector: "daff-sidebar-viewport-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
+        ], queries: [{ propertyName: "sidebars", predicate: DaffSidebarComponent }], ngImport: i0, template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift, 64px)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"], dependencies: [{ kind: "component", type: DaffSidebarViewportBackdropComponent, selector: "daff-sidebar-viewport-backdrop", inputs: ["transparent", "interactable", "fullscreen"], outputs: ["backdropClicked"] }], animations: [
             daffSidebarAnimations.transformContent,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -825,9 +786,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             provide: DAFF_SIDEBAR_SCROLL_TOKEN,
                             useFactory: daffSidebarViewportScrollFactory,
                         },
-                    ], imports: [
+                    ], host: {
+                        'class': 'daff-sidebar-viewport',
+                        '[class.beside]': 'navPlacement === "beside"',
+                        '[class.above]': 'navPlacement === "above"',
+                        '[class.pad-left]': '_isPaddedLeft',
+                        '[class.pad-right]': '_isPaddedRight',
+                    }, imports: [
                         DaffSidebarViewportBackdropComponent,
-                    ], template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
+                    ], template: "<daff-sidebar-viewport-backdrop\n  [@transformContent]=\"_animationState\"\n  [interactable]=\"_backdropInteractable\"\n  (backdropClicked)=\"_backdropClicked()\">\n</daff-sidebar-viewport-backdrop>\n\n<div class=\"daff-sidebar-viewport__nav\"\n  [@transformContent]=\"_animationState\">\n    <ng-content select=\"[daff-sidebar-viewport-nav]\"></ng-content>\n</div>\n\n<ng-content select=\"daff-sidebar:not([side=right])\"></ng-content>\n\n<div class=\"daff-sidebar-viewport__content\"\n  [@transformContent]=\"_animationState\"\n  (@transformContent.start)=\"onContentAnimationStart($event)\"\n  (@transformContent.done)=\"onContentAnimationDone($event)\">\n  <div class=\"daff-sidebar-viewport__inner\">\n      <ng-content></ng-content>\n      <div class=\"daff-sidebar-viewport__footer\">\n        <ng-content select=\"[daff-sidebar-viewport-footer]\"></ng-content>\n      </div>\n  </div>\n</div>\n\n<ng-content select=\"daff-sidebar[side=right]\"></ng-content>\n", styles: [":host{display:flex;min-height:100dvh;position:relative;width:100%;z-index:1}:host .daff-sidebar-viewport__inner{display:flex;flex-direction:column;height:100%}:host.pad-left .daff-sidebar-viewport__inner{padding-left:0}@media (min-width: 1024px){:host.pad-left .daff-sidebar-viewport__inner{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:0}@media (min-width: 1024px){:host.pad-left.beside .daff-sidebar-viewport__nav{padding-left:var(--daff-sidebar-left-width, 240px)}}:host.pad-right .daff-sidebar-viewport__inner{padding-right:0}@media (min-width: 1024px){:host.pad-right .daff-sidebar-viewport__inner{padding-right:var(--daff-sidebar-right-width, 240px)}}:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:0}@media (min-width: 1024px){:host.pad-right.beside .daff-sidebar-viewport__nav{padding-right:var(--daff-sidebar-right-width, 240px)}}.daff-sidebar-viewport__content{flex:0 1 auto;width:100%;z-index:3;min-height:100%}.daff-sidebar-viewport__nav{position:fixed;top:0;width:100%;z-index:4}.daff-sidebar-viewport__nav:empty{display:none}.daff-sidebar-viewport__nav:not(:empty)~.daff-sidebar-viewport__content{margin-top:var(--daff-sidebar-side-fixed-top-shift, 64px)}.daff-sidebar-viewport__footer{margin-top:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport){transform:translate(0);min-height:auto}:host-context(daff-sidebar-viewport daff-sidebar-viewport) .daff-sidebar-viewport__inner{padding-left:0!important;padding-right:0!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_SIDEBAR_SCROLL_TOKEN]
@@ -843,13 +810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAFF_SIDEBAR_SCROLL_TOKEN]
-                }] }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.daff-sidebar-viewport']
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }], navPlacement: [{
+                }] }], propDecorators: { navPlacement: [{
                 type: Input
             }], sidebars: [{
                 type: ContentChildren,