@ajf/material 18.5.2 → 18.5.4

package/fesm2022/ajf-material-forms.mjs

@@ -1262,7 +1262,8 @@ class AjfFieldRow {
         return this.instance?.node.fieldType === AjfFieldType.Empty;
     }
     get required() {
-        return this.instance?.node.validation?.notEmpty != null;
+        // `notEmpty` is `true` or a validation object when set; `false` is a valid way to unset it.
+        return !!this.instance?.node.validation?.notEmpty;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFieldRow, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFieldRow, selector: "ajf-field-row", inputs: { instance: "instance", readonly: "readonly" }, host: { properties: { "class.ajf-hidden-row": "this.hidden" } }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"ajf-field-row\"\n  [class.ajf-invalid]=\"!instance.valid\"\n  [class.ajf-readonly]=\"readonly\"\n  [class.ajf-note-row]=\"isNote\"\n  [ngClass]=\"'ajf-' + instance.node.size + ' ajf-field-type-' + instance.node.fieldType\"\n>\n  <div class=\"ajf-field-label\">\n    <span class=\"ajf-field-label-line\">\n      <label [attr.id]=\"instance.node.name\" [innerHTML]=\"instance.node.label | transloco\"></label>\n      <span class=\"ajf-required\" *ngIf=\"required\" aria-hidden=\"true\">*</span>\n      <mat-icon\n        class=\"ajf-hint-icon\"\n        *ngIf=\"instance.node.hint as hint\"\n        [matTooltip]=\"hint | transloco\"\n        matTooltipPosition=\"right\"\n        >{{ instance.node.hintIcon || 'help' }}</mat-icon\n      >\n    </span>\n    <!-- A note carries prose, not a value, so naming its type says nothing. -->\n    <ng-container *ngIf=\"!isNote\">\n      <span class=\"ajf-field-type-name\" *ngIf=\"instance | ajfFieldTypeLabel as type\"\n        >{{ type.name | transloco }}<ng-container *ngIf=\"type.detailValue\"> &middot;\n          {{ type.detailValue }}<ng-container *ngIf=\"type.detailUnit\">\n            {{ type.detailUnit | transloco }}</ng-container\n          ></ng-container\n        ></span\n      >\n    </ng-container>\n  </div>\n\n  <div class=\"ajf-field-control\">\n    <ajf-field\n      [instance]=\"instance\"\n      [readonly]=\"readonly\"\n      [id]=\"'field_entry_' + instance.node.id\"\n    ></ajf-field>\n  </div>\n\n  <div class=\"ajf-field-side\">\n    <span class=\"ajf-field-error-message\" *ngIf=\"!instance.valid\">{{\n      instance | ajfAsFieldInstanceErrors | transloco\n    }}</span>\n    <span class=\"ajf-field-hint-text\" *ngIf=\"instance.valid && instance.node.description\">{{\n      instance.node.description | transloco\n    }}</span>\n  </div>\n</div>\n", styles: ["ajf-field-row{display:block}ajf-field-row.ajf-hidden-row{display:none}ajf-field-row .ajf-field-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--ajf-gap);box-sizing:border-box;padding:10px 20px;border-bottom:1px solid var(--ajf-border);background:var(--ajf-surface);font-family:var(--ajf-font-sans)}ajf-field-row .ajf-field-label{display:flex;flex:0 0 var(--ajf-label-col);flex-direction:column;justify-content:center;gap:2px;min-height:var(--ajf-control-h);max-width:var(--ajf-label-col)}ajf-field-row .ajf-field-label .ajf-field-label-line{display:flex;align-items:center;gap:6px}ajf-field-row .ajf-field-label label{color:var(--ajf-text);font-size:14px;font-weight:500;line-height:1.35}ajf-field-row .ajf-field-label .ajf-field-type-name{color:var(--ajf-text-muted);font-size:12px;line-height:1.3}ajf-field-row .ajf-field-label .ajf-required{color:var(--ajf-danger);font-weight:600}ajf-field-row .ajf-field-label .ajf-hint-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--ajf-text-muted);font-size:16px;line-height:1;cursor:help}ajf-field-row .ajf-field-control{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}ajf-field-row .ajf-field-control>ajf-field{flex:1 1 auto;min-width:0}ajf-field-row .ajf-field-side{display:flex;flex:0 0 var(--ajf-side-col);align-items:center;min-height:var(--ajf-control-h);max-width:var(--ajf-side-col)}ajf-field-row .ajf-field-side .ajf-field-hint-text{color:var(--ajf-text-muted);font-size:13px}ajf-field-row .ajf-field-side .ajf-field-error-message{color:var(--ajf-danger);font-size:13px}ajf-field-row .ajf-normal .ajf-field-control{max-width:none}ajf-field-row .ajf-small .ajf-field-control{max-width:420px}ajf-field-row .ajf-smaller .ajf-field-control{max-width:320px}ajf-field-row .ajf-tiny .ajf-field-control{max-width:220px}ajf-field-row .ajf-mini .ajf-field-control{max-width:140px}ajf-field-row .ajf-field-row.ajf-invalid{background:color-mix(in srgb,var(--ajf-danger-bg) 45%,var(--ajf-surface))}ajf-field-row .ajf-field-row.ajf-invalid .ajf-control,ajf-field-row .ajf-field-row.ajf-invalid input.ajf-control,ajf-field-row .ajf-field-row.ajf-invalid .mat-mdc-select-trigger{border-color:var(--ajf-danger)}ajf-field-row .ajf-field-row.ajf-readonly .ajf-field-side{flex-basis:auto}ajf-field-row .ajf-note-row .ajf-field-control,ajf-field-row .ajf-field-type-1 .ajf-field-control,ajf-field-row .ajf-field-type-11 .ajf-field-control{max-width:none}@media (width <= 900px){ajf-field-row .ajf-field-row{flex-wrap:wrap;padding:12px 16px}ajf-field-row .ajf-field-label,ajf-field-row .ajf-field-side{flex-basis:100%;max-width:none;min-height:0}ajf-field-row .ajf-field-control{flex-basis:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AjfFormField, selector: "ajf-field,ajf-form-field" }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1$1.AjfAsFieldInstanceErrorsPipe, name: "ajfAsFieldInstanceErrors" }, { kind: "pipe", type: i1$1.AjfFieldTypeLabelPipe, name: "ajfFieldTypeLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }