@litigiovirtual/ius-design-components 1.0.289 → 1.0.290
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/esm2022/lib/custom-dropdown/custom-dropdown.component.mjs +139 -24
- package/fesm2022/litigiovirtual-ius-design-components.mjs +133 -20
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/custom-dropdown/custom-dropdown.component.d.ts +24 -4
- package/package.json +1 -1
|
@@ -3928,12 +3928,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3928
3928
|
}] } });
|
|
3929
3929
|
|
|
3930
3930
|
class CustomDropdownComponent {
|
|
3931
|
-
|
|
3931
|
+
get showList() {
|
|
3932
|
+
return this._overlayRef !== null;
|
|
3933
|
+
}
|
|
3934
|
+
constructor(_el, _overlay, _vcr) {
|
|
3935
|
+
this._el = _el;
|
|
3936
|
+
this._overlay = _overlay;
|
|
3937
|
+
this._vcr = _vcr;
|
|
3932
3938
|
this.isFocused = false;
|
|
3933
3939
|
this.isAlertText = false;
|
|
3934
|
-
this.showList = false;
|
|
3935
3940
|
this.hasClickedInside = false;
|
|
3936
3941
|
this.selected = false;
|
|
3942
|
+
this._overlayRef = null;
|
|
3943
|
+
this._scrollListener = () => { this._overlayRef?.updatePosition(); };
|
|
3944
|
+
this._debounceTimer = null;
|
|
3945
|
+
this._scrolledEndCooldown = false;
|
|
3937
3946
|
this.componentId = '';
|
|
3938
3947
|
this.required = false;
|
|
3939
3948
|
this.disabled = false;
|
|
@@ -3944,46 +3953,104 @@ class CustomDropdownComponent {
|
|
|
3944
3953
|
this.textBtnAdd = 'Agregar';
|
|
3945
3954
|
this.textInput = '';
|
|
3946
3955
|
this.element = '';
|
|
3956
|
+
this.debounceMs = 300;
|
|
3957
|
+
this.enableInfiniteScroll = false;
|
|
3958
|
+
this.loading = false;
|
|
3947
3959
|
this.onChangesValueEvent = new EventEmitter();
|
|
3948
3960
|
this.onEnterKey = new EventEmitter();
|
|
3949
3961
|
this.onAddElement = new EventEmitter();
|
|
3950
3962
|
this.onBlurEvent = new EventEmitter();
|
|
3963
|
+
this.onFocusEvent = new EventEmitter();
|
|
3964
|
+
this.onScrolledToEnd = new EventEmitter();
|
|
3951
3965
|
}
|
|
3952
3966
|
onClickOutside(event) {
|
|
3953
|
-
if (!this.hasClickedInside)
|
|
3967
|
+
if (!this.hasClickedInside) {
|
|
3954
3968
|
return;
|
|
3969
|
+
}
|
|
3955
3970
|
const target = event.target;
|
|
3956
|
-
|
|
3957
|
-
if (
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3971
|
+
// Click dentro del panel overlay (opciones o "agregar elemento") → no cerrar
|
|
3972
|
+
if (this._overlayRef?.overlayElement.contains(target)) {
|
|
3973
|
+
return;
|
|
3974
|
+
}
|
|
3975
|
+
// Click dentro del textfield → no cerrar
|
|
3976
|
+
const textfield = this._el.nativeElement.querySelector('.container-textfield');
|
|
3977
|
+
if (textfield?.contains(target)) {
|
|
3978
|
+
return;
|
|
3979
|
+
}
|
|
3980
|
+
this.closeList();
|
|
3981
|
+
}
|
|
3982
|
+
closeList(event) {
|
|
3983
|
+
if (event) {
|
|
3984
|
+
event.stopImmediatePropagation();
|
|
3985
|
+
}
|
|
3986
|
+
this.isFocused = false;
|
|
3987
|
+
this._closePanel();
|
|
3988
|
+
if (!this.selected && this.required) {
|
|
3989
|
+
this.isAlertText = true;
|
|
3990
|
+
}
|
|
3991
|
+
else {
|
|
3992
|
+
this.isAlertText = false;
|
|
3961
3993
|
}
|
|
3994
|
+
this.onBlurEvent.emit();
|
|
3962
3995
|
}
|
|
3963
3996
|
onInput() {
|
|
3964
|
-
if (this.selected)
|
|
3997
|
+
if (this.selected) {
|
|
3965
3998
|
this.selected = false;
|
|
3966
|
-
|
|
3999
|
+
}
|
|
4000
|
+
if (this.debounceMs <= 0) {
|
|
4001
|
+
this.onChangesValueEvent.emit(this.textInput);
|
|
4002
|
+
return;
|
|
4003
|
+
}
|
|
4004
|
+
if (this._debounceTimer) {
|
|
4005
|
+
clearTimeout(this._debounceTimer);
|
|
4006
|
+
}
|
|
4007
|
+
this._debounceTimer = setTimeout(() => {
|
|
4008
|
+
this.onChangesValueEvent.emit(this.textInput);
|
|
4009
|
+
}, this.debounceMs);
|
|
4010
|
+
}
|
|
4011
|
+
onListScroll(event) {
|
|
4012
|
+
if (!this.enableInfiniteScroll) {
|
|
4013
|
+
return;
|
|
4014
|
+
}
|
|
4015
|
+
const el = event.target;
|
|
4016
|
+
const threshold = 48;
|
|
4017
|
+
const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
|
|
4018
|
+
if (!nearBottom || this._scrolledEndCooldown) {
|
|
4019
|
+
return;
|
|
4020
|
+
}
|
|
4021
|
+
this._scrolledEndCooldown = true;
|
|
4022
|
+
this.onScrolledToEnd.emit();
|
|
4023
|
+
setTimeout(() => { this._scrolledEndCooldown = false; }, 300);
|
|
3967
4024
|
}
|
|
3968
4025
|
onFocus() {
|
|
4026
|
+
if (this.disabled) {
|
|
4027
|
+
return;
|
|
4028
|
+
}
|
|
3969
4029
|
this.isFocused = true;
|
|
3970
|
-
this.showList = true;
|
|
3971
4030
|
this.hasClickedInside = true;
|
|
4031
|
+
if (!this.showList) {
|
|
4032
|
+
this._openPanel();
|
|
4033
|
+
}
|
|
4034
|
+
this.onFocusEvent.emit();
|
|
3972
4035
|
}
|
|
3973
4036
|
onBlur() {
|
|
3974
4037
|
this.isFocused = false;
|
|
4038
|
+
if (this.showList) {
|
|
4039
|
+
return;
|
|
4040
|
+
}
|
|
3975
4041
|
if (this.required) {
|
|
3976
4042
|
this.isAlertText = this.textInput === '';
|
|
3977
4043
|
}
|
|
3978
|
-
this.onBlurEvent.emit();
|
|
3979
4044
|
}
|
|
3980
4045
|
onKeyPress(event) {
|
|
3981
|
-
if (event.key === 'Enter')
|
|
4046
|
+
if (event.key === 'Enter') {
|
|
3982
4047
|
this.addText();
|
|
4048
|
+
}
|
|
3983
4049
|
}
|
|
3984
4050
|
onKeyPressAddElement(event) {
|
|
3985
|
-
if (event.key === 'Enter')
|
|
4051
|
+
if (event.key === 'Enter') {
|
|
3986
4052
|
this.addElementText();
|
|
4053
|
+
}
|
|
3987
4054
|
}
|
|
3988
4055
|
onClickAddElement() {
|
|
3989
4056
|
if (this.element.trim() !== '') {
|
|
@@ -4006,13 +4073,46 @@ class CustomDropdownComponent {
|
|
|
4006
4073
|
}
|
|
4007
4074
|
}
|
|
4008
4075
|
onSelectOption() {
|
|
4076
|
+
this.selected = true;
|
|
4009
4077
|
this.isFocused = false;
|
|
4010
|
-
this.
|
|
4078
|
+
this._closePanel();
|
|
4011
4079
|
this.isAlertText = false;
|
|
4012
|
-
this.selected = true;
|
|
4013
4080
|
}
|
|
4014
|
-
|
|
4015
|
-
|
|
4081
|
+
_openPanel() {
|
|
4082
|
+
const textfield = this._el.nativeElement.querySelector('.container-textfield');
|
|
4083
|
+
const anchor = textfield ?? this._el;
|
|
4084
|
+
const positionStrategy = this._overlay
|
|
4085
|
+
.position()
|
|
4086
|
+
.flexibleConnectedTo(anchor)
|
|
4087
|
+
.withFlexibleDimensions(false)
|
|
4088
|
+
.withPush(false)
|
|
4089
|
+
.withPositions([
|
|
4090
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
|
|
4091
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
|
|
4092
|
+
]);
|
|
4093
|
+
this._overlayRef = this._overlay.create({
|
|
4094
|
+
positionStrategy,
|
|
4095
|
+
scrollStrategy: this._overlay.scrollStrategies.reposition(),
|
|
4096
|
+
width: (textfield ?? this._el.nativeElement).getBoundingClientRect().width,
|
|
4097
|
+
});
|
|
4098
|
+
this._overlayRef.attach(new TemplatePortal(this.listPanel, this._vcr));
|
|
4099
|
+
window.addEventListener('scroll', this._scrollListener, true);
|
|
4100
|
+
}
|
|
4101
|
+
_closePanel() {
|
|
4102
|
+
if (this._overlayRef) {
|
|
4103
|
+
this._overlayRef.dispose();
|
|
4104
|
+
this._overlayRef = null;
|
|
4105
|
+
window.removeEventListener('scroll', this._scrollListener, true);
|
|
4106
|
+
}
|
|
4107
|
+
}
|
|
4108
|
+
ngOnDestroy() {
|
|
4109
|
+
if (this._debounceTimer) {
|
|
4110
|
+
clearTimeout(this._debounceTimer);
|
|
4111
|
+
}
|
|
4112
|
+
this._closePanel();
|
|
4113
|
+
}
|
|
4114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CustomDropdownComponent, isStandalone: true, selector: "ius-custom-dropdown", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", error: "error", labelSuperior: "labelSuperior", labelInferior: "labelInferior", errorText: "errorText", labelInput: "labelInput", iconInput: "iconInput", placeholderAddText: "placeholderAddText", iconBtnAdd: "iconBtnAdd", textBtnAdd: "textBtnAdd", textInput: "textInput", element: "element", debounceMs: "debounceMs", enableInfiniteScroll: "enableInfiniteScroll", loading: "loading" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey", onAddElement: "onAddElement", onBlurEvent: "onBlurEvent", onFocusEvent: "onFocusEvent", onScrolledToEnd: "onScrolledToEnd" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "listPanel", first: true, predicate: ["listPanel"], descendants: true }], ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n\n <!-- Label superior -->\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{ disabled: disabled }\">\n @if (!disabled && required) {\n <div class=\"icon-dot\"></div>\n }\n <span>{{ labelSuperior }}</span>\n @if (!disabled && showHelpText) {\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n\n <!-- Input principal -->\n <div\n class=\"container-textfield\"\n [ngClass]=\"{\n disabled: disabled,\n focused: isFocused,\n alert: (!isFocused && isAlertText && !disabled) || (error && !disabled)\n }\"\n (click)=\"onFocus()\"\n >\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input\n type=\"text\"\n [(ngModel)]=\"textInput\"\n [placeholder]=\"labelInput\"\n [disabled]=\"disabled\"\n (input)=\"onInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\"\n />\n <div class=\"cnt-icon-right\">\n @if (!showList) {\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n } @else {\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n\n <!-- Label inferior -->\n @if (labelInferior && isFocused && !error) {\n <span class=\"label-inf\">{{ labelInferior }}</span>\n }\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\n <span class=\"label-inf\" [ngClass]=\"{ alert: (!isFocused && isAlertText && !disabled) || (error && !disabled) }\">\n {{ errorText ?? labelInferior }}\n </span>\n }\n\n <!-- Lista de opciones (CDK overlay) -->\n <ng-template #listPanel>\n <div class=\"container-options\">\n <div class=\"container-list scrollable-small\" (scroll)=\"onListScroll($event)\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n @if (loading) {\n <div class=\"cnt-loading-option\">Cargando\u2026</div>\n }\n </div>\n <ius-simple-divider></ius-simple-divider>\n <div class=\"add-data\">\n <div class=\"container-text\">\n <input\n type=\"text\"\n class=\"input-text\"\n [(ngModel)]=\"element\"\n (keypress)=\"onKeyPressAddElement($event)\"\n [placeholder]=\"placeholderAddText\"\n />\n </div>\n <div class=\"button-add-option\">\n <ius-button-standard-tertiary\n [iconName]=\"iconBtnAdd\"\n (click)=\"onClickAddElement()\"\n >\n {{ textBtnAdd }}\n </ius-button-standard-tertiary>\n </div>\n </div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}.icon-color-help{color:#8c8c8c}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-options{width:100%;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.container-list{max-height:144px;display:flex;flex-direction:column;margin-top:4px;overflow-y:auto}.add-data{display:flex;padding-top:8px;padding-bottom:8px;align-items:center;gap:10px;width:100%;background:#fff;border-radius:8px}.add-data .container-text{display:flex;width:60%;align-items:flex-start;gap:4px}.add-data .container-text .input-text{width:100%;display:flex;margin-left:10px;padding:12px;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background:#f5f5f5}.add-data .button-add-option{margin-right:10px;width:40%}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
|
|
4016
4116
|
}
|
|
4017
4117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
|
|
4018
4118
|
type: Component,
|
|
@@ -4022,8 +4122,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4022
4122
|
CommonModule,
|
|
4023
4123
|
SimpleDividerComponent,
|
|
4024
4124
|
ButtonStandardTertiaryComponent
|
|
4025
|
-
], template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
4026
|
-
}], propDecorators: {
|
|
4125
|
+
], template: "<div class=\"container-general\" [id]=\"componentId\">\n\n <!-- Label superior -->\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{ disabled: disabled }\">\n @if (!disabled && required) {\n <div class=\"icon-dot\"></div>\n }\n <span>{{ labelSuperior }}</span>\n @if (!disabled && showHelpText) {\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n\n <!-- Input principal -->\n <div\n class=\"container-textfield\"\n [ngClass]=\"{\n disabled: disabled,\n focused: isFocused,\n alert: (!isFocused && isAlertText && !disabled) || (error && !disabled)\n }\"\n (click)=\"onFocus()\"\n >\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input\n type=\"text\"\n [(ngModel)]=\"textInput\"\n [placeholder]=\"labelInput\"\n [disabled]=\"disabled\"\n (input)=\"onInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\"\n />\n <div class=\"cnt-icon-right\">\n @if (!showList) {\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n } @else {\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n\n <!-- Label inferior -->\n @if (labelInferior && isFocused && !error) {\n <span class=\"label-inf\">{{ labelInferior }}</span>\n }\n @if ((errorText || labelInferior) && ((!isFocused && isAlertText && !disabled) || (error && !disabled))) {\n <span class=\"label-inf\" [ngClass]=\"{ alert: (!isFocused && isAlertText && !disabled) || (error && !disabled) }\">\n {{ errorText ?? labelInferior }}\n </span>\n }\n\n <!-- Lista de opciones (CDK overlay) -->\n <ng-template #listPanel>\n <div class=\"container-options\">\n <div class=\"container-list scrollable-small\" (scroll)=\"onListScroll($event)\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n @if (loading) {\n <div class=\"cnt-loading-option\">Cargando\u2026</div>\n }\n </div>\n <ius-simple-divider></ius-simple-divider>\n <div class=\"add-data\">\n <div class=\"container-text\">\n <input\n type=\"text\"\n class=\"input-text\"\n [(ngModel)]=\"element\"\n (keypress)=\"onKeyPressAddElement($event)\"\n [placeholder]=\"placeholderAddText\"\n />\n </div>\n <div class=\"button-add-option\">\n <ius-button-standard-tertiary\n [iconName]=\"iconBtnAdd\"\n (click)=\"onClickAddElement()\"\n >\n {{ textBtnAdd }}\n </ius-button-standard-tertiary>\n </div>\n </div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}.icon-color-help{color:#8c8c8c}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-options{width:100%;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.container-list{max-height:144px;display:flex;flex-direction:column;margin-top:4px;overflow-y:auto}.add-data{display:flex;padding-top:8px;padding-bottom:8px;align-items:center;gap:10px;width:100%;background:#fff;border-radius:8px}.add-data .container-text{display:flex;width:60%;align-items:flex-start;gap:4px}.add-data .container-text .input-text{width:100%;display:flex;margin-left:10px;padding:12px;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background:#f5f5f5}.add-data .button-add-option{margin-right:10px;width:40%}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
4126
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { listPanel: [{
|
|
4127
|
+
type: ViewChild,
|
|
4128
|
+
args: ['listPanel']
|
|
4129
|
+
}], componentId: [{
|
|
4027
4130
|
type: Input,
|
|
4028
4131
|
args: [{ required: true }]
|
|
4029
4132
|
}], required: [{
|
|
@@ -4054,6 +4157,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4054
4157
|
type: Input
|
|
4055
4158
|
}], element: [{
|
|
4056
4159
|
type: Input
|
|
4160
|
+
}], debounceMs: [{
|
|
4161
|
+
type: Input
|
|
4162
|
+
}], enableInfiniteScroll: [{
|
|
4163
|
+
type: Input
|
|
4164
|
+
}], loading: [{
|
|
4165
|
+
type: Input
|
|
4057
4166
|
}], onChangesValueEvent: [{
|
|
4058
4167
|
type: Output
|
|
4059
4168
|
}], onEnterKey: [{
|
|
@@ -4062,6 +4171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4062
4171
|
type: Output
|
|
4063
4172
|
}], onBlurEvent: [{
|
|
4064
4173
|
type: Output
|
|
4174
|
+
}], onFocusEvent: [{
|
|
4175
|
+
type: Output
|
|
4176
|
+
}], onScrolledToEnd: [{
|
|
4177
|
+
type: Output
|
|
4065
4178
|
}], onClickOutside: [{
|
|
4066
4179
|
type: HostListener,
|
|
4067
4180
|
args: ['document:click', ['$event']]
|