@aurelia-mdc-web/all 9.3.1-au2 → 9.3.3-au2

package/dist/alert/alert-configuration.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MdcAlertConfiguration = void 0;
+const alert_modal_1 = require("./alert-modal/alert-modal");
+const prompt_dialog_1 = require("./prompt-dialog/prompt-dialog");
+class MdcAlertConfiguration {
+    defaultAlertModal = alert_modal_1.AlertModal;
+    defaultPromptDialog = prompt_dialog_1.PromptDialog;
+    okText = 'Ok';
+    cancelText = 'Cancel';
+    yesText = 'Yes';
+    noText = 'No';
+}
+exports.MdcAlertConfiguration = MdcAlertConfiguration;
+//# sourceMappingURL=alert-configuration.js.map

package/dist/alert/alert-configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-configuration.js","sourceRoot":"","sources":["../../src/alert/alert-configuration.ts"],"names":[],"mappings":";;;AAAA,2DAAuD;AACvD,iEAA6D;AAE7D,MAAa,qBAAqB;IAChC,iBAAiB,GAAgC,wBAAU,CAAC;IAC5D,mBAAmB,GAAgC,4BAAY,CAAC;IAChE,MAAM,GAAW,IAAI,CAAC;IACtB,UAAU,GAAW,QAAQ,CAAC;IAC9B,OAAO,GAAW,KAAK,CAAC;IACxB,MAAM,GAAW,IAAI,CAAC;CACvB;AAPD,sDAOC","sourcesContent":["import { AlertModal } from './alert-modal/alert-modal';\nimport { PromptDialog } from './prompt-dialog/prompt-dialog';\n\nexport class MdcAlertConfiguration {\n  defaultAlertModal: new (...args: any[]) => any = AlertModal;\n  defaultPromptDialog: new (...args: any[]) => any = PromptDialog;\n  okText: string = 'Ok';\n  cancelText: string = 'Cancel';\n  yesText: string = 'Yes';\n  noText: string = 'No';\n}\n"]}

package/dist/alert/alert-modal/alert-modal.html

@@ -0,0 +1,27 @@
+<mdc-dialog class="alert-modal">
+  <mdc-dialog-title if.bind="payload.caption">${payload.caption}</mdc-dialog-title>
+  <mdc-dialog-content class='alert-modal__dialog-content'>
+    <mdc-icon class="${payload.iconColour}">${payload.icon}</mdc-icon>
+    <span if.bind="payload.message">${payload.message}</span>
+    <div if.bind="payload.html" innerhtml.bind="payload.html"></div>
+  </mdc-dialog-content>
+  <mdc-dialog-actions>
+    <template if.bind="payload.button1Action === payload.defaultAction">
+      <button mdc-button data-mdc-dialog-action.bind="payload.button1Action" data-mdc-dialog-button-default
+        data-mdc-dialog-initial-focus if.bind="payload.button1Text">${payload.button1Text}</button>
+    </template>
+    <template else>
+      <button mdc-button data-mdc-dialog-action.bind="payload.button1Action"
+        if.bind="payload.button1Text">${payload.button1Text}</button>
+    </template>
+
+    <template if.bind="payload.button2Action === payload.defaultAction">
+      <button mdc-button data-mdc-dialog-action.bind="payload.button2Action" data-mdc-dialog-button-default
+        data-mdc-dialog-initial-focus if.bind="payload.button2Text">${payload.button2Text}</button>
+    </template>
+    <template else>
+      <button mdc-button data-mdc-dialog-action.bind="payload.button2Action"
+        if.bind="payload.button2Text">${payload.button2Text}</button>
+    </template>
+  </mdc-dialog-actions>
+</mdc-dialog>

package/dist/alert/alert-modal/alert-modal.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertModal = void 0;
+const tslib_1 = require("tslib");
+const alert_modal_html_raw_1 = tslib_1.__importDefault(require("./alert-modal.html?raw"));
+const aurelia_1 = require("aurelia");
+require("./alert-modal.scss");
+let AlertModal = (() => {
+    let _classDecorators = [(0, aurelia_1.customElement)({ name: 'alert-modal', template: alert_modal_html_raw_1.default })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var AlertModal = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            AlertModal = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
+        }
+        payload;
+        loading(payload) {
+            this.payload = payload;
+        }
+    };
+    return AlertModal = _classThis;
+})();
+exports.AlertModal = AlertModal;
+//# sourceMappingURL=alert-modal.js.map

