@abgov/angular-components
Version:
Government of Alberta - UI components for Angular
118 lines • 13.5 kB
JavaScript
import { booleanAttribute, Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
export class GoabBaseComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", 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: "18.0.3", 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.
*
* ## Usage
* Extend this class to create custom form controls. Implement additional functionality as needed for your specific use case.
*
* ## 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.
* - `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.
*
* ## Callbacks
* - `fcChange?`: A function to handle changes in the form control value.
* - `fcTouched?`: A function to handle touch events on the form control.
*/
export class GoabControlValueAccessor extends GoabBaseComponent {
constructor() {
super(...arguments);
this.touched = false;
}
/**
* 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;
}
}
/**
* Writes a new value to the form control.
* @param {unknown} value - The value to write.
*/
writeValue(value) {
this.value = value;
}
/**
* 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: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
type: Component,
args: [{
standalone: true,
template: ``, //** IMPLEMENT IN SUBCLASS
}]
}], propDecorators: { id: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], error: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], value: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBT25FLE1BQU0sT0FBZ0IsaUJBQWlCOzhHQUFqQixpQkFBaUI7a0dBQWpCLGlCQUFpQiw4SUFGM0IsRUFBRTs7MkZBRVEsaUJBQWlCO2tCQUp0QyxTQUFTO21CQUFDO29CQUNULFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsRUFBRSxFQUFFLDBCQUEwQjtpQkFDekM7OEJBRVUsRUFBRTtzQkFBVixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSzs7QUFPUjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E2Qkc7QUFDSCxNQUFNLE9BQWdCLHdCQUNwQixTQUFRLGlCQUFpQjtJQW5DM0I7O1FBMkRVLFlBQU8sR0FBRyxLQUFLLENBQUM7S0E2Q3pCO0lBM0NDOzs7T0FHRztJQUNJLGFBQWE7UUFDbEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUN0QixDQUFDO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNJLFVBQVUsQ0FBQyxLQUFjO1FBQzlCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7O09BR0c7SUFDSSxnQkFBZ0IsQ0FBQyxFQUFPO1FBQzdCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7O09BR0c7SUFDSSxpQkFBaUIsQ0FBQyxFQUFPO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ksZ0JBQWdCLENBQUUsVUFBbUI7UUFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQzs4R0FyRW1CLHdCQUF3QjtrR0FBeEIsd0JBQXdCLHVHQU14QixnQkFBZ0IsNkJBRWhCLGdCQUFnQixvRUF4QzFCLEVBQUU7OzJGQWdDUSx3QkFBd0I7a0JBbEM3QyxTQUFTO21CQUFDO29CQUNULFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsRUFBRSxFQUFFLDBCQUEwQjtpQkFDekM7OEJBbUNVLEVBQUU7c0JBQVYsS0FBSztnQkFFeUMsUUFBUTtzQkFBdEQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFFUyxLQUFLO3NCQUFuRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUU3QixLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55ICovXG5pbXBvcnQgeyBTcGFjaW5nIH0gZnJvbSBcIkBhYmdvdi91aS1jb21wb25lbnRzLWNvbW1vblwiO1xuaW1wb3J0IHsgYm9vbGVhbkF0dHJpYnV0ZSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGU6IGBgLCAvLyoqIElNUExFTUVOVCBJTiBTVUJDTEFTU1xufSlcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBHb2FiQmFzZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG10PzogU3BhY2luZztcbiAgQElucHV0KCkgbWI/OiBTcGFjaW5nO1xuICBASW5wdXQoKSBtbD86IFNwYWNpbmc7XG4gIEBJbnB1dCgpIG1yPzogU3BhY2luZztcbiAgQElucHV0KCkgdGVzdElkPzogc3RyaW5nO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGU6IGBgLCAvLyoqIElNUExFTUVOVCBJTiBTVUJDTEFTU1xufSlcbi8qKlxuICogQW4gYWJzdHJhY3QgYmFzZSBjbGFzcyB0aGF0IGV4dGVuZHMgYEdvYWJCYXNlQ29tcG9uZW50YCBhbmQgaW1wbGVtZW50cyB0aGUgYENvbnRyb2xWYWx1ZUFjY2Vzc29yYCBpbnRlcmZhY2UuXG4gKiBUaGlzIGNsYXNzIHByb3ZpZGVzIGEgZm91bmRhdGlvbiBmb3IgY3JlYXRpbmcgY3VzdG9tIGZvcm0gY29udHJvbHMgaW4gQW5ndWxhciwgZW5hYmxpbmcgdGhlbSB0byBpbnRlZ3JhdGVcbiAqIHNlYW1sZXNzbHkgd2l0aCBBbmd1bGFyIGZvcm1zLiBJdCBpbmNsdWRlcyBzdXBwb3J0IGZvciBoYW5kbGluZyB2YWx1ZSBjaGFuZ2VzLCB0b3VjaCBldmVudHMsIGFuZCBkaXNhYmxlZCBzdGF0ZXMuXG4gKlxuICogIyMgRmVhdHVyZXNcbiAqIC0gU3VwcG9ydHMgYGRpc2FibGVkPVwidHJ1ZVwiYCBhbmQgYGVycm9yPVwidHJ1ZWAgYXR0cmlidXRlIGJpbmRpbmdzIGZvciBjb252ZW5pZW5jZS5cbiAqIC0gSGFuZGxlcyBmb3JtIGNvbnRyb2wgdmFsdWUgY2hhbmdlcyBhbmQgdG91Y2ggZXZlbnRzIHZpYSBgQ29udHJvbFZhbHVlQWNjZXNzb3JgIG1ldGhvZHMuXG4gKiAtIEFsbG93cyBmb3IgZmxleGlibGUgdmFsdWUgdHlwZXMgKGB1bmtub3duYCksIG1ha2luZyBpdCBzdWl0YWJsZSBmb3IgdmFyaW91cyBkYXRhIHR5cGVzIGxpa2UgaW50ZWdlcnMsIGRhdGVzLCBvciBib29sZWFucy5cbiAqXG4gKiAjIyBVc2FnZVxuICogRXh0ZW5kIHRoaXMgY2xhc3MgdG8gY3JlYXRlIGN1c3RvbSBmb3JtIGNvbnRyb2xzLiBJbXBsZW1lbnQgYWRkaXRpb25hbCBmdW5jdGlvbmFsaXR5IGFzIG5lZWRlZCBmb3IgeW91ciBzcGVjaWZpYyB1c2UgY2FzZS5cbiAqXG4gKiAjIyBQcm9wZXJ0aWVzXG4gKiAtIGBpZD9gOiBBbiBvcHRpb25hbCBpZGVudGlmaWVyIGZvciB0aGUgY29tcG9uZW50LlxuICogLSBgZGlzYWJsZWQ/YDogQSBib29sZWFuIGluZGljYXRpbmcgd2hldGhlciB0aGUgY29tcG9uZW50IGlzIGRpc2FibGVkLlxuICogLSBgZXJyb3I/YDogQSBib29sZWFuIGluZGljYXRpbmcgd2hldGhlciB0aGUgY29tcG9uZW50IGlzIGluIGFuIGVycm9yIHN0YXRlLlxuICogLSBgdmFsdWU/YDogVGhlIGN1cnJlbnQgdmFsdWUgb2YgdGhlIGNvbXBvbmVudCwgd2hpY2ggY2FuIGJlIG9mIGFueSB0eXBlLlxuICpcbiAqICMjIE1ldGhvZHNcbiAqIC0gYG1hcmtBc1RvdWNoZWQoKWA6IE1hcmtzIHRoZSBjb21wb25lbnQgYXMgdG91Y2hlZCBhbmQgdHJpZ2dlcnMgdGhlIGBmY1RvdWNoZWRgIGNhbGxiYWNrIGlmIGRlZmluZWQuXG4gKiAtIGB3cml0ZVZhbHVlKHZhbHVlOiB1bmtub3duKWA6IFdyaXRlcyBhIG5ldyB2YWx1ZSB0byB0aGUgZm9ybSBjb250cm9sLlxuICogLSBgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KWA6IFJlZ2lzdGVycyBhIGZ1bmN0aW9uIHRvIGhhbmRsZSBjaGFuZ2VzIGluIHRoZSBmb3JtIGNvbnRyb2wgdmFsdWUuXG4gKiAtIGByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KWA6IFJlZ2lzdGVycyBhIGZ1bmN0aW9uIHRvIGhhbmRsZSB0b3VjaCBldmVudHMgb24gdGhlIGZvcm0gY29udHJvbC5cbiAqIC0gYHNldERpc2FibGVkU3RhdGU/KGlzRGlzYWJsZWQ6IGJvb2xlYW4pYDogU2V0cyB0aGUgZGlzYWJsZWQgc3RhdGUgb2YgdGhlIGNvbXBvbmVudC5cbiAqXG4gKiAjIyBDYWxsYmFja3NcbiAqIC0gYGZjQ2hhbmdlP2A6IEEgZnVuY3Rpb24gdG8gaGFuZGxlIGNoYW5nZXMgaW4gdGhlIGZvcm0gY29udHJvbCB2YWx1ZS5cbiAqIC0gYGZjVG91Y2hlZD9gOiBBIGZ1bmN0aW9uIHRvIGhhbmRsZSB0b3VjaCBldmVudHMgb24gdGhlIGZvcm0gY29udHJvbC5cbiAqL1xuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEdvYWJDb250cm9sVmFsdWVBY2Nlc3NvclxuICBleHRlbmRzIEdvYWJCYXNlQ29tcG9uZW50XG4gIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3JcbntcbiAgQElucHV0KCkgaWQ/OiBzdHJpbmc7XG4gIC8vIHN1cHBvcnRzIGRpc2FibGVkPVwidHJ1ZVwiIGluc3RlYWQgb2YgW2Rpc2FibGVkXT1cInRydWVcIlxuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgcHVibGljIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgLy8gc3VwcG9ydHMgZXJyb3I9XCJ0cnVlXCIgaW5zdGVhZCBvZiBbZXJyb3JdPVwidHJ1ZVwiXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBwdWJsaWMgZXJyb3I/OiBib29sZWFuO1xuICAvLyB0aGlzIHNob3VsZCBiZSB1bmtub3duIChub3Qgc3RyaW5nKSBhcyBpdCBtaWdodCBiZSBhbiBpbnRlZ2VyIG9yIGEgZGF0ZSBvciBhIGJvb2xlYW5cbiAgQElucHV0KCkgdmFsdWU/OiB1bmtub3duIHwgbnVsbCB8IHVuZGVmaW5lZDtcblxuICAvLyBpbXBsZW1lbnQgQ29udHJvbFZhbHVlQWNjZXNzb3JcblxuICAvKipcbiAgICogRnVuY3Rpb24gdG8gaGFuZGxlIGNoYW5nZXMgaW4gdGhlIGZvcm0gY29udHJvbCB2YWx1ZS5cbiAgICogQHBhcmFtIHt1bmtub3dufSB2YWx1ZSAtIFRoZSBuZXcgdmFsdWUuXG4gICAqL1xuICBwdWJsaWMgZmNDaGFuZ2U/OiAodmFsdWU6IHVua25vd24pID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIEZ1bmN0aW9uIHRvIGhhbmRsZSB0b3VjaCBldmVudHMgb24gdGhlIGZvcm0gY29udHJvbC5cbiAgICovXG4gIHB1YmxpYyBmY1RvdWNoZWQ/OiAoKSA9PiB1bmtub3duO1xuXG4gIHByaXZhdGUgdG91Y2hlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBNYXJrcyB0aGUgY29tcG9uZW50IGFzIHRvdWNoZWQuIElmIHRoZSBjb21wb25lbnQgaXMgbm90IGFscmVhZHkgbWFya2VkIGFzIHRvdWNoZWQsXG4gICAqIGl0IHRyaWdnZXJzIHRoZSBgZmNUb3VjaGVkYCBjYWxsYmFjayAoaWYgZGVmaW5lZCkgYW5kIHNldHMgdGhlIGB0b3VjaGVkYCBwcm9wZXJ0eSB0byBgdHJ1ZWAuXG4gICAqL1xuICBwdWJsaWMgbWFya0FzVG91Y2hlZCgpIHtcbiAgICBpZiAoIXRoaXMudG91Y2hlZCkge1xuICAgICAgdGhpcy5mY1RvdWNoZWQ/LigpO1xuICAgICAgdGhpcy50b3VjaGVkID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogV3JpdGVzIGEgbmV3IHZhbHVlIHRvIHRoZSBmb3JtIGNvbnRyb2wuXG4gICAqIEBwYXJhbSB7dW5rbm93bn0gdmFsdWUgLSBUaGUgdmFsdWUgdG8gd3JpdGUuXG4gICAqL1xuICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogdW5rbm93bik6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZWdpc3RlcnMgYSBmdW5jdGlvbiB0byBjYWxsIHdoZW4gdGhlIGZvcm0gY29udHJvbCB2YWx1ZSBjaGFuZ2VzLlxuICAgKiBAcGFyYW0ge2Z1bmN0aW9ufSBmbiAtIFRoZSBmdW5jdGlvbiB0byBjYWxsLlxuICAgKi9cbiAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuZmNDaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZWdpc3RlcnMgYSBmdW5jdGlvbiB0byBjYWxsIHdoZW4gdGhlIGZvcm0gY29udHJvbCBpcyB0b3VjaGVkLlxuICAgKiBAcGFyYW0ge2Z1bmN0aW9ufSBmbiAtIFRoZSBmdW5jdGlvbiB0byBjYWxsLlxuICAgKi9cbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLmZjVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGRpc2FibGVkIHN0YXRlIG9mIHRoZSBjb21wb25lbnQuXG4gICAqXG4gICAqIEBwYXJhbSBpc0Rpc2FibGVkIC0gQSBib29sZWFuIGluZGljYXRpbmcgd2hldGhlciB0aGUgY29tcG9uZW50IHNob3VsZCBiZSBkaXNhYmxlZC5cbiAgICovXG4gIHB1YmxpYyBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cbn1cbiJdfQ==