@bravura/ui 6.1.0 → 7.0.0

package/clip-note/index.d.ts

@@ -1,5 +1,127 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, TemplateRef, EventEmitter, ElementRef, ViewContainerRef, OnInit, OnDestroy, EmbeddedViewRef, ChangeDetectorRef, ModuleWithProviders } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import * as i6 from '@angular/cdk/bidi';
+import { Directionality } from '@angular/cdk/bidi';
+import * as i3 from '@angular/common';
+import * as i4 from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import * as i7 from '@bravura/ui/common';
+import * as i8 from '@angular/cdk/observers';
+import * as i9 from '@bravura/ui/icon-font';
+
+interface ClipNoteDefaultConfig {
+    color: ThemePalette;
+    caption: string;
+}
 /**
- * Generated bundle index. Do not edit.
+ * A clip note consists of a toggle button and a floating 'notepad' element, attached to the top end of the host element's
+ * viewable area. The 'notepad' normally collapses away and only reveals itself when the toggle button is active.
+ *
+ * The toggle button clips on the edge of the host element and expands to display the full caption when hovered. It hides itself
+ * automatically when there is no content provided via the `buiClipNote` property of the directive.
+ *
+ * The clip note component is suitable for large page container elements with visible boundaries. It can present contextual
+ * information regarding and in addition to the content displayed in the main view area.
+ *
+ * The properties `buiClipNoteColor` and `buiClipNoteCaption` customise the appearance of the clip note, the default values of which
+ * can optionally be provided by the `ClipNoteModule.forConfig()` method.
+ *
  */
