@aurelia-ui-toolkits/headless 1.0.0

package/dist/types/switch/ui-switch.d.ts

@@ -0,0 +1,23 @@
+export declare class UiSwitch {
+    private readonly host;
+    checked: boolean;
+    disabled: boolean;
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    changing: boolean;
+    private changingFrame;
+    onClick(): void;
+    onKeyUp(event: KeyboardEvent): void;
+    onKeyPress(event: KeyboardEvent): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    onPointerDown(): void;
+    onPointerUp(): void;
+    onPointerLeave(): void;
+    detaching(): void;
+    private toggle;
+    private submitClosestForm;
+}

package/dist/types/table/enhance-ui-table.d.ts

@@ -0,0 +1,3 @@
+export declare class EnhanceUiTable {
+    compiling(template: HTMLElement | HTMLTemplateElement): void;
+}

package/dist/types/table/ui-table-column.d.ts

@@ -0,0 +1,22 @@
+import { UiTable } from './ui-table';
+export declare class UiTableColumn implements EventListenerObject {
+    readonly host: HTMLElement;
+    readonly table: UiTable;
+    private resizeHandle;
+    private startX;
+    private startWidth;
+    private resizing;
+    sortable: boolean;
+    resizable: boolean;
+    minWidth: number;
+    direction: 'asc' | 'desc' | undefined;
+    sortOrder: number | undefined;
+    attaching(): void;
+    detaching(): void;
+    handleEvent(event: Event): void;
+    applyWidth(width: number | undefined): void;
+    onClick(event: MouseEvent): void;
+    onPointerDown(event: PointerEvent): void;
+    private onPointerMove;
+    private onPointerUp;
+}

package/dist/types/table/ui-table.d.ts

@@ -0,0 +1,51 @@
+import type { UiTableColumn } from './ui-table-column';
+type TableSort = {
+    column: string;
+    direction: 'asc' | 'desc';
+};
+type ColumnSort = {
+    column: string;
+    columnViewModel: UiTableColumn;
+    direction: 'asc' | 'desc' | undefined;
+    multiple: boolean;
+};
+export declare class UiTable {
+    private readonly host;
+    private columnSizes;
+    private readonly sortedColumns;
+    sort: TableSort[];
+    sortChanged(): void;
+    page: number;
+    pageSize: number;
+    total: number;
+    totalChanged(): void;
+    totalPages: number;
+    pageOptions: number[];
+    storageKey: string | undefined;
+    storageKeyChanged(): void;
+    pagination: boolean;
+    progress: boolean;
+    pageSizeOptions: number[];
+    paginationText: string;
+    attaching(): void;
+    setColumnWidth(columnId: string, width: number, persist?: boolean): void;
+    onColumnSort(event: CustomEvent<ColumnSort>): void;
+    private updateColumnSortState;
+    pageSizeChanged(): void;
+    nextPage(): void;
+    firstPage(): void;
+    lastPage(): void;
+    previousPage(): void;
+    setPage(page: number): void;
+    setPageSize(pageSize: number): void;
+    onPageSizeChange(event: Event): void;
+    onPageChange(event: Event): void;
+    private updateTotalPages;
+    private applyColumnSizes;
+    getColumnWidth(columnId: string): number | undefined;
+    private applyColumnWidth;
+    private loadColumnSizes;
+    private persistColumnSizes;
+    private get storageId();
+}
+export {};

package/dist/types/tabs/ui-tab.d.ts

@@ -0,0 +1,10 @@
+import { UiTabs } from './ui-tabs';
+export declare class UiTab {
+    readonly element: HTMLElement;
+    readonly parentTabs: UiTabs;
+    value: unknown;
+    disabled: boolean;
+    get selected(): boolean;
+    get tabIndex(): number;
+    onClick(): void;
+}

package/dist/types/tabs/ui-tabs.d.ts

@@ -0,0 +1,16 @@
+import { UiTab } from './ui-tab';
+export declare class UiTabs {
+    private readonly element;
+    value: unknown;
+    tabs: UiTab[];
+    tabsChanged(): void;
+    attached(): void;
+    select(value: unknown): void;
+    isSelected(tab: UiTab): boolean;
+    onKeyDown(event: KeyboardEvent): void;
+    private get enabledTabs();
+    private selectInitialTab;
+    private focusTab;
+    private getNavigationDirection;
+    private dispatchValueEvent;
+}

