@odx/angular 12.26.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # @odx/angular
 
+## 13.0.0
+
+### Major Changes
+
+- e9b740b: Updates for Angular 20 across the Angular-based libraries. Changes by package are listed below.
+
+  #### @odx/angular
+
+  Breaking changes:
+  - `IconComponent`: remove `iconSet` input. Use `set` and `name` inputs instead, e.g. `<odx-icon set="core" name="close" />`. Also you can use `name` with `set::name` - `<odx-icon name="core::close" />`.
+  - `TimepickerService`: remove `getPlaceholder()`. Use the `useLocale` signal instead.
+  - `ModalHeroComponent`: remove `iconSet` input. Use the `icon` input with `set::name` format (e.g., `core::info`).
+  - `RailNavigationItemComponent`: remove `iconSet` and `iconName` inputs. Use the `icon` input with `set::name` format (e.g., `core::placeholder`).
+  - `ErrorPageConfig`: remove `iconSet`. Use `icon` with `set::name` format (e.g., `core::error`).
+  - `Table`: remove `TableSortVariant`. Use `SortDirection` from `@odx/angular/utils` instead.
+  - `Table`: remove re-export of `SortDirection` from `@odx/angular/components/data-table`. Import it directly from `@odx/angular/utils`.
+  - `ListItemComponent`: remove `danger` input. Use `variant="danger"` instead.
+  - `RichListItemHeaderComponent`: remove `odx-rich-list-header` selector. Use `odx-rich-list-item-header` instead.
+  - `Datepicker`/`Daterangepicker`: remove deprecated config aliases (`DatepickerConfig`, `DaterangepickerConfig`, etc.). Use `DateConfig`, `provideDateConfig`, `injectDateConfig`, `getDateInputFormat`, `getDateInputMask`, `getDateInputValueAsDate`, and `InputDateOrder` from `@odx/angular/cdk/date-input`.
+  - `FormFieldConfig`: remove `updateOn` property as it had no effect.
+  - `ToastService`: remove `queue$`, `onAdd$`, `onRemove$`, `add()`, `remove()`, `clear()` (use `toasts$`, `onToastAdd$`, `onToastRemove$`, `create()`, `dismiss()`, `dismissAll()`).
+  - `Utils`: remove `trackByIndex` and `trackById`. Use Angular control flow `@for` with `track $index` or `track item.id`.
+
+  Deprecations:
+  - `IconSet`, Use `OdxIconSet` from `@odx/icons` instead.
+  - `identifier` in `IconComponent`, use `name` with `set::name` instead.
+  - `IconSize`: use `small => sm`, `medium => md`, `large => lg`, `xlarge => xxl`
+
+  Improvements:
+  - Update components and templates for the new icon API and Angular 20 compatibility.
+  - Remove previously deprecated internal Angular usages.
+
+  #### @odx/angular-chart-js
+
+  Breaking changes:
+  - Update peer dependencies to Angular 20 and aligned `@odx/ui` and `@odx/angular` minimum versions.
+  - Update charting dependencies (`ng2-charts` 8.x, `chart.js` 4.5.x, `@sgratzl/chartjs-chart-boxplot` 4.4.5).
+
+  Improvements:
+  - Configuration updates for Angular 20 tooling.
+
+  #### @odx/angular-translate
+
+  Improvements:
+  - Update peer dependency on `@odx/angular` and Angular 20 tooling compatibility.
+  - Provider imports aligned with Angular 20 requirements.
+
+  #### @odx/auth
+
+  Improvements:
+  - Update internal templates to the new icon identifier format.
+
+  #### @odx/dc-plugins
+
+  Breaking changes:
+  - `DcRailNavItem`: remove `iconSet`/`iconName` usage. Use `icon` with `set::name` format (e.g., `core::home`).
+
+  Improvements:
+  - Update templates to the new icon identifier format.
+
+  #### @odx/product-fruits
+
+  Improvements:
+  - Update Product Fruits widget icons to the new `set::name` format and icon API.
+  - Theme stylesheet updates and Angular 20 tooling alignment.
+
+  #### @odx/ui
+
+  Breaking changes:
+  - Remove icon-font based usage in UI integration points. Do not import icon font CSS (e.g. `@odx/icons/core/core-icons.css`) anymore.
+  - Register icons through runtime imports in your app entrypoint instead: `import '@odx/icons';` and `import '@odx/icons/<set>';` (for example `@odx/icons/core`).
+  - In SCSS file import `@use '@odx/icons/scss' as odxIcons;` and add mixin `@include odxIcons.icon('<set>::<name>');`
+
+  Improvements:
+  - AG Grid theme refinements and multiple component style adjustments.
+  - Minor typography and breakpoint tweaks.
+
+## 12.26.1
+
+### Patch Changes
+
+- 26a7149: Fix: hide adjacent days in calendar when hidden
+  Fix: prevent close dropdown in autocomplete component on scroll
+
 ## 12.26.0
 
 ### Minor Changes

