@educarehq/solaris-components 0.4.2 → 0.4.4
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.
|
@@ -4256,7 +4256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4256
4256
|
}] } });
|
|
4257
4257
|
|
|
4258
4258
|
class SolarisPhoneInput {
|
|
4259
|
+
field = inject(SolarisFormFieldController, { optional: true });
|
|
4259
4260
|
renderer = inject(Renderer2);
|
|
4261
|
+
injector = inject(Injector);
|
|
4260
4262
|
marker = '';
|
|
4261
4263
|
inputRef;
|
|
4262
4264
|
set placeholder(v) {
|
|
@@ -4281,6 +4283,12 @@ class SolarisPhoneInput {
|
|
|
4281
4283
|
onChange = () => { };
|
|
4282
4284
|
onTouched = () => { };
|
|
4283
4285
|
onValidatorChange;
|
|
4286
|
+
constructor() {
|
|
4287
|
+
queueMicrotask(() => {
|
|
4288
|
+
const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
|
|
4289
|
+
this.field?.registerControl(ngControl);
|
|
4290
|
+
});
|
|
4291
|
+
}
|
|
4284
4292
|
ngAfterViewInit() {
|
|
4285
4293
|
const el = this.el;
|
|
4286
4294
|
if (!el)
|
|
@@ -4583,7 +4591,7 @@ class SolarisPhoneInput {
|
|
|
4583
4591
|
useExisting: forwardRef(() => SolarisPhoneInput),
|
|
4584
4592
|
multi: true,
|
|
4585
4593
|
},
|
|
4586
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input
|
|
4594
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input #input solaris-input type=\"tel\" [disabled]=\"_disabled\" (focus)=\"onFocus()\" (input)=\"onInput()\"\r\n (blur)=\"onBlur()\" data-bwignore=\"true\"/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{padding:0;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}:host ::ng-deep .iti__selected-country-primary{padding:0 .5rem 0 .6rem}\n"], dependencies: [{ kind: "directive", type: InputTextDirective, selector: "input[solaris-input],textarea[solaris-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4587
4595
|
}
|
|
4588
4596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPhoneInput, decorators: [{
|
|
4589
4597
|
type: Component,
|
|
@@ -4598,8 +4606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4598
4606
|
useExisting: forwardRef(() => SolarisPhoneInput),
|
|
4599
4607
|
multi: true,
|
|
4600
4608
|
},
|
|
4601
|
-
], imports: [InputTextDirective], template: "<input
|
|
4602
|
-
}], propDecorators: { marker: [{
|
|
4609
|
+
], imports: [InputTextDirective], template: "<input #input solaris-input type=\"tel\" [disabled]=\"_disabled\" (focus)=\"onFocus()\" (input)=\"onInput()\"\r\n (blur)=\"onBlur()\" data-bwignore=\"true\"/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{padding:0;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}:host ::ng-deep .iti__selected-country-primary{padding:0 .5rem 0 .6rem}\n"] }]
|
|
4610
|
+
}], ctorParameters: () => [], propDecorators: { marker: [{
|
|
4603
4611
|
type: HostBinding,
|
|
4604
4612
|
args: ['attr.solaris-phone-input']
|
|
4605
4613
|
}], inputRef: [{
|
|
@@ -4803,14 +4811,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4803
4811
|
const SOLARIS_FORM_FIELD_CONTROLLER = new InjectionToken('SOLARIS_FORM_FIELD_CONTROLLER');
|
|
4804
4812
|
|
|
4805
4813
|
class PasswordToggle {
|
|
4814
|
+
translationService = inject(SOLARIS_TRANSLATION);
|
|
4806
4815
|
solarisSuffix = '';
|
|
4807
4816
|
field = inject(SOLARIS_FORM_FIELD_CONTROLLER, { optional: true });
|
|
4808
4817
|
visible = () => this.field?.passwordVisible() ?? false;
|
|
4809
4818
|
toggle() {
|
|
4810
4819
|
this.field?.togglePasswordVisibility();
|
|
4811
4820
|
}
|
|
4812
|
-
get ariaLabelHide() { return '
|
|
4813
|
-
get ariaLabelShow() { return '
|
|
4821
|
+
get ariaLabelHide() { return this.translationService.translate('ui.solaris.password.aria.hidePassword'); }
|
|
4822
|
+
get ariaLabelShow() { return this.translationService.translate('ui.solaris.password.aria.showPassword'); }
|
|
4814
4823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4815
4824
|
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 });
|
|
4816
4825
|
}
|