@compsych-ui-components/angular 7.0.7 → 7.0.10

package/esm2022/index.js

@@ -6,6 +6,7 @@ import { HeaderNavComponent } from './lib/header-nav/header-nav';
 import { SidebarComponent } from './lib/sidebar/sidebar';
 import { CardComponent } from './lib/card-base/card';
 import { CardGridComponent } from './lib/card-grid/card-grid';
+import { TextInputComponent } from './lib/text-input/text-input';
 import * as i0 from "@angular/core";
 export { ButtonComponent } from './lib/button/button';
 export { AccordionComponent } from './lib/accordion/accordion';
@@ -15,6 +16,7 @@ export { SidebarComponent } from './lib/sidebar/sidebar';
 export { CardComponent } from './lib/card-base/card';
 export { RippleDirective } from './lib/card-base/ripple.directive';
 export { CardGridComponent } from './lib/card-grid/card-grid';
+export { TextInputComponent } from './lib/text-input/text-input';
 export class CompsychAngularModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, imports: [ButtonComponent,
@@ -23,13 +25,15 @@ export class CompsychAngularModule {
             HeaderNavComponent,
             SidebarComponent,
             CardComponent,
-            CardGridComponent], exports: [ButtonComponent,
+            CardGridComponent,
+            TextInputComponent], exports: [ButtonComponent,
             AccordionComponent,
             FooterComponent,
             HeaderNavComponent,
             SidebarComponent,
             CardComponent,
-            CardGridComponent] });
+            CardGridComponent,
+            TextInputComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, decorators: [{
@@ -43,6 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         SidebarComponent,
                         CardComponent,
                         CardGridComponent,
+                        TextInputComponent,
                     ],
                     exports: [
                         ButtonComponent,
@@ -52,6 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         SidebarComponent,
                         CardComponent,
                         CardGridComponent,
+                        TextInputComponent,
                     ],
                 }]
         }] });

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAuB9D,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YAlB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,iBAAiB,aAGjB,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,iBAAiB;yGAGR,qBAAqB;;4FAArB,qBAAqB;kBApBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,iBAAiB;qBAClB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,iBAAiB;qBAClB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { CardGridComponent } from './lib/card-grid/card-grid';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardHeadingLevel } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { CardGridComponent } from './lib/card-grid/card-grid';\r\nexport type { CardGridLayout } from './lib/card-grid/card-grid';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    CardGridComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    CardGridComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAyBjE,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YApB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,iBAAiB;YACjB,kBAAkB,aAGlB,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,iBAAiB;YACjB,kBAAkB;yGAGT,qBAAqB;;4FAArB,qBAAqB;kBAtBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,iBAAiB;wBACjB,kBAAkB;qBACnB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,iBAAiB;wBACjB,kBAAkB;qBACnB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { CardGridComponent } from './lib/card-grid/card-grid';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardHeadingLevel } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { CardGridComponent } from './lib/card-grid/card-grid';\r\nexport type { CardGridLayout } from './lib/card-grid/card-grid';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    CardGridComponent,\r\n    TextInputComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    CardGridComponent,\r\n    TextInputComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}

package/esm2022/lib/text-input/text-input.js