package/dist/alert/alert-modal/alert-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-modal.js","sourceRoot":"","sources":["../../../src/alert/alert-modal/alert-modal.ts"],"names":[],"mappings":";;;;AACA,0FAA8C;AAC9C,qCAAwC;AACxC,8BAA2B;IAGd,UAAU;4BADtB,IAAA,uBAAa,EAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAR,8BAAQ,EAAE,CAAC;;;;;;;;YACjD,qLAMC;;;YANY,+DAAU;;QACrB,OAAO,CAAqB;QAE5B,OAAO,CAAC,OAA2B;YACjC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACzB,CAAC;;;;AALU,gCAAU","sourcesContent":["import { IAlertModalPayload } from './i-alert-modal-payload';\r\nimport template from './alert-modal.html?raw';\r\nimport { customElement } from 'aurelia';\r\nimport './alert-modal.scss'\r\n\r\n@customElement({ name: 'alert-modal', template })\r\nexport class AlertModal {\r\n  payload: IAlertModalPayload;\r\n\r\n  loading(payload: IAlertModalPayload) {\r\n    this.payload = payload;\r\n  }\r\n}\r\n"]}

package/dist/alert/alert-modal/i-alert-modal-payload.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IAlertModalPayload = void 0;
+class IAlertModalPayload {
+    icon;
+    iconColour;
+    caption;
+    message;
+    html;
+    okText;
+    cancelText;
+}
+exports.IAlertModalPayload = IAlertModalPayload;
+//# sourceMappingURL=i-alert-modal-payload.js.map

package/dist/alert/alert-modal/i-alert-modal-payload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i-alert-modal-payload.js","sourceRoot":"","sources":["../../../src/alert/alert-modal/i-alert-modal-payload.ts"],"names":[],"mappings":";;;AAAA,MAAa,kBAAkB;IAC7B,IAAI,CAAS;IACb,UAAU,CAAS;IACnB,OAAO,CAAU;IACjB,OAAO,CAAU;IACjB,IAAI,CAAU;IACd,MAAM,CAAS;IACf,UAAU,CAAS;CACpB;AARD,gDAQC","sourcesContent":["export class IAlertModalPayload {\r\n  icon: string;\r\n  iconColour: string;\r\n  caption?: string;\r\n  message?: string;\r\n  html?: string;\r\n  okText: string;\r\n  cancelText: string;\r\n}\r\n"]}

