@abgov/angular-components 5.0.0-dev.4 → 5.0.0-dev.6
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.
|
@@ -3232,6 +3232,18 @@ class GoabFormItem extends GoabBaseComponent {
|
|
|
3232
3232
|
this.isReady = false;
|
|
3233
3233
|
this.version = "2";
|
|
3234
3234
|
}
|
|
3235
|
+
getHelpTextAsString() {
|
|
3236
|
+
return typeof this.helpText === "string" ? this.helpText : undefined;
|
|
3237
|
+
}
|
|
3238
|
+
getHelpTextAsTemplate() {
|
|
3239
|
+
return this.helpText instanceof TemplateRef ? this.helpText : null;
|
|
3240
|
+
}
|
|
3241
|
+
getErrorAsString() {
|
|
3242
|
+
return typeof this.error === "string" ? this.error : undefined;
|
|
3243
|
+
}
|
|
3244
|
+
getErrorAsTemplate() {
|
|
3245
|
+
return this.error instanceof TemplateRef ? this.error : null;
|
|
3246
|
+
}
|
|
3235
3247
|
ngOnInit() {
|
|
3236
3248
|
// For Angular 20, we need to delay rendering the web component
|
|
3237
3249
|
// to ensure all attributes are properly bound before the component initializes
|
|
@@ -3246,8 +3258,8 @@ class GoabFormItem extends GoabBaseComponent {
|
|
|
3246
3258
|
[attr.version]="version"
|
|
3247
3259
|
[attr.label]="label"
|
|
3248
3260
|
[attr.labelsize]="labelSize"
|
|
3249
|
-
[attr.helptext]="
|
|
3250
|
-
[attr.error]="
|
|
3261
|
+
[attr.helptext]="getHelpTextAsString()"
|
|
3262
|
+
[attr.error]="getErrorAsString()"
|
|
3251
3263
|
[attr.testid]="testId"
|
|
3252
3264
|
[attr.type]="type"
|
|
3253
3265
|
[id]="id"
|
|
@@ -3260,23 +3272,33 @@ class GoabFormItem extends GoabBaseComponent {
|
|
|
3260
3272
|
[attr.mr]="mr"
|
|
3261
3273
|
[attr.ml]="ml"
|
|
3262
3274
|
>
|
|
3275
|
+
@if (getErrorAsTemplate()) {
|
|
3276
|
+
<div slot="error">
|
|
3277
|
+
<ng-container [ngTemplateOutlet]="getErrorAsTemplate()"></ng-container>
|
|
3278
|
+
</div>
|
|
3279
|
+
}
|
|
3280
|
+
@if (getHelpTextAsTemplate()) {
|
|
3281
|
+
<div slot="helptext">
|
|
3282
|
+
<ng-container [ngTemplateOutlet]="getHelpTextAsTemplate()"></ng-container>
|
|
3283
|
+
</div>
|
|
3284
|
+
}
|
|
3263
3285
|
<ng-content />
|
|
3264
|
-
<ng-content select="goab-form-item-slot"></ng-content>
|
|
3265
3286
|
</goa-form-item>
|
|
3266
|
-
}`, isInline: true }); }
|
|
3287
|
+
}`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
3267
3288
|
}
|
|
3268
3289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: GoabFormItem, decorators: [{
|
|
3269
3290
|
type: Component,
|
|
3270
3291
|
args: [{
|
|
3271
3292
|
standalone: true,
|
|
3272
3293
|
selector: "goab-form-item",
|
|
3294
|
+
imports: [NgTemplateOutlet],
|
|
3273
3295
|
template: `@if (isReady) {
|
|
3274
3296
|
<goa-form-item
|
|
3275
3297
|
[attr.version]="version"
|
|
3276
3298
|
[attr.label]="label"
|
|
3277
3299
|
[attr.labelsize]="labelSize"
|
|
3278
|
-
[attr.helptext]="
|
|
3279
|
-
[attr.error]="
|
|
3300
|
+
[attr.helptext]="getHelpTextAsString()"
|
|
3301
|
+
[attr.error]="getErrorAsString()"
|
|
3280
3302
|
[attr.testid]="testId"
|
|
3281
3303
|
[attr.type]="type"
|
|
3282
3304
|
[id]="id"
|
|
@@ -3289,8 +3311,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3289
3311
|
[attr.mr]="mr"
|
|
3290
3312
|
[attr.ml]="ml"
|
|
3291
3313
|
>
|
|
3314
|
+
@if (getErrorAsTemplate()) {
|
|
3315
|
+
<div slot="error">
|
|
3316
|
+
<ng-container [ngTemplateOutlet]="getErrorAsTemplate()"></ng-container>
|
|
3317
|
+
</div>
|
|
3318
|
+
}
|
|
3319
|
+
@if (getHelpTextAsTemplate()) {
|
|
3320
|
+
<div slot="helptext">
|
|
3321
|
+
<ng-container [ngTemplateOutlet]="getHelpTextAsTemplate()"></ng-container>
|
|
3322
|
+
</div>
|
|
3323
|
+
}
|
|
3292
3324
|
<ng-content />
|
|
3293
|
-
<ng-content select="goab-form-item-slot"></ng-content>
|
|
3294
3325
|
</goa-form-item>
|
|
3295
3326
|
}`,
|
|
3296
3327
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
@@ -3318,10 +3349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3318
3349
|
}] } });
|
|
3319
3350
|
|
|
3320
3351
|
/**
|
|
3321
|
-
*
|
|
3322
|
-
* We need to use a separate component with a required attribute `slot` because
|
|
3323
|
-
* svelte component renders based on the `slot` of the wrapper component (which is `div` before)
|
|
3324
|
-
* // similar to app-footer-meta-section & app-footer-nav-section
|
|
3352
|
+
* @deprecated Use `TemplateRef` inputs on `goab-form-item` (`[helpText]` / `[error]`) instead.
|
|
3325
3353
|
*/
|
|
3326
3354
|
class GoabFormItemSlot {
|
|
3327
3355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: GoabFormItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -3793,6 +3821,8 @@ class GoabIconButton extends GoabBaseComponent {
|
|
|
3793
3821
|
this.JSON = JSON;
|
|
3794
3822
|
/** Sets the size of button. @default "medium" */
|
|
3795
3823
|
this.size = "medium";
|
|
3824
|
+
/** Sets the icon theme. "outline" for stroked icons, "filled" for solid icons. @default "outline" */
|
|
3825
|
+
this.theme = "outline";
|
|
3796
3826
|
/** Emits when the icon button is clicked. */
|
|
3797
3827
|
this.onClick = new EventEmitter();
|
|
3798
3828
|
}
|
|
@@ -3806,12 +3836,13 @@ class GoabIconButton extends GoabBaseComponent {
|
|
|
3806
3836
|
this.onClick.emit();
|
|
3807
3837
|
}
|
|
3808
3838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: GoabIconButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", title: "title", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
|
|
3839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", theme: "theme", title: "title", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
|
|
3810
3840
|
@if (isReady) {
|
|
3811
3841
|
<goa-icon-button
|
|
3812
3842
|
[attr.icon]="icon"
|
|
3813
3843
|
[disabled]="disabled"
|
|
3814
3844
|
[attr.size]="size"
|
|
3845
|
+
[attr.theme]="theme"
|
|
3815
3846
|
[attr.variant]="variant"
|
|
3816
3847
|
[title]="title"
|
|
3817
3848
|
[attr.arialabel]="ariaLabel"
|
|
@@ -3841,6 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3841
3872
|
[attr.icon]="icon"
|
|
3842
3873
|
[disabled]="disabled"
|
|
3843
3874
|
[attr.size]="size"
|
|
3875
|
+
[attr.theme]="theme"
|
|
3844
3876
|
[attr.variant]="variant"
|
|
3845
3877
|
[title]="title"
|
|
3846
3878
|
[attr.arialabel]="ariaLabel"
|
|
@@ -3867,6 +3899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3867
3899
|
type: Input
|
|
3868
3900
|
}], variant: [{
|
|
3869
3901
|
type: Input
|
|
3902
|
+
}], theme: [{
|
|
3903
|
+
type: Input
|
|
3870
3904
|
}], title: [{
|
|
3871
3905
|
type: Input
|
|
3872
3906
|
}], disabled: [{
|