ngx-opalbytes-components 1.14.1 → 1.16.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
|
-
import { CommonModule, NgOptimizedImage } from '@angular/common';
|
|
2
|
+
import { CommonModule, NgOptimizedImage, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, Injectable, ContentChildren } from '@angular/core';
|
|
4
|
+
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, NgModule, Injectable, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding } from '@angular/core';
|
|
5
5
|
import * as i3 from '@angular/material/tooltip';
|
|
6
6
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
7
7
|
import { LucideDynamicIcon } from '@lucide/angular';
|
|
@@ -16,7 +16,7 @@ import * as i4 from '@angular/material/input';
|
|
|
16
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
17
|
import * as i5 from '@angular/material/autocomplete';
|
|
18
18
|
import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
|
19
|
-
import { BehaviorSubject, combineLatest, startWith, map, Subject } from 'rxjs';
|
|
19
|
+
import { BehaviorSubject, combineLatest, startWith, map, Subject, Subscription } from 'rxjs';
|
|
20
20
|
import * as i4$1 from '@angular/material/icon';
|
|
21
21
|
import { MatIconModule } from '@angular/material/icon';
|
|
22
22
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
@@ -87,11 +87,11 @@ class CaoBaseButtonComponent {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
|
|
90
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBaseButtonComponent, isStandalone: true, selector: "cao-button", inputs: { buttonText: "buttonText", isDarkMode: "isDarkMode", isDisabled: "isDisabled", isLoading: "isLoading", btnClass: "btnClass", tooltip: "tooltip", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isLucideIcon: "isLucideIcon", dataCy: "dataCy", iconColor: "iconColor", strokeWidthIcon: "strokeWidthIcon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
|
|
91
91
|
}
|
|
92
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBaseButtonComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
|
-
args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
|
|
94
|
+
args: [{ standalone: true, selector: "cao-button", imports: [CommonModule, MatTooltipModule, LucideDynamicIcon], template: "<button\n type=\"button\"\n class=\"base-button\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"custom-arrow-tooltip\"\n [matTooltip]=\"tooltip\"\n [matTooltipDisabled]=\"!tooltip\"\n [class.dark-mode]=\"isDarkMode\"\n [class.disabled]=\"isDisabled\"\n [class.loading]=\"isLoading\"\n [disabled]=\"isDisabled || isLoading\"\n [attr.data-cy]=\"dataCy\"\n (click)=\"onClick()\">\n @if (leadingIcon) {\n <span class=\"leading-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"leadingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"leadingIcon\" />\n }\n </span>\n } {{ buttonText }} @if (trailingIcon) {\n <span class=\"trailing-icon\">\n @if (isLucideIcon) {\n <svg [lucideIcon]=\"trailingIcon\" [style.color]=\"iconColor\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"trailingIcon\" />\n }\n </span>\n } @if (isLoading) {\n <span class=\"loader\"></span>\n }\n</button>\n", styles: [".base-button{display:flex;gap:5px;width:100%;align-items:center;justify-content:center;cursor:pointer}.base-button.disabled{cursor:not-allowed}.base-button.loading{cursor:progress}\n"] }]
|
|
95
95
|
}], propDecorators: { buttonClick: [{
|
|
96
96
|
type: Output
|
|
97
97
|
}], buttonText: [{
|
|
@@ -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$;
|
|
@@ -417,17 +420,49 @@ class CaoAutocompleteComponent {
|
|
|
417
420
|
this.isFocused = false;
|
|
418
421
|
this.blurEvent.emit();
|
|
419
422
|
this.onTouched();
|
|
423
|
+
if (this.selectedOption) {
|
|
424
|
+
this.internalControl.setValue(this.displayFn(this.selectedOption), { emitEvent: false });
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
selectItem(option) {
|
|
428
|
+
this.selectedOption = option;
|
|
429
|
+
this.internalControl.setValue(this.displayFn(option), { emitEvent: false });
|
|
430
|
+
this.onChange(option);
|
|
431
|
+
this.itemSelected.emit(option);
|
|
420
432
|
}
|
|
421
433
|
onOptionSelected(event) {
|
|
422
|
-
this.
|
|
423
|
-
this.onChange(event.option.value);
|
|
424
|
-
this.itemSelected.emit(event.option.value);
|
|
434
|
+
this.selectItem(event.option.value);
|
|
425
435
|
this.onTouched();
|
|
436
|
+
this.closePanel();
|
|
437
|
+
}
|
|
438
|
+
selectOption(option) {
|
|
439
|
+
this.selectItem(option);
|
|
440
|
+
this.closePanel();
|
|
441
|
+
}
|
|
442
|
+
closePanel() {
|
|
426
443
|
setTimeout(() => {
|
|
427
444
|
this.autocompleteTrigger?.closePanel();
|
|
428
445
|
this.el.nativeElement.querySelector('input')?.blur();
|
|
429
446
|
}, 10);
|
|
430
447
|
}
|
|
448
|
+
clearSelection() {
|
|
449
|
+
this.selectedOption = null;
|
|
450
|
+
this.internalControl.setValue("", { emitEvent: false });
|
|
451
|
+
this.control.setValue(null, { emitEvent: true });
|
|
452
|
+
this.onChange(null);
|
|
453
|
+
this.onTouched();
|
|
454
|
+
setTimeout(() => {
|
|
455
|
+
this.autocompleteTrigger?.closePanel();
|
|
456
|
+
}, 0);
|
|
457
|
+
}
|
|
458
|
+
onLeadingIconClick(event) {
|
|
459
|
+
event.stopPropagation();
|
|
460
|
+
this.leadingIconClick.emit(event);
|
|
461
|
+
}
|
|
462
|
+
onTrailingIconClick(event) {
|
|
463
|
+
event.stopPropagation();
|
|
464
|
+
this.trailingIconClick.emit(event);
|
|
465
|
+
}
|
|
431
466
|
filter(value) {
|
|
432
467
|
const filterValue = (typeof value === "string" ? value : value?.nome)?.toLowerCase() || "";
|
|
433
468
|
const currentOptions = this.options$.getValue();
|
|
@@ -507,13 +542,13 @@ class CaoAutocompleteComponent {
|
|
|
507
542
|
this.el.nativeElement.style.setProperty("--form-field-height", height);
|
|
508
543
|
}
|
|
509
544
|
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: [
|
|
545
|
+
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
546
|
{
|
|
512
547
|
provide: NG_VALUE_ACCESSOR,
|
|
513
548
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
514
549
|
multi: true,
|
|
515
550
|
},
|
|
516
|
-
], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field\">\n @if (label) {\n
|
|
551
|
+
], 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 (keydown.escape)=\"clearSelection()\" />\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
552
|
}
|
|
518
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAutocompleteComponent, decorators: [{
|
|
519
554
|
type: Component,
|
|
@@ -530,7 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
530
565
|
useExisting: forwardRef(() => CaoAutocompleteComponent),
|
|
531
566
|
multi: true,
|
|
532
567
|
},
|
|
533
|
-
], template: "<div class=\"form-field\">\n @if (label) {\n
|
|
568
|
+
], 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 (keydown.escape)=\"clearSelection()\" />\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
569
|
}], propDecorators: { label: [{
|
|
535
570
|
type: Input
|
|
536
571
|
}], placeholder: [{
|
|
@@ -561,12 +596,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
561
596
|
type: Input
|
|
562
597
|
}], strokeWidthIcon: [{
|
|
563
598
|
type: Input
|
|
599
|
+
}], isDisabled: [{
|
|
600
|
+
type: Input
|
|
564
601
|
}], itemSelected: [{
|
|
565
602
|
type: Output
|
|
566
603
|
}], blurEvent: [{
|
|
567
604
|
type: Output
|
|
568
605
|
}], focusEvent: [{
|
|
569
606
|
type: Output
|
|
607
|
+
}], leadingIconClick: [{
|
|
608
|
+
type: Output
|
|
609
|
+
}], trailingIconClick: [{
|
|
610
|
+
type: Output
|
|
570
611
|
}], autocompleteTrigger: [{
|
|
571
612
|
type: ViewChild,
|
|
572
613
|
args: [MatAutocompleteTrigger]
|
|
@@ -2384,6 +2425,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2384
2425
|
type: Output
|
|
2385
2426
|
}] } });
|
|
2386
2427
|
|
|
2428
|
+
class CaoTabContentDirective {
|
|
2429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2430
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabContentDirective, isStandalone: true, selector: "[caoTabContent]", ngImport: i0 });
|
|
2431
|
+
}
|
|
2432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabContentDirective, decorators: [{
|
|
2433
|
+
type: Directive,
|
|
2434
|
+
args: [{
|
|
2435
|
+
selector: '[caoTabContent]',
|
|
2436
|
+
standalone: true,
|
|
2437
|
+
}]
|
|
2438
|
+
}] });
|
|
2439
|
+
|
|
2440
|
+
class CaoTabLabelDirective {
|
|
2441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2442
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabLabelDirective, isStandalone: true, selector: "[caoTabLabel]", ngImport: i0 });
|
|
2443
|
+
}
|
|
2444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabLabelDirective, decorators: [{
|
|
2445
|
+
type: Directive,
|
|
2446
|
+
args: [{
|
|
2447
|
+
selector: '[caoTabLabel]',
|
|
2448
|
+
standalone: true,
|
|
2449
|
+
}]
|
|
2450
|
+
}] });
|
|
2451
|
+
|
|
2452
|
+
class CaoTabPanel {
|
|
2453
|
+
label = '';
|
|
2454
|
+
isLucideIcon = true;
|
|
2455
|
+
trailingIcon = null;
|
|
2456
|
+
leadingIcon = null;
|
|
2457
|
+
isDisabled = false;
|
|
2458
|
+
labelTemplate;
|
|
2459
|
+
lazyContent;
|
|
2460
|
+
content;
|
|
2461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2462
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CaoTabPanel, isStandalone: true, selector: "cao-tab-panel", inputs: { label: "label", isLucideIcon: "isLucideIcon", trailingIcon: "trailingIcon", leadingIcon: "leadingIcon", isDisabled: "isDisabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CaoTabLabelDirective, descendants: true, read: TemplateRef }, { propertyName: "lazyContent", first: true, predicate: CaoTabContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "content", first: true, predicate: ["implicitContent"], descendants: true, static: true }], ngImport: i0, template: `
|
|
2463
|
+
<ng-template #implicitContent>
|
|
2464
|
+
<ng-content />
|
|
2465
|
+
</ng-template>
|
|
2466
|
+
`, isInline: true, styles: [""] });
|
|
2467
|
+
}
|
|
2468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabPanel, decorators: [{
|
|
2469
|
+
type: Component,
|
|
2470
|
+
args: [{ selector: "cao-tab-panel", imports: [], template: `
|
|
2471
|
+
<ng-template #implicitContent>
|
|
2472
|
+
<ng-content />
|
|
2473
|
+
</ng-template>
|
|
2474
|
+
` }]
|
|
2475
|
+
}], propDecorators: { label: [{
|
|
2476
|
+
type: Input
|
|
2477
|
+
}], isLucideIcon: [{
|
|
2478
|
+
type: Input
|
|
2479
|
+
}], trailingIcon: [{
|
|
2480
|
+
type: Input
|
|
2481
|
+
}], leadingIcon: [{
|
|
2482
|
+
type: Input
|
|
2483
|
+
}], isDisabled: [{
|
|
2484
|
+
type: Input
|
|
2485
|
+
}], labelTemplate: [{
|
|
2486
|
+
type: ContentChild,
|
|
2487
|
+
args: [CaoTabLabelDirective, { read: TemplateRef }]
|
|
2488
|
+
}], lazyContent: [{
|
|
2489
|
+
type: ContentChild,
|
|
2490
|
+
args: [CaoTabContentDirective, { read: TemplateRef }]
|
|
2491
|
+
}], content: [{
|
|
2492
|
+
type: ViewChild,
|
|
2493
|
+
args: ['implicitContent', { static: true }]
|
|
2494
|
+
}] } });
|
|
2495
|
+
|
|
2496
|
+
class CaoTabGroup {
|
|
2497
|
+
get _hostStyles() {
|
|
2498
|
+
return {
|
|
2499
|
+
'--caoTabLabelHeight': this.labelHeight,
|
|
2500
|
+
'--caoTabLabelPx': this.labelPaddingX,
|
|
2501
|
+
'--caoTabLabelGap': this.labelGap,
|
|
2502
|
+
'--caoTabColorText': this.colorText,
|
|
2503
|
+
'--caoTabColorActive': this.colorActive,
|
|
2504
|
+
'--caoTabColorHoverBg': this.colorHoverBg,
|
|
2505
|
+
'--caoTabColorDisabled': this.colorDisabled,
|
|
2506
|
+
'--caoTabColorInkBar': this.colorInkBar,
|
|
2507
|
+
'--caoTabColorHeaderBorder': this.colorHeaderBorder,
|
|
2508
|
+
'--caoTabInkBarHeight': this.inkBarHeight,
|
|
2509
|
+
'--caoTabContentPt': this.contentPaddingTop,
|
|
2510
|
+
'--caoTabRadius': this.labelRadius,
|
|
2511
|
+
};
|
|
2512
|
+
}
|
|
2513
|
+
set selectedIndex(val) {
|
|
2514
|
+
this.selectIndex(val, false);
|
|
2515
|
+
}
|
|
2516
|
+
get selectedIndex() {
|
|
2517
|
+
return this.activeIndex();
|
|
2518
|
+
}
|
|
2519
|
+
labelHeight = '48px';
|
|
2520
|
+
labelPaddingX = '16px';
|
|
2521
|
+
labelGap = '6px';
|
|
2522
|
+
colorText = '#6b7280';
|
|
2523
|
+
colorActive = '#4f46e5';
|
|
2524
|
+
colorHoverBg = '#f3f4f6';
|
|
2525
|
+
colorDisabled = '#d1d5db';
|
|
2526
|
+
colorInkBar = '#4f46e5';
|
|
2527
|
+
colorHeaderBorder = '#e5e7eb';
|
|
2528
|
+
inkBarHeight = '2px';
|
|
2529
|
+
contentPaddingTop = '20px';
|
|
2530
|
+
labelRadius = '4px';
|
|
2531
|
+
animationDuration = '300ms';
|
|
2532
|
+
dynamicHeight = false;
|
|
2533
|
+
labelAlign = 'start';
|
|
2534
|
+
iconColorActive = '';
|
|
2535
|
+
iconColorInactive = '';
|
|
2536
|
+
strokeWidthIcon = 1;
|
|
2537
|
+
selectedTabChange = new EventEmitter();
|
|
2538
|
+
focusChange = new EventEmitter();
|
|
2539
|
+
tabs;
|
|
2540
|
+
tabBtns;
|
|
2541
|
+
inkBar;
|
|
2542
|
+
activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
|
|
2543
|
+
activatedSet = new Set();
|
|
2544
|
+
tabList = [];
|
|
2545
|
+
subs = new Subscription();
|
|
2546
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
2547
|
+
ngAfterContentInit() {
|
|
2548
|
+
this.tabList = this.tabs.toArray();
|
|
2549
|
+
this.activatedSet.add(this.activeIndex());
|
|
2550
|
+
this.subs.add(this.tabs.changes.subscribe(() => {
|
|
2551
|
+
this.tabList = this.tabs.toArray();
|
|
2552
|
+
const safe = Math.min(this.activeIndex(), this.tabList.length - 1);
|
|
2553
|
+
this.activeIndex.set(Math.max(0, safe));
|
|
2554
|
+
this.scheduleInkBar();
|
|
2555
|
+
}));
|
|
2556
|
+
this.scheduleInkBar();
|
|
2557
|
+
}
|
|
2558
|
+
ngOnDestroy() {
|
|
2559
|
+
this.subs.unsubscribe();
|
|
2560
|
+
}
|
|
2561
|
+
selectTab(index) {
|
|
2562
|
+
this.selectIndex(index, true);
|
|
2563
|
+
}
|
|
2564
|
+
get activeTab() {
|
|
2565
|
+
return this.tabList[this.activeIndex()] ?? null;
|
|
2566
|
+
}
|
|
2567
|
+
isActive(index) {
|
|
2568
|
+
return this.activeIndex() === index;
|
|
2569
|
+
}
|
|
2570
|
+
wasActivated(index) {
|
|
2571
|
+
return this.activatedSet.has(index);
|
|
2572
|
+
}
|
|
2573
|
+
onTabClick(index) {
|
|
2574
|
+
if (this.tabList[index]?.isDisabled) {
|
|
2575
|
+
return;
|
|
2576
|
+
}
|
|
2577
|
+
this.selectIndex(index, true);
|
|
2578
|
+
}
|
|
2579
|
+
onKeydown(event, currentIndex) {
|
|
2580
|
+
let next = currentIndex;
|
|
2581
|
+
switch (event.key) {
|
|
2582
|
+
case 'ArrowRight':
|
|
2583
|
+
next = this.nextEnabled(currentIndex, 1);
|
|
2584
|
+
break;
|
|
2585
|
+
case 'ArrowLeft':
|
|
2586
|
+
next = this.nextEnabled(currentIndex, -1);
|
|
2587
|
+
break;
|
|
2588
|
+
case 'Home':
|
|
2589
|
+
next = this.nextEnabled(-1, 1);
|
|
2590
|
+
break;
|
|
2591
|
+
case 'End':
|
|
2592
|
+
next = this.nextEnabled(this.tabList.length, -1);
|
|
2593
|
+
break;
|
|
2594
|
+
default: return;
|
|
2595
|
+
}
|
|
2596
|
+
event.preventDefault();
|
|
2597
|
+
this.selectIndex(next, true);
|
|
2598
|
+
this.focusTab(next);
|
|
2599
|
+
}
|
|
2600
|
+
onFocus(index) {
|
|
2601
|
+
this.focusChange.emit(index);
|
|
2602
|
+
}
|
|
2603
|
+
nextEnabled(from, dir) {
|
|
2604
|
+
const tabs = this.tabList;
|
|
2605
|
+
let idx = from + dir;
|
|
2606
|
+
while (idx >= 0 && idx < tabs.length) {
|
|
2607
|
+
if (!tabs[idx].isDisabled) {
|
|
2608
|
+
return idx;
|
|
2609
|
+
}
|
|
2610
|
+
idx += dir;
|
|
2611
|
+
}
|
|
2612
|
+
return from;
|
|
2613
|
+
}
|
|
2614
|
+
selectIndex(index, emit) {
|
|
2615
|
+
if (!this.tabList) {
|
|
2616
|
+
this.activeIndex.set(Math.max(0, index));
|
|
2617
|
+
return;
|
|
2618
|
+
}
|
|
2619
|
+
const clamped = Math.max(0, Math.min(index, this.tabList.length - 1));
|
|
2620
|
+
const previous = this.activeIndex();
|
|
2621
|
+
if (clamped === previous && emit) {
|
|
2622
|
+
return;
|
|
2623
|
+
}
|
|
2624
|
+
this.activeIndex.set(clamped);
|
|
2625
|
+
this.activatedSet.add(clamped);
|
|
2626
|
+
if (emit) {
|
|
2627
|
+
this.selectedTabChange.emit({
|
|
2628
|
+
previousIndex: previous,
|
|
2629
|
+
index: clamped,
|
|
2630
|
+
tab: this.tabList[clamped],
|
|
2631
|
+
});
|
|
2632
|
+
}
|
|
2633
|
+
this.scheduleInkBar();
|
|
2634
|
+
}
|
|
2635
|
+
focusTab(index) {
|
|
2636
|
+
this.tabBtns?.toArray()[index]?.nativeElement?.focus();
|
|
2637
|
+
}
|
|
2638
|
+
scheduleInkBar() {
|
|
2639
|
+
if (!this.isBrowser) {
|
|
2640
|
+
return;
|
|
2641
|
+
}
|
|
2642
|
+
requestAnimationFrame(() => this.updateInkBar());
|
|
2643
|
+
}
|
|
2644
|
+
updateInkBar() {
|
|
2645
|
+
const btns = this.tabBtns?.toArray();
|
|
2646
|
+
const bar = this.inkBar?.nativeElement;
|
|
2647
|
+
if (!btns || !bar) {
|
|
2648
|
+
return;
|
|
2649
|
+
}
|
|
2650
|
+
const btn = btns[this.activeIndex()]?.nativeElement;
|
|
2651
|
+
if (!btn) {
|
|
2652
|
+
return;
|
|
2653
|
+
}
|
|
2654
|
+
bar.style.width = `${btn.offsetWidth}px`;
|
|
2655
|
+
bar.style.transform = `translateX(${btn.offsetLeft}px)`;
|
|
2656
|
+
bar.style.transitionDuration = this.animationDuration;
|
|
2657
|
+
}
|
|
2658
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoTabGroup, isStandalone: true, selector: "cao-tab-group", inputs: { selectedIndex: "selectedIndex", labelHeight: "labelHeight", labelPaddingX: "labelPaddingX", labelGap: "labelGap", colorText: "colorText", colorActive: "colorActive", colorHoverBg: "colorHoverBg", colorDisabled: "colorDisabled", colorInkBar: "colorInkBar", colorHeaderBorder: "colorHeaderBorder", inkBarHeight: "inkBarHeight", contentPaddingTop: "contentPaddingTop", labelRadius: "labelRadius", animationDuration: "animationDuration", dynamicHeight: "dynamicHeight", labelAlign: "labelAlign", iconColorActive: "iconColorActive", iconColorInactive: "iconColorInactive", strokeWidthIcon: "strokeWidthIcon" }, outputs: { selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "style": "this._hostStyles" }, classAttribute: "cao-tab-group" }, queries: [{ propertyName: "tabs", predicate: CaoTabPanel }], viewQueries: [{ propertyName: "inkBar", first: true, predicate: ["inkBar"], descendants: true }, { propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], ngImport: i0, template: "<div\n #header\n [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n <div class=\"cao-tab-label-list\" role=\"tablist\">\n @for (tab of tabList; track $index; let i = $index) {\n <button\n #tabBtn\n role=\"tab\"\n type=\"button\"\n class=\"cao-tab-label\"\n [class.cao-tab-label--active]=\"isActive(i)\"\n [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n [attr.aria-selected]=\"isActive(i)\"\n [attr.aria-disabled]=\"tab.isDisabled || null\"\n [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n [attr.id]=\"'cao-tab-label-' + i\"\n [attr.aria-controls]=\"'cao-tab-content-' + i\"\n (click)=\"onTabClick(i)\"\n (keydown)=\"onKeydown($event, i)\"\n (focus)=\"onFocus(i)\"\n >\n @if (tab.leadingIcon) {\n <span class=\"leading-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n }\n </span>\n }\n\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n } @else {\n <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n }\n\n @if (tab.trailingIcon) {\n <span class=\"trailing-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n }\n </span>\n }\n </button>\n }\n </div>\n\n <!-- Ink bar animado -->\n <div class=\"cao-tab-ink-bar-track\">\n <div #inkBar class=\"cao-tab-ink-bar\"></div>\n </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n class=\"cao-tab-body-wrapper\"\n [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n @for (tab of tabList; track $index; let i = $index) {\n <div\n role=\"tabpanel\"\n class=\"cao-tab-body\"\n [class.cao-tab-body--active]=\"isActive(i)\"\n [attr.id]=\"'cao-tab-content-' + i\"\n [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n [attr.aria-hidden]=\"!isActive(i)\"\n [style.--cao-tab-anim-duration]=\"animationDuration\"\n >\n <div class=\"cao-tab-bodycontent\">\n @if (tab.lazyContent) {\n @if (isActive(i) || wasActivated(i)) {\n <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"tab.content\" />\n }\n </div>\n </div>\n }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--caoTabLabelHeight: 48px;--caoTabLabelPx: 16px;--caoTabLabelGap: 6px;--caoTabColorText: #6b7280;--caoTabColorActive: #4f46e5;--caoTabColorHoverBg: #f3f4f6;--caoTabColorDisabled: #d1d5db;--caoTabColorInkBar: #4f46e5;--caoTabColorHeaderBorder: #e5e7eb;--caoTabInkBarHeight: 2px;--caoTabContentPt: 20px;--caoTabRadius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
|
|
2660
|
+
}
|
|
2661
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoTabGroup, decorators: [{
|
|
2662
|
+
type: Component,
|
|
2663
|
+
args: [{ selector: 'cao-tab-group', standalone: true, imports: [NgTemplateOutlet, LucideDynamicIcon], host: { class: 'cao-tab-group' }, template: "<div\n #header\n [class]=\"'cao-tab-header cao-tab-header--align-' + labelAlign\"\n>\n <div class=\"cao-tab-label-list\" role=\"tablist\">\n @for (tab of tabList; track $index; let i = $index) {\n <button\n #tabBtn\n role=\"tab\"\n type=\"button\"\n class=\"cao-tab-label\"\n [class.cao-tab-label--active]=\"isActive(i)\"\n [class.cao-tab-label--disabled]=\"tab.isDisabled\"\n [attr.aria-selected]=\"isActive(i)\"\n [attr.aria-disabled]=\"tab.isDisabled || null\"\n [attr.tabindex]=\"isActive(i) ? 0 : -1\"\n [attr.id]=\"'cao-tab-label-' + i\"\n [attr.aria-controls]=\"'cao-tab-content-' + i\"\n (click)=\"onTabClick(i)\"\n (keydown)=\"onKeydown($event, i)\"\n (focus)=\"onFocus(i)\"\n >\n @if (tab.leadingIcon) {\n <span class=\"leading-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.leadingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.leadingIcon\" />\n }\n </span>\n }\n\n @if (tab.labelTemplate) {\n <ng-container [ngTemplateOutlet]=\"tab.labelTemplate\" />\n } @else {\n <span class=\"cao-tab-labeltext\">{{ tab.label }}</span>\n }\n\n @if (tab.trailingIcon) {\n <span class=\"trailing-icon\">\n @if (tab.isLucideIcon) {\n <svg [lucideIcon]=\"tab.trailingIcon\" [style.color]=\"isActive(i) ? iconColorActive : iconColorInactive\" [strokeWidth]=\"strokeWidthIcon\"></svg>\n } @else {\n <img alt=\"icon\" [src]=\"tab.trailingIcon\" />\n }\n </span>\n }\n </button>\n }\n </div>\n\n <!-- Ink bar animado -->\n <div class=\"cao-tab-ink-bar-track\">\n <div #inkBar class=\"cao-tab-ink-bar\"></div>\n </div>\n</div>\n\n<!-- \u2550\u2550\u2550 Tab Bodies \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div\n class=\"cao-tab-body-wrapper\"\n [class.cao-tab-body-wrapper--dynamic]=\"dynamicHeight\"\n>\n @for (tab of tabList; track $index; let i = $index) {\n <div\n role=\"tabpanel\"\n class=\"cao-tab-body\"\n [class.cao-tab-body--active]=\"isActive(i)\"\n [attr.id]=\"'cao-tab-content-' + i\"\n [attr.aria-labelledby]=\"'cao-tab-label-' + i\"\n [attr.aria-hidden]=\"!isActive(i)\"\n [style.--cao-tab-anim-duration]=\"animationDuration\"\n >\n <div class=\"cao-tab-bodycontent\">\n @if (tab.lazyContent) {\n @if (isActive(i) || wasActivated(i)) {\n <ng-container [ngTemplateOutlet]=\"tab.lazyContent\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"tab.content\" />\n }\n </div>\n </div>\n }\n</div>", styles: [":host{--cao-tab-font-family: inherit;--cao-tab-font-size: .875rem;--cao-tab-font-weight: 500;--caoTabLabelHeight: 48px;--caoTabLabelPx: 16px;--caoTabLabelGap: 6px;--caoTabColorText: #6b7280;--caoTabColorActive: #4f46e5;--caoTabColorHoverBg: #f3f4f6;--caoTabColorDisabled: #d1d5db;--caoTabColorInkBar: #4f46e5;--caoTabColorHeaderBorder: #e5e7eb;--caoTabInkBarHeight: 2px;--caoTabContentPt: 20px;--caoTabRadius: 4px;display:flex;flex-direction:column;width:100%}.cao-tab-header{position:relative;border-bottom:1px solid var(--cao-tab-color-header-border);overflow-x:auto;scrollbar-width:none}.cao-tab-header::-webkit-scrollbar{display:none}.cao-tab-label-list{display:flex;align-items:center;min-width:max-content}.cao-tab-header--align-center .cao-tab-label-list{justify-content:center}.cao-tab-header--align-end .cao-tab-label-list{justify-content:flex-end}.cao-tab-header--align-start .cao-tab-label-list{justify-content:flex-start}.cao-tab-label{display:inline-flex;align-items:center;gap:var(--cao-tab-label-gap);height:var(--cao-tab-label-height);padding:0 var(--cao-tab-label-px);font-family:var(--cao-tab-font-family);font-size:var(--cao-tab-font-size);font-weight:var(--cao-tab-font-weight);color:var(--cao-tab-color-text);white-space:nowrap;background:transparent;border:none;border-radius:var(--cao-tab-radius) var(--cao-tab-radius) 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s ease,background-color .18s ease;outline:none}.cao-tab-label:focus-visible{outline:2px solid var(--cao-tab-color-active);outline-offset:-2px}.cao-tab-label:hover:not(.cao-tab-label--disabled){background-color:var(--cao-tab-color-hover-bg);color:var(--cao-tab-color-active)}.cao-tab-label--active{color:var(--cao-tab-color-active)}.cao-tab-label--disabled{color:var(--cao-tab-color-disabled);cursor:not-allowed;pointer-events:none}.cao-tab-label__icon{flex-shrink:0;color:inherit;transition:color .18s ease}.cao-tab-ink-bar-track{position:absolute;bottom:0;left:0;right:0;height:var(--cao-tab-ink-bar-height);pointer-events:none}.cao-tab-ink-bar{position:absolute;bottom:0;left:0;height:100%;background-color:var(--cao-tab-color-ink-bar);border-radius:2px 2px 0 0;transition-property:transform,width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.cao-tab-body-wrapper{position:relative;overflow:hidden}.cao-tab-body-wrapper--dynamic{height:auto}.cao-tab-body{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0;pointer-events:none;transform:translate(24px);transition:opacity var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1),transform var(--cao-tab-anim-duration, .3s) cubic-bezier(.4,0,.2,1)}.cao-tab-body--active{position:relative;visibility:visible;opacity:1;pointer-events:auto;transform:translate(0)}.cao-tab-body__content{padding-top:var(--cao-tab-content-pt)}\n"] }]
|
|
2664
|
+
}], propDecorators: { _hostStyles: [{
|
|
2665
|
+
type: HostBinding,
|
|
2666
|
+
args: ['style']
|
|
2667
|
+
}], selectedIndex: [{
|
|
2668
|
+
type: Input
|
|
2669
|
+
}], labelHeight: [{
|
|
2670
|
+
type: Input
|
|
2671
|
+
}], labelPaddingX: [{
|
|
2672
|
+
type: Input
|
|
2673
|
+
}], labelGap: [{
|
|
2674
|
+
type: Input
|
|
2675
|
+
}], colorText: [{
|
|
2676
|
+
type: Input
|
|
2677
|
+
}], colorActive: [{
|
|
2678
|
+
type: Input
|
|
2679
|
+
}], colorHoverBg: [{
|
|
2680
|
+
type: Input
|
|
2681
|
+
}], colorDisabled: [{
|
|
2682
|
+
type: Input
|
|
2683
|
+
}], colorInkBar: [{
|
|
2684
|
+
type: Input
|
|
2685
|
+
}], colorHeaderBorder: [{
|
|
2686
|
+
type: Input
|
|
2687
|
+
}], inkBarHeight: [{
|
|
2688
|
+
type: Input
|
|
2689
|
+
}], contentPaddingTop: [{
|
|
2690
|
+
type: Input
|
|
2691
|
+
}], labelRadius: [{
|
|
2692
|
+
type: Input
|
|
2693
|
+
}], animationDuration: [{
|
|
2694
|
+
type: Input
|
|
2695
|
+
}], dynamicHeight: [{
|
|
2696
|
+
type: Input
|
|
2697
|
+
}], labelAlign: [{
|
|
2698
|
+
type: Input
|
|
2699
|
+
}], iconColorActive: [{
|
|
2700
|
+
type: Input
|
|
2701
|
+
}], iconColorInactive: [{
|
|
2702
|
+
type: Input
|
|
2703
|
+
}], strokeWidthIcon: [{
|
|
2704
|
+
type: Input
|
|
2705
|
+
}], selectedTabChange: [{
|
|
2706
|
+
type: Output
|
|
2707
|
+
}], focusChange: [{
|
|
2708
|
+
type: Output
|
|
2709
|
+
}], tabs: [{
|
|
2710
|
+
type: ContentChildren,
|
|
2711
|
+
args: [CaoTabPanel]
|
|
2712
|
+
}], tabBtns: [{
|
|
2713
|
+
type: ViewChildren,
|
|
2714
|
+
args: ['tabBtn']
|
|
2715
|
+
}], inkBar: [{
|
|
2716
|
+
type: ViewChild,
|
|
2717
|
+
args: ['inkBar']
|
|
2718
|
+
}] } });
|
|
2719
|
+
|
|
2387
2720
|
/*
|
|
2388
2721
|
* Public API Surface of ngx-opalbytes-components
|
|
2389
2722
|
*/
|
|
@@ -2392,5 +2725,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2392
2725
|
* Generated bundle index. Do not edit.
|
|
2393
2726
|
*/
|
|
2394
2727
|
|
|
2395
|
-
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
2728
|
+
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseInput, CaoDropDownComponent, CaoTabGroup, CaoTabPanel, Footer, LinksButton, Paginator, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
2396
2729
|
//# sourceMappingURL=ngx-opalbytes-components.mjs.map
|