@skyux/core 11.15.1 → 11.16.0

package/index.d.ts

@@ -45,6 +45,13 @@ export { SkyLogModule } from './lib/modules/log/log.module';
 export { SkyLogService } from './lib/modules/log/log.service';
 export { SkyLogLevel } from './lib/modules/log/types/log-level';
 export { SKY_LOG_LEVEL } from './lib/modules/log/types/log-level-token';
+export { SkyBreakpoint } from './lib/modules/breakpoint-observer/breakpoint';
+export { SkyBreakpointObserver } from './lib/modules/breakpoint-observer/breakpoint-observer';
+export { SKY_BREAKPOINT_OBSERVER } from './lib/modules/breakpoint-observer/breakpoint-observer.token';
+export { SkyContainerBreakpointObserver } from './lib/modules/breakpoint-observer/container-breakpoint-observer';
+export { SkyMediaBreakpointObserver } from './lib/modules/breakpoint-observer/media-breakpoint-observer';
+export { provideSkyBreakpointObserver } from './lib/modules/breakpoint-observer/provide-breakpoint-observer';
+export { SkyResponsiveHostDirective } from './lib/modules/breakpoint-observer/responsive-host.directive';
 export { SkyMediaBreakpoints } from './lib/modules/media-query/media-breakpoints';
 export { SkyMediaQueryListener } from './lib/modules/media-query/media-query-listener';
 export { SkyMediaQueryModule } from './lib/modules/media-query/media-query.module';
@@ -65,8 +72,8 @@ export { SkyPercentPipe } from './lib/modules/percent-pipe/percent.pipe';
 export { SkyResizeObserverMediaQueryService } from './lib/modules/resize-observer/resize-observer-media-query.service';
 export { SkyResizeObserverService } from './lib/modules/resize-observer/resize-observer.service';
 export { SkyScreenReaderLabelDirective } from './lib/modules/screen-reader-label/screen-reader-label.directive';
-export { SkyScrollShadowDirective } from './lib/modules/scroll-shadow/scroll-shadow.directive';
 export { SkyScrollShadowEventArgs } from './lib/modules/scroll-shadow/scroll-shadow-event-args';
+export { SkyScrollShadowDirective } from './lib/modules/scroll-shadow/scroll-shadow.directive';
 export { SkyScrollableHostService } from './lib/modules/scrollable-host/scrollable-host.service';
 export { SkyStackingContext } from './lib/modules/stacking-context/stacking-context';
 export { SKY_STACKING_CONTEXT } from './lib/modules/stacking-context/stacking-context-token';

package/lib/modules/adapter-service/adapter.service.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, RendererFactory2 } from '@angular/core';
+import { SkyBreakpoint } from '../breakpoint-observer/breakpoint';
 import { SkyMediaBreakpoints } from '../media-query/media-breakpoints';
 import { SkyFocusableChildrenOptions } from './focusable-children-options';
 import * as i0 from "@angular/core";
