@bravura/ui 6.0.1 → 7.0.0

package/icon-font/index.d.ts

@@ -1,5 +1,81 @@
+import * as i0 from '@angular/core';
+import { OnChanges, SimpleChanges } from '@angular/core';
+import * as i3 from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
+import * as i2 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * Decode the FontAwesome icon font set name from the icon name
+ *
+ * `'far fa-alarm' => 'far'`
+ *
+ * `'home' => ''`
+ *
+ * `'fa-user' => 'fas'`
  */
-/// <amd-module name="@bravura/ui/icon-font" />
-export * from './public-api';
+declare function decodeFAIconFontSet(iconName: string): string;
+/**
+ * Decode the FontAwesome icon font name from the icon name
+ *
+ * `'far fa-alarm' => 'fa-alarm'`
+ *
+ * `'home' => ''`
+ *
+ * `'fa-user' => 'fa-user'`
+ */
+declare function decodeFAIconFontName(iconName: string): string;
+
+/**
+ * @ignore
+ */
+declare const BUI_ICON_MAT_VARIANTS: string[];
+/**
+ * Use this directive, together with `<mat-icon>`, to display an icon font character/symbol
+ * from Material or FontAwesome icons.
+ *
+ * To use the icon fonts, add the following statements to one of your global SCSS files:
+ *
+ * ```css
+ * @import url(https://fonts.googleapis.com/css2?family=Material+Icons);
+ * @import url(https://use.fontawesome.com/releases/v5.15.0/css/all.css);
+ * ```
+ *
+ * @example <mat-icon buiIcon="far fa-circle"></mat-icon> <!-- FontAwesome -->
+ * @example <mat-icon buiIcon="home" [size]="42"></mat-icon> <!-- Material -->
+ */
+declare class IconDirective implements OnChanges {
+    private _icon;
+    /**
+     * The icon name
+     *
+     * @example 'far fa-circle'
+     * @example 'home'
+     */
+    buiIcon: string;
+    /**
+     * Override the default icon size
+     *
+     * @default 24
+     */
+    size: number;
+    /**
+     * The style variant of Material Icons. It is not applicable for Font Awesome Icons or any other custom font icon sets.
+     * @default `filled`
+     */
+    variant: 'filled' | 'outlined' | 'round' | 'two-tone' | 'sharp';
+    constructor(_icon: MatIcon);
+    ngOnChanges(_: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IconDirective, "[buiIcon]", never, { "buiIcon": { "alias": "buiIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/**
+ * Module for utility functions and directives based on `mat-icon` and icon fonts.
+ */
+declare class IconFontModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconFontModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<IconFontModule, [typeof IconDirective], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i3.MatIconModule, typeof IconDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<IconFontModule>;
+}
+
+export { BUI_ICON_MAT_VARIANTS, IconDirective, IconFontModule, decodeFAIconFontName, decodeFAIconFontSet };

package/index.d.ts

@@ -1,5 +1,3 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@bravura/ui" />
-export * from './public-api';
+declare const NO_EXPORT = "NO_EXPORT";
+
+export { NO_EXPORT };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bravura/ui",
   "description": "Bravura UI Components for Angular applications",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "keywords": [
     "Angular",
     "Angular Material",
@@ -35,6 +35,10 @@
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/bravura-ui-alert.mjs"
     },
+    "./alert/testing": {
+      "types": "./alert/testing/index.d.ts",
+      "default": "./fesm2022/bravura-ui-alert-testing.mjs"
+    },
     "./behavior": {
       "types": "./behavior/index.d.ts",
       "default": "./fesm2022/bravura-ui-behavior.mjs"
@@ -47,22 +51,22 @@
       "types": "./common/index.d.ts",
       "default": "./fesm2022/bravura-ui-common.mjs"
     },
-    "./discrete-input": {
-      "types": "./discrete-input/index.d.ts",
-      "default": "./fesm2022/bravura-ui-discrete-input.mjs"
-    },
     "./currency-input": {
       "types": "./currency-input/index.d.ts",
       "default": "./fesm2022/bravura-ui-currency-input.mjs"
     },
-    "./file-upload": {
-      "types": "./file-upload/index.d.ts",
-      "default": "./fesm2022/bravura-ui-file-upload.mjs"
-    },
     "./decimal-input": {
       "types": "./decimal-input/index.d.ts",
       "default": "./fesm2022/bravura-ui-decimal-input.mjs"
     },
+    "./discrete-input": {
+      "types": "./discrete-input/index.d.ts",
+      "default": "./fesm2022/bravura-ui-discrete-input.mjs"
+    },
+    "./file-upload": {
+      "types": "./file-upload/index.d.ts",
+      "default": "./fesm2022/bravura-ui-file-upload.mjs"
+    },
     "./form-field": {
       "types": "./form-field/index.d.ts",
       "default": "./fesm2022/bravura-ui-form-field.mjs"
@@ -75,13 +79,17 @@
       "types": "./panel/index.d.ts",
       "default": "./fesm2022/bravura-ui-panel.mjs"
     },
+    "./phone-number": {
+      "types": "./phone-number/index.d.ts",
+      "default": "./fesm2022/bravura-ui-phone-number.mjs"
+    },
     "./radio-panel": {
       "types": "./radio-panel/index.d.ts",
       "default": "./fesm2022/bravura-ui-radio-panel.mjs"
     },
-    "./phone-number": {
-      "types": "./phone-number/index.d.ts",
-      "default": "./fesm2022/bravura-ui-phone-number.mjs"
+    "./radio-panel/testing": {
+      "types": "./radio-panel/testing/index.d.ts",
+      "default": "./fesm2022/bravura-ui-radio-panel-testing.mjs"
     },
     "./selection-panel": {
       "types": "./selection-panel/index.d.ts",
@@ -98,14 +106,6 @@
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/bravura-ui-tooltip.mjs"
-    },
-    "./alert/testing": {
-      "types": "./alert/testing/index.d.ts",
-      "default": "./fesm2022/bravura-ui-alert-testing.mjs"
-    },
-    "./radio-panel/testing": {
-      "types": "./radio-panel/testing/index.d.ts",
-      "default": "./fesm2022/bravura-ui-radio-panel-testing.mjs"
     }
   },
   "dependencies": {

package/panel/index.d.ts

@@ -1,5 +1,109 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import * as i4 from '@angular/common';
+import * as i5 from '@angular/material/card';
+import * as i6 from '@bravura/ui/behavior';
+
 /**
- * Generated bundle index. Do not edit.
+ * A "tinted" element has a shaded background specified by the `ThemePalette`, which
+ * is compatible with both light and dark themes.
  */
-/// <amd-module name="@bravura/ui/panel" />
-export * from './public-api';
+declare class TintedDirective implements OnInit, OnDestroy {
+    private _doc;
+    /**
+     *  The base color of the shaded background
+     * @default 'primary'
+     */
+    get color(): ThemePalette;
+    set color(c: ThemePalette);
+    private _color;
+    private readonly _addedStyle;
+    private readonly _attr;
+    private _element;
+    constructor(_doc: Document, elemRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private generateStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TintedDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TintedDirective, "[buiTinted], bui-panel", ["buiTinted"], { "color": { "alias": "buiTinted"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/**
+ * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
+ *
+ * Unlike `mat-card`, `bui-panel` has a flat appearance by default and a transparent background.
+ * The backdrop is nearly transparent, blending the theme palette `color`
+ * and the effective background color of the DOM ancestors.
+ *
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ *
+ */
+declare class PanelComponent implements OnInit {
+    private _cd;
+    private _tinted;
+    /**
+     * Additional style classes on the tinted backdrop element.
+     * @deprecated
+     * @ignore
+     */
+    backdropClass?: string;
+    /**
+     * Additional style classes on the `<mat-card>` element.
+     */
+    cardClass?: string;
+    /**
+     * This property defines the background (shaded) and border colors of the panel
+     */
+    get color(): ThemePalette;
+    set color(value: ThemePalette);
+    /**
+     * In contrast to using a `mat-card` alone, a `bui-panel` does not have a elevated appearance by default.
+     *
+     * This property can change the default appearance to
+     *
+     * * `raised` - the original `mat-card` default
+     * * `outline` - a `mat-card` with borders
+     * * `flat` - no border or elevation
+     */
+    get appearance(): 'outlined' | 'raised' | 'flat';
+    set appearance(value: 'outlined' | 'raised' | 'flat');
+    /**
+     * The width of the host element, at which the panel section container will change its orientation.
+     */
+    breakpoint: number;
+    /** @ignore */
+    _width: number;
+    private _color;
+    private _appearance;
+    constructor(_cd: ChangeDetectorRef, _tinted: TintedDirective);
+    ngOnInit(): void;
+    /** @ignore */
+    _resized(width: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, [null, { host: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "bui-panel", never, { "backdropClass": { "alias": "backdropClass"; "required": false; }; "cardClass": { "alias": "cardClass"; "required": false; }; "color": { "alias": "color"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+declare class PanelSectionComponent implements OnInit, OnDestroy {
+    private _elementRef;
+    private _parentElement;
+    constructor(_elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private _calcCount;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelSectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelSectionComponent, "bui-panel-section", never, {}, {}, never, ["*"], false, never>;
+}
+
+declare class PanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PanelModule, [typeof PanelComponent, typeof PanelSectionComponent, typeof TintedDirective], [typeof i4.CommonModule, typeof i5.MatCardModule, typeof i6.BehaviorModule], [typeof i5.MatCardModule, typeof PanelComponent, typeof PanelSectionComponent, typeof TintedDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PanelModule>;
+}
+
+export { PanelComponent, PanelModule, PanelSectionComponent, TintedDirective };

package/phone-number/index.d.ts

@@ -1,5 +1,110 @@
+import * as i0 from '@angular/core';
+import { ElementRef, OnInit, OnChanges, OnDestroy, EventEmitter, NgZone, SimpleChanges, PipeTransform } from '@angular/core';
+import { Validator, AbstractControl, NgModel, FormControlName, FormControlDirective } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import * as i4 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * @internal
  */
-/// <amd-module name="@bravura/ui/phone-number" />
-export * from './public-api';
+type TEL_TYPE = 'MOBILE' | 'FIXED_LINE_OR_MOBILE' | 'FIXED_LINE';
+/**
+ * @internal
+ */
+declare class PhoneNumberValidator implements Validator {
+    private _el;
+    telType: TEL_TYPE;
+    static validateControl(inp: HTMLInputElement, type: TEL_TYPE, update: boolean): {
+        [key: string]: any;
+    } | null;
+    constructor(_el: ElementRef<HTMLInputElement>);
+    validate(_: AbstractControl): {
+        [key: string]: any;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PhoneNumberValidator, "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", never, { "telType": { "alias": "telType"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+/**
+ * Add phone number validation support by specifying the `type` attribute as `tel` in an `<input>` element.
+ *
+ * To use this feature, please install a peer dependency `intl-tel-input` in your project and add the following
+ * to your application polyfills:
+ *
+ * ```javascript
+ * import 'intl-tel-input/build/js/utils.js';
+ * ```
+ *
+ * You will also need to add the following statements to one of your global SCSS files:
+ *
+ * ```scss
+ * $flagsImagePath: '~intl-tel-input/build/img/' !default;
+ * @import '~intl-tel-input/src/css/intlTelInput';
+ * ```
+ */
+declare class PhoneNumberDirective implements OnInit, OnChanges, OnDestroy {
+    private _el;
+    private _ngModel;
+    private _formControlName;
+    private _formControlDirective;
+    private _locale;
+    private _zone;
+    private _matField;
+    /**
+     * @ignore
+     */
+    static POST_RENDER_INIT_DELAY: number;
+    /**
+     * @ignore
+     */
+    static BYPASS_SHADOW_DETECTION: boolean;
+    /**
+     * The type of phone number to validate for
+     */
+    telType: TEL_TYPE;
+    /**
+     * Disable country dropdown by setting this property to `false`.
+     */
+    telDropdown: boolean;
+    /**
+     * This event is triggered when a new country is selected from the dropdown. The event detail is the ISO country code.
+     */
+    telCountryChange: EventEmitter<string>;
+    private _control;
+    private _reactive;
+    private _countryChangeListener;
+    private _input;
+    private _iti;
+    constructor(_el: ElementRef<HTMLInputElement>, _ngModel: NgModel, _formControlName: FormControlName, _formControlDirective: FormControlDirective, _locale: string, _zone: NgZone, _matField: MatFormField);
+    /** @internal */
+    onInput(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initElement;
+    private _patchValueByState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberDirective, [null, { optional: true; }, { optional: true; }, { optional: true; }, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PhoneNumberDirective, "[buiTelInput], input([type=tel])[ngModel], input([type=tel])[formControlName], input([type=tel])[formControl]", never, { "telType": { "alias": "telType"; "required": false; }; "telDropdown": { "alias": "telDropdown"; "required": false; }; }, { "telCountryChange": "telCountryChange"; }, never, never, false, never>;
+}
+
+/**
+ * @internal
+ */
+declare class PhoneNumberPipe implements PipeTransform {
+    private _locale;
+    constructor(_locale: string);
+    transform(value: any, mode?: string, renderLink?: boolean): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PhoneNumberPipe, "buiPhone", false>;
+}
+
+/**
+ * @internal
+ */
+declare class PhoneModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PhoneModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PhoneModule, [typeof PhoneNumberPipe, typeof PhoneNumberDirective, typeof PhoneNumberValidator], [typeof i4.CommonModule], [typeof PhoneNumberDirective, typeof PhoneNumberPipe, typeof PhoneNumberValidator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PhoneModule>;
+}
+
+export { PhoneModule, PhoneNumberDirective, PhoneNumberPipe, PhoneNumberValidator };

package/radio-panel/index.d.ts

@@ -1,5 +1,73 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import * as i0 from '@angular/core';
+import { TemplateRef, ElementRef, ChangeDetectorRef, OnChanges, QueryList, SimpleChanges } from '@angular/core';
+import * as i4 from '@angular/material/radio';
+import { MatRadioButton, MatRadioGroup, MatRadioDefaultOptions } from '@angular/material/radio';
+import * as i5 from '@angular/material/core';
+import { ThemePalette } from '@angular/material/core';
+import * as i3 from '@angular/common';
+import * as i6 from '@angular/material/icon';
+
 /**
- * Generated bundle index. Do not edit.
+ * Use `bui-radio-panel-item` instead of `mat-radio-button` in a `bui-radio-panel` to display an option.
  */
-/// <amd-module name="@bravura/ui/radio-panel" />
-export * from './public-api';
+declare class RadioPanelItemComponent extends MatRadioButton {
+    /**
+     * This will be displayed as the panel header
+     */
+    title: string;
+    /** The default position of the 'tick' icon relative to the title. */
+    private _tickPosition;
+    get tickPosition(): 'start' | 'end';
+    set tickPosition(pos: 'start' | 'end');
+    contentOnSelect: TemplateRef<any>;
+    constructor(radioGroup: MatRadioGroup, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, _providerOverride?: MatRadioDefaultOptions, tabIndex?: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioPanelItemComponent, [{ optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioPanelItemComponent, "bui-radio-panel-item", ["matRadioButton"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "title": { "alias": "title"; "required": false; }; "_tickPosition": { "alias": "_tickPosition"; "required": false; }; "tickPosition": { "alias": "tickPosition"; "required": false; }; }, {}, ["contentOnSelect"], ["[buiRadioItemHeadingEnd]", "*"], false, never>;
+}
+
+/**
+ * Radio panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)
+ * that extends Angular Material's [radio group component](https://material.angular.io/components/radio/overview).
+ * It inherits all the features of `MatRadioGroup`, and arranges the child items in panels,
+ * with the `title` attributes rendered as captions. The check box icon and the borders will be displayed
+ * in the color selected by the theme attribute `color`.
+ *
+ */
+declare class RadioPanelComponent extends MatRadioGroup implements OnChanges {
+    /**
+     * @ignore
+     */
+    classAttr: string;
+    /**
+     * The default width of each panel when the `direction` is `row`
+     */
+    panelWidth: number;
+    /** The flow direction of the radio panel items */
+    direction: 'row' | 'column';
+    /** Theme color for all of the radio panels in the group. */
+    color: ThemePalette;
+    /** The default position of the 'tick' icon relative to the title. */
+    tickPosition: 'start' | 'end';
+    /**
+     * @ignore
+     */
+    _radios: QueryList<RadioPanelItemComponent>;
+    constructor(cd: ChangeDetectorRef);
+    /** @ignore */
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioPanelComponent, "bui-radio-panel", ["buiRadioPanel"], { "panelWidth": { "alias": "panelWidth"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tickPosition": { "alias": "tickPosition"; "required": false; }; }, {}, ["_radios"], ["*"], false, never>;
+}
+
+/**
+ * Import this NgModule for the radio panel component
+ */
+declare class RadioPanelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioPanelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RadioPanelModule, [typeof RadioPanelItemComponent, typeof RadioPanelComponent], [typeof i3.CommonModule, typeof i4.MatRadioModule, typeof i5.MatRippleModule, typeof i6.MatIconModule], [typeof RadioPanelItemComponent, typeof RadioPanelComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RadioPanelModule>;
+}
+
+export { RadioPanelComponent, RadioPanelItemComponent, RadioPanelModule };

package/radio-panel/testing/index.d.ts

@@ -1,5 +1,32 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@bravura/ui/radio-panel/testing" />
-export * from './test-api';
+import * as _angular_cdk_testing from '@angular/cdk/testing';
+import { ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
+import { RadioButtonHarnessFilters, MatRadioButtonHarness, MatRadioGroupHarness } from '@angular/material/radio/testing';
+
+interface RadioPanelItemHarnessFilters extends RadioButtonHarnessFilters {
+    value?: string | RegExp;
+}
+declare class RadioPanelItemHarness extends MatRadioButtonHarness {
+    static hostSelector: string;
+    getLabelElement: () => Promise<_angular_cdk_testing.TestElement>;
+    protected _textLabel: () => Promise<_angular_cdk_testing.TestElement>;
+    protected _clickLabel: () => Promise<_angular_cdk_testing.TestElement>;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a radio button with specific
+     * attributes.
+     * @param options Options for filtering which radio button instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatRadioButtonHarness>(this: ComponentHarnessConstructor<T>, options?: RadioPanelItemHarnessFilters): HarnessPredicate<T>;
+    click(): Promise<void>;
+    getLabelCssValue(prop: string): Promise<string>;
+    getBorderColor(): Promise<string>;
+}
+declare class RadioPanelHarness extends MatRadioGroupHarness {
+    /** The selector for the host element of a `MatRadioGroup` instance. */
+    static hostSelector: string;
+    getItem: (filters: RadioPanelItemHarnessFilters) => Promise<RadioPanelItemHarness>;
+    getFlexDir(): Promise<string>;
+}
+
+export { RadioPanelHarness, RadioPanelItemHarness };
+export type { RadioPanelItemHarnessFilters };