@raintonic/formaui 0.3.1 → 0.9.0
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.
- package/CHANGELOG.md +80 -35
- package/README.md +22 -26
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs +39 -41
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs +207 -3
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs +27 -2
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs +5 -12
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-accordion.mjs +8 -5
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +16 -2
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +255 -462
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs +34 -59
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button.mjs +15 -20
- package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-chip.mjs +97 -0
- package/fesm2022/raintonic-formaui-components-chip.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-data-table.mjs +69 -29
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +223 -144
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs +888 -0
- package/fesm2022/raintonic-formaui-components-dropdown-menu.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs +774 -0
- package/fesm2022/raintonic-formaui-components-dual-tier-navigation.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +81 -50
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +47 -12
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -12
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +35 -110
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +3 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +3 -2
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +5 -6
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +257 -412
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs +525 -0
- package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +50 -45
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-strength-meter.mjs +149 -0
- package/fesm2022/raintonic-formaui-components-strength-meter.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-tab.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +194 -154
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs +302 -0
- package/fesm2022/raintonic-formaui-components-toggle-group.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +10 -4
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-topbar.mjs +60 -0
- package/fesm2022/raintonic-formaui-components-topbar.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +59 -69
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +31 -5
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-core.mjs +279 -1
- package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-breakpoint.mjs +93 -0
- package/fesm2022/raintonic-formaui-services-breakpoint.mjs.map +1 -0
- package/fesm2022/raintonic-formaui-services-dialog.mjs +314 -16
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-notification.mjs +93 -29
- package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-theme.mjs +46 -196
- package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +2329 -450
- package/llms.txt +36 -33
- package/package.json +42 -19
- package/styles/fonts/Geist-Bold.woff2 +0 -0
- package/styles/fonts/Geist-Italic.woff2 +0 -0
- package/styles/fonts/Geist-Light.woff2 +0 -0
- package/styles/fonts/Geist-Medium.woff2 +0 -0
- package/styles/fonts/Geist-Regular.woff2 +0 -0
- package/styles/fonts/Geist-SemiBold.woff2 +0 -0
- package/styles/fonts/GeistMono-Regular.woff2 +0 -0
- package/styles/generated/_tokens.scss +906 -0
- package/styles/index.scss +11 -10
- package/styles/partials/_brand.scss +46 -0
- package/styles/partials/_constants.scss +22 -20
- package/styles/partials/_fonts.scss +54 -10
- package/styles/partials/_grid.scss +29 -18
- package/styles/partials/_mixins.scss +69 -27
- package/styles/partials/_motion.scss +28 -33
- package/styles/partials/_theme.scss +28 -255
- package/styles/partials/_type.scss +117 -0
- package/styles/partials/_typography.scss +45 -45
- package/styles/partials/_utilities.scss +198 -98
- package/styles/partials/components/_button.scss +144 -75
- package/styles/partials/components/_dialog.scss +181 -180
- package/styles/partials/components/_overlay.scss +87 -87
- package/styles/partials/themes/_dark.scss +3 -268
- package/styles/partials/themes/_light.scss +4 -268
- package/styles/styles.css +7744 -0
- package/styles/styles.entry.scss +3 -0
- package/styles/utilities.css +4802 -0
- package/styles/utilities.entry.scss +3 -0
- package/types/raintonic-formaui-cdk-drag-drop.d.ts +0 -1
- package/types/raintonic-formaui-cdk-drag-drop.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-form-field.d.ts +118 -2
- package/types/raintonic-formaui-cdk-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-overlay.d.ts +2 -0
- package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
- package/types/raintonic-formaui-cdk-virtual-scroll.d.ts +0 -1
- package/types/raintonic-formaui-cdk-virtual-scroll.d.ts.map +1 -1
- package/types/raintonic-formaui-components-accordion.d.ts +1 -1
- package/types/raintonic-formaui-components-accordion.d.ts.map +1 -1
- package/types/raintonic-formaui-components-alert.d.ts +6 -1
- package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
- package/types/raintonic-formaui-components-autocomplete.d.ts +73 -116
- package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
- package/types/raintonic-formaui-components-avatar.d.ts +13 -31
- package/types/raintonic-formaui-components-avatar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-button.d.ts +4 -10
- package/types/raintonic-formaui-components-button.d.ts.map +1 -1
- package/types/raintonic-formaui-components-chip.d.ts +43 -0
- package/types/raintonic-formaui-components-chip.d.ts.map +1 -0
- package/types/raintonic-formaui-components-data-table.d.ts +48 -11
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-date-picker.d.ts +59 -23
- package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-dropdown-menu.d.ts +394 -0
- package/types/raintonic-formaui-components-dropdown-menu.d.ts.map +1 -0
- package/types/raintonic-formaui-components-dual-tier-navigation.d.ts +87 -0
- package/types/raintonic-formaui-components-dual-tier-navigation.d.ts.map +1 -0
- package/types/raintonic-formaui-components-form-field.d.ts +51 -21
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +20 -11
- package/types/raintonic-formaui-components-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-number-input.d.ts +5 -3
- package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-password-input.d.ts +18 -32
- package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-popover.d.ts.map +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-radio.d.ts +1 -2
- package/types/raintonic-formaui-components-radio.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts +107 -76
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts +223 -0
- package/types/raintonic-formaui-components-sidebar-nav-menu.d.ts.map +1 -0
- package/types/raintonic-formaui-components-stepper.d.ts +4 -2
- package/types/raintonic-formaui-components-stepper.d.ts.map +1 -1
- package/types/raintonic-formaui-components-strength-meter.d.ts +78 -0
- package/types/raintonic-formaui-components-strength-meter.d.ts.map +1 -0
- package/types/raintonic-formaui-components-time-picker.d.ts +44 -24
- package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle-group.d.ts +100 -0
- package/types/raintonic-formaui-components-toggle-group.d.ts.map +1 -0
- package/types/raintonic-formaui-components-tooltip.d.ts +2 -1
- package/types/raintonic-formaui-components-tooltip.d.ts.map +1 -1
- package/types/raintonic-formaui-components-topbar.d.ts +48 -0
- package/types/raintonic-formaui-components-topbar.d.ts.map +1 -0
- package/types/raintonic-formaui-components-tree-select.d.ts +25 -9
- package/types/raintonic-formaui-components-tree-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree.d.ts +12 -1
- package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
- package/types/raintonic-formaui-core.d.ts +243 -5
- package/types/raintonic-formaui-core.d.ts.map +1 -1
- package/types/raintonic-formaui-services-breakpoint.d.ts +44 -0
- package/types/raintonic-formaui-services-breakpoint.d.ts.map +1 -0
- package/types/raintonic-formaui-services-dialog.d.ts +141 -2
- package/types/raintonic-formaui-services-dialog.d.ts.map +1 -1
- package/types/raintonic-formaui-services-notification.d.ts +24 -2
- package/types/raintonic-formaui-services-notification.d.ts.map +1 -1
- package/types/raintonic-formaui-services-theme.d.ts +13 -103
- package/types/raintonic-formaui-services-theme.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
- package/fesm2022/raintonic-formaui-components-big-menu.mjs +0 -86
- package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-menu.mjs +0 -896
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-sidebar.mjs +0 -275
- package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +0 -1
- package/fesm2022/raintonic-formaui-components-tag.mjs +0 -95
- package/fesm2022/raintonic-formaui-components-tag.mjs.map +0 -1
- package/styles/_fonts-entry.scss +0 -3
- package/styles/fonts/inter-tight-latin-italic.woff2 +0 -0
- package/styles/fonts/inter-tight-latin.woff2 +0 -0
- package/types/raintonic-formaui-components-big-menu.d.ts +0 -73
- package/types/raintonic-formaui-components-big-menu.d.ts.map +0 -1
- package/types/raintonic-formaui-components-menu.d.ts +0 -403
- package/types/raintonic-formaui-components-menu.d.ts.map +0 -1
- package/types/raintonic-formaui-components-sidebar.d.ts +0 -185
- package/types/raintonic-formaui-components-sidebar.d.ts.map +0 -1
- package/types/raintonic-formaui-components-tag.d.ts +0 -43
- package/types/raintonic-formaui-components-tag.d.ts.map +0 -1
|
@@ -1,26 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, signal,
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, computed, input, booleanAttribute, signal, viewChild, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import { Subject } from 'rxjs';
|
|
6
|
-
import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
|
|
6
|
+
import { FuiIntlBase, DefaultErrorStateMatcher, noop, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
|
|
7
7
|
import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
|
|
8
|
+
import { FuiInputDirective } from '@raintonic/formaui/components/input';
|
|
8
9
|
import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
9
10
|
|
|
10
|
-
const DEFAULT_STRENGTH_CONFIG = {
|
|
11
|
-
minLength: 8,
|
|
12
|
-
requireUppercase: true,
|
|
13
|
-
requireLowercase: true,
|
|
14
|
-
requireNumbers: true,
|
|
15
|
-
requireSpecial: false,
|
|
16
|
-
};
|
|
17
|
-
|
|
18
11
|
class FuiPasswordInputIntl extends FuiIntlBase {
|
|
19
12
|
showAriaLabel = 'Show password';
|
|
20
13
|
hideAriaLabel = 'Hide password';
|
|
21
|
-
strengthAriaLabel(level) {
|
|
22
|
-
return `Password strength: ${level}`;
|
|
23
|
-
}
|
|
24
14
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
25
15
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputIntl, providedIn: 'root' });
|
|
26
16
|
}
|
|
@@ -32,12 +22,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
32
22
|
/**
|
|
33
23
|
* # FuiPasswordInputComponent
|
|
34
24
|
*
|
|
35
|
-
* A password input component with visibility toggle
|
|
25
|
+
* A password input component with visibility toggle.
|
|
36
26
|
* Integrates with fui-form-field and Angular Forms.
|
|
37
27
|
*
|
|
38
28
|
* ## Features
|
|
39
29
|
* - Password visibility toggle
|
|
40
|
-
* - Optional password strength meter
|
|
41
30
|
* - Full Reactive Forms integration (ControlValueAccessor)
|
|
42
31
|
* - FuiFormFieldControl integration for fui-form-field
|
|
43
32
|
* - Error state handling
|
|
@@ -54,19 +43,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
54
43
|
* ```
|
|
55
44
|
*
|
|
56
45
|
* ### With Strength Meter
|
|
46
|
+
* Wire the strength meter independently:
|
|
57
47
|
* ```html
|
|
58
48
|
* <fui-form-field>
|
|
59
49
|
* <fui-label>Password</fui-label>
|
|
60
|
-
* <fui-password-input
|
|
61
|
-
* formControlName="password"
|
|
62
|
-
* [showStrengthMeter]="true"
|
|
63
|
-
* ></fui-password-input>
|
|
50
|
+
* <fui-password-input formControlName="password"></fui-password-input>
|
|
64
51
|
* </fui-form-field>
|
|
52
|
+
* <fui-strength-meter [value]="passwordControl.value ?? ''"></fui-strength-meter>
|
|
65
53
|
* ```
|
|
66
54
|
*/
|
|
67
55
|
class FuiPasswordInputComponent {
|
|
68
56
|
intl = inject(FuiPasswordInputIntl);
|
|
69
57
|
_cdr = inject(ChangeDetectorRef);
|
|
58
|
+
empty = computed(() => !this._value(), ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
|
|
70
59
|
// Static properties
|
|
71
60
|
static nextId = 0;
|
|
72
61
|
controlType = 'fui-password-input';
|
|
@@ -74,46 +63,27 @@ class FuiPasswordInputComponent {
|
|
|
74
63
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
75
64
|
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
|
|
76
65
|
transform: booleanAttribute });
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
strengthConfig = input(DEFAULT_STRENGTH_CONFIG, ...(ngDevMode ? [{ debugName: "strengthConfig" }] : /* istanbul ignore next */ []));
|
|
66
|
+
readOnlyInput = input(false, { ...(ngDevMode ? { debugName: "readOnlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
|
|
67
|
+
transform: booleanAttribute });
|
|
80
68
|
errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
|
|
81
69
|
// Internal state
|
|
82
70
|
_passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "_passwordVisible" }] : /* istanbul ignore next */ []));
|
|
71
|
+
passwordVisible = this._passwordVisible.asReadonly();
|
|
83
72
|
_value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
73
|
+
value = this._value.asReadonly();
|
|
84
74
|
_focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
|
|
85
75
|
focused = this._focused.asReadonly();
|
|
86
76
|
_disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
|
|
87
77
|
_ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
|
|
78
|
+
_readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
|
|
88
79
|
_errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
|
|
89
80
|
errorState = this._errorState.asReadonly();
|
|
90
81
|
_required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
|
|
91
82
|
required = this._required.asReadonly();
|
|
92
83
|
// Computed
|
|
93
84
|
disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
85
|
+
readonly = computed(() => this.readOnlyInput() || this._readOnly(), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
94
86
|
_inputType = computed(() => (this._passwordVisible() ? 'text' : 'password'), ...(ngDevMode ? [{ debugName: "_inputType" }] : /* istanbul ignore next */ []));
|
|
95
|
-
value = this._value.asReadonly();
|
|
96
|
-
empty = computed(() => {
|
|
97
|
-
const v = this._value();
|
|
98
|
-
return !v || v.length === 0;
|
|
99
|
-
}, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
|
|
100
|
-
_strength = computed(() => {
|
|
101
|
-
return this._calculateStrength(this._value());
|
|
102
|
-
}, ...(ngDevMode ? [{ debugName: "_strength" }] : /* istanbul ignore next */ []));
|
|
103
|
-
_strengthPercent = computed(() => {
|
|
104
|
-
switch (this._strength()) {
|
|
105
|
-
case 'weak':
|
|
106
|
-
return 25;
|
|
107
|
-
case 'fair':
|
|
108
|
-
return 50;
|
|
109
|
-
case 'good':
|
|
110
|
-
return 75;
|
|
111
|
-
case 'strong':
|
|
112
|
-
return 100;
|
|
113
|
-
default:
|
|
114
|
-
return 0;
|
|
115
|
-
}
|
|
116
|
-
}, ...(ngDevMode ? [{ debugName: "_strengthPercent" }] : /* istanbul ignore next */ []));
|
|
117
87
|
// State changes subject for form field compatibility
|
|
118
88
|
stateChanges = new Subject();
|
|
119
89
|
_uid = `fui-password-input-${FuiPasswordInputComponent.nextId++}`;
|
|
@@ -129,37 +99,34 @@ class FuiPasswordInputComponent {
|
|
|
129
99
|
}
|
|
130
100
|
// ViewChild for input element
|
|
131
101
|
inputElement = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
|
|
102
|
+
// ViewChild for fuiInput directive — delegates readonly/disabled/aria/state to it
|
|
103
|
+
_fuiInput;
|
|
132
104
|
// ControlValueAccessor callbacks
|
|
133
|
-
_onChange =
|
|
134
|
-
|
|
135
|
-
};
|
|
136
|
-
_onTouched = () => {
|
|
137
|
-
/* noop */
|
|
138
|
-
};
|
|
105
|
+
_onChange = noop;
|
|
106
|
+
_onTouched = noop;
|
|
139
107
|
constructor() {
|
|
140
108
|
void Promise.resolve().then(() => {
|
|
141
109
|
if (this._ngControlRef.ngControl) {
|
|
142
110
|
this._ngControlRef.ngControl.valueAccessor = this;
|
|
143
111
|
}
|
|
144
112
|
});
|
|
145
|
-
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
146
|
-
|
|
113
|
+
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
|
|
114
|
+
this._cdr.markForCheck();
|
|
115
|
+
});
|
|
116
|
+
// Effect to emit state changes when any tracked signal updates
|
|
147
117
|
effect(() => {
|
|
148
|
-
// Track all reactive inputs and internal signals
|
|
149
118
|
this.placeholder();
|
|
150
119
|
this.disabledInput();
|
|
151
|
-
this.
|
|
152
|
-
this.
|
|
153
|
-
this.strengthConfig();
|
|
120
|
+
this.readOnlyInput();
|
|
121
|
+
this._readOnly();
|
|
154
122
|
this.errorStateMatcher();
|
|
155
|
-
this._passwordVisible();
|
|
156
123
|
this._value();
|
|
157
124
|
this._focused();
|
|
158
125
|
this._disabled();
|
|
159
126
|
this._ngControlDisabled();
|
|
160
127
|
this._required();
|
|
161
128
|
this._errorState();
|
|
162
|
-
|
|
129
|
+
this._passwordVisible();
|
|
163
130
|
this.stateChanges.next();
|
|
164
131
|
});
|
|
165
132
|
}
|
|
@@ -201,6 +168,7 @@ class FuiPasswordInputComponent {
|
|
|
201
168
|
}
|
|
202
169
|
setDescribedByIds(ids) {
|
|
203
170
|
this._ariaDescribedby = ids.length ? ids.join(' ') : null;
|
|
171
|
+
this._fuiInput?.setDescribedByIds(ids);
|
|
204
172
|
}
|
|
205
173
|
// Event handlers
|
|
206
174
|
_onInput(event) {
|
|
@@ -235,54 +203,8 @@ class FuiPasswordInputComponent {
|
|
|
235
203
|
blur() {
|
|
236
204
|
this.inputElement()?.nativeElement.blur();
|
|
237
205
|
}
|
|
238
|
-
// Strength calculation
|
|
239
|
-
_calculateStrength(password) {
|
|
240
|
-
if (!password || password.length === 0) {
|
|
241
|
-
return 'weak';
|
|
242
|
-
}
|
|
243
|
-
const config = this.strengthConfig();
|
|
244
|
-
let score = 0;
|
|
245
|
-
const maxScore = 5;
|
|
246
|
-
// Length check
|
|
247
|
-
const minLen = config.minLength ?? 8;
|
|
248
|
-
if (password.length >= minLen) {
|
|
249
|
-
score++;
|
|
250
|
-
}
|
|
251
|
-
// Bonus for longer passwords
|
|
252
|
-
if (password.length >= minLen + 4) {
|
|
253
|
-
score++;
|
|
254
|
-
}
|
|
255
|
-
// Uppercase check
|
|
256
|
-
if (/[A-Z]/.test(password)) {
|
|
257
|
-
score++;
|
|
258
|
-
}
|
|
259
|
-
// Lowercase check
|
|
260
|
-
if (/[a-z]/.test(password)) {
|
|
261
|
-
score++;
|
|
262
|
-
}
|
|
263
|
-
// Numbers check
|
|
264
|
-
if (/[0-9]/.test(password)) {
|
|
265
|
-
score++;
|
|
266
|
-
}
|
|
267
|
-
// Special characters check
|
|
268
|
-
if (/[^A-Za-z0-9]/.test(password)) {
|
|
269
|
-
score++;
|
|
270
|
-
}
|
|
271
|
-
// Normalize to strength levels
|
|
272
|
-
const ratio = score / maxScore;
|
|
273
|
-
if (ratio <= 0.3) {
|
|
274
|
-
return 'weak';
|
|
275
|
-
}
|
|
276
|
-
if (ratio <= 0.5) {
|
|
277
|
-
return 'fair';
|
|
278
|
-
}
|
|
279
|
-
if (ratio <= 0.8) {
|
|
280
|
-
return 'good';
|
|
281
|
-
}
|
|
282
|
-
return 'strong';
|
|
283
|
-
}
|
|
284
206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
285
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPasswordInputComponent, isStandalone: true, selector: "fui-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null },
|
|
207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPasswordInputComponent, isStandalone: true, selector: "fui-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnlyInput: { classPropertyName: "readOnlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-password-input--focused": "focused()", "class.fui-password-input--disabled": "disabled()", "class.fui-password-input--readonly": "readonly()", "class.fui-password-input--error": "errorState()", "attr.id": "id" }, classAttribute: "fui-password-input" }, providers: [
|
|
286
208
|
{
|
|
287
209
|
provide: NG_VALUE_ACCESSOR,
|
|
288
210
|
useExisting: FuiPasswordInputComponent,
|
|
@@ -292,11 +214,11 @@ class FuiPasswordInputComponent {
|
|
|
292
214
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
293
215
|
useExisting: FuiPasswordInputComponent,
|
|
294
216
|
},
|
|
295
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n class=\"fui-password-input__input\"\r\n [
|
|
217
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "_fuiInput", first: true, predicate: ["inputElement"], descendants: true, read: FuiInputDirective }], ngImport: i0, template: "@let isDisabled = disabled();\r\n@let isPasswordVisible = passwordVisible();\r\n\r\n<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n fuiInput\r\n class=\"fui-password-input__input\"\r\n [type]=\"_inputType()\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"isDisabled\"\r\n [readonly]=\"readonly()\"\r\n autocomplete=\"current-password\"\r\n (input)=\"_onInput($event)\"\r\n (focus)=\"_onFocus()\"\r\n (blur)=\"_onBlur()\"\r\n />\r\n @if (!isDisabled && !readonly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-password-input__toggle\"\r\n (click)=\"toggleVisibility()\"\r\n [attr.aria-label]=\"isPasswordVisible ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n tabindex=\"-1\"\r\n >\r\n <fui-icon [name]=\"isPasswordVisible ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-spacing-2)}.fui-password-input__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-field-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-password-input__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-password-input__toggle:disabled{cursor:not-allowed}.fui-password-input--disabled,.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-text-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__toggle{transition:none}}\n"], dependencies: [{ kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
296
218
|
}
|
|
297
219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputComponent, decorators: [{
|
|
298
220
|
type: Component,
|
|
299
|
-
args: [{ selector: 'fui-password-input', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
221
|
+
args: [{ selector: 'fui-password-input', standalone: true, imports: [FuiInputDirective, FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
300
222
|
class: 'fui-password-input',
|
|
301
223
|
'[class.fui-password-input--focused]': 'focused()',
|
|
302
224
|
'[class.fui-password-input--disabled]': 'disabled()',
|
|
@@ -313,12 +235,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
313
235
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
314
236
|
useExisting: FuiPasswordInputComponent,
|
|
315
237
|
},
|
|
316
|
-
], template: "<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n class=\"fui-password-input__input\"\r\n [
|
|
317
|
-
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
238
|
+
], template: "@let isDisabled = disabled();\r\n@let isPasswordVisible = passwordVisible();\r\n\r\n<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n fuiInput\r\n class=\"fui-password-input__input\"\r\n [type]=\"_inputType()\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"isDisabled\"\r\n [readonly]=\"readonly()\"\r\n autocomplete=\"current-password\"\r\n (input)=\"_onInput($event)\"\r\n (focus)=\"_onFocus()\"\r\n (blur)=\"_onBlur()\"\r\n />\r\n @if (!isDisabled && !readonly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-password-input__toggle\"\r\n (click)=\"toggleVisibility()\"\r\n [attr.aria-label]=\"isPasswordVisible ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n tabindex=\"-1\"\r\n >\r\n <fui-icon [name]=\"isPasswordVisible ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-spacing-2)}.fui-password-input__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-field-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition-property:opacity,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-password-input__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-password-input__toggle:disabled{cursor:not-allowed}.fui-password-input--disabled,.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-text-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__toggle{transition:none}}\n"] }]
|
|
239
|
+
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], _fuiInput: [{
|
|
240
|
+
type: ViewChild,
|
|
241
|
+
args: ['inputElement', { read: FuiInputDirective, static: false }]
|
|
242
|
+
}] } });
|
|
318
243
|
|
|
319
244
|
/**
|
|
320
245
|
* Generated bundle index. Do not edit.
|
|
321
246
|
*/
|
|
322
247
|
|
|
323
|
-
export {
|
|
248
|
+
export { FuiPasswordInputComponent, FuiPasswordInputIntl };
|
|
324
249
|
//# sourceMappingURL=raintonic-formaui-components-password-input.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-password-input.mjs","sources":["../../../lib/components/password-input/password-input.types.ts","../../../lib/components/password-input/password-input.intl.ts","../../../lib/components/password-input/password-input.component.ts","../../../lib/components/password-input/password-input.component.html","../../../lib/components/password-input/raintonic-formaui-components-password-input.ts"],"sourcesContent":["export type PasswordStrength = 'weak' | 'fair' | 'good' | 'strong';\r\n\r\nexport interface PasswordStrengthConfig {\r\n minLength?: number;\r\n requireUppercase?: boolean;\r\n requireLowercase?: boolean;\r\n requireNumbers?: boolean;\r\n requireSpecial?: boolean;\r\n}\r\n\r\nexport const DEFAULT_STRENGTH_CONFIG: PasswordStrengthConfig = {\r\n minLength: 8,\r\n requireUppercase: true,\r\n requireLowercase: true,\r\n requireNumbers: true,\r\n requireSpecial: false,\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiPasswordInputIntl extends FuiIntlBase {\r\n showAriaLabel = 'Show password';\r\n hideAriaLabel = 'Hide password';\r\n strengthAriaLabel(level: string): string {\r\n return `Password strength: ${level}`;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n input,\r\n computed,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DEFAULT_STRENGTH_CONFIG, PasswordStrength, PasswordStrengthConfig } from './password-input.types';\r\nimport { FuiPasswordInputIntl } from './password-input.intl';\r\n\r\n/**\r\n * # FuiPasswordInputComponent\r\n *\r\n * A password input component with visibility toggle and optional strength meter.\r\n * Integrates with fui-form-field and Angular Forms.\r\n *\r\n * ## Features\r\n * - Password visibility toggle\r\n * - Optional password strength meter\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - FuiFormFieldControl integration for fui-form-field\r\n * - Error state handling\r\n * - Accessibility (ARIA)\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Password Input\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-password-input formControlName=\"password\"></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Strength Meter\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-password-input\r\n * formControlName=\"password\"\r\n * [showStrengthMeter]=\"true\"\r\n * ></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-password-input',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './password-input.component.html',\r\n styleUrls: ['./password-input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-password-input',\r\n '[class.fui-password-input--focused]': 'focused()',\r\n '[class.fui-password-input--disabled]': 'disabled()',\r\n '[class.fui-password-input--readonly]': 'readonly()',\r\n '[class.fui-password-input--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n },\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: FuiPasswordInputComponent,\r\n multi: true,\r\n },\r\n {\r\n provide: FUI_FORM_FIELD_CONTROL,\r\n useExisting: FuiPasswordInputComponent,\r\n },\r\n ],\r\n})\r\nexport class FuiPasswordInputComponent\r\n implements ControlValueAccessor, FuiFormFieldControl<string>, DoCheck, OnDestroy\r\n{\r\n readonly intl = inject(FuiPasswordInputIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n // Static properties\r\n static nextId = 0;\r\n readonly controlType = 'fui-password-input';\r\n\r\n // Inputs\r\n readonly placeholder = input('');\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly readonly = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n readonly showStrengthMeter = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n readonly strengthConfig = input(DEFAULT_STRENGTH_CONFIG);\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Internal state\r\n readonly _passwordVisible: WritableSignal<boolean> = signal(false);\r\n readonly _value: WritableSignal<string> = signal('');\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n readonly errorState: Signal<boolean> = this._errorState.asReadonly();\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n readonly required: Signal<boolean> = this._required.asReadonly();\r\n\r\n // Computed\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n readonly _inputType: Signal<string> = computed(() => (this._passwordVisible() ? 'text' : 'password'));\r\n readonly value: Signal<string> = this._value.asReadonly();\r\n readonly empty: Signal<boolean> = computed(() => {\r\n const v = this._value();\r\n return !v || v.length === 0;\r\n });\r\n\r\n readonly _strength: Signal<PasswordStrength> = computed(() => {\r\n return this._calculateStrength(this._value());\r\n });\r\n\r\n readonly _strengthPercent: Signal<number> = computed(() => {\r\n switch (this._strength()) {\r\n case 'weak':\r\n return 25;\r\n case 'fair':\r\n return 50;\r\n case 'good':\r\n return 75;\r\n case 'strong':\r\n return 100;\r\n default:\r\n return 0;\r\n }\r\n });\r\n\r\n // State changes subject for form field compatibility\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-password-input-${FuiPasswordInputComponent.nextId++}`;\r\n readonly id = this._uid;\r\n _ariaDescribedby: string | null = null;\r\n\r\n // Form control references\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // ViewChild for input element\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n // ControlValueAccessor callbacks\r\n private _onChange: (value: string) => void = () => {\r\n /* noop */\r\n };\r\n private _onTouched: () => void = () => {\r\n /* noop */\r\n };\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n\r\n // Effect to emit state changes\r\n effect(() => {\r\n // Track all reactive inputs and internal signals\r\n this.placeholder();\r\n this.disabledInput();\r\n this.readonly();\r\n this.showStrengthMeter();\r\n this.strengthConfig();\r\n this.errorStateMatcher();\r\n this._passwordVisible();\r\n this._value();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n\r\n // Emit state change\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // ControlValueAccessor implementation\r\n writeValue(value: string | null): void {\r\n const v = value ?? '';\r\n this._value.set(v);\r\n // Sync the DOM element value if available\r\n const el = this.inputElement();\r\n if (el) {\r\n el.nativeElement.value = v;\r\n }\r\n this.stateChanges.next();\r\n }\r\n\r\n registerOnChange(fn: (value: string) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n onContainerClick(_event: MouseEvent): void {\r\n if (!this._focused()) {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n }\r\n\r\n setDescribedByIds(ids: string[]): void {\r\n this._ariaDescribedby = ids.length ? ids.join(' ') : null;\r\n }\r\n\r\n // Event handlers\r\n _onInput(event: Event): void {\r\n const target = event.target as HTMLInputElement;\r\n const newValue = target.value;\r\n if (newValue !== this._value()) {\r\n this._value.set(newValue);\r\n this._onChange(newValue);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n _onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n _onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n toggleVisibility(): void {\r\n this._passwordVisible.update((v) => !v);\r\n }\r\n\r\n // Public API\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n\r\n blur(): void {\r\n this.inputElement()?.nativeElement.blur();\r\n }\r\n\r\n // Strength calculation\r\n _calculateStrength(password: string): PasswordStrength {\r\n if (!password || password.length === 0) {\r\n return 'weak';\r\n }\r\n\r\n const config = this.strengthConfig();\r\n let score = 0;\r\n const maxScore = 5;\r\n\r\n // Length check\r\n const minLen = config.minLength ?? 8;\r\n if (password.length >= minLen) {\r\n score++;\r\n }\r\n // Bonus for longer passwords\r\n if (password.length >= minLen + 4) {\r\n score++;\r\n }\r\n\r\n // Uppercase check\r\n if (/[A-Z]/.test(password)) {\r\n score++;\r\n }\r\n\r\n // Lowercase check\r\n if (/[a-z]/.test(password)) {\r\n score++;\r\n }\r\n\r\n // Numbers check\r\n if (/[0-9]/.test(password)) {\r\n score++;\r\n }\r\n\r\n // Special characters check\r\n if (/[^A-Za-z0-9]/.test(password)) {\r\n score++;\r\n }\r\n\r\n // Normalize to strength levels\r\n const ratio = score / maxScore;\r\n if (ratio <= 0.3) {\r\n return 'weak';\r\n }\r\n if (ratio <= 0.5) {\r\n return 'fair';\r\n }\r\n if (ratio <= 0.8) {\r\n return 'good';\r\n }\r\n return 'strong';\r\n }\r\n}\r\n","<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n class=\"fui-password-input__input\"\r\n [attr.type]=\"_inputType()\"\r\n [attr.placeholder]=\"placeholder()\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n [attr.readonly]=\"readonly() ? '' : null\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n autocomplete=\"current-password\"\r\n (input)=\"_onInput($event)\"\r\n (focus)=\"_onFocus()\"\r\n (blur)=\"_onBlur()\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"fui-password-input__toggle\"\r\n (click)=\"toggleVisibility()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"_passwordVisible() ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n tabindex=\"-1\"\r\n >\r\n <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n <div\r\n class=\"fui-password-input__strength-bar\"\r\n role=\"progressbar\"\r\n [attr.aria-valuenow]=\"_strengthPercent()\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n [attr.aria-label]=\"intl.strengthAriaLabel(_strength())\"\r\n >\r\n <div\r\n class=\"fui-password-input__strength-fill\"\r\n [style.width.%]=\"_strengthPercent()\"\r\n [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n ></div>\r\n </div>\r\n <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\r\n </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-password-input.mjs","sources":["../../../lib/components/password-input/password-input.intl.ts","../../../lib/components/password-input/password-input.component.ts","../../../lib/components/password-input/password-input.component.html","../../../lib/components/password-input/raintonic-formaui-components-password-input.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiPasswordInputIntl extends FuiIntlBase {\r\n showAriaLabel = 'Show password';\r\n hideAriaLabel = 'Hide password';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n input,\r\n computed,\r\n signal,\r\n viewChild,\r\n ViewChild,\r\n ElementRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport {\r\n injectNgControl,\r\n updateErrorState,\r\n syncRequiredState,\r\n syncNgControlDisabled,\r\n} from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiInputDirective } from '@raintonic/formaui/components/input';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiPasswordInputIntl } from './password-input.intl';\r\nimport { noop } from '@raintonic/formaui/core';\r\n\r\n/**\r\n * # FuiPasswordInputComponent\r\n *\r\n * A password input component with visibility toggle.\r\n * Integrates with fui-form-field and Angular Forms.\r\n *\r\n * ## Features\r\n * - Password visibility toggle\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - FuiFormFieldControl integration for fui-form-field\r\n * - Error state handling\r\n * - Accessibility (ARIA)\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Password Input\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-password-input formControlName=\"password\"></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Strength Meter\r\n * Wire the strength meter independently:\r\n * ```html\r\n * <fui-form-field>\r\n * <fui-label>Password</fui-label>\r\n * <fui-password-input formControlName=\"password\"></fui-password-input>\r\n * </fui-form-field>\r\n * <fui-strength-meter [value]=\"passwordControl.value ?? ''\"></fui-strength-meter>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-password-input',\r\n standalone: true,\r\n imports: [FuiInputDirective, FuiIconComponent],\r\n templateUrl: './password-input.component.html',\r\n styleUrls: ['./password-input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-password-input',\r\n '[class.fui-password-input--focused]': 'focused()',\r\n '[class.fui-password-input--disabled]': 'disabled()',\r\n '[class.fui-password-input--readonly]': 'readonly()',\r\n '[class.fui-password-input--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n },\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: FuiPasswordInputComponent,\r\n multi: true,\r\n },\r\n {\r\n provide: FUI_FORM_FIELD_CONTROL,\r\n useExisting: FuiPasswordInputComponent,\r\n },\r\n ],\r\n})\r\nexport class FuiPasswordInputComponent\r\n implements ControlValueAccessor, FuiFormFieldControl<string>, DoCheck, OnDestroy\r\n{\r\n readonly intl = inject(FuiPasswordInputIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n readonly empty = computed(() => !this._value());\r\n\r\n // Static properties\r\n static nextId = 0;\r\n readonly controlType = 'fui-password-input';\r\n\r\n // Inputs\r\n readonly placeholder = input('');\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly readOnlyInput = input<boolean, unknown>(false, {\r\n alias: 'readonly',\r\n transform: booleanAttribute,\r\n });\r\n\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Internal state\r\n private readonly _passwordVisible: WritableSignal<boolean> = signal(false);\r\n readonly passwordVisible: Signal<boolean> = this._passwordVisible.asReadonly();\r\n private readonly _value: WritableSignal<string> = signal('');\r\n readonly value: Signal<string> = this._value.asReadonly();\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n private readonly _readOnly: WritableSignal<boolean> = signal(false);\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n readonly errorState: Signal<boolean> = this._errorState.asReadonly();\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n readonly required: Signal<boolean> = this._required.asReadonly();\r\n\r\n // Computed\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n readonly readonly: Signal<boolean> = computed(() => this.readOnlyInput() || this._readOnly());\r\n readonly _inputType: Signal<'text' | 'password'> = computed(() => (this._passwordVisible() ? 'text' : 'password'));\r\n\r\n // State changes subject for form field compatibility\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-password-input-${FuiPasswordInputComponent.nextId++}`;\r\n readonly id = this._uid;\r\n _ariaDescribedby: string | null = null;\r\n\r\n // Form control references\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // ViewChild for input element\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n // ViewChild for fuiInput directive — delegates readonly/disabled/aria/state to it\r\n @ViewChild('inputElement', { read: FuiInputDirective, static: false }) _fuiInput?: FuiInputDirective;\r\n\r\n // ControlValueAccessor callbacks\r\n private _onChange = noop;\r\n private _onTouched = noop;\r\n\r\n constructor() {\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n this._cdr.markForCheck();\r\n });\r\n\r\n // Effect to emit state changes when any tracked signal updates\r\n effect(() => {\r\n this.placeholder();\r\n this.disabledInput();\r\n this.readOnlyInput();\r\n this._readOnly();\r\n this.errorStateMatcher();\r\n this._value();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n this._passwordVisible();\r\n\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // ControlValueAccessor implementation\r\n writeValue(value: string | null): void {\r\n const v = value ?? '';\r\n this._value.set(v);\r\n // Sync the DOM element value if available\r\n const el = this.inputElement();\r\n if (el) {\r\n el.nativeElement.value = v;\r\n }\r\n this.stateChanges.next();\r\n }\r\n\r\n registerOnChange(fn: (value: string) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n onContainerClick(_event: MouseEvent): void {\r\n if (!this._focused()) {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n }\r\n\r\n setDescribedByIds(ids: string[]): void {\r\n this._ariaDescribedby = ids.length ? ids.join(' ') : null;\r\n this._fuiInput?.setDescribedByIds(ids);\r\n }\r\n\r\n // Event handlers\r\n _onInput(event: Event): void {\r\n const target = event.target as HTMLInputElement;\r\n const newValue = target.value;\r\n if (newValue !== this._value()) {\r\n this._value.set(newValue);\r\n this._onChange(newValue);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n _onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n _onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n toggleVisibility(): void {\r\n this._passwordVisible.update((v) => !v);\r\n }\r\n\r\n // Public API\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n\r\n blur(): void {\r\n this.inputElement()?.nativeElement.blur();\r\n }\r\n}\r\n","@let isDisabled = disabled();\r\n@let isPasswordVisible = passwordVisible();\r\n\r\n<div class=\"fui-password-input__wrapper\">\r\n <input\r\n #inputElement\r\n fuiInput\r\n class=\"fui-password-input__input\"\r\n [type]=\"_inputType()\"\r\n [placeholder]=\"placeholder()\"\r\n [disabled]=\"isDisabled\"\r\n [readonly]=\"readonly()\"\r\n autocomplete=\"current-password\"\r\n (input)=\"_onInput($event)\"\r\n (focus)=\"_onFocus()\"\r\n (blur)=\"_onBlur()\"\r\n />\r\n @if (!isDisabled && !readonly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-password-input__toggle\"\r\n (click)=\"toggleVisibility()\"\r\n [attr.aria-label]=\"isPasswordVisible ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n tabindex=\"-1\"\r\n >\r\n <fui-icon [name]=\"isPasswordVisible ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -43,14 +43,14 @@ class FuiPopoverComponent {
|
|
|
43
43
|
return baseClass;
|
|
44
44
|
}, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
|
|
45
45
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPopoverComponent, isStandalone: true, selector: "fui-popover", inputs: { hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClasses()" }, classAttribute: "fui-popover" }, ngImport: i0, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n @if (hasArrow()) {\r\n <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n }\r\n <div class=\"fui-popover__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity
|
|
46
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPopoverComponent, isStandalone: true, selector: "fui-popover", inputs: { hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClasses()" }, classAttribute: "fui-popover" }, ngImport: i0, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n @if (hasArrow()) {\r\n <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n }\r\n <div class=\"fui-popover__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-radius-md);--fui-popover-shadow: var(--fui-shadow-md);--fui-popover-padding: var(--fui-spacing-6);--fui-popover-background: var(--fui-bg-default);--fui-popover-border-color: var(--fui-border-default);--fui-popover-text-color: var(--fui-text-primary);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast) var(--fui-ease-out) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-6);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-6);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-6);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPopoverComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'fui-popover', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
51
51
|
class: 'fui-popover',
|
|
52
52
|
'[class]': 'computedClasses()',
|
|
53
|
-
}, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n @if (hasArrow()) {\r\n <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n }\r\n <div class=\"fui-popover__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity
|
|
53
|
+
}, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n @if (hasArrow()) {\r\n <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n }\r\n <div class=\"fui-popover__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-radius-md);--fui-popover-shadow: var(--fui-shadow-md);--fui-popover-padding: var(--fui-spacing-6);--fui-popover-background: var(--fui-bg-default);--fui-popover-border-color: var(--fui-border-default);--fui-popover-text-color: var(--fui-text-primary);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast) var(--fui-ease-out) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-6);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-6);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-6);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
54
54
|
}], propDecorators: { hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
|
|
55
55
|
|
|
56
56
|
const POPOVER_POSITIONS = [
|
|
@@ -159,6 +159,7 @@ class FuiPopoverTriggerDirective {
|
|
|
159
159
|
}
|
|
160
160
|
ngOnDestroy() {
|
|
161
161
|
this._clearTimeouts();
|
|
162
|
+
document.removeEventListener('click', this._onDocumentClick, true);
|
|
162
163
|
this._destroyPopover();
|
|
163
164
|
}
|
|
164
165
|
onHostClick() {
|