@praxisui/dynamic-fields 1.0.0-beta.57 → 1.0.0-beta.59
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.
|
@@ -3475,7 +3475,7 @@ class PasswordInputComponent extends SimpleBaseInputComponent {
|
|
|
3475
3475
|
revealIcon = computed(() => this.reveal()
|
|
3476
3476
|
? this.metadata()?.revealToggle?.iconHide || 'visibility_off'
|
|
3477
3477
|
: this.metadata()?.revealToggle?.iconShow || 'visibility', ...(ngDevMode ? [{ debugName: "revealIcon" }] : []));
|
|
3478
|
-
revealAriaLabel = computed(() => this.metadata()?.revealToggle?.ariaLabel ||
|
|
3478
|
+
revealAriaLabel = computed(() => this.revealLabel() || this.metadata()?.revealToggle?.ariaLabel || 'Toggle password visibility', ...(ngDevMode ? [{ debugName: "revealAriaLabel" }] : []));
|
|
3479
3479
|
revealTooltip = computed(() => this.revealLabel(), ...(ngDevMode ? [{ debugName: "revealTooltip" }] : []));
|
|
3480
3480
|
// Praxis Field States
|
|
3481
3481
|
readonlyMode = false;
|
|
@@ -3504,6 +3504,14 @@ class PasswordInputComponent extends SimpleBaseInputComponent {
|
|
|
3504
3504
|
return;
|
|
3505
3505
|
this.reveal.update((v) => !v);
|
|
3506
3506
|
}
|
|
3507
|
+
onRevealMouseDown(event) {
|
|
3508
|
+
event.preventDefault();
|
|
3509
|
+
}
|
|
3510
|
+
onRevealToggleClick(event) {
|
|
3511
|
+
event.preventDefault();
|
|
3512
|
+
event.stopPropagation();
|
|
3513
|
+
this.toggleReveal();
|
|
3514
|
+
}
|
|
3507
3515
|
/** Applies typed metadata to the component. */
|
|
3508
3516
|
setInputMetadata(metadata) {
|
|
3509
3517
|
this.setMetadata(metadata);
|
|
@@ -3579,10 +3587,12 @@ class PasswordInputComponent extends SimpleBaseInputComponent {
|
|
|
3579
3587
|
|
|
3580
3588
|
@if (revealToggleEnabled()) {
|
|
3581
3589
|
<button
|
|
3590
|
+
mat-icon-button
|
|
3582
3591
|
matSuffix
|
|
3583
3592
|
type="button"
|
|
3584
3593
|
class="pdx-reveal-toggle"
|
|
3585
|
-
(
|
|
3594
|
+
(mousedown)="onRevealMouseDown($event)"
|
|
3595
|
+
(click)="onRevealToggleClick($event)"
|
|
3586
3596
|
[disabled]="!canToggleReveal()"
|
|
3587
3597
|
[attr.aria-disabled]="!canToggleReveal() ? 'true' : null"
|
|
3588
3598
|
[attr.aria-label]="revealAriaLabel()"
|
|
@@ -3625,7 +3635,7 @@ class PasswordInputComponent extends SimpleBaseInputComponent {
|
|
|
3625
3635
|
</mat-hint>
|
|
3626
3636
|
}
|
|
3627
3637
|
</mat-form-field>
|
|
3628
|
-
`, isInline: true, styles: [".pdx-reveal-toggle{min-width:
|
|
3638
|
+
`, isInline: true, styles: [".pdx-reveal-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:32px;width:32px;height:32px;padding:0;line-height:1;font-size:.75rem;color:inherit}.pdx-reveal-toggle mat-icon{font-size:20px;width:20px;height:20px}.pdx-reveal-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.pdx-reveal-toggle:disabled{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3629
3639
|
}
|
|
3630
3640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
3631
3641
|
type: Component,
|
|
@@ -3676,10 +3686,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3676
3686
|
|
|
3677
3687
|
@if (revealToggleEnabled()) {
|
|
3678
3688
|
<button
|
|
3689
|
+
mat-icon-button
|
|
3679
3690
|
matSuffix
|
|
3680
3691
|
type="button"
|
|
3681
3692
|
class="pdx-reveal-toggle"
|
|
3682
|
-
(
|
|
3693
|
+
(mousedown)="onRevealMouseDown($event)"
|
|
3694
|
+
(click)="onRevealToggleClick($event)"
|
|
3683
3695
|
[disabled]="!canToggleReveal()"
|
|
3684
3696
|
[attr.aria-disabled]="!canToggleReveal() ? 'true' : null"
|
|
3685
3697
|
[attr.aria-label]="revealAriaLabel()"
|
|
@@ -3745,7 +3757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
|
|
|
3745
3757
|
'[attr.data-field-type]': '"password"',
|
|
3746
3758
|
'[attr.data-field-name]': 'metadata()?.name',
|
|
3747
3759
|
'[attr.data-component-id]': 'componentId()',
|
|
3748
|
-
}, styles: [".pdx-reveal-toggle{min-width:
|
|
3760
|
+
}, styles: [".pdx-reveal-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:32px;width:32px;height:32px;padding:0;line-height:1;font-size:.75rem;color:inherit}.pdx-reveal-toggle mat-icon{font-size:20px;width:20px;height:20px}.pdx-reveal-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.pdx-reveal-toggle:disabled{cursor:default;opacity:.5}\n"] }]
|
|
3749
3761
|
}], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
|
|
3750
3762
|
type: Input
|
|
3751
3763
|
}], disabledMode: [{
|