package/dist/alert/alert-service.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertService = void 0;
+const Subject_1 = require("rxjs/internal/Subject");
+const BehaviorSubject_1 = require("rxjs/internal/BehaviorSubject");
+const merge_1 = require("rxjs/internal/observable/merge");
+const map_1 = require("rxjs/internal/operators/map");
+const scan_1 = require("rxjs/internal/operators/scan");
+const alert_modal_1 = require("./alert-modal/alert-modal");
+const prompt_dialog_1 = require("./prompt-dialog/prompt-dialog");
+const exceptions_tracker_1 = require("./exceptions-tracker");
+const aurelia_1 = require("aurelia");
+const mdc_configuration_1 = require("../mdc-configuration");
+const mdc_dialog_service_1 = require("../dialog/mdc-dialog-service");
+class AlertService {
+    dialogService = (0, aurelia_1.resolve)(mdc_dialog_service_1.MdcDialogService);
+    exceptionsTracker = (0, aurelia_1.resolve)(exceptions_tracker_1.ExceptionsTracker);
+    configuration = (0, aurelia_1.resolve)(mdc_configuration_1.MdcConfiguration);
+    increment$ = new Subject_1.Subject();
+    decrement$ = new Subject_1.Subject();
+    busy$ = new BehaviorSubject_1.BehaviorSubject(false);
+    busyAccumulator$ = (0, merge_1.merge)(this.increment$.pipe((0, map_1.map)(() => 1)), this.decrement$.pipe((0, map_1.map)(() => -1)))
+        .pipe((0, scan_1.scan)((acc, v) => acc += v, 0), (0, map_1.map)(v => v > 0)).subscribe(this.busy$);
+    allowCancel$ = new Subject_1.Subject();
+    showProgress() {
+        this.increment$.next();
+    }
+    hideProgress() {
+        this.decrement$.next();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async usingProgress(action, catchHandler, allowCancel) {
+        try {
+            this.allowCancel$.next(allowCancel ?? false);
+            this.showProgress();
+            return await action();
+        }
+        catch (e) {
+            if (catchHandler) {
+                return await catchHandler(e);
+            }
+            else {
+                throw e;
+            }
+        }
+        finally {
+            this.hideProgress();
+        }
+    }
+    async open(options) {
+        try {
+            this.hideProgress();
+            return await this.dialogService.open(options);
+        }
+        finally {
+            this.showProgress();
+        }
+    }
+    async showModal(model) {
+        return await this.open({ viewModel: alert_modal_1.AlertModal, model });
+    }
+    async alert(message) {
+        if (typeof message === 'string') {
+            message = { message };
+        }
+        const model = {
+            icon: 'info',
+            iconColour: 'mdc-theme--primary',
+            okText: this.configuration.alert.okText,
+            ...message
+        };
+        return await this.showModal(model) === 'ok';
+    }
+    async confirm(message) {
+        if (typeof message === 'string') {
+            message = { message };
+        }
+        const model = {
+            icon: 'help',
+            iconColour: 'mdc-theme--primary',
+            okText: this.configuration.alert.yesText,
+            cancelText: this.configuration.alert.noText,
+            ...message
+        };
+        return await this.showModal(model) === 'ok';
+    }
+    async prompt(data) {
+        data.okText ??= this.configuration.alert.okText;
+        data.cancelText ??= this.configuration.alert.cancelText;
+        return await this.open({ viewModel: prompt_dialog_1.PromptDialog, model: data }) === 'ok';
+    }
+    async error(message) {
+        if (typeof message === 'string') {
+            message = { message };
+        }
+        message.icon = 'error';
+        message.iconColour = 'mdc-theme--error';
+        return this.alert(message);
+    }
+    async criticalError(message, error) {
+        this.exceptionsTracker.track(error);
+        return this.error(message);
+    }
+}
+exports.AlertService = AlertService;
+//# sourceMappingURL=alert-service.js.map

package/dist/alert/alert-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-service.js","sourceRoot":"","sources":["../../src/alert/alert-service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Subject } from 'rxjs/internal/Subject';\nimport { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';\nimport { merge } from 'rxjs/internal/observable/merge';\nimport { map } from 'rxjs/internal/operators/map';\nimport { scan } from 'rxjs/internal/operators/scan';\nimport { AlertModal } from './alert-modal/alert-modal';\nimport { IPromptDialogData, PromptDialog } from './prompt-dialog/prompt-dialog';\nimport { ExceptionsTracker } from './exceptions-tracker';\nimport { IAlertModalPayload } from './alert-modal/i-alert-modal-payload';\nimport { resolve } from 'aurelia';\nimport { MdcConfiguration } from '../mdc-configuration';\nimport { MdcDialogService, IMdcDialogOptions } from '../dialog/mdc-dialog-service';\n\nexport class AlertService {\n  private dialogService: MdcDialogService = resolve(MdcDialogService);\n  private exceptionsTracker: ExceptionsTracker = resolve(ExceptionsTracker);\n  private configuration = resolve(MdcConfiguration);\n\n  increment$ = new Subject<void>();\n  decrement$ = new Subject<void>();\n  busy$ = new BehaviorSubject<boolean>(false);\n  busyAccumulator$ = merge(this.increment$.pipe(map(() => 1)), this.decrement$.pipe(map(() => -1)))\n    .pipe(\n      scan((acc, v) => acc += v, 0),\n      map(v => v > 0)\n    ).subscribe(this.busy$);\n  allowCancel$ = new Subject<boolean>();\n\n  showProgress() {\n    this.increment$.next();\n  }\n\n  hideProgress() {\n    this.decrement$.next();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  async usingProgress<T, E = never>(action: () => Promise<T>, catchHandler?: (e: any) => Promise<E> | E, allowCancel?: boolean): Promise<T | E> {\n    try {\n      this.allowCancel$.next(allowCancel ?? false);\n      this.showProgress();\n      return await action();\n    } catch (e) {\n      if (catchHandler) {\n        return await catchHandler(e);\n      } else {\n        throw e;\n      }\n    } finally {\n      this.hideProgress();\n    }\n  }\n\n  async open<T extends { loading: (params: any) => any; }>(options: IMdcDialogOptions<T>): Promise<string> {\n    try {\n      this.hideProgress();\n      return await this.dialogService.open(options);\n    } finally {\n      this.showProgress();\n    }\n  }\n\n  async showModal(model: Partial<IAlertModalPayload>): Promise<string> {\n    return await this.open({ viewModel: AlertModal, model });\n  }\n\n  async alert(message: string | Partial<IAlertModalPayload>): Promise<boolean> {\n    if (typeof message === 'string') {\n      message = { message };\n    }\n    const model: Partial<IAlertModalPayload> = {\n      icon: 'info',\n      iconColour: 'mdc-theme--primary',\n      okText: this.configuration.alert.okText,\n      ...message\n    };\n    return await this.showModal(model) === 'ok';\n  }\n\n  async confirm(message: string | Partial<IAlertModalPayload>): Promise<boolean> {\n    if (typeof message === 'string') {\n      message = { message };\n    }\n    const model: IAlertModalPayload = {\n      icon: 'help',\n      iconColour: 'mdc-theme--primary',\n      okText: this.configuration.alert.yesText,\n      cancelText: this.configuration.alert.noText,\n      ...message\n    };\n    return await this.showModal(model) === 'ok';\n  }\n\n  async prompt(data: Partial<IPromptDialogData>): Promise<boolean> {\n    data.okText ??= this.configuration.alert.okText;\n    data.cancelText ??= this.configuration.alert.cancelText;\n    return await this.open({ viewModel: PromptDialog, model: data }) === 'ok';\n  }\n\n  async error(message: string | Partial<IAlertModalPayload>): Promise<boolean> {\n    if (typeof message === 'string') {\n      message = { message };\n    }\n    message.icon = 'error';\n    message.iconColour = 'mdc-theme--error';\n    return this.alert(message);\n  }\n\n  async criticalError(message: string | Partial<IAlertModalPayload>, error: Error): Promise<boolean> {\n    this.exceptionsTracker.track(error);\n    return this.error(message);\n  }\n}\n"]}

package/dist/alert/decorators/confirm-action.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.confirmAction = confirmAction;
+function confirmAction(message) {
+    return function actualDecorator(originalMethod, _) {
+        return async function replacementMethod(...args) {
+            if (!this.alertService) {
+                throw new Error('Did you forget to inject AlertService?');
+            }
+            if (!await this.alertService.confirm(message)) {
+                return;
+            }
+            return originalMethod.call(this, args);
+        };
+    };
+}
+//# sourceMappingURL=confirm-action.js.map

package/dist/alert/decorators/confirm-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-action.js","sourceRoot":"","sources":["../../../src/alert/decorators/confirm-action.ts"],"names":[],"mappings":";;AAGA,sCAcC;AAdD,SAAgB,aAAa,CAAC,OAA6C;IACzE,OAAO,SAAS,eAAe,CAA6D,cAAqD,EAC/I,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;YAED,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACT,CAAC;YACD,OAAO,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { IAlertModalPayload } from '../alert-modal/i-alert-modal-payload';\nimport { IWithAlertService } from './using-progress';\n\nexport function confirmAction(message: string | Partial<IAlertModalPayload>) {\n  return function actualDecorator<This extends IWithAlertService, 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\n      if (!await this.alertService.confirm(message)) {\n        return;\n      }\n      return originalMethod.call(this, args);\n    };\n  };\n}\n"]}

