@sd-angular/core 19.0.0-beta.83 → 19.0.0-beta.85

package/fesm2022/sd-angular-core-forms-input.mjs

@@ -246,10 +246,10 @@ class SdInput {
             this.control()?.nativeElement?.focus();
         }, 100);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdInput, isStandalone: true, selector: "sd-input", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, blurOnEnter: { classPropertyName: "blurOnEnter", publicName: "blurOnEnter", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, patternErrorMessage: { classPropertyName: "patternErrorMessage", publicName: "patternErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdFocus: "sdFocus", sdBlur: "sdBlur", keyupEnter: "keyupEnter", sdFocusForceBlur: "sdFocusForceBlur" }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let ttip = tooltip();\r\n@let maxLen = maxlength();\r\n@let errMsg = errorTooltipMessage;\r\n@let req = required();\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"formControl.value\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"!!viewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (viewDef?.templateRef && !isFocused) {\r\n      <ng-container *ngTemplateOutlet=\"viewDef!.templateRef; context: { value: formControl.value }\"> </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size() === 'md'\"\r\n        [class.sd-sm]=\"size() === 'sm'\"\r\n        [class.hide-inline-error]=\"hideErr\"\r\n        [class.sd-form-tooltip]=\"!!ttip\"\r\n        [appearance]=\"app!\"\r\n        [floatLabel]=\"floatLabel()\">\r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n\r\n        <input\r\n          aria-hidden=\"true\"\r\n          [id]=\"id\"\r\n          [formControl]=\"formControl\"\r\n          [type]=\"type()\"\r\n          #control\r\n          matInput\r\n          [placeholder]=\"placeholder() || lbl || ''\"\r\n          (keyup.enter)=\"onKeyupEnter()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          [required]=\"req\"\r\n          [readonly]=\"readonly()\"\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [step]=\"1\"\r\n          [attr.data-autoId]=\"autoId()\" />\r\n\r\n        @if (hideErr && errMsg && formControl.touched) {\r\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\r\n        }\r\n\r\n        @if (!hideErr && errMsg && formControl.touched) {\r\n          <mat-error>{{ errMsg }}</mat-error>\r\n        }\r\n\r\n        @if (maxLen && !formControl.disabled) {\r\n          <span matSuffix>{{ formControl.value?.length || 0 }}/{{ maxLen }}</span>\r\n        }\r\n\r\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\r\n          <ng-container matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\r\n          </ng-container>\r\n        }\r\n        <!-- <ng-container matSuffix>\r\n          <ng-content select=\"[sdSuffix]\"></ng-content>\r\n        </ng-container> -->\r\n      </mat-form-field>\r\n\r\n      @if (ttip) {\r\n        <div class=\"sd-tooltip\">\r\n          <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value || ttip\" matSuffix #sdTooltip=\"matTooltip\">info</mat-icon>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mat-mdc-form-field.sd-form-tooltip{width:calc(100% - 30px)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd-tooltip{display:inline-block;text-align:center;margin:auto;width:30px}:host{padding-top:5px;display:block}.sd-md:hover .btn-copy{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdInput, isStandalone: true, selector: "sd-input", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, blurOnEnter: { classPropertyName: "blurOnEnter", publicName: "blurOnEnter", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, patternErrorMessage: { classPropertyName: "patternErrorMessage", publicName: "patternErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdFocus: "sdFocus", sdBlur: "sdBlur", keyupEnter: "keyupEnter", sdFocusForceBlur: "sdFocusForceBlur" }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let ttip = tooltip();\r\n@let maxLen = maxlength();\r\n@let errMsg = errorTooltipMessage;\r\n@let req = required();\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"formControl.value\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"!!viewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (viewDef?.templateRef && !isFocused) {\r\n      <ng-container *ngTemplateOutlet=\"viewDef!.templateRef; context: { value: formControl.value }\"> </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size() === 'md'\"\r\n        [class.sd-sm]=\"size() === 'sm'\"\r\n        [class.hide-inline-error]=\"hideErr\"\r\n        [class.sd-form-tooltip]=\"!!ttip\"\r\n        [appearance]=\"app!\"\r\n        [floatLabel]=\"floatLabel()\">\r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n\r\n        <input\r\n          aria-hidden=\"true\"\r\n          [id]=\"id\"\r\n          [formControl]=\"formControl\"\r\n          [type]=\"type()\"\r\n          #control\r\n          matInput\r\n          [placeholder]=\"placeholder() || lbl || ''\"\r\n          (keyup.enter)=\"onKeyupEnter()\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          [required]=\"req\"\r\n          [readonly]=\"readonly()\"\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [step]=\"1\"\r\n          [attr.data-autoId]=\"autoId()\" />\r\n\r\n        @if (hideErr && errMsg && formControl.touched) {\r\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\r\n        }\r\n\r\n        @if (!hideErr && errMsg && formControl.touched) {\r\n          <mat-error>{{ errMsg }}</mat-error>\r\n        }\r\n\r\n        @if (maxLen && !formControl.disabled) {\r\n          <span matSuffix>{{ formControl.value?.length || 0 }}/{{ maxLen }}</span>\r\n        }\r\n\r\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\r\n          <ng-container matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\r\n          </ng-container>\r\n        }\r\n        <!-- <ng-container matSuffix>\r\n          <ng-content select=\"[sdSuffix]\"></ng-content>\r\n        </ng-container> -->\r\n      </mat-form-field>\r\n\r\n      @if (ttip) {\r\n        <div class=\"sd-tooltip\">\r\n          <mat-icon (click)=\"sdTooltip.toggle()\" [matTooltip]=\"formControl.value || ttip\" matSuffix #sdTooltip=\"matTooltip\">info</mat-icon>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mat-mdc-form-field.sd-form-tooltip{width:calc(100% - 30px)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd-tooltip{display:inline-block;text-align:center;margin:auto;width:30px}:host{padding-top:5px;display:block}.sd-md:hover .btn-copy{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInput, decorators: [{
             type: Component,
             args: [{ selector: 'sd-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,

package/fesm2022/sd-angular-core-forms-label.mjs

@@ -23,10 +23,10 @@ class SdLabel {
     set _helperText(val) {
         this.helperText = val;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdLabel, isStandalone: true, selector: "sd-label", inputs: { _label: ["label", "_label"], _description: ["description", "_description"], _required: ["required", "_required"], _helperText: ["helperText", "_helperText"] }, ngImport: i0, template: "@if (label) {\r\n  <div class=\"mb-0 d-flex\">\r\n    <div style=\"display: flex; align-items: center; gap: 4px\">\r\n      <span class=\"T14M\">{{ label }}</span>\r\n      @if (helperText) {\r\n        <mat-icon style=\"height: 1rem; width: 1rem; font-size: 1rem\" [matTooltip]=\"helperText\" matTooltipPosition=\"below\"\r\n          >info_outline</mat-icon\r\n        >\r\n      }\r\n    </div>\r\n    @if (required) {\r\n      <span class=\"text-error mb-2 T14M\">*</span>\r\n    }\r\n  </div>\r\n  @if (description) {\r\n    <div class=\"text-black400 T12R\">{{ description }}</div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdLabel, isStandalone: true, selector: "sd-label", inputs: { _label: ["label", "_label"], _description: ["description", "_description"], _required: ["required", "_required"], _helperText: ["helperText", "_helperText"] }, ngImport: i0, template: "@if (label) {\r\n  <div class=\"mb-0 d-flex\">\r\n    <div style=\"display: flex; align-items: center; gap: 4px\">\r\n      <span class=\"T14M\">{{ label }}</span>\r\n      @if (helperText) {\r\n        <mat-icon style=\"height: 1rem; width: 1rem; font-size: 1rem\" [matTooltip]=\"helperText\" matTooltipPosition=\"below\"\r\n          >info_outline</mat-icon\r\n        >\r\n      }\r\n    </div>\r\n    @if (required) {\r\n      <span class=\"text-error mb-2 T14M\">*</span>\r\n    }\r\n  </div>\r\n  @if (description) {\r\n    <div class=\"text-black400 T12R\">{{ description }}</div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdLabel, decorators: [{
             type: Component,
             args: [{ selector: 'sd-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "@if (label) {\r\n  <div class=\"mb-0 d-flex\">\r\n    <div style=\"display: flex; align-items: center; gap: 4px\">\r\n      <span class=\"T14M\">{{ label }}</span>\r\n      @if (helperText) {\r\n        <mat-icon style=\"height: 1rem; width: 1rem; font-size: 1rem\" [matTooltip]=\"helperText\" matTooltipPosition=\"below\"\r\n          >info_outline</mat-icon\r\n        >\r\n      }\r\n    </div>\r\n    @if (required) {\r\n      <span class=\"text-error mb-2 T14M\">*</span>\r\n    }\r\n  </div>\r\n  @if (description) {\r\n    <div class=\"text-black400 T12R\">{{ description }}</div>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { _label: [{

package/fesm2022/sd-angular-core-forms-models.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-forms-models.mjs","sources":["../../../projects/sd-angular/forms/models/src/sd-form.configuration.ts","../../../projects/sd-angular/forms/models/src/sd-form-control.model.ts","../../../projects/sd-angular/forms/models/src/sd-custom-validator.model.ts","../../../projects/sd-angular/forms/models/sd-angular-core-forms-models.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\n\nexport interface ISdFormConfiguration {\n  appearance?: MatFormFieldAppearance;\n}\n\nexport const SD_FORM_CONFIGURATION = new InjectionToken<ISdFormConfiguration>('sd.form.configuration');\n","import { FormControl, AsyncValidatorFn, ValidatorFn, FormControlOptions, FormControlState } from '@angular/forms';\nimport { Subject } from 'rxjs';\n\nexport class SdFormControl extends FormControl {\n  sdChanges: Subject<boolean> = new Subject<boolean>();\n  untouchChanges: Subject<boolean> = new Subject<boolean>();\n  touchChanges: Subject<boolean> = new Subject<boolean>();\n  pristineChanges: Subject<boolean> = new Subject<boolean>();\n  constructor(\n    formState?: FormControlState<any>,\n    validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,\n    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null\n  ) {\n    super(formState, validatorOrOpts, asyncValidator);\n  }\n\n  override markAsUntouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\n    super.markAsUntouched(opts);\n    this.untouchChanges.next(true);\n    this.sdChanges.next(true);\n  }\n\n  override markAsTouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\n    super.markAsTouched(opts);\n    this.touchChanges.next(true);\n    this.sdChanges.next(true);\n  }\n\n  override markAsPristine(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\n    super.markAsPristine(opts);\n    this.pristineChanges.next(true);\n    this.sdChanges.next(true);\n  }\n}\n","import { AbstractControl, AsyncValidatorFn } from '@angular/forms';\r\n\r\nexport type SdCustomValidator = (value: any) => string | Promise<string>;\r\nexport const HandleSdCustomValidator = (func: SdCustomValidator): AsyncValidatorFn => {\r\n  return async (c: AbstractControl): Promise<Record<string, any> | null> => {    \r\n    const value = c.value===0 ? c.value : c.value || null;\r\n    if (func && typeof func === 'function') {\r\n      const result = func(value);\r\n      if (result instanceof Promise) {\r\n        const message = await result;\r\n        if (message) {\r\n          return {\r\n            customValidator: message,\r\n          };\r\n        }\r\n        return null;\r\n      }\r\n      if (result) {\r\n        return {\r\n          customValidator: result,\r\n        };\r\n      }\r\n      return null;\r\n    }\r\n    return null;\r\n  };\r\n};\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,qBAAqB,GAAG,IAAI,cAAc,CAAuB,uBAAuB;;ACJ/F,MAAO,aAAc,SAAQ,WAAW,CAAA;AAC5C,IAAA,SAAS,GAAqB,IAAI,OAAO,EAAW;AACpD,IAAA,cAAc,GAAqB,IAAI,OAAO,EAAW;AACzD,IAAA,YAAY,GAAqB,IAAI,OAAO,EAAW;AACvD,IAAA,eAAe,GAAqB,IAAI,OAAO,EAAW;AAC1D,IAAA,WAAA,CACE,SAAiC,EACjC,eAAyE,EACzE,cAA6D,EAAA;AAE7D,QAAA,KAAK,CAAC,SAAS,EAAE,eAAe,EAAE,cAAc,CAAC;IACnD;AAES,IAAA,eAAe,CAAC,IAAkD,EAAA;AACzE,QAAA,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAES,IAAA,aAAa,CAAC,IAAkD,EAAA;AACvE,QAAA,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAES,IAAA,cAAc,CAAC,IAAkD,EAAA;AACxE,QAAA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AACD;;AC9BM,MAAM,uBAAuB,GAAG,CAAC,IAAuB,KAAsB;AACnF,IAAA,OAAO,OAAO,CAAkB,KAAyC;QACvE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,KAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,IAAI;AACrD,QAAA,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,MAAM,YAAY,OAAO,EAAE;AAC7B,gBAAA,MAAM,OAAO,GAAG,MAAM,MAAM;gBAC5B,IAAI,OAAO,EAAE;oBACX,OAAO;AACL,wBAAA,eAAe,EAAE,OAAO;qBACzB;gBACH;AACA,gBAAA,OAAO,IAAI;YACb;YACA,IAAI,MAAM,EAAE;gBACV,OAAO;AACL,oBAAA,eAAe,EAAE,MAAM;iBACxB;YACH;AACA,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AACH;;AC1BA;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-forms-models.mjs","sources":["../../../projects/sd-angular/forms/models/src/sd-form.configuration.ts","../../../projects/sd-angular/forms/models/src/sd-form-control.model.ts","../../../projects/sd-angular/forms/models/src/sd-custom-validator.model.ts","../../../projects/sd-angular/forms/models/sd-angular-core-forms-models.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nexport interface ISdFormConfiguration {\r\n  appearance?: MatFormFieldAppearance;\r\n}\r\n\r\nexport const SD_FORM_CONFIGURATION = new InjectionToken<ISdFormConfiguration>('sd.form.configuration');\r\n","import { FormControl, AsyncValidatorFn, ValidatorFn, FormControlOptions, FormControlState } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\n\r\nexport class SdFormControl extends FormControl {\r\n  sdChanges: Subject<boolean> = new Subject<boolean>();\r\n  untouchChanges: Subject<boolean> = new Subject<boolean>();\r\n  touchChanges: Subject<boolean> = new Subject<boolean>();\r\n  pristineChanges: Subject<boolean> = new Subject<boolean>();\r\n  constructor(\r\n    formState?: FormControlState<any>,\r\n    validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,\r\n    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null\r\n  ) {\r\n    super(formState, validatorOrOpts, asyncValidator);\r\n  }\r\n\r\n  override markAsUntouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\r\n    super.markAsUntouched(opts);\r\n    this.untouchChanges.next(true);\r\n    this.sdChanges.next(true);\r\n  }\r\n\r\n  override markAsTouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\r\n    super.markAsTouched(opts);\r\n    this.touchChanges.next(true);\r\n    this.sdChanges.next(true);\r\n  }\r\n\r\n  override markAsPristine(opts?: { onlySelf?: boolean; emitEvent?: boolean }): void {\r\n    super.markAsPristine(opts);\r\n    this.pristineChanges.next(true);\r\n    this.sdChanges.next(true);\r\n  }\r\n}\r\n","import { AbstractControl, AsyncValidatorFn } from '@angular/forms';\r\n\r\nexport type SdCustomValidator = (value: any) => string | Promise<string>;\r\nexport const HandleSdCustomValidator = (func: SdCustomValidator): AsyncValidatorFn => {\r\n  return async (c: AbstractControl): Promise<Record<string, any> | null> => {    \r\n    const value = c.value===0 ? c.value : c.value || null;\r\n    if (func && typeof func === 'function') {\r\n      const result = func(value);\r\n      if (result instanceof Promise) {\r\n        const message = await result;\r\n        if (message) {\r\n          return {\r\n            customValidator: message,\r\n          };\r\n        }\r\n        return null;\r\n      }\r\n      if (result) {\r\n        return {\r\n          customValidator: result,\r\n        };\r\n      }\r\n      return null;\r\n    }\r\n    return null;\r\n  };\r\n};\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,qBAAqB,GAAG,IAAI,cAAc,CAAuB,uBAAuB;;ACJ/F,MAAO,aAAc,SAAQ,WAAW,CAAA;AAC5C,IAAA,SAAS,GAAqB,IAAI,OAAO,EAAW;AACpD,IAAA,cAAc,GAAqB,IAAI,OAAO,EAAW;AACzD,IAAA,YAAY,GAAqB,IAAI,OAAO,EAAW;AACvD,IAAA,eAAe,GAAqB,IAAI,OAAO,EAAW;AAC1D,IAAA,WAAA,CACE,SAAiC,EACjC,eAAyE,EACzE,cAA6D,EAAA;AAE7D,QAAA,KAAK,CAAC,SAAS,EAAE,eAAe,EAAE,cAAc,CAAC;IACnD;AAES,IAAA,eAAe,CAAC,IAAkD,EAAA;AACzE,QAAA,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAES,IAAA,aAAa,CAAC,IAAkD,EAAA;AACvE,QAAA,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAES,IAAA,cAAc,CAAC,IAAkD,EAAA;AACxE,QAAA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AACD;;AC9BM,MAAM,uBAAuB,GAAG,CAAC,IAAuB,KAAsB;AACnF,IAAA,OAAO,OAAO,CAAkB,KAAyC;QACvE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,KAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,IAAI;AACrD,QAAA,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,MAAM,YAAY,OAAO,EAAE;AAC7B,gBAAA,MAAM,OAAO,GAAG,MAAM,MAAM;gBAC5B,IAAI,OAAO,EAAE;oBACX,OAAO;AACL,wBAAA,eAAe,EAAE,OAAO;qBACzB;gBACH;AACA,gBAAA,OAAO,IAAI;YACb;YACA,IAAI,MAAM,EAAE;gBACV,OAAO;AACL,oBAAA,eAAe,EAAE,MAAM;iBACxB;YACH;AACA,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AACH;;AC1BA;;AAEG;;;;"}

package/fesm2022/sd-angular-core-forms-radio.mjs

@@ -173,10 +173,10 @@ class SdRadio {
     reValidate = () => {
         this.formControl.updateValueAndValidity({ emitEvent: true });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdRadio, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdRadio, isStandalone: true, selector: "sd-radio", inputs: { _autoId: ["autoId", "_autoId"], name: "name", form: "form", label: "label", placeholder: "placeholder", _display: ["display", "_display"], model: "model", pItems: ["items", "pItems"], valueField: "valueField", displayField: "displayField", _required: ["required", "_required"], _inlineError: ["inlineError", "_inlineError"], disabled: "disabled", _viewed: ["viewed", "_viewed"], hyperlink: "hyperlink" }, outputs: { modelChange: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection" }, queries: [{ propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true }], ngImport: i0, template: "@if (viewed) {\r\n  @if (sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n  @if (hyperlink) {\r\n    <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n    <a [sdHref]=\"hyperlink\">{{ viewedText }}</a>\r\n  } @else {\r\n    <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n    <div class=\"T14M\">{{ viewedText | sdEmpty }}</div>\r\n  }\r\n} @else {\r\n  <section [ngClass]=\"{ 'c-section': display === 'row' }\">\r\n    @if (sdLabelDef?.templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n    } @else if (label) {\r\n      <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n    }\r\n    <mat-radio-group\r\n      [class.c-radio-group-column]=\"display === 'column'\"\r\n      [class.c-radio-group-row]=\"display === 'row'\"\r\n      [formControl]=\"formControl\"\r\n      [attr.data-autoId]=\"autoId\">\r\n      @for (item of items; track item[valueField]) {\r\n        <mat-radio-button color=\"primary\" [class.m-0]=\"display === 'column'\" [class.mr-16]=\"display === 'row'\" [value]=\"item[valueField]\">\r\n          {{ item[displayField] }}\r\n        </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n    @if (formControl.errors?.['required'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      </mat-error>\r\n    } @else if (formControl.errors?.['inlineError'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ inlineError }}\r\n      </mat-error>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}:host ::ng-deep label.mdc-label{margin-bottom:0}.c-section{align-content:center;align-items:center}.c-radio-group-column{flex:1;display:flex;flex-direction:column;align-items:flex-start}.c-radio-group-row{flex:1;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "directive", type: SdHrefDirective, selector: "a[sdHref]", inputs: ["sdHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdRadio, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdRadio, isStandalone: true, selector: "sd-radio", inputs: { _autoId: ["autoId", "_autoId"], name: "name", form: "form", label: "label", placeholder: "placeholder", _display: ["display", "_display"], model: "model", pItems: ["items", "pItems"], valueField: "valueField", displayField: "displayField", _required: ["required", "_required"], _inlineError: ["inlineError", "_inlineError"], disabled: "disabled", _viewed: ["viewed", "_viewed"], hyperlink: "hyperlink" }, outputs: { modelChange: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection" }, queries: [{ propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true }], ngImport: i0, template: "@if (viewed) {\r\n  @if (sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n  @if (hyperlink) {\r\n    <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n    <a [sdHref]=\"hyperlink\">{{ viewedText }}</a>\r\n  } @else {\r\n    <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n    <div class=\"T14M\">{{ viewedText | sdEmpty }}</div>\r\n  }\r\n} @else {\r\n  <section [ngClass]=\"{ 'c-section': display === 'row' }\">\r\n    @if (sdLabelDef?.templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n    } @else if (label) {\r\n      <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n    }\r\n    <mat-radio-group\r\n      [class.c-radio-group-column]=\"display === 'column'\"\r\n      [class.c-radio-group-row]=\"display === 'row'\"\r\n      [formControl]=\"formControl\"\r\n      [attr.data-autoId]=\"autoId\">\r\n      @for (item of items; track item[valueField]) {\r\n        <mat-radio-button color=\"primary\" [class.m-0]=\"display === 'column'\" [class.mr-16]=\"display === 'row'\" [value]=\"item[valueField]\">\r\n          {{ item[displayField] }}\r\n        </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n    @if (formControl.errors?.['required'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      </mat-error>\r\n    } @else if (formControl.errors?.['inlineError'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ inlineError }}\r\n      </mat-error>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}:host ::ng-deep label.mdc-label{margin-bottom:0}.c-section{align-content:center;align-items:center}.c-radio-group-column{flex:1;display:flex;flex-direction:column;align-items:flex-start}.c-radio-group-row{flex:1;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "directive", type: SdHrefDirective, selector: "a[sdHref]", inputs: ["sdHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdRadio, decorators: [{
             type: Component,
             args: [{ selector: 'sd-radio', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatTooltipModule, MatFormFieldModule, MatIconModule, MatRadioModule, SdLabel, SdEmptyPipe, SdHrefDirective], template: "@if (viewed) {\r\n  @if (sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n  @if (hyperlink) {\r\n    <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n    <a [sdHref]=\"hyperlink\">{{ viewedText }}</a>\r\n  } @else {\r\n    <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n    <div class=\"T14M\">{{ viewedText | sdEmpty }}</div>\r\n  }\r\n} @else {\r\n  <section [ngClass]=\"{ 'c-section': display === 'row' }\">\r\n    @if (sdLabelDef?.templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n    } @else if (label) {\r\n      <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n    }\r\n    <mat-radio-group\r\n      [class.c-radio-group-column]=\"display === 'column'\"\r\n      [class.c-radio-group-row]=\"display === 'row'\"\r\n      [formControl]=\"formControl\"\r\n      [attr.data-autoId]=\"autoId\">\r\n      @for (item of items; track item[valueField]) {\r\n        <mat-radio-button color=\"primary\" [class.m-0]=\"display === 'column'\" [class.mr-16]=\"display === 'row'\" [value]=\"item[valueField]\">\r\n          {{ item[displayField] }}\r\n        </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n    @if (formControl.errors?.['required'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ 'Vui l\u00F2ng nh\u1EADp th\u00F4ng tin' }}\r\n      </mat-error>\r\n    } @else if (formControl.errors?.['inlineError'] && formControl.touched) {\r\n      <mat-error>\r\n        {{ inlineError }}\r\n      </mat-error>\r\n    }\r\n  </section>\r\n}\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}:host ::ng-deep label.mdc-label{margin-bottom:0}.c-section{align-content:center;align-items:center}.c-radio-group-column{flex:1;display:flex;flex-direction:column;align-items:flex-start}.c-radio-group-row{flex:1;display:flex;flex-direction:row;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _autoId: [{