@dev-tcloud/tcloud-ui 5.3.2 → 5.3.3
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.
|
@@ -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;
|