import * as i0 from '@angular/core';
import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { DaffPersistenceService } from '@daffodil/core';
import { UntypedFormControl } from '@angular/forms';

/**
 * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.
 */
declare class DaffFormLabelDirective {
    /**
     * @docs-private
     */
    class: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormLabelDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormLabelDirective, "[daffFormLabel]", never, {}, {}, never, never, true, never>;
}

/**
 * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
 */
declare class DaffFormLabelModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormLabelModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormLabelModule, never, [typeof DaffFormLabelDirective], [typeof DaffFormLabelDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<DaffFormLabelModule>;
}

/**
 * A type representing what Angular accepts on an animation template binding.
 * This type should likely be moved to `@angular/animations`.
 */
interface AnimationStateWithParams<T = unknown, V = Record<string | number, unknown>> {
    value: T;
    params: V;
}

/**
 * DaffPrefixDirective can be used to place content before another piece of content
 * in components like `DaffFormFieldComponent` or `DaffListComponent`.
 */
declare class DaffPrefixDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffPrefixDirective, "[daffPrefix]", never, {}, {}, never, never, true, never>;
}

/**
 * DaffSuffixDirective can be used to place content after another piece of content
 * in components like `DaffFormFieldComponent` or `DaffListComponent`.
 */
declare class DaffSuffixDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSuffixDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSuffixDirective, "[daffSuffix]", never, {}, {}, never, never, true, never>;
}

/**
 * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
 */
declare class DaffPrefixSuffixModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixSuffixModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffPrefixSuffixModule, never, [typeof DaffPrefixDirective, typeof DaffSuffixDirective], [typeof DaffPrefixDirective, typeof DaffSuffixDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<DaffPrefixSuffixModule>;
}

declare const DAFF_PREFIX_SUFFIX_DIRECTIVES: readonly [typeof DaffPrefixDirective, typeof DaffSuffixDirective];

interface DaffColorable {
    color: DaffPalette;
}
/**
 * These are the valid options that can be passed to a DaffColorable component.
 */
type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;

/**
 * `DaffColorableDirective` allows a component to conditionally apply color-specific
 * styles by setting CSS classes based on the specified color. This directive is useful
 * for applying different color palettes to a component in an Angular application.
 *
 * Supported colors: `primary | secondary | tertiary | light | dark | theme | theme-contrast`
 *
 * | Color | Class |
 * | -------- | ----- |
 * | `primary` | `.daff-primary`|
 * | `secondary` | `.daff-secondary`|
 * | `tertiary` | `.daff-tertiary`|
 * | `light` | `daff-light` |
 * | `dark` | `daff-dark` |
 * | `theme` | `daff-theme`|
 * | `theme-contrast` | `.daff-theme-contrast`|
 *
 *  `white` and `black` have been deprecated in favor of `light` and `dark`.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffColorable [color]="primary">Colored content</div>
 * ```
 *
 *  ```scss
 * .div {
 *  &.daff-primary {
 *    color: daff-color($primary);
 *  }
 * }
 * ```
 *
 * In this example, the `daff-primary` class is applied to the `div` element, allowing you to
 * use the color class to style the `div`.
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffColorableDirective,
 *      inputs: ['color'],
 *    },
 *  ],
 * })
 * export class CustomComponent {
 *  @HostBinding('class.custom-component') class = true;
 * }
 * ```
 *
 * ```scss
 * .custom-component {
 *  &.daff-primary {
 *    background: daff-color($primary, 10);
 *    color: daff-color($primary, 90);
 *  }
 * }
 * ```
 */
declare class DaffColorableDirective implements DaffColorable, OnChanges, OnInit {
    /**
     * Sets the color on a component.
     */
    color: DaffPalette;
    /**
     * Sets a default color.
     *
     * @example
     * ```ts
     * constructor(private colorableDirective: DaffColorableDirective) {
     *  this.colorableDirective.defaultColor = 'theme';
     * }
     * ```
     */
    defaultColor: DaffPalette;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @docs-private
     */
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffColorableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffColorableDirective, "[daffColorable]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
}

