iss-ctrl 0.0.19 → 0.0.21

package/fesm2022/iss-ctrl.mjs

@@ -1,2 +1,2 @@
-export { aj as ATTACHMENT_DOWNLOAD_URL, ai as ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ah as ATTACHMENT_UPLOAD_URL, an as ArabicNumberPipe, a0 as AttachmentViewer, ab as COMPONENTS, a6 as COUNTRIES, d as CheckboxControl, v as CheckboxField, Y as CheckboxViewer, e as ChipsControl, q as ChipsField, Q as ChipsViewer, C as ControlBase, a8 as DATETIME_FORMAT, a7 as DATE_FORMAT_ADAPTER, a5 as DEFAULT_COUNTRY, D as DatePickerControl, B as DatePickerField, a3 as DatePickerTimeViewer, a2 as DatePickerViewer, f as DateRangePickerControl, J as DateRangePickerField, a4 as DateRangePickerViewer, h as DatetimePickerControl, G as DatetimePickerField, am as Droppable, E as Employee, af as FIELD_DATA, F as FieldBase, ao as FieldDataInjector, as as FileHandler, i as FilePickerControl, z as FilePickerField, aI as FileValidators, c as FormEngine, ay as HIJRI_LOCALE, az as HIJRI_MONTH_NAMES, H as HOST, al as HintsComponent, j as InputControl, o as InputField, K as InputViewer, at as IssDateAdapter, aH as IssValidators, L as Loader, M as MobileControl, u as MobileField, X as MobileViewer, O as Outlet, P as PLACEHOLDER_REGEX, a9 as PLATE_LETTERS, av as Phone, k as PlateControl, y as PlateField, ap as PlateLetterPipe, $ as PlateViewer, R as RadioControl, s as RadioField, U as RadioViewer, ac as SERVICES, S as SelectControl, t as SelectField, aq as SelectStatusPipe, W as SelectViewer, l as SlideToggleControl, x as SlideToggleField, _ as SlideToggleViewer, T as TextareaControl, p as TextareaField, N as TextareaViewer, m as TimePickerControl, A as TimePickerField, a1 as TimePickerViewer, aJ as TimeValidator, n as ToggleButtonControl, w as ToggleButtonField, Z as ToggleButtonViewer, ar as TranslatePipe, ag as UI_LANGUAGE, ak as USER_SEARCH_API, aa as VALIDATION_MESSAGES, ad as VALIDATORS, V as VIEW_PROVIDER, a as ValidationMessageComponent, aw as arrayFrom, aD as createHijriDate, ax as formatFileSize, aE as formatHijriDate, aC as getHijriDaysInMonth, aA as getHijriParts, g as getPropertyByPath, ae as isActiveValidationRule, aF as parseHijriDate, au as provideIssDateAdapter, r as replacePlaceholders, aB as startOfHijriMonth, aG as toHijriDisplay } from './iss-ctrl-iss-ctrl-Cy9p_PEj.mjs';
+export { ak as ATTACHMENT_DOWNLOAD_URL, aj as ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ai as ATTACHMENT_UPLOAD_URL, ao as ArabicNumberPipe, a1 as AttachmentViewer, ac as COMPONENTS, a7 as COUNTRIES, e as CheckboxControl, w as CheckboxField, Z as CheckboxViewer, f as ChipsControl, s as ChipsField, U as ChipsViewer, C as ControlBase, a9 as DATETIME_FORMAT, a8 as DATE_FORMAT_ADAPTER, a6 as DEFAULT_COUNTRY, D as DatePickerControl, G as DatePickerField, a4 as DatePickerTimeViewer, a3 as DatePickerViewer, h as DateRangePickerControl, K as DateRangePickerField, a5 as DateRangePickerViewer, i as DatetimePickerControl, J as DatetimePickerField, an as Droppable, E as Employee, ag as FIELD_DATA, F as FieldBase, ap as FieldDataInjector, b as FieldViewer, at as FileHandler, j as FilePickerControl, A as FilePickerField, aJ as FileValidators, d as FormEngine, az as HIJRI_LOCALE, aA as HIJRI_MONTH_NAMES, H as HOST, am as Hints, k as InputControl, p as InputField, N as InputViewer, au as IssDateAdapter, aI as IssValidators, L as Loader, M as MobileControl, v as MobileField, Y as MobileViewer, O as Outlet, P as PLACEHOLDER_REGEX, aa as PLATE_LETTERS, aw as Phone, l as PlateControl, z as PlateField, aq as PlateLetterPipe, a0 as PlateViewer, R as RadioControl, t as RadioField, W as RadioViewer, ad as SERVICES, S as SelectControl, u as SelectField, ar as SelectStatusPipe, X as SelectViewer, m as SlideToggleControl, y as SlideToggleField, $ as SlideToggleViewer, T as TextareaControl, q as TextareaField, Q as TextareaViewer, n as TimePickerControl, B as TimePickerField, a2 as TimePickerViewer, aK as TimeValidator, o as ToggleButtonControl, x as ToggleButtonField, _ as ToggleButtonViewer, as as TranslatePipe, ah as UI_LANGUAGE, al as USER_SEARCH_API, ab as VALIDATION_MESSAGES, ae as VALIDATORS, V as VIEW_PROVIDER, a as ValidationMessage, ax as arrayFrom, aE as createHijriDate, ay as formatFileSize, aF as formatHijriDate, aD as getHijriDaysInMonth, aB as getHijriParts, g as getPropertyByPath, af as isActiveValidationRule, aG as parseHijriDate, av as provideIssDateAdapter, r as replacePlaceholders, aC as startOfHijriMonth, aH as toHijriDisplay } from './iss-ctrl-iss-ctrl-BKu6a5HF.mjs';
 //# sourceMappingURL=iss-ctrl.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iss-ctrl",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "peerDependencies": {
     "@angular/common": "^21.0.6",
     "@angular/core": "^21.0.6",

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>;
 }
