@abgov/angular-components
Version:
Government of Alberta - UI components for Angular
1,201 lines (1,185 loc) • 237 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, HostListener, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule, Input, Component, ElementRef, booleanAttribute, ViewChild, EventEmitter, Output, numberAttribute, TemplateRef } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgTemplateOutlet, NgIf } from '@angular/common';
import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor } from '@angular/forms';
export * from '@abgov/ui-components-common';
// @deprecated: Use the new <goab-input .. /> component
class ValueDirective {
get value() {
return this._value;
}
set value(val) {
this._value = val;
this.onChange(this._value);
this.onTouched();
this.elementRef.nativeElement.value = val;
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this._disabled = isDisabled;
this.elementRef.nativeElement.disabled = isDisabled;
}
constructor(elementRef) {
this.elementRef = elementRef;
this._value = "";
this._disabled = false;
/* eslint-disable @typescript-eslint/no-explicit-any */
this.onChange = () => { };
this.onTouched = () => { };
}
listenForValueChange(value) {
this.value = value;
}
listenForDisabledChange(isDisabled) {
this.setDisabledState(isDisabled);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ValueDirective, isStandalone: true, selector: "[goaValue]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)", "disabledChange": "listenForDisabledChange($event.detail.disabled)" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValueDirective),
multi: true,
}], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: "[goaValue]",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValueDirective),
multi: true,
}],
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listenForValueChange: [{
type: HostListener,
args: ["_change", ["$event.detail.value"]]
}], listenForDisabledChange: [{
type: HostListener,
args: ["disabledChange", ["$event.detail.disabled"]]
}] } });
class ValueListDirective {
get value() {
return this._value;
}
set value(val) {
if (val && val !== this._value) {
this._setValue(val);
this.elementRef.nativeElement.value = JSON.stringify(val);
}
}
writeValue(value) {
if (value) {
this.value = value;
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
constructor(elementRef) {
this.elementRef = elementRef;
this._value = [];
this.onChange = () => { };
this.onTouched = () => { };
}
listenForValueChange(value) {
if (!value) {
this._setValue(undefined);
return;
}
try {
this.value = JSON.parse(value);
}
catch (e) {
// we still need to trigger the events to prevent any previous valid value to remain set.
const v = value.match(/^[\w\s,]*$/) ? value.split(",") : undefined;
this._setValue(v);
}
}
_setValue(value) {
this._value = value;
this.onChange(value);
this.onTouched();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueListDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ValueListDirective, isStandalone: true, selector: "[goaValueList]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValueListDirective),
multi: true,
}], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueListDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: "[goaValueList]",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValueListDirective),
multi: true,
}],
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { listenForValueChange: [{
type: HostListener,
args: ["_change", ["$event.detail.value"]]
}] } });
// @deprecated: Use the new <goab-checkbox .. /> component
class CheckedDirective extends CheckboxControlValueAccessor {
constructor(renderer, elementRef) {
super(renderer, elementRef);
this.renderer = renderer;
this.elementRef = elementRef;
this._checked = false;
/* eslint-disable @typescript-eslint/no-explicit-any */
this.onChange = () => { };
this.onTouched = () => { };
}
get value() {
return this._checked ? "checked" : "";
}
set value(checked) {
this._checked = !!checked;
this.onChange(this._checked);
this.onTouched();
this.elementRef.nativeElement.checked = checked;
}
writeValue(checked) {
this.value = checked;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
listenForValueChange(checked) {
this.value = checked;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckedDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: CheckedDirective, isStandalone: true, selector: "[goaChecked]", host: { listeners: { "_change": "listenForValueChange($event.detail.checked)" } }, providers: [
{
useExisting: forwardRef(() => CheckedDirective),
provide: NG_VALUE_ACCESSOR,
multi: true,
},
], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckedDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: "[goaChecked]",
providers: [
{
useExisting: forwardRef(() => CheckedDirective),
provide: NG_VALUE_ACCESSOR,
multi: true,
},
],
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { listenForValueChange: [{
type: HostListener,
args: ["_change", ["$event.detail.checked"]]
}] } });
class AngularComponentsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, imports: [CommonModule, ValueDirective, ValueListDirective, CheckedDirective], exports: [ValueDirective, ValueListDirective, CheckedDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ValueDirective, ValueListDirective, CheckedDirective],
exports: [ValueDirective, ValueListDirective, CheckedDirective],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class GoabBaseComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabBaseComponent, isStandalone: true, selector: "ng-component", inputs: { mt: "mt", mb: "mb", ml: "ml", mr: "mr", testId: "testId" }, ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBaseComponent, decorators: [{
type: Component,
args: [{
standalone: true,
template: ``, //** IMPLEMENT IN SUBCLASS
}]
}], propDecorators: { mt: [{
type: Input
}], mb: [{
type: Input
}], ml: [{
type: Input
}], mr: [{
type: Input
}], testId: [{
type: Input
}] } });
/**
* An abstract base class that extends `GoabBaseComponent` and implements the `ControlValueAccessor` interface.
* This class provides a foundation for creating custom form controls in Angular, enabling them to integrate
* seamlessly with Angular forms. It includes support for handling value changes, touch events, and disabled states.
*
* ## Features
* - Supports `disabled="true"` and `error="true` attribute bindings for convenience.
* - Handles form control value changes and touch events via `ControlValueAccessor` methods.
* - Allows for flexible value types (`unknown`), making it suitable for various data types like integers, dates, or booleans.
* - Uses ViewChild to capture a reference to the native GOA web component element via `#goaComponentRef`.
* - Uses Renderer2 for safe DOM manipulation (compatible with SSR and security best practices).
*
* ## Usage
* Extend this class to create custom form controls. Child components must:
* 1. Add `#goaComponentRef` template reference to their `goa-*` element in the template
* 2. Inject `Renderer2` in their constructor and pass it to `super(renderer)`
*
* ### Example:
* ```typescript
* @Component({
* template: `<goa-input #goaComponentRef [value]="value" ...></goa-input>`
* })
* export class GoabInput extends GoabControlValueAccessor {
* constructor(private cdr: ChangeDetectorRef, renderer: Renderer2) {
* super(renderer); // Required: pass Renderer2 to base class
* }
* }
* ```
*
* ## Properties
* - `id?`: An optional identifier for the component.
* - `disabled?`: A boolean indicating whether the component is disabled.
* - `error?`: A boolean indicating whether the component is in an error state.
* - `value?`: The current value of the component, which can be of any type.
*
* ## Methods
* - `markAsTouched()`: Marks the component as touched and triggers the `fcTouched` callback if defined.
* - `writeValue(value: unknown)`: Writes a new value to the form control (can be overridden for special behavior like checkbox).
* - `registerOnChange(fn: any)`: Registers a function to handle changes in the form control value.
* - `registerOnTouched(fn: any)`: Registers a function to handle touch events on the form control.
* - `setDisabledState?(isDisabled: boolean)`: Sets the disabled state of the component.
* - `convertValueToString(value: unknown)`: Converts a value to a string for DOM attribute assignment (can be overridden).
*
* ## Callbacks
* - `fcChange?`: A function to handle changes in the form control value.
* - `fcTouched?`: A function to handle touch events on the form control.
*/
class GoabControlValueAccessor extends GoabBaseComponent {
/**
* Marks the component as touched. If the component is not already marked as touched,
* it triggers the `fcTouched` callback (if defined) and sets the `touched` property to `true`.
*/
markAsTouched() {
if (!this.touched) {
this.fcTouched?.();
this.touched = true;
}
}
constructor(renderer) {
super();
this.renderer = renderer;
this.touched = false;
}
/**
* Convert an arbitrary value into a string for DOM attribute assignment.
* Child classes can override when they need special formatting.
* @param value The value to convert
* @returns string representation or empty string for nullish/empty
*/
convertValueToString(value) {
if (value === null || value === undefined || value === "") {
return "";
}
return String(value);
}
/**
* Writes a new value to the form control.
* @param {unknown} value - The value to write.
*/
writeValue(value) {
this.value = value;
const el = this.goaComponentRef?.nativeElement;
if (el) {
const stringValue = this.convertValueToString(value);
this.renderer.setAttribute(el, "value", stringValue);
}
}
/**
* Registers a function to call when the form control value changes.
* @param {function} fn - The function to call.
*/
registerOnChange(fn) {
this.fcChange = fn;
}
/**
* Registers a function to call when the form control is touched.
* @param {function} fn - The function to call.
*/
registerOnTouched(fn) {
this.fcTouched = fn;
}
/**
* Sets the disabled state of the component.
*
* @param isDisabled - A boolean indicating whether the component should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, viewQueries: [{ propertyName: "goaComponentRef", first: true, predicate: ["goaComponentRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
type: Component,
args: [{
standalone: true,
template: ``, //** IMPLEMENT IN SUBCLASS
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], error: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], value: [{
type: Input
}], goaComponentRef: [{
type: ViewChild,
args: ["goaComponentRef", { static: false, read: ElementRef }]
}] } });
class GoabAccordion extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.onChange = new EventEmitter();
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
_onChange(e) {
const detail = e.detail;
this.onChange.emit(detail.open);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAccordion, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabAccordion, isStandalone: true, selector: "goab-accordion", inputs: { heading: "heading", secondaryText: "secondaryText", open: ["open", "open", booleanAttribute], headingSize: "headingSize", headingContent: "headingContent", maxWidth: "maxWidth", iconPosition: "iconPosition" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
<goa-accordion
*ngIf="isReady"
[attr.heading]="heading"
[attr.secondarytext]="secondaryText"
[attr.open]="open"
[attr.headingsize]="headingSize"
[attr.maxwidth]="maxWidth"
[attr.testid]="testId"
[attr.iconposition]="iconPosition"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<div slot="headingcontent">
<ng-container [ngTemplateOutlet]="headingContent"></ng-container>
</div>
<ng-content></ng-content>
</goa-accordion>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAccordion, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-accordion",
imports: [NgTemplateOutlet, CommonModule],
template: `
<goa-accordion
*ngIf="isReady"
[attr.heading]="heading"
[attr.secondarytext]="secondaryText"
[attr.open]="open"
[attr.headingsize]="headingSize"
[attr.maxwidth]="maxWidth"
[attr.testid]="testId"
[attr.iconposition]="iconPosition"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<div slot="headingcontent">
<ng-container [ngTemplateOutlet]="headingContent"></ng-container>
</div>
<ng-content></ng-content>
</goa-accordion>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
type: Input
}], secondaryText: [{
type: Input
}], open: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], headingSize: [{
type: Input
}], headingContent: [{
type: Input
}], maxWidth: [{
type: Input
}], iconPosition: [{
type: Input
}], onChange: [{
type: Output
}] } });
class GoabBadge extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBadge, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabBadge, isStandalone: true, selector: "goab-badge", inputs: { type: "type", content: "content", icon: ["icon", "icon", booleanAttribute], iconType: "iconType", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
<goa-badge
*ngIf="isReady"
[attr.type]="type"
[attr.icon]="icon ? 'true' : 'false'"
[attr.icontype]="iconType"
[attr.arialabel]="ariaLabel"
[attr.content]="content"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
</goa-badge>
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBadge, decorators: [{
type: Component,
args: [{ standalone: true, selector: "goab-badge", template: `
<goa-badge
*ngIf="isReady"
[attr.type]="type"
[attr.icon]="icon ? 'true' : 'false'"
[attr.icontype]="iconType"
[attr.arialabel]="ariaLabel"
[attr.content]="content"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
</goa-badge>
`, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], styles: [":host{display:contents}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
type: Input
}], content: [{
type: Input
}], icon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], iconType: [{
type: Input
}], ariaLabel: [{
type: Input
}] } });
class GoabBlock extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBlock, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabBlock, isStandalone: true, selector: "goab-block", inputs: { gap: "gap", direction: "direction", alignment: "alignment" }, usesInheritance: true, ngImport: i0, template: `
<goa-block
*ngIf="isReady"
[attr.gap]="gap"
[attr.direction]="direction"
[attr.alignment]="alignment"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-block>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBlock, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-block",
imports: [CommonModule],
template: `
<goa-block
*ngIf="isReady"
[attr.gap]="gap"
[attr.direction]="direction"
[attr.alignment]="alignment"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-block>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { gap: [{
type: Input
}], direction: [{
type: Input
}], alignment: [{
type: Input
}] } });
class GoabButton extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.type = "primary";
this.onClick = new EventEmitter();
this.isReady = false;
this.JSON = JSON;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
_onClick() {
this.onClick.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabButton, isStandalone: true, selector: "goab-button", inputs: { type: "type", size: "size", variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", width: "width", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
<goa-button
*ngIf="isReady"
[attr.type]="type"
[attr.size]="size"
[attr.variant]="variant"
[disabled]="disabled"
[attr.leadingicon]="leadingIcon"
[attr.trailingicon]="trailingIcon"
[attr.width]="width"
[attr.testid]="testId"
[attr.action]="action"
[attr.action-arg]="actionArg"
[attr.action-args]="JSON.stringify(actionArgs)"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_click)="_onClick()"
>
<ng-content />
</goa-button>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButton, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-button",
imports: [CommonModule],
template: `
<goa-button
*ngIf="isReady"
[attr.type]="type"
[attr.size]="size"
[attr.variant]="variant"
[disabled]="disabled"
[attr.leadingicon]="leadingIcon"
[attr.trailingicon]="trailingIcon"
[attr.width]="width"
[attr.testid]="testId"
[attr.action]="action"
[attr.action-arg]="actionArg"
[attr.action-args]="JSON.stringify(actionArgs)"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_click)="_onClick()"
>
<ng-content />
</goa-button>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], variant: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], leadingIcon: [{
type: Input
}], trailingIcon: [{
type: Input
}], width: [{
type: Input
}], action: [{
type: Input
}], actionArg: [{
type: Input
}], actionArgs: [{
type: Input
}], onClick: [{
type: Output
}] } });
class GoabButtonGroup extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButtonGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabButtonGroup, isStandalone: true, selector: "goab-button-group", inputs: { alignment: "alignment", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
<goa-button-group
*ngIf="isReady"
[attr.alignment]="alignment"
[attr.gap]="gap"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-button-group>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButtonGroup, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-button-group",
imports: [CommonModule],
template: `
<goa-button-group
*ngIf="isReady"
[attr.alignment]="alignment"
[attr.gap]="gap"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-button-group>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { alignment: [{
type: Input
}], gap: [{
type: Input
}] } });
class GoabCalendar extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.onChange = new EventEmitter();
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
_onChange(e) {
const details = e.detail;
this.onChange.emit(details);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCalendar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCalendar, isStandalone: true, selector: "goab-calendar", inputs: { name: "name", value: "value", min: "min", max: "max" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
<goa-calendar
*ngIf="isReady"
[attr.name]="name"
[value]="value"
[attr.min]="min"
[attr.max]="max"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<ng-content />
</goa-calendar>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCalendar, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-calendar",
imports: [CommonModule],
template: `
<goa-calendar
*ngIf="isReady"
[attr.name]="name"
[value]="value"
[attr.min]="min"
[attr.max]="max"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<ng-content />
</goa-calendar>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
type: Input
}], value: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], onChange: [{
type: Output
}] } });
class GoabCallout extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.isReady = false;
this.type = "information";
this.heading = "";
this.size = "large";
this.ariaLive = "off";
this.iconTheme = "outline";
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCallout, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCallout, isStandalone: true, selector: "goab-callout", inputs: { type: "type", heading: "heading", size: "size", maxWidth: "maxWidth", ariaLive: "ariaLive", iconTheme: "iconTheme" }, usesInheritance: true, ngImport: i0, template: `
<goa-callout
*ngIf="isReady"
[attr.type]="type"
[attr.heading]="heading"
[attr.size]="size"
[attr.maxwidth]="maxWidth"
[attr.arialive]="ariaLive"
[attr.icontheme]="iconTheme"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-callout>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCallout, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-callout",
imports: [CommonModule],
template: `
<goa-callout
*ngIf="isReady"
[attr.type]="type"
[attr.heading]="heading"
[attr.size]="size"
[attr.maxwidth]="maxWidth"
[attr.arialive]="ariaLive"
[attr.icontheme]="iconTheme"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-callout>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
type: Input
}], heading: [{
type: Input
}], size: [{
type: Input
}], maxWidth: [{
type: Input
}], ariaLive: [{
type: Input
}], iconTheme: [{
type: Input
}] } });
class GoabCard extends GoabBaseComponent {
constructor(cdr) {
super();
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCard, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCard, isStandalone: true, selector: "goab-card", inputs: { elevation: ["elevation", "elevation", numberAttribute], width: "width" }, usesInheritance: true, ngImport: i0, template: `
<goa-card
*ngIf="isReady"
[attr.elevation]="elevation"
[attr.width]="width"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-card>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCard, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-card",
imports: [CommonModule],
template: `
<goa-card
*ngIf="isReady"
[attr.elevation]="elevation"
[attr.width]="width"
[attr.testid]="testId"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
>
<ng-content />
</goa-card>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elevation: [{
type: Input,
args: [{ transform: numberAttribute }]
}], width: [{
type: Input
}] } });
class GoabCardContent {
constructor(cdr) {
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardContent, isStandalone: true, selector: "goab-card-content", ngImport: i0, template: `
<goa-card-content *ngIf="isReady">
<ng-content />
</goa-card-content>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardContent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-card-content",
template: `
<goa-card-content *ngIf="isReady">
<ng-content />
</goa-card-content>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
class GoabCardActions {
constructor(cdr) {
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardActions, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardActions, isStandalone: true, selector: "goab-card-actions", ngImport: i0, template: `
<goa-card-actions *ngIf="isReady">
<ng-content />
</goa-card-actions>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardActions, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-card-actions",
template: `
<goa-card-actions *ngIf="isReady">
<ng-content />
</goa-card-actions>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
class GoabCardImage {
constructor(cdr) {
this.cdr = cdr;
this.isReady = false;
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardImage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardImage, isStandalone: true, selector: "goab-card-image", inputs: { src: "src", height: "height" }, ngImport: i0, template: `
<goa-card-image
*ngIf="isReady"
[attr.src]="src"
[attr.height]="height"
>
<ng-content />
</goa-card-image>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardImage, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-card-image",
template: `
<goa-card-image
*ngIf="isReady"
[attr.src]="src"
[attr.height]="height"
>
<ng-content />
</goa-card-image>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
type: Input,
args: [{ required: true }]
}], height: [{
type: Input,
args: [{ required: true }]
}] } });
class GoabCheckbox extends GoabControlValueAccessor {
constructor(cdr, renderer) {
super(renderer);
this.cdr = cdr;
this.isReady = false;
this.onChange = new EventEmitter();
}
ngOnInit() {
// For Angular 20, we need to delay rendering the web component
// to ensure all attributes are properly bound before the component initializes
setTimeout(() => {
this.isReady = true;
this.cdr.detectChanges();
}, 0);
}
getDescriptionAsString() {
return typeof this.description === "string" ? this.description : "";
}
getDescriptionAsTemplate() {
if (this.description) {
return typeof this.description === "string" ? null : this.description;
}
return null;
}
_onChange(e) {
const detail = e.detail;
this.onChange.emit(detail);
this.markAsTouched();
this.fcChange?.(detail.binding === "check" ? detail.checked : detail.value || "");
}
// Checkbox is a special case: it uses `checked` instead of `value`.
writeValue(value) {
this.value = value;
this.checked = !!value;
const el = this.goaComponentRef?.nativeElement;
if (el) {
this.renderer.setAttribute(el, "checked", this.checked ? "true" : "false");
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], text: "text", value: "value", ariaLabel: "ariaLabel", description: "description", reveal: "reveal", revealArialLabel: "revealArialLabel", maxWidth: "maxWidth" }, outputs: { onChange: "onChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => GoabCheckbox),
},
], usesInheritance: true, ngImport: i0, template: ` <goa-checkbox
#goaComponentRef
*ngIf="isReady"
[attr.name]="name"
[checked]="checked"
[disabled]="disabled"
[attr.indeterminate]="indeterminate ? 'true' : undefined"
[attr.error]="error"
[attr.text]="text"
[value]="value"
[attr.testid]="testId"
[attr.arialabel]="ariaLabel"
[attr.description]="getDescriptionAsString()"
[attr.revealarialabel]="revealArialLabel"
[id]="id"
[attr.maxwidth]="maxWidth"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<ng-content />
<div slot="description">
<ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
</div>
<div slot="reveal">
<ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
</div>
</goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, decorators: [{
type: Component,
args: [{
standalone: true,
selector: "goab-checkbox",
template: ` <goa-checkbox
#goaComponentRef
*ngIf="isReady"
[attr.name]="name"
[checked]="checked"
[disabled]="disabled"
[attr.indeterminate]="indeterminate ? 'true' : undefined"
[attr.error]="error"
[attr.text]="text"
[value]="value"
[attr.testid]="testId"
[attr.arialabel]="ariaLabel"
[attr.description]="getDescriptionAsString()"
[attr.revealarialabel]="revealArialLabel"
[id]="id"
[attr.maxwidth]="maxWidth"
[attr.mt]="mt"
[attr.mb]="mb"
[attr.ml]="ml"
[attr.mr]="mr"
(_change)="_onChange($event)"
>
<ng-content />
<div slot="description">
<ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
</div>
<div slot="reveal">
<ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
</div>
</goa-checkbox>`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => GoabCheckbox),
},
],
imports: [NgTemplateOutlet, CommonModule],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { name: [{
type: Input
}], checked: [{
type: Input,
args: [{ transform: booleanAttribute }]