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

package/src/typography/mdc-typography.ts

@@ -1,130 +1,130 @@
-import { inject, customAttribute } from 'aurelia';
-
-@inject(Element)
-class MdcTypography {
-  constructor(private root: HTMLElement) { }
-
-  type: 'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6'
-    | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
-
-  attached() {
-    this.root.classList.add(this.type ? `mdc-typography--${this.type}` : 'mdc-typography');
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline1')
-export class MdcHeadline1 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline1';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline2')
-export class MdcHeadline2 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline2';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline3')
-export class MdcHeadline3 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline3';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline4')
-export class MdcHeadline4 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline4';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline5')
-export class MdcHeadline5 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline5';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-headline6')
-export class MdcHeadline6 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'headline6';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-subtitle1')
-export class MdcSubtitle1 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'subtitle1';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-subtitle2')
-export class MdcSubtitle2 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'subtitle2';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-body1')
-export class MdcBody1 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'body1';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-body2')
-export class MdcBody2 extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'body2';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-caption')
-export class MdcCaption extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'caption';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-typography-button')
-export class MdcTypographyButton extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'button';
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-overline')
-export class MdcOveline extends MdcTypography {
-  constructor(root: HTMLElement){
-    super(root);
-    this.type = 'overline';
-  }
-}
+import { inject, customAttribute } from 'aurelia';
+
+@inject(Element)
+class MdcTypography {
+  constructor(private root: HTMLElement) { }
+
+  type: 'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6'
+    | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
+
+  attached() {
+    this.root.classList.add(this.type ? `mdc-typography--${this.type}` : 'mdc-typography');
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline1')
+export class MdcHeadline1 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline1';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline2')
+export class MdcHeadline2 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline2';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline3')
+export class MdcHeadline3 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline3';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline4')
+export class MdcHeadline4 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline4';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline5')
+export class MdcHeadline5 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline5';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-headline6')
+export class MdcHeadline6 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'headline6';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-subtitle1')
+export class MdcSubtitle1 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'subtitle1';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-subtitle2')
+export class MdcSubtitle2 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'subtitle2';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-body1')
+export class MdcBody1 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'body1';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-body2')
+export class MdcBody2 extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'body2';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-caption')
+export class MdcCaption extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'caption';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-typography-button')
+export class MdcTypographyButton extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'button';
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-overline')
+export class MdcOveline extends MdcTypography {
+  constructor(root: HTMLElement){
+    super(root);
+    this.type = 'overline';
+  }
+}

package/src/validation/mdc-validation-controller-factory.ts

@@ -1,20 +1,20 @@
-import { IContainer, IFactory, Constructable, Transformer, Key } from '@aurelia/kernel';
-import { IValidationController, ValidationController } from '@aurelia/validation-html';
-import { MdcValidationResultPresenter } from './mdc-validation-result-presenter';
-
-export class MdcValidationControllerFactory implements IFactory<Constructable<IValidationController>> {
-  public Type: Constructable<IValidationController> = (void 0)!;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public registerTransformer(_transformer: Transformer<Constructable<IValidationController>>): boolean {
-    return false;
-  }
-
-  public construct(_: IContainer, _dynamicDependencies?: Key[] | undefined): IValidationController {
-    const controller: IValidationController = _dynamicDependencies !== void 0
-      ? Reflect.construct(ValidationController, _dynamicDependencies)
-      : new ValidationController();
-    controller.addSubscriber(new MdcValidationResultPresenter());
-    return controller;
-  }
-}
+import { IContainer, IFactory, Constructable, Transformer, Key } from '@aurelia/kernel';
+import { IValidationController, ValidationController } from '@aurelia/validation-html';
+import { MdcValidationResultPresenter } from './mdc-validation-result-presenter';
+
+export class MdcValidationControllerFactory implements IFactory<Constructable<IValidationController>> {
+  public Type: Constructable<IValidationController> = (void 0)!;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public registerTransformer(_transformer: Transformer<Constructable<IValidationController>>): boolean {
+    return false;
+  }
+
+  public construct(_: IContainer, _dynamicDependencies?: Key[] | undefined): IValidationController {
+    const controller: IValidationController = _dynamicDependencies !== void 0
+      ? Reflect.construct(ValidationController, _dynamicDependencies)
+      : new ValidationController();
+    controller.addSubscriber(new MdcValidationResultPresenter());
+    return controller;
+  }
+}

