iss-ctrl 0.0.16 → 0.0.18

package/types/iss-ctrl.d.ts

@@ -124,6 +124,15 @@ declare class ControlBase implements ControlValueAccessor, Validator {
     writeValue(value: string | FormData | Date | null): void;
     markAsTouched(): void;
     validate(control: AbstractControl): ValidationErrors | null;
+    /**
+     * Whether the control currently holds no value.
+     *
+     * Reflected on the host as `iss-ctrl-empty`, which is what `upgrade.scss` uses to keep the
+     * resting outline of an empty field: Material's own `mat-form-field-hide-placeholder` drops
+     * off the moment the field is focused, so the border would change colour on focus alone.
+     * Override it in a control whose value does not live on {@link ControlBase.ctrl}.
+     */
+    protected isEmpty(): boolean;
     protected onTouch: () => void;
     protected onPropagateValue: (_: any) => void;
     protected emitValue(value?: any): void;
@@ -203,6 +212,7 @@ declare class ChipsControl extends ControlBase {
     writeValue(value: string | null): void;
     remove(keyword: string): void;
     add(event: MatChipInputEvent): void;
+    protected isEmpty(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipsControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChipsControl, "iss-ctrl-chips", never, {}, {}, never, ["label"], true, never>;
 }
@@ -356,6 +366,7 @@ declare class DateRangePickerControl extends ControlBase implements OnInit, OnDe
     clear(event: MouseEvent): void;
     writeValue(value: string | FormData | null): void;
     ngOnDestroy(): void;
+    protected isEmpty(): boolean;
     protected openPicker(picker: any): void;
     protected calendarDaysFilter: (d: Date | null) => boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerControl, never>;

package/upgrade.scss

@@ -1,75 +1,108 @@
-html {
-  //  --mat-form-field-container-height: 50px !important;
-}
-
-//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-hide-placeholder mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
-//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-hide-placeholder mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
-//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-mdc-form-field-has-icon-suffix mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
-// mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-primary mat-form-field-animations-enabled ng-dirty ng-invalid mat-form-field-invalid ng-touched
-mat-form-field {
-  --input-height: 55px;
-  --input-radius: 8px;
-
-  &.mat-mdc-form-field {
-    .mdc-text-field--invalid.mat-mdc-text-field-wrapper {
-      border: 1px solid var(--red) !important;
-    }
-
-    &.mat-form-field-animations-enabled .mat-mdc-form-field-infix {
-      // padding-top: 10px !important;
-    }
-  }
-
-  span[mattextsuffix],
-  span[matsuffix] {
-    // margin-bottom: 6px;
-    // display: block;
-  }
-}
-
-mat-error {
-  --mat-form-field-error-text-color: var(--red);
-  font-size: 12px !important;
-}
-
-.custom-textarea {
-  --input-height: 100px;
-}
-
-.mat-mdc-standard-chip {
-  --mat-chip-container-shape-radius: 8px;
-  --mat-chip-elevated-container-color: var(--white);
-}
-
-.search-container mat-form-field {
-  --input-height: 30px;
-
-}
-
-// The basic-ui form-field reset hides .mdc-floating-label for every mat-form-field, so the label
-// space is opt-in: only a control that projects a <label> carrying actual text turns it back on,
-// together with the padding that space needs. An omitted label leaves <mat-label> without a
-// <label> child, and one that interpolates to "" leaves that child :empty — neither matches, so
-// both collapse with no runtime check, and a label that arrives later simply shows up.
-mat-form-field.mat-mdc-form-field:has(mat-label > label:not(:empty)) {
-  .mdc-floating-label {
-    display: block !important;
-  }
-
-  .mat-mdc-form-field-infix {
-    padding-top: 10px !important;
-  }
-}
-
-
-mat-form-field.mat-mdc-form-field
-.mat-mdc-input-element::placeholder {
-
-  --placeholder-fc: transparent !important;
-}
-
-
-mat-form-field.mat-mdc-form-field.mat-focused
-.mat-mdc-input-element::placeholder {
-  --placeholder-fc: var(--dark-gray) !important;
-}
+html {
+  //  --mat-form-field-container-height: 50px !important;
+}
+
+//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-hide-placeholder mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
+//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-hide-placeholder mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
+//mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-mdc-form-field-has-icon-suffix mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid mat-form-field-animations-enabled
+// mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-appearance-fill mat-primary mat-form-field-animations-enabled ng-dirty ng-invalid mat-form-field-invalid ng-touched
+mat-form-field {
+  --input-height: 55px;
+  --input-radius: 8px;
+
+  &.mat-mdc-form-field {
+    .mdc-text-field--invalid.mat-mdc-text-field-wrapper {
+      border: 1px solid var(--red) !important;
+    }
+
+    &.mat-form-field-animations-enabled .mat-mdc-form-field-infix {
+      // padding-top: 10px !important;
+    }
+  }
+
+  span[mattextsuffix],
+  span[matsuffix] {
+    // margin-bottom: 6px;
+    // display: block;
+  }
+}
+
+mat-error {
+  --mat-form-field-error-text-color: var(--red);
+  font-size: 12px !important;
+}
+
+.custom-textarea {
+  --input-height: 100px;
+}
+
+.mat-mdc-standard-chip {
+  --mat-chip-container-shape-radius: 8px;
+  --mat-chip-elevated-container-color: var(--white);
+}
+
+.search-container mat-form-field {
+  --input-height: 30px;
+
+}
+
+// The basic-ui form-field reset hides .mdc-floating-label for every mat-form-field, so the label
+// space is opt-in: only a control that projects a <label> carrying actual text turns it back on,
+// together with the padding that space needs. An omitted label leaves <mat-label> without a
+// <label> child, and one that interpolates to "" leaves that child :empty — neither matches, so
+// both collapse with no runtime check, and a label that arrives later simply shows up.
+mat-form-field.mat-mdc-form-field:has(mat-label > label:not(:empty)) {
+  .mdc-floating-label {
+    display: block !important;
+  }
+
+  .mat-mdc-form-field-infix {
+    padding-top: 10px !important;
+  }
+}
+
+
+mat-form-field.mat-mdc-form-field
+.mat-mdc-input-element::placeholder {
+
+  --placeholder-fc: transparent !important;
+}
+
+
+mat-form-field.mat-mdc-form-field.mat-focused
+.mat-mdc-input-element::placeholder {
+  --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.
+//
+// --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.
+mat-form-field {
+  --input-border-idle: var(--input-border-active, 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 {
+  --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 {
+  --input-border-active: var(--input-border-invalid);
+}