-/// <amd-module name="@bravura/ui/clip-note" />
-export * from './public-api';
+declare class ClipNoteDirective implements AfterViewInit {
+    private _elementRef;
+    private _vc;
+    /**
+     * Provide content to the clip note's floating notepad element.
+     * It accepts a `string` of HTML content or a `TemplateRef` object.
+     */
+    get buiClipNote(): string | TemplateRef<any> | undefined;
+    set buiClipNote(note: string | TemplateRef<any> | undefined);
+    /**
+     * Customise the theme color alias.
+     * @default 'primary'
+     */
+    get buiClipNoteColor(): ThemePalette;
+    set buiClipNoteColor(color: ThemePalette);
+    /**
+     * Customise the icon on the toggle button. With this property specified, the animation on the icon
+     * will not be active.
+     */
+    get buiClipNoteIcon(): string | undefined;
+    set buiClipNoteIcon(icon: string | undefined);
+    /**
+     * The caption of the toggle button when expanded.
+     */
+    get buiClipNoteCaption(): string;
+    set buiClipNoteCaption(text: string);
+    /** Emits when the panel opens */
+    readonly buiClipNoteOpened: EventEmitter<void>;
+    /** Emits when the panel closes */
+    readonly buiClipNoteClosed: EventEmitter<void>;
+    private _content?;
+    private _color;
+    private _compRef;
+    private _caption;
+    private _icon?;
+    constructor(_elementRef: ElementRef<HTMLElement>, _vc: ViewContainerRef, _config: ClipNoteDefaultConfig);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Open the note panel */
+    open(): void;
+    /** Close the note panel */
+    close(): void;
+    private _processContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClipNoteDirective, [{ host: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClipNoteDirective, "[buiClipNote]", ["buiClipNote"], { "buiClipNote": { "alias": "buiClipNote"; "required": false; }; "buiClipNoteColor": { "alias": "buiClipNoteColor"; "required": false; }; "buiClipNoteIcon": { "alias": "buiClipNoteIcon"; "required": false; }; "buiClipNoteCaption": { "alias": "buiClipNoteCaption"; "required": false; }; }, { "buiClipNoteOpened": "buiClipNoteOpened"; "buiClipNoteClosed": "buiClipNoteClosed"; }, never, never, false, never>;
+}
+
+declare class ClipNoteComponent implements OnInit, OnDestroy {
+    private _cd;
+    private _dir;
+    private _elemRef;
+    buttonText: string;
+    get buttonState(): string;
+    get buttonIconState(): string;
+    panelState: 'open' | 'closed-ltr' | 'closed-rtl';
+    direction: string;
+    _contentView?: EmbeddedViewRef<any>;
+    _content?: string;
+    _color: ThemePalette;
+    _buttonAnimating: boolean;
+    _icon?: string;
+    _hasContent: boolean;
+    readonly opened: EventEmitter<void>;
+    readonly closed: EventEmitter<void>;
+    private _hovering;
+    private _destroyed$;
+    private _toggleQueue;
+    private _viewDiv;
+    private _noteViewRef;
+    private _fallbackTemplate;
+    constructor(_cd: ChangeDetectorRef, _dir: Directionality, _elemRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    _mouseOverButton(hovering: boolean): void;
+    toggle(): void;
+    _scheduleToggle(): void;
+    _checkToggle(): void;
+    open(): void;
+    close(): void;
+    _emit(): void;
+    _contentChanged(content?: string | TemplateRef<any>): void;
+    _checkContent(initial?: boolean): void;
+    _assignColor(color: ThemePalette): void;
+    _assignButtonText(text: string): void;
+    _assignButtonIcon(icon?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClipNoteComponent, [null, null, { host: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClipNoteComponent, "bui-clip-note", never, {}, {}, never, never, false, never>;
+}
+
+declare class ClipNoteModule {
+    static forConfig(config: ClipNoteDefaultConfig): ModuleWithProviders<ClipNoteModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClipNoteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClipNoteModule, [typeof ClipNoteComponent, typeof ClipNoteDirective], [typeof i3.CommonModule, typeof i4.MatButtonModule, typeof i5.MatIconModule, typeof i6.BidiModule, typeof i7.BuiCommonModule, typeof i8.ObserversModule, typeof i9.IconFontModule], [typeof ClipNoteDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ClipNoteModule>;
+}
+
+export { ClipNoteDirective, ClipNoteModule };

package/common/index.d.ts

@@ -1,5 +1,26 @@
+import * as i1 from '@angular/cdk/bidi';
+import { Direction, Directionality } from '@angular/cdk/bidi';
+import * as i0 from '@angular/core';
+
+declare function generateID(): string;
+declare function isElementInViewport(el: HTMLElement): boolean;
 /**
- * Generated bundle index. Do not edit.
+ * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+ *
+ * @param {String} text The text to be rendered.
+ * @param el the element used to compute the font styles
+ *
+ * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
  */
-/// <amd-module name="@bravura/ui/common" />
-export * from './public-api';
+declare function getTextWidth(text: string, el?: HTMLElement): number;
+
+/** Resolves a string value to a specific direction. */
+declare function _resolveDirectionality(rawValue: string): Direction;
+declare class BuiCommonModule {
+    constructor(dir: Directionality, thisModule: BuiCommonModule, document: Document);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BuiCommonModule, [null, { optional: true; skipSelf: true; }, null]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BuiCommonModule, never, [typeof i1.BidiModule], [typeof i1.BidiModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BuiCommonModule>;
+}
+
+export { BuiCommonModule, _resolveDirectionality, generateID, getTextWidth, isElementInViewport };

package/currency-input/index.d.ts

@@ -1,5 +1,71 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, ElementRef, Renderer2 } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import * as i2 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * This directive will enhance an input element to format the numbers entered to a currency amount.
  */
-/// <amd-module name="@bravura/ui/currency-input" />
-export * from './public-api';
+declare class CurrencyInputDirective implements OnInit, OnChanges, ControlValueAccessor {
+    private _el;
+    private _renderer;
+    private _locale;
+    private _defaultCurrencyCode;
+    private _field?;
+    /**
+     * true to allow negative input, otherwise false
+     * Default to false.
+     */
+    allowNegative: boolean;
+    /**
+     * Provide the currency code to format the entered amount.
+     * Uses angular token DEFAULT_CURRENCY_CODE by default.
+     */
+    currencyCode: string;
+    /**
+     * true if no decimal digits allowed, otherwise false.
+     * Default to false.
+     */
+    baseUnitOnly: boolean;
+    /**
+     * The format the of the amount either in wide or narrow.
+     */
+    format: 'narrow' | 'wide';
+    private placeholder;
+    private autocomplete;
+    private type;
+    private inputMode;
+    private change;
+    private onTouch;
+    private _safari;
+    private _symbol;
+    private _decimalPipe;
+    private _ds;
+    private _trailing;
+    constructor(_el: ElementRef<HTMLInputElement>, _renderer: Renderer2, _locale: string, _defaultCurrencyCode: string, _field?: MatFormField | undefined);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    onInput(): void;
+    onFocus(): void;
+    onblur(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    private _updatePlaceholder;
+    private _currencyUpdated;
+    private _formatCurrency;
+    private _formatNumber;
+    private _convert;
+    private get _0Text();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyInputDirective, [{ self: true; }, null, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CurrencyInputDirective, "input[buiCurrencyInput],input[currencyCode],input[data-type=currency]", never, { "allowNegative": { "alias": "allowNegative"; "required": false; }; "currencyCode": { "alias": "currencyCode"; "required": false; }; "baseUnitOnly": { "alias": "baseUnitOnly"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class CurrencyInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CurrencyInputModule, [typeof CurrencyInputDirective], [typeof i2.CommonModule], [typeof CurrencyInputDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CurrencyInputModule>;
+}
+
+export { CurrencyInputDirective, CurrencyInputModule };

package/decimal-input/index.d.ts

@@ -1,5 +1,41 @@
+import * as i0 from '@angular/core';
+import { OnChanges, ElementRef, Renderer2 } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i2 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * This directive will enhance an input element to format the numbers entered to a decimal amount.
  */
-/// <amd-module name="@bravura/ui/decimal-input" />
-export * from './public-api';
+declare class DecimalInputDirective implements OnChanges, ControlValueAccessor {
+    private _el;
+    private _renderer;
+    /**
+     * number of decimal places allowed
+     */
+    buiDecimalInput: number;
+    private placeholder;
+    private autocomplete;
+    private type;
+    private inputMode;
+    private change;
+    private onTouch;
+    constructor(_el: ElementRef<HTMLInputElement>, _renderer: Renderer2);
+    ngOnChanges(): void;
+    onInput(): void;
+    onKeypress(evt: KeyboardEvent): void;
+    onblur(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    private _resetDecimalPlaces;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DecimalInputDirective, [{ self: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DecimalInputDirective, "input[buiDecimalInput]", never, { "buiDecimalInput": { "alias": "buiDecimalInput"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class DecimalInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DecimalInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DecimalInputModule, [typeof DecimalInputDirective], [typeof i2.CommonModule], [typeof DecimalInputDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DecimalInputModule>;
+}
+
+export { DecimalInputDirective, DecimalInputModule };

package/discrete-input/index.d.ts

@@ -1,5 +1,141 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, ElementRef } from '@angular/core';
+import * as i5 from '@angular/cdk/a11y';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import * as i4 from '@angular/forms';
+import { ControlValueAccessor, UntypedFormArray, UntypedFormGroup, NgControl, NgForm, FormGroupDirective, AbstractControl } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormField } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import * as i2 from '@angular/common';
+
 /**
- * Generated bundle index. Do not edit.
+ * Custom `MatFormFieldControl` with an individual input box for each character, suitable for fixed-length fields,
+ * such as secondary PIN inputs, TFNs, or BSB code etc.
+ *
+ * Accessibility features are not yet fully implemented.
+ *
+ * Example:
+ *
+ * ```html
+ * <mat-form-field>
+ *   <bui-discrete-input></bui-discrete-input>
+ * </mat-form-field>
+ * ```
+ *
  */
-/// <amd-module name="@bravura/ui/discrete-input" />
-export * from './public-api';
+declare class DiscreteInputComponent implements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy {
+    private _focusMonitor;
+    private _elementRef;
+    /** @ignore */
+    static nextId: number;
+    /** @ignore */
+    static ngAcceptInputType_disabled: boolean | string | null | undefined;
+    /** @ignore */
+    static ngAcceptInputType_required: boolean | string | null | undefined;
+    /** @ignore */ parts: UntypedFormArray;
+    /** @ignore */ group: UntypedFormGroup;
+    /** Emits whenever the component state changes. */
+    stateChanges: Subject<void>;
+    /** Whether the control is focused. */
+    focused: boolean;
+    /** The type of input boxes */
+    type: 'text' | 'number' | 'password';
+    /** Input boxes are separated in groups. This specifies the characters displayed between two groups. */
+    separator: string;
+    /**
+     * A list of characters accepted in the inputs, for example `0-9`, `a-zA-Z0-9`
+     * @example '0-9'
+     */
+    accept?: string;
+    /** @ignore */ id: string;
+    /** Value of aria-describedby that should be merged with the described-by ids which are set by the form-field. */
+    userAriaDescribedBy?: string;
+    private inputParts;
+    /**@ignore */
+    _formField: MatFormField;
+    /**@ignore */
+    ngControl: NgControl;
+    autocomplete?: string;
+    private _sizeSpec;
+    private _required;
+    private _placeholder?;
+    private _disabled;
+    private _separatorPos;
+    /** @ignore */ onChange: (_: any) => void;
+    /** @ignore */ onTouched: () => void;
+    /** @ignore */
+    get shouldLabelFloat(): boolean;
+    /** @ignore */
+    get empty(): boolean;
+    /**
+     * Defines the length and grouping of the input.
+     * @default [2, 2, 2]
+     */
+    get sizeSpec(): number[];
+    set sizeSpec(spec: number[]);
+    /** The placeholder for this control. */
+    get placeholder(): string;
+    set placeholder(value: string);
+    /** Whether the control is required. */
+    get required(): boolean;
+    set required(value: boolean);
+    /** Whether the control is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** The value of the control. */
+    get value(): string;
+    set value(v: string);
+    /** @ignore */
+    get _colorSuffix(): string;
+    constructor(_focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, formField: MatFormField, control: NgControl, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher);
+    /** @ignore */ errorState: boolean;
+    /** @ignore */ controlType?: string | undefined;
+    /** @ignore */ autofilled?: boolean | undefined;
+    /** @ignore */
+    ngOnDestroy(): void;
+    /** @ignore */
+    setDescribedByIds(ids: string[]): void;
+    /** @ignore */
+    onContainerClick(): void;
+    /** @ignore */
+    writeValue(v: string): void;
+    /** @ignore */
+    registerOnChange(fn: any): void;
+    /** @ignore */
+    registerOnTouched(fn: any): void;
+    /** @ignore */
+    setDisabledState(isDisabled: boolean): void;
+    /** @ignore */
+    _handleInput(control: AbstractControl, index: number, event: Event): void;
+    /** @ignore */
+    _handleBeforeInput(index: number, event: InputEvent): void;
+    /** @ignore */
+    _focusPart(elemRef: ElementRef<HTMLInputElement>): void;
+    /** @ignore */
+    _consumeKey(event: Event): void;
+    /** @ignore */
+    _leftArrow(index: number, event: Event): void;
+    /** @ignore */
+    _rightArrow(index: number, event: Event): void;
+    /** @ignore */
+    _handleBackspace(control: AbstractControl, index: number): void;
+    /** @ignore */
+    _onPaste(event: ClipboardEvent): void;
+    /** @ignore */
+    _separatorRequired(index: number): boolean;
+    /** @ignore */
+    _placeholderAt(index: number): string | undefined;
+    private _replaceText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DiscreteInputComponent, [null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiscreteInputComponent, "bui-discrete-input", never, { "type": { "alias": "type"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "sizeSpec": { "alias": "sizeSpec"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class DiscreteInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DiscreteInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DiscreteInputModule, [typeof DiscreteInputComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.ReactiveFormsModule, typeof i5.A11yModule], [typeof DiscreteInputComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DiscreteInputModule>;
+}
+
+export { DiscreteInputComponent, DiscreteInputModule };

package/fesm2022/bravura-ui-alert.mjs

@@ -1,18 +1,17 @@
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Input, HostBinding, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@bravura/ui/icon-font';
+import * as i2 from '@bravura/ui/icon-font';
 import { IconFontModule } from '@bravura/ui/icon-font';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { generateID, isElementInViewport } from '@bravura/ui/common';
 import { Subject, timer } from 'rxjs';
 import { takeUntil, take, tap, delay } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/scrolling';
+import * as i1$1 from '@angular/cdk/scrolling';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i2$1 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 
 /** @ignore */
 const ICONS = {
@@ -75,16 +74,16 @@ class AlertMessageComponent {
     _dismiss() {
         this.dismissed.emit(this._id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AlertMessageComponent, isStandalone: false, selector: "bui-alert", inputs: { type: "type", message: "message", politeness: "politeness", dismissible: "dismissible", _id: ["id", "_id"] }, outputs: { dismissed: "dismissed", initialised: "initialised" }, host: { properties: { "class": "'bui-alert bui-host bui-alert-' + (type === 'warn' ? 'warning' : type) + (dismissible ? ' bui-alert-dismissible' : '')", "role": "politeness === 'off' ? 'region' : 'alert'", "attr.aria-live": "politeness === 'assertive' ? undefined : politeness", "id": "this._id" } }, ngImport: i0, template: "<div class=\"bui-alert-backdrop\"></div>\r\n<div class=\"bui-alert-frame\"></div>\r\n\r\n<div class=\"bui-alert-wrapper\">\r\n\t<div class=\"bui-alert-icon-area\">\r\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\r\n\t</div>\r\n\t<div class=\"bui-alert-content\">\r\n\t\t<div [innerHTML]=\"message\" *ngIf=\"message\"></div>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n</div>\r\n\r\n<div class=\"bui-alert-button-area\" *ngIf=\"dismissible\">\r\n\t<div class=\"bui-alert-button-backdrop\"></div>\r\n\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;inset:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{z-index:1;flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}.bui-alert-button{width:40px;height:40px;padding:8px;overflow:hidden}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:last-child\"; margin-bottom: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:last-child\"; margin-bottom: 0;}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlertMessageComponent, isStandalone: false, selector: "bui-alert", inputs: { type: "type", message: "message", politeness: "politeness", dismissible: "dismissible", _id: ["id", "_id"] }, outputs: { dismissed: "dismissed", initialised: "initialised" }, host: { properties: { "class": "'bui-alert bui-host bui-alert-' + (type === 'warn' ? 'warning' : type) + (dismissible ? ' bui-alert-dismissible' : '')", "role": "politeness === 'off' ? 'region' : 'alert'", "attr.aria-live": "politeness === 'assertive' ? undefined : politeness", "id": "this._id" } }, ngImport: i0, template: "<div class=\"bui-alert-backdrop\"></div>\n<div class=\"bui-alert-frame\"></div>\n\n<div class=\"bui-alert-wrapper\">\n\t<div class=\"bui-alert-icon-area\">\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\n\t</div>\n\t<div class=\"bui-alert-content\">\n\t\t@if (message) {\n\t\t\t<div [innerHTML]=\"message\"></div>\n\t\t}\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\n@if (dismissible) {\n\t<div class=\"bui-alert-button-area\">\n\t\t<div class=\"bui-alert-button-backdrop\"></div>\n\t\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\n\t\t\t<mat-icon>cancel</mat-icon>\n\t\t</button>\n\t</div>\n}\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;inset:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{z-index:1;flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}.bui-alert-button{width:40px;height:40px;padding:8px;overflow:hidden}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:last-child\"; margin-bottom: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:last-child\"; margin-bottom: 0;}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-alert', host: {
                         '[class]': `'bui-alert bui-host bui-alert-' + (type === 'warn' ? 'warning' : type) + (dismissible ? ' bui-alert-dismissible' : '')`,
                         '[role]': `politeness === 'off' ? 'region' : 'alert'`,
                         '[attr.aria-live]': `politeness === 'assertive' ? undefined : politeness`
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"bui-alert-backdrop\"></div>\r\n<div class=\"bui-alert-frame\"></div>\r\n\r\n<div class=\"bui-alert-wrapper\">\r\n\t<div class=\"bui-alert-icon-area\">\r\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\r\n\t</div>\r\n\t<div class=\"bui-alert-content\">\r\n\t\t<div [innerHTML]=\"message\" *ngIf=\"message\"></div>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n</div>\r\n\r\n<div class=\"bui-alert-button-area\" *ngIf=\"dismissible\">\r\n\t<div class=\"bui-alert-button-backdrop\"></div>\r\n\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;inset:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{z-index:1;flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}.bui-alert-button{width:40px;height:40px;padding:8px;overflow:hidden}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:last-child\"; margin-bottom: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:last-child\"; margin-bottom: 0;}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"bui-alert-backdrop\"></div>\n<div class=\"bui-alert-frame\"></div>\n\n<div class=\"bui-alert-wrapper\">\n\t<div class=\"bui-alert-icon-area\">\n\t\t<mat-icon [buiIcon]=\"iconName\" variant=\"outlined\"></mat-icon>\n\t</div>\n\t<div class=\"bui-alert-content\">\n\t\t@if (message) {\n\t\t\t<div [innerHTML]=\"message\"></div>\n\t\t}\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n\n@if (dismissible) {\n\t<div class=\"bui-alert-button-area\">\n\t\t<div class=\"bui-alert-button-backdrop\"></div>\n\t\t<button mat-icon-button class=\"bui-alert-button\" (click)=\"_dismiss()\" aria-label=\"dismiss alert\">\n\t\t\t<mat-icon>cancel</mat-icon>\n\t\t</button>\n\t</div>\n}\n", styles: [":host(:not([hidden])){display:block;padding:12px 14px 12px 19px;position:relative;border-radius:5px}:host-context([dir=rtl]) :host(:not([hidden])){padding:12px 19px 12px 14px}:host(:not([hidden])),:host(:not([hidden])) *{box-sizing:border-box}.bui-alert-backdrop,.bui-alert-frame{position:absolute;inset:0}.bui-alert-backdrop{opacity:.1}:host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 18.75px) 18.75px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-backdrop{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0,18.75px 18.75px)}.bui-alert-frame{border-radius:5px;border-width:1px 1px 1px 5px;border-style:solid}:host-context([dir=rtl]) .bui-alert-frame{border-width:1px 5px 1px 1px}:host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 0,calc(100% - 25px) 0,calc(100% - 25px) 25px,100% 25px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-frame{clip-path:polygon(0 25px,0 100%,100% 100%,100% 0,25px 0)}.bui-alert-button-area{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .bui-alert-button-area{right:unset;left:-15px}.bui-alert-button-backdrop{position:absolute;border-radius:20px;width:100%;height:100%;clip-path:polygon(0 15px,25px 15px,25px 100%,0% 100%)}:host-context([dir=rtl]) .bui-alert-button-backdrop{clip-path:polygon(15px 15px,15px 100%,100% 100%,100% 15px)}.bui-alert-wrapper{display:flex;align-items:stretch}.bui-alert-icon-area{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;margin-right:14px;color:var(--bui-bg-card)}:host-context([dir=rtl]) .bui-alert-icon-area{margin-right:unset;margin-left:14px}.bui-alert-content{z-index:1;flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}:host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 13px,100% 100%,0 100%)}:host-context([dir=rtl]) :host(.bui-alert-dismissible) .bui-alert-content{clip-path:polygon(0 13px,0 100%,100% 100%,100% 0,11px 0)}:host(.bui-alert-success) .bui-alert-frame{border-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-backdrop,:host(.bui-alert-success) .bui-alert-icon-area{background-color:var(--bui-color-success)}:host(.bui-alert-success) .bui-alert-button-backdrop{border:1px var(--bui-color-success) solid}:host(.bui-alert-success) .bui-alert-button{color:var(--bui-color-success)}:host(.bui-alert-info) .bui-alert-frame{border-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-backdrop,:host(.bui-alert-info) .bui-alert-icon-area{background-color:var(--bui-color-info)}:host(.bui-alert-info) .bui-alert-button-backdrop{border:1px var(--bui-color-info) solid}:host(.bui-alert-info) .bui-alert-button{color:var(--bui-color-info)}:host(.bui-alert-warning) .bui-alert-frame{border-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-backdrop,:host(.bui-alert-warning) .bui-alert-icon-area{background-color:var(--bui-color-warning)}:host(.bui-alert-warning) .bui-alert-button-backdrop{border:1px var(--bui-color-warning) solid}:host(.bui-alert-warning) .bui-alert-button{color:var(--bui-color-warning)}:host(.bui-alert-error) .bui-alert-frame{border-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-backdrop,:host(.bui-alert-error) .bui-alert-icon-area{background-color:var(--bui-color-error)}:host(.bui-alert-error) .bui-alert-button-backdrop{border:1px var(--bui-color-error) solid}:host(.bui-alert-error) .bui-alert-button{color:var(--bui-color-error)}.bui-alert-button{width:40px;height:40px;padding:8px;overflow:hidden}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > div > *:last-child\"; margin-bottom: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:first-child\"; margin-top: 0;}@polyfill-unscoped-rule{content: \".bui-alert .bui-alert-content > *:last-child\"; margin-bottom: 0;}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], message: [{
@@ -97,9 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }], initialised: [{
                 type: Output
-            }], 
-        /** @ignore */
-        _id: [{
+            }], _id: [{
                 type: Input,
                 args: ['id']
             }, {
@@ -247,8 +244,8 @@ class AlertContainerComponent {
             this.zone.run(() => this.cdRef.markForCheck());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertContainerComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AlertContainerComponent, isStandalone: false, selector: "bui-alert-container", inputs: { max: "max", outsideViewportBehavior: "outsideViewportBehavior", floatDuration: "floatDuration" }, outputs: { init: "init" }, host: { properties: { "class": "'bui-alert-container bui-host bui-alert-container-' + (_remaining.length ? 'not-empty': 'empty')" } }, ngImport: i0, template: "<div\r\n\tclass=\"bui-alert-fixed-panel\"\r\n\t[style.opacity]=\"_floatPanelHidden ? 1 : 0\"\r\n\t[class.bui-alert-fixed-panel-blink]=\"outsideViewportBehavior === 'scroll'\"\r\n>\r\n\t<bui-alert\r\n\t\t*ngFor=\"let a of _alerts\"\r\n\t\t[id]=\"a.id\"\r\n\t\t[type]=\"a.type\"\r\n\t\t[message]=\"a.message\"\r\n\t\tdismissible\r\n\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\r\n\t\t(@alertTransition.start)=\"_animationStarted.next($event)\"\r\n\t\t(@alertTransition.done)=\"_animationEnded.next($event)\"\r\n\t\t(dismissed)=\"_dismiss(a)\"\r\n\t></bui-alert>\r\n</div>\r\n\r\n<div class=\"bui-alert-float-panel-frame\" [hidden]=\"_floatPanelHidden\" [class.bui-alert-float-panel-shaded]=\"_floated\">\r\n\t<div class=\"bui-alert-float-panel\" [style.max-width]=\"_width + 'px'\" [@floatTransition]=\"'visible'\" *ngIf=\"_floated\">\r\n\t\t<bui-alert\r\n\t\t\t*ngFor=\"let a of _alerts\"\r\n\t\t\t[id]=\"a.id\"\r\n\t\t\t[type]=\"a.type\"\r\n\t\t\t[message]=\"a.message\"\r\n\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\r\n\t\t></bui-alert>\r\n\t</div>\r\n</div>\r\n", styles: [".bui-alert:not(:first-of-type){margin-top:.5rem}:host(:not([hidden])){display:block}.bui-alert-fixed-panel{transition:opacity .2s ease-in}.bui-alert-fixed-panel.bui-alert-fixed-panel-blink .bui-alert:last-of-type{animation:blink 1s ease-in forwards}.bui-alert-float-panel-frame{position:fixed;z-index:1000;inset:0;justify-content:center;align-items:center;flex-direction:column;transition:background-color .4s cubic-bezier(.25,0,.55,.2)}.bui-alert-float-panel-frame:not([hidden]){display:flex}.bui-alert-float-panel-frame.bui-alert-float-panel-shaded{background-color:#00000080}.bui-alert-float-panel-frame .bui-alert{background-color:var(--bui-bg-card)}@keyframes blink{60%{opacity:1}70%{opacity:0}80%{opacity:1}90%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertMessageComponent, selector: "bui-alert", inputs: ["type", "message", "politeness", "dismissible", "id"], outputs: ["dismissed", "initialised"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertContainerComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlertContainerComponent, isStandalone: false, selector: "bui-alert-container", inputs: { max: "max", outsideViewportBehavior: "outsideViewportBehavior", floatDuration: "floatDuration" }, outputs: { init: "init" }, host: { properties: { "class": "'bui-alert-container bui-host bui-alert-container-' + (_remaining.length ? 'not-empty': 'empty')" } }, ngImport: i0, template: "<div\n\tclass=\"bui-alert-fixed-panel\"\n\t[style.opacity]=\"_floatPanelHidden ? 1 : 0\"\n\t[class.bui-alert-fixed-panel-blink]=\"outsideViewportBehavior === 'scroll'\"\n>\n\t@for (a of _alerts; track a) {\n\t\t<bui-alert\n\t\t\t[id]=\"a.id\"\n\t\t\t[type]=\"a.type\"\n\t\t\t[message]=\"a.message\"\n\t\t\tdismissible\n\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\n\t\t\t(@alertTransition.start)=\"_animationStarted.next($event)\"\n\t\t\t(@alertTransition.done)=\"_animationEnded.next($event)\"\n\t\t\t(dismissed)=\"_dismiss(a)\"\n\t\t></bui-alert>\n\t}\n</div>\n\n<div class=\"bui-alert-float-panel-frame\" [hidden]=\"_floatPanelHidden\" [class.bui-alert-float-panel-shaded]=\"_floated\">\n\t@if (_floated) {\n\t\t<div class=\"bui-alert-float-panel\" [style.max-width]=\"_width + 'px'\" [@floatTransition]=\"'visible'\">\n\t\t\t@for (a of _alerts; track a) {\n\t\t\t\t<bui-alert\n\t\t\t\t\t[id]=\"a.id\"\n\t\t\t\t\t[type]=\"a.type\"\n\t\t\t\t\t[message]=\"a.message\"\n\t\t\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\n\t\t\t\t></bui-alert>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".bui-alert:not(:first-of-type){margin-top:.5rem}:host(:not([hidden])){display:block}.bui-alert-fixed-panel{transition:opacity .2s ease-in}.bui-alert-fixed-panel.bui-alert-fixed-panel-blink .bui-alert:last-of-type{animation:blink 1s ease-in forwards}.bui-alert-float-panel-frame{position:fixed;z-index:1000;inset:0;justify-content:center;align-items:center;flex-direction:column;transition:background-color .4s cubic-bezier(.25,0,.55,.2)}.bui-alert-float-panel-frame:not([hidden]){display:flex}.bui-alert-float-panel-frame.bui-alert-float-panel-shaded{background-color:#00000080}.bui-alert-float-panel-frame .bui-alert{background-color:var(--bui-bg-card)}@keyframes blink{60%{opacity:1}70%{opacity:0}80%{opacity:1}90%{opacity:0}}\n"], dependencies: [{ kind: "component", type: AlertMessageComponent, selector: "bui-alert", inputs: ["type", "message", "politeness", "dismissible", "id"], outputs: ["dismissed", "initialised"] }], animations: [
             trigger('floatTransition', [
                 transition(':enter', [style({ opacity: '0', transform: 'translateY(-10vh)' }), animate('.3s ease-in')]),
                 transition(':leave', [animate('.4s ease-out', style({ transform: 'translateY(-10vh)', opacity: '0' }))])
@@ -270,7 +267,7 @@ class AlertContainerComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bui-alert-container', host: {
                         '[class]': `'bui-alert-container bui-host bui-alert-container-' + (_remaining.length ? 'not-empty': 'empty')`
@@ -294,8 +291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             ]),
                             transition('visible => hidden', [animate('250ms cubic-bezier(0.25, 0, 0.3, 1.0)')])
                         ])
-                    ], standalone: false, template: "<div\r\n\tclass=\"bui-alert-fixed-panel\"\r\n\t[style.opacity]=\"_floatPanelHidden ? 1 : 0\"\r\n\t[class.bui-alert-fixed-panel-blink]=\"outsideViewportBehavior === 'scroll'\"\r\n>\r\n\t<bui-alert\r\n\t\t*ngFor=\"let a of _alerts\"\r\n\t\t[id]=\"a.id\"\r\n\t\t[type]=\"a.type\"\r\n\t\t[message]=\"a.message\"\r\n\t\tdismissible\r\n\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\r\n\t\t(@alertTransition.start)=\"_animationStarted.next($event)\"\r\n\t\t(@alertTransition.done)=\"_animationEnded.next($event)\"\r\n\t\t(dismissed)=\"_dismiss(a)\"\r\n\t></bui-alert>\r\n</div>\r\n\r\n<div class=\"bui-alert-float-panel-frame\" [hidden]=\"_floatPanelHidden\" [class.bui-alert-float-panel-shaded]=\"_floated\">\r\n\t<div class=\"bui-alert-float-panel\" [style.max-width]=\"_width + 'px'\" [@floatTransition]=\"'visible'\" *ngIf=\"_floated\">\r\n\t\t<bui-alert\r\n\t\t\t*ngFor=\"let a of _alerts\"\r\n\t\t\t[id]=\"a.id\"\r\n\t\t\t[type]=\"a.type\"\r\n\t\t\t[message]=\"a.message\"\r\n\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\r\n\t\t></bui-alert>\r\n\t</div>\r\n</div>\r\n", styles: [".bui-alert:not(:first-of-type){margin-top:.5rem}:host(:not([hidden])){display:block}.bui-alert-fixed-panel{transition:opacity .2s ease-in}.bui-alert-fixed-panel.bui-alert-fixed-panel-blink .bui-alert:last-of-type{animation:blink 1s ease-in forwards}.bui-alert-float-panel-frame{position:fixed;z-index:1000;inset:0;justify-content:center;align-items:center;flex-direction:column;transition:background-color .4s cubic-bezier(.25,0,.55,.2)}.bui-alert-float-panel-frame:not([hidden]){display:flex}.bui-alert-float-panel-frame.bui-alert-float-panel-shaded{background-color:#00000080}.bui-alert-float-panel-frame .bui-alert{background-color:var(--bui-bg-card)}@keyframes blink{60%{opacity:1}70%{opacity:0}80%{opacity:1}90%{opacity:0}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }], propDecorators: { max: [{
+                    ], standalone: false, template: "<div\n\tclass=\"bui-alert-fixed-panel\"\n\t[style.opacity]=\"_floatPanelHidden ? 1 : 0\"\n\t[class.bui-alert-fixed-panel-blink]=\"outsideViewportBehavior === 'scroll'\"\n>\n\t@for (a of _alerts; track a) {\n\t\t<bui-alert\n\t\t\t[id]=\"a.id\"\n\t\t\t[type]=\"a.type\"\n\t\t\t[message]=\"a.message\"\n\t\t\tdismissible\n\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\n\t\t\t(@alertTransition.start)=\"_animationStarted.next($event)\"\n\t\t\t(@alertTransition.done)=\"_animationEnded.next($event)\"\n\t\t\t(dismissed)=\"_dismiss(a)\"\n\t\t></bui-alert>\n\t}\n</div>\n\n<div class=\"bui-alert-float-panel-frame\" [hidden]=\"_floatPanelHidden\" [class.bui-alert-float-panel-shaded]=\"_floated\">\n\t@if (_floated) {\n\t\t<div class=\"bui-alert-float-panel\" [style.max-width]=\"_width + 'px'\" [@floatTransition]=\"'visible'\">\n\t\t\t@for (a of _alerts; track a) {\n\t\t\t\t<bui-alert\n\t\t\t\t\t[id]=\"a.id\"\n\t\t\t\t\t[type]=\"a.type\"\n\t\t\t\t\t[message]=\"a.message\"\n\t\t\t\t\t[@alertTransition]=\"a.deleted ? 'hidden' : 'visible'\"\n\t\t\t\t></bui-alert>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [".bui-alert:not(:first-of-type){margin-top:.5rem}:host(:not([hidden])){display:block}.bui-alert-fixed-panel{transition:opacity .2s ease-in}.bui-alert-fixed-panel.bui-alert-fixed-panel-blink .bui-alert:last-of-type{animation:blink 1s ease-in forwards}.bui-alert-float-panel-frame{position:fixed;z-index:1000;inset:0;justify-content:center;align-items:center;flex-direction:column;transition:background-color .4s cubic-bezier(.25,0,.55,.2)}.bui-alert-float-panel-frame:not([hidden]){display:flex}.bui-alert-float-panel-frame.bui-alert-float-panel-shaded{background-color:#00000080}.bui-alert-float-panel-frame .bui-alert{background-color:var(--bui-bg-card)}@keyframes blink{60%{opacity:1}70%{opacity:0}80%{opacity:1}90%{opacity:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.ScrollDispatcher }], propDecorators: { max: [{
                 type: Input
             }], outsideViewportBehavior: [{
                 type: Input
@@ -306,11 +303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 class AlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AlertModule, declarations: [AlertMessageComponent, AlertContainerComponent], imports: [CommonModule, IconFontModule, MatButtonModule], exports: [AlertMessageComponent, AlertContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertModule, imports: [CommonModule, IconFontModule, MatButtonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, declarations: [AlertMessageComponent, AlertContainerComponent], imports: [CommonModule, IconFontModule, MatButtonModule], exports: [AlertMessageComponent, AlertContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, imports: [CommonModule, IconFontModule, MatButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AlertMessageComponent, AlertContainerComponent],