package/animations/README.md

@@ -1,3 +1,5 @@
 # @odx/angular/animations
 
 Secondary entry point of `@odx/angular`. It can be used by importing from `@odx/angular/animations`.
+
+Deprecated: migrate to `@odx/angular/css-animations` and use Angular `animate.enter` / `animate.leave` with CSS classes.

package/animations/index.d.ts

@@ -1,5 +1,261 @@
-export * from './lib/config';
-export * from './lib/expand';
-export * from './lib/fade';
-export * from './lib/slide';
-export * from './lib/wait-for-child-animations';
+import * as _angular_animations from '@angular/animations';
+import { AnimationReferenceMetadata } from '@angular/animations';
+
+declare const DEFAULT_ANIMATION_TIMING_FN = "ease";
+declare const DEFAULT_ANIMATION_DURATION = "250ms";
+declare const DEFAULT_ANIMATION_PARAMS: {
+    timingFn: string;
+    duration: string;
+    delay: string;
+};
+
+/**
+ * Animation for smoothly expanding an element from height 0 to its natural height.
+ * It transitions the element's height, padding, margin, and opacity from a collapsed state to an expanded state,
+ * making the element smoothly grow into view.
+ *
+ * The `expand` animation uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden
+ * when using the animation.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component
+ * import { expand, collapse } from '@odx/angular/animations';
+ *
+ * @Component({
+ *   selector: 'my-expandable-component',
+ *   templateUrl: './expandable-component.html',
+ *   animations: [
+ *     trigger('expandCollapse', [
+ *       transition('collapsed => expanded', useAnimation(expand)),
+ *       transition('expanded => collapsed', useAnimation(collapse)),
+ *     ])
+ *   ]
+ * })
+ * export class ExpandableComponent {
+ *   state = 'collapsed';
+ *
+ *   toggle(): void {
+ *     this.state = this.state === 'collapsed' ? 'expanded' : 'collapsed';
+ *   }
+ * }
+ * ```
+ *
+ * The animation smoothly transitions various properties (height, padding, margin, and opacity) and is controlled
+ * through parameters defined in `DEFAULT_ANIMATION_PARAMS` or those provided during usage.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const expand: _angular_animations.AnimationReferenceMetadata;
+/**
+ * Animation for smoothly collapsing an element from its natural height to height 0.
+ * It transitions the element's height, padding, margin, and opacity from an expanded state to a collapsed state,
+ * making the element smoothly shrink out of view.
+ *
+ * The `collapse` animation also uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden
+ * when using the animation. It's designed to be used in conjunction with the `expand` animation for creating
+ * expandable/collapsible elements.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const collapse: _angular_animations.AnimationReferenceMetadata;
+
+/**
+ * Generates a fadeIn animation with customizable opacity target.
+ * This animation gradually changes the element's opacity from 0 to a specified value, creating a "fade in" visual effect.
+ *
+ * @param {number} to - The final opacity value of the element at the end of the animation. Defaults to 1 (fully opaque).
+ * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component with a fadeIn animation
+ * import { fadeIn } from '@odx/angular/animations';
+ * import { trigger, transition, useAnimation } from '@angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-fade-in-example',
+ *   template: `
+ *      @if(isVisible) {
+ *       <div @fadeInAnimation>Fade In Content</div>
+ *      }
+ *       <button (click)="showContent()">Show Content</button>`,
+ *   animations: [
+ *     trigger('fadeInAnimation', [
+ *       transition(':enter', useAnimation(fadeIn(), { params: { duration: '500ms' } }))
+ *     ])
+ *   ]
+ * })
+ * export class FadeInExampleComponent {
+ *   isVisible = false;
+ *
+ *   showContent(): void {
+ *     this.isVisible = true;
+ *   }
+ * }
+ * ```
+ *
+ * This example demonstrates how to apply the fadeIn animation to an element, making it smoothly appear on the screen.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const fadeIn: (to?: number) => _angular_animations.AnimationReferenceMetadata;
+/**
+ * Generates a fadeOut animation with customizable opacity target.
+ * This animation gradually changes the element's opacity from its current value to a specified value, creating a "fade out" visual effect.
+ *
+ * @param {number} to - The target opacity value of the element at the end of the animation. Defaults to 0 (fully transparent).
+ * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component with a fadeOut animation
+ * import { fadeOut } from '@odx/angular/animations';
+ * import { trigger, transition, useAnimation } from '@angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-fade-out-example',
+ *   template: `
+ *      @if(isVisible) {
+ *      <div @fadeOutAnimation>Fade Out Content</div>
+ *      }
+ *      <button (click)="hideContent()">Hide Content</button>`,
+ *   animations: [
+ *     trigger('fadeOutAnimation', [
+ *       transition(':leave', useAnimation(fadeOut(), { params: { duration: '500ms' } }))
+ *     ])
+ *   ]
+ * })
+ * export class FadeOutExampleComponent {
+ *   isVisible = true;
+ *
+ *   hideContent(): void {
+ *     this.isVisible = false;
+ *   }
+ * }
+ * ```
+ *
+ * This example demonstrates how to apply the fadeOut animation to an element, making it smoothly disappear from the screen.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const fadeOut: (to?: number) => _angular_animations.AnimationReferenceMetadata;
+
+/**
+ * Utility functions for creating slide-in and slide-out animations in specific directions.
+ * These include slideInX, slideInY, slideInDown, slideInUp, slideInLeft, slideInRight,
+ * slideOutX, slideOutY, slideOutDown, slideOutUp, slideOutLeft, and slideOutRight.
+ * Each function is configured for a specific slide direction and distance, making it easy to apply
+ * consistent slide animations across your application.
+ *
+ * @example
+ * ```ts
+ * // Using slideInLeft and slideOutRight in a component
+ * animations: [
+ *   trigger('slideInOut', [
+ *     transition(':enter', [useAnimation(slideInLeft)]),
+ *     transition(':leave', [useAnimation(slideOutRight)])
+ *   ])
+ * ]
+ * ```
+ *
+ * Note: The 'from' and 'to' parameters for slideIn and slideOut functions respectively
+ * can be customized for different slide distances.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInX: (from: string) => AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInY: (from: string) => AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInDown: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInUp: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInLeft: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideInRight: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutX: (to: string) => AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutY: (to: string) => AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutDown: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutUp: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutLeft: AnimationReferenceMetadata;
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const slideOutRight: AnimationReferenceMetadata;
+
+/**
+ * Utility animation that waits for animations on child components to complete.
+ * This animation should be used within parent components that have child components with their
+ * own animations. It ensures that the parent's enter and leave animations are only triggered
+ * after all child animations have completed, creating a seamless animation sequence.
+ *
+ * This utility uses Angular's animation functions `query` and `animateChild` to find and animate
+ * child elements marked with Angular's animation triggers. The `{ optional: true }` parameter
+ * ensures that the animation gracefully handles cases where no child animations are defined.
+ *
+ * @example
+ * ```ts
+ * // Using waitForChildAnimations in a parent component with children that have animations
+ * import { trigger, transition, style, animate, query, animateChild } from '@angular/animations';
+ * import { waitForChildAnimations } from '@odx/angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-parent',
+ *   templateUrl: './parent.component.html',
+ *   animations: [
+ *     trigger('parentAnimation', [
+ *       // Define parent animations here
+ *       transition(':enter', [style({ opacity: 0 }), animate('0.5s ease-in', style({ opacity: 1 }))]),
+ *       transition(':leave', [animate('0.5s ease-out', style({ opacity: 0 }))]),
+ *       // Use waitForChildAnimations for coordinating with child animations
+ *       waitForChildAnimations
+ *     ])
+ *   ]
+ * })
+ * export class ParentComponent {
+ *   // Component logic here
+ * }
+ * ```
+ *
+ * Note: The `waitForChildAnimations` utility is added to the parent component's animation triggers,
+ * ensuring that any child component animations are completed before continuing with the parent's
+ * own animations.
+ */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
+declare const waitForChildAnimations: _angular_animations.AnimationTransitionMetadata;
+
+export { DEFAULT_ANIMATION_DURATION, DEFAULT_ANIMATION_PARAMS, DEFAULT_ANIMATION_TIMING_FN, collapse, expand, fadeIn, fadeOut, slideInDown, slideInLeft, slideInRight, slideInUp, slideInX, slideInY, slideOutDown, slideOutLeft, slideOutRight, slideOutUp, slideOutX, slideOutY, waitForChildAnimations };

package/breakpoints/index.d.ts

@@ -1,7 +1,216 @@
-export * from './lib/breakpoints.config';
-export * from './lib/breakpoints.module';
-export * from './lib/breakpoints.service';
-export * from './lib/breakpoints.typings';
-export * from './lib/directives';
-export * from './lib/helpers';
-export * from './lib/models';
+import * as _odx_angular_utils from '@odx/angular/utils';
+import * as i0 from '@angular/core';
+import { OnInit, TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Defines default responsive breakpoints for the application. These breakpoints are used to
+ * apply responsive styles and behaviors across various device sizes. Each breakpoint is
+ * configured with a name, a minimum width, and a maximum width, defining the range of device
+ * sizes it targets.
+ *
+ * @constant
+ * @type {Record<string, string>}
+ *
+ * @example
+ * ```ts
+ * // Accessing a breakpoint value
+ * console.log(DEFAULT_BREAKPOINTS['=phone']); // Outputs: "(min-width: 480px) and (max-width: 767px)"
+ * ```
+ */
+declare const DEFAULT_BREAKPOINTS: {
+    readonly "<desktop": string;
+    readonly "=desktop": string;
+    readonly ">desktop": string;
+    readonly "<desktop-s": string;
+    readonly "=desktop-s": string;
+    readonly ">desktop-s": string;
+    readonly "<tablet": string;
+    readonly "=tablet": string;
+    readonly ">tablet": string;
+    readonly "<phone": string;
+    readonly "=phone": string;
+    readonly ">phone": string;
+    readonly "<phone-s": string;
+    readonly "=phone-s": string;
+    readonly ">phone-s": string;
+};
+interface BreakpointsConfig {
+    breakpoints: Partial<OdxAngular.Breakpoints>;
+}
+/**
+ * Provides Angular dependency injection tokens for accessing and configuring breakpoints
+ * within the application. This enables a type-safe and modular way to manage responsive
+ * design breakpoints across the app.
+ *
+ * @example
+ * ```ts
+ * // Providing custom breakpoints in an Angular module
+ * import { NgModule } from '@angular/core';
+ * import { provideBreakpointsConfig } from '@odx/angular/breakpoints';
+ *
+ * @NgModule({
+ *   providers: [
+ *     provideBreakpointsConfig({
+ *       breakpoints: {
+ *         ...configureBreakpoint('custom-tablet', 640, 1024),
+ *       },
+ *     }),
+ *   ],
+ * })
+ * export class CustomModule {}
+ * ```
+ */
+declare const BreakpointsConfig: i0.InjectionToken<Partial<BreakpointsConfig>>;
+declare const BreakpointsDefaultConfig: BreakpointsConfig;
+declare const injectBreakpointsConfig: () => BreakpointsConfig;
+declare const provideBreakpointsConfig: <D extends _odx_angular_utils.ConfigDependencies = _odx_angular_utils.ConfigDependencies<Partial<BreakpointsConfig>>>(config: _odx_angular_utils.ConfigProvider<Partial<BreakpointsConfig>, D>) => i0.FactoryProvider | i0.ValueProvider;
+
+type BreakpointName = keyof OdxAngular.Breakpoints;
+interface Breakpoint {
+    min: number;
+    max: number;
+}
+
+/**
+ * A structural directive that conditionally includes an Angular template based on whether the viewport matches
+ * specified breakpoints. It leverages the BreakpointsService to observe changes in viewport size and apply
+ * the appropriate template.
+ *
+ * @Directive
+ * @param {BreakpointsService} breakpointsService - Injects BreakpointsService to observe breakpoint changes.
+ * @param {TemplateRef} template - Injects the Angular template to render when breakpoints match.
+ * @param {ViewContainerRef} viewContainer - Injects the container where the template will be rendered.
+ *
+ * @example
+ * ```html
+ * // Usage in a component template to conditionally display content based on breakpoints
+ * // Assume 'mobile' and 'tablet' are defined breakpoints
+ * <ng-template [odxMatchBreakpoints]="['mobile', 'tablet']">
+ *   Content to display on mobile and tablet sizes.
+ * </ng-template>
+ * <ng-template [odxMatchBreakpoints]="['desktop']" [odxMatchBreakpointsElse]="elseTemplate">
+ *   Content to display on desktop size.
+ * </ng-template>
+ * <ng-template #elseTemplate>
+ *   Content to display when not on desktop size.
+ * </ng-template>
+ * ```
+ */
+declare class MatchBreakpointsDirective implements OnInit {
+    private readonly breakpoints$$;
+    private readonly breakpointsService;
+    private readonly takeUntilDestroyed;
+    private readonly template;
+    private readonly viewContainer;
+    /**
+     * Sets the breakpoints to observe. The directive's content is displayed if the current viewport matches
+     * any of the specified breakpoints.
+     *
+     * @param {BreakpointName | BreakpointName[]} value - The breakpoint(s) to match against the current viewport size.
+     */
+    set breakpoints(value: BreakpointName | BreakpointName[] | null | undefined);
+    /**
+     * Optionally specifies a template to render when the viewport does not match the specified breakpoints.
+     *
+     * @param {TemplateRef<unknown>} elseTemplate - The template to render when the viewport does not match the breakpoints.
+     */
+    elseTemplate?: TemplateRef<unknown> | null;
+    ngOnInit(): void;
+    private render;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatchBreakpointsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatchBreakpointsDirective, "ng-template[odxMatchBreakpoints]", never, { "breakpoints": { "alias": "odxMatchBreakpoints"; "required": false; }; "elseTemplate": { "alias": "odxMatchBreakpointsElse"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class BreakpointsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BreakpointsModule, never, [typeof MatchBreakpointsDirective], [typeof MatchBreakpointsDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BreakpointsModule>;
+}
+
+/**
+ * Service to observe and react to changes in viewport size based on predefined breakpoints.
+ * Utilizes Angular CDK's BreakpointObserver for listening to media query changes and integrates
+ * it with the application's custom breakpoints configuration.
+ *
+ * @Injectable({ providedIn: 'root' })
+ */
+declare class BreakpointsService {
+    private readonly breakpointObserver;
+    private readonly config;
+    /**
+     * Observes the specified breakpoints and returns an Observable that emits true if any
+     * of the specified breakpoints match the current viewport size, and false otherwise.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to observe.
+     * @returns {Observable<boolean>} - An Observable that emits true if the viewport matches the specified breakpoints.
+     *
+     * @example
+     * ```ts
+     * // Component that uses BreakpointsService to apply dynamic styles based on breakpoints
+     * @Component({
+     *   selector: 'app-responsive-component',
+     *   templateUrl: './responsive-component.component.html',
+     * })
+     * export class ResponsiveComponent {
+     *   isMobile$: Observable<boolean>;
+     *
+     *   constructor(private breakpointsService: BreakpointsService) {
+     *     this.isMobile$ = this.breakpointsService.observe(['phone', 'tablet']);
+     *   }
+     * }
+     * ```
+     */
+    observe(breakpoints: BreakpointName[]): Observable<boolean>;
+    /**
+     * Checks if any of the specified breakpoints match the current viewport size.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to check.
+     * @returns {boolean} - Returns true if the viewport matches the specified breakpoints, false otherwise.
+     *
+     * @example
+     * ```ts
+     * // Checking if the current viewport matches the 'desktop' breakpoint
+     * const isDesktop = this.breakpointsService.matches(['desktop']);
+     * console.log(`Is desktop view? ${isDesktop}`);
+     * ```
+     */
+    matches(breakpoints: BreakpointName[]): boolean;
+    private getMediaQueries;
+    private createBreakpointObserver;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BreakpointsService>;
+}
+
+declare global {
+    namespace OdxAngular {
+        interface Breakpoints extends Record<keyof typeof DEFAULT_BREAKPOINTS, string> {
+        }
+    }
+}
+
+type BreakpointOperators = '<' | '=' | '>';
+type BreakpointConfig<T extends string> = Record<`${BreakpointOperators}${T}`, string>;
+/**
+ * Generates a configuration object containing CSS media query strings for a named breakpoint.
+ * The function creates media queries for three scenarios: below (`<`), exactly (`=`), and above (`>`) the specified breakpoint.
+ *
+ * @template T - The string literal type representing the name of the breakpoint.
+ * @param {T} name - The name of the breakpoint (e.g., 'md' for medium).
+ * @param {number} min - The minimum width (inclusive) where the breakpoint starts.
+ * @param {number} max - The maximum width (exclusive) where the breakpoint ends.
+ * @returns {BreakpointConfig<T>} An object containing media query strings for targeting screen sizes relative to the breakpoint.
+ *
+ * @example
+ * ```ts
+ * // Define a medium (md) breakpoint
+ * const mdBreakpoint = configureBreakpoint('md', 768, 1024);
+ * console.log(mdBreakpoint['<md']); // Outputs: "(max-width: 767px)"
+ * console.log(mdBreakpoint['=md']); // Outputs: "(min-width: 768px) and (max-width: 1023px)"
+ * console.log(mdBreakpoint['>md']); // Outputs: "(min-width: 768px)"
+ * ```
+ */
+declare function configureBreakpoint<T extends string>(name: T, min: number, max: number): BreakpointConfig<T>;
+
+export { BreakpointsConfig, BreakpointsDefaultConfig, BreakpointsModule, BreakpointsService, DEFAULT_BREAKPOINTS, MatchBreakpointsDirective, configureBreakpoint, injectBreakpointsConfig, provideBreakpointsConfig };
+export type { Breakpoint, BreakpointName };