package/src/validation/mdc-validation-result-presenter.ts

@@ -1,36 +1,36 @@
-import { IValidatedElement } from '../base';
-import { ValidationEvent, ValidationResultsSubscriber } from '@aurelia/validation-html';
-
-export class MdcValidationResultPresenter implements ValidationResultsSubscriber {
-  handleValidationEvent(event: ValidationEvent): void {
-    const elements = new Map<IValidatedElement, boolean>();
-
-    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] as IValidatedElement;
-        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'removeError')) {
-          el.removeError(ri.result);
-          elements.set(el, true);
-        }
-      }
-    }
-
-    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] as IValidatedElement;
-        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'addError')) {
-          el.addError(ri.result);
-          elements.set(el, true);
-        }
-      }
-    }
-
-    for (const el of elements.keys()) {
-      if (Object.getOwnPropertyDescriptor(el, 'renderErrors')) {
-        el.renderErrors();
-      }
-    }
-  }
-}
+import { IValidatedElement } from '../base';
+import { ValidationEvent, ValidationResultsSubscriber } from '@aurelia/validation-html';
+
+export class MdcValidationResultPresenter implements ValidationResultsSubscriber {
+  handleValidationEvent(event: ValidationEvent): void {
+    const elements = new Map<IValidatedElement, boolean>();
+
+    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] as IValidatedElement;
+        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'removeError')) {
+          el.removeError(ri.result);
+          elements.set(el, true);
+        }
+      }
+    }
+
+    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] as IValidatedElement;
+        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'addError')) {
+          el.addError(ri.result);
+          elements.set(el, true);
+        }
+      }
+    }
+
+    for (const el of elements.keys()) {
+      if (Object.getOwnPropertyDescriptor(el, 'renderErrors')) {
+        el.renderErrors();
+      }
+    }
+  }
+}

package/src/validation/validate.ts

@@ -0,0 +1,32 @@
+import { IValidationController } from '@aurelia/validation-html';
+import { AlertService } from '../alert/alert-service';
+
+export interface IWithValidationController {
+  validationController: IValidationController;
+  alertService: AlertService;
+}
+
+/**
+ * @param errorMessage Optional error message, not displayed if `null`
+ */
+export function validate(errorMessage?: string | undefined | null) {
+  return function actualDecorator<This extends IWithValidationController, Args extends any[], Return>(originalMethod: (this: This, ...args: Args) => Return,
+    _: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {
+    return async function replacementMethod(this: This, ...args: 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);
+    };
+  }
+}

package/styles/mdc-all.scss

