@brickclay-org/ui 0.0.30 → 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 +54 -74
- package/fesm2022/brickclay-org-ui.mjs.map +1 -1
- package/index.d.ts +29 -16
- package/package.json +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,6 +3418,10 @@ 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';
|
|
@@ -3572,13 +3551,6 @@ class BkInput {
|
|
|
3572
3551
|
this.onChange(val); // propagate to parent form
|
|
3573
3552
|
this.input.emit(event); // emit raw event
|
|
3574
3553
|
}
|
|
3575
|
-
// handleInput(event: Event): void {
|
|
3576
|
-
// const val = (event.target as HTMLInputElement).value;
|
|
3577
|
-
// this.inputValue = val;
|
|
3578
|
-
// this.value = val;
|
|
3579
|
-
// this.onChange(val); // propagate to parent form
|
|
3580
|
-
// this.input.emit(event);
|
|
3581
|
-
// }
|
|
3582
3554
|
handleChange(event) {
|
|
3583
3555
|
this.change.emit(event); // emit raw change event
|
|
3584
3556
|
}
|
|
@@ -3656,14 +3628,14 @@ class BkInput {
|
|
|
3656
3628
|
return this.type;
|
|
3657
3629
|
}
|
|
3658
3630
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3659
|
-
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: [
|
|
3660
3632
|
provideNgxMask(),
|
|
3661
3633
|
{
|
|
3662
3634
|
provide: NG_VALUE_ACCESSOR,
|
|
3663
3635
|
useExisting: forwardRef(() => BkInput),
|
|
3664
3636
|
multi: true
|
|
3665
3637
|
}
|
|
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 [
|
|
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 }] });
|
|
3667
3639
|
}
|
|
3668
3640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
|
|
3669
3641
|
type: Component,
|
|
@@ -3674,7 +3646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3674
3646
|
useExisting: forwardRef(() => BkInput),
|
|
3675
3647
|
multi: true
|
|
3676
3648
|
}
|
|
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 [
|
|
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"] }]
|
|
3678
3650
|
}], propDecorators: { id: [{
|
|
3679
3651
|
type: Input
|
|
3680
3652
|
}], name: [{
|
|
@@ -3701,6 +3673,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3701
3673
|
type: Input
|
|
3702
3674
|
}], disabled: [{
|
|
3703
3675
|
type: Input
|
|
3676
|
+
}], tabIndex: [{
|
|
3677
|
+
type: Input
|
|
3678
|
+
}], readOnly: [{
|
|
3679
|
+
type: Input
|
|
3680
|
+
}], autoCapitalize: [{
|
|
3681
|
+
type: Input
|
|
3682
|
+
}], inputMode: [{
|
|
3683
|
+
type: Input
|
|
3704
3684
|
}], icon: [{
|
|
3705
3685
|
type: Input
|
|
3706
3686
|
}], iconSrc: [{
|