@abgov/angular-components 4.2.2-alpha.4 → 4.2.2-alpha.6

package/fesm2022/abgov-angular-components.mjs

@@ -2398,6 +2398,9 @@ class GoabInput {
     }
     ngOnInit() {
         this.handleTrailingIconClick = this.onTrailingIconClick.observed;
+        if (typeof this.value === "number") {
+            console.warn("For numeric values use goab-input-number.");
+        }
     }
     _onTrailingIconClick(_) {
         if (this.handleTrailingIconClick) {
@@ -2449,7 +2452,7 @@ class GoabInput {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabInput),
-            }
+            },
         ], ngImport: i0, template: `
     <goa-input
       [attr.type]="type"
@@ -2485,10 +2488,10 @@ class GoabInput {
       (_change)="_onChange($event)"
       (_focus)="_onFocus($event)"
       (_blur)="_onBlur($event)"
-      (_keypress)="_onKeyPress($event)"
+      (_keyPress)="_onKeyPress($event)"
       [attr.trailingiconarialabel]="trailingIconAriaLabel"
     >
-      <ng-content/>
+      <ng-content />
     </goa-input>
   `, isInline: true }); }
 }
@@ -2532,10 +2535,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       (_change)="_onChange($event)"
       (_focus)="_onFocus($event)"
       (_blur)="_onBlur($event)"
-      (_keypress)="_onKeyPress($event)"
+      (_keyPress)="_onKeyPress($event)"
       [attr.trailingiconarialabel]="trailingIconAriaLabel"
     >
-      <ng-content/>
+      <ng-content />
     </goa-input>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -2544,8 +2547,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: forwardRef(() => GoabInput),
-                        }
-                    ]
+                        },
+                    ],
                 }]
         }], propDecorators: { type: [{
                 type: Input
@@ -2617,6 +2620,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Output
             }] } });
 
