@kato-lee/cdk 14.2.7

package/observers/index.d.ts

@@ -0,0 +1,109 @@
+import { AfterContentInit } from '@angular/core';
+import { BooleanInput } from '@kato-lee/cdk/coercion';
+import { ElementRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as i0 from '@angular/core';
+import { NgZone } from '@angular/core';
+import { NumberInput } from '@kato-lee/cdk/coercion';
+import { Observable } from 'rxjs';
+import { OnDestroy } from '@angular/core';
+
+/**
+ * Directive that triggers a callback whenever the content of
+ * its associated element has changed.
+ */
+export declare class CdkObserveContent implements AfterContentInit, OnDestroy {
+  private _contentObserver;
+  private _elementRef;
+  private _ngZone;
+  /** Event emitted for each change in the element's content. */
+  readonly event: EventEmitter<MutationRecord[]>;
+  /**
+   * Whether observing content is disabled. This option can be used
+   * to disconnect the underlying MutationObserver until it is needed.
+   */
+  get disabled(): boolean;
+  set disabled(value: BooleanInput);
+  private _disabled;
+  /** Debounce interval for emitting the changes. */
+  get debounce(): number;
+  set debounce(value: NumberInput);
+  private _debounce;
+  private _currentSubscription;
+  constructor(
+    _contentObserver: ContentObserver,
+    _elementRef: ElementRef<HTMLElement>,
+    _ngZone: NgZone
+  );
+  ngAfterContentInit(): void;
+  ngOnDestroy(): void;
+  private _subscribe;
+  private _unsubscribe;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CdkObserveContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<
+    CdkObserveContent,
+    '[cdkObserveContent]',
+    ['cdkObserveContent'],
+    { disabled: 'cdkObserveContentDisabled'; debounce: 'debounce' },
+    { event: 'cdkObserveContent' },
+    never,
+    never,
+    false
+  >;
+}
+
+/** An injectable service that allows watching elements for changes to their content. */
+export declare class ContentObserver implements OnDestroy {
+  private _mutationObserverFactory;
+  /** Keeps track of the existing MutationObservers so they can be reused. */
+  private _observedElements;
+  constructor(_mutationObserverFactory: MutationObserverFactory);
+  ngOnDestroy(): void;
+  /**
+   * Observe content changes on an element.
+   * @param element The element to observe for content changes.
+   */
+  observe(element: Element): Observable<MutationRecord[]>;
+  /**
+   * Observe content changes on an element.
+   * @param element The element to observe for content changes.
+   */
+  observe(element: ElementRef<Element>): Observable<MutationRecord[]>;
+  /**
+   * Observes the given element by using the existing MutationObserver if available, or creating a
+   * new one if not.
+   */
+  private _observeElement;
+  /**
+   * Un-observes the given element and cleans up the underlying MutationObserver if nobody else is
+   * observing this element.
+   */
+  private _unobserveElement;
+  /** Clean up the underlying MutationObserver for the specified element. */
+  private _cleanupObserver;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ContentObserver, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<ContentObserver>;
+}
+
+/**
+ * Factory that creates a new MutationObserver and allows us to stub it out in unit tests.
+ * @docs-private
+ */
+export declare class MutationObserverFactory {
+  create(callback: MutationCallback): MutationObserver | null;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MutationObserverFactory, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<MutationObserverFactory>;
+}
+
+export declare class ObserversModule {
+  static ɵfac: i0.ɵɵFactoryDeclaration<ObserversModule, never>;
+  static ɵmod: i0.ɵɵNgModuleDeclaration<
+    ObserversModule,
+    [typeof CdkObserveContent],
+    never,
+    [typeof CdkObserveContent]
+  >;
+  static ɵinj: i0.ɵɵInjectorDeclaration<ObserversModule>;
+}
+
+export {};

package/overlay/_index-deprecated.scss

@@ -0,0 +1,13 @@
+@use './index' as overlay;
+
+// @deprecated Use `$overlay-container-z-index`.
+$z-index-overlay-container: overlay.$overlay-container-z-index;
+
+// @deprecated Use `$overlay-z-index`.
+$z-index-overlay: overlay.$overlay-z-index;
+
+// @deprecated Use `$overlay-backdrop-color`.
+$dark-backdrop-background: overlay.$overlay-backdrop-color;
+
+// @deprecated Use `$overlay-backdrop-z-index`.
+$z-index-overlay-backdrop: overlay.$overlay-backdrop-z-index;

package/overlay/_index.import.scss

@@ -0,0 +1,13 @@
+@forward '../a11y' as cdk-*;
+@forward 'index' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
+  $z-index-overlay-container, overlay;
+@forward 'index' as cdk-* hide $cdk-backdrop-animation-duration,
+  $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'index' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
+  $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
+  $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container,
+  cdk-overlay-overlay;
+@forward './index-deprecated' as cdk-*;
+@forward './index-deprecated' as cdk-overlay-*;
+
+@import '../a11y';

package/overlay/_index.scss

@@ -0,0 +1,152 @@
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$overlay-container-z-index: 1000 !default;
+$overlay-z-index: 1000 !default;
+$overlay-backdrop-z-index: 1000 !default;
+
+// Background color for all of the backdrops
+$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
+
+// Default backdrop animation is based on the Material Design swift-ease-out.
+$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+
+/// Emits structural styles required for cdk/overlay to function.
+@mixin overlay() {
+  .cdk-overlay-container, .cdk-global-overlay-wrapper {
+    // Disable events from being captured on the overlay container.
+    pointer-events: none;
+
+    // The container should be the size of the viewport.
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  // The overlay-container is an invisible element which contains all individual overlays.
+  .cdk-overlay-container {
+    position: fixed;
+    z-index: $overlay-container-z-index;
+
+    &:empty {
+      // Hide the element when it doesn't have any child nodes. This doesn't
+      // include overlays that have been detached, rather than disposed.
+      display: none;
+    }
+  }
+
+  // We use an extra wrapper element in order to use make the overlay itself a flex item.
+  // This makes centering the overlay easy without running into the subpixel rendering
+  // problems tied to using `transform` and without interfering with the other position
+  // strategies.
+  .cdk-global-overlay-wrapper {
+    display: flex;
+    position: absolute;
+    z-index: $overlay-z-index;
+  }
+
+  // A single overlay pane.
+  .cdk-overlay-pane {
+    // Note: it's important for this one to start off `absolute`,
+    // in order for us to be able to measure it correctly.
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: $overlay-z-index;
+
+    // For connected-position overlays, we set `display: flex` in
+    // order to force `max-width` and `max-height` to take effect.
+    display: flex;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .cdk-overlay-backdrop {
+    // TODO(jelbourn): reuse sidenav fullscreen mixin.
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    z-index: $overlay-backdrop-z-index;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+    opacity: 0;
+
+    &.cdk-overlay-backdrop-showing {
+      opacity: 1;
+
+      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
+      // this file will be copied to the top-level `cdk` package when putting together the files
+      // for npm. Any relative import paths we use here will become invalid once the file is copied.
+      .cdk-high-contrast-active & {
+        // In high contrast mode the rgba background will become solid
+        // so we need to fall back to making it opaque using `opacity`.
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background: $overlay-backdrop-color;
+  }
+
+  .cdk-overlay-transparent-backdrop {
+    // Define a transition on the visibility so that the `transitionend` event can fire immediately.
+    transition: visibility 1ms linear, opacity 1ms linear;
+    visibility: hidden;
+    opacity: 1;
+
+    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
+    // capturing the user's mouse scroll events. Since we also can't use something like
+    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
+    // all and using `opacity` to make the element transparent.
+    &.cdk-overlay-backdrop-showing {
+      opacity: 0;
+      visibility: visible;
+    }
+  }
+
+  .cdk-overlay-backdrop-noop-animation {
+    transition: none;
+  }
+
+  // Overlay parent element used with the connected position strategy. Used to constrain the
+  // overlay element's size to fit within the viewport.
+  .cdk-overlay-connected-position-bounding-box {
+    position: absolute;
+    z-index: $overlay-z-index;
+
+    // We use `display: flex` on this element exclusively for centering connected overlays.
+    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
+    // flex layout.
+    display: flex;
+
+    // We use the `column` direction here to avoid some flexbox issues in Edge
+    // when using the "grow after open" options.
+    flex-direction: column;
+
+    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
+    min-width: 1px;
+    min-height: 1px;
+  }
+
+  // Used when disabling global scrolling.
+  .cdk-global-scrollblock {
+    position: fixed;
+
+    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+    // that the element had before we made it `fixed`.
+    width: 100%;
+
+    // Note: this will always add a scrollbar to whatever element it is on, which can
+    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+    // block scrolling on a page that doesn't have a scrollbar in the first place.
+    overflow-y: scroll;
+  }
+}