@@ -1925,11 +1943,11 @@ interface I18n {
 
 type ValidationMessageFn<T> = (args: T) => I18n;
 
-interface ValidationMessage {
+interface IssValidator {
     [key: PropertyKey]: ValidationMessageFn<any>;
 }
 
-declare const VALIDATION_MESSAGES: ValidationMessage;
+declare const VALIDATION_MESSAGES: IssValidator;
 
 interface DynamicImport<T> {
     [key: PropertyKey]: () => Promise<T>;
@@ -1990,22 +2008,46 @@ declare const ATTACHMENT_DOWNLOAD_URL: InjectionToken<string>;
 
 declare const USER_SEARCH_API: InjectionToken<string>;
 
-declare class HintsComponent {
+declare class Hints {
     hints: InputSignal<Hint[]>;
     touched: InputSignal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<HintsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HintsComponent, "iss-ctrl-hints", never, { "hints": { "alias": "hints"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Hints, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Hints, "iss-ctrl-hints", never, { "hints": { "alias": "hints"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ValidationMessageComponent {
+declare class ValidationMessage {
     errors: InputSignal<ValidationErrors | null>;
     showMessage: InputSignal<boolean>;
     getValidationMessage(error: {
         key: string;
         value: any;
     }): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationMessageComponent, "iss-validation-message-viewer", never, { "errors": { "alias": "errors"; "required": true; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValidationMessage, "iss-validation-message-viewer", never, { "errors": { "alias": "errors"; "required": true; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<iss-field-viewer>` — read-only presentation of a single field as a
+ * label / value row.
+ *
+ * Project the caption into the `label` slot and the rendered value into any
+ * element carrying a `value` attribute:
+ *
+ * ```html
+ * <iss-field-viewer>
+ *   <label>Request Type</label>
+ *   <span>value</span>
+ * </iss-field-viewer>
+ * ```
+ *
+ * The label sits in a fixed-width column, so every value in a stack of viewers
+ * starts on the same vertical line. Override that column with the
+ * `--field-viewer-label-width` custom property on any ancestor.
+ * When no label is projected, the value spans the full width of the row.
+ */
+declare class FieldViewer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldViewer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldViewer, "iss-field-viewer", never, {}, {}, never, ["label", "*"], true, never>;
 }
 
 declare class Droppable {
@@ -2219,5 +2261,5 @@ declare abstract class TimeValidator {
     static afterDate(otherFieldName: string): ValidatorFn;
 }
 
-export { ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ATTACHMENT_UPLOAD_URL, ArabicNumberPipe, AttachmentViewer, COMPONENTS, COUNTRIES, CheckboxControl, CheckboxField, CheckboxViewer, ChipsControl, ChipsField, ChipsViewer, ControlBase, DATETIME_FORMAT, DATE_FORMAT_ADAPTER, DEFAULT_COUNTRY, DatePickerControl, DatePickerField, DatePickerTimeViewer, DatePickerViewer, DateRangePickerControl, DateRangePickerField, DateRangePickerViewer, DatetimePickerControl, DatetimePickerField, Droppable, Employee, FIELD_DATA, FieldBase, FieldDataInjector, FileHandler, FilePickerControl, FilePickerField, FileValidators, FormEngine, HIJRI_LOCALE, HIJRI_MONTH_NAMES, HOST, HintsComponent, InputControl, InputField, InputViewer, IssDateAdapter, IssValidators, Loader, MobileControl, MobileField, MobileViewer, Outlet, PLACEHOLDER_REGEX, PLATE_LETTERS, Phone, PlateControl, PlateField, PlateLetterPipe, PlateViewer, RadioControl, RadioField, RadioViewer, SERVICES, SelectControl, SelectField, SelectStatusPipe, SelectViewer, SlideToggleControl, SlideToggleField, SlideToggleViewer, TextareaControl, TextareaField, TextareaViewer, TimePickerControl, TimePickerField, TimePickerViewer, TimeValidator, ToggleButtonControl, ToggleButtonField, ToggleButtonViewer, TranslatePipe, UI_LANGUAGE, USER_SEARCH_API, VALIDATION_MESSAGES, VALIDATORS, VIEW_PROVIDER, ValidationMessageComponent, arrayFrom, createHijriDate, formatFileSize, formatHijriDate, getHijriDaysInMonth, getHijriParts, getPropertyByPath, isActiveValidationRule, parseHijriDate, provideIssDateAdapter, replacePlaceholders, startOfHijriMonth, toHijriDisplay };
-export type { ActionTriggerFn, ComponentOutlet, Country, DateRangeEmission, DynamicImport, EventArgument, EventConfigFn, EventStrategy, FieldChange, HijriParts, Hint, HintAlignment, I18n, ISO2, IssAttachment, IssFile, Mobile, Option, PlateLetter, ValidationMessage, ValidationMessageFn };
+export { ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ATTACHMENT_UPLOAD_URL, ArabicNumberPipe, AttachmentViewer, COMPONENTS, COUNTRIES, CheckboxControl, CheckboxField, CheckboxViewer, ChipsControl, ChipsField, ChipsViewer, ControlBase, DATETIME_FORMAT, DATE_FORMAT_ADAPTER, DEFAULT_COUNTRY, DatePickerControl, DatePickerField, DatePickerTimeViewer, DatePickerViewer, DateRangePickerControl, DateRangePickerField, DateRangePickerViewer, DatetimePickerControl, DatetimePickerField, Droppable, Employee, FIELD_DATA, FieldBase, FieldDataInjector, FieldViewer, FileHandler, FilePickerControl, FilePickerField, FileValidators, FormEngine, HIJRI_LOCALE, HIJRI_MONTH_NAMES, HOST, Hints, InputControl, InputField, InputViewer, IssDateAdapter, IssValidators, Loader, MobileControl, MobileField, MobileViewer, Outlet, PLACEHOLDER_REGEX, PLATE_LETTERS, Phone, PlateControl, PlateField, PlateLetterPipe, PlateViewer, RadioControl, RadioField, RadioViewer, SERVICES, SelectControl, SelectField, SelectStatusPipe, SelectViewer, SlideToggleControl, SlideToggleField, SlideToggleViewer, TextareaControl, TextareaField, TextareaViewer, TimePickerControl, TimePickerField, TimePickerViewer, TimeValidator, ToggleButtonControl, ToggleButtonField, ToggleButtonViewer, TranslatePipe, UI_LANGUAGE, USER_SEARCH_API, VALIDATION_MESSAGES, VALIDATORS, VIEW_PROVIDER, ValidationMessage, arrayFrom, createHijriDate, formatFileSize, formatHijriDate, getHijriDaysInMonth, getHijriParts, getPropertyByPath, isActiveValidationRule, parseHijriDate, provideIssDateAdapter, replacePlaceholders, startOfHijriMonth, toHijriDisplay };
+export type { ActionTriggerFn, ComponentOutlet, Country, DateRangeEmission, DynamicImport, EventArgument, EventConfigFn, EventStrategy, FieldChange, HijriParts, Hint, HintAlignment, I18n, ISO2, IssAttachment, IssFile, IssValidator, Mobile, Option, PlateLetter, ValidationMessageFn };

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);
 }