+class GoabInputNumber {
+    constructor() {
+        this.type = "number";
+        this.value = null;
+        this.onTrailingIconClick = new EventEmitter(); // Keep void type
+        this.onFocus = new EventEmitter();
+        this.onBlur = new EventEmitter();
+        this.onKeyPress = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.handleTrailingIconClick = false;
+        this.touched = false;
+    }
+    ngOnInit() {
+        this.handleTrailingIconClick = this.onTrailingIconClick.observed;
+    }
+    _onTrailingIconClick(_) {
+        if (this.handleTrailingIconClick) {
+            this.onTrailingIconClick.emit();
+        }
+    }
+    _onChange(e) {
+        this.markAsTouched();
+        const detail = e.detail;
+        const stringValue = detail.value;
+        let numericValue = null;
+        if (stringValue !== null && stringValue.trim() !== "") {
+            const parsed = parseFloat(stringValue);
+            if (!isNaN(parsed)) {
+                numericValue = parsed;
+            }
+        }
+        this.value = numericValue;
+        this.fcChange?.(numericValue);
+        this.onChange.emit(detail);
+    }
+    _onKeyPress(e) {
+        this.markAsTouched();
+        const detail = e.detail;
+        this.onKeyPress.emit(detail);
+    }
+    _onFocus(e) {
+        this.markAsTouched();
+        const detail = e.detail;
+        this.onFocus.emit(detail);
+    }
+    _onBlur(e) {
+        this.markAsTouched();
+        const detail = e.detail;
+        this.onBlur.emit(detail);
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.fcTouched?.();
+            this.touched = true;
+        }
+    }
+    writeValue(value) {
+        this.value = value === undefined ? null : value;
+    }
+    registerOnChange(fn) {
+        this.fcChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.fcTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabInputNumber, isStandalone: true, selector: "goab-input-number", inputs: { type: "type", name: "name", id: "id", debounce: "debounce", disabled: "disabled", autoCapitalize: "autoCapitalize", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: "focused", readonly: "readonly", error: "error", width: "width", prefix: "prefix", suffix: "suffix", testId: "testId", ariaLabel: "ariaLabel", maxLength: "maxLength", min: "min", max: "max", step: "step", ariaLabelledBy: "ariaLabelledBy", mt: "mt", mr: "mr", mb: "mb", ml: "ml", trailingIconAriaLabel: "trailingIconAriaLabel", value: "value" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                // Use forwardRef with the new class name
+                useExisting: forwardRef(() => GoabInputNumber),
+            },
+        ], ngImport: i0, template: `
+    <goa-input
+      [attr.type]="type"
+      [attr.name]="name"
+      [attr.focused]="focused"
+      [attr.value]="value !== null ? value : ''"
+      [attr.autocapitalize]="autoCapitalize"
+      [attr.placeholder]="placeholder"
+      [attr.leadingicon]="leadingIcon"
+      [attr.trailingicon]="trailingIcon"
+      [attr.variant]="variant"
+      [disabled]="disabled"
+      [attr.readonly]="readonly"
+      [attr.error]="error"
+      [attr.data-testid]="testId"
+      [attr.width]="width"
+      [attr.arialabel]="ariaLabel"
+      [attr.arialabelledby]="ariaLabelledBy"
+      [attr.min]="min"
+      [attr.max]="max"
+      [attr.step]="step"
+      [attr.prefix]="prefix"
+      [attr.suffix]="suffix"
+      [attr.debounce]="debounce"
+      [attr.maxlength]="maxLength"
+      [attr.id]="id"
+      [attr.mt]="mt"
+      [attr.mr]="mr"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.handletrailingiconclick]="handleTrailingIconClick"
+      (_trailingIconClick)="_onTrailingIconClick($event)"
+      (_change)="_onChange($event)"
+      (_focus)="_onFocus($event)"
+      (_blur)="_onBlur($event)"
+      (_keypress)="_onKeyPress($event)"
+      [attr.trailingiconarialabel]="trailingIconAriaLabel"
+    >
+      <ng-content />
+    </goa-input>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInputNumber, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: "goab-input-number",
+                    template: `
+    <goa-input
+      [attr.type]="type"
+      [attr.name]="name"
+      [attr.focused]="focused"
+      [attr.value]="value !== null ? value : ''"
+      [attr.autocapitalize]="autoCapitalize"
+      [attr.placeholder]="placeholder"
+      [attr.leadingicon]="leadingIcon"
+      [attr.trailingicon]="trailingIcon"
+      [attr.variant]="variant"
+      [disabled]="disabled"
+      [attr.readonly]="readonly"
+      [attr.error]="error"
+      [attr.data-testid]="testId"
+      [attr.width]="width"
+      [attr.arialabel]="ariaLabel"
+      [attr.arialabelledby]="ariaLabelledBy"
+      [attr.min]="min"
+      [attr.max]="max"
+      [attr.step]="step"
+      [attr.prefix]="prefix"
+      [attr.suffix]="suffix"
+      [attr.debounce]="debounce"
+      [attr.maxlength]="maxLength"
+      [attr.id]="id"
+      [attr.mt]="mt"
+      [attr.mr]="mr"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.handletrailingiconclick]="handleTrailingIconClick"
+      (_trailingIconClick)="_onTrailingIconClick($event)"
+      (_change)="_onChange($event)"
+      (_focus)="_onFocus($event)"
+      (_blur)="_onBlur($event)"
+      (_keypress)="_onKeyPress($event)"
+      [attr.trailingiconarialabel]="trailingIconAriaLabel"
+    >
+      <ng-content />
+    </goa-input>
+  `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            // Use forwardRef with the new class name
+                            useExisting: forwardRef(() => GoabInputNumber),
+                        },
+                    ],
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], autoCapitalize: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], leadingIcon: [{
+                type: Input
+            }], trailingIcon: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], focused: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], testId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], mt: [{
+                type: Input
+            }], mr: [{
+                type: Input
+            }], mb: [{
+                type: Input
+            }], ml: [{
+                type: Input
+            }], trailingIconAriaLabel: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], onTrailingIconClick: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onKeyPress: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }] } });
+
 class GoabLink {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabLink, isStandalone: true, selector: "goab-link", inputs: { leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", testId: "testId", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
@@ -3893,5 +4140,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, CheckedDirective, GoabAccordion, GoabAppFooter, GoabAppFooterMetaSection, GoabAppFooterNavSection, GoabAppHeader, GoabAppHeaderMenu, GoabBadge, GoabBlock, GoabButton, GoabButtonGroup, GoabCallout, GoabCard, GoabCardActions, GoabCardContent, GoabCardImage, GoabCheckbox, GoabChip, GoabCircularProgress, GoabColumnLayout, GoabContainer, GoabDatePicker, GoabDetails, GoabDivider, GoabDropdown, GoabDropdownItem, GoabFileUploadCard, GoabFileUploadInput, GoabFilterChip, GoabFormItem, GoabFormItemSlot, GoabFormStep, GoabFormStepper, GoabGrid, GoabHeroBanner, GoabIcon, GoabIconButton, GoabInput, GoabLink, GoabMicrositeHeader, GoabModal, GoabNotification, GoabPages, GoabPagination, GoabPopover, GoabRadioGroup, GoabRadioItem, GoabSideMenu, GoabSideMenuGroup, GoabSideMenuHeading, GoabSkeleton, GoabSpacer, GoabTab, GoabTable, GoabTableSortHeader, GoabTabs, GoabTextArea, GoabTooltip, ValueDirective, ValueListDirective };
+export { AngularComponentsModule, CheckedDirective, GoabAccordion, GoabAppFooter, GoabAppFooterMetaSection, GoabAppFooterNavSection, GoabAppHeader, GoabAppHeaderMenu, GoabBadge, GoabBlock, GoabButton, GoabButtonGroup, GoabCallout, GoabCard, GoabCardActions, GoabCardContent, GoabCardImage, GoabCheckbox, GoabChip, GoabCircularProgress, GoabColumnLayout, GoabContainer, GoabDatePicker, GoabDetails, GoabDivider, GoabDropdown, GoabDropdownItem, GoabFileUploadCard, GoabFileUploadInput, GoabFilterChip, GoabFormItem, GoabFormItemSlot, GoabFormStep, GoabFormStepper, GoabGrid, GoabHeroBanner, GoabIcon, GoabIconButton, GoabInput, GoabInputNumber, GoabLink, GoabMicrositeHeader, GoabModal, GoabNotification, GoabPages, GoabPagination, GoabPopover, GoabRadioGroup, GoabRadioItem, GoabSideMenu, GoabSideMenuGroup, GoabSideMenuHeading, GoabSkeleton, GoabSpacer, GoabTab, GoabTable, GoabTableSortHeader, GoabTabs, GoabTextArea, GoabTooltip, ValueDirective, ValueListDirective };
 //# sourceMappingURL=abgov-angular-components.mjs.map