@brickclay-org/ui 0.0.29 → 0.0.30
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.
|
@@ -3449,13 +3449,13 @@ class BkInput {
|
|
|
3449
3449
|
phone = false;
|
|
3450
3450
|
countryCode = 'US';
|
|
3451
3451
|
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 ' }
|
|
3452
|
+
{ code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
|
|
3453
|
+
{ code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ', placeholder: '(000) 000-0000' },
|
|
3454
|
+
{ code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ', placeholder: '(000) 000-0000' },
|
|
3455
|
+
{ code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ', placeholder: '(000) 000-0000' },
|
|
3456
|
+
{ code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ', placeholder: '(000) 000-0000' },
|
|
3457
|
+
{ code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ', placeholder: '(000) 000-0000' },
|
|
3458
|
+
{ code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ', placeholder: '(000) 000-0000' }
|
|
3459
3459
|
];
|
|
3460
3460
|
selectedCountry = this.countryOptions[0];
|
|
3461
3461
|
searchLeft = false;
|
|
@@ -3481,6 +3481,13 @@ class BkInput {
|
|
|
3481
3481
|
change = new EventEmitter();
|
|
3482
3482
|
focus = new EventEmitter();
|
|
3483
3483
|
blur = new EventEmitter();
|
|
3484
|
+
get placeHolderText() {
|
|
3485
|
+
if (this.phone) {
|
|
3486
|
+
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3487
|
+
return country?.placeholder || '';
|
|
3488
|
+
}
|
|
3489
|
+
return this.placeholder;
|
|
3490
|
+
}
|
|
3484
3491
|
get maskValue() {
|
|
3485
3492
|
if (this.mask)
|
|
3486
3493
|
return this.mask;
|
|
@@ -3492,7 +3499,6 @@ class BkInput {
|
|
|
3492
3499
|
}
|
|
3493
3500
|
get maskPrefixValue() {
|
|
3494
3501
|
if (this.phone) {
|
|
3495
|
-
debugger;
|
|
3496
3502
|
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3497
3503
|
return country?.prefix || '';
|
|
3498
3504
|
}
|
|
@@ -3526,7 +3532,6 @@ class BkInput {
|
|
|
3526
3532
|
this.type = 'password';
|
|
3527
3533
|
if (this.phone) {
|
|
3528
3534
|
const country = this.countryOptions.find(c => c.code === this.countryCode);
|
|
3529
|
-
debugger;
|
|
3530
3535
|
if (country)
|
|
3531
3536
|
this.selectedCountry = country;
|
|
3532
3537
|
document.addEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
|
|
@@ -3562,7 +3567,7 @@ class BkInput {
|
|
|
3562
3567
|
}
|
|
3563
3568
|
handleInput(event) {
|
|
3564
3569
|
const val = event.target.value;
|
|
3565
|
-
|
|
3570
|
+
this.inputValue = val;
|
|
3566
3571
|
this.value = val; // update CVA value
|
|
3567
3572
|
this.onChange(val); // propagate to parent form
|
|
3568
3573
|
this.input.emit(event); // emit raw event
|
|
@@ -3590,10 +3595,37 @@ class BkInput {
|
|
|
3590
3595
|
}
|
|
3591
3596
|
}
|
|
3592
3597
|
selectCountry(country) {
|
|
3593
|
-
|
|
3598
|
+
const oldCountry = this.selectedCountry;
|
|
3594
3599
|
this.selectedCountry = country;
|
|
3595
3600
|
this.countryCode = country.code;
|
|
3596
3601
|
this.isDropdownOpen = false;
|
|
3602
|
+
const currentRaw = this.inputField?.nativeElement?.value || this.inputValue;
|
|
3603
|
+
let newPhone = '';
|
|
3604
|
+
if (currentRaw && currentRaw.trim() !== '') {
|
|
3605
|
+
// Input has some value → replace old prefix
|
|
3606
|
+
if (oldCountry?.prefix && oldCountry.code !== country.code) {
|
|
3607
|
+
const oldPrefixEscaped = oldCountry.prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
3608
|
+
const regex = new RegExp(`^${oldPrefixEscaped}\\s?`);
|
|
3609
|
+
const oldMaskedValue = currentRaw.replace(regex, '');
|
|
3610
|
+
newPhone = country.prefix + oldMaskedValue;
|
|
3611
|
+
}
|
|
3612
|
+
else {
|
|
3613
|
+
newPhone = country.prefix + currentRaw;
|
|
3614
|
+
}
|
|
3615
|
+
}
|
|
3616
|
+
else {
|
|
3617
|
+
// Input is empty → show only the new prefix OR empty
|
|
3618
|
+
newPhone = ''; // optionally: newPhone = country.prefix;
|
|
3619
|
+
}
|
|
3620
|
+
this.inputValue = newPhone;
|
|
3621
|
+
this.value = newPhone;
|
|
3622
|
+
this.onChange(newPhone);
|
|
3623
|
+
setTimeout(() => {
|
|
3624
|
+
if (this.inputField?.nativeElement) {
|
|
3625
|
+
this.inputField.nativeElement.value = newPhone;
|
|
3626
|
+
this.inputField.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
|
|
3627
|
+
}
|
|
3628
|
+
}, 0);
|
|
3597
3629
|
}
|
|
3598
3630
|
togglePasswordVisibility(event) {
|
|
3599
3631
|
if (!this.disabled && this.password) {
|
|
@@ -3631,7 +3663,7 @@ class BkInput {
|
|
|
3631
3663
|
useExisting: forwardRef(() => BkInput),
|
|
3632
3664
|
multi: true
|
|
3633
3665
|
}
|
|
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 [placeholder]=\"
|
|
3666
|
+
], 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 [placeholder]=\"placeHolderText\"\r\n [pattern]=\"pattern\"\r\n [autocomplete]=\"autoComplete\"\r\n [value]=\"inputValue\"\r\n [attr.max]=\"max\"\r\n [attr.min]=\"min\"\r\n [attr.step]=\"step\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [disabled]=\"disabled\"\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
3667
|
}
|
|
3636
3668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
|
|
3637
3669
|
type: Component,
|
|
@@ -3642,7 +3674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3642
3674
|
useExisting: forwardRef(() => BkInput),
|
|
3643
3675
|
multi: true
|
|
3644
3676
|
}
|
|
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 [placeholder]=\"
|
|
3677
|
+
], 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 [placeholder]=\"placeHolderText\"\r\n [pattern]=\"pattern\"\r\n [autocomplete]=\"autoComplete\"\r\n [value]=\"inputValue\"\r\n [attr.max]=\"max\"\r\n [attr.min]=\"min\"\r\n [attr.step]=\"step\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [disabled]=\"disabled\"\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
3678
|
}], propDecorators: { id: [{
|
|
3647
3679
|
type: Input
|
|
3648
3680
|
}], name: [{
|