ngx-opalbytes-components 1.14.1 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -216,7 +216,7 @@ class CaoBaseInput {
|
|
|
216
216
|
multi: true,
|
|
217
217
|
},
|
|
218
218
|
provideNgxMask(),
|
|
219
|
-
], ngImport: i0, template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\n </div>\n } } @switch (type) { @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date]
|
|
219
|
+
], ngImport: i0, template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\n </div>\n } } @switch (type) { \n @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } \n @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date].invalid::-webkit-calendar-picker-indicator{border-left:1px solid var(--error)}[type=date].valid::-webkit-calendar-picker-indicator{border-left:1px solid var(--success)}.input-date-disabled{background:url(/assets/images/svg/icon-date-border.svg) no-repeat right 12px center;background-size:30px;border:none;border-radius:8px;background-color:var(--input-background);padding:12px 40px 12px 16px;width:100%;color:var(--input-text)}.input-date-disabled::placeholder{color:var(--input-text)}.input-secondary{width:100%;border:1px solid var(--data-bg)!important;background-color:var(--white)!important}.input-secondary.invalid{border:1px solid var(--error)!important}.input-secondary.valid{border:1px solid var(--success)!important}.input-wrapper .invalid{border:1px solid var(--error)}.input-wrapper .valid{border:1px solid var(--success)}.input-border-primary{border:1px solid var(--primary)!important;background-color:var(--white)!important}.input-border-primary.invalid{border:1px solid var(--error)!important}.input-border-primary.valid{border:1px solid var(--success)!important}::ng-deep .custom-arrow-tooltip{background-color:var(--color-tooltip);color:var(--white);padding:0 4px;border-radius:6px;font-size:12px;position:relative;text-align:center;max-width:260px;box-shadow:0 2px 10px #0000004d}::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip:after{content:\"\";position:absolute;top:-6px;rotate:180deg;right:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--color-tooltip)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
|
|
220
220
|
}
|
|
221
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseInput, decorators: [{
|
|
222
222
|
type: Component,
|
|
@@ -227,7 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
227
227
|
multi: true,
|
|
228
228
|
},
|
|
229
229
|
provideNgxMask(),
|
|
230
|
-
], template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\n </div>\n } } @switch (type) { @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date]
|
|
230
|
+
], template: "<div class=\"form-field input-component\" [class.search-mode]=\"searchMode\">\n <div class=\"input-wrapper\" [class.has-leading-icon]=\"_leadingIcon\" [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n @if (_leadingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\"/>\n </div>\n } } @switch (type) { \n @case ('textarea') {\n <textarea matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [rows]=\"textareaRows\" [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\"\n [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"></textarea>\n } \n @default {\n <input matTooltip=\"{{ tooltip }}\" matTooltipPosition=\"below\" matTooltipClass=\"custom-arrow-tooltip\" [attr.data-cy]=\"dataCy\" [type]=\"type\"\n [placeholder]=\"placeholder\" [disabled]=\"isDisabled\" [ngClass]=\"[\n inputClass,\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\" [attr.maxlength]=\"maxLength\"\n [mask]=\"mask\" [allowNegativeNumbers]=\"allowNegativeNumbers\" [thousandSeparator]=\"thousandSeparator\" [decimalMarker]=\"decimalMarker\" [separatorLimit]=\"separatorLimit\" [(ngModel)]=\"value\" (input)=\"onInput($event)\"\n (change)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n } } @if (_trailingIcon) { @if (isLucideIcon) {\n <div class=\"icon\">\n <svg [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\">\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n } } \n </div>\n</div>", styles: [".form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;white-space:nowrap}.input-wrapper{position:relative;width:100%;height:100%}.input-wrapper input,.input-wrapper textarea{width:100%;height:100%;border:none;background-color:var(--input-background);border-radius:8px;padding:14px 10px;color:var(--text-color-input);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--input-text)}.input-wrapper input:focus,.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper.has-leading-icon input{padding-left:33px}.input-wrapper.has-trailing-icon input{padding-right:30px}.input-wrapper img{width:100%;height:auto}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:flex;align-items:center;justify-content:center}.input-wrapper.has-leading-icon .icon:first-of-type{left:8px}.input-wrapper.has-trailing-icon .icon:last-of-type{right:8px}.input-wrapper .search-icon-border{position:absolute;top:50%;right:14px;transform:translateY(-50%);border-left:1px solid var(--line-color);padding-left:8px;height:24px;display:flex;align-items:center}.input-wrapper .search-icon{width:16px;height:24px;cursor:pointer;transition:filter .2s}.input-wrapper .search-icon:hover{filter:invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%)}[type=date]{height:43px;padding:14px 0 14px 12px!important}[type=date].invalid::-webkit-calendar-picker-indicator{border-left:1px solid var(--error)}[type=date].valid::-webkit-calendar-picker-indicator{border-left:1px solid var(--success)}.input-date-disabled{background:url(/assets/images/svg/icon-date-border.svg) no-repeat right 12px center;background-size:30px;border:none;border-radius:8px;background-color:var(--input-background);padding:12px 40px 12px 16px;width:100%;color:var(--input-text)}.input-date-disabled::placeholder{color:var(--input-text)}.input-secondary{width:100%;border:1px solid var(--data-bg)!important;background-color:var(--white)!important}.input-secondary.invalid{border:1px solid var(--error)!important}.input-secondary.valid{border:1px solid var(--success)!important}.input-wrapper .invalid{border:1px solid var(--error)}.input-wrapper .valid{border:1px solid var(--success)}.input-border-primary{border:1px solid var(--primary)!important;background-color:var(--white)!important}.input-border-primary.invalid{border:1px solid var(--error)!important}.input-border-primary.valid{border:1px solid var(--success)!important}::ng-deep .custom-arrow-tooltip{background-color:var(--color-tooltip);color:var(--white);padding:0 4px;border-radius:6px;font-size:12px;position:relative;text-align:center;max-width:260px;box-shadow:0 2px 10px #0000004d}::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip:after{content:\"\";position:absolute;top:-6px;rotate:180deg;right:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--color-tooltip)}\n"] }]
|
|
231
231
|
}], propDecorators: { type: [{
|
|
232
232
|
type: Input
|
|
233
233
|
}], placeholder: [{
|
|
@@ -367,9 +367,12 @@ class CaoAutocompleteComponent {
|
|
|
367
367
|
isLucideOptionIcon;
|
|
368
368
|
autocompleteBgColor = 'white';
|
|
369
369
|
strokeWidthIcon = 1;
|
|
370
|
+
isDisabled = false;
|
|
370
371
|
itemSelected = new EventEmitter();
|
|
371
372
|
blurEvent = new EventEmitter();
|
|
372
373
|
focusEvent = new EventEmitter();
|
|
374
|
+
leadingIconClick = new EventEmitter();
|
|
375
|
+
trailingIconClick = new EventEmitter();
|
|
373
376
|
autocompleteTrigger;
|
|
374
377
|
internalControl = new FormControl("");
|
|
375
378
|
filteredOptions$;
|
|
@@ -418,16 +421,45 @@ class CaoAutocompleteComponent {
|
|
|
418
421
|
this.blurEvent.emit();
|
|
419
422
|
this.onTouched();
|
|
420
423
|
}
|
|
424
|
+
selectItem(option) {
|
|
425
|
+
this.selectedOption = option;
|
|
426
|
+
this.onChange(option);
|
|
427
|
+
this.itemSelected.emit(option);
|
|
428
|
+
}
|
|
421
429
|
onOptionSelected(event) {
|
|
422
|
-
this.
|
|
423
|
-
this.onChange(event.option.value);
|
|
424
|
-
this.itemSelected.emit(event.option.value);
|
|
430
|
+
this.selectItem(event.option.value);
|
|
425
431
|
this.onTouched();
|
|
432
|
+
this.closePanel();
|
|
433
|
+
}
|
|
434
|
+
selectOption(option) {
|
|
435
|
+
this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
|
|
436
|
+
this.selectItem(option);
|
|
437
|
+
this.closePanel();
|
|
438
|
+
}
|
|
439
|
+
closePanel() {
|
|
426
440
|
setTimeout(() => {
|
|
427
441
|
this.autocompleteTrigger?.closePanel();
|
|
428
442
|
this.el.nativeElement.querySelector('input')?.blur();
|
|
429
443
|
}, 10);
|
|
430
444
|
}
|
|
445
|
+
clearSelection() {
|
|
446
|
+
this.selectedOption = null;
|
|
447
|
+
this.internalControl.setValue("", { emitEvent: false });
|
|
448
|
+
this.control.setValue(null, { emitEvent: true });
|
|
449
|
+
this.onChange(null);
|
|
450
|
+
this.onTouched();
|
|
451
|
+
setTimeout(() => {
|
|
452
|
+
this.autocompleteTrigger?.closePanel();
|
|
453
|
+
}, 0);
|
|
454
|
+
}
|
|
455
|
+
onLeadingIconClick(event) {
|
|
456
|
+
event.stopPropagation();
|
|
457
|
+
this.leadingIconClick.emit(event);
|
|
458
|
+
}
|
|
459
|
+
onTrailingIconClick(event) {
|
|
460
|
+
event.stopPropagation();
|
|
461
|
+
this.trailingIconClick.emit(event);
|
|
462
|
+
}
|
|
431
463
|
filter(value) {
|
|
432
464
|
const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
|
|
433
465
|
const currentOptions = this.options$.getValue();
|
|
@@ -507,13 +539,13 @@ class CaoAutocompleteComponent {
|
|
|
507
539
|
this.el.nativeElement.style.setProperty("--form-field-height", height);
|
|
508
540
|
}
|
|
509
541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent" }, providers: [
|
|
542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAutocompleteComponent, isStandalone: true, selector: "cao-autocomplete", inputs: { label: "label", placeholder: "placeholder", options: "options", control: "control", dataCy: "dataCy", controlName: "controlName", isLucideIcon: "isLucideIcon", iconColor: "iconColor", _leadingIcon: "_leadingIcon", _trailingIcon: "_trailingIcon", optionIcon: "optionIcon", optionIConColor: "optionIConColor", isLucideOptionIcon: "isLucideOptionIcon", autocompleteBgColor: "autocompleteBgColor", strokeWidthIcon: "strokeWidthIcon", isDisabled: "isDisabled" }, outputs: { itemSelected: "itemSelected", blurEvent: "blurEvent", focusEvent: "focusEvent", leadingIconClick: "leadingIconClick", trailingIconClick: "trailingIconClick" }, providers: [
|
|
511
543
|
{
|
|
512
544
|
provide: NG_VALUE_ACCESSOR,
|
|
513
545
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
514
546
|
multi: true,
|
|
515
547
|
},
|
|
516
|
-
], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n
|
|
548
|
+
], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n <div\n class=\"input-wrapper\"\n [class.has-leading-icon]=\"_leadingIcon\"\n [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n\n @if (_leadingIcon) {\n @if (isLucideIcon) {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n }\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n [attr.data-cy]=\"dataCy\"\n [ngClass]=\"[\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n\n @if (_trailingIcon) {\n @if (isLucideIcon) {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n }\n }\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"onOptionSelected($event)\">\n @for (option of filteredOptions$ | async; track option.id) {\n <mat-option class=\"option-item\" [value]=\"option\">\n {{ option.nome }}\n @if (optionIcon) {\n @if (isLucideOptionIcon) {\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"\" [src]=\"optionIcon\" />\n }\n }\n </mat-option>\n }\n </mat-autocomplete>\n\n </div>\n </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}.trailing-icon{right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
517
549
|
}
|
|
518
550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
519
551
|
type: Component,
|
|
@@ -530,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
530
562
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
531
563
|
multi: true,
|
|
532
564
|
},
|
|
533
|
-
], template: "<div class=\"form-field\">\n @if (label) {\n
|
|
565
|
+
], template: "<div class=\"form-field\">\n @if (label) {\n <label [for]=\"internalControl\">{{ label }}</label>\n }\n <mat-form-field appearance=\"outline\" class=\"rnv-autocomplete-mat-form-field autocomplete\">\n <div\n class=\"input-wrapper\"\n [class.has-leading-icon]=\"_leadingIcon\"\n [class.has-trailing-icon]=\"_trailingIcon\"\n [class.focused]=\"isFocused\">\n\n @if (_leadingIcon) {\n @if (isLucideIcon) {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_leadingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div class=\"icon\" \n tabindex=\"0\"\n (click)=\"onLeadingIconClick($event)\"\n (keydown.enter)=\"onLeadingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de in\u00EDcio\" [src]=\"_leadingIcon\" />\n </div>\n }\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n [attr.data-cy]=\"dataCy\"\n [ngClass]=\"[\n control?.touched && control?.invalid ? 'invalid' : '',\n control?.touched && control?.valid && control?.value ? 'valid' : ''\n ]\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n\n @if (_trailingIcon) {\n @if (isLucideIcon) {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"_trailingIcon\" [style.color]=\"iconColor\"></svg>\n </div>\n } @else {\n <div \n tabindex=\"0\"\n class=\"icon trailing-icon\" (click)=\"onTrailingIconClick($event)\"\n (keydown.enter)=\"onTrailingIconClick($event)\"\n >\n <img alt=\"\u00EDcone de fim\" [src]=\"_trailingIcon\" />\n </div>\n }\n }\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"onOptionSelected($event)\">\n @for (option of filteredOptions$ | async; track option.id) {\n <mat-option class=\"option-item\" [value]=\"option\">\n {{ option.nome }}\n @if (optionIcon) {\n @if (isLucideOptionIcon) {\n <svg [strokeWidth]=\"strokeWidthIcon\" [lucideIcon]=\"optionIcon\" [style.color]=\"iconColor\"></svg>\n } @else {\n <img alt=\"\" [src]=\"optionIcon\" />\n }\n }\n </mat-option>\n }\n </mat-autocomplete>\n\n </div>\n </mat-form-field>\n</div>", styles: ["@charset \"UTF-8\";:host{--mat-form-field-container-height: stretch;--mat-autocomplete-background-color: var(--autocomplete-bg-color, white);display:block}::ng-deep .rnv-autocomplete-mat-form-field{--mat-form-field-outlined-outline-color: transparent;--mat-form-field-outlined-hover-outline-color: transparent;--mat-form-field-outlined-focus-outline-color: transparent}.form-field{display:flex;flex-direction:column;width:100%;height:100%}label{font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.rnv-autocomplete-mat-form-field{width:100%;flex:1;min-height:0}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper{height:100%!important;flex:1;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-flex{height:100%;display:flex;align-items:stretch}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;display:flex;align-items:center;flex:1}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-infix input{height:auto!important;flex:1;padding:12px 0}::ng-deep .rnv-autocomplete-mat-form-field .mdc-list-item__primary-text{width:100%;display:flex;align-items:center;justify-content:space-between}.input-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center}.input-wrapper .icon{position:absolute;top:50%;transform:translateY(-50%);width:auto;height:auto;pointer-events:none;z-index:1}.input-wrapper.has-leading-icon input{padding-left:28px}.input-wrapper.has-trailing-icon input{padding-right:28px}::ng-deep .rnv-autocomplete-mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.mat-mdc-option{font-size:1rem;padding:6px 16px;text-transform:uppercase}.mat-mdc-autocomplete-panel{border-radius:8px;padding:12px 6px;box-shadow:0 2px 10px #0000001a}.trailing-icon{right:0}\n"] }]
|
|
534
566
|
}], propDecorators: { label: [{
|
|
535
567
|
type: Input
|
|
536
568
|
}], placeholder: [{
|
|
@@ -561,12 +593,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
561
593
|
type: Input
|
|
562
594
|
}], strokeWidthIcon: [{
|
|
563
595
|
type: Input
|
|
596
|
+
}], isDisabled: [{
|
|
597
|
+
type: Input
|
|
564
598
|
}], itemSelected: [{
|
|
565
599
|
type: Output
|
|
566
600
|
}], blurEvent: [{
|
|
567
601
|
type: Output
|
|
568
602
|
}], focusEvent: [{
|
|
569
603
|
type: Output
|
|
604
|
+
}], leadingIconClick: [{
|
|
605
|
+
type: Output
|
|
606
|
+
}], trailingIconClick: [{
|
|
607
|
+
type: Output
|
|
570
608
|
}], autocompleteTrigger: [{
|
|
571
609
|
type: ViewChild,
|
|
572
610
|
args: [MatAutocompleteTrigger]
|