package/dist/alert/decorators/using-progress.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usingProgress = usingProgress;
+function usingProgress(errorMessage, allowCancel = false) {
+    return function actualDecorator(originalMethod, _) {
+        return function replacementMethod(...args) {
+            if (!this.alertService) {
+                throw new Error('Did you forget to inject AlertService?');
+            }
+            const abortController = new AbortController();
+            document.addEventListener('global-progress:cancel', () => abortController.abort(), { once: true });
+            return this.alertService.usingProgress(async () => {
+                return originalMethod.call(this, ...args, abortController.signal);
+            }, async (e) => {
+                const message = errorMessage instanceof Function ? errorMessage(e) : errorMessage;
+                if (e.nonCritical) {
+                    await this.alertService.error(message ?? e.message);
+                }
+                else {
+                    await this.alertService.criticalError(message ?? e.message, e);
+                }
+                throw e;
+            }, allowCancel);
+        };
+    };
+}
+//# sourceMappingURL=using-progress.js.map

package/dist/alert/decorators/using-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"using-progress.js","sourceRoot":"","sources":["../../../src/alert/decorators/using-progress.ts"],"names":[],"mappings":";;AAOA,sCAsBC;AAtBD,SAAgB,aAAa,CAAC,YAA0E,EAAE,cAAuB,KAAK;IACpI,OAAO,SAAS,eAAe,CAA6D,cAAqD,EAC/I,CAA2E;QAC3E,OAAO,SAAS,iBAAiB,CAAa,GAAG,IAAU;YACzD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;YAC5D,CAAC;YACD,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;YAC9C,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YACnG,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE;gBAChD,OAAO,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;YACpE,CAAC,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;gBACX,MAAM,OAAO,GAAG,YAAY,YAAY,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;gBAClF,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;oBAClB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;gBACtD,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;gBACjE,CAAC;gBACD,MAAM,CAAC,CAAC;YACV,CAAC,EAAE,WAAW,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { IAlertModalPayload } from '../alert-modal/i-alert-modal-payload';\nimport { AlertService } from '../alert-service';\n\nexport interface IWithAlertService {\n  alertService: AlertService;\n}\n\nexport function usingProgress(errorMessage?: string | Partial<IAlertModalPayload> | ((e: any) => string), allowCancel: boolean = false) {\n  return function actualDecorator<This extends IWithAlertService, Args extends any[], Return>(originalMethod: (this: This, ...args: Args) => Return,\n    _: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {\n    return function replacementMethod(this: This, ...args: Args) {\n      if (!this.alertService) {\n        throw new Error('Did you forget to inject AlertService?');\n      }\n      const abortController = new AbortController();\n      document.addEventListener('global-progress:cancel', () => abortController.abort(), { once: true });\n      return this.alertService.usingProgress(async () => {\n        return originalMethod.call(this, ...args, abortController.signal);\n      }, async e => {\n        const message = errorMessage instanceof Function ? errorMessage(e) : errorMessage;\n        if (e.nonCritical) {\n          await this.alertService.error(message ?? e.message);\n        } else {\n          await this.alertService.criticalError(message ?? e.message, e);\n        }\n        throw e;\n      }, allowCancel);\n    };\n  }\n}\n"]}

