@compsych-ui-components/angular 7.0.7 → 7.0.9

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 } 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,194 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, booleanAttribute, inject, } from '@angular/core';
+import { NgControl, Validators } from '@angular/forms';
+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;
+    /**
+     * 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();
+    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 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();
+    }
+    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", required: ["required", "required", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div [class]="wrapperClasses">
+      <label class="label" [for]="inputId">
+        {{ label }}
+        @if (isRequired) {
+          <span class="required-marker" aria-hidden="true"> *</span>
+        }
+      </label>
+      <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]="ariaDescribedBy || null"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.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}.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}}\n"], 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, template: `
+    <div [class]="wrapperClasses">
+      <label class="label" [for]="inputId">
+        {{ label }}
+        @if (isRequired) {
+          <span class="required-marker" aria-hidden="true"> *</span>
+        }
+      </label>
+      <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]="ariaDescribedBy || null"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+  `, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.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}.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}}\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
+            }], 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
+            }] } });
+//# 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';\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\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  template: `\n    <div [class]=\"wrapperClasses\">\n      <label class=\"label\" [for]=\"inputId\">\n        {{ label }}\n        @if (isRequired) {\n          <span class=\"required-marker\" aria-hidden=\"true\"> *</span>\n        }\n      </label>\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]=\"ariaDescribedBy || null\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\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\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\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  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"]}

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 } 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,81 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+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';
+/**
+ * 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;
+    /**
+     * 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>;
+    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;
+    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;
+    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; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; }, 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.9",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",