@@ -9,10 +10,11 @@ export declare class SkyCoreAdapterService {
      * Set the responsive container CSS class for a given element.
      *
      * @param elementRef - The element that will receive the new CSS class.
-     * @param breakpoint - The SkyMediaBreakpoint will determine which class
-     * gets set. For example a SkyMediaBreakpoint of `xs` will set a CSS class of `sky-responsive-container-xs`.
+     * @param breakpoint - The breakpoint to determine which class gets set.
+     * For example a breakpoint of "xs" will set a CSS class of "sky-responsive-container-xs".
+     * @deprecated Use the `SkyResponsiveHostDirective` instead.
      */
-    setResponsiveContainerClass(elementRef: ElementRef, breakpoint: SkyMediaBreakpoints): void;
+    setResponsiveContainerClass(elementRef: ElementRef, breakpoint: SkyBreakpoint | SkyMediaBreakpoints): void;
     /**
      * This method temporarily enables/disables pointer events.
      * This is helpful to prevent iFrames from interfering with drag events.

package/lib/modules/breakpoint-observer/breakpoint-observer.d.ts

@@ -0,0 +1,9 @@
+import { Observable } from 'rxjs';
+import { SkyBreakpoint } from './breakpoint';
+/**
+ * @internal
+ */
+export interface SkyBreakpointObserver {
+    get breakpointChange(): Observable<SkyBreakpoint>;
+    destroy(): void;
+}

package/lib/modules/breakpoint-observer/breakpoint-observer.token.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { SkyBreakpointObserver } from './breakpoint-observer';
+/**
+ * Used to override a breakpoint observer for specific execution contexts.
+ * @internal
+ */
+export declare const SKY_BREAKPOINT_OBSERVER: InjectionToken<SkyBreakpointObserver>;

package/lib/modules/breakpoint-observer/breakpoint-utils.d.ts

@@ -0,0 +1,17 @@
+import { SkyMediaBreakpoints } from '../media-query/media-breakpoints';
+import { SkyBreakpoint } from './breakpoint';
+/**
+ * Whether the value is of type `SkyBreakpoint`.
+ * @internal
+ */
+export declare function isSkyBreakpoint(value: SkyBreakpoint | SkyMediaBreakpoints | null | undefined): value is SkyBreakpoint;
+/**
+ * Transforms a `SkyMediaBreakpoints` value to `SkyBreakpoint`.
+ * @internal
+ */
+export declare function toSkyBreakpoint(breakpoint: SkyMediaBreakpoints): SkyBreakpoint;
+/**
+ * Transforms a `SkyBreakpoint` value to `SkyMediaBreakpoints`.
+ * @internal
+ */
+export declare function toSkyMediaBreakpoints(breakpoint: SkyBreakpoint): SkyMediaBreakpoints;

package/lib/modules/breakpoint-observer/breakpoint.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @internal
+ */
+export declare const SKY_BREAKPOINTS: readonly ["xs", "sm", "md", "lg"];
+/**
+ * The name of a viewport or container breakpoint.
+ */
+export type SkyBreakpoint = (typeof SKY_BREAKPOINTS)[number];

package/lib/modules/breakpoint-observer/container-breakpoint-observer.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SkyBreakpoint } from './breakpoint';
+import { SkyBreakpointObserver } from './breakpoint-observer';
+import * as i0 from "@angular/core";
+/**
+ * Emits when the width of the host container changes.
+ * @internal
+ */
+export declare class SkyContainerBreakpointObserver implements OnDestroy, SkyBreakpointObserver {
+    #private;
+    get breakpointChange(): Observable<SkyBreakpoint>;
+    constructor();
+    ngOnDestroy(): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyContainerBreakpointObserver, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyContainerBreakpointObserver>;
+}

package/lib/modules/breakpoint-observer/media-breakpoint-observer.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SkyBreakpoint } from './breakpoint';
+import { SkyBreakpointObserver } from './breakpoint-observer';
+import * as i0 from "@angular/core";
+/**
+ * Emits when the viewport width changes.
+ * @internal
+ */
+export declare class SkyMediaBreakpointObserver implements OnDestroy, SkyBreakpointObserver {
+    #private;
+    get breakpointChange(): Observable<SkyBreakpoint>;
+    constructor();
+    ngOnDestroy(): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyMediaBreakpointObserver, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyMediaBreakpointObserver>;
+}

package/lib/modules/breakpoint-observer/provide-breakpoint-observer.d.ts

@@ -0,0 +1,7 @@
+import { Provider, Type } from '@angular/core';
+import { SkyBreakpointObserver } from './breakpoint-observer';
+/**
+ * Overrides the default media breakpoint observer with the given observer.
+ * @internal
+ */
+export declare function provideSkyBreakpointObserver(observer: Type<SkyBreakpointObserver>): Provider[];

package/lib/modules/breakpoint-observer/responsive-host.directive.d.ts

@@ -0,0 +1,32 @@
+import { Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SkyBreakpoint } from './breakpoint';
+import * as i0 from "@angular/core";
+/**
+ * Overrides the `SkyMediaQueryService` to emit breakpoint changes when the host
+ * container is resized. This directive also adds SKY UX CSS classes to the
+ * host element to allow for responsive styles.
+ */
+export declare class SkyResponsiveHostDirective {
+    #private;
+    /**
+     * Emits when the breakpoint changes.
+     */
+    get breakpointChange(): Observable<SkyBreakpoint>;
+    /**
+     * The injector of the responsive host. Useful when displaying child components
+     * via `ngTemplateOutlet`.
+     * @example```
+     * <my-container #responsiveHost="skyResponsiveHost">
+     *   <ng-container
+     *     [ngTemplateOutlet]="myTemplate"
+     *     [ngTemplateOutletInjector]="responsiveHost.injector"
+     *   />
+     * </my-container>
+     * ```
+     */
+    get injector(): Injector;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyResponsiveHostDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SkyResponsiveHostDirective, "[skyResponsiveHost]", ["skyResponsiveHost"], {}, {}, never, never, true, never>;
+}

