@kato-lee/cdk 14.2.7 → 20.2.14

package/number-property.d.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Type describing the allowed values for a number input
+ * @docs-private
+ */
+type NumberInput = string | number | null | undefined;
+/** Coerces a data-bound value (typically a string) to a number. */
+declare function coerceNumberProperty(value: any): number;
+declare function coerceNumberProperty<D>(value: any, fallback: D): number | D;
+/**
+ * Whether the provided value is considered a number.
+ * @docs-private
+ */
+declare function _isNumberValue(value: any): boolean;
+
+export { _isNumberValue, coerceNumberProperty };
+export type { NumberInput };

package/observers/index.d.ts

@@ -1,109 +1,84 @@
-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 {};
+import { NumberInput } from '../number-property.d.js';
+import * as i0 from '@angular/core';
+import { OnDestroy, ElementRef, AfterContentInit, EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Factory that creates a new MutationObserver and allows us to stub it out in unit tests.
+ * @docs-private
+ */
+declare class MutationObserverFactory {
+    create(callback: MutationCallback): MutationObserver | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MutationObserverFactory, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MutationObserverFactory>;
+}
+/** An injectable service that allows watching elements for changes to their content. */
+declare class ContentObserver implements OnDestroy {
+    private _mutationObserverFactory;
+    /** Keeps track of the existing MutationObservers so they can be reused. */
+    private _observedElements;
+    private _ngZone;
+    constructor(...args: unknown[]);
+    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>;
+}
+/**
+ * Directive that triggers a callback whenever the content of
+ * its associated element has changed.
+ */
+declare class CdkObserveContent implements AfterContentInit, OnDestroy {
+    private _contentObserver;
+    private _elementRef;
+    /** 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: boolean);
+    private _disabled;
+    /** Debounce interval for emitting the changes. */
+    get debounce(): number;
+    set debounce(value: NumberInput);
+    private _debounce;
+    private _currentSubscription;
+    constructor(...args: unknown[]);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private _subscribe;
+    private _unsubscribe;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkObserveContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkObserveContent, "[cdkObserveContent]", ["cdkObserveContent"], { "disabled": { "alias": "cdkObserveContentDisabled"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; }, { "event": "cdkObserveContent"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+declare class ObserversModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ObserversModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ObserversModule, never, [typeof CdkObserveContent], [typeof CdkObserveContent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ObserversModule>;
+}
+
+export { CdkObserveContent, ContentObserver, MutationObserverFactory, ObserversModule };

package/observers/private/index.d.ts

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Allows observing resize events on multiple elements using a shared set of ResizeObserver.
+ * Sharing a ResizeObserver instance is recommended for better performance (see
+ * https://github.com/WICG/resize-observer/issues/59).
+ *
+ * Rather than share a single `ResizeObserver`, this class creates one `ResizeObserver` per type
+ * of observed box ('content-box', 'border-box', and 'device-pixel-content-box'). This avoids
+ * later calls to `observe` with a different box type from influencing the events dispatched to
+ * earlier calls.
+ */
+declare class SharedResizeObserver implements OnDestroy {
+    private _cleanupErrorListener;
+    /** Map of box type to shared resize observer. */
+    private _observers;
+    /** The Angular zone. */
+    private _ngZone;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Gets a stream of resize events for the given target element and box type.
+     * @param target The element to observe for resizes.
+     * @param options Options to pass to the `ResizeObserver`
+     * @return The stream of resize events for the element.
+     */
+    observe(target: Element, options?: ResizeObserverOptions): Observable<ResizeObserverEntry[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SharedResizeObserver, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SharedResizeObserver>;
+}
+
+export { SharedResizeObserver };

package/overlay/_index-deprecated.scss

@@ -1,13 +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;
+@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.scss

@@ -1,152 +1,193 @@
-// 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;
-  }
-}
+// 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;
+
+// Conditionally wraps some styles in a layer depending on a flag.
+@mixin _conditional-layer($should-wrap) {
+  @if ($should-wrap) {
+    @layer cdk-overlay {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Structural styles for the overlay. Pass `$wrap-customizable-styles` to emit
+// the styles that support customization in a way that makes them easier to change.
+@mixin private-overlay-structure($wrap-customizable-styles) {
+  .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;
+
+    @include _conditional-layer($wrap-customizable-styles) {
+      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;
+
+    @include _conditional-layer($wrap-customizable-styles) {
+      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;
+
+    // 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%;
+
+    @include _conditional-layer($wrap-customizable-styles) {
+      z-index: $overlay-z-index;
+    }
+  }
+
+  .cdk-overlay-backdrop {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    pointer-events: auto;
+    -webkit-tap-highlight-color: transparent;
+    opacity: 0;
+
+    // Removes the tap delay on touch devices (see #30965).
+    touch-action: manipulation;
+
+    @include _conditional-layer($wrap-customizable-styles) {
+      z-index: $overlay-backdrop-z-index;
+      transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+    }
+
+    @media (prefers-reduced-motion) {
+      transition-duration: 1ms;
+    }
+  }
+
+  .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.
+    @media (forced-colors: 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 {
+    @include _conditional-layer($wrap-customizable-styles) {
+      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,
+    .cdk-high-contrast-active & {
+      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;
+
+    // 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;
+
+    @include _conditional-layer($wrap-customizable-styles) {
+      z-index: $overlay-z-index;
+    }
+  }
+
+  // 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;
+  }
+}
+
+/// Emits structural styles required for cdk/overlay to function.
+@mixin overlay {
+  @include private-overlay-structure(false);
+}