package/dist/alert/exceptions-tracker.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExceptionsTracker = void 0;
+class ExceptionsTracker {
+    track(_error) { }
+}
+exports.ExceptionsTracker = ExceptionsTracker;
+//# sourceMappingURL=exceptions-tracker.js.map

package/dist/alert/exceptions-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exceptions-tracker.js","sourceRoot":"","sources":["../../src/alert/exceptions-tracker.ts"],"names":[],"mappings":";;;AAAA,MAAa,iBAAiB;IAC5B,KAAK,CAAC,MAAa,IAAI,CAAC;CACzB;AAFD,8CAEC","sourcesContent":["export class ExceptionsTracker {\r\n  track(_error: Error) { }\r\n}\r\n"]}

package/dist/alert/global-progress/global-progress.html

@@ -0,0 +1,9 @@
+<template class="global-progress">
+  <div class="progress-background"></div>
+  <div>
+    <mdc-circular-progress size.bind="size" stroke-width.bind="strokeWidth" progress.bind="progress">
+    </mdc-circular-progress>
+    <div>${text}</div>
+    <a if.bind="allowCancel" href="#" click.trigger="cancel()">${allowCancel === true ? 'Cancel' : allowCancel}</a>
+  </div>
+</template>

package/dist/alert/global-progress/global-progress.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalProgress = void 0;
+const tslib_1 = require("tslib");
+const aurelia_1 = require("aurelia");
+const global_progress_html_raw_1 = tslib_1.__importDefault(require("./global-progress.html?raw"));
+require("./global-progress.scss");
+let GlobalProgress = (() => {
+    let _classDecorators = [(0, aurelia_1.customElement)({ name: 'global-progress', template: global_progress_html_raw_1.default })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _strokeWidth_decorators;
+    let _strokeWidth_initializers = [];
+    let _strokeWidth_extraInitializers = [];
+    let _progress_decorators;
+    let _progress_initializers = [];
+    let _progress_extraInitializers = [];
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _allowCancel_decorators;
+    let _allowCancel_initializers = [];
+    let _allowCancel_extraInitializers = [];
+    var GlobalProgress = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _size_decorators = [(0, aurelia_1.bindable)({ type: Number })];
+            _strokeWidth_decorators = [(0, aurelia_1.bindable)({ type: Number })];
+            _progress_decorators = [(0, aurelia_1.bindable)({ type: Number })];
+            _text_decorators = [aurelia_1.bindable];
+            _allowCancel_decorators = [aurelia_1.bindable];
+            tslib_1.__esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            tslib_1.__esDecorate(null, null, _strokeWidth_decorators, { kind: "field", name: "strokeWidth", static: false, private: false, access: { has: obj => "strokeWidth" in obj, get: obj => obj.strokeWidth, set: (obj, value) => { obj.strokeWidth = value; } }, metadata: _metadata }, _strokeWidth_initializers, _strokeWidth_extraInitializers);
+            tslib_1.__esDecorate(null, null, _progress_decorators, { kind: "field", name: "progress", static: false, private: false, access: { has: obj => "progress" in obj, get: obj => obj.progress, set: (obj, value) => { obj.progress = value; } }, metadata: _metadata }, _progress_initializers, _progress_extraInitializers);
+            tslib_1.__esDecorate(null, null, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+            tslib_1.__esDecorate(null, null, _allowCancel_decorators, { kind: "field", name: "allowCancel", static: false, private: false, access: { has: obj => "allowCancel" in obj, get: obj => obj.allowCancel, set: (obj, value) => { obj.allowCancel = value; } }, metadata: _metadata }, _allowCancel_initializers, _allowCancel_extraInitializers);
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            GlobalProgress = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
+        }
+        element;
+        constructor(element) {
+            tslib_1.__runInitializers(this, _allowCancel_extraInitializers);
+            this.element = element;
+        }
+        size = tslib_1.__runInitializers(this, _size_initializers, 100);
+        strokeWidth = (tslib_1.__runInitializers(this, _size_extraInitializers), tslib_1.__runInitializers(this, _strokeWidth_initializers, 10));
+        progress = (tslib_1.__runInitializers(this, _strokeWidth_extraInitializers), tslib_1.__runInitializers(this, _progress_initializers, void 0));
+        text = (tslib_1.__runInitializers(this, _progress_extraInitializers), tslib_1.__runInitializers(this, _text_initializers, void 0));
+        allowCancel = (tslib_1.__runInitializers(this, _text_extraInitializers), tslib_1.__runInitializers(this, _allowCancel_initializers, void 0));
+        cancel() {
+            this.element.dispatchEvent(new CustomEvent('global-progress:cancel', { bubbles: true }));
+        }
+    };
+    return GlobalProgress = _classThis;
+})();
+exports.GlobalProgress = GlobalProgress;
+//# sourceMappingURL=global-progress.js.map

