@awc-ui/angular 1.0.0-beta → 1.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -22
- package/awc-ui.module.d.ts +37 -31
- package/directives/boolean-value-accessor.d.ts +2 -2
- package/directives/index.d.ts +1 -1
- package/directives/multi-select-value-accessor.d.ts +10 -0
- package/directives/number-value-accessor.d.ts +2 -2
- package/directives/proxies.d.ts +125 -125
- package/directives/radio-value-accessor.d.ts +36 -5
- package/directives/select-value-accessor.d.ts +2 -2
- package/directives/switch-value-accessor.d.ts +2 -2
- package/directives/text-value-accessor.d.ts +2 -2
- package/esm2022/awc-ui.module.mjs +32 -25
- package/esm2022/directives/boolean-value-accessor.mjs +3 -3
- package/esm2022/directives/multi-select-value-accessor.mjs +23 -0
- package/esm2022/directives/number-value-accessor.mjs +3 -3
- package/esm2022/directives/proxies.mjs +354 -108
- package/esm2022/directives/radio-value-accessor.mjs +94 -24
- package/esm2022/directives/select-value-accessor.mjs +4 -4
- package/esm2022/directives/switch-value-accessor.mjs +5 -2
- package/esm2022/directives/text-value-accessor.mjs +3 -3
- package/esm2022/index.mjs +2 -1
- package/fesm2022/awc-ui-angular.mjs +511 -167
- package/fesm2022/awc-ui-angular.mjs.map +1 -1
- package/index.d.ts +12 -11
- package/package.json +35 -4
package/README.md
CHANGED
|
@@ -1,41 +1,61 @@
|
|
|
1
|
-
# @awc-ui/angular
|
|
1
|
+
# Angular Web Components and Angular SSR — @awc-ui/angular
|
|
2
2
|
|
|
3
|
-
Angular
|
|
3
|
+
Angular 17+ integration for AWC UI.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`@awc-ui/angular` provides standalone component proxies and Angular form value
|
|
6
|
+
accessors. Imports register their custom elements automatically.
|
|
6
7
|
|
|
7
8
|
```bash
|
|
8
9
|
npm install @awc-ui/angular @awc-ui/core
|
|
9
10
|
```
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
12
|
+
Load the theme once in your application entry:
|
|
14
13
|
|
|
15
14
|
```ts
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
import '@awc-ui/core/css/tokens.css';
|
|
16
|
+
```
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
For a standalone component, import the controls and accessors into its template
|
|
19
|
+
scope, alongside Angular's forms module:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { Component } from '@angular/core';
|
|
23
|
+
import { FormsModule } from '@angular/forms';
|
|
24
|
+
import { MdButton, MdTextField, TextValueAccessor } from '@awc-ui/angular';
|
|
25
|
+
|
|
26
|
+
@Component({
|
|
27
|
+
selector: 'app-root',
|
|
28
|
+
standalone: true,
|
|
29
|
+
imports: [FormsModule, MdButton, MdTextField, TextValueAccessor],
|
|
30
|
+
template: `
|
|
31
|
+
<md-text-field label="Email" type="email" [(ngModel)]="email"></md-text-field>
|
|
32
|
+
<md-button variant="filled">Continue</md-button>
|
|
33
|
+
`,
|
|
21
34
|
})
|
|
22
|
-
export class
|
|
35
|
+
export class AppComponent {
|
|
36
|
+
email = '';
|
|
37
|
+
}
|
|
23
38
|
```
|
|
24
39
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
import { AwcUiModule, provideAwcUi } from '@awc-ui/angular';
|
|
40
|
+
For convenience, `imports: [FormsModule, AwcUiModule]` supplies every component
|
|
41
|
+
and accessor. Use `ReactiveFormsModule` for `formControl` and `formControlName`.
|
|
42
|
+
NgModule applications also put `AwcUiModule` in `imports`.
|
|
29
43
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
44
|
+
`importProvidersFrom(AwcUiModule)` does not add directives to a standalone
|
|
45
|
+
component's template scope. `provideAwcUi()` is only needed for applications
|
|
46
|
+
using the lazy loader with raw tags; imported proxies already register themselves.
|
|
47
|
+
|
|
48
|
+
Radio controls bind the selected option's `value`, preserving each radio's
|
|
49
|
+
identity. Import both `MdRadio` and `RadioValueAccessor` for individual imports:
|
|
34
50
|
|
|
35
51
|
```html
|
|
36
|
-
<md-
|
|
52
|
+
<md-radio name="plan" value="basic" [(ngModel)]="plan">Basic</md-radio>
|
|
53
|
+
<md-radio name="plan" value="pro" [(ngModel)]="plan">Pro</md-radio>
|
|
37
54
|
```
|
|
38
55
|
|
|
39
|
-
|
|
56
|
+
Initialize `plan` to `'basic'` or `'pro'`; resetting the form to `null` clears the
|
|
57
|
+
selection. Multi-select accessors normalize a form reset to an empty array.
|
|
58
|
+
|
|
59
|
+
## Server rendering
|
|
40
60
|
|
|
41
|
-
|
|
61
|
+
See the [Angular SSR guide](https://awc-ui.dev/frameworks/angular/) for the shared hydration lifecycle and reference application.
|
package/awc-ui.module.d.ts
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
import { Provider } from '@angular/core';
|
|
2
|
-
import { TextValueAccessor } from './directives/text-value-accessor';
|
|
2
|
+
import { TextValueAccessor } from './directives/text-value-accessor.js';
|
|
3
|
+
import { RadioValueAccessor } from './directives/radio-value-accessor.js';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "
|
|
5
|
-
import * as i2 from "./directives/
|
|
6
|
-
import * as i3 from "./directives/
|
|
7
|
-
import * as i4 from "./directives/
|
|
8
|
-
import * as i5 from "./directives/
|
|
9
|
-
import * as i6 from "./directives/
|
|
10
|
-
import * as i7 from "./directives/
|
|
11
|
-
import * as i8 from "
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
import * as i2 from "./directives/proxies.js";
|
|
7
|
+
import * as i3 from "./directives/text-value-accessor.js";
|
|
8
|
+
import * as i4 from "./directives/select-value-accessor.js";
|
|
9
|
+
import * as i5 from "./directives/multi-select-value-accessor.js";
|
|
10
|
+
import * as i6 from "./directives/boolean-value-accessor.js";
|
|
11
|
+
import * as i7 from "./directives/radio-value-accessor.js";
|
|
12
|
+
import * as i8 from "./directives/number-value-accessor.js";
|
|
13
|
+
import * as i9 from "./directives/switch-value-accessor.js";
|
|
12
14
|
/**
|
|
13
15
|
* ControlValueAccessor directives, so `[(ngModel)]` and `formControlName` bind
|
|
14
16
|
* to AWC UI inputs. Declared here rather than in `DIRECTIVES` because that
|
|
15
17
|
* array is GENERATED by the Stencil output target on every build and would
|
|
16
18
|
* discard anything added to it.
|
|
17
19
|
*/
|
|
18
|
-
export declare const VALUE_ACCESSORS: (typeof TextValueAccessor)[];
|
|
20
|
+
export declare const VALUE_ACCESSORS: (typeof TextValueAccessor | typeof RadioValueAccessor)[];
|
|
19
21
|
/**
|
|
20
|
-
* Registers
|
|
21
|
-
* application bootstrap.
|
|
22
|
-
*
|
|
22
|
+
* Registers ALL AWC UI custom elements (the Stencil lazy loader) during
|
|
23
|
+
* application bootstrap.
|
|
24
|
+
*
|
|
25
|
+
* Since the proxies became standalone (each one statically imports and
|
|
26
|
+
* registers its own element), this provider is NO LONGER REQUIRED — importing
|
|
27
|
+
* a proxy is enough. It is kept for backwards compatibility and for apps that
|
|
28
|
+
* use raw `md-*` tags without importing the corresponding proxy. Element
|
|
29
|
+
* definition is idempotent, so using both mechanisms together is harmless —
|
|
30
|
+
* but adding this provider forces the whole lazy-loader registry into the
|
|
31
|
+
* bundle, so prefer omitting it.
|
|
23
32
|
*
|
|
24
33
|
* @example
|
|
25
34
|
* // NgModule app
|
|
@@ -29,10 +38,9 @@ export declare const VALUE_ACCESSORS: (typeof TextValueAccessor)[];
|
|
|
29
38
|
* })
|
|
30
39
|
* export class AppModule {}
|
|
31
40
|
*
|
|
32
|
-
* //
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* });
|
|
41
|
+
* // Raw custom elements without imported proxies:
|
|
42
|
+
* // AppComponent uses CUSTOM_ELEMENTS_SCHEMA; add the loader at bootstrap.
|
|
43
|
+
* bootstrapApplication(AppComponent, { providers: [provideAwcUi()] });
|
|
36
44
|
*
|
|
37
45
|
* SSR-safe: it is a no-op when `window` is not available.
|
|
38
46
|
*/
|
|
@@ -40,28 +48,26 @@ export declare function provideAwcUi(): Provider;
|
|
|
40
48
|
/**
|
|
41
49
|
* AwcUiModule
|
|
42
50
|
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
51
|
+
* Convenience module exporting ALL AWC UI component proxies (typed inputs,
|
|
52
|
+
* outputs and methods) plus the form value accessors.
|
|
45
53
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
54
|
+
* NOTE: the proxies are standalone components that register their own custom
|
|
55
|
+
* element on import — no loader bootstrap needed. For the smallest bundles,
|
|
56
|
+
* prefer importing individual components over this module: this module
|
|
57
|
+
* references all 81 proxies, so the whole component set ships with your app.
|
|
49
58
|
*
|
|
50
59
|
* @example
|
|
51
|
-
* //
|
|
52
|
-
* import {
|
|
53
|
-
*
|
|
60
|
+
* // Smallest bundle — standalone component imports exactly what it uses:
|
|
61
|
+
* import { MdButton } from '@awc-ui/angular';
|
|
62
|
+
* @Component({ standalone: true, imports: [MdButton], ... })
|
|
54
63
|
*
|
|
55
|
-
* //
|
|
64
|
+
* // Convenience — everything at once (ships all components):
|
|
56
65
|
* import { AwcUiModule } from '@awc-ui/angular';
|
|
57
|
-
*
|
|
58
|
-
* @NgModule({
|
|
59
|
-
* imports: [AwcUiModule, ...],
|
|
60
|
-
* })
|
|
66
|
+
* @NgModule({ imports: [AwcUiModule, ...] })
|
|
61
67
|
* export class AppModule {}
|
|
62
68
|
*/
|
|
63
69
|
export declare class AwcUiModule {
|
|
64
70
|
static ɵfac: i0.ɵɵFactoryDeclaration<AwcUiModule, never>;
|
|
65
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<AwcUiModule, [typeof i1.MdAccordion, typeof
|
|
71
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<AwcUiModule, never, [typeof i1.CommonModule, typeof i2.MdAccordion, typeof i2.MdAccordionItem, typeof i2.MdAppBar, typeof i2.MdAreaChart, typeof i2.MdAutocomplete, typeof i2.MdAvatar, typeof i2.MdBadge, typeof i2.MdBarChart, typeof i2.MdBottomSheet, typeof i2.MdBreadcrumbItem, typeof i2.MdBreadcrumbs, typeof i2.MdButton, typeof i2.MdButtonGroup, typeof i2.MdCard, typeof i2.MdCheckbox, typeof i2.MdChip, typeof i2.MdColorPicker, typeof i2.MdDatePicker, typeof i2.MdDialog, typeof i2.MdDivider, typeof i2.MdFab, typeof i2.MdFabMenu, typeof i2.MdFabMenuItem, typeof i2.MdIconButton, typeof i2.MdLineChart, typeof i2.MdList, typeof i2.MdListItem, typeof i2.MdLoadingIndicator, typeof i2.MdMenu, typeof i2.MdMenuItem, typeof i2.MdMenuItemGroup, typeof i2.MdMeter, typeof i2.MdMultiSelect, typeof i2.MdNavigationBar, typeof i2.MdNavigationRail, typeof i2.MdNavigationRailTab, typeof i2.MdNavigationTab, typeof i2.MdNumberField, typeof i2.MdOrganizationChart, typeof i2.MdOtpField, typeof i2.MdPieChart, typeof i2.MdProgressIndicator, typeof i2.MdRadio, typeof i2.MdRating, typeof i2.MdRipple, typeof i2.MdSearch, typeof i2.MdSegmentedButton, typeof i2.MdSegmentedButtonSet, typeof i2.MdSelect, typeof i2.MdSelectOption, typeof i2.MdSideSheet, typeof i2.MdSkeleton, typeof i2.MdSlider, typeof i2.MdSnackbar, typeof i2.MdSparkline, typeof i2.MdSplitButton, typeof i2.MdStatusDot, typeof i2.MdStep, typeof i2.MdStepper, typeof i2.MdSubMenuItem, typeof i2.MdSwitch, typeof i2.MdTab, typeof i2.MdTabPanel, typeof i2.MdTabPanels, typeof i2.MdTable, typeof i2.MdTableBody, typeof i2.MdTableCell, typeof i2.MdTableContainer, typeof i2.MdTableExpandToggle, typeof i2.MdTableFoot, typeof i2.MdTableHead, typeof i2.MdTablePagination, typeof i2.MdTableRow, typeof i2.MdTableSortLabel, typeof i2.MdTableToolbar, typeof i2.MdTabs, typeof i2.MdTextField, typeof i2.MdTimePicker, typeof i2.MdToolbar, typeof i2.MdTooltip, typeof i2.MdTransferList, typeof i3.TextValueAccessor, typeof i4.SelectValueAccessor, typeof i5.MultiSelectValueAccessor, typeof i6.BooleanValueAccessor, typeof i7.RadioValueAccessor, typeof i8.NumericValueAccessor, typeof i9.SwitchValueAccessor], [typeof i2.MdAccordion, typeof i2.MdAccordionItem, typeof i2.MdAppBar, typeof i2.MdAreaChart, typeof i2.MdAutocomplete, typeof i2.MdAvatar, typeof i2.MdBadge, typeof i2.MdBarChart, typeof i2.MdBottomSheet, typeof i2.MdBreadcrumbItem, typeof i2.MdBreadcrumbs, typeof i2.MdButton, typeof i2.MdButtonGroup, typeof i2.MdCard, typeof i2.MdCheckbox, typeof i2.MdChip, typeof i2.MdColorPicker, typeof i2.MdDatePicker, typeof i2.MdDialog, typeof i2.MdDivider, typeof i2.MdFab, typeof i2.MdFabMenu, typeof i2.MdFabMenuItem, typeof i2.MdIconButton, typeof i2.MdLineChart, typeof i2.MdList, typeof i2.MdListItem, typeof i2.MdLoadingIndicator, typeof i2.MdMenu, typeof i2.MdMenuItem, typeof i2.MdMenuItemGroup, typeof i2.MdMeter, typeof i2.MdMultiSelect, typeof i2.MdNavigationBar, typeof i2.MdNavigationRail, typeof i2.MdNavigationRailTab, typeof i2.MdNavigationTab, typeof i2.MdNumberField, typeof i2.MdOrganizationChart, typeof i2.MdOtpField, typeof i2.MdPieChart, typeof i2.MdProgressIndicator, typeof i2.MdRadio, typeof i2.MdRating, typeof i2.MdRipple, typeof i2.MdSearch, typeof i2.MdSegmentedButton, typeof i2.MdSegmentedButtonSet, typeof i2.MdSelect, typeof i2.MdSelectOption, typeof i2.MdSideSheet, typeof i2.MdSkeleton, typeof i2.MdSlider, typeof i2.MdSnackbar, typeof i2.MdSparkline, typeof i2.MdSplitButton, typeof i2.MdStatusDot, typeof i2.MdStep, typeof i2.MdStepper, typeof i2.MdSubMenuItem, typeof i2.MdSwitch, typeof i2.MdTab, typeof i2.MdTabPanel, typeof i2.MdTabPanels, typeof i2.MdTable, typeof i2.MdTableBody, typeof i2.MdTableCell, typeof i2.MdTableContainer, typeof i2.MdTableExpandToggle, typeof i2.MdTableFoot, typeof i2.MdTableHead, typeof i2.MdTablePagination, typeof i2.MdTableRow, typeof i2.MdTableSortLabel, typeof i2.MdTableToolbar, typeof i2.MdTabs, typeof i2.MdTextField, typeof i2.MdTimePicker, typeof i2.MdToolbar, typeof i2.MdTooltip, typeof i2.MdTransferList, typeof i3.TextValueAccessor, typeof i4.SelectValueAccessor, typeof i5.MultiSelectValueAccessor, typeof i6.BooleanValueAccessor, typeof i7.RadioValueAccessor, typeof i8.NumericValueAccessor, typeof i9.SwitchValueAccessor]>;
|
|
66
72
|
static ɵinj: i0.ɵɵInjectorDeclaration<AwcUiModule>;
|
|
67
73
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ElementRef } from '@angular/core';
|
|
2
|
-
import { ValueAccessor } from './value-accessor';
|
|
2
|
+
import { ValueAccessor } from './value-accessor.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class BooleanValueAccessor extends ValueAccessor {
|
|
5
5
|
constructor(el: ElementRef);
|
|
6
6
|
writeValue(value: any): void;
|
|
7
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<BooleanValueAccessor, never>;
|
|
8
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<BooleanValueAccessor, "md-checkbox", never, {}, {}, never, never,
|
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<BooleanValueAccessor, "md-checkbox", never, {}, {}, never, never, true, never>;
|
|
9
9
|
}
|
package/directives/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import * as d from './proxies';
|
|
1
|
+
import * as d from './proxies.js';
|
|
2
2
|
export declare const DIRECTIVES: (typeof d.MdAccordion | typeof d.MdAccordionItem | typeof d.MdAppBar | typeof d.MdAreaChart | typeof d.MdAutocomplete | typeof d.MdAvatar | typeof d.MdBadge | typeof d.MdBarChart | typeof d.MdBottomSheet | typeof d.MdBreadcrumbItem | typeof d.MdBreadcrumbs | typeof d.MdButton | typeof d.MdButtonGroup | typeof d.MdCard | typeof d.MdCheckbox | typeof d.MdChip | typeof d.MdColorPicker | typeof d.MdDatePicker | typeof d.MdDialog | typeof d.MdDivider | typeof d.MdFab | typeof d.MdFabMenu | typeof d.MdFabMenuItem | typeof d.MdIconButton | typeof d.MdLineChart | typeof d.MdList | typeof d.MdListItem | typeof d.MdLoadingIndicator | typeof d.MdMenu | typeof d.MdMenuItem | typeof d.MdMenuItemGroup | typeof d.MdMeter | typeof d.MdMultiSelect | typeof d.MdNavigationBar | typeof d.MdNavigationRail | typeof d.MdNavigationRailTab | typeof d.MdNavigationTab | typeof d.MdNumberField | typeof d.MdOrganizationChart | typeof d.MdOtpField | typeof d.MdPieChart | typeof d.MdProgressIndicator | typeof d.MdRadio | typeof d.MdRating | typeof d.MdRipple | typeof d.MdSearch | typeof d.MdSegmentedButton | typeof d.MdSegmentedButtonSet | typeof d.MdSelect | typeof d.MdSelectOption | typeof d.MdSideSheet | typeof d.MdSkeleton | typeof d.MdSlider | typeof d.MdSnackbar | typeof d.MdSparkline | typeof d.MdSplitButton | typeof d.MdStatusDot | typeof d.MdStep | typeof d.MdStepper | typeof d.MdSubMenuItem | typeof d.MdSwitch | typeof d.MdTab | typeof d.MdTabPanel | typeof d.MdTabPanels | typeof d.MdTable | typeof d.MdTableBody | typeof d.MdTableCell | typeof d.MdTableContainer | typeof d.MdTableExpandToggle | typeof d.MdTableFoot | typeof d.MdTableHead | typeof d.MdTablePagination | typeof d.MdTableRow | typeof d.MdTableSortLabel | typeof d.MdTableToolbar | typeof d.MdTabs | typeof d.MdTextField | typeof d.MdTimePicker | typeof d.MdToolbar | typeof d.MdTooltip | typeof d.MdTransferList)[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
import { ValueAccessor } from './value-accessor.js';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
/** Angular reset() writes null; a multi-select's empty value must remain an array. */
|
|
5
|
+
export declare class MultiSelectValueAccessor extends ValueAccessor {
|
|
6
|
+
constructor(el: ElementRef);
|
|
7
|
+
writeValue(value: string[] | null | undefined): void;
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectValueAccessor, never>;
|
|
9
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MultiSelectValueAccessor, "md-multi-select", never, {}, {}, never, never, true, never>;
|
|
10
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ElementRef } from '@angular/core';
|
|
2
|
-
import { ValueAccessor } from './value-accessor';
|
|
2
|
+
import { ValueAccessor } from './value-accessor.js';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class NumericValueAccessor extends ValueAccessor {
|
|
5
5
|
constructor(el: ElementRef);
|
|
6
6
|
registerOnChange(fn: (_: number | null) => void): void;
|
|
7
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<NumericValueAccessor, never>;
|
|
8
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NumericValueAccessor, "md-rating, md-slider, md-number-field", never, {}, {}, never, never,
|
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NumericValueAccessor, "md-rating, md-slider, md-number-field", never, {}, {}, never, never, true, never>;
|
|
9
9
|
}
|