@brickclay-org/ui 0.0.29 → 0.0.31
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/fesm2022/brickclay-org-ui.mjs +97 -85
- package/fesm2022/brickclay-org-ui.mjs.map +1 -1
- package/index.d.ts +31 -16
- package/package.json +1 -1
- package/src/lib/input/input.css +1 -1
|
@@ -2776,6 +2776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2776
2776
|
|
|
2777
2777
|
class BkTextarea {
|
|
2778
2778
|
ngControl;
|
|
2779
|
+
autoComplete = 'off';
|
|
2779
2780
|
name;
|
|
2780
2781
|
id;
|
|
2781
2782
|
label = '';
|
|
@@ -2783,17 +2784,20 @@ class BkTextarea {
|
|
|
2783
2784
|
rows = 4;
|
|
2784
2785
|
hint = '';
|
|
2785
2786
|
required = false;
|
|
2786
|
-
|
|
2787
|
+
maxlength = null;
|
|
2788
|
+
minlength = null;
|
|
2787
2789
|
hasError = false;
|
|
2790
|
+
disabled = false;
|
|
2788
2791
|
errorMessage = '';
|
|
2789
|
-
|
|
2790
|
-
|
|
2792
|
+
tabIndex = null;
|
|
2793
|
+
readOnly = false;
|
|
2794
|
+
autoCapitalize = null;
|
|
2795
|
+
inputMode = null;
|
|
2791
2796
|
input = new EventEmitter();
|
|
2792
2797
|
change = new EventEmitter();
|
|
2793
2798
|
blur = new EventEmitter();
|
|
2794
2799
|
focus = new EventEmitter();
|
|
2795
2800
|
value = '';
|
|
2796
|
-
isDisabled = false;
|
|
2797
2801
|
// --- ControlValueAccessor ---
|
|
2798
2802
|
onChange = (_) => { };
|
|
2799
2803
|
onTouched = () => { };
|
|
@@ -2803,11 +2807,6 @@ class BkTextarea {
|
|
|
2803
2807
|
this.ngControl.valueAccessor = this;
|
|
2804
2808
|
}
|
|
2805
2809
|
}
|
|
2806
|
-
// --- Computed ID ---
|
|
2807
|
-
get effectiveId() {
|
|
2808
|
-
const base = 'brickclay_textarea_';
|
|
2809
|
-
return this.id ? `${base}${this.id}` : `${base}${this.label?.replace(/\s+/g, '_').toLowerCase()}`;
|
|
2810
|
-
}
|
|
2811
2810
|
// --- Expose FormControl state ---
|
|
2812
2811
|
get control() {
|
|
2813
2812
|
return this.ngControl?.control;
|
|
@@ -2821,52 +2820,21 @@ class BkTextarea {
|
|
|
2821
2820
|
get errors() {
|
|
2822
2821
|
return this.control?.errors;
|
|
2823
2822
|
}
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
//
|
|
2839
|
-
if (this.trimWhiteSpaces && this.eventType === 'input') {
|
|
2840
|
-
setTimeout(() => {
|
|
2841
|
-
this.value = this.value.trim();
|
|
2842
|
-
input.value = this.value;
|
|
2843
|
-
if (this.eventType === 'input')
|
|
2844
|
-
this.onChange(this.value);
|
|
2845
|
-
}, 300); // small delay for input event
|
|
2846
|
-
}
|
|
2847
|
-
else if (this.trimWhiteSpaces) {
|
|
2848
|
-
this.value = this.value.trim();
|
|
2849
|
-
input.value = this.value;
|
|
2850
|
-
}
|
|
2851
|
-
// Update ngModel depending on event type
|
|
2852
|
-
if (this.eventType === 'input' && event.type === 'input')
|
|
2853
|
-
this.onChange(this.value);
|
|
2854
|
-
if (this.eventType === 'change' && event.type === 'change')
|
|
2855
|
-
this.onChange(this.value);
|
|
2856
|
-
if (this.eventType === 'blur' && event.type === 'blur')
|
|
2857
|
-
this.onChange(this.value);
|
|
2858
|
-
// Always mark as touched on blur/focus
|
|
2859
|
-
if (event.type === 'blur' || event.type === 'focus')
|
|
2860
|
-
this.onTouched();
|
|
2861
|
-
// ---- Emit component outputs ----
|
|
2862
|
-
if (event.type === 'input')
|
|
2863
|
-
this.input.emit(event);
|
|
2864
|
-
if (event.type === 'change')
|
|
2865
|
-
this.change.emit(event);
|
|
2866
|
-
if (event.type === 'blur')
|
|
2867
|
-
this.blur.emit(event);
|
|
2868
|
-
if (event.type === 'focus')
|
|
2869
|
-
this.focus.emit(event);
|
|
2823
|
+
handleFocus(event) {
|
|
2824
|
+
this.focus.emit(event);
|
|
2825
|
+
}
|
|
2826
|
+
handleBlur(event) {
|
|
2827
|
+
this.onTouched();
|
|
2828
|
+
this.blur.emit(event);
|
|
2829
|
+
}
|
|
2830
|
+
handleInput(event) {
|
|
2831
|
+
const val = event.target.value;
|
|
2832
|
+
this.value = val; // update CVA value
|
|
2833
|
+
this.onChange(val); // propagate to parent form
|
|
2834
|
+
this.input.emit(event); // emit raw event
|
|
2835
|
+
}
|
|
2836
|
+
handleChange(event) {
|
|
2837
|
+
this.change.emit(event); // emit raw change event
|
|
2870
2838
|
}
|
|
2871
2839
|
writeValue(value) {
|
|
2872
2840
|
this.value = value ?? '';
|
|
@@ -2877,20 +2845,19 @@ class BkTextarea {
|
|
|
2877
2845
|
registerOnTouched(fn) {
|
|
2878
2846
|
this.onTouched = fn;
|
|
2879
2847
|
}
|
|
2880
|
-
setDisabledState(isDisabled) {
|
|
2881
|
-
this.isDisabled = isDisabled;
|
|
2882
|
-
}
|
|
2883
2848
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTextarea, isStandalone: true, selector: "bk-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required",
|
|
2849
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTextarea, isStandalone: true, selector: "bk-textarea", inputs: { autoComplete: "autoComplete", name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxlength: "maxlength", minlength: "minlength", hasError: "hasError", disabled: "disabled", errorMessage: "errorMessage", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n @if (label) {\r\n <label\r\n class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"relative\">\r\n <textarea\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [tabindex]=\"tabIndex\"\r\n [readOnly]=\"readOnly\"\r\n [maxLength]=\"maxlength\"\r\n [minLength]=\"minlength\"\r\n [autocomplete]=\"autoComplete\"\r\n [autocapitalize]=\"autoCapitalize\"\r\n [inputMode]=\"inputMode\"\r\n [value]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (change)=\"handleChange($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n [placeholder]=\"placeholder\"\r\n\r\n [autocomplete]=\"autoComplete\"\r\n\r\n rows=\"{{rows}}\"\r\n class=\"\r\n w-full\r\n px-3 py-2.5\r\n text-sm\r\n border border-[#E3E3E7] rounded-[4px]\r\n outline-none\r\n transition-colors duration-200\r\n bg-white resize-y\r\n placeholder:text-[#6B7080]\r\n \"\r\n [ngClass]=\"{\r\n 'border-[#FA727A] text-[#141414]': hasError && !disabled,\r\n\r\n 'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n 'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n }\"\r\n ></textarea>\r\n </div>\r\n\r\n <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n <div class=\"flex-1\">\r\n @if (hasError) {\r\n <span class=\"text-[#F34050]\">\r\n {{ errorMessage }}\r\n </span>\r\n } @else if (hint) {\r\n <span class=\"text-[#868997]\">\r\n {{ hint }}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (maxlength) {\r\n <div\r\n class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n >\r\n {{ value.length }}/{{ maxlength }}\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2885
2850
|
}
|
|
2886
2851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, decorators: [{
|
|
2887
2852
|
type: Component,
|
|
2888
|
-
args: [{ selector: 'bk-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n @if (label) {\r\n <label\r\n class=\"text-sm font-medium text-[#141414] block\" [
|
|
2853
|
+
args: [{ selector: 'bk-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n @if (label) {\r\n <label\r\n class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"relative\">\r\n <textarea\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [tabindex]=\"tabIndex\"\r\n [readOnly]=\"readOnly\"\r\n [maxLength]=\"maxlength\"\r\n [minLength]=\"minlength\"\r\n [autocomplete]=\"autoComplete\"\r\n [autocapitalize]=\"autoCapitalize\"\r\n [inputMode]=\"inputMode\"\r\n [value]=\"value\"\r\n (input)=\"handleInput($event)\"\r\n (change)=\"handleChange($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n [placeholder]=\"placeholder\"\r\n\r\n [autocomplete]=\"autoComplete\"\r\n\r\n rows=\"{{rows}}\"\r\n class=\"\r\n w-full\r\n px-3 py-2.5\r\n text-sm\r\n border border-[#E3E3E7] rounded-[4px]\r\n outline-none\r\n transition-colors duration-200\r\n bg-white resize-y\r\n placeholder:text-[#6B7080]\r\n \"\r\n [ngClass]=\"{\r\n 'border-[#FA727A] text-[#141414]': hasError && !disabled,\r\n\r\n 'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n 'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n }\"\r\n ></textarea>\r\n </div>\r\n\r\n <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n <div class=\"flex-1\">\r\n @if (hasError) {\r\n <span class=\"text-[#F34050]\">\r\n {{ errorMessage }}\r\n </span>\r\n } @else if (hint) {\r\n <span class=\"text-[#868997]\">\r\n {{ hint }}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (maxlength) {\r\n <div\r\n class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n >\r\n {{ value.length }}/{{ maxlength }}\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>\r\n" }]
|
|
2889
2854
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2890
2855
|
type: Optional
|
|
2891
2856
|
}, {
|
|
2892
2857
|
type: Self
|
|
2893
|
-
}] }], propDecorators: {
|
|
2858
|
+
}] }], propDecorators: { autoComplete: [{
|
|
2859
|
+
type: Input
|
|
2860
|
+
}], name: [{
|
|
2894
2861
|
type: Input
|
|
2895
2862
|
}], id: [{
|
|
2896
2863
|
type: Input
|
|
@@ -2904,15 +2871,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2904
2871
|
type: Input
|
|
2905
2872
|
}], required: [{
|
|
2906
2873
|
type: Input
|
|
2907
|
-
}],
|
|
2874
|
+
}], maxlength: [{
|
|
2875
|
+
type: Input
|
|
2876
|
+
}], minlength: [{
|
|
2908
2877
|
type: Input
|
|
2909
2878
|
}], hasError: [{
|
|
2910
2879
|
type: Input
|
|
2880
|
+
}], disabled: [{
|
|
2881
|
+
type: Input
|
|
2911
2882
|
}], errorMessage: [{
|
|
2912
2883
|
type: Input
|
|
2913
|
-
}],
|
|
2884
|
+
}], tabIndex: [{
|
|
2885
|
+
type: Input
|
|
2886
|
+
}], readOnly: [{
|
|
2887
|
+
type: Input
|
|
2888
|
+
}], autoCapitalize: [{
|
|
2914
2889
|
type: Input
|
|
2915
|
-
}],
|
|
2890
|
+
}], inputMode: [{
|
|
2916
2891
|
type: Input
|
|
2917
2892
|
}], input: [{
|
|
2918
2893
|
type: Output
|
|
@@ -3443,19 +3418,23 @@ class BkInput {
|
|
|
3443
3418
|
hasError = false;
|
|
3444
3419
|
errorMessage = '';
|
|
3445
3420
|
disabled = false;
|
|
3421
|
+
tabIndex = null;
|
|
3422
|
+
readOnly = false;
|
|
3423
|
+
autoCapitalize = null;
|
|
3424
|
+
inputMode = null;
|
|
3446
3425
|
icon = false;
|
|
3447
3426
|
iconSrc;
|
|
3448
3427
|
iconAlt = 'icon';
|
|
3449
3428
|
phone = false;
|
|
3450
3429
|
countryCode = 'US';
|
|
3451
3430
|
countryOptions = [
|
|
3452
|
-
{ code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ' },
|
|
3453
|
-
{ code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ' },
|
|
3454
|
-
{ code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ' },
|
|
3455
|
-
{ code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ' },
|
|
3456
|
-
{ code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ' },
|
|
3457
|
-
{ code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ' },
|
|
3458
|
-
{ code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ' }
|
|
3431
|
+
{ code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
|
|
3432
|
+
{ code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ', placeholder: '(000) 000-0000' },
|
|
3433
|
+
{ code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ', placeholder: '(000) 000-0000' },
|
|
3434
|
+
{ code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ', placeholder: '(000) 000-0000' },
|
|
3435
|
+
{ code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ', placeholder: '(000) 000-0000' },
|
|
3436
|
+
{ code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ', placeholder: '(000) 000-0000' },
|
|
3437
|
+
{ code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ', placeholder: '(000) 000-0000' }
|
|
3459
3438
|
];
|
|
3460
3439
|
selectedCountry = this.countryOptions[0];
|
|
3461
3440
|
searchLeft = false;
|
|
@@ -3481,6 +3460,13 @@ class BkInput {
|
|
|
3481
3460
|
change = new EventEmitter();
|
|
3482
3461
|
focus = new EventEmitter();
|
|
3483
3462
|
blur = new EventEmitter();
|
|
3463
|
+
get placeHolderText() {
|
|
3464
|
+
if (this.phone) {
|
|
3465
|
+
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3466
|
+
return country?.placeholder || '';
|
|
3467
|
+
}
|
|
3468
|
+
return this.placeholder;
|
|
3469
|
+
}
|
|
3484
3470
|
get maskValue() {
|
|
3485
3471
|
if (this.mask)
|
|
3486
3472
|
return this.mask;
|
|
@@ -3492,7 +3478,6 @@ class BkInput {
|
|
|
3492
3478
|
}
|
|
3493
3479
|
get maskPrefixValue() {
|
|
3494
3480
|
if (this.phone) {
|
|
3495
|
-
debugger;
|
|
3496
3481
|
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3497
3482
|
return country?.prefix || '';
|
|
3498
3483
|
}
|
|
@@ -3526,7 +3511,6 @@ class BkInput {
|
|
|
3526
3511
|
this.type = 'password';
|
|
3527
3512
|
if (this.phone) {
|
|
3528
3513
|
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3529
|
-
debugger;
|
|
3530
3514
|
if (country)
|
|
3531
3515
|
this.selectedCountry = country;
|
|
3532
3516
|
document.addEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
|
|
@@ -3562,18 +3546,11 @@ class BkInput {
|
|
|
3562
3546
|
}
|
|
3563
3547
|
handleInput(event) {
|
|
3564
3548
|
const val = event.target.value;
|
|
3565
|
-
|
|
3549
|
+
this.inputValue = val;
|
|
3566
3550
|
this.value = val; // update CVA value
|
|
3567
3551
|
this.onChange(val); // propagate to parent form
|
|
3568
3552
|
this.input.emit(event); // emit raw event
|
|
3569
3553
|
}
|
|
3570
|
-
// handleInput(event: Event): void {
|
|
3571
|
-
// const val = (event.target as HTMLInputElement).value;
|
|
3572
|
-
// this.inputValue = val;
|
|
3573
|
-
// this.value = val;
|
|
3574
|
-
// this.onChange(val); // propagate to parent form
|
|
3575
|
-
// this.input.emit(event);
|
|
3576
|
-
// }
|
|
3577
3554
|
handleChange(event) {
|
|
3578
3555
|
this.change.emit(event); // emit raw change event
|
|
3579
3556
|
}
|
|
@@ -3590,10 +3567,37 @@ class BkInput {
|
|
|
3590
3567
|
}
|
|
3591
3568
|
}
|
|
3592
3569
|
selectCountry(country) {
|
|
3593
|
-
|
|
3570
|
+
const oldCountry = this.selectedCountry;
|
|
3594
3571
|
this.selectedCountry = country;
|
|
3595
3572
|
this.countryCode = country.code;
|
|
3596
3573
|
this.isDropdownOpen = false;
|
|
3574
|
+
const currentRaw = this.inputField?.nativeElement?.value || this.inputValue;
|
|
3575
|
+
let newPhone = '';
|
|
3576
|
+
if (currentRaw && currentRaw.trim() !== '') {
|
|
3577
|
+
// Input has some value → replace old prefix
|
|
3578
|
+
if (oldCountry?.prefix && oldCountry.code !== country.code) {
|
|
3579
|
+
const oldPrefixEscaped = oldCountry.prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
3580
|
+
const regex = new RegExp(`^${oldPrefixEscaped}\\s?`);
|
|
3581
|
+
const oldMaskedValue = currentRaw.replace(regex, '');
|
|
3582
|
+
newPhone = country.prefix + oldMaskedValue;
|
|
3583
|
+
}
|
|
3584
|
+
else {
|
|
3585
|
+
newPhone = country.prefix + currentRaw;
|
|
3586
|
+
}
|
|
3587
|
+
}
|
|
3588
|
+
else {
|
|
3589
|
+
// Input is empty → show only the new prefix OR empty
|
|
3590
|
+
newPhone = ''; // optionally: newPhone = country.prefix;
|
|
3591
|
+
}
|
|
3592
|
+
this.inputValue = newPhone;
|
|
3593
|
+
this.value = newPhone;
|
|
3594
|
+
this.onChange(newPhone);
|
|
3595
|
+
setTimeout(() => {
|
|
3596
|
+
if (this.inputField?.nativeElement) {
|
|
3597
|
+
this.inputField.nativeElement.value = newPhone;
|
|
3598
|
+
this.inputField.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
|
|
3599
|
+
}
|
|
3600
|
+
}, 0);
|
|
3597
3601
|
}
|
|
3598
3602
|
togglePasswordVisibility(event) {
|
|
3599
3603
|
if (!this.disabled && this.password) {
|
|
@@ -3624,14 +3628,14 @@ class BkInput {
|
|
|
3624
3628
|
return this.type;
|
|
3625
3629
|
}
|
|
3626
3630
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3627
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", value: "value", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", icon: "icon", iconSrc: "iconSrc", iconAlt: "iconAlt", phone: "phone", countryCode: "countryCode", countryOptions: "countryOptions", searchLeft: "searchLeft", searchRight: "searchRight", password: "password", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
3631
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", value: "value", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", icon: "icon", iconSrc: "iconSrc", iconAlt: "iconAlt", phone: "phone", countryCode: "countryCode", countryOptions: "countryOptions", searchLeft: "searchLeft", searchRight: "searchRight", password: "password", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
3628
3632
|
provideNgxMask(),
|
|
3629
3633
|
{
|
|
3630
3634
|
provide: NG_VALUE_ACCESSOR,
|
|
3631
3635
|
useExisting: forwardRef(() => BkInput),
|
|
3632
3636
|
multi: true
|
|
3633
3637
|
}
|
|
3634
|
-
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\r\n <label [for]=\"id\" class=\"input-label\">\r\n {{ label }}\r\n @if(required){\r\n <span class=\"input-label-required\">*</span>\r\n }\r\n </label>\r\n\r\n <div class=\"input-wrapper\" [ngClass]=\"{\r\n 'input-wrapper--url': type === 'url',\r\n 'input-wrapper--icon': icon && iconSrc,\r\n 'input-wrapper--phone': phone,\r\n 'input-wrapper--search-left': searchLeft,\r\n 'input-wrapper--search-right': searchRight,\r\n 'input-wrapper--password': password\r\n }\">\r\n\r\n <input\r\n #inputField\r\n [type]=\"currentInputType\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [
|
|
3638
|
+
], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\r\n <label [for]=\"id\" class=\"input-label\">\r\n {{ label }}\r\n @if(required){\r\n <span class=\"input-label-required\">*</span>\r\n }\r\n </label>\r\n\r\n <div class=\"input-wrapper\" [ngClass]=\"{\r\n 'input-wrapper--url': type === 'url',\r\n 'input-wrapper--icon': icon && iconSrc,\r\n 'input-wrapper--phone': phone,\r\n 'input-wrapper--search-left': searchLeft,\r\n 'input-wrapper--search-right': searchRight,\r\n 'input-wrapper--password': password\r\n }\">\r\n\r\n <input\r\n #inputField\r\n [type]=\"currentInputType\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [tabindex]=\"tabIndex\"\r\n [readOnly]=\"readOnly\"\r\n [maxLength]=\"maxlength\"\r\n [minLength]=\"minlength\"\r\n [autocomplete]=\"autoComplete\"\r\n [autocapitalize]=\"autoCapitalize\"\r\n\r\n [attr.max]=\"max\"\r\n [attr.min]=\"min\"\r\n [attr.step]=\"step\"\r\n\r\n [placeholder]=\"placeHolderText\"\r\n [pattern]=\"pattern\"\r\n [autocomplete]=\"autoComplete\"\r\n [value]=\"inputValue\"\r\n\r\n\r\n\r\n [mask]=\"maskValue\"\r\n [prefix]=\"maskPrefixValue\"\r\n [showMaskTyped]=\"false\"\r\n [dropSpecialCharacters]=\"false\"\r\n (change)=\"handleChange($event)\"\r\n (input)=\"handleInput($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n class=\"input-field\"\r\n [ngClass]=\"{\r\n 'input-field--url': type === 'url',\r\n 'input-field--icon': icon && iconSrc,\r\n 'input-field--phone': phone,\r\n 'input-field--search-left': searchLeft,\r\n 'input-field--search-right': searchRight,\r\n 'input-field--password': password,\r\n 'input-field--default': inputState === 'default',\r\n 'input-field--focused': inputState === 'focused',\r\n 'input-field--filled': inputState === 'filled',\r\n 'input-field--error': inputState === 'error',\r\n 'input-field--disabled': inputState === 'disabled'\r\n }\">\r\n\r\n @if(searchLeft){\r\n <img src=\"../../assets/images/icons/global/search-input.svg\" alt=\"Search\" class=\"input-search-icon input-search-icon--left\">\r\n }\r\n\r\n @if(searchRight){\r\n <img src=\"../../assets/images/icons/global/search-input.svg\" alt=\"Search\" class=\"input-search-icon input-search-icon--right\">\r\n }\r\n\r\n @if(password){\r\n <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n </button>\r\n }\r\n\r\n @if(phone){\r\n <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n 'input-phone-selector--default': inputState === 'default',\r\n 'input-phone-selector--focused': inputState === 'focused',\r\n 'input-phone-selector--filled': inputState === 'filled',\r\n 'input-phone-selector--error': inputState === 'error',\r\n 'input-phone-selector--disabled': inputState === 'disabled'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n </div>\r\n }\r\n\r\n @if(phone && isDropdownOpen){\r\n <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n {{ country.name }}\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(icon && iconSrc && !searchLeft){\r\n <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"input-icon\">\r\n }\r\n\r\n @if(type === 'url'){\r\n <span class=\"input-url-prefix\" [ngClass]=\"{\r\n 'input-url-prefix--default': inputState === 'default',\r\n 'input-url-prefix--focused': inputState === 'focused',\r\n 'input-url-prefix--filled': inputState === 'filled',\r\n 'input-url-prefix--error': inputState === 'error',\r\n 'input-url-prefix--disabled': inputState === 'disabled'\r\n }\">https</span>\r\n }\r\n </div>\r\n\r\n @if(hasError){\r\n @if (errorMessage) {\r\n <p class=\"input-error\">{{ errorMessage }}</p>\r\n }\r\n }\r\n @if(!hasError){\r\n <p class=\"input-hint\">{{ hint }}</p>\r\n }\r\n</div>\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--search-left{@apply pl-[48px];}.input-field--search-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3635
3639
|
}
|
|
3636
3640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
|
|
3637
3641
|
type: Component,
|
|
@@ -3642,7 +3646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3642
3646
|
useExisting: forwardRef(() => BkInput),
|
|
3643
3647
|
multi: true
|
|
3644
3648
|
}
|
|
3645
|
-
], template: "<div class=\"input-container\">\r\n <label [for]=\"id\" class=\"input-label\">\r\n {{ label }}\r\n @if(required){\r\n <span class=\"input-label-required\">*</span>\r\n }\r\n </label>\r\n\r\n <div class=\"input-wrapper\" [ngClass]=\"{\r\n 'input-wrapper--url': type === 'url',\r\n 'input-wrapper--icon': icon && iconSrc,\r\n 'input-wrapper--phone': phone,\r\n 'input-wrapper--search-left': searchLeft,\r\n 'input-wrapper--search-right': searchRight,\r\n 'input-wrapper--password': password\r\n }\">\r\n\r\n <input\r\n #inputField\r\n [type]=\"currentInputType\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [
|
|
3649
|
+
], template: "<div class=\"input-container\">\r\n <label [for]=\"id\" class=\"input-label\">\r\n {{ label }}\r\n @if(required){\r\n <span class=\"input-label-required\">*</span>\r\n }\r\n </label>\r\n\r\n <div class=\"input-wrapper\" [ngClass]=\"{\r\n 'input-wrapper--url': type === 'url',\r\n 'input-wrapper--icon': icon && iconSrc,\r\n 'input-wrapper--phone': phone,\r\n 'input-wrapper--search-left': searchLeft,\r\n 'input-wrapper--search-right': searchRight,\r\n 'input-wrapper--password': password\r\n }\">\r\n\r\n <input\r\n #inputField\r\n [type]=\"currentInputType\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [disabled]=\"disabled\"\r\n [tabindex]=\"tabIndex\"\r\n [readOnly]=\"readOnly\"\r\n [maxLength]=\"maxlength\"\r\n [minLength]=\"minlength\"\r\n [autocomplete]=\"autoComplete\"\r\n [autocapitalize]=\"autoCapitalize\"\r\n\r\n [attr.max]=\"max\"\r\n [attr.min]=\"min\"\r\n [attr.step]=\"step\"\r\n\r\n [placeholder]=\"placeHolderText\"\r\n [pattern]=\"pattern\"\r\n [autocomplete]=\"autoComplete\"\r\n [value]=\"inputValue\"\r\n\r\n\r\n\r\n [mask]=\"maskValue\"\r\n [prefix]=\"maskPrefixValue\"\r\n [showMaskTyped]=\"false\"\r\n [dropSpecialCharacters]=\"false\"\r\n (change)=\"handleChange($event)\"\r\n (input)=\"handleInput($event)\"\r\n (focus)=\"handleFocus($event)\"\r\n (blur)=\"handleBlur($event)\"\r\n class=\"input-field\"\r\n [ngClass]=\"{\r\n 'input-field--url': type === 'url',\r\n 'input-field--icon': icon && iconSrc,\r\n 'input-field--phone': phone,\r\n 'input-field--search-left': searchLeft,\r\n 'input-field--search-right': searchRight,\r\n 'input-field--password': password,\r\n 'input-field--default': inputState === 'default',\r\n 'input-field--focused': inputState === 'focused',\r\n 'input-field--filled': inputState === 'filled',\r\n 'input-field--error': inputState === 'error',\r\n 'input-field--disabled': inputState === 'disabled'\r\n }\">\r\n\r\n @if(searchLeft){\r\n <img src=\"../../assets/images/icons/global/search-input.svg\" alt=\"Search\" class=\"input-search-icon input-search-icon--left\">\r\n }\r\n\r\n @if(searchRight){\r\n <img src=\"../../assets/images/icons/global/search-input.svg\" alt=\"Search\" class=\"input-search-icon input-search-icon--right\">\r\n }\r\n\r\n @if(password){\r\n <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n </button>\r\n }\r\n\r\n @if(phone){\r\n <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n 'input-phone-selector--default': inputState === 'default',\r\n 'input-phone-selector--focused': inputState === 'focused',\r\n 'input-phone-selector--filled': inputState === 'filled',\r\n 'input-phone-selector--error': inputState === 'error',\r\n 'input-phone-selector--disabled': inputState === 'disabled'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n </div>\r\n }\r\n\r\n @if(phone && isDropdownOpen){\r\n <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n {{ country.name }}\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(icon && iconSrc && !searchLeft){\r\n <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"input-icon\">\r\n }\r\n\r\n @if(type === 'url'){\r\n <span class=\"input-url-prefix\" [ngClass]=\"{\r\n 'input-url-prefix--default': inputState === 'default',\r\n 'input-url-prefix--focused': inputState === 'focused',\r\n 'input-url-prefix--filled': inputState === 'filled',\r\n 'input-url-prefix--error': inputState === 'error',\r\n 'input-url-prefix--disabled': inputState === 'disabled'\r\n }\">https</span>\r\n }\r\n </div>\r\n\r\n @if(hasError){\r\n @if (errorMessage) {\r\n <p class=\"input-error\">{{ errorMessage }}</p>\r\n }\r\n }\r\n @if(!hasError){\r\n <p class=\"input-hint\">{{ hint }}</p>\r\n }\r\n</div>\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--search-left{@apply pl-[48px];}.input-field--search-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}\n"] }]
|
|
3646
3650
|
}], propDecorators: { id: [{
|
|
3647
3651
|
type: Input
|
|
3648
3652
|
}], name: [{
|
|
@@ -3669,6 +3673,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3669
3673
|
type: Input
|
|
3670
3674
|
}], disabled: [{
|
|
3671
3675
|
type: Input
|
|
3676
|
+
}], tabIndex: [{
|
|
3677
|
+
type: Input
|
|
3678
|
+
}], readOnly: [{
|
|
3679
|
+
type: Input
|
|
3680
|
+
}], autoCapitalize: [{
|
|
3681
|
+
type: Input
|
|
3682
|
+
}], inputMode: [{
|
|
3683
|
+
type: Input
|
|
3672
3684
|
}], icon: [{
|
|
3673
3685
|
type: Input
|
|
3674
3686
|
}], iconSrc: [{
|