@@ -0,0 +1,312 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, booleanAttribute, inject, } from '@angular/core';
+import { NgControl, Validators } from '@angular/forms';
+import { ButtonComponent } from '../button/button';
+import * as i0 from "@angular/core";
+let nextId = 0;
+/**
+ * A labelled text input that wraps a native `<input>` element.
+ * Implements `ControlValueAccessor` so it works with both reactive forms
+ * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`).
+ * The error visual state is driven automatically by the bound `FormControl`'s
+ * validity once the field has been touched, and can also be set explicitly via
+ * the `error` input for use outside of Angular forms.
+ */
+export class TextInputComponent {
+    _autoId = `cmp-text-input-${++nextId}`;
+    cdr = inject(ChangeDetectorRef);
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Injected when the component is used inside a reactive or template-driven form. */
+    ngControl;
+    constructor() {
+        const ctrl = inject(NgControl, { optional: true, self: true });
+        if (ctrl)
+            ctrl.valueAccessor = this;
+        this.ngControl = ctrl;
+    }
+    /** Label displayed above the input. */
+    label = '';
+    /** Placeholder text shown inside the input when empty. */
+    placeholder = '';
+    /** Current value of the input. When used in a form, the form controls the value. */
+    value = '';
+    /** Native input type. Defaults to `'text'`. Use `'password'` to mask the value. */
+    type = 'text';
+    /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */
+    size = 'medium';
+    /** Native `name` attribute forwarded to the `<input>`. Defaults to the auto-generated id. */
+    name;
+    /** Native `id` attribute for the `<input>`. Auto-generated if omitted. */
+    id;
+    /**
+     * Id(s) of external elements that describe the input, space-separated.
+     * Forwarded to `aria-describedby` on the native `<input>`.
+     */
+    ariaDescribedBy;
+    /** Text displayed below the input. Shown in red when the input is in error state. */
+    supportingText = '';
+    /**
+     * Static error text shown in red when the input is in error state.
+     * Used when the input is outside a form (with `[error]="true"`).
+     * When inside a form, prefer `errorMessages` for per-validator messages.
+     */
+    errorMessage = '';
+    /**
+     * Map of Angular validator error keys to display strings.
+     * The component reads `ngControl.errors` to determine which validator failed
+     * and shows the matching message in red below the input.
+     * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`
+     */
+    errorMessages = {};
+    _labelButton = null;
+    /**
+     * JSON string configuring the optional button at the right of the label row.
+     * Hidden when empty or omitted. Example: `'{"id":"show","label":"Show"}'`
+     * Clicking emits the button's `id` via the `labelButtonClick` output.
+     */
+    set labelButton(json) {
+        if (!json) {
+            this._labelButton = null;
+            return;
+        }
+        try {
+            this._labelButton = JSON.parse(json);
+        }
+        catch {
+            this._labelButton = null;
+        }
+    }
+    /** @internal Template access to the parsed label button config. */
+    get parsedLabelButton() {
+        return this._labelButton;
+    }
+    /**
+     * Adds a blue asterisk after the label. When used in a form, this is set
+     * automatically if the bound `FormControl` has `Validators.required`.
+     * Can also be set explicitly for non-form use. Supports boolean coercion.
+     */
+    required = false;
+    /**
+     * Applies the error visual state (red border) explicitly. When used in a form,
+     * the error state is driven automatically from the `FormControl`'s validity once
+     * the field is touched — this input is only needed outside of forms.
+     * Supports boolean coercion.
+     */
+    error = false;
+    /** Disables the input. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */
+    disabled = false;
+    /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */
+    readonly = false;
+    /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */
+    valueChange = new EventEmitter();
+    /** Emits the label button's `id` when it is clicked. */
+    labelButtonClick = new EventEmitter();
+    get inputId() {
+        return this.id ?? this._autoId;
+    }
+    /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
+    get hasError() {
+        return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);
+    }
+    /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */
+    get isRequired() {
+        return this.required || !!(this.ngControl?.control?.hasValidator(Validators.required));
+    }
+    get activeErrorMessage() {
+        const errors = this.ngControl?.errors;
+        if (!errors)
+            return '';
+        for (const key of Object.keys(errors)) {
+            if (this.errorMessages[key])
+                return this.errorMessages[key];
+        }
+        return '';
+    }
+    get displayedSupportingText() {
+        if (this.hasError) {
+            return this.activeErrorMessage || this.errorMessage || this.supportingText;
+        }
+        return this.supportingText;
+    }
+    get describedBy() {
+        const parts = [];
+        if (this.ariaDescribedBy)
+            parts.push(this.ariaDescribedBy);
+        if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {
+            parts.push(this.inputId + '-supporting');
+        }
+        return parts.length ? parts.join(' ') : null;
+    }
+    get wrapperClasses() {
+        return ['cmp-text-field', this.size, this.disabled ? 'disabled' : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    // ── Event handlers ──────────────────────────────────────────────────────────
+    onInput(event) {
+        const value = event.target.value;
+        this.value = value;
+        this._onChange(value);
+        this.valueChange.emit(value);
+    }
+    onBlur() {
+        this._onTouched();
+        this.cdr.markForCheck();
+    }
+    onLabelButtonClick() {
+        if (this._labelButton) {
+            this.labelButtonClick.emit(this._labelButton.id);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextInputComponent, isStandalone: true, selector: "compsych-text-input", inputs: { label: "label", placeholder: "placeholder", value: "value", type: "type", size: "size", name: "name", id: "id", ariaDescribedBy: "ariaDescribedBy", supportingText: "supportingText", errorMessage: "errorMessage", errorMessages: "errorMessages", labelButton: "labelButton", required: ["required", "required", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { valueChange: "valueChange", labelButtonClick: "labelButtonClick" }, ngImport: i0, template: `
+    <div [class]="wrapperClasses">
+      <div class="label-row">
+        <label class="label" [for]="inputId">
+          {{ label }}
+          @if (isRequired) {
+            <span class="required-marker" aria-hidden="true"> *</span>
+          }
+        </label>
+        @if (parsedLabelButton) {
+          <compsych-button
+            [label]="parsedLabelButton.label"
+            [variant]="parsedLabelButton.variant ?? 'text'"
+            size="small"
+            [leadingIcon]="parsedLabelButton.leadingIcon"
+            [trailingIcon]="parsedLabelButton.trailingIcon"
+            [iconOnly]="!!parsedLabelButton.iconOnly"
+            [disabled]="disabled"
+            (click)="onLabelButtonClick()"
+          />
+        }
+      </div>
+      <input
+        class="input"
+        [id]="inputId"
+        [name]="name || inputId"
+        [type]="type"
+        [placeholder]="placeholder"
+        [value]="value"
+        [disabled]="disabled"
+        [readOnly]="readonly"
+        [attr.required]="isRequired ? '' : null"
+        [class.error]="hasError"
+        [attr.aria-invalid]="hasError ? 'true' : null"
+        [attr.aria-describedby]="describedBy"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      @if (displayedSupportingText) {
+        <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="inputId + '-supporting'">
+          {{ displayedSupportingText }}
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "compsych-button", inputs: ["label", "variant", "size", "leadingIcon", "trailingIcon", "type", "ariaLabel", "iconOnly", "disabled", "loading", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'compsych-text-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: `
+    <div [class]="wrapperClasses">
+      <div class="label-row">
+        <label class="label" [for]="inputId">
+          {{ label }}
+          @if (isRequired) {
+            <span class="required-marker" aria-hidden="true"> *</span>
+          }
+        </label>
+        @if (parsedLabelButton) {
+          <compsych-button
+            [label]="parsedLabelButton.label"
+            [variant]="parsedLabelButton.variant ?? 'text'"
+            size="small"
+            [leadingIcon]="parsedLabelButton.leadingIcon"
+            [trailingIcon]="parsedLabelButton.trailingIcon"
+            [iconOnly]="!!parsedLabelButton.iconOnly"
+            [disabled]="disabled"
+            (click)="onLabelButtonClick()"
+          />
+        }
+      </div>
+      <input
+        class="input"
+        [id]="inputId"
+        [name]="name || inputId"
+        [type]="type"
+        [placeholder]="placeholder"
+        [value]="value"
+        [disabled]="disabled"
+        [readOnly]="readonly"
+        [attr.required]="isRequired ? '' : null"
+        [class.error]="hasError"
+        [attr.aria-invalid]="hasError ? 'true' : null"
+        [attr.aria-describedby]="describedBy"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      @if (displayedSupportingText) {
+        <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="inputId + '-supporting'">
+          {{ displayedSupportingText }}
+        </span>
+      }
+    </div>
+  `, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], supportingText: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], labelButton: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], error: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], labelButtonClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=text-input.js.map

package/esm2022/lib/text-input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/text-input/text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl, Validators } from '@angular/forms';\nimport { ButtonComponent, ButtonVariant } from '../button/button';\n\n/** Size variant of a `compsych-text-input`. Controls input height, padding, and font size. */\nexport type TextInputSize = 'small' | 'medium' | 'large';\n\n/** Native input type. */\nexport type TextInputType = 'text' | 'password';\n\n/** Configuration for the optional button rendered at the right of the label row. */\nexport interface TextInputLabelButton {\n  /** Stable identifier emitted by `labelButtonClick` when clicked. */\n  id: string;\n  /** Text displayed on the button. */\n  label: string;\n  /** Visual style of the button. Defaults to `'text'`. */\n  variant?: ButtonVariant;\n  /** Lucide icon name shown before the label. */\n  leadingIcon?: string;\n  /** Lucide icon name shown after the label. */\n  trailingIcon?: string;\n  /** Hides the label and renders a square icon-only button. Requires `leadingIcon`. */\n  iconOnly?: boolean;\n}\n\nlet nextId = 0;\n\n/**\n * A labelled text input that wraps a native `<input>` element.\n * Implements `ControlValueAccessor` so it works with both reactive forms\n * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`).\n * The error visual state is driven automatically by the bound `FormControl`'s\n * validity once the field has been touched, and can also be set explicitly via\n * the `error` input for use outside of Angular forms.\n */\n@Component({\n  selector: 'compsych-text-input',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [ButtonComponent],\n  template: `\n    <div [class]=\"wrapperClasses\">\n      <div class=\"label-row\">\n        <label class=\"label\" [for]=\"inputId\">\n          {{ label }}\n          @if (isRequired) {\n            <span class=\"required-marker\" aria-hidden=\"true\"> *</span>\n          }\n        </label>\n        @if (parsedLabelButton) {\n          <compsych-button\n            [label]=\"parsedLabelButton.label\"\n            [variant]=\"parsedLabelButton.variant ?? 'text'\"\n            size=\"small\"\n            [leadingIcon]=\"parsedLabelButton.leadingIcon\"\n            [trailingIcon]=\"parsedLabelButton.trailingIcon\"\n            [iconOnly]=\"!!parsedLabelButton.iconOnly\"\n            [disabled]=\"disabled\"\n            (click)=\"onLabelButtonClick()\"\n          />\n        }\n      </div>\n      <input\n        class=\"input\"\n        [id]=\"inputId\"\n        [name]=\"name || inputId\"\n        [type]=\"type\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readonly\"\n        [attr.required]=\"isRequired ? '' : null\"\n        [class.error]=\"hasError\"\n        [attr.aria-invalid]=\"hasError ? 'true' : null\"\n        [attr.aria-describedby]=\"describedBy\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\n      />\n      @if (displayedSupportingText) {\n        <span class=\"supporting-text\" [class.supporting-text--error]=\"hasError\" [id]=\"inputId + '-supporting'\">\n          {{ displayedSupportingText }}\n        </span>\n      }\n    </div>\n  `,\n  styleUrl: './text-input.css',\n})\nexport class TextInputComponent implements ControlValueAccessor {\n  private readonly _autoId = `cmp-text-input-${++nextId}`;\n  private readonly cdr = inject(ChangeDetectorRef);\n  private _onChange: (value: string) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  /** Injected when the component is used inside a reactive or template-driven form. */\n  protected readonly ngControl: NgControl | null;\n\n  constructor() {\n    const ctrl = inject(NgControl, { optional: true, self: true });\n    if (ctrl) ctrl.valueAccessor = this;\n    this.ngControl = ctrl;\n  }\n\n  /** Label displayed above the input. */\n  @Input() label = '';\n  /** Placeholder text shown inside the input when empty. */\n  @Input() placeholder = '';\n  /** Current value of the input. When used in a form, the form controls the value. */\n  @Input() value = '';\n  /** Native input type. Defaults to `'text'`. Use `'password'` to mask the value. */\n  @Input() type: TextInputType = 'text';\n  /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */\n  @Input() size: TextInputSize = 'medium';\n  /** Native `name` attribute forwarded to the `<input>`. Defaults to the auto-generated id. */\n  @Input() name?: string;\n  /** Native `id` attribute for the `<input>`. Auto-generated if omitted. */\n  @Input() id?: string;\n  /**\n   * Id(s) of external elements that describe the input, space-separated.\n   * Forwarded to `aria-describedby` on the native `<input>`.\n   */\n  @Input() ariaDescribedBy?: string;\n  /** Text displayed below the input. Shown in red when the input is in error state. */\n  @Input() supportingText = '';\n  /**\n   * Static error text shown in red when the input is in error state.\n   * Used when the input is outside a form (with `[error]=\"true\"`).\n   * When inside a form, prefer `errorMessages` for per-validator messages.\n   */\n  @Input() errorMessage = '';\n  /**\n   * Map of Angular validator error keys to display strings.\n   * The component reads `ngControl.errors` to determine which validator failed\n   * and shows the matching message in red below the input.\n   * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`\n   */\n  @Input() errorMessages: Record<string, string> = {};\n\n  private _labelButton: TextInputLabelButton | null = null;\n\n  /**\n   * JSON string configuring the optional button at the right of the label row.\n   * Hidden when empty or omitted. Example: `'{\"id\":\"show\",\"label\":\"Show\"}'`\n   * Clicking emits the button's `id` via the `labelButtonClick` output.\n   */\n  @Input() set labelButton(json: string) {\n    if (!json) { this._labelButton = null; return; }\n    try {\n      this._labelButton = JSON.parse(json) as TextInputLabelButton;\n    } catch {\n      this._labelButton = null;\n    }\n  }\n\n  /** @internal Template access to the parsed label button config. */\n  protected get parsedLabelButton(): TextInputLabelButton | null {\n    return this._labelButton;\n  }\n\n  /**\n   * Adds a blue asterisk after the label. When used in a form, this is set\n   * automatically if the bound `FormControl` has `Validators.required`.\n   * Can also be set explicitly for non-form use. Supports boolean coercion.\n   */\n  @Input({ transform: booleanAttribute }) required = false;\n  /**\n   * Applies the error visual state (red border) explicitly. When used in a form,\n   * the error state is driven automatically from the `FormControl`'s validity once\n   * the field is touched — this input is only needed outside of forms.\n   * Supports boolean coercion.\n   */\n  @Input({ transform: booleanAttribute }) error = false;\n  /** Disables the input. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */\n  @Input({ transform: booleanAttribute }) disabled = false;\n  /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */\n  @Input({ transform: booleanAttribute }) readonly = false;\n\n  /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */\n  @Output() readonly valueChange = new EventEmitter<string>();\n  /** Emits the label button's `id` when it is clicked. */\n  @Output() readonly labelButtonClick = new EventEmitter<string>();\n\n  get inputId(): string {\n    return this.id ?? this._autoId;\n  }\n\n  /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */\n  get hasError(): boolean {\n    return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);\n  }\n\n  /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */\n  get isRequired(): boolean {\n    return this.required || !!(this.ngControl?.control?.hasValidator(Validators.required));\n  }\n\n  private get activeErrorMessage(): string {\n    const errors = this.ngControl?.errors;\n    if (!errors) return '';\n    for (const key of Object.keys(errors)) {\n      if (this.errorMessages[key]) return this.errorMessages[key];\n    }\n    return '';\n  }\n\n  get displayedSupportingText(): string {\n    if (this.hasError) {\n      return this.activeErrorMessage || this.errorMessage || this.supportingText;\n    }\n    return this.supportingText;\n  }\n\n  get describedBy(): string | null {\n    const parts: string[] = [];\n    if (this.ariaDescribedBy) parts.push(this.ariaDescribedBy);\n    if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {\n      parts.push(this.inputId + '-supporting');\n    }\n    return parts.length ? parts.join(' ') : null;\n  }\n\n  get wrapperClasses(): string {\n    return ['cmp-text-field', this.size, this.disabled ? 'disabled' : '']\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  // ── ControlValueAccessor ────────────────────────────────────────────────────\n\n  writeValue(value: string | null): void {\n    this.value = value ?? '';\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this._onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  // ── Event handlers ──────────────────────────────────────────────────────────\n\n  protected onInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    this.value = value;\n    this._onChange(value);\n    this.valueChange.emit(value);\n  }\n\n  protected onBlur(): void {\n    this._onTouched();\n    this.cdr.markForCheck();\n  }\n\n  protected onLabelButtonClick(): void {\n    if (this._labelButton) {\n      this.labelButtonClick.emit(this._labelButton.id);\n    }\n  }\n}\n"]}

package/index.d.ts

@@ -6,6 +6,7 @@ import * as i4 from "./lib/header-nav/header-nav";
 import * as i5 from "./lib/sidebar/sidebar";
 import * as i6 from "./lib/card-base/card";
 import * as i7 from "./lib/card-grid/card-grid";
+import * as i8 from "./lib/text-input/text-input";
 export { ButtonComponent } from './lib/button/button';
 export type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';
 export { AccordionComponent } from './lib/accordion/accordion';
@@ -21,8 +22,10 @@ export type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientat
 export { RippleDirective } from './lib/card-base/ripple.directive';
 export { CardGridComponent } from './lib/card-grid/card-grid';
 export type { CardGridLayout } from './lib/card-grid/card-grid';
+export { TextInputComponent } from './lib/text-input/text-input';
+export type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';
 export declare class CompsychAngularModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CompsychAngularModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.CardGridComponent], [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.CardGridComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.CardGridComponent, typeof i8.TextInputComponent], [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.CardGridComponent, typeof i8.TextInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CompsychAngularModule>;
 }

package/lib/text-input/text-input.d.ts

@@ -0,0 +1,127 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ButtonVariant } from '../button/button';
+import * as i0 from "@angular/core";
+/** Size variant of a `compsych-text-input`. Controls input height, padding, and font size. */
+export type TextInputSize = 'small' | 'medium' | 'large';
+/** Native input type. */
+export type TextInputType = 'text' | 'password';
+/** Configuration for the optional button rendered at the right of the label row. */
+export interface TextInputLabelButton {
+    /** Stable identifier emitted by `labelButtonClick` when clicked. */
+    id: string;
+    /** Text displayed on the button. */
+    label: string;
+    /** Visual style of the button. Defaults to `'text'`. */
+    variant?: ButtonVariant;
+    /** Lucide icon name shown before the label. */
+    leadingIcon?: string;
+    /** Lucide icon name shown after the label. */
+    trailingIcon?: string;
+    /** Hides the label and renders a square icon-only button. Requires `leadingIcon`. */
+    iconOnly?: boolean;
+}
+/**
+ * A labelled text input that wraps a native `<input>` element.
+ * Implements `ControlValueAccessor` so it works with both reactive forms
+ * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`).
+ * The error visual state is driven automatically by the bound `FormControl`'s
+ * validity once the field has been touched, and can also be set explicitly via
+ * the `error` input for use outside of Angular forms.
+ */
+export declare class TextInputComponent implements ControlValueAccessor {
+    private readonly _autoId;
+    private readonly cdr;
+    private _onChange;
+    private _onTouched;
+    /** Injected when the component is used inside a reactive or template-driven form. */
+    protected readonly ngControl: NgControl | null;
+    constructor();
+    /** Label displayed above the input. */
+    label: string;
+    /** Placeholder text shown inside the input when empty. */
+    placeholder: string;
+    /** Current value of the input. When used in a form, the form controls the value. */
+    value: string;
+    /** Native input type. Defaults to `'text'`. Use `'password'` to mask the value. */
+    type: TextInputType;
+    /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */
+    size: TextInputSize;
+    /** Native `name` attribute forwarded to the `<input>`. Defaults to the auto-generated id. */
+    name?: string;
+    /** Native `id` attribute for the `<input>`. Auto-generated if omitted. */
+    id?: string;
+    /**
+     * Id(s) of external elements that describe the input, space-separated.
+     * Forwarded to `aria-describedby` on the native `<input>`.
+     */
+    ariaDescribedBy?: string;
+    /** Text displayed below the input. Shown in red when the input is in error state. */
+    supportingText: string;
+    /**
+     * Static error text shown in red when the input is in error state.
+     * Used when the input is outside a form (with `[error]="true"`).
+     * When inside a form, prefer `errorMessages` for per-validator messages.
+     */
+    errorMessage: string;
+    /**
+     * Map of Angular validator error keys to display strings.
+     * The component reads `ngControl.errors` to determine which validator failed
+     * and shows the matching message in red below the input.
+     * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`
+     */
+    errorMessages: Record<string, string>;
+    private _labelButton;
+    /**
+     * JSON string configuring the optional button at the right of the label row.
+     * Hidden when empty or omitted. Example: `'{"id":"show","label":"Show"}'`
+     * Clicking emits the button's `id` via the `labelButtonClick` output.
+     */
+    set labelButton(json: string);
+    /** @internal Template access to the parsed label button config. */
+    protected get parsedLabelButton(): TextInputLabelButton | null;
+    /**
+     * Adds a blue asterisk after the label. When used in a form, this is set
+     * automatically if the bound `FormControl` has `Validators.required`.
+     * Can also be set explicitly for non-form use. Supports boolean coercion.
+     */
+    required: boolean;
+    /**
+     * Applies the error visual state (red border) explicitly. When used in a form,
+     * the error state is driven automatically from the `FormControl`'s validity once
+     * the field is touched — this input is only needed outside of forms.
+     * Supports boolean coercion.
+     */
+    error: boolean;
+    /** Disables the input. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */
+    disabled: boolean;
+    /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */
+    readonly: boolean;
+    /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */
+    readonly valueChange: EventEmitter<string>;
+    /** Emits the label button's `id` when it is clicked. */
+    readonly labelButtonClick: EventEmitter<string>;
+    get inputId(): string;
+    /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
+    get hasError(): boolean;
+    /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */
+    get isRequired(): boolean;
+    private get activeErrorMessage();
+    get displayedSupportingText(): string;
+    get describedBy(): string | null;
+    get wrapperClasses(): string;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    protected onLabelButtonClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "compsych-text-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "labelButton": { "alias": "labelButton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; "labelButtonClick": "labelButtonClick"; }, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_error: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "7.0.7",
+  "version": "7.0.10",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",