package/lib/modules/media-query/media-breakpoints.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Represents all available media breakpoints.
+ * @deprecated Use `SkyBreakpoint` instead.
+ */
 export declare enum SkyMediaBreakpoints {
     /**
      * Screen widths of 767px or less.

package/lib/modules/media-query/media-query-listener.d.ts

@@ -2,5 +2,6 @@ import { SkyMediaBreakpoints } from './media-breakpoints';
 /**
  * The function that is called when the breakpoints change. It is called
  * with a `SkyMediaBreakpoints` argument, which is an enum that represents the new breakpoint.
+ * @deprecated Subscribe to the `breakpointChange` observable instead.
  */
 export type SkyMediaQueryListener = (args: SkyMediaBreakpoints) => void;

package/lib/modules/media-query/media-query.service.d.ts

@@ -1,10 +1,18 @@
 import { NgZone, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { SkyBreakpoint } from '../breakpoint-observer/breakpoint';
 import { SkyMediaBreakpoints } from './media-breakpoints';
 import { SkyMediaQueryListener } from './media-query-listener';
 import * as i0 from "@angular/core";
+/**
+ * Utility used to subscribe to viewport and container breakpoint changes.
+ */
 export declare class SkyMediaQueryService implements OnDestroy {
     #private;
+    /**
+     * Emits when the breakpoint changes.
+     */
+    get breakpointChange(): Observable<SkyBreakpoint>;
     /**
      * The size for the `xs` breakpoint.
      * @default "(max-width: 767px)"
@@ -27,19 +35,21 @@ export declare class SkyMediaQueryService implements OnDestroy {
     static lg: string;
     /**
      * Returns the current breakpoint.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     get current(): SkyMediaBreakpoints;
-    constructor(zone: NgZone);
+    constructor(_zone?: NgZone);
     ngOnDestroy(): void;
+    /**
+     * @internal
+     */
+    destroy(): void;
     /**
      * Subscribes to screen size changes.
      * @param listener Specifies a function that is called when breakpoints change.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     subscribe(listener: SkyMediaQueryListener): Subscription;
-    /**
-     * @internal
-     */
-    destroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyMediaQueryService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SkyMediaQueryService>;
 }

package/lib/modules/resize-observer/resize-observer-media-query.service.d.ts

@@ -1,15 +1,23 @@
 import { ElementRef, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { SkyBreakpoint } from '../breakpoint-observer/breakpoint';
 import { SkyMediaBreakpoints } from '../media-query/media-breakpoints';
 import { SkyMediaQueryListener } from '../media-query/media-query-listener';
+import { SkyMediaQueryService } from '../media-query/media-query.service';
 import * as i0 from "@angular/core";
 /**
  * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
+ * @deprecated Use the `SkyResponsiveHostDirective` instead.
  */
-export declare class SkyResizeObserverMediaQueryService implements OnDestroy {
+export declare class SkyResizeObserverMediaQueryService extends SkyMediaQueryService implements OnDestroy {
     #private;
+    /**
+     * Emits when the breakpoint changes.
+     */
+    get breakpointChange(): Observable<SkyBreakpoint>;
     /**
      * Returns the current breakpoint.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     get current(): SkyMediaBreakpoints;
     ngOnDestroy(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/core",
-  "version": "11.15.1",
+  "version": "11.16.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -41,7 +41,7 @@
     "@angular/core": "^18.2.8",
     "@angular/platform-browser": "^18.2.8",
     "@angular/router": "^18.2.8",
-    "@skyux/i18n": "11.15.1"
+    "@skyux/i18n": "11.16.0"
   },
   "dependencies": {
     "tslib": "^2.6.3"

package/testing/media-query/breakpoint-observer-testing.d.ts

@@ -0,0 +1,15 @@
+import { SkyBreakpoint, SkyBreakpointObserver } from '@skyux/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Overrides the media and container breakpoint observers for testing.
+ * @internal
+ */
+export declare class SkyBreakpointObserverTesting implements SkyBreakpointObserver {
+    #private;
+    get breakpointChange(): Observable<SkyBreakpoint>;
+    destroy(): void;
+    setBreakpoint(breakpoint: SkyBreakpoint): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyBreakpointObserverTesting, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyBreakpointObserverTesting>;
+}

package/testing/media-query/media-query-testing-controller.d.ts

@@ -0,0 +1,15 @@
+import { SkyBreakpoint } from '@skyux/core';
+import * as i0 from "@angular/core";
+/**
+ * A controller to be injected into tests, which mocks the
+ * `SkyMediaQueryService` and handles interactions with breakpoints.
+ */
+export declare class SkyMediaQueryTestingController {
+    #private;
+    /**
+     * Emits the provided breakpoint to all subscribers.
+     */
+    setBreakpoint(breakpoint: SkyBreakpoint): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyMediaQueryTestingController, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyMediaQueryTestingController>;
+}

package/testing/media-query/provide-media-query-testing.d.ts

@@ -0,0 +1,5 @@
+import { Provider } from '@angular/core';
+/**
+ * Adds mocks to allow interactions with breakpoints in tests.
+ */
+export declare function provideSkyMediaQueryTesting(): Provider[];

package/testing/mock-media-query.service.d.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * @internal
+ * @deprecated Use `provideSkyMediaQueryTesting()` coupled with `SkyMediaQueryTestingController`.
  */
 export declare class MockSkyMediaQueryService extends SkyMediaQueryService {
     static xs: string;

package/testing/public-api.d.ts

@@ -1,4 +1,8 @@
 export { SkyCoreTestingModule } from './core-testing.module';
+export { SkyHelpTestingController } from './help/help-testing-controller';
+export { SkyHelpTestingModule } from './help/help-testing.module';
+export { SkyMediaQueryTestingController } from './media-query/media-query-testing-controller';
+export { provideSkyMediaQueryTesting } from './media-query/provide-media-query-testing';
 export { MockSkyMediaQueryService } from './mock-media-query.service';
 export { MockSkyUIConfigService } from './mock-ui-config.service';
 export { SkyOverlayHarness } from './overlay/overlay-harness';
@@ -7,6 +11,5 @@ export { mockResizeObserver, mockResizeObserverEntry, mockResizeObserverHandle,
 export { SkyComponentHarness } from './shared/component-harness';
 export { SkyHarnessFilters } from './shared/harness-filters';
 export { SkyHarnessUtility } from './shared/harness-utility';
+export { SkyInputHarness } from './shared/input-harness';
 export { SkyQueryableComponentHarness } from './shared/queryable-component-harness';
-export { SkyHelpTestingController } from './help/help-testing-controller';
-export { SkyHelpTestingModule } from './help/help-testing.module';

package/testing/resize-observer-mock.d.ts

@@ -1,6 +1,15 @@
+/**
+ * @internal
+ */
 export declare const mockResizeObserverEntry: ResizeObserverEntry;
+/**
+ * @internal
+ */
 export declare const mockResizeObserverHandle: {
     callback: ResizeObserverCallback;
     emit: (entries: ResizeObserverEntry[], observer?: ResizeObserver) => void;
 };
+/**
+ * @internal
+ */
 export declare function mockResizeObserver(): void;

package/testing/shared/input-harness.d.ts

@@ -0,0 +1,36 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+/**
+ * Harness used to interact with native input elements in tests.
+ * @internal
+ */
+export declare class SkyInputHarness extends ComponentHarness {
+    /**
+     * Blurs the input.
+     */
+    blur(): Promise<void>;
+    /**
+     * Clears the input value.
+     */
+    clear(): Promise<void>;
+    /**
+     * Focuses the input.
+     */
+    focus(): Promise<void>;
+    /**
+     * Gets the value of the input.
+     */
+    getValue(): Promise<string>;
+    /**
+     * Whether the input is disabled.
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Whether the input is focused.
+     */
+    isFocused(): Promise<boolean>;
+    /**
+     * Sets the value of the input. The value will be set by simulating key
+     * presses that correspond to the given value.
+     */
+    setValue(value: string): Promise<void>;
+}