ngx-semantic 2.0.7-beta.0 → 2.0.7-beta.2

package/fesm2022/ngx-semantic-collections-form.mjs

@@ -1,12 +1,16 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Directive, NgModule } from '@angular/core';
+import { inject, ElementRef, Input, Directive, Renderer2, NgZone, EventEmitter, HostListener, Output, NgModule } from '@angular/core';
 import { ClassUtils, InputBoolean } from 'ngx-semantic/core/util';
 import { BaseDirective } from 'ngx-semantic/core/base';
 import { CommonModule } from '@angular/common';
+import { NgForm, FormGroupDirective, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subject, fromEvent, merge } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 class SuiFormFieldDirective extends BaseDirective {
-    constructor(element) {
+    constructor() {
+        const element = inject(ElementRef);
         super(element);
         this.suiWidth = null;
         this.suiError = false;
@@ -25,7 +29,7 @@ class SuiFormFieldDirective extends BaseDirective {
             ClassUtils.getPropClass(this.suiError, 'error')
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormFieldDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SuiFormFieldDirective, isStandalone: true, selector: "[suiFormField]", inputs: { suiWidth: "suiWidth", suiError: "suiError", suiInline: "suiInline", disabled: "disabled", suiRequired: "suiRequired" }, exportAs: ["suiFormField"], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
@@ -47,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                     exportAs: 'suiFormField',
                     selector: '[suiFormField]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { suiWidth: [{
+        }], ctorParameters: () => [], propDecorators: { suiWidth: [{
                 type: Input
             }], suiError: [{
                 type: Input
@@ -60,7 +64,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 
 class SuiFormFieldsDirective extends BaseDirective {
-    constructor(element) {
+    constructor() {
+        const element = inject(ElementRef);
         super(element);
         this.suiWidth = null;
         this.suiInline = false;
@@ -76,7 +81,7 @@ class SuiFormFieldsDirective extends BaseDirective {
             'fields'
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormFieldsDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormFieldsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SuiFormFieldsDirective, isStandalone: true, selector: "[suiFormFields]", inputs: { suiWidth: "suiWidth", suiInline: "suiInline", suiGrouped: "suiGrouped", suiEqualWidth: "suiEqualWidth" }, exportAs: ["suiFormFields"], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
@@ -95,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                     exportAs: 'suiFormFields',
                     selector: '[suiFormFields]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { suiWidth: [{
+        }], ctorParameters: () => [], propDecorators: { suiWidth: [{
                 type: Input
             }], suiInline: [{
                 type: Input
@@ -106,7 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }] } });
 
 class SuiFormDirective extends BaseDirective {
-    constructor(element) {
+    constructor() {
+        const element = inject(ElementRef);
         super(element);
         this.suiState = null;
         this.suiSize = null;
@@ -127,7 +133,7 @@ class SuiFormDirective extends BaseDirective {
             this.suiState
         ].join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SuiFormDirective, isStandalone: true, selector: "[sui-form]", inputs: { suiState: "suiState", suiSize: "suiSize", suiLoading: "suiLoading", suiEqualWidth: "suiEqualWidth", suiInverted: "suiInverted", suiReply: "suiReply" }, exportAs: ["suiForm"], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
@@ -149,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                     selector: '[sui-form]',
                     exportAs: 'suiForm'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { suiState: [{
+        }], ctorParameters: () => [], propDecorators: { suiState: [{
                 type: Input
             }], suiSize: [{
                 type: Input
@@ -163,32 +169,997 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }] } });
 
+/** Resolve control like Semantic UI: id, then name, then data-validate. */
+function resolveFieldElement(root, identifier) {
+    if (!identifier) {
+        return null;
+    }
+    const byId = root.querySelector(`#${escapeCssId(identifier)}`);
+    if (byId instanceof HTMLElement) {
+        return byId;
+    }
+    const byName = root.querySelector(`[name="${escapeAttrSelector(identifier)}"]`);
+    if (byName instanceof HTMLElement) {
+        return byName;
+    }
+    const byMeta = root.querySelector(`[data-validate="${escapeAttrSelector(identifier)}"]`);
+    return byMeta instanceof HTMLElement ? byMeta : null;
+}
+function escapeCssId(id) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(id);
+    }
+    return id.replace(/([^a-zA-Z0-9_-])/g, '\\$1');
+}
+function escapeAttrSelector(s) {
+    return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+function readControlValue(el) {
+    if (el instanceof HTMLInputElement) {
+        if (el.type === 'checkbox') {
+            return el.checked;
+        }
+        if (el.type === 'radio') {
+            const form = el.form ?? el.closest('form');
+            if (form) {
+                const checked = form.querySelector(`input[type="radio"][name="${escapeAttrSelector(el.name)}"]:checked`);
+                return checked ? checked.value : '';
+            }
+            return el.checked ? el.value : '';
+        }
+        return el.value;
+    }
+    if (el instanceof HTMLSelectElement) {
+        if (el.multiple) {
+            return Array.from(el.selectedOptions).map(o => o.value);
+        }
+        return el.value;
+    }
+    if (el instanceof HTMLTextAreaElement) {
+        return el.value;
+    }
+    return '';
+}
+function findSemanticField(el) {
+    return el.closest('.field');
+}
+/** Label text for prompts: label[for=id], aria-label, placeholder. */
+function inferFieldName(el, identifier) {
+    if (el.id) {
+        const label = el.ownerDocument?.querySelector(`label[for="${escapeAttrSelector(el.id)}"]`);
+        if (label?.textContent?.trim()) {
+            return label.textContent.trim();
+        }
+    }
+    const aria = el.getAttribute('aria-label');
+    if (aria) {
+        return aria;
+    }
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        const ph = el.getAttribute('placeholder');
+        if (ph) {
+            return ph;
+        }
+    }
+    return identifier;
+}
+
+function toRuleSpecs(rules) {
+    if (typeof rules === 'string') {
+        return [{ type: rules }];
+    }
+    if (Array.isArray(rules)) {
+        return rules.map(r => (typeof r === 'string' ? { type: r } : r));
+    }
+    return rules;
+}
+function normalizeFields(input) {
+    const out = [];
+    for (const key of Object.keys(input)) {
+        const raw = input[key];
+        if (typeof raw === 'string' || Array.isArray(raw)) {
+            out.push({
+                key,
+                identifier: key,
+                rules: toRuleSpecs(raw),
+                optional: false
+            });
+            continue;
+        }
+        const spec = raw;
+        out.push({
+            key,
+            identifier: spec.identifier ?? key,
+            rules: toRuleSpecs(spec.rules),
+            optional: !!spec.optional,
+            depends: spec.depends
+        });
+    }
+    return out;
+}
+
+/** Split `ruleName[param]` (supports nested brackets in regExp by using `value` on rule spec instead). */
+function parseRuleType(type) {
+    const t = type.trim();
+    const open = t.indexOf('[');
+    if (open === -1) {
+        return { name: t };
+    }
+    const close = t.lastIndexOf(']');
+    if (close <= open) {
+        return { name: t };
+    }
+    return {
+        name: t.slice(0, open),
+        bracket: t.slice(open + 1, close)
+    };
+}
+function asString(v) {
+    if (v === null || v === undefined) {
+        return '';
+    }
+    if (Array.isArray(v)) {
+        return v.join(',');
+    }
+    if (typeof v === 'boolean') {
+        return v ? 'true' : '';
+    }
+    return String(v);
+}
+function isEmptyValue$1(v) {
+    if (v === null || v === undefined) {
+        return true;
+    }
+    if (typeof v === 'boolean') {
+        return !v;
+    }
+    if (Array.isArray(v)) {
+        return v.length === 0;
+    }
+    return String(v).trim() === '';
+}
+const EMAIL_RE = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+function isValidUrl(s) {
+    try {
+        const u = new URL(s);
+        return u.protocol === 'http:' || u.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+function parseIntegerRange(bracket) {
+    if (!bracket) {
+        return {};
+    }
+    const m = /^(-?\d+)\.\.(-?\d+)$/.exec(bracket.trim());
+    if (m) {
+        return { min: Number(m[1]), max: Number(m[2]) };
+    }
+    return null;
+}
+function luhnValid(digits) {
+    const d = digits.replace(/\D/g, '');
+    if (d.length < 13) {
+        return false;
+    }
+    let sum = 0;
+    let alt = false;
+    for (let i = d.length - 1; i >= 0; i--) {
+        let n = parseInt(d.charAt(i), 10);
+        if (alt) {
+            n *= 2;
+            if (n > 9) {
+                n -= 9;
+            }
+        }
+        sum += n;
+        alt = !alt;
+    }
+    return sum % 10 === 0;
+}
+const CARD_TYPES = {
+    visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
+    mastercard: /^5[1-5][0-9]{14}$/,
+    amex: /^3[47][0-9]{13}$/,
+    discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
+    unionpay: /^62[0-9]{14,17}$/,
+    jcb: /^(?:2131|1800|35\d{3})\d{11}$/,
+    dinersClub: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
+    maestro: /^(?:5[0678]\d{2}|6304|6706|6771|6709)\d{8,15}$/,
+    laser: /^(6304|6706|6709|6771)[0-9]{12,15}$/,
+    visaElectron: /^(4026|417500|4405|4508|4844|4913|4917)\d+$/
+};
+/**
+ * Returns true if the value satisfies the rule.
+ */
+function evaluateRule(rule, fieldValue, fieldIdentifier, ctx) {
+    const { name, bracket } = parseRuleType(rule.type);
+    const s = asString(fieldValue);
+    const lower = name.toLowerCase();
+    switch (lower) {
+        case 'empty':
+            return !isEmptyValue$1(fieldValue);
+        case 'checked':
+            return fieldValue === true;
+        case 'email':
+            return s === '' || EMAIL_RE.test(s);
+        case 'url':
+            return s === '' || isValidUrl(s);
+        case 'decimal':
+            return s === '' || /^-?\d+\.\d+$/.test(s.trim());
+        case 'number':
+            return s === '' || /^-?\d+(\.\d+)?$/.test(s.trim());
+        case 'integer': {
+            if (s.trim() === '') {
+                return true;
+            }
+            if (!/^-?\d+$/.test(s.trim())) {
+                return false;
+            }
+            const n = parseInt(s, 10);
+            const range = parseIntegerRange(bracket);
+            if (range && range.min !== undefined && range.max !== undefined) {
+                return n >= range.min && n <= range.max;
+            }
+            return true;
+        }
+        case 'regexp': {
+            let re = null;
+            if (rule.value instanceof RegExp) {
+                re = rule.value;
+            }
+            else if (bracket) {
+                const inner = bracket.trim();
+                const m = inner.match(/^\/(.*)\/([gimuy]*)$/);
+                if (m) {
+                    re = new RegExp(m[1], m[2] || '');
+                }
+            }
+            if (!re) {
+                return false;
+            }
+            return re.test(s);
+        }
+        case 'minlength': {
+            const min = bracket ? parseInt(bracket, 10) : NaN;
+            if (Number.isNaN(min)) {
+                return false;
+            }
+            return s.length >= min;
+        }
+        case 'maxlength': {
+            const max = bracket ? parseInt(bracket, 10) : NaN;
+            if (Number.isNaN(max)) {
+                return false;
+            }
+            return s.length <= max;
+        }
+        case 'exactlength': {
+            const ex = bracket ? parseInt(bracket, 10) : NaN;
+            if (Number.isNaN(ex)) {
+                return false;
+            }
+            return s.length === ex;
+        }
+        case 'match': {
+            if (!bracket) {
+                return false;
+            }
+            const other = asString(ctx.getFieldValue(bracket));
+            return s === other;
+        }
+        case 'different': {
+            if (!bracket) {
+                return false;
+            }
+            const other = asString(ctx.getFieldValue(bracket));
+            return s !== other || s === '';
+        }
+        case 'mincount': {
+            const min = bracket ? parseInt(bracket, 10) : NaN;
+            if (!Number.isFinite(min)) {
+                return false;
+            }
+            const arr = Array.isArray(fieldValue) ? fieldValue : [];
+            return arr.length >= min;
+        }
+        case 'maxcount': {
+            const max = bracket ? parseInt(bracket, 10) : NaN;
+            if (!Number.isFinite(max)) {
+                return false;
+            }
+            const arr = Array.isArray(fieldValue) ? fieldValue : [];
+            return arr.length <= max;
+        }
+        case 'exactcount': {
+            const ex = bracket ? parseInt(bracket, 10) : NaN;
+            if (!Number.isFinite(ex)) {
+                return false;
+            }
+            const arr = Array.isArray(fieldValue) ? fieldValue : [];
+            return arr.length === ex;
+        }
+        case 'contains':
+            return bracket ? s.toLowerCase().includes(bracket.toLowerCase()) : false;
+        case 'containsexactly':
+            return bracket ? s.includes(bracket) : false;
+        case 'doesntcontain':
+            return bracket ? !s.toLowerCase().includes(bracket.toLowerCase()) : false;
+        case 'doesntcontainexactly':
+            return bracket ? !s.includes(bracket) : false;
+        case 'is':
+            return bracket ? s.toLowerCase() === bracket.toLowerCase() : false;
+        case 'isexactly':
+            return bracket ? s === bracket : false;
+        case 'not':
+            return bracket ? s.toLowerCase() !== bracket.toLowerCase() : false;
+        case 'notexactly':
+            return bracket ? s !== bracket : false;
+        case 'exactly':
+            return bracket ? s.toLowerCase() === bracket.toLowerCase() : false;
+        case 'creditcard': {
+            const digits = s.replace(/\s/g, '');
+            if (!luhnValid(digits)) {
+                return false;
+            }
+            if (!bracket) {
+                return true;
+            }
+            const types = bracket.split(',').map(t => t.trim().toLowerCase());
+            return types.some(t => {
+                const rx = CARD_TYPES[t];
+                return rx && rx.test(digits);
+            });
+        }
+        default:
+            return true;
+    }
+}
+
+const DEFAULT_PROMPTS = {
+    empty: '{name} must have a value',
+    checked: '{name} must be checked',
+    email: '{name} must be a valid e-mail',
+    url: '{name} must be a valid url',
+    regexp: '{name} is not formatted correctly',
+    integer: '{name} must be an integer',
+    decimal: '{name} must be a decimal number',
+    number: '{name} must be set to a number',
+    is: "{name} must be '{ruleValue}'",
+    isexactly: "{name} must be exactly '{ruleValue}'",
+    not: "{name} cannot be set to '{ruleValue}'",
+    notexactly: "{name} cannot be set to exactly '{ruleValue}'",
+    contains: "{name} must contain '{ruleValue}'",
+    containsexactly: "{name} must contain exactly '{ruleValue}'",
+    doesntcontain: "{name} must not contain '{ruleValue}'",
+    doesntcontainexactly: "{name} must not contain exactly '{ruleValue}'",
+    minlength: '{name} must be at least {ruleValue} characters',
+    exactlength: '{name} must be exactly {ruleValue} characters',
+    maxlength: '{name} cannot be longer than {ruleValue} characters',
+    match: '{name} must match {ruleValue} field',
+    different: '{name} must have a different value than {ruleValue} field',
+    creditcard: '{name} must be a valid credit card number',
+    mincount: '{name} must have at least {ruleValue} choices',
+    exactcount: '{name} must have exactly {ruleValue} choices',
+    maxcount: '{name} must have {ruleValue} or less choices',
+    exactly: "{name} must be '{ruleValue}'"
+};
+function formatValidationPrompt(ruleType, fieldName, fieldIdentifier, fieldValue, customPrompt, ruleValue) {
+    if (typeof customPrompt === 'function') {
+        return customPrompt(fieldValue);
+    }
+    if (customPrompt) {
+        return applyTemplate(customPrompt, fieldName, fieldIdentifier, fieldValue, ruleValue);
+    }
+    const { name } = parseRuleType(ruleType);
+    const key = name.toLowerCase();
+    const template = DEFAULT_PROMPTS[key] ?? 'Please enter a valid value';
+    return applyTemplate(template, fieldName, fieldIdentifier, fieldValue, ruleValue);
+}
+function applyTemplate(template, name, identifier, value, ruleValue) {
+    const v = value === null || value === undefined
+        ? ''
+        : Array.isArray(value)
+            ? value.join(',')
+            : String(value);
+    return template
+        .replace(/\{name\}/g, name)
+        .replace(/\{identifier\}/g, identifier)
+        .replace(/\{value\}/g, v)
+        .replace(/\{ruleValue\}/g, ruleValue);
+}
+
+/**
+ * Types for Semantic UI [Form Validation](https://semantic-ui.com/behaviors/form.html) — Angular port.
+ * Lives with `ngx-semantic/collections/form` (use with `sui-form` + `suiFormValidation` on the same `<form>`).
+ */
+/** `AbstractControl.errors` key for Semantic rule failures (string message). Works with built-in validators. */
+const SUI_FORM_VALIDATION_ERROR_KEY = 'suiFormValidation';
+
+/** Merge or clear Semantic validation errors without wiping other validator errors on the control. */
+function patchSuiFormValidationControlError(control, message) {
+    const key = SUI_FORM_VALIDATION_ERROR_KEY;
+    const cur = control.errors;
+    if (message === null) {
+        if (!cur?.[key]) {
+            return;
+        }
+        const rest = { ...cur };
+        delete rest[key];
+        control.setErrors(Object.keys(rest).length ? rest : null);
+    }
+    else {
+        control.setErrors({ ...(cur || {}), [key]: message });
+    }
+}
+
+function isEmptyValue(v) {
+    if (v === null || v === undefined) {
+        return true;
+    }
+    if (typeof v === 'boolean') {
+        return !v;
+    }
+    if (Array.isArray(v)) {
+        return v.length === 0;
+    }
+    return String(v).trim() === '';
+}
+class SuiFormValidationDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.ngForm = inject(NgForm, { optional: true, host: true });
+        this.formGroupDir = inject(FormGroupDirective, { optional: true, host: true });
+        /** Validation field definitions (shorthand or longhand), matching Semantic UI `fields`. */
+        this.suiFields = null;
+        /** `submit`, `blur`, or `change` — when to validate fields. */
+        this.suiOn = 'submit';
+        this.suiInline = false;
+        this.suiRevalidate = true;
+        /** Debounce (ms) for `change` / revalidation; `true` uses 300ms; `false` disables. */
+        this.suiDelay = true;
+        this.suiKeyboardShortcuts = true;
+        /** When using `NgForm` / `FormGroup`, mark all controls touched after a failed submit (shows native errors). */
+        this.suiMarkControlsTouchedOnInvalid = true;
+        this.suiOnSuccess = new EventEmitter();
+        this.suiOnFailure = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.normalized = [];
+        this.defaultValues = new Map();
+        this.teardownFieldSubs = null;
+        const el = this.el;
+        this.host = el.nativeElement;
+    }
+    /** Reactive `[formGroup]` or template-driven `NgForm` on this host, if any. */
+    getAngularForm() {
+        if (this.formGroupDir?.form) {
+            return this.formGroupDir.form;
+        }
+        if (this.ngForm?.form) {
+            return this.ngForm.form;
+        }
+        return null;
+    }
+    /** Control whose name matches `suiFields` identifier (flat `FormGroup` only). */
+    resolveControl(identifier) {
+        const g = this.getAngularForm();
+        const c = g?.get(identifier);
+        return c ?? null;
+    }
+    ngOnChanges(changes) {
+        if (changes['suiFields']) {
+            this.normalized = this.suiFields ? normalizeFields(this.suiFields) : [];
+        }
+        if (changes['suiFields'] || changes['suiOn'] || changes['suiDelay'] || changes['suiRevalidate']) {
+            this.bindFieldTriggers();
+        }
+    }
+    ngOnDestroy() {
+        this.teardownFieldSubs?.();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onHostSubmit(event) {
+        if (!this.normalized.length) {
+            return;
+        }
+        this.cacheDefaultsOnce();
+        const r = this.runValidationWithUi();
+        const form = this.getAngularForm();
+        const ok = r.valid && (!form || form.valid);
+        // Always prevent native form navigation; consumers use suiOnSuccess for follow-up.
+        event.preventDefault();
+        if (!ok) {
+            if (this.suiMarkControlsTouchedOnInvalid && form) {
+                form.markAllAsTouched();
+            }
+            event.stopPropagation();
+            const errorsOut = r.errors.length > 0
+                ? r.errors
+                : form && !form.valid
+                    ? ['This form has validation errors.']
+                    : r.errors;
+            this.suiOnFailure.emit({ errors: errorsOut, fields: r.fieldIds });
+            return;
+        }
+        this.suiOnSuccess.emit(event);
+    }
+    onHostKeydown(ev) {
+        if (!this.suiKeyboardShortcuts) {
+            return;
+        }
+        if (!this.host.contains(ev.target)) {
+            return;
+        }
+        if (ev.key === 'Escape') {
+            ev.target?.blur?.();
+        }
+    }
+    /** Validate the whole form, update UI, emit success/failure. */
+    validateForm() {
+        this.cacheDefaultsOnce();
+        const r = this.runValidationWithUi();
+        const form = this.getAngularForm();
+        const ok = r.valid && (!form || form.valid);
+        if (!ok) {
+            if (this.suiMarkControlsTouchedOnInvalid && form) {
+                form.markAllAsTouched();
+            }
+            const errorsOut = r.errors.length > 0
+                ? r.errors
+                : form && !form.valid
+                    ? ['This form has validation errors.']
+                    : r.errors;
+            this.suiOnFailure.emit({ errors: errorsOut, fields: r.fieldIds });
+        }
+        else {
+            this.suiOnSuccess.emit(new Event('semantic-form-valid'));
+        }
+        return ok;
+    }
+    runValidationWithUi() {
+        const errors = [];
+        const fieldIds = [];
+        this.clearFormLevelMessage();
+        this.clearAllFieldUi();
+        for (const f of this.normalized) {
+            const msg = this.evaluateFieldMessage(f);
+            const ctrl = this.resolveControl(f.identifier);
+            if (msg) {
+                errors.push(msg);
+                fieldIds.push(f.identifier);
+                this.applyFieldError(f.identifier, msg);
+                if (ctrl) {
+                    patchSuiFormValidationControlError(ctrl, msg);
+                }
+            }
+        }
+        this.renderFormLevelErrors(errors);
+        return { valid: errors.length === 0, errors, fieldIds };
+    }
+    /** Validate one field by identifier (updates UI and `AbstractControl` errors when bound). */
+    validateField(identifier) {
+        const field = this.normalized.find(x => x.identifier === identifier || x.key === identifier);
+        if (!field) {
+            return true;
+        }
+        this.clearFieldUi(field.identifier);
+        const msg = this.evaluateFieldMessage(field);
+        const ctrl = this.resolveControl(field.identifier);
+        if (msg) {
+            if (ctrl) {
+                patchSuiFormValidationControlError(ctrl, msg);
+            }
+            this.applyFieldError(field.identifier, msg);
+            return false;
+        }
+        return true;
+    }
+    /** Whether the form (or one field) passes rules; does not update UI (Semantic `is valid`). */
+    isValid(identifier) {
+        if (identifier) {
+            const field = this.normalized.find(x => x.identifier === identifier || x.key === identifier);
+            return field ? this.evaluateFieldMessage(field) === null : true;
+        }
+        return this.normalized.every(f => this.evaluateFieldMessage(f) === null);
+    }
+    getFieldElement(identifier) {
+        return resolveFieldElement(this.host, identifier);
+    }
+    getValue(identifier) {
+        const ctrl = this.resolveControl(identifier);
+        if (ctrl) {
+            return ctrl.value;
+        }
+        const el = this.getFieldElement(identifier);
+        return el ? readControlValue(el) : undefined;
+    }
+    getValues(identifiers) {
+        const ids = identifiers ??
+            this.normalized.map(f => f.identifier);
+        const out = {};
+        for (const id of ids) {
+            const ctrl = this.resolveControl(id);
+            if (ctrl) {
+                out[id] = ctrl.value;
+                continue;
+            }
+            const el = resolveFieldElement(this.host, id);
+            if (!el) {
+                continue;
+            }
+            const name = el.getAttribute('name') ?? el.getAttribute('id') ?? el.getAttribute('data-validate') ?? id;
+            out[name] = readControlValue(el);
+        }
+        return out;
+    }
+    setValue(identifier, value) {
+        const ctrl = this.resolveControl(identifier);
+        if (ctrl) {
+            ctrl.setValue(value);
+            return;
+        }
+        const el = resolveFieldElement(this.host, identifier);
+        if (!el) {
+            return;
+        }
+        this.writeControlValue(el, value);
+    }
+    setValues(values) {
+        for (const k of Object.keys(values)) {
+            this.setValue(k, values[k]);
+        }
+    }
+    /** Restore values cached at first validation init (Semantic `reset`). */
+    reset() {
+        const fields = this.host.querySelectorAll('input, select, textarea');
+        fields.forEach(control => {
+            const key = control.name || control.id;
+            if (!key) {
+                return;
+            }
+            if (this.defaultValues.has(key)) {
+                this.writeControlValue(control, this.defaultValues.get(key));
+            }
+        });
+    }
+    /** Clear all field values (Semantic `clear`). */
+    clear() {
+        this.host.querySelectorAll('input, select, textarea').forEach(control => {
+            if (control instanceof HTMLInputElement) {
+                if (control.type === 'checkbox' || control.type === 'radio') {
+                    control.checked = false;
+                }
+                else {
+                    control.value = '';
+                }
+            }
+            else if (control instanceof HTMLSelectElement) {
+                if (control.multiple) {
+                    Array.from(control.options).forEach(o => (o.selected = false));
+                }
+                else {
+                    control.selectedIndex = 0;
+                }
+            }
+            else {
+                control.value = '';
+            }
+        });
+    }
+    debounceMs() {
+        if (this.suiDelay === false) {
+            return 0;
+        }
+        if (this.suiDelay === true) {
+            return 300;
+        }
+        return Math.max(0, this.suiDelay);
+    }
+    ctx() {
+        return {
+            getFieldValue: id => {
+                const c = this.resolveControl(id);
+                if (c) {
+                    return c.value;
+                }
+                const el = resolveFieldElement(this.host, id);
+                return el ? readControlValue(el) : '';
+            },
+            getFieldElement: id => resolveFieldElement(this.host, id)
+        };
+    }
+    evaluateFieldMessage(field) {
+        const ctx = this.ctx();
+        if (field.depends) {
+            const dep = ctx.getFieldValue(field.depends);
+            if (isEmptyValue(dep)) {
+                return null;
+            }
+        }
+        const ctrl = this.resolveControl(field.identifier);
+        const el = resolveFieldElement(this.host, field.identifier);
+        const value = ctrl ? ctrl.value : el ? readControlValue(el) : undefined;
+        if (field.optional && isEmptyValue(value)) {
+            return null;
+        }
+        const fieldName = el ? inferFieldName(el, field.identifier) : field.identifier;
+        for (const rule of field.rules) {
+            if (!evaluateRule(rule, value, field.identifier, ctx)) {
+                const { bracket } = parseRuleType(rule.type);
+                return formatValidationPrompt(rule.type, fieldName, field.identifier, value, rule.prompt, bracket ?? '');
+            }
+        }
+        return null;
+    }
+    cacheDefaultsOnce() {
+        if (this.defaultValues.size) {
+            return;
+        }
+        this.host.querySelectorAll('input, select, textarea').forEach(control => {
+            const key = control.name || control.id;
+            if (!key) {
+                return;
+            }
+            if (control instanceof HTMLInputElement && (control.type === 'checkbox' || control.type === 'radio')) {
+                this.defaultValues.set(key, control.checked ? '1' : '');
+            }
+            else {
+                this.defaultValues.set(key, control.value);
+            }
+        });
+    }
+    bindFieldTriggers() {
+        this.teardownFieldSubs?.();
+        this.teardownFieldSubs = null;
+        if (!this.normalized.length || this.suiOn === 'submit') {
+            return;
+        }
+        const sub = new Subject();
+        const stop = () => {
+            sub.next();
+            sub.complete();
+        };
+        this.teardownFieldSubs = stop;
+        const ms = this.debounceMs();
+        this.zone.runOutsideAngular(() => {
+            for (const f of this.normalized) {
+                const el = resolveFieldElement(this.host, f.identifier);
+                if (!el) {
+                    continue;
+                }
+                const ev = this.suiOn === 'blur'
+                    ? fromEvent(el, 'blur')
+                    : merge(fromEvent(el, 'input'), fromEvent(el, 'change'));
+                const piped = ms > 0 ? ev.pipe(debounceTime(ms)) : ev;
+                piped.pipe(takeUntil(sub), takeUntil(this.destroy$)).subscribe(() => {
+                    this.zone.run(() => {
+                        this.validateField(f.identifier);
+                    });
+                });
+            }
+        });
+        if (this.suiRevalidate && this.suiOn === 'blur') {
+            this.zone.runOutsideAngular(() => {
+                for (const f of this.normalized) {
+                    const el = resolveFieldElement(this.host, f.identifier);
+                    if (!el) {
+                        continue;
+                    }
+                    const piped = ms > 0
+                        ? fromEvent(el, 'input').pipe(debounceTime(ms))
+                        : fromEvent(el, 'input');
+                    piped.pipe(takeUntil(sub), takeUntil(this.destroy$)).subscribe(() => {
+                        const group = findSemanticField(el);
+                        if (group?.classList.contains('error')) {
+                            this.zone.run(() => this.validateField(f.identifier));
+                        }
+                    });
+                }
+            });
+        }
+    }
+    clearAllFieldUi() {
+        for (const f of this.normalized) {
+            this.clearFieldUi(f.identifier);
+        }
+    }
+    clearFieldUi(identifier) {
+        const ctrl = this.resolveControl(identifier);
+        if (ctrl) {
+            patchSuiFormValidationControlError(ctrl, null);
+        }
+        const el = resolveFieldElement(this.host, identifier);
+        const group = el ? findSemanticField(el) : null;
+        if (group) {
+            this.renderer.removeClass(group, 'error');
+            const prompt = group.querySelector('.prompt');
+            if (prompt) {
+                this.renderer.setProperty(prompt, 'textContent', '');
+                if (this.suiInline) {
+                    this.renderer.removeStyle(prompt, 'display');
+                }
+                else {
+                    this.renderer.setStyle(prompt, 'display', 'none');
+                }
+            }
+        }
+    }
+    applyFieldError(identifier, message) {
+        const el = resolveFieldElement(this.host, identifier);
+        const group = el ? findSemanticField(el) : null;
+        if (!group) {
+            return;
+        }
+        this.renderer.addClass(group, 'error');
+        if (!this.suiInline) {
+            return;
+        }
+        let prompt = group.querySelector('.prompt');
+        if (!prompt) {
+            prompt = this.renderer.createElement('div');
+            this.renderer.addClass(prompt, 'ui');
+            this.renderer.addClass(prompt, 'basic');
+            this.renderer.addClass(prompt, 'red');
+            this.renderer.addClass(prompt, 'pointing');
+            this.renderer.addClass(prompt, 'label');
+            this.renderer.addClass(prompt, 'prompt');
+            this.renderer.setAttribute(prompt, 'role', 'alert');
+            this.renderer.appendChild(group, prompt);
+        }
+        this.renderer.setProperty(prompt, 'textContent', message);
+        this.renderer.removeStyle(prompt, 'display');
+    }
+    renderFormLevelErrors(messages) {
+        const block = this.host.querySelector('.ui.error.message, .error.message');
+        if (!block || !messages.length) {
+            return;
+        }
+        const ul = this.renderer.createElement('ul');
+        ul.className = 'list';
+        for (const m of messages) {
+            const li = this.renderer.createElement('li');
+            li.textContent = m;
+            ul.appendChild(li);
+        }
+        block.innerHTML = '';
+        block.appendChild(ul);
+        this.renderer.removeClass(block, 'hidden');
+    }
+    clearFormLevelMessage() {
+        const block = this.host.querySelector('.ui.error.message, .error.message');
+        if (block) {
+            block.innerHTML = '';
+        }
+    }
+    writeControlValue(el, value) {
+        if (el instanceof HTMLInputElement) {
+            if (el.type === 'checkbox') {
+                el.checked = Boolean(value);
+                return;
+            }
+            if (el.type === 'radio') {
+                const form = el.form ?? this.host;
+                const name = el.name;
+                const str = String(value ?? '');
+                form
+                    .querySelectorAll(`input[type="radio"][name="${escapeAttrSelector(name)}"]`)
+                    .forEach(r => {
+                    r.checked = r.value === str;
+                });
+                return;
+            }
+            el.value = value === null || value === undefined ? '' : String(value);
+            return;
+        }
+        if (el instanceof HTMLSelectElement) {
+            if (el.multiple && Array.isArray(value)) {
+                const set = new Set(value.map(String));
+                Array.from(el.options).forEach(o => {
+                    o.selected = set.has(o.value);
+                });
+            }
+            else {
+                el.value = String(value ?? '');
+            }
+            return;
+        }
+        if (el instanceof HTMLTextAreaElement) {
+            el.value = value === null || value === undefined ? '' : String(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: SuiFormValidationDirective, isStandalone: true, selector: "form[suiFormValidation]", inputs: { suiFields: "suiFields", suiOn: "suiOn", suiInline: "suiInline", suiRevalidate: "suiRevalidate", suiDelay: "suiDelay", suiKeyboardShortcuts: "suiKeyboardShortcuts", suiMarkControlsTouchedOnInvalid: "suiMarkControlsTouchedOnInvalid" }, outputs: { suiOnSuccess: "suiOnSuccess", suiOnFailure: "suiOnFailure" }, host: { listeners: { "submit": "onHostSubmit($event)", "keydown": "onHostKeydown($event)" } }, exportAs: ["suiFormValidation"], usesOnChanges: true, ngImport: i0 }); }
+}
+__decorate([
+    InputBoolean()
+], SuiFormValidationDirective.prototype, "suiInline", void 0);
+__decorate([
+    InputBoolean()
+], SuiFormValidationDirective.prototype, "suiRevalidate", void 0);
+__decorate([
+    InputBoolean()
+], SuiFormValidationDirective.prototype, "suiKeyboardShortcuts", void 0);
+__decorate([
+    InputBoolean()
+], SuiFormValidationDirective.prototype, "suiMarkControlsTouchedOnInvalid", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormValidationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'form[suiFormValidation]',
+                    exportAs: 'suiFormValidation'
+                }]
+        }], ctorParameters: () => [], propDecorators: { suiFields: [{
+                type: Input
+            }], suiOn: [{
+                type: Input
+            }], suiInline: [{
+                type: Input
+            }], suiRevalidate: [{
+                type: Input
+            }], suiDelay: [{
+                type: Input
+            }], suiKeyboardShortcuts: [{
+                type: Input
+            }], suiMarkControlsTouchedOnInvalid: [{
+                type: Input
+            }], suiOnSuccess: [{
+                type: Output
+            }], suiOnFailure: [{
+                type: Output
+            }], onHostSubmit: [{
+                type: HostListener,
+                args: ['submit', ['$event']]
+            }], onHostKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 /**
  * Created by bolor on 5/26/2020
  */
 class SuiFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: SuiFormModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
             SuiFormFieldDirective,
             SuiFormDirective,
-            SuiFormFieldsDirective], exports: [SuiFormFieldDirective,
+            SuiFormFieldsDirective,
+            SuiFormValidationDirective], exports: [FormsModule,
+            ReactiveFormsModule,
+            SuiFormFieldDirective,
             SuiFormDirective,
-            SuiFormFieldsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormModule, imports: [CommonModule] }); }
+            SuiFormFieldsDirective,
+            SuiFormValidationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule, FormsModule,
+            ReactiveFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
                         SuiFormFieldDirective,
                         SuiFormDirective,
-                        SuiFormFieldsDirective
+                        SuiFormFieldsDirective,
+                        SuiFormValidationDirective
                     ],
                     exports: [
+                        FormsModule,
+                        ReactiveFormsModule,
                         SuiFormFieldDirective,
                         SuiFormDirective,
-                        SuiFormFieldsDirective
+                        SuiFormFieldsDirective,
+                        SuiFormValidationDirective
                     ]
                 }]
         }] });
@@ -201,5 +1172,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SuiFormDirective, SuiFormFieldDirective, SuiFormFieldsDirective, SuiFormModule };
+export { SUI_FORM_VALIDATION_ERROR_KEY, SuiFormDirective, SuiFormFieldDirective, SuiFormFieldsDirective, SuiFormModule, SuiFormValidationDirective, escapeAttrSelector, evaluateRule, findSemanticField, formatValidationPrompt, inferFieldName, normalizeFields, parseRuleType, patchSuiFormValidationControlError, readControlValue, resolveFieldElement };
 //# sourceMappingURL=ngx-semantic-collections-form.mjs.map