declare enum DaffBreakpoints {
    DESKTOP = "(min-width: 1920px)",
    LAPTOP = "(min-width: 1440px)",
    SMALL_LAPTOP = "(min-width: 1200px)",
    BIG_TABLET = "(min-width: 1024px)",
    TABLET = "(min-width: 768px)",
    MOBILE = "(min-width: 480px)"
}

/**
 * Provides a {@link NoopBreakpointObserver} if the platform is not browser.
 */
declare const SERVER_SAFE_BREAKPOINT_OBSERVER: InjectionToken<Omit<BreakpointObserver, never>>;

/**
 * A stubbed out breakpoint observer service.
 */
declare class NoopBreakpointObserver implements Omit<BreakpointObserver, never> {
    ngOnDestroy(): void;
    isMatched(value: string | readonly string[]): boolean;
    observe(value: string | readonly string[]): Observable<BreakpointState>;
    static ɵfac: i0.ɵɵFactoryDeclaration<NoopBreakpointObserver, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<NoopBreakpointObserver>;
}

/**
 * A basic constructor type useful for mixins
 * See https://blog.mariusschulz.com/2017/05/26/typescript-2-2-mixin-classes
 * for a really good explanation of why mixins are useful.
 */
type Constructor<T = Record<string, any>> = new (...args: any[]) => T;

/**
 * The `DaffStatusable` interface defines a component that can have a status.
 * This status determines the styling or behavior of the component.
 */
interface DaffStatusable {
    /**
     * The status of the component.
     */
    status: DaffStatus;
}
/**
 * The `DaffStatus` type defines the possible status values that a component can have.
 * - 'info': Indicates an informational status.
 * - 'warn': Indicates a warning status.
 * - 'critical': Indicates a critical or error status.
 * - 'success': Indicates a success status.
 */
type DaffStatus = 'info' | 'warn' | 'critical' | 'success';
/**
 * The `DaffStatusEnum` enumerates the possible status values for a component.
 */
declare enum DaffStatusEnum {
    Info = "info",
    Warn = "warn",
    Critical = "critical",
    Success = "success"
}

/**
 * `DaffStatusableDirective` allows a component to conditionally apply status-specific
 * styles by setting CSS classes based on the specified status. This directive is useful
 * for indicating different statuses such as info, warning, critical, or success states.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffStatusable [status]="componentStatus">Status content</div>
 * ```
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffStatusableDirective,
 *      inputs: ['status'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 *
 * ```scss
 * :host {
 *  &.daff-critical {
 *    background: daff-color($red, 10);
 *    color: daff-color($red, 90);
 *  }
 * }
 * ```
 *
 * The directive applies the following CSS classes to the component based on the status:
 *
 * - `daff-info`: Applied when the status is `info`.
 * - `daff-warn`: Applied when the status is `warn`.
 * - `daff-critical`: Applied when the status is `critical`.
 * - `daff-success`: Applied when the status is `success`.
 */
declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnInit {
    /**
     * Sets the status on a component.
     */
    status: DaffStatus;
    /**
     * Sets a default status.
     *
     * @example
     * ```ts
     * constructor(private statusDirective: DaffStatusableDirective) {
     *  this.statusDirective.defaultStatus = 'info';
     * }
     * ```
     */
    defaultStatus: DaffStatus;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @docs-private
     */
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStatusableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStatusableDirective, "[daffStatusable]", never, { "status": { "alias": "status"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * `DaffSkeletonableDirective` allows a component to display a skeleton loading
 * state by conditionally applying a CSS class. This is useful for indicating to
 * users that content is loading or being processed. This directive can be used to
 * apply a skeleton loading state to any component by toggling the `skeleton`
 * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
 * is applied, which should style the component to look like a loading placeholder.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffSkeletonable [skeleton]="isLoading">Content</div>
 * ```
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffSkeletonableDirective,
 *      inputs: ['skeleton'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * ```scss
 * :host {
 *  .daff-skeleton {
 *    @include state.skeleton-screen(48px, 24px);
 *  }
 * }
 * ```
 *
 * The directive applies the `daff-skeleton` class to the component should be defined in your styles to display the loading
 * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
 */
declare class DaffSkeletonableDirective {
    /**
     * Controls whether the component displays a skeleton loading state.
     */
    skeleton: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSkeletonableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSkeletonableDirective, "[daffSkeletonable]", never, { "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * An interface for giving a component the ability to display a mutating UI.
 * In order to be mutable, our class must implement this property.
 */
interface DaffMutable {
    mutating: boolean;
}

/**
 * Interface for giving a component the ability to customize text alignment for component-specific UI.
 */
interface DaffTextAlignable {
    textAlignment: DaffTextAlignment;
}
/**
 * The possible types that can be passed to a DaffTextAlignable component
 */
type DaffTextAlignment = 'left' | 'center' | 'right';
declare enum DaffTextAlignmentEnum {
    Left = "left",
    Center = "center",
    Right = "right"
}

/**
 * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
 * setting CSS classes based on the specified text alignment. This directive is
 * useful when text alignment needs to be managed dynamically in an Angular component.
 *
 * ## Why not just use CSS?
 *
 * While the native CSS `text-align` property can be used for static text alignment,
 * the `DaffTextAlignableDirective` provides a structured and consistent way to handle
 * dynamic text alignment within Angular components in more complex use cases where the
 * application of `text-align: center;` would cause unexpected side effects.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffTextAlignable textAlignment="center">Aligned text</div>
 * ```
 *
 * In this example, the `daff-center` class is added to the `div` element, allowing
 * you to style the `div` as you wish using the class.
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffTextAlignableDirective,
 *      inputs: ['textAlignment'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * ```scss
 * .custom-component {
 *  &.daff-left {
 *    text-align: left;
 *  }
 * }
 * ```
 */
declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {
    /**
     * The text alignment of the component.
     */
    textAlignment: DaffTextAlignment;
    /**
     * Sets a default alignment.
     *
     * @example
     * ```ts
     * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
     *  this.textAligmentDirective.defaultAlignent = 'left';
     * }
     * ```
     */
    defaultAlignment: DaffTextAlignment;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @docs-private
     */
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextAlignableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTextAlignableDirective, "[daffTextAlignable]", never, { "textAlignment": { "alias": "textAlignment"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * An interface for giving a component the ability to display a compact UI.
 * In order to be compactable, the class must implement this property.
 */
interface DaffCompactable {
    compact: boolean;
}

/**
 * `DaffCompactableDirective` allows a component to conditionally apply a compact
 * style by toggling a CSS class. This is useful for creating components that can
 * switch between regular and compact styles based on the `compact` property.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffCompactable [compact]="isCompact">Content goes here</div>
 * ```
 *
 * In this example, the `daff-compact` class is applied to the `div` element when
 * `isCompact` is `true`, making the `div` display its compact state.
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffCompactableDirective,
 *      inputs: ['compact'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * The directive applies the `daff-compact` class to the component and
 * should be defined in your styles to display the compact state as desired.
 *
 * ```scss
 * :host {
 *  padding: 8px 16px;
 *
 *  &.daff-compact {
 *    padding: 4px 8px;
 *  }
 * }
 * ```
 */
declare class DaffCompactableDirective {
    /**
     * Controls whether the component is compact.
     */
    compact: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCompactableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCompactableDirective, "[daffCompactable]", never, { "compact": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * `DaffManageContainerLayoutDirective` gives a component the ability to manage a `DaffContainerComponent`'s layout.
 * By including this directive, predetermined layout styles are passed down to the container.
 *
 * To understand the motivation for this directive, consider:
 *
 * ```html
 * <daff-container>
 *  <daff-hero></daff-hero>
 * </daff-container>
 * ```
 * vs.
 *
 * ```html
 * <daff-hero>
 *   <daff-container></daff-container>
 * </daff-hero>
 * ```
 *
 * The former may inappropriately constrain the width of its child elements,
 * while the latter (without `DaffManageContainerLayoutDirective`) may unexpectedly
 * interfere in the layout features of its parent element (i.e. display: grid, display: flex).
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <my-custom-component daffManageContainerLayout>
 *  <daff-container size="lg"></daff-container>
 * </my-custom-component>
 * ```
 *
 * ```scss
 * :host {
 *  display: grid;
 *  grid-template-columns: 1fr 1fr;
 * }
 * ```
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'my-custom-component',
 *  template: 'my-custom-component.html',
 *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
 * })
 * export class MyCustomComponent { }
 *
 * ```scss
 * :host {
 *  display: grid;
 *  grid-template-columns: 1fr 1fr;
 * }
 * ```
 *
 * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
 */
declare class DaffManageContainerLayoutDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffManageContainerLayoutDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffManageContainerLayoutDirective, "[daffManageContainerLayout]", never, {}, {}, never, never, true, never>;
}

/**
 * `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
 * preventing {@link DaffArticleComponent } styles from bleeding into the component.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <my-custom-component daffArticleEncapsulated></my-custom-component>
 * ```
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
 * })
 * export class CustomComponent { }
 * ```
 *
 * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
 */
declare class DaffArticleEncapsulatedDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;
}

/**
 * The possible states of a theme.
 */
declare enum DaffTheme {
    Light = "light",
    Dark = "dark",
    None = "none"
}

/**
 * A service for retrieving the operating system's theme preference.
 */
declare class DaffOsThemeService {
    preference$: Observable<DaffTheme>;
    private doc?;
    constructor(_doc: any);
    /**
     * Get the operating system's theme preference.
     */
    getThemePreference(): Observable<DaffTheme>;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffOsThemeService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DaffOsThemeService>;
}

/**
 * A service for retrieving and managing the application's stored theme.
 */
declare class DaffThemeStorageService {
    private storage;
    private theme$;
    private storage$;
    private doc?;
    constructor(storage: DaffPersistenceService, _doc: any);
    /**
     * Given that Safari doesn't respect in-tab storage events, we have to manually
     * fire storage events in the open tab on Webkit based browsers.
     */
    private progressStorageEvent;
    getThemeAsObservable(): Observable<DaffTheme>;
    getTheme(): DaffTheme;
    setTheme(theme: DaffTheme): void;
    removeThemeSetting(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffThemeStorageService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DaffThemeStorageService>;
}

/**
 * A service for controlling the application's theme.
 */
declare class DaffThemingService {
    private osTheme;
    private themeStorage;
    private theme$;
    private theme;
    constructor(osTheme: DaffOsThemeService, themeStorage: DaffThemeStorageService);
    /**
     * Get the current theme.
     */
    getTheme(): Observable<DaffTheme>;
    /**
     * Set the theme to dark mode.
     */
    darkMode(): void;
    /**
     * Set the theme to light mode.
     */
    lightMode(): void;
    /**
     * Switch between themes.
     */
    switchTheme(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffThemingService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DaffThemingService>;
}

/**
 * The theme provider for the app.
 * This configures updating the body with the theme class.
 */
declare const DAFF_THEME_INITIALIZER: i0.EnvironmentProviders;

/**
 * A definition for a lazy component.
 */
interface DaffLazyComponent {
    import: () => Promise<Type<unknown>>;
}

declare const daffFocusableElementsSelector = "a[href],a[routerlink], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])";

declare class DaffFocusStackService {
    private document;
    private _stack;
    constructor(document: any);
    /**
     * Return the current length of the stack.
     */
    length(): number;
    /**
     * Adds a HTML element to a focus stack and returns the new length of the stack.
     *
     * Generally, you will probably want to call this before you transition focus
     * onto a new element.
     *
     * @example Using the push function
     * ```ts
     * this._focusStack.push(this._doc.activeElement);
     * ```
     */
    push(el?: HTMLElement | undefined): number;
    /**
     * Focuses on the HTML element at the top of a stack.
     *
     * @example Using the focus function
     * ```ts
     * this._focusStack.focus(this._doc.activeElement);
     * ```
     */
    focus(): void;
    /**
     * Removes the HMTL element at the top of a stack and focuses on it.
     */
    pop(focus?: boolean): HTMLElement;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFocusStackService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DaffFocusStackService>;
}

/**
 * Interfaces that gives a component the ability to customize sizing for component specific UI.
 */
interface DaffSizable<T extends DaffSizeAllType> {
    size: T;
}
/**
 * The possible types that can be passed to a component that implements DaffSizable
 */
type DaffSizeXSmallType = 'xs';
type DaffSizeSmallType = 'sm';
type DaffSizeMediumType = 'md';
type DaffSizeLargeType = 'lg';
type DaffSizeXLargeType = 'xl';
/**
 * The a type representing all available sizes.
 */
type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType;
declare enum DaffSizableEnum {
    XSmall = "xs",
    Small = "sm",
    Medium = "md",
    Large = "lg",
    XLarge = "xl"
}

/**
 * `DaffSizableDirective` allows for dynamic sizing of a component by setting
 * CSS classes based on the specified size.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffSizable [size]="small">Sized content</div>
 * ```
 * In this example, the `daff-small` class is applied to the `div` element, allowing you to
 * use the class to style the `div`.
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  standalone: true,
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffSizableDirective,
 *      inputs: ['size'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * ```scss
 * :host {
 *  &.daff-sm {
 *    width: 24px;
 *  }
 *
 *  &.daff-md {
 *    width: 32px;
 *  }
 * }
 * ```
 *
 * The directive applies the following CSS classes to the component based on the size:
 *
 * - `daff-xs`: Applied when the size is `xs`.
 * - `daff-sm`: Applied when the size is `sm`.
 * - `daff-md`: Applied when the size is `md`.
 * - `daff-lg`: Applied when the size is `lg`.
 * - `daff-xl`: Applied when the size is `xl`.
 */
declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
    /**
     * The size of the component.
     */
    size: T;
    /**
     * Sets a default size.
     *
     * @example
     * ```ts
     * constructor(private sizableDirective: DaffSizableDirective) {
     *  this.sizableDirective.defaultSize = 'md';
     * }
     * ```
     */
    defaultSize: T;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @docs-private
     */
    ngOnInit(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSizableDirective<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSizableDirective<any>, "[daffSizable]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * An interface for giving a component the ability to display an open UI.
 */
interface DaffOpenable {
    /** Whether a component is open or not */
    open: boolean;
    /** Reveal the component */
    reveal: () => void;
    /** Hide the component */
    hide: () => void;
    /** Toggles the component between open and not open */
    toggle: () => void;
}

/**
 * A directive that opens or closes a component. It should only be used as an [Angular Host Directive](https://angular.dev/guide/directives/directive-composition-api).
 * This directive is stateless by default, but it supports both a state and stateless implementation. Only one version should be used within a component.
 *
 * @example Using the DaffOpenableDirective
 * ```ts
 * import {
 *  Component,
 *  ChangeDetectionStrategy,
 * } from '@angular/core';
 *
 * import { DaffOpenableDirective } from '@daffodil/design';
 *
 * @Component({
 *   selector: 'custom-component',
 *   template: `
 *     <button (click)="toggle()">Click me!</button>
 *     <div class="hidden-block">This is a hidden block that can be shown by clicking the button.</div>
 *   `,
 *   styles: [`
 *   :host {
 *     .hidden-block {
 *       display: none;
 *     }
 *
 *     &.daff-open {
 *       .hidden-block {
 *         display: block;
 *       }
 *     }
 *   }`],
 *   changeDetection: ChangeDetectionStrategy.OnPush,
 *   hostDirectives: [{
 *     directive: DaffOpenableDirective,
 *   }],
 * })
 * export class CustomComponent {
 *   constructor(private openDirective: DaffOpenableDirective) {}
 *
 *   toggle() {
 *     this.openDirective.toggle();
 *   }
 * }
 * ```
 */
declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
    /** Controls whether the component is open. */
    open: boolean;
    private _setOpen;
    /** Whether or not a component should handle state
     *
     * @example Setting the `stateless` property on a component
     * ```ts
     * constructor(private openDirective: DaffOpenableDirective) {
     *  this.openDirective.stateless = false;
     * }
     * ```
     */
    stateless: boolean;
    /**
     * Event fired when a component is opened (true) or closed (false)
     */
    toggled: EventEmitter<boolean>;
    /**
     * Open the component
     */
    reveal(): void;
    /**
     * Close the component
     */
    hide(): void;
    /**
     * Open or close the component, depending on if it's currently open or not
     */
    toggle(): void;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffOpenableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; }; }, { "toggled": "toggled"; }, never, never, true, never>;
}

/**
 * Interface for giving a component the ability to customize text alignment for component-specific UI.
 */
interface DaffOrientable {
    orientation: DaffOrientation;
}
/**
 * The possible types that can be passed to a DaffOrientable component
 */
type DaffOrientation = 'horizontal' | 'vertical';
declare enum DaffOrientationEnum {
    Horizontal = "horizontal",
    Vertical = "vertical"
}

/**
 * `DaffOrientableDirective` allows for dynamic orientation of a component by
 * setting CSS classes based on the specified orientation. This directive is
 * useful when orientation needs to be managed dynamically in an Angular component.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffOrientable [orientation]="horizontal"></div>
 * ```
 *
 * In this example, the `daff-horizontal` class is added to the `div` element, allowing
 * you to style the `div` as you wish using the class.
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffOrientableDirective,
 *      inputs: ['orientation'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * ```scss
 * .custom-component {
 *   &.daff-vertical {
 *     display: flex;
 *     flex-direction: column;
 *  }
 * }
 * ```
 */
declare class DaffOrientableDirective implements DaffOrientable, OnChanges, OnInit {
    /**
     * The orientation of the component.
     *
     * Options are: `horizontal` and `vertical`.
     */
    orientation: DaffOrientation;
    /**
     * Sets a default orientation.
     *
     * @example
     * ```ts
     * constructor(private orientableDirective: DaffOrientableDirective) {
     *  this.orientableDirective.defaultOrientation = 'horizontal';
     * }
     * ```
     */
    defaultOrientation: DaffOrientation;
    /**
     * @docs-private
     */
    ngOnInit(): void;
    /**
     * @docs-private
     */
    ngOnChanges(changes: SimpleChanges): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffOrientableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOrientableDirective, "[daffOrientable]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * An interface for giving a component the ability to display a selected UI.
 * In order to be selectable, the class must implement this property.
 */
interface DaffSelectable {
    selected: boolean;
}

declare class DaffSelectableDirective implements DaffSelectable {
    private cd;
    /**
     * Controls whether the component is selected.
     */
    selected: boolean;
    /**
     * An event that fires after the component becomes selected.
     */
    becameSelected: EventEmitter<void>;
    constructor(cd: ChangeDetectorRef);
    /**
     * Selects the component and emits the `becameSelected` event.
     */
    select(): this;
    /**
     * Deselects the component.
     */
    deselect(): this;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSelectableDirective, "[daffSelected]", never, { "selected": { "alias": "selected"; "required": false; }; }, { "becameSelected": "becameSelected"; }, never, never, true, never>;
}

declare class DaffStickyTrackerDirective implements OnDestroy {
    private readonly elementRef;
    private readonly renderer;
    private readonly document;
    sticky: 'top' | 'bottom' | undefined;
    private sentinelObserver?;
    private readonly className;
    private lastPinnedState;
    private debounceTimeout?;
    private sentinelElement?;
    private idleCallbackId?;
    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, document: Document);
    private get isBottomSticky();
    private scheduleObserverCreation;
    private findScrollableParent;
    private createSentinel;
    private createSentinelObserver;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStickyTrackerDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStickyTrackerDirective, "[daffStickyTracker]", never, { "sticky": { "alias": "sticky"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * `DaffDisableableDirective` allows a component to display a disabled UI
 * by conditionally applying a CSS class. This is useful for indicating to
 * users that content is loading or being processed. This directive can be used to
 * apply a disabled UI to any component by toggling the `disabled`
 * input property. When `disabled` is `true`, the `daff-disabled` CSS class
 * is applied, which should style the component to look like it's not interactable.
 *
 * @example Implementing it as an attribute directive
 *
 * ```html
 * <div daffDisableable [disabled]="isDisabled">Content</div>
 * ```
 *
 * @example Implementing it as an Angular host directive
 *
 * ```ts
 * @Component({
 *  selector: 'custom-component',
 *  template: 'custom-component.html',
 *  hostDirectives: [
 *    {
 *      directive: DaffDisableableDirective,
 *      inputs: ['disabled'],
 *    },
 *  ],
 * })
 * export class CustomComponent { }
 * ```
 *
 * ```scss
 * :host {
 *  .daff-disabled {
 *    cursor: not-allowed;
 *    opacity: 0.5;
 *  }
 * }
 * ```
 *
 * The directive applies the `daff-disabled` class to the component. The class should be
 * defined in your styles to display the loading state as desired.
 */
declare class DaffDisableableDirective {
    disabled: boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<DaffDisableableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
}

declare class DaffErrorStateMatcher {
    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
}

export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffErrorStateMatcher, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
export type { AnimationStateWithParams, Constructor, DaffColorable, DaffCompactable, DaffLazyComponent, DaffMutable, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };