@dev-tcloud/tcloud-ui 5.3.2 → 5.4.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.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +127 -93
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/revitalizacao/components/tc-rev-dropdown/tc-rev-dropdown.component.d.ts +6 -0
- package/lib/revitalizacao/components/tc-rev-tab-group/tc-rev-tab-group.component.d.ts +1 -0
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-util.scss +5 -0
|
@@ -7648,6 +7648,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7648
7648
|
args: ['document:click', ['$event']]
|
|
7649
7649
|
}] } });
|
|
7650
7650
|
|
|
7651
|
+
/**
|
|
7652
|
+
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
7653
|
+
* @param element - O elemento HTML que contém o texto
|
|
7654
|
+
* @returns true se o texto estiver elipsado, false caso contrário
|
|
7655
|
+
*/
|
|
7656
|
+
function isElementTextEllipsed(element) {
|
|
7657
|
+
if (!element)
|
|
7658
|
+
return false;
|
|
7659
|
+
// Verifica se o scrollWidth é maior que o clientWidth
|
|
7660
|
+
// Isso indica que o texto está sendo cortado
|
|
7661
|
+
return element.scrollWidth > element.clientWidth;
|
|
7662
|
+
}
|
|
7663
|
+
/**
|
|
7664
|
+
* Verifica se um texto específico estaria elipsado baseado no texto fornecido
|
|
7665
|
+
* @param text - O texto a ser verificado
|
|
7666
|
+
* @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
|
|
7667
|
+
* @returns true se o texto seria elipsado
|
|
7668
|
+
*/
|
|
7669
|
+
function isTextEllipsed(text, containerWidth) {
|
|
7670
|
+
if (!text)
|
|
7671
|
+
return false;
|
|
7672
|
+
// Cria um elemento temporário para medir o texto
|
|
7673
|
+
const tempElement = document.createElement('span');
|
|
7674
|
+
tempElement.style.visibility = 'hidden';
|
|
7675
|
+
tempElement.style.position = 'absolute';
|
|
7676
|
+
tempElement.style.whiteSpace = 'nowrap';
|
|
7677
|
+
tempElement.style.fontSize = '1rem'; // f-md
|
|
7678
|
+
tempElement.style.fontWeight = '500'; // f-weight-500
|
|
7679
|
+
tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
|
|
7680
|
+
tempElement.textContent = text;
|
|
7681
|
+
document.body.appendChild(tempElement);
|
|
7682
|
+
const textWidth = tempElement.scrollWidth;
|
|
7683
|
+
// Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
|
|
7684
|
+
const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
|
|
7685
|
+
document.body.removeChild(tempElement);
|
|
7686
|
+
return textWidth > maxWidth;
|
|
7687
|
+
}
|
|
7688
|
+
// export class EllipsedTextHelper
|
|
7689
|
+
// {
|
|
7690
|
+
// public static isEllipsed(id: string): boolean
|
|
7691
|
+
// {
|
|
7692
|
+
// const element = document.querySelector<any>(`#${id}`);
|
|
7693
|
+
// return element ? (element.offsetWidth < element.scrollWidth) : false;
|
|
7694
|
+
// }
|
|
7695
|
+
// /**
|
|
7696
|
+
// *
|
|
7697
|
+
// * @param _textField - Stands for the text you want to compare
|
|
7698
|
+
// * @param _fontProperties - Text CSS properties (font-size & font-family)
|
|
7699
|
+
// * @param _divId - divId you want to compare
|
|
7700
|
+
// * @param _isEllipsed - is it Ellipsed? (optional)
|
|
7701
|
+
// */
|
|
7702
|
+
// public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
|
|
7703
|
+
// {
|
|
7704
|
+
// if (_isEllipsed)
|
|
7705
|
+
// {
|
|
7706
|
+
// return true;
|
|
7707
|
+
// }
|
|
7708
|
+
// const textDiv = document.getElementById(_divId);
|
|
7709
|
+
// if (textDiv)
|
|
7710
|
+
// {
|
|
7711
|
+
// const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
|
|
7712
|
+
// return widthText > textDiv.clientWidth;
|
|
7713
|
+
// }
|
|
7714
|
+
// return false
|
|
7715
|
+
// }
|
|
7716
|
+
// public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
|
|
7717
|
+
// {
|
|
7718
|
+
// let tag = document.createElement('div');
|
|
7719
|
+
// tag.style.position = 'absolute';
|
|
7720
|
+
// tag.style.left = '-99in';
|
|
7721
|
+
// tag.style.font = _fontProperties;
|
|
7722
|
+
// tag.innerHTML = _text;
|
|
7723
|
+
// if (_whiteSpaceNoWrap)
|
|
7724
|
+
// {
|
|
7725
|
+
// tag.style.whiteSpace = 'nowrap';
|
|
7726
|
+
// }
|
|
7727
|
+
// document.body.appendChild(tag);
|
|
7728
|
+
// const result = tag.clientWidth;
|
|
7729
|
+
// document.body.removeChild(tag);
|
|
7730
|
+
// return result;
|
|
7731
|
+
// }
|
|
7732
|
+
// }
|
|
7733
|
+
|
|
7651
7734
|
var DropdownSize;
|
|
7652
7735
|
(function (DropdownSize) {
|
|
7653
7736
|
DropdownSize["sm"] = "sm";
|
|
@@ -7668,7 +7751,7 @@ class TcRevDropdownComponent {
|
|
|
7668
7751
|
this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
|
|
7669
7752
|
this.value = model(null); // Two-way binding para o valor selecionado
|
|
7670
7753
|
this.size = input(DropdownSize.sm);
|
|
7671
|
-
this.width = input(''); // Largura do dropdown
|
|
7754
|
+
this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
|
|
7672
7755
|
this.optionSelected = output(); // Emissor para o valor selecionado
|
|
7673
7756
|
this.selectedOption = signal(null); // Opção selecionada
|
|
7674
7757
|
this.isOpen = false; // Controla se o dropdown está aberto
|
|
@@ -7707,8 +7790,36 @@ class TcRevDropdownComponent {
|
|
|
7707
7790
|
this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
|
|
7708
7791
|
this.isOpen = false; // Fecha o dropdown
|
|
7709
7792
|
}
|
|
7793
|
+
/**
|
|
7794
|
+
* Verifica se o texto de uma opção na lista está elipsado
|
|
7795
|
+
* @param text - Texto a ser verificado
|
|
7796
|
+
* @returns true se o texto estiver elipsado
|
|
7797
|
+
*/
|
|
7798
|
+
isOptionEllipsed(text) {
|
|
7799
|
+
if (!text)
|
|
7800
|
+
return false;
|
|
7801
|
+
// Calcula a largura disponível para o texto nas opções da lista
|
|
7802
|
+
const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
|
|
7803
|
+
if (!menuElement) {
|
|
7804
|
+
// Se o menu não está aberto, usa a largura do dropdown
|
|
7805
|
+
const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
|
|
7806
|
+
if (!dropdownElement)
|
|
7807
|
+
return false;
|
|
7808
|
+
const dropdownWidth = dropdownElement.clientWidth;
|
|
7809
|
+
const padding = 16; // 8px de cada lado do botão
|
|
7810
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
7811
|
+
const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
|
|
7812
|
+
return isTextEllipsed(text, availableWidth);
|
|
7813
|
+
}
|
|
7814
|
+
// Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
|
|
7815
|
+
const menuWidth = menuElement.clientWidth;
|
|
7816
|
+
const padding = 16; // 8px de cada lado do botão do item
|
|
7817
|
+
const iconSpace = 24; // Espaço do ícone de check quando selecionado
|
|
7818
|
+
const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
|
|
7819
|
+
return isTextEllipsed(text, availableWidth);
|
|
7820
|
+
}
|
|
7710
7821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"
|
|
7822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : 'Selecione' }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul\n *ngIf=\"isOpen\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [TCtooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n TCdirection=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TCloudUiDirectiveModule }, { kind: "directive", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: ["tooltipMode", "TCtooltip", "TCdirection"] }] }); }
|
|
7712
7823
|
}
|
|
7713
7824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
|
|
7714
7825
|
type: Component,
|
|
@@ -7716,7 +7827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7716
7827
|
CommonModule,
|
|
7717
7828
|
FormsModule,
|
|
7718
7829
|
ReactiveFormsModule,
|
|
7719
|
-
|
|
7830
|
+
TCloudUiDirectiveModule
|
|
7831
|
+
], template: "<div\n class=\"tc-rev-dropdown\"\n [class.disabled]=\"disabled()\"\n [style.width]=\"this.width()\">\n <button\n class=\"tc-rev-dropdown-toggle\"\n [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"tc-rev-dropdown-selected-text\">\n {{ selectedOption() ? selectedOption()?.displayValue : 'Selecione' }}\n </span>\n <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n </button>\n <ul\n *ngIf=\"isOpen\" class=\"tc-rev-dropdown-menu\">\n @for (option of options(); track option?.value)\n {\n <li\n class=\"tc-rev-dropdown-menu-item\"\n (click)=\"selectOption(option)\">\n <button\n class=\"tc-rev-dropdown-menu-item-btn\"\n [class.selected]=\"selectedOption()?.value === option.value\"\n [disabled]=\"option?.disabled\">\n <span\n class=\"tc-rev-dropdown-option-text\"\n [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n [TCtooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n TCdirection=\"top\">\n {{ option?.displayValue }}\n </span>\n\n @if (selectedOption()?.value === option?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n </button>\n </li>\n }\n </ul>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
7720
7832
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
7721
7833
|
type: HostListener,
|
|
7722
7834
|
args: ['document:click', ['$event']]
|
|
@@ -7948,89 +8060,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7948
8060
|
type: Input
|
|
7949
8061
|
}] } });
|
|
7950
8062
|
|
|
7951
|
-
/**
|
|
7952
|
-
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
7953
|
-
* @param element - O elemento HTML que contém o texto
|
|
7954
|
-
* @returns true se o texto estiver elipsado, false caso contrário
|
|
7955
|
-
*/
|
|
7956
|
-
function isElementTextEllipsed(element) {
|
|
7957
|
-
if (!element)
|
|
7958
|
-
return false;
|
|
7959
|
-
// Verifica se o scrollWidth é maior que o clientWidth
|
|
7960
|
-
// Isso indica que o texto está sendo cortado
|
|
7961
|
-
return element.scrollWidth > element.clientWidth;
|
|
7962
|
-
}
|
|
7963
|
-
/**
|
|
7964
|
-
* Verifica se um texto específico estaria elipsado baseado no texto fornecido
|
|
7965
|
-
* @param text - O texto a ser verificado
|
|
7966
|
-
* @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
|
|
7967
|
-
* @returns true se o texto seria elipsado
|
|
7968
|
-
*/
|
|
7969
|
-
function isTextEllipsed(text, containerWidth) {
|
|
7970
|
-
if (!text)
|
|
7971
|
-
return false;
|
|
7972
|
-
// Cria um elemento temporário para medir o texto
|
|
7973
|
-
const tempElement = document.createElement('span');
|
|
7974
|
-
tempElement.style.visibility = 'hidden';
|
|
7975
|
-
tempElement.style.position = 'absolute';
|
|
7976
|
-
tempElement.style.whiteSpace = 'nowrap';
|
|
7977
|
-
tempElement.style.fontSize = '1rem'; // f-md
|
|
7978
|
-
tempElement.style.fontWeight = '500'; // f-weight-500
|
|
7979
|
-
tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
|
|
7980
|
-
tempElement.textContent = text;
|
|
7981
|
-
document.body.appendChild(tempElement);
|
|
7982
|
-
const textWidth = tempElement.scrollWidth;
|
|
7983
|
-
// Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
|
|
7984
|
-
const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
|
|
7985
|
-
document.body.removeChild(tempElement);
|
|
7986
|
-
return textWidth > maxWidth;
|
|
7987
|
-
}
|
|
7988
|
-
// export class EllipsedTextHelper
|
|
7989
|
-
// {
|
|
7990
|
-
// public static isEllipsed(id: string): boolean
|
|
7991
|
-
// {
|
|
7992
|
-
// const element = document.querySelector<any>(`#${id}`);
|
|
7993
|
-
// return element ? (element.offsetWidth < element.scrollWidth) : false;
|
|
7994
|
-
// }
|
|
7995
|
-
// /**
|
|
7996
|
-
// *
|
|
7997
|
-
// * @param _textField - Stands for the text you want to compare
|
|
7998
|
-
// * @param _fontProperties - Text CSS properties (font-size & font-family)
|
|
7999
|
-
// * @param _divId - divId you want to compare
|
|
8000
|
-
// * @param _isEllipsed - is it Ellipsed? (optional)
|
|
8001
|
-
// */
|
|
8002
|
-
// public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
|
|
8003
|
-
// {
|
|
8004
|
-
// if (_isEllipsed)
|
|
8005
|
-
// {
|
|
8006
|
-
// return true;
|
|
8007
|
-
// }
|
|
8008
|
-
// const textDiv = document.getElementById(_divId);
|
|
8009
|
-
// if (textDiv)
|
|
8010
|
-
// {
|
|
8011
|
-
// const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
|
|
8012
|
-
// return widthText > textDiv.clientWidth;
|
|
8013
|
-
// }
|
|
8014
|
-
// return false
|
|
8015
|
-
// }
|
|
8016
|
-
// public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
|
|
8017
|
-
// {
|
|
8018
|
-
// let tag = document.createElement('div');
|
|
8019
|
-
// tag.style.position = 'absolute';
|
|
8020
|
-
// tag.style.left = '-99in';
|
|
8021
|
-
// tag.style.font = _fontProperties;
|
|
8022
|
-
// tag.innerHTML = _text;
|
|
8023
|
-
// if (_whiteSpaceNoWrap)
|
|
8024
|
-
// {
|
|
8025
|
-
// tag.style.whiteSpace = 'nowrap';
|
|
8026
|
-
// }
|
|
8027
|
-
// document.body.appendChild(tag);
|
|
8028
|
-
// const result = tag.clientWidth;
|
|
8029
|
-
// document.body.removeChild(tag);
|
|
8030
|
-
// return result;
|
|
8031
|
-
// }
|
|
8032
|
-
// }
|
|
8033
|
-
|
|
8034
8063
|
class TcRevMultiInputComponent {
|
|
8035
8064
|
constructor() {
|
|
8036
8065
|
this.autoFocus = false;
|
|
@@ -8383,11 +8412,12 @@ class TcRevTabGroupComponent {
|
|
|
8383
8412
|
}
|
|
8384
8413
|
ngOnInit() {
|
|
8385
8414
|
this.checkCarouselOverflow();
|
|
8415
|
+
this.checkResponsiveMode();
|
|
8386
8416
|
}
|
|
8387
8417
|
checkCarouselOverflow() {
|
|
8388
8418
|
setTimeout(() => {
|
|
8389
8419
|
const el = this.tabGroupCarousel?.nativeElement;
|
|
8390
|
-
this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth;
|
|
8420
|
+
this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth && this.checkResponsiveMode(); // Verifica com checkResponsiveMode se é responsivo, caso seja, não irá mostrar as setas
|
|
8391
8421
|
});
|
|
8392
8422
|
}
|
|
8393
8423
|
scrollTabsCarousel(direction) {
|
|
@@ -8402,14 +8432,18 @@ class TcRevTabGroupComponent {
|
|
|
8402
8432
|
el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
8403
8433
|
}
|
|
8404
8434
|
}
|
|
8435
|
+
checkResponsiveMode() {
|
|
8436
|
+
const bp = getComputedStyle(document.documentElement)
|
|
8437
|
+
.getPropertyValue('--breakpoint-mobile')
|
|
8438
|
+
.trim();
|
|
8439
|
+
return window.innerWidth > parseInt(bp);
|
|
8440
|
+
}
|
|
8405
8441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevTabGroupComponent, isStandalone: true, selector: "tc-rev-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["
|
|
8442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevTabGroupComponent, isStandalone: true, selector: "tc-rev-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["@charset \"UTF-8\";:host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host .tc-rev-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
8407
8443
|
}
|
|
8408
8444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabGroupComponent, decorators: [{
|
|
8409
8445
|
type: Component,
|
|
8410
|
-
args: [{ selector: 'tc-rev-tab-group', imports: [
|
|
8411
|
-
CommonModule
|
|
8412
|
-
], template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: [":host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}\n"] }]
|
|
8446
|
+
args: [{ selector: 'tc-rev-tab-group', imports: [CommonModule], template: "<div class=\"tc-rev-tab-group\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"this.scrollTabsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n class=\"tc-rev-tab-group-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\"\n #tabGroupCarousel>\n <ng-content></ng-content>\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"this.scrollTabsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow left\"\n (click)=\"scrollProductsCarousel('left')\"\n aria-label=\"Scroll left\">\n <i class=\"fa-light fa-chevron-left\"></i>\n </button>\n\n <div\n #productsCarousel\n class=\"products-carousel\"\n [class.overflowed]=\"isCarouselOverflowed\">\n @for (productName of topologiesData.availableProductsNames(); track productName)\n {\n <button\n class=\"tc-rev-tab-item\"\n [class.active]=\"filter().product === productName\"\n (click)=\"handleChangeTopologiesByProduct(productName)\">\n {{ productName | topologyProduct }}\n </button>\n }\n </div>\n\n <button\n *ngIf=\"isCarouselOverflowed\"\n class=\"tc-rev-tab-item carousel-arrow right\"\n (click)=\"scrollProductsCarousel('right')\"\n aria-label=\"Scroll right\">\n <i class=\"fa-light fa-chevron-right\"></i>\n </button>\n</div> -->", styles: ["@charset \"UTF-8\";:host{display:block}.tc-rev-tab-group{position:relative;height:var(--size-40);width:100%}.tc-rev-tab-group .tc-rev-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tc-rev-tab-group .tc-rev-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tc-rev-tab-group .tc-rev-tab-group-carousel.full-width{width:100%}.tc-rev-tab-group .carousel-arrow{background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tc-rev-tab-group .carousel-arrow:hover,.tc-rev-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-group .carousel-arrow:active,.tc-rev-tab-group .carousel-arrow.selected,.tc-rev-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tc-rev-tab-group .carousel-arrow:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400)}.tc-rev-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tc-rev-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host .tc-rev-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}:host .tc-rev-tab-group-carousel::-webkit-scrollbar{display:none}}\n"] }]
|
|
8413
8447
|
}], propDecorators: { onResize: [{
|
|
8414
8448
|
type: HostListener,
|
|
8415
8449
|
args: ['window:resize']
|
|
@@ -8427,14 +8461,14 @@ class TcRevTabItemComponent {
|
|
|
8427
8461
|
this.fullWidth = input(false);
|
|
8428
8462
|
}
|
|
8429
8463
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
8464
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
|
|
8431
8465
|
}
|
|
8432
8466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, decorators: [{
|
|
8433
8467
|
type: Component,
|
|
8434
8468
|
args: [{ selector: 'tc-rev-tab-item', imports: [
|
|
8435
8469
|
CommonModule,
|
|
8436
8470
|
RouterModule
|
|
8437
|
-
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"] }]
|
|
8471
|
+
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tc-rev-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tc-rev-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"] }]
|
|
8438
8472
|
}] });
|
|
8439
8473
|
|
|
8440
8474
|
var TagColorsEnum;
|