package/dist/alert/global-progress/global-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-progress.js","sourceRoot":"","sources":["../../../src/alert/global-progress/global-progress.ts"],"names":[],"mappings":";;;;AAAA,qCAAkD;AAClD,kGAAkD;AAClD,kCAAgC;IAGnB,cAAc;4BAD1B,IAAA,uBAAa,EAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,QAAQ,EAAR,kCAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;gCAIlD,IAAA,kBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAG1B,IAAA,kBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAG1B,IAAA,kBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gCAG1B,kBAAQ;uCAGR,kBAAQ;YAXT,sKAAA,IAAI,6BAAJ,IAAI,mFAAe;YAGnB,2LAAA,WAAW,6BAAX,WAAW,iGAAc;YAGzB,kLAAA,QAAQ,6BAAR,QAAQ,2FAAU;YAGlB,sKAAA,IAAI,6BAAJ,IAAI,mFAAU;YAGd,2LAAA,WAAW,6BAAX,WAAW,iGAAmB;YAhBhC,qLAqBC;;;YArBY,+DAAc;;QACL,OAAO;QAA3B,YAAoB,OAAgB;;YAAhB,YAAO,GAAP,OAAO,CAAS;SAAK;QAGzC,IAAI,uDAAW,GAAG,EAAC;QAGnB,WAAW,yHAAW,EAAE,GAAC;QAGzB,QAAQ,sIAAU;QAGlB,IAAI,+HAAU;QAGd,WAAW,kIAAmB;QAE9B,MAAM;YACJ,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC3F,CAAC;;;;AApBU,wCAAc","sourcesContent":["import { bindable, customElement } from 'aurelia';\nimport template from './global-progress.html?raw';\nimport './global-progress.scss';\n\n@customElement({ name: 'global-progress', template })\nexport class GlobalProgress {\n  constructor(private element: Element) { }\n\n  @bindable({ type: Number })\n  size: number = 100;\n\n  @bindable({ type: Number })\n  strokeWidth: number = 10;\n\n  @bindable({ type: Number })\n  progress?: number;\n\n  @bindable\n  text?: string;\n\n  @bindable\n  allowCancel: boolean | string;\n\n  cancel() {\n    this.element.dispatchEvent(new CustomEvent('global-progress:cancel', { bubbles: true }));\n  }\n}\n"]}