package/dist/types/toast/ui-toast-region.d.ts

@@ -0,0 +1,6 @@
+import { UiToastMessage } from './ui-toast-service';
+export declare class UiToastRegion {
+    private readonly host;
+    toasts: UiToastMessage[];
+    close(toast: UiToastMessage): void;
+}

package/dist/types/toast/ui-toast-service.d.ts

@@ -0,0 +1,28 @@
+import { AlertTone } from '../alert/ui-alert';
+export interface UiToastOptions {
+    tone?: AlertTone;
+    title?: string;
+    message: string;
+    duration?: number;
+}
+export interface UiToastMessage extends Required<Pick<UiToastOptions, 'tone' | 'message' | 'duration'>> {
+    id: number;
+    title?: string;
+}
+export declare class UiToastService {
+    private readonly container;
+    private host;
+    private enhanced;
+    private nextId;
+    private timers;
+    toasts: UiToastMessage[];
+    show(options: string | UiToastOptions): Promise<number>;
+    info(message: string, title?: string): Promise<number>;
+    success(message: string, title?: string): Promise<number>;
+    warning(message: string, title?: string): Promise<number>;
+    danger(message: string, title?: string): Promise<number>;
+    remove(id: number): void;
+    clear(): void;
+    private createToast;
+    private ensureEnhanced;
+}

package/dist/types/tooltip/ui-tooltip-service.d.ts

@@ -0,0 +1,23 @@
+type TooltipPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+interface TooltipOptions {
+    anchor: HTMLElement;
+    text: string;
+    placement: TooltipPlacement;
+    offset: number;
+}
+export declare class UiTooltipService {
+    private readonly container;
+    private host;
+    private enhanced;
+    private request;
+    open: boolean;
+    anchor: HTMLElement | undefined;
+    text: string;
+    placement: TooltipPlacement;
+    offset: number;
+    tooltipId: string;
+    show(options: TooltipOptions): Promise<void>;
+    hide(anchor: HTMLElement): void;
+    private ensureEnhanced;
+}
+export type { TooltipPlacement, TooltipOptions };

package/dist/types/tooltip/ui-tooltip.d.ts

@@ -0,0 +1,35 @@
+import { TooltipPlacement } from './ui-tooltip-service';
+export declare class UiTooltip implements EventListenerObject {
+    private readonly host;
+    private readonly tooltipService;
+    private openTimer;
+    private closeTimer;
+    private pointerInside;
+    private focusInside;
+    private described;
+    text: string | undefined;
+    textChanged(): void;
+    placement: TooltipPlacement;
+    placementChanged(): void;
+    offset: number;
+    offsetChanged(): void;
+    openDelay: number;
+    closeDelay: number;
+    disabled: boolean;
+    disabledChanged(): void;
+    attaching(): void;
+    detaching(): void;
+    handleEvent(event: Event): void;
+    private scheduleOpen;
+    private scheduleClose;
+    private closeNow;
+    private getOptions;
+    private canOpen;
+    private getDelay;
+    private clearTimers;
+    private clearOpenTimer;
+    private clearCloseTimer;
+    private addDescribedBy;
+    private removeDescribedBy;
+    private getDescribedByIds;
+}

package/dist/types/top-app-bar/ui-top-app-bar.d.ts

@@ -0,0 +1,9 @@
+export declare class UiTopAppBar {
+    sticky: boolean;
+    fixed: boolean;
+    dense: boolean;
+    elevated: boolean;
+    navigationNodes: readonly Node[];
+    breadcrumbNodes: readonly Node[];
+    actionNodes: readonly Node[];
+}

package/dist/types/tree/ui-tree.d.ts

@@ -0,0 +1,70 @@
+type TreeField<T> = string | ((item: T) => unknown);
+type TreeSelectionMode = 'single' | 'none';
+export interface UiTreeRow {
+    id: string;
+    item: unknown;
+    value: unknown;
+    label: string;
+    depth: number;
+    parent: UiTreeRow | undefined;
+    children: UiTreeRow[];
+    expanded: boolean;
+    disabled: boolean;
+    posInSet: number;
+    setSize: number;
+    element: HTMLElement | undefined;
+    slotHost: UiTreeRowSlotHost;
+}
+export interface UiTreeRowSlotHost {
+    item: unknown;
+    row: UiTreeRow;
+}
+export declare class UiTree {
+    private readonly host;
+    private expandedValues;
+    items: unknown[];
+    itemsChanged(): void;
+    value: unknown;
+    valueChanged(): void;
+    label: string | undefined;
+    childrenField: TreeField<unknown>;
+    childrenFieldChanged(): void;
+    valueField: TreeField<unknown>;
+    valueFieldChanged(): void;
+    labelField: TreeField<unknown>;
+    labelFieldChanged(): void;
+    disabledField: TreeField<unknown>;
+    disabledFieldChanged(): void;
+    expandedField: TreeField<unknown>;
+    expandedFieldChanged(): void;
+    selectionMode: TreeSelectionMode;
+    disabled: boolean;
+    visibleRows: UiTreeRow[];
+    activeValue: unknown;
+    binding(): void;
+    onRowClick(row: UiTreeRow): void;
+    onToggleClick(row: UiTreeRow, event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private rebuildRows;
+    private buildRows;
+    private flattenVisibleRows;
+    private getChildren;
+    private getLabel;
+    private getBooleanFieldValue;
+    private getFieldValue;
+    private getFocusedRow;
+    private focusSibling;
+    private expandOrEnter;
+    private collapseOrExit;
+    private focusFirst;
+    private focusLast;
+    private get enabledRows();
+    private focusRow;
+    private selectRow;
+    private toggleRow;
+    private expandRow;
+    private collapseRow;
+    private restoreFocus;
+    private dispatchValueEvent;
+}
+export {};

package/dist/types/validation/ui-validation-controller-factory.d.ts

@@ -0,0 +1,7 @@
+import { IContainer, IFactory, Constructable, Transformer, Key } from '@aurelia/kernel';
+import { IValidationController } from '@aurelia/validation-html';
+export declare class UiValidationControllerFactory implements IFactory<Constructable<IValidationController>> {
+    Type: Constructable<IValidationController>;
+    registerTransformer(_transformer: Transformer<Constructable<IValidationController>>): boolean;
+    construct(_: IContainer, _dynamicDependencies?: Key[] | undefined): IValidationController;
+}

package/dist/types/validation/ui-validation-result-presenter.d.ts

@@ -0,0 +1,4 @@
+import { ValidationEvent, ValidationResultsSubscriber } from '@aurelia/validation-html';
+export declare class UiValidationResultPresenter implements ValidationResultsSubscriber {
+    handleValidationEvent(event: ValidationEvent): void;
+}

package/dist/types/validation/validate.d.ts

@@ -0,0 +1,13 @@
+import { IValidationController } from '@aurelia/validation-html';
+interface AlertService {
+    error(message: string): Promise<void> | void;
+}
+export interface IWithValidationController {
+    validationController: IValidationController;
+    alertService: AlertService;
+}
+/**
+ * @param errorMessage Optional error message, not displayed if `null`
+ */
+export declare function validate(errorMessage?: string | undefined | null): <This extends IWithValidationController, Args extends any[], Return>(originalMethod: (this: This, ...args: Args) => Return, _: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) => (this: This, ...args: Args) => Promise<Return | undefined>;
+export {};

package/dist/validation/ui-validation-controller-factory.js

@@ -0,0 +1,17 @@
+import { ValidationController } from '@aurelia/validation-html';
+import { UiValidationResultPresenter } from './ui-validation-result-presenter';
+export class UiValidationControllerFactory {
+    Type = (void 0);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    registerTransformer(_transformer) {
+        return false;
+    }
+    construct(_, _dynamicDependencies) {
+        const controller = _dynamicDependencies !== void 0
+            ? Reflect.construct(ValidationController, _dynamicDependencies)
+            : new ValidationController();
+        controller.addSubscriber(new UiValidationResultPresenter());
+        return controller;
+    }
+}
+//# sourceMappingURL=ui-validation-controller-factory.js.map

package/dist/validation/ui-validation-controller-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-validation-controller-factory.js","sourceRoot":"","sources":["../../src/validation/ui-validation-controller-factory.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAE/E,MAAM,OAAO,6BAA6B;IACjC,IAAI,GAAyC,CAAC,KAAK,CAAC,CAAE,CAAC;IAE9D,6DAA6D;IACtD,mBAAmB,CAAC,YAA+D;QACxF,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,SAAS,CAAC,CAAa,EAAE,oBAAwC;QACtE,MAAM,UAAU,GAA0B,oBAAoB,KAAK,KAAK,CAAC;YACvE,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;YAC/D,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC;QAC/B,UAAU,CAAC,aAAa,CAAC,IAAI,2BAA2B,EAAE,CAAC,CAAC;QAC5D,OAAO,UAAU,CAAC;IACpB,CAAC;CACF","sourcesContent":["import { IContainer, IFactory, Constructable, Transformer, Key } from '@aurelia/kernel';\r\nimport { IValidationController, ValidationController } from '@aurelia/validation-html';\r\nimport { UiValidationResultPresenter } from './ui-validation-result-presenter';\r\n\r\nexport class UiValidationControllerFactory implements IFactory<Constructable<IValidationController>> {\r\n  public Type: Constructable<IValidationController> = (void 0)!;\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n  public registerTransformer(_transformer: Transformer<Constructable<IValidationController>>): boolean {\r\n    return false;\r\n  }\r\n\r\n  public construct(_: IContainer, _dynamicDependencies?: Key[] | undefined): IValidationController {\r\n    const controller: IValidationController = _dynamicDependencies !== void 0\r\n      ? Reflect.construct(ValidationController, _dynamicDependencies)\r\n      : new ValidationController();\r\n    controller.addSubscriber(new UiValidationResultPresenter());\r\n    return controller;\r\n  }\r\n}\r\n"]}

package/dist/validation/ui-validation-result-presenter.js

@@ -0,0 +1,23 @@
+export class UiValidationResultPresenter {
+    handleValidationEvent(event) {
+        for (let i = 0; i < event.removedResults.length; ++i) {
+            const ri = event.removedResults[i];
+            for (let j = 0; j < ri.targets.length; ++j) {
+                const el = ri.targets[j];
+                if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'removeError')) {
+                    el.removeError(ri.result);
+                }
+            }
+        }
+        for (let i = 0; i < event.addedResults.length; ++i) {
+            const ri = event.addedResults[i];
+            for (let j = 0; j < ri.targets.length; ++j) {
+                const el = ri.targets[j];
+                if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'addError')) {
+                    el.addError(ri.result);
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=ui-validation-result-presenter.js.map

package/dist/validation/ui-validation-result-presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-validation-result-presenter.js","sourceRoot":"","sources":["../../src/validation/ui-validation-result-presenter.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,2BAA2B;IACtC,qBAAqB,CAAC,KAAsB;QAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;YACrD,MAAM,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;YACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;gBAC3C,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAsB,CAAC;gBAC9C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,wBAAwB,CAAC,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC;oBAC3E,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;YACnD,MAAM,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;gBAC3C,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAsB,CAAC;gBAC9C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,wBAAwB,CAAC,EAAE,EAAE,UAAU,CAAC,EAAE,CAAC;oBACxE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;CACF","sourcesContent":["import { IValidatedElement } from '../base/i-validated-element';\r\nimport { ValidationEvent, ValidationResultsSubscriber } from '@aurelia/validation-html';\r\n\r\nexport class UiValidationResultPresenter implements ValidationResultsSubscriber {\r\n  handleValidationEvent(event: ValidationEvent): void {\r\n    for (let i = 0; i < event.removedResults.length; ++i) {\r\n      const ri = event.removedResults[i];\r\n      for (let j = 0; j < ri.targets.length; ++j) {\r\n        const el = ri.targets[j] as IValidatedElement;\r\n        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'removeError')) {\r\n          el.removeError(ri.result);\r\n        }\r\n      }\r\n    }\r\n\r\n    for (let i = 0; i < event.addedResults.length; ++i) {\r\n      const ri = event.addedResults[i];\r\n      for (let j = 0; j < ri.targets.length; ++j) {\r\n        const el = ri.targets[j] as IValidatedElement;\r\n        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'addError')) {\r\n          el.addError(ri.result);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/validation/validate.js

@@ -0,0 +1,24 @@
+/**
+ * @param errorMessage Optional error message, not displayed if `null`
+ */
+export function validate(errorMessage) {
+    return function actualDecorator(originalMethod, _) {
+        return async function replacementMethod(...args) {
+            if (!this.alertService) {
+                throw new Error('Did you forget to inject AlertService?');
+            }
+            if (!this.validationController) {
+                throw new Error('Did you forget to create ValidationController?');
+            }
+            const errors = await this.validationController.validate();
+            if (!errors.valid) {
+                if (errorMessage !== null && this.alertService) {
+                    await this.alertService.error(errorMessage ?? 'Please fix validation errors');
+                }
+                return;
+            }
+            return originalMethod.call(this, ...args);
+        };
+    };
+}
+//# sourceMappingURL=validate.js.map

package/dist/validation/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["../../src/validation/validate.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,YAAwC;IAC/D,OAAO,SAAS,eAAe,CAAqE,cAAqD,EACvJ,CAA2E;QAC3E,OAAO,KAAK,UAAU,iBAAiB,CAAa,GAAG,IAAU;YAC/D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;YAC5D,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC/B,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;YACpE,CAAC;YACD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC;YAC1D,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;gBAClB,IAAI,YAAY,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;oBAC/C,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,IAAI,8BAA8B,CAAC,CAAC;gBAChF,CAAC;gBACD,OAAO;YACT,CAAC;YACD,OAAO,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;QAC5C,CAAC,CAAC;IACJ,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { IValidationController } from '@aurelia/validation-html';\n\ninterface AlertService {\n  error(message: string): Promise<void> | void;\n}\n\nexport interface IWithValidationController {\n  validationController: IValidationController;\n  alertService: AlertService;\n}\n\n/**\n * @param errorMessage Optional error message, not displayed if `null`\n */\nexport function validate(errorMessage?: string | undefined | null) {\n  return function actualDecorator<This extends IWithValidationController, Args extends any[], Return>(originalMethod: (this: This, ...args: Args) => Return,\n    _: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {\n    return async function replacementMethod(this: This, ...args: Args) {\n      if (!this.alertService) {\n        throw new Error('Did you forget to inject AlertService?');\n      }\n      if (!this.validationController) {\n        throw new Error('Did you forget to create ValidationController?');\n      }\n      const errors = await this.validationController.validate();\n      if (!errors.valid) {\n        if (errorMessage !== null && this.alertService) {\n          await this.alertService.error(errorMessage ?? 'Please fix validation errors');\n        }\n        return;\n      }\n      return originalMethod.call(this, ...args);\n    };\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@aurelia-ui-toolkits/headless",
+  "version": "1.0.0",
+  "description": "Headless UI components for Aurelia 2",
+  "license": "MIT",
+  "author": "Maxim Balaganskiy <m.balaganskiy@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aurelia-ui-toolkits/aurelia-headless.git",
+    "directory": "packages/components"
+  },
+  "homepage": "https://aurelia-ui-toolkits.github.io/aurelia-headless/",
+  "bugs": {
+    "url": "https://github.com/aurelia-ui-toolkits/aurelia-headless/issues"
+  },
+  "keywords": [
+    "aurelia",
+    "aurelia2",
+    "headless",
+    "components",
+    "ui"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build:ts": "tsc -p tsconfig.build.json",
+    "build:other": "copyfiles -u 1 src/**/*.html dist",
+    "build": "npm run build:ts && npm run build:other"
+  },
+  "peerDependencies": {
+    "@aurelia/dialog": ">=2.0.0-rc.1",
+    "aurelia": ">=2.0.0-rc.1"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  }
+}

package/src/alert/ui-alert.html

@@ -0,0 +1,19 @@
+<template class="ui-alert"
+  role.bind="role"
+  show.bind="open"
+  data-tone.attr="tone"
+  data-dismissible.attr="dismissible ? '' : null">
+  <div class="ui-alert__icon" aria-hidden="true"></div>
+  <div class="ui-alert__content">
+    <strong class="ui-alert__title" if.bind="title">${title}</strong>
+    <div class="ui-alert__message">
+      <au-slot></au-slot>
+    </div>
+    <div class="ui-alert__actions" if.bind="actionNodes.length">
+      <au-slot name="actions"></au-slot>
+    </div>
+  </div>
+  <button class="ui-alert__close" type="button" if.bind="dismissible" click.trigger="close()" aria-label="Dismiss alert">
+    <span class="ui-alert__close-icon" aria-hidden="true"></span>
+  </button>
+</template>

package/src/alert/ui-alert.ts

@@ -0,0 +1,33 @@
+import { bindable, BindingMode, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-alert.html?raw';
+
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+
+@customElement({ name: 'ui-alert', template })
+export class UiAlert {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable
+  tone: AlertTone = 'info';
+
+  @bindable
+  title: string | undefined;
+
+  @bindable
+  role: 'status' | 'alert' | 'note' = 'status';
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  open: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  dismissible: boolean = false;
+
+  @slotted({ slotName: 'actions' })
+  actionNodes: readonly Node[] = [];
+
+  close(): void {
+    this.open = false;
+    this.host.dispatchEvent(new CustomEvent('alert-close', { bubbles: true }));
+  }
+}

package/src/alert-service/alert-configuration.ts

@@ -0,0 +1,11 @@
+import { AlertModal } from './alert-modal/alert-modal';
+import { PromptDialog } from './prompt-dialog/prompt-dialog';
+
+export class AlertConfiguration {
+  defaultAlertModal: new (...args: never[]) => object = AlertModal;
+  defaultPromptDialog: new (...args: never[]) => object = PromptDialog;
+  okText: string = 'Ok';
+  cancelText: string = 'Cancel';
+  yesText: string = 'Yes';
+  noText: string = 'No';
+}

package/src/alert-service/alert-modal/alert-modal.html

@@ -0,0 +1,12 @@
+<template class="ui-alert-modal" data-tone.attr="payload.tone ?? 'info'">
+  <div class="ui-alert-modal__icon" aria-hidden="true">${payload.icon}</div>
+  <div class="ui-alert-modal__body">
+    <h2 class="ui-alert-modal__title" if.bind="payload.caption">${payload.caption}</h2>
+    <p class="ui-alert-modal__message" if.bind="payload.message">${payload.message}</p>
+    <div class="ui-alert-modal__html" if.bind="payload.html" innerhtml.bind="payload.html"></div>
+    <div class="ui-alert-modal__actions">
+      <button ui-button outlined type="button" if.bind="payload.button1Text" click.trigger="close(payload.button1Action)">${payload.button1Text}</button>
+      <button ui-button primary type="button" if.bind="payload.button2Text" click.trigger="close(payload.button2Action)" autofocus>${payload.button2Text}</button>
+    </div>
+  </div>
+</template>

package/src/alert-service/alert-modal/alert-modal.ts

@@ -0,0 +1,19 @@
+import { IDialogController } from '@aurelia/dialog';
+import { customElement, resolve } from 'aurelia';
+import template from './alert-modal.html?raw';
+import { IAlertModalPayload } from './i-alert-modal-payload';
+
+@customElement({ name: 'alert-modal', template })
+export class AlertModal {
+  private readonly dialog = resolve(IDialogController);
+
+  payload: IAlertModalPayload = {};
+
+  activate(payload: IAlertModalPayload): void {
+    this.payload = payload;
+  }
+
+  close(action: string | undefined): Promise<unknown> {
+    return this.dialog.ok(action);
+  }
+}

package/src/alert-service/alert-modal/i-alert-modal-payload.ts

@@ -0,0 +1,14 @@
+export interface IAlertModalPayload {
+  icon?: string;
+  tone?: 'info' | 'success' | 'warning' | 'danger';
+  caption?: string;
+  message?: string;
+  html?: string;
+  button1Text?: string;
+  button2Text?: string;
+  button1Action?: string;
+  button2Action?: string;
+  defaultAction?: string;
+  successAction?: string;
+  defensive?: boolean;
+}