@@ -1,52 +1,53 @@
-@use "@material/button/mdc-button";
-@use "@material/list/evolution-mixins" as list-evolution-mixins;
-@use "@material/list/mdc-list";
-@use "../src/list/styles" as auList;
-@use "@material/top-app-bar/mdc-top-app-bar";
-@use "@material/icon-button/mdc-icon-button";
-@use "@material/drawer/mdc-drawer";
-@use "@material/textfield/mdc-text-field";
-@use "../src/text-field/styles" as AuTextField;
-@use "@material/floating-label/mdc-floating-label";
-@use "@material/form-field/mdc-form-field";
-@use "@material/line-ripple/mdc-line-ripple";
-@use "@material/notched-outline/mdc-notched-outline";
-@use "@material/ripple/mdc-ripple";
-@use "@material/ripple/ripple-theme";
-@use "../src/ripple/styles" as auRipple;
-@use "@material/tab-bar/mdc-tab-bar";
-@use "@material/tab-scroller/mdc-tab-scroller";
-@use "@material/tab-indicator/mdc-tab-indicator";
-@use "@material/tab/mdc-tab";
-@use "@material/menu/mdc-menu";
-@use "@material/menu-surface/mdc-menu-surface";
-@use "@material/select/mdc-select";
-@use "@material/card/mdc-card";
-@use "@material/typography/mdc-typography";
-@use "@material/dialog/mdc-dialog";
-@use "@material/checkbox/mdc-checkbox";
-@use "@material/radio/mdc-radio";
-@use "@material/circular-progress/mdc-circular-progress";
-@use "@material/slider/slider";
-@use "../src/slider/styles" as auSlider;
-@use "@material/switch/styles" as switch-styles;
-@use "@material/fab/mdc-fab";
-@use "@material/fab/fab-theme";
-@use "../src/expandable/styles" as expandable;
-@use "@material/elevation/mdc-elevation";
-@use "@material/data-table/mdc-data-table";
-@use "../src/tree-view/styles" as tree-view;
-@use "@material/linear-progress/mdc-linear-progress";
-@use "@material/chips/deprecated/mdc-chips";
-@use "@material/chips/styles" as chips-styles;
-@use "@material/layout-grid/mdc-layout-grid";
-@use "../src/layout-grid/styles" as layout-grid;
-@use "@material/snackbar/mdc-snackbar";
-@use "@material/image-list/mdc-image-list";
-@use "../src/image-list/styles" as image-list;
-@use "@material/tooltip/styles" as tooltip-styles;
-@use "@material/banner/styles" as banner-styles;
-@use '@material/segmented-button/styles' as segmented-button-styles;
-
-@include slider.core-styles;
-@include list-evolution-mixins.core-styles;
+@use "@material/button/mdc-button";
+@use "@material/list/evolution-mixins" as list-evolution-mixins;
+@use "@material/list/mdc-list";
+@use "../src/list/styles" as auList;
+@use "@material/top-app-bar/mdc-top-app-bar";
+@use "@material/icon-button/mdc-icon-button";
+@use "@material/drawer/mdc-drawer";
+@use "@material/textfield/mdc-text-field";
+@use "../src/text-field/styles" as AuTextField;
+@use "@material/floating-label/mdc-floating-label";
+@use "@material/form-field/mdc-form-field";
+@use "@material/line-ripple/mdc-line-ripple";
+@use "@material/notched-outline/mdc-notched-outline";
+@use "@material/ripple/mdc-ripple";
+@use "@material/ripple/ripple-theme";
+@use "../src/ripple/styles" as auRipple;
+@use "@material/tab-bar/mdc-tab-bar";
+@use "@material/tab-scroller/mdc-tab-scroller";
+@use "@material/tab-indicator/mdc-tab-indicator";
+@use "@material/tab/mdc-tab";
+@use "@material/menu/mdc-menu";
+@use "@material/menu-surface/mdc-menu-surface";
+@use "@material/select/mdc-select";
+@use "@material/card/mdc-card";
+@use "@material/typography/mdc-typography";
+@use "@material/dialog/mdc-dialog";
+@use "@material/checkbox/mdc-checkbox";
+@use "@material/radio/mdc-radio";
+@use "@material/circular-progress/mdc-circular-progress";
+@use "@material/slider/slider";
+@use "../src/slider/styles" as auSlider;
+@use "@material/switch/styles" as switch-styles;
+@use "@material/fab/mdc-fab";
+@use "@material/fab/fab-theme";
+@use "../src/expandable/styles" as expandable;
+@use "@material/elevation/mdc-elevation";
+@use "@material/data-table/mdc-data-table";
+@use "../src/tree-view/styles" as tree-view;
+@use "@material/linear-progress/mdc-linear-progress";
+@use "@material/chips/deprecated/mdc-chips";
+@use "@material/chips/styles" as chips-styles;
+@use "@material/layout-grid/mdc-layout-grid";
+@use "../src/layout-grid/styles" as layout-grid;
+@use "@material/snackbar/mdc-snackbar";
+@use "@material/image-list/mdc-image-list";
+@use "../src/image-list/styles" as image-list;
+@use "@material/tooltip/styles" as tooltip-styles;
+@use "@material/banner/styles" as banner-styles;
+@use '@material/segmented-button/styles' as segmented-button-styles;
+@use "../src/data-table/styles" as data-table;
+
+@include slider.core-styles;
+@include list-evolution-mixins.core-styles;