package/dist/alert/prompt-dialog/prompt-dialog.html

@@ -0,0 +1,15 @@
+<mdc-dialog component.ref="dialog" class="prompt-dialog">
+  <mdc-dialog-title if.bind="data.title">${data.title}</mdc-dialog-title>
+  <mdc-dialog-content style="width: 500px">
+    <at-form-field>
+      <mdc-text-field label.bind="data.label" textarea.bind="data.textarea" value.bind="data.text & validate"
+        data-mdc-dialog-initial-focus>
+      </mdc-text-field>
+      <mdc-text-field-helper-line></mdc-text-field-helper-line>
+    </at-form-field>
+  </mdc-dialog-content>
+  <mdc-dialog-actions>
+    <button mdc-button data-mdc-dialog-action="cancel" if.bind="data.cancelText">${data.cancelText}</button>
+    <button mdc-button click.trigger="ok()" if.bind="data.okText">${data.okText}</button>
+  </mdc-dialog-actions>
+</mdc-dialog>

package/dist/alert/prompt-dialog/prompt-dialog.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptDialog = void 0;
+const tslib_1 = require("tslib");
+const prompt_dialog_html_raw_1 = tslib_1.__importDefault(require("./prompt-dialog.html?raw"));
+const aurelia_1 = require("aurelia");
+const validation_html_1 = require("@aurelia/validation-html");
+const validation_1 = require("@aurelia/validation");
+let PromptDialog = (() => {
+    let _classDecorators = [(0, aurelia_1.inject)((0, aurelia_1.newInstanceForScope)(validation_html_1.IValidationController), validation_1.IValidationRules), (0, aurelia_1.customElement)({ name: 'prompt-dialog', template: prompt_dialog_html_raw_1.default })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var PromptDialog = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            PromptDialog = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
+        }
+        validationController;
+        rules;
+        constructor(validationController, rules) {
+            this.validationController = validationController;
+            this.rules = rules;
+        }
+        dialog;
+        data;
+        loading(data) {
+            this.data = data;
+            this.rules.on(data).ensure(x => x.text).required().when(x => !!x?.required);
+        }
+        async ok() {
+            if ((await this.validationController.validate()).valid) {
+                this.dialog.close('ok');
+            }
+        }
+    };
+    return PromptDialog = _classThis;
+})();
+exports.PromptDialog = PromptDialog;
+//# sourceMappingURL=prompt-dialog.js.map

package/dist/alert/prompt-dialog/prompt-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-dialog.js","sourceRoot":"","sources":["../../../src/alert/prompt-dialog/prompt-dialog.ts"],"names":[],"mappings":";;;;AAAA,8FAA+C;AAC/C,qCAAqE;AACrE,8DAAiE;AACjE,oDAAuD;IAe1C,YAAY;4BAFxB,IAAA,gBAAM,EAAC,IAAA,6BAAmB,EAAC,uCAAqB,CAAC,EAAE,6BAAgB,CAAC,EACpE,IAAA,uBAAa,EAAC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAR,gCAAQ,EAAE,CAAC;;;;;;;;YACnD,qLAgBC;;;YAhBY,+DAAY;;QACH,oBAAoB;QAAiC,KAAK;QAA9E,YAAoB,oBAA2C,EAAU,KAAuB;YAA5E,yBAAoB,GAApB,oBAAoB,CAAuB;YAAU,UAAK,GAAL,KAAK,CAAkB;QAAI,CAAC;QAErG,MAAM,CAAY;QAClB,IAAI,CAAoB;QAExB,OAAO,CAAC,IAAuB;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9E,CAAC;QAED,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,MAAM,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;gBACvD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;;;;AAfU,oCAAY","sourcesContent":["import template from './prompt-dialog.html?raw'\nimport { customElement, inject, newInstanceForScope } from 'aurelia';\nimport { IValidationController } from '@aurelia/validation-html';\nimport { IValidationRules } from '@aurelia/validation';\nimport { MdcDialog } from '../../dialog/mdc-dialog';\n\nexport interface IPromptDialogData {\n  title: string;\n  label: string;\n  text: string;\n  required: boolean;\n  textarea: boolean;\n  okText: string;\n  cancelText: string;\n}\n\n@inject(newInstanceForScope(IValidationController), IValidationRules)\n@customElement({ name: 'prompt-dialog', template })\nexport class PromptDialog {\n  constructor(private validationController: IValidationController, private rules: IValidationRules) { }\n\n  dialog: MdcDialog;\n  data: IPromptDialogData;\n\n  loading(data: IPromptDialogData) {\n    this.data = data;\n    this.rules.on(data).ensure(x => x.text).required().when(x => !!x?.required);\n  }\n\n  async ok() {\n    if ((await this.validationController.validate()).valid) {\n      this.dialog.close('ok');\n    }\n  }\n}\n"]}

package/dist/banner/mdc-banner.html

@@ -1,21 +1,21 @@
-<template class="mdc-banner ${centered ? 'mdc-banner--centered' : ''}" role="banner"
-  mdc-focus-trap="initial-focus-el.bind: primaryActionEl" mdc-focus-trap.ref="mdcFocusTrap">
-  <div class="${fixed ? 'mdc-banner__fixed' : ''}">
-    <div class="mdc-banner__content" role="alertdialog" aria-live="assertive" ref="contentEl">
-      <div class="mdc-banner__graphic-text-wrapper">
-        <div class="mdc-banner__graphic" role="img" alt="" if.bind="icon">
-          <i class="material-icons mdc-banner__icon">${icon}</i>
-        </div>
-        <div class="mdc-banner__text">
-          <au-slot></au-slot>
-        </div>
-      </div>
-      <div class="mdc-banner__actions">
-        <button mdc-button class="mdc-banner__secondary-action" if.bind="secondaryAction"
-          click.trigger="handleSecondaryActionClick()">${secondaryAction}</button>
-        <button mdc-button class="mdc-banner__primary-action" if.bind="primaryAction"
-          click.trigger="handlePrimaryActionClick()" ref="primaryActionEl">${primaryAction}</button>
-      </div>
-    </div>
-  </div>
-</template>
+<template class="mdc-banner ${centered ? 'mdc-banner--centered' : ''}" role="banner"
+  mdc-focus-trap="initial-focus-el.bind: primaryActionEl" mdc-focus-trap.ref="mdcFocusTrap">
+  <div class="${fixed ? 'mdc-banner__fixed' : ''}">
+    <div class="mdc-banner__content" role="alertdialog" aria-live="assertive" ref="contentEl">
+      <div class="mdc-banner__graphic-text-wrapper">
+        <div class="mdc-banner__graphic" role="img" alt="" if.bind="icon">
+          <i class="material-icons mdc-banner__icon">${icon}</i>
+        </div>
+        <div class="mdc-banner__text">
+          <au-slot></au-slot>
+        </div>
+      </div>
+      <div class="mdc-banner__actions">
+        <button mdc-button class="mdc-banner__secondary-action" if.bind="secondaryAction"
+          click.trigger="handleSecondaryActionClick()">${secondaryAction}</button>
+        <button mdc-button class="mdc-banner__primary-action" if.bind="primaryAction"
+          click.trigger="handlePrimaryActionClick()" ref="primaryActionEl">${primaryAction}</button>
+      </div>
+    </div>
+  </div>
+</template>