@ux-aspects/ux-aspects/index.d.ts

Open source user interface framework for building modern, responsive, mobile big data applications

import { Observable, Subject, BehaviorSubject, ReplaySubject } from 'rxjs';
import * as i0 from '@angular/core';
import { OnInit, OnDestroy, EventEmitter, InjectionToken, ModuleWithProviders, ElementRef, Renderer2, AfterViewInit, QueryList, RendererFactory2, AfterContentInit, OnChanges, SimpleChanges, TemplateRef, ExistingProvider, ChangeDetectorRef, ViewContainerRef, PipeTransform, AfterViewChecked, DoCheck, StaticProvider, TrackByFunction } from '@angular/core';
import * as i1 from '@angular/cdk/a11y';
import { FocusOrigin, FocusMonitor, FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';
import * as i3 from '@angular/cdk/platform';
import * as i6 from 'angular-split';
import { SplitAreaComponent } from 'angular-split';
import * as i2 from '@angular/common';
import { WeekDay } from '@angular/common';
import * as i3$1 from '@angular/router';
import { NavigationExtras } from '@angular/router';
import * as i3$2 from '@angular/forms';
import { ControlValueAccessor, NgModel, FormGroupDirective, Validator, ValidationErrors } from '@angular/forms';
import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
import * as i2$1 from '@angular/cdk/overlay';
import { Overlay, ScrollDispatcher, OverlayRef } from '@angular/cdk/overlay';
import * as i3$3 from '@angular/cdk/observers';
import { ComponentPortal, DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import * as i2$2 from '@angular/cdk/drag-drop';
import { CdkDragHandle, CdkDrag, CdkDropList, CdkDragEnter } from '@angular/cdk/drag-drop';
import { ViewportRuler } from '@angular/cdk/scrolling';
import { SafeHtml } from '@angular/platform-browser';
import * as _ux_aspects_ux_aspects from '@ux-aspects/ux-aspects';
import { HierarchyPointNode, HierarchyRectangularNode } from 'd3';
import { ArrayDataSource } from '@angular/cdk/collections';
import * as i3$4 from '@angular/cdk/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { AnimationEvent } from '@angular/animations';
import { Chart } from 'chart.js';

declare enum Color {
    Primary = "primary",
    Accent = "accent",
    Secondary = "secondary",
    Alternate1 = "alternate1",
    Alternate2 = "alternate2",
    Alternate3 = "alternate3",
    Vibrant1 = "vibrant1",
    Vibrant2 = "vibrant2",
    Grey1 = "grey1",
    Grey2 = "grey2",
    Grey3 = "grey3",
    Grey4 = "grey4",
    Grey5 = "grey5",
    Grey6 = "grey6",
    Grey7 = "grey7",
    Grey8 = "grey8",
    Chart1 = "chart1",
    Chart2 = "chart2",
    Chart3 = "chart3",
    Chart4 = "chart4",
    Chart5 = "chart5",
    Chart6 = "chart6",
    Ok = "ok",
    Warning = "warning",
    Critical = "critical",
    Partition1 = "partition1",
    Partition9 = "partition9",
    Partition10 = "partition10",
    Partition11 = "partition11",
    Partition12 = "partition12",
    Partition13 = "partition13",
    Partition14 = "partition14",
    SocialChartNode = "social-chart-node",
    SocialChartEdge = "social-chart-edge"
}

/**
 * Determine the type of icon based upon the identifier.
 *
 * We support the following iconset:
 *
 * - `ux-icon` - UX Icon Set
 * - `component` - Component icon not tied to a specific set
 *
 * @param identifier - The name of the icon
 */
declare function getIconType(identifier: string | null): IconType;
declare enum IconType {
    UxIcon = "ux-icon",
    Component = "component"
}

/**
 * This is a simple RxJS operator to allow us to avoid the
 * "expression has changed after it was checked issue"
 * by making the subscription asynchronous. We could just use a
 * delay operator but this uses a timeout which is significantly
 * slower than using requestAnimationFrame.
 */
declare const tick: <T>() => (source: Observable<T>) => Observable<T>;

type AnchorAlignment = 'start' | 'center' | 'end';

type AnchorPlacement = 'top' | 'right' | 'bottom' | 'left';

/**
 * A button will trigger a click event whenever the a mouse click occurs or the enter key is pressed.
 * These functions can be used to identify if a `click` event was caused by the keyboard or
 * by a mouse.
 *
 * The `event.detail` property will change based on the source of the event.
 * A mouse click will have varying values based on the browser, however
 * the enter key will always have a value of `0` so we can check against that
 */
declare function isKeyboardTrigger(event: MouseEvent | KeyboardEvent): boolean;
declare function isMouseTrigger(event: MouseEvent | KeyboardEvent): boolean;

declare class AccordionPanelHeadingDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionPanelHeadingDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<AccordionPanelHeadingDirective, "ux-accordion-panel-header", never, {}, {}, never, never, true, never>;
}

declare class AccordionService {
    collapseOthers: boolean;
    collapse: Subject<void>;
    collapseAll(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AccordionService>;
}

declare class AccordionPanelComponent implements OnInit, OnDestroy {
    readonly accordion: AccordionService;
    panelId: string;
    headingId: string;
    disabled: boolean;
    heading: string;
    expanded: boolean;
    expandedChange: EventEmitter<boolean>;
    private readonly _onDestroy;
    ngOnInit(): void;
    ngOnDestroy(): void;
    toggle(): void;
    expand(): void;
    collapse(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionPanelComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionPanelComponent, "ux-accordion-panel", never, { "panelId": { "alias": "panelId"; "required": false; }; "headingId": { "alias": "headingId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "expandedChange": "expandedChange"; }, never, ["ux-accordion-panel-header", "*"], true, never>;
}

declare class AccordionComponent {
    private readonly _accordion;
    set collapseOthers(collapseOthers: boolean);
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ux-accordion", never, { "collapseOthers": { "alias": "collapseOthers"; "required": false; }; }, {}, never, ["*"], true, never>;
}

interface AccessibilityOptions {
    /** Indicate whether or not mouse events should cause the focus indicator to appear */
    mouseFocusIndicator?: boolean;
    /** Indicate whether or not touch events should cause the focus indicator to appear */
    touchFocusIndicator?: boolean;
    /** Indicate whether or not keyboard events should cause the focus indicator to appear */
    keyboardFocusIndicator?: boolean;
    /** Indicate whether or not programmatic events should cause the focus indicator to appear */
    programmaticFocusIndicator?: boolean;
}

declare const colorSets: {
    keppel: {
        colorValueSet: {
            primary: string;
            accent: string;
            secondary: string;
            alternate1: string;
            alternate2: string;
            alternate3: string;
            vibrant1: string;
            vibrant2: string;
            grey1: string;
            grey2: string;
            grey3: string;
            grey4: string;
            grey5: string;
            grey6: string;
            grey7: string;
            grey8: string;
            chart1: string;
            chart2: string;
            chart3: string;
            chart4: string;
            chart5: string;
            chart6: string;
            ok: string;
            warning: string;
            critical: string;
            partition1: string;
            partition9: string;
            partition10: string;
            partition11: string;
            partition12: string;
            partition13: string;
            partition14: string;
            'social-chart-node': string;
            'social-chart-edge': string;
        };
    };
    microFocus: {
        colorValueSet: {
            'brand-blue': string;
            cerulean: string;
            aqua: string;
            aquamarine: string;
            fuchsia: string;
            indigo: string;
            'dark-blue': string;
            white: string;
            'slightly-gray': string;
            'bright-gray': string;
            gray: string;
            silver: string;
            'dim-gray': string;
            'dark-gray': string;
            black: string;
            'crimson-negative': string;
            apricot: string;
            yellow: string;
            'green-positive': string;
            ultramarine: string;
            skyblue: string;
            'pale-aqua': string;
            'pale-green': string;
            lime: string;
            orange: string;
            magenta: string;
            'pale-purple': string;
            'dark-ultramarine': string;
            steelblue: string;
            'arctic-blue': string;
            emerald: string;
            olive: string;
            goldenrod: string;
            purple: string;
            'pale-eggplant': string;
            red: string;
            'pale-amber': string;
            'pale-lemon': string;
            'pale-emerald': string;
            plum: string;
            copper: string;
            amber: string;
            'leaf-green': string;
            'forest-green': string;
            primary: string;
            accent: string;
            secondary: string;
            alternate1: string;
            alternate2: string;
            alternate3: string;
            vibrant1: string;
            vibrant2: string;
            grey1: string;
            grey2: string;
            grey3: string;
            grey4: string;
            grey5: string;
            grey6: string;
            grey7: string;
            grey8: string;
            chart1: string;
            chart2: string;
            chart3: string;
            chart4: string;
            chart5: string;
            chart6: string;
            info: string;
            ok: string;
            warning: string;
            danger: string;
            critical: string;
            partition1: string;
            partition9: string;
            partition10: string;
            partition11: string;
            partition12: string;
            partition13: string;
            partition14: string;
            'social-chart-node': string;
            'social-chart-edge': string;
        };
    };
};
type ColorSet = {
    colorValueSet: {
        [key: string]: string;
    };
};
/** Provide a default color set for an application */
declare const COLOR_SET_TOKEN: InjectionToken<ColorSet>;

declare class ColorServiceModule {
    /**
     * The function allows the consuming applications to specify the applications
     * color set once in the app module, eg:
     * ```
     * ColorServiceModule.forRoot(colorSets.microFocus);
     * ```
     * @param colorSet The color set the application should use
     */
    static forRoot(colorSet: ColorSet): ModuleWithProviders<ColorServiceModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorServiceModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorServiceModule, never, never, never>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ColorServiceModule>;
}

declare class AccessibilityOptionsService {
    /** Get the user specified options - but handle cases where they may not be specified */
    readonly _options: AccessibilityOptions;
    /** Determine the default options */
    private readonly _defaultOptions;
    /** Get the complete options populating unspecified options with the default values */
    get options(): AccessibilityOptions;
    static ɵfac: i0.ɵɵFactoryDeclaration<AccessibilityOptionsService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<AccessibilityOptionsService>;
}

declare class LocalFocusIndicatorOptions implements AccessibilityOptions {
    mouseFocusIndicator: boolean;
    touchFocusIndicator: boolean;
    keyboardFocusIndicator: boolean;
    programmaticFocusIndicator: boolean;
}

declare class FocusIndicatorDirective implements OnInit, OnDestroy {
    readonly optionsService: AccessibilityOptionsService;
    private readonly _elementRef;
    private readonly _focusIndicatorService;
    private readonly _ngZone;
    readonly localOptions: LocalFocusIndicatorOptions;
    /** Specify whether or not we should mark this element as having focus if a child is focused */
    set checkChildren(checkChildren: boolean | string);
    /** Indicate whether or not mouse events should cause the focus indicator to appear - will override any global setting */
    set mouseFocusIndicator(mouseFocusIndicator: boolean | string);
    /** Indicate whether or not touch events should cause the focus indicator to appear - will override any global setting */
    set touchFocusIndicator(touchFocusIndicator: boolean | string);
    /** Indicate whether or not keyboard events should cause the focus indicator to appear - will override any global setting */
    set keyboardFocusIndicator(keyboardFocusIndicator: boolean | string);
    /** Indicate whether or not programmatic events should cause the focus indicator to appear - will override any global setting */
    set programmaticFocusIndicator(programmaticFocusIndicator: boolean | string);
    /** Emit the latest focus state */
    indicator: EventEmitter<boolean>;
    /** Store a private reference for the checkChildren option */
    private _checkChildren;
    /** Store all configuation options*/
    private readonly _options;
    /** Store a reference to the focus handler */
    private _focusIndicator;
    /** Unsubscribe on component destroy */
    private readonly _onDestroy;
    constructor();
    /** Setup the focus monitoring */
    ngOnInit(): void;
    /** Tear down the directive */
    ngOnDestroy(): void;
    /** Focus this element with a specific origin */
    focus(origin?: FocusOrigin, options?: {
        preventScroll: boolean;
    }): void;
    /** Update the focus indicator with the latest options */
    private setOptions;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FocusIndicatorDirective, "[uxFocusIndicator]", ["ux-focus-indicator"], { "checkChildren": { "alias": "checkChildren"; "required": false; }; "mouseFocusIndicator": { "alias": "mouseFocusIndicator"; "required": false; }; "touchFocusIndicator": { "alias": "touchFocusIndicator"; "required": false; }; "keyboardFocusIndicator": { "alias": "keyboardFocusIndicator"; "required": false; }; "programmaticFocusIndicator": { "alias": "programmaticFocusIndicator"; "required": false; }; }, { "indicator": "indicator"; }, never, never, true, never>;
}

/**
 * This directive can be used to target specific elements based on their CSS
 * class so we can control when the focus shows. This will help prevent us
 * polluting the FocusIndicatorDirective with an lot of selectors.
 *
 * If the button has a uxFocusIndicator, uxMenuTriggerFor or uxMenuNavigationToggle directive applied we should skip this
 */
declare class DefaultFocusIndicatorDirective extends FocusIndicatorDirective {
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultFocusIndicatorDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DefaultFocusIndicatorDirective, ".btn:not([uxFocusIndicator]):not([uxMenuNavigationToggle]):not([uxMenuTriggerFor]), a[href]:not([uxFocusIndicator]):not([uxMenuNavigationToggle]):not([uxMenuTriggerFor])", never, {}, {}, never, never, true, never>;
}

declare class FocusIndicatorOptionsDirective implements AccessibilityOptions {
    private readonly _options;
    /** If `true`, this element will receive a focus indicator when the element is clicked on. */
    set mouseFocusIndicator(mouseFocusIndicator: boolean);
    /** If `true`, this element will receive a focus indicator when the element is touched. */
    set touchFocusIndicator(touchFocusIndicator: boolean);
    /** If `true`, this element will receive a focus indicator when the element is focused using the keyboard. */
    set keyboardFocusIndicator(keyboardFocusIndicator: boolean);
    /** If `true`, this element will receive a focus indicator when the element is programmatically focused. */
    set programmaticFocusIndicator(programmaticFocusIndicator: boolean);
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorOptionsDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FocusIndicatorOptionsDirective, "[uxFocusIndicatorOptions]", never, { "mouseFocusIndicator": { "alias": "mouseFocusIndicator"; "required": false; }; "touchFocusIndicator": { "alias": "touchFocusIndicator"; "required": false; }; "keyboardFocusIndicator": { "alias": "keyboardFocusIndicator"; "required": false; }; "programmaticFocusIndicator": { "alias": "programmaticFocusIndicator"; "required": false; }; }, {}, never, never, true, never>;
}

declare class FocusIndicatorOriginService {
    /** Store the most recent origin event */
    private _origin;
    /** Store the event source origin */
    setOrigin(origin: FocusOrigin): void;
    /** Get the most recent event origin */
    getOrigin(): FocusOrigin | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorOriginService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<FocusIndicatorOriginService>;
}

declare class FocusIndicatorOriginDirective implements OnDestroy {
    readonly focusOriginService: FocusIndicatorOriginService;
    readonly elementRef: ElementRef<any>;
    readonly renderer: Renderer2;
    /** Store the instance of the focus indicator origin */
    private readonly _focusOrigin;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorOriginDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FocusIndicatorOriginDirective, "[uxFocusIndicatorOrigin]", never, {}, {}, never, never, true, never>;
}

declare class FocusWithinDirective implements OnDestroy {
    private readonly _elementRef;
    /** Emits when a child element gains focus */
    uxFocusWithin: EventEmitter<void>;
    /** Emits when a child element loses focus */
    uxBlurWithin: EventEmitter<void>;
    /**
     * Note: We used to use @angular/cdk FocusMonitor here instead of manually listening
     * to focus blur events, however this was problematic as any child elements using the FocusMonitor,
     * eg: `uxFocusIndicator` which not get the correct `origin`, they will instead get a programmatic
     * origin even if it was clicked or focused via the keyboard.
     */
    constructor();
    ngOnDestroy(): void;
    private onFocus;
    private onBlur;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusWithinDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FocusWithinDirective, "[uxFocusWithin],[uxBlurWithin]", never, {}, { "uxFocusWithin": "uxFocusWithin"; "uxBlurWithin": "uxBlurWithin"; }, never, never, true, never>;
}

declare class ManagedFocusContainerDirective implements OnInit, OnDestroy {
    private readonly _elementRef;
    private readonly _managedFocusContainerService;
    ngOnInit(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ManagedFocusContainerDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ManagedFocusContainerDirective, "[uxManagedFocusContainer]", never, {}, {}, never, never, true, never>;
}

declare class SplitterAccessibilityDirective implements OnInit, AfterViewInit, OnDestroy {
    private readonly _elementRef;
    private readonly _renderer;
    private readonly _splitter;
    private readonly _focusIndicatorService;
    private readonly _platform;
    /** Emit an event whenever the gutter is moved using the keyboard */
    gutterKeydown: EventEmitter<KeyboardEvent>;
    /** Find all the split areas */
    areas: QueryList<SplitAreaComponent>;
    /** Store all the gutter elements */
    private _gutters;
    /** Watch for gutters being added or removed */
    private _observer;
    /** Teardown our observables on destroy */
    private readonly _onDestroy;
    /** Store references to all focus indicators */
    private _focusIndicators;
    ngOnInit(): void;
    /** Once initialised make the gutters accessible */
    ngAfterViewInit(): void;
    /** Destroy all observables and observers */
    ngOnDestroy(): void;
    /** We should focus the gutter when it is clicked */
    onClick(event: MouseEvent): void;
    /** Find all the gutters and set their attributes */
    private onGutterChange;
    /** Get all the gutter elements */
    private getGutters;
    /** Set the appropriate attributes on the gutter elements */
    private setGutterAttributes;
    /** Apply the aria attribute values */
    private updateGutterAttributes;
    /** Apply the value now aria attribute */
    private setGutterValueNow;
    /** Apply the value min aria attribute */
    private setGutterValueMin;
    /** Apply the value max aria attribute */
    private setGutterValueMax;
    onKeydown(event: KeyboardEvent): void;
    onIncreaseKey(event: KeyboardEvent): void;
    onDecreaseKey(event: KeyboardEvent): void;
    onHomeKey(event: KeyboardEvent): void;
    onEndKey(event: KeyboardEvent): void;
    /** Determine if an element is a gutter */
    private isSplitterGutter;
    /** Update the gutter position */
    private setGutterPosition;
    /** Get the split areas associated with a given gutter */
    private getAreasFromGutter;
    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterAccessibilityDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SplitterAccessibilityDirective, "as-split", never, {}, { "gutterKeydown": "gutterKeydown"; }, ["areas"], never, true, never>;
}

interface FocusIndicatorOptions extends AccessibilityOptions {
    checkChildren: boolean;
}

declare class FocusIndicator {
    private readonly _element;
    private readonly _focusMonitor;
    private readonly _renderer;
    private _options;
    private readonly _focusIndicatorOrigin;
    /** Apply a class when the item is focused */
    set isFocused(isFocused: boolean);
    /** Provide a convenience getter to allow access to focus state without a subscription */
    get isFocused(): boolean;
    /** An observable to monitor the focus state */
    readonly isFocused$: BehaviorSubject<boolean>;
    /** An observable to monitor the focus origin */
    readonly origin$: Subject<FocusOrigin>;
    /** Remove all subscriptions on destroy */
    private readonly _onDestroy;
    constructor(_element: HTMLElement, _focusMonitor: FocusMonitor, _renderer: Renderer2, _options: FocusIndicatorOptions, _focusIndicatorOrigin: FocusIndicatorOriginService);
    /** Setup the focus monitoring */
    private initialise;
    /** Focus the element with a specific origin */
    focus(origin?: FocusOrigin, options?: {
        preventScroll?: boolean;
    }): void;
    /** Tear down the subscriptions */
    destroy(): void;
    /** Allow the options to be updates */
    setOptions(options: FocusIndicatorOptions): void;
    /** Monitor changes to an elements focus state */
    private onFocusChange;
}

declare class FocusIndicatorService {
    private readonly _localOptions;
    readonly rendererFactory: RendererFactory2;
    private readonly _focusMonitor;
    private readonly _globalOptions;
    private readonly _focusIndicatorOrigin;
    /** We need the renderer to add and remove classes */
    private readonly _renderer;
    constructor();
    /** This is essentially just a factory method to prevent the user having to pass in focus monitor, renderer and global options each time */
    monitor(element: HTMLElement, options?: FocusIndicatorOptions): FocusIndicator;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusIndicatorService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<FocusIndicatorService>;
}

declare class TabbableListItemDirective implements FocusableOption, OnDestroy {
    /** Access the service to programmatically control focus indicators */
    readonly focusIndicatorService: FocusIndicatorService;
    /** Access the tabbable list service */
    private readonly _tabbableList;
    /** Access the tabbable item element */
    private readonly _elementRef;
    /** Access the service responsible for handling focus in child elements */
    private readonly _managedFocusContainerService;
    /** Access the service which can provide us with browser identification */
    private readonly _platform;
    /** Access the change detector to ensure tabindex gets updated as expects */
    private readonly _changeDetector;
    /** Access the focus origin if one is provided */
    private readonly _focusOriginService;
    /** Access the renderer to make manual dom manipulations */
    private readonly _renderer;
    /** Indicate the parent tabbable list item if one is present. */
    parent: TabbableListItemDirective;
    rank: number;
    /** Indicate if this item is disabled */
    disabled: boolean;
    /** Indicate if the item is expanded if used as a hierarchical item. */
    expanded: boolean;
    /** Provide a unique key to help identify items when used in a virtual list */
    set key(key: any);
    get key(): any;
    /** Emit when the expanded state changes. */
    expandedChange: EventEmitter<boolean>;
    /** Emit when the element receives focus via the tabbable list. */
    activated: EventEmitter<FocusOrigin>;
    get tabindex(): number;
    /** Give each tabbable item a unique id */
    id: number;
    /** Each item in the list needs to be initialised by the service. When the item QueryList changes this is used to identify which items previously existed and which are new */
    initialized: boolean;
    /** Store a list of all child tabbable items */
    children: TabbableListItemDirective[];
    /** Emit whenever the expanded state changes */
    keyboardExpanded$: Subject<boolean>;
    /** Automatically unsubscribe from all observables */
    private readonly _onDestroy;
    /** Store a reference to the focus indicator instance */
    private readonly _focusIndicator;
    /** Store the current key - it may change in a ngFor/uxVirtualFor if the cell is reused. */
    private _key;
    /** Store a default key to use if one is not provided */
    private readonly _defaultKey;
    /** Determine if this element has a focus indicator visible */
    private _focusOrigin;
    constructor();
    onInit(): void;
    ngOnDestroy(): void;
    focus(): void;
    onFocus(): void;
    onBlur(): void;
    onKeydown(event: KeyboardEvent): void;
    getFocused(): boolean;
    /** We can programmatically focus an element but may want a different origin than 'programmatic' */
    focusWithOrigin(origin: FocusOrigin, preventScroll?: boolean): void;
    private isTabbable;
    private setTabIndex;
    static ɵfac: i0.ɵɵFactoryDeclaration<TabbableListItemDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TabbableListItemDirective, "[uxTabbableListItem]", ["ux-tabbable-list-item"], { "parent": { "alias": "parent"; "required": false; }; "rank": { "alias": "rank"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "key": { "alias": "key"; "required": false; }; }, { "expandedChange": "expandedChange"; "activated": "activated"; }, never, never, true, never>;
}

declare class TabbableListDirective implements AfterContentInit, OnDestroy {
    /** Access the tabbable list service */
    private readonly _tabbableList;
    /** Access the native dom element */
    readonly elementRef: ElementRef<any>;
    /** Determine whether the up/down arrows should be used or the left/right arrows */
    direction: 'horizontal' | 'vertical';
    /** Indicate whether or not focus should loop back to the first element after the last */
    wrap: boolean;
    /** Indicate whether or not the first item should receive focus on show - useful for modals and popovers */
    focusOnShow: boolean;
    /** Indicate whether or not focus should be returned to the previous element (only applicable when using focusOnShow) */
    returnFocus: boolean;
    /** Enabling handling of hierarchical lists via use of the `TabbableListItemDirective.parent` property. */
    set hierarchy(value: boolean);
    /** Prevent keyboard interaction when alt modifier key is pressed */
    set allowAltModifier(value: boolean);
    /** Prevent keyboard interaction when ctrl modifier key is pressed */
    set allowCtrlModifier(value: boolean);
    /** Focus the first or last item when Home or End keys are pressed */
    set allowBoundaryKeys(value: boolean);
    /** Find all tabbable list items */
    items: QueryList<TabbableListItemDirective>;
    /** Store the currently focused HTML element */
    private _focusedElement;
    /** Store the items in a specific order */
    private _orderedItems;
    /** Unsubscribe from all observables automatically on destroy */
    private readonly _onDestroy;
    get focusKeyManager(): FocusKeyManager<TabbableListItemDirective>;
    constructor();
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    setFirstItemTabbable(): void;
    focus(): void;
    focusTabbableItem(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TabbableListDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TabbableListDirective, "[uxTabbableList]", ["ux-tabbable-list"], { "direction": { "alias": "direction"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "focusOnShow": { "alias": "focusOnShow"; "required": false; }; "returnFocus": { "alias": "returnFocus"; "required": false; }; "hierarchy": { "alias": "hierarchy"; "required": false; }; "allowAltModifier": { "alias": "allowAltModifier"; "required": false; }; "allowCtrlModifier": { "alias": "allowCtrlModifier"; "required": false; }; "allowBoundaryKeys": { "alias": "allowBoundaryKeys"; "required": false; }; }, {}, ["items"], never, true, never>;
}

declare class ColorContrastDirective {
    private readonly _colorService;
    private readonly _contrastService;
    /**
     * Define the background color for contrast comparison.
     * This can be a CSS color value or the name of a
     * color from the color palette.
     */
    set uxColorContrast(backgroundColor: string);
    /**
     * Define the light color for contrast comparison.
     * This can be a CSS color value or the name of a
     * color from the color palette.
     */
    set lightColor(lightColor: string);
    /**
     * Define the dark color for contrast comparison.
     * This can be a CSS color value or the name of a
     * color from the color palette.
     */
    set darkColor(darkColor: string);
    /** Determine the color to set based on the supplied parameters */
    get _color(): string | null;
    /** Store the background color as a ThemeColor object */
    private _backgroundColor;
    /** Store the light color as a ThemeColor object */
    private _lightColor;
    /** Store the light color as a ThemeColor object */
    private _darkColor;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorContrastDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorContrastDirective, "[uxColorContrast]", never, { "uxColorContrast": { "alias": "uxColorContrast"; "required": false; }; "lightColor": { "alias": "lightColor"; "required": false; }; "darkColor": { "alias": "darkColor"; "required": false; }; }, {}, never, never, true, never>;
}

declare class AccessibilityModule {
    static forRoot(options: AccessibilityOptions): ModuleWithProviders<AccessibilityModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<AccessibilityModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<AccessibilityModule, never, [typeof i1.A11yModule, typeof ColorServiceModule, typeof i3.PlatformModule, typeof DefaultFocusIndicatorDirective, typeof FocusIndicatorDirective, typeof FocusIndicatorOptionsDirective, typeof FocusIndicatorOriginDirective, typeof FocusWithinDirective, typeof ManagedFocusContainerDirective, typeof SplitterAccessibilityDirective, typeof TabbableListDirective, typeof TabbableListItemDirective, typeof FocusIndicatorOriginDirective, typeof ColorContrastDirective], [typeof DefaultFocusIndicatorDirective, typeof FocusIndicatorDirective, typeof FocusIndicatorOptionsDirective, typeof FocusIndicatorOriginDirective, typeof FocusWithinDirective, typeof ManagedFocusContainerDirective, typeof SplitterAccessibilityDirective, typeof TabbableListDirective, typeof TabbableListItemDirective, typeof FocusIndicatorOriginDirective, typeof ColorContrastDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<AccessibilityModule>;
}

declare class AccordionModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<AccordionModule, never, [typeof AccessibilityModule, typeof i2.CommonModule, typeof AccordionComponent, typeof AccordionPanelComponent, typeof AccordionPanelHeadingDirective], [typeof AccordionComponent, typeof AccordionPanelComponent, typeof AccordionPanelHeadingDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<AccordionModule>;
}

declare class AlertIconDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<AlertIconDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<AlertIconDirective, "[uxAlertIcon]", never, {}, {}, never, never, true, never>;
}

declare class AlertComponent {
    private readonly colorService;
    /** Determine the style of the alert */
    type: AlertType;
    /** Determine the the alert can be dismissed */
    dismissible: boolean;
    /** Define a custom background color */
    backgroundColor: string;
    /** Define a custom foreground color */
    foregroundColor: string;
    /** Define a custom aria label for the dismiss button */
    dismissAriaLabel: string;
    /** Emit when the dismiss button is pressed */
    dismiss: EventEmitter<void>;
    /** Identify if we have an icon */
    icon: AlertIconDirective;
    /** Resolve the background color from the color set */
    get _backgroundColor(): string;
    /** Resolve the foreground color from the color set */
    get _foregroundColor(): string;
    /** Determine if we are using a prefined type or custom colors */
    get _isCustomColor(): boolean;
    private getColor;
    static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ux-alert", never, { "type": { "alias": "type"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "foregroundColor": { "alias": "foregroundColor"; "required": false; }; "dismissAriaLabel": { "alias": "dismissAriaLabel"; "required": false; }; }, { "dismiss": "dismiss"; }, ["icon"], ["[uxAlertIcon]", "*"], true, never>;
}
type AlertType = 'info' | 'error' | 'warning' | 'success' | 'dark';

interface IconDefinition {
    name: string;
    iconset: string;
    icon: string;
    size?: string | string[];
}
/**
 * This is an internal interface that ensures size is a string
 * and not an array as internally we will store an individual record
 * for each size but we allow the user to pass us definitions with an
 * array for convenience.
 */
interface SingleIconDefinition extends IconDefinition {
    size?: string;
}

interface IconModuleOptions {
    /**
     * Define the default iconset or additional custom icons
     */
    icons?: ReadonlyArray<IconDefinition>;
}

declare class IconComponent implements OnChanges, AfterViewInit, OnDestroy {
    private readonly _elementRef;
    private readonly _renderer;
    private readonly _iconService;
    /** Define the icon to display */
    name: string;
    /** Define a custom size for the icon */
    size: string;
    /** The number of degrees to rotate the icon */
    set rotate(rotation: IconRotation | number);
    get rotate(): IconRotation | number;
    /** Define if the icon should be horizontally flipped */
    set flipHorizontal(flipHorizontal: boolean);
    get flipHorizontal(): boolean;
    /** Define if the icon should be horizontally flipped */
    set flipVertical(flipVertical: boolean);
    get flipVertical(): boolean;
    /** Store the matching icon definition */
    _icon: IconDefinition;
    /** Store the numeric value of rotation */
    private _rotate;
    /** Store the boolean value of flip vertical */
    private _flipVertical;
    /** Store the boolean value of flip horizontal */
    private _flipHorizontal;
    /** Automatically unsubscribe from observables */
    private readonly _onDestroy;
    /** When inputs change ensure we have the best icon definition */
    ngOnChanges(changes: SimpleChanges): void;
    /** Watch for changes to the iconset */
    ngAfterViewInit(): void;
    /** Cleanup on component destroy */
    ngOnDestroy(): void;
    /** get the icon definition based on the name and size specified */
    updateIcon(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ux-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "flipHorizontal": { "alias": "flipHorizontal"; "required": false; }; "flipVertical": { "alias": "flipVertical"; "required": false; }; }, {}, never, never, true, never>;
}
type IconRotation = 90 | 180 | 270;

declare class IconModule {
    /** Allow configuration at AppModule level */
    static forRoot(options?: IconModuleOptions): ModuleWithProviders<IconModule>;
    /** Allow configuration at a child module level */
    static forChild(options?: IconModuleOptions): ModuleWithProviders<IconModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<IconModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<IconModule, never, [typeof IconComponent], [typeof IconComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<IconModule>;
}

declare class AlertModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<AlertModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<AlertModule, never, [typeof AccessibilityModule, typeof i2.CommonModule, typeof IconModule, typeof AlertComponent, typeof AlertIconDirective], [typeof AlertComponent, typeof AlertIconDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<AlertModule>;
}

declare class BreadcrumbsComponent {
    /** The list of breadcrumbs to display. */
    crumbs: ReadonlyArray<Breadcrumb>;
    clickCrumb(event: MouseEvent, crumb: Breadcrumb): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "ux-breadcrumbs", never, { "crumbs": { "alias": "crumbs"; "required": false; }; }, {}, never, never, true, never>;
}
interface Breadcrumb {
    title: string;
    routerLink?: string;
    fragment?: string;
    queryParams?: unknown;
    onClick?: (event: MouseEvent) => void;
}

declare class BreadcrumbsModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<BreadcrumbsModule, never, [typeof AccessibilityModule, typeof i2.CommonModule, typeof i3$1.RouterModule, typeof BreadcrumbsComponent], [typeof BreadcrumbsComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<BreadcrumbsModule>;
}

declare class ResizeService implements OnDestroy {
    private readonly _zone;
    private readonly _observer;
    private readonly _targets;
    ngOnDestroy(): void;
    addResizeListener(target: HTMLElement): ReplaySubject<ResizeDimensions>;
    removeResizeListener(target: HTMLElement): void;
    private elementDidResize;
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ResizeService>;
}
interface ResizeDimensions {
    width: number;
    height: number;
}

declare class ResizeDirective implements OnInit, OnDestroy {
    private readonly _elementRef;
    private readonly _resizeService;
    private readonly _ngZone;
    /** Debounce the resize event emitter */
    throttle: number;
    /** Emits whenever a resize event occurs */
    uxResize: EventEmitter<ResizeDimensions>;
    /** Remove all subscriptions on component destroy */
    private readonly _onDestroy;
    ngOnInit(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeDirective, "[uxResize]", never, { "throttle": { "alias": "throttle"; "required": false; }; }, { "uxResize": "uxResize"; }, never, never, true, never>;
}

declare class ResizeModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ResizeModule, never, [typeof ResizeDirective], [typeof ResizeDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ResizeModule>;
}

declare class CardTabComponent implements OnDestroy {
    private readonly _tabService;
    active$: Observable<boolean>;
    content: TemplateRef<void>;
    constructor();
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<CardTabComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CardTabComponent, "ux-card-tab", never, {}, {}, ["content"], ["*"], true, never>;
}

declare class CardTabsService implements OnDestroy {
    tab$: BehaviorSubject<CardTabComponent>;
    tabs$: BehaviorSubject<CardTabComponent[]>;
    position$: BehaviorSubject<string>;
    private readonly _subscription;
    constructor();
    ngOnDestroy(): void;
    /**
     * Add a tab to the list of tabs
     */
    addTab(tab: CardTabComponent): void;
    /**
     * Remove a tab from the list
     */
    removeTab(tab: CardTabComponent): void;
    /**
     * Select the tab
     */
    select(tab: CardTabComponent): void;
    /**
     * Set the position of the tab content
     */
    setPosition(position: string): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<CardTabsService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<CardTabsService>;
}

declare class CardTabsetComponent {
    tabService: CardTabsService;
    set position(direction: string);
    get position(): string;
    tablist: ElementRef;
    offset: number;
    bounds: CardTabsBounds;
    private _width;
    private _innerWidth;
    select(tab: CardTabComponent, element: HTMLElement): void;
    resize(dimensions: ResizeDimensions): void;
    previous(): void;
    next(): void;
    private moveIntoView;
    static ɵfac: i0.ɵɵFactoryDeclaration<CardTabsetComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CardTabsetComponent, "ux-card-tabset", never, { "position": { "alias": "position"; "required": false; }; }, {}, never, ["*"], true, never>;
}
interface CardTabsBounds {
    lower: number;
    upper: number;
}

declare class CardTabContentDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<CardTabContentDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<CardTabContentDirective, "[uxCardTabContent]", never, {}, {}, never, never, true, never>;
}

declare class CardTabsModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<CardTabsModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<CardTabsModule, never, [typeof i2.CommonModule, typeof ResizeModule, typeof IconModule, typeof CardTabsetComponent, typeof CardTabComponent, typeof CardTabContentDirective], [typeof CardTabsetComponent, typeof CardTabComponent, typeof CardTabContentDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<CardTabsModule>;
}

interface FocusableControl extends FocusableOption {
    setInputTabIndex(tabindex: number): void;
}

declare const CHECKBOX_VALUE_ACCESSOR: ExistingProvider;
declare class CheckboxComponent<T = number> implements ControlValueAccessor, FocusableControl {
    private readonly _changeDetector;
    /** Provide a default unique id value for the checkbox */
    _checkboxId: string;
    /** Determines if the checkbox should be checked, unchecked or indeterminate. */
    id: string;
    /** Specifies the form name of the element. */
    name: string | null;
    /** Determines if the checkbox should be checked, unchecked or indeterminate. */
    value: boolean | T;
    /** Specified if this is a required input. */
    required: boolean;
    /** Specifies the tabindex of the input. */
    tabindex: number;
    /** If set to `true` the checkbox will not toggle state when clicked. */
    clickable: boolean;
    /** If set to `true` the checkbox will be displayed without a border and background. */
    simplified: boolean;
    /**
     * If `value` is set to the indeterminate value specified using this attribute, it will neither
     * display the checkbox as checked or unchecked, and will instead show the indeterminate variation.
     */
    indeterminateValue: T | number;
    /** Specify if the checkbox should be disabled. */
    disabled: boolean;
    /** Provide an aria label for the checkbox. */
    ariaLabel: string;
    /** Provide an aria-labelled by property for the checkbox. */
    ariaLabelledby: string;
    /** Emits when `value` has been changed. */
    valueChange: EventEmitter<boolean | T>;
    /** Determine if the underlying input component has been focused with the keyboard */
    _focused: boolean;
    /** Used to inform Angular forms that the component has been touched */
    onTouchedCallback: () => void;
    /** Used to inform Angular forms that the component value has changed */
    onChangeCallback: (_: boolean | T) => void;
    /** Get the focus indicator to set focus */
    _focusIndicator?: FocusIndicatorDirective;
    /** Toggle the current state of the checkbox */
    toggle(): void;
    writeValue(value: boolean | T): void;
    /** Allow Angular forms for provide us with a callback for when the input value changes */
    registerOnChange(fn: (_: boolean | T) => void): void;
    /** Allow Angular forms for provide us with a callback for when the touched state changes */
    registerOnTouched(fn: () => void): void;
    /** Allow Angular forms to disable the component */
    setDisabledState(isDisabled: boolean): void;
    /** Focus the input element */
    focus(origin: FocusOrigin): void;
    setInputTabIndex(tabindex: number): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent<any>, "ux-checkbox", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "simplified": { "alias": "simplified"; "required": false; }; "indeterminateValue": { "alias": "indeterminateValue"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

declare class CheckboxModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<CheckboxModule, never, [typeof AccessibilityModule, typeof CheckboxComponent], [typeof CheckboxComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<CheckboxModule>;
}

type ColorPickerInputColors = ColorPickerColor | string;
type ColorPickerButtonStyle = 'square' | 'circle';
type ColorPickerButtonSize = 'sm' | 'md' | 'lg';
type ColorPickerInputMode = 'hex' | 'rgba';

/**
 * Type representing a color, including its descriptive name.
 */
declare class ColorPickerColor {
    /**
     * Human-readable name of the color.
     */
    name: string;
    /**
     * Hex value of the color, e.g. `#ffffff`.
     */
    get hex(): string;
    /**
     * RGBA value of the color, e.g. `rgba(255, 255, 255, 1)`.
     */
    get rgba(): string;
    get r(): number;
    get g(): number;
    get b(): number;
    get a(): number;
    private readonly _color;
    private readonly _originalHexValue;
    private readonly _originalRgbaValue;
    constructor(name: string, value: string, inputMode?: ColorPickerInputMode);
    toString(): string;
}

declare class ThemeColor {
    private _r;
    private _g;
    private _b;
    private _a;
    constructor(_r: string, _g: string, _b: string, _a?: string);
    /**
     * Create a ThemeColor object from a CSS color string
     * @param value The CSS color string to derive a ThemeColor object from
     */
    static parse(value: string): ThemeColor;
    /**
     * Clone a theme color so it can be modified without affecting other places using the color
     * @param themeColor The original theme color to clone
     */
    static from(themeColor: ThemeColor): ThemeColor;
    /**
     * Determine if an object is an instance of a theme color.
     * Using a simple instanceof check will not always work in plunker
     * where the ThemeColor is from @ux-aspects/ux-aspects and the color
     * comes from @micro-focus/ux-aspects
     */
    static isInstanceOf(themeColor: unknown): themeColor is ThemeColor;
    /**
     * Convert the theme color to a CSS hex color code
     */
    toHex(): string;
    /**
     * Convert the theme color to a CSS rgb color code
     */
    toRgb(): string;
    /**
     * Convert the theme color to a CSS rgbs color code
     */
    toRgba(): string;
    /**
     * Get the red value from the RGBA color value
     */
    getRed(): string;
    /**
     * Get the green value from the RGBA color value
     */
    getGreen(): string;
    /**
     * Get the blue value from the RGBA color value
     */
    getBlue(): string;
    /**
     * Get the alpha value from the RGBA color value
     */
    getAlpha(): string;
    /**
     * Set the red value from the RGBA color value
     */
    setRed(red: string): this;
    /**
     * Set the green value from the RGBA color value
     */
    setGreen(green: string): this;
    /**
     * Set the blue value from the RGBA color value