iss-ctrl 0.0.20 → 0.0.21

package/types/iss-ctrl.d.ts

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { InputSignal, WritableSignal, OutputEmitterRef, OnInit, OnDestroy, Signal, Type, DestroyRef, StaticProvider, InjectionToken, PipeTransform, Injector, Provider } from '@angular/core';
-import { ControlValueAccessor, Validator, FormControl, AbstractControl, ValidationErrors, FormGroup, ValidatorFn, AsyncValidatorFn, ControlContainer } from '@angular/forms';
+import { ControlValueAccessor, Validator, FormControl, AbstractControl, ValidationErrors, NgControl, FormGroup, ValidatorFn, AsyncValidatorFn, ControlContainer } from '@angular/forms';
+import { ErrorStateMatcher, MatDateFormats, NativeDateAdapter } from '@angular/material/core';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { PhoneNumber } from 'libphonenumber-js/mobile';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { MatDateFormats, NativeDateAdapter } from '@angular/material/core';
 
 interface Option {
     value: string;
@@ -64,6 +64,7 @@ interface Hint {
  * ```
  */
 declare class ControlBase implements ControlValueAccessor, Validator {
+    #private;
     /**
      * Name of this control inside the surrounding `FormGroup`.
      */
@@ -118,12 +119,28 @@ declare class ControlBase implements ControlValueAccessor, Validator {
      */
     onChange: OutputEmitterRef<any>;
     protected ctrl: FormControl;
+    /**
+     * Error state for the inner `mat-form-field`, derived from the **host** control.
+     *
+     * Material reads `errorState` off the `NgControl` bound to its own `matInput` — here that is
+     * {@link ControlBase.ctrl}, which carries no validators and is therefore always valid. Every
+     * error a consumer cares about (the field config's validators plus the control's own
+     * {@link ControlBase.validate}) lives on the host control instead, so without this matcher an
+     * invalid `iss-ctrl-*` would keep rendering the valid outline. Bind it on the `matInput` as
+     * `[errorStateMatcher]="errorStateMatcher"`.
+     */
+    protected errorStateMatcher: ErrorStateMatcher;
     registerOnChange(fn: () => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     writeValue(value: string | FormData | Date | null): void;
     markAsTouched(): void;
     validate(control: AbstractControl): ValidationErrors | null;
+    /**
+     * The `NgControl` this component is bound to from the outside (`formControlName`,
+     * `[formControl]` or `[ngModel]`), or `null` when it is used without one.
+     */
+    protected hostControl(): NgControl | null;
     /**
      * Whether the control currently holds no value.
      *
@@ -813,6 +830,7 @@ declare class SelectControl extends ControlBase implements OnDestroy {
     clearSelection(): void;
     toggleAllSelection(): void;
     ngOnDestroy(): void;
+    protected isEmpty(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectControl, "iss-ctrl-select", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "onQueryChange": "onQueryChange"; }, ["optionTemplate", "cardViewerTemplate"], ["label"], true, never>;
 }

package/upgrade.scss

@@ -74,35 +74,47 @@ mat-form-field.mat-mdc-form-field.mat-focused
   --placeholder-fc: var(--dark-gray) !important;
 }
 
-
-// Outline states. Focus is not a state: while the user is in a field the outline keeps the
-// colour it had before the caret arrived, so the only thing the outline reports is validity.
+// Outline states.
 //
-// --input-border-idle snapshots the field's resting border on the mat-form-field element, which
-// is also where per-instance overrides such as .filter-input redefine it — so a field with a
-// custom resting border keeps that one while focused instead of falling back to the default.
+// Two audiences share this stylesheet: the iss-ctrl controls, whose outline reports validity,
+// and every other mat-form-field in the consuming app, which keeps the basic-ui behaviour it
+// had before. Only the .iss-ctrl block below may be unscoped-looking — everything outside it
+// lands on app markup too, so it stays as it was.
+
+// Global. Focus is not a state: a focused field keeps the outline it had before the caret
+// arrived rather than turning Material's purple.
 mat-form-field {
   --input-border-idle: var(--input-border-active, 1px solid var(--black));
+  --input-border-valid: 1px solid var(--black);
 }
 
 mat-form-field.mat-mdc-form-field .mdc-text-field--focused {
   --input-border-active: var(--input-border-idle);
 }
 
-// An empty field rests on the plain border, and stays there while the caret is in it. The base
-// stylesheet keys that off Material's mat-form-field-hide-placeholder, which Material drops as
-// soon as the field is focused — so the emptiness comes from the control itself instead, through
-// the iss-ctrl-empty host class that ControlBase.isEmpty() reflects.
-.iss-ctrl-empty > mat-form-field.mat-mdc-form-field .mdc-text-field {
+// The child combinator keeps an invalid *form* ancestor from painting every field inside it red.
+.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
+  --input-border-active: var(--input-border-invalid);
+}
+
+// iss-ctrl controls only, via the class ControlBase puts on every control host. Here the outline
+// reports validity and nothing else: light while the value is not yet good, dark once it is,
+// red once the user has left an invalid field behind.
+.iss-ctrl > mat-form-field.mat-mdc-form-field .mdc-text-field,
+.iss-ctrl > mat-form-field.mat-mdc-form-field .mdc-text-field--focused {
   --input-border-active: var(--input-border);
 }
 
-// Red belongs to a field the user has actually left in a bad state. Angular puts ng-touched and
-// ng-invalid on the control host (iss-ctrl-*) — the same condition <iss-validation-message-viewer>
-// uses — and that is the only reliable signal here: the mat control is bound to the control's
-// internal FormControl, which carries no validators, so Material's own --invalid state stays off
-// for everything but the errors it raises itself (a datepicker parse/min/max failure, say).
-// The child combinator keeps an invalid *form* ancestor from painting every field inside it red.
-.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
+// :not(.iss-ctrl-empty) is what keeps an untouched optional field out of the dark state: empty
+// and optional is ng-valid too, and should still read as resting rather than as complete.
+.iss-ctrl.ng-valid:not(.iss-ctrl-empty) > mat-form-field.mat-mdc-form-field .mdc-text-field {
+  --input-border-active: var(--input-border-valid);
+}
+
+// Angular puts ng-touched and ng-invalid on the control host — the same condition
+// <iss-validation-message-viewer> uses. It stays necessary alongside Material's own --invalid
+// state: ControlBase.errorStateMatcher reports the host control to the mat control, but a
+// control used without a host NgControl still has only these classes to go on.
+.iss-ctrl.ng-touched.ng-invalid > mat-form-field.mat-mdc-form-field .mdc-text-field {
   --input-border-active: var(--input-border-invalid);
 }