@educarehq/solaris-components 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4362,11 +4362,11 @@ class PasswordToggle {
|
|
|
4362
4362
|
get ariaLabelHide() { return 'Hide password'; }
|
|
4363
4363
|
get ariaLabelShow() { return 'Show password'; }
|
|
4364
4364
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PasswordToggle, isStandalone: true, selector: "solaris-password-toggle", host: { properties: { "attr.solaris-suffix": "this.solarisSuffix" } }, ngImport: i0, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{
|
|
4365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PasswordToggle, isStandalone: true, selector: "solaris-password-toggle", host: { properties: { "attr.solaris-suffix": "this.solarisSuffix" } }, ngImport: i0, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-18)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4366
4366
|
}
|
|
4367
4367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, decorators: [{
|
|
4368
4368
|
type: Component,
|
|
4369
|
-
args: [{ selector: 'solaris-password-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{
|
|
4369
|
+
args: [{ selector: 'solaris-password-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-18)}\n"] }]
|
|
4370
4370
|
}], propDecorators: { solarisSuffix: [{
|
|
4371
4371
|
type: HostBinding,
|
|
4372
4372
|
args: ['attr.solaris-suffix']
|
|
@@ -4548,14 +4548,14 @@ class FormField {
|
|
|
4548
4548
|
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: [
|
|
4549
4549
|
SolarisFormFieldController,
|
|
4550
4550
|
{ provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
|
|
4551
|
-
], 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 [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\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() || disabledComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n @if (disabledComputed()) {\r\n <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n <i class=\"ph ph-lock-simple\"></i>\r\n </span>\r\n } @else {\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 }\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;
|
|
4551
|
+
], 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 [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\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() || disabledComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n @if (disabledComputed()) {\r\n <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n <i class=\"ph ph-lock-simple\"></i>\r\n </span>\r\n } @else {\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 }\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;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(: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}.solaris-form-field[data-disabled=true] .solaris-form-field__frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__frame *,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__prefix,.solaris-form-field[data-disabled=true] .solaris-form-field__suffix,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field[data-disabled=true] .solaris-form-field__frame,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot>*,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot :is(input,textarea,select,button){cursor:not-allowed!important}.solaris-form-field__status--disabled i{line-height:1;font-size:var(--solaris-fs-18)}\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 });
|
|
4552
4552
|
}
|
|
4553
4553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
|
|
4554
4554
|
type: Component,
|
|
4555
4555
|
args: [{ selector: 'solaris-form-field', standalone: true, imports: [PasswordToggle, FieldErrorComponent, SolarisTranslationPipe], providers: [
|
|
4556
4556
|
SolarisFormFieldController,
|
|
4557
4557
|
{ provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
|
|
4558
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\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() || disabledComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n @if (disabledComputed()) {\r\n <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n <i class=\"ph ph-lock-simple\"></i>\r\n </span>\r\n } @else {\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 }\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;
|
|
4558
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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 [attr.data-disabled]=\"disabledComputed() ? 'true' : null\">\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() || disabledComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n @if (disabledComputed()) {\r\n <span class=\"solaris-form-field__status solaris-form-field__status--disabled\" aria-hidden=\"true\">\r\n <i class=\"ph ph-lock-simple\"></i>\r\n </span>\r\n } @else {\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 }\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;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(: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}.solaris-form-field[data-disabled=true] .solaris-form-field__frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__frame *,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field__prefix,.solaris-form-field[data-disabled=true] .solaris-form-field__suffix,.solaris-form-field[data-disabled=true] .solaris-form-field__label,.solaris-form-field[data-disabled=true] .solaris-form-field__hint{color:var(--solaris-color-text-muted)}.solaris-form-field__status--disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field[data-disabled=true] .solaris-form-field__frame,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot>*,.solaris-form-field[data-disabled=true] .solaris-form-field__control-slot :is(input,textarea,select,button){cursor:not-allowed!important}.solaris-form-field__status--disabled i{line-height:1;font-size:var(--solaris-fs-18)}\n"] }]
|
|
4559
4559
|
}], ctorParameters: () => [], propDecorators: { prefix: [{
|
|
4560
4560
|
type: ContentChild,
|
|
4561
4561
|
args: [SolarisPrefixDirective]
|