@educarehq/solaris-components 0.3.0 → 0.3.1

package/fesm2022/educarehq-solaris-components.mjs

@@ -4440,12 +4440,12 @@ class FormField {
     label = '';
     hintKey = '';
     labelKey = '';
-    invalid = null;
     radius = 'sm';
     appearance = 'filled';
     showErrors = 'dirtyOrTouched';
     _tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : []));
     customErrorKey = input('', ...(ngDevMode ? [{ debugName: "customErrorKey" }] : []));
+    invalid = input(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
     customErrorParams = input(undefined, ...(ngDevMode ? [{ debugName: "customErrorParams" }] : []));
     constructor() {
         effect((onCleanup) => {
@@ -4483,8 +4483,9 @@ class FormField {
     showPasswordToggle = computed(() => !!this.field.password(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
     invalidComputed = computed(() => {
         this._tick();
-        if (this.invalid !== null)
-            return this.invalid;
+        const invalid = this.invalid();
+        if (invalid !== null)
+            return invalid;
         const c = this.field.control();
         if (!c)
             return false;
@@ -4529,7 +4530,7 @@ class FormField {
         return 'solaris.validation.invalid';
     }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             SolarisFormFieldController,
             { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
         ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\" [attr.data-appearance]=\"appearance\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\" [attr.data-radius]=\"radius\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n          @if (showPasswordToggle()) {\r\n            <solaris-password-toggle></solaris-password-toggle>\r\n          }\r\n\r\n          @if (invalidComputed()) {\r\n            <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-warning-circle\"></i>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted))}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix(in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted))}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:var(--solaris-fs-18)}.solaris-form-field__prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field__body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field__control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field__status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field__status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -4554,15 +4555,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], labelKey: [{
                 type: Input
-            }], invalid: [{
-                type: Input
             }], radius: [{
                 type: Input
             }], appearance: [{
                 type: Input
             }], showErrors: [{
                 type: Input
-            }], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
+            }], customErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorKey", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], customErrorParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "customErrorParams", required: false }] }] } });
 
 class SolarisSelect {
     destroyRef = inject(DestroyRef);