@dev-tcloud/tcloud-ui 7.5.0 → 7.5.2
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.
|
@@ -9534,7 +9534,7 @@ class TCloudUiDropdownMultiComponent {
|
|
|
9534
9534
|
this.searchText.set('');
|
|
9535
9535
|
}
|
|
9536
9536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi", 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 }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n @if (isOpen) {\n <div\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
|
|
9537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi", 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 }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n @if (isOpen) {\n <div\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-22);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
|
|
9538
9538
|
}
|
|
9539
9539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownMultiComponent, decorators: [{
|
|
9540
9540
|
type: Component,
|
|
@@ -9542,7 +9542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9542
9542
|
FormsModule,
|
|
9543
9543
|
ReactiveFormsModule,
|
|
9544
9544
|
TCloudUiCheckboxDirective
|
|
9545
|
-
], template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n @if (isOpen) {\n <div\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-12);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
9545
|
+
], template: "<div\n class=\"tcloud-ui-dropdown-multi\"\n [class.disabled]=\"disabled()\">\n <button\n class=\"tcloud-ui-dropdown-multi-toggle\"\n [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen\"\n [style.width]=\"this.width()\">\n @if (label())\n {\n <b>{{label()}}</b>\n }\n <span class=\"selected-text\">{{ getDisplayText() }}</span>\n <i class=\"fa-light fa-chevron-down\"></i>\n </button>\n\n @if (isOpen) {\n <div\n class=\"tcloud-ui-dropdown-multi-menu\"\n [style.width]=\"this.width()\">\n <!-- Campo de busca -->\n @if (searchable()) {\n <div class=\"tcloud-ui-dropdown-multi-search\">\n <div class=\"tcloud-ui-dropdown-multi-search-container\">\n <input\n type=\"text\"\n class=\"tcloud-ui-dropdown-multi-search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchText()\"\n (input)=\"onSearchChange($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <i class=\"fa-light fa-magnifying-glass tcloud-ui-dropdown-multi-search-icon\"></i>\n @if (searchText()) {\n <button\n type=\"button\"\n class=\"tcloud-ui-dropdown-multi-search-clear\"\n (click)=\"clearSearch(); $event.stopPropagation()\"\n >\n <i class=\"fa-light fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\n <!-- Checkbox Selecionar/Limpar Todos -->\n <div class=\"tcloud-ui-dropdown-multi-actions\">\n <label\n class=\"tcloud-ui-dropdown-multi-select-all-label\"\n [class.selected]=\"isAllSelected()\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [disabled]=\"disabled()\"\n [checked]=\"isAllSelected()\"\n [indeterminate]=\"isSomeSelected()\"\n (change)=\"toggleSelectAll($event)\">\n <span class=\"tcloud-ui-dropdown-multi-select-all-text\">\n @if (searchable() && searchText()) {\n Todos (filtrados)\n } @else {\n Todos\n }\n </span>\n </label>\n </div>\n <ul class=\"tcloud-ui-dropdown-multi-options\">\n @for (option of filteredOptions(); track option?.value)\n {\n <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n <label\n class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n [class.disabled]=\"option?.disabled\"\n [class.selected]=\"isOptionSelected(option)\">\n <input\n type=\"checkbox\"\n tcloudUiCheckbox\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"option?.disabled\"\n (change)=\"toggleOption(option, $event)\">\n <span class=\"tcloud-ui-dropdown-multi-text\">\n {{ option?.displayValue }}\n </span>\n </label>\n </li>\n }\n <!-- Mensagem quando nenhum item for encontrado na busca -->\n @if (searchable() && searchText() && filteredOptions().length === 0) {\n <li class=\"tcloud-ui-dropdown-multi-no-results\">\n <span>Nenhuma op\u00E7\u00E3o encontrada</span>\n </li>\n }\n </ul>\n </div>\n }\n </div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search{position:sticky;top:0;background-color:var(--c-neutral-50);padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);z-index:1}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container{position:relative;display:flex;align-items:center}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input{width:100%;height:var(--size-32);padding:var(--size-8) var(--size-32) var(--size-8) var(--size-22);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);color:var(--c-neutral-700);background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-input::placeholder{color:var(--c-neutral-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-icon{position:absolute;left:var(--size-8);color:var(--c-neutral-500);font-size:var(--f-size-12);pointer-events:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear{position:absolute;right:var(--size-8);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-search .tcloud-ui-dropdown-multi-search-container .tcloud-ui-dropdown-multi-search-clear:hover{color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-no-results{padding:var(--size-12) var(--size-8);text-align:center;color:var(--c-neutral-500);font-size:var(--f-size-12);font-style:italic;border:1px solid var(--c-neutral-50)}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
9546
9546
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
9547
9547
|
type: HostListener,
|
|
9548
9548
|
args: ['document:click', ['$event']]
|
|
@@ -10959,17 +10959,92 @@ class TCloudUiDropdownSubMenuComponent {
|
|
|
10959
10959
|
constructor() {
|
|
10960
10960
|
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
10961
10961
|
this.position = input.required(...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
10962
|
-
this.
|
|
10962
|
+
this.anchorEl = input(null, ...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ [])); // Item pai que ancora o submenu flutuante
|
|
10963
|
+
this.maxHeight = input(320, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
10963
10964
|
this.selectedOption = input(...(ngDevMode ? [undefined, { debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
10964
10965
|
this.onOptionSelected = output();
|
|
10966
|
+
this.hoverStart = output(); // Mouse entrou no submenu → o pai cancela o fechamento
|
|
10967
|
+
this.hoverEnd = output(); // Mouse saiu do submenu → o pai agenda o fechamento
|
|
10968
|
+
// Estado de posicionamento (position: fixed, coordenadas de viewport)
|
|
10969
|
+
this.left = signal(0, ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
|
|
10970
|
+
this.top = signal(0, ...(ngDevMode ? [{ debugName: "top" }] : /* istanbul ignore next */ []));
|
|
10971
|
+
this.positioned = signal(false, ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
|
|
10972
|
+
// Hover interno para abrir submenus aninhados (mesmo padrão do menu raiz)
|
|
10973
|
+
this.hoveredIndex = signal(null, ...(ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []));
|
|
10974
|
+
this.hoveredAnchor = signal(null, ...(ngDevMode ? [{ debugName: "hoveredAnchor" }] : /* istanbul ignore next */ []));
|
|
10975
|
+
this.reposition = () => this.updatePosition();
|
|
10976
|
+
this.closeTimer = null;
|
|
10977
|
+
}
|
|
10978
|
+
ngAfterViewInit() {
|
|
10979
|
+
this.updatePosition();
|
|
10980
|
+
// Recalcula quando qualquer container rola (capture pega o scroll da lista raiz) ou a janela redimensiona
|
|
10981
|
+
window.addEventListener('scroll', this.reposition, true);
|
|
10982
|
+
window.addEventListener('resize', this.reposition);
|
|
10983
|
+
}
|
|
10984
|
+
ngOnDestroy() {
|
|
10985
|
+
window.removeEventListener('scroll', this.reposition, true);
|
|
10986
|
+
window.removeEventListener('resize', this.reposition);
|
|
10987
|
+
this.cancelClose();
|
|
10988
|
+
}
|
|
10989
|
+
onItemEnter(event, index) {
|
|
10990
|
+
this.cancelClose();
|
|
10991
|
+
this.hoveredIndex.set(index);
|
|
10992
|
+
this.hoveredAnchor.set(event.currentTarget);
|
|
10993
|
+
}
|
|
10994
|
+
// Hover-intent para o submenu aninhado (mesmo motivo: cruzar a scrollbar deste submenu)
|
|
10995
|
+
scheduleClose() {
|
|
10996
|
+
this.cancelClose();
|
|
10997
|
+
this.closeTimer = setTimeout(() => this.hoveredIndex.set(null), 250);
|
|
10998
|
+
}
|
|
10999
|
+
cancelClose() {
|
|
11000
|
+
if (this.closeTimer) {
|
|
11001
|
+
clearTimeout(this.closeTimer);
|
|
11002
|
+
this.closeTimer = null;
|
|
11003
|
+
}
|
|
11004
|
+
}
|
|
11005
|
+
updatePosition() {
|
|
11006
|
+
const anchor = this.anchorEl();
|
|
11007
|
+
const el = this.subMenuEl?.nativeElement;
|
|
11008
|
+
if (!anchor || !el)
|
|
11009
|
+
return;
|
|
11010
|
+
const a = anchor.getBoundingClientRect();
|
|
11011
|
+
const menuW = el.offsetWidth;
|
|
11012
|
+
const menuH = el.offsetHeight; // já limitado pelo max-height do CSS
|
|
11013
|
+
const vw = window.innerWidth;
|
|
11014
|
+
const vh = window.innerHeight;
|
|
11015
|
+
const margin = 8;
|
|
11016
|
+
// Horizontal: respeita a preferência e faz flip quando não há espaço
|
|
11017
|
+
let left;
|
|
11018
|
+
if (this.position() === 'left') {
|
|
11019
|
+
left = a.left - menuW;
|
|
11020
|
+
if (left < margin)
|
|
11021
|
+
left = a.right; // sem espaço à esquerda → abre à direita
|
|
11022
|
+
}
|
|
11023
|
+
else {
|
|
11024
|
+
left = a.right;
|
|
11025
|
+
if (left + menuW > vw - margin)
|
|
11026
|
+
left = a.left - menuW; // sem espaço à direita → abre à esquerda
|
|
11027
|
+
}
|
|
11028
|
+
left = Math.max(margin, Math.min(left, vw - menuW - margin));
|
|
11029
|
+
// Vertical: alinha com o topo do item e sobe se estourar o rodapé
|
|
11030
|
+
let top = a.top;
|
|
11031
|
+
if (top + menuH > vh - margin)
|
|
11032
|
+
top = vh - menuH - margin;
|
|
11033
|
+
top = Math.max(margin, top);
|
|
11034
|
+
this.left.set(left);
|
|
11035
|
+
this.top.set(top);
|
|
11036
|
+
this.positioned.set(true);
|
|
10965
11037
|
}
|
|
10966
11038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownSubMenuComponent, isStandalone: true, selector: "tcloud-ui-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null },
|
|
11039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownSubMenuComponent, isStandalone: true, selector: "tcloud-ui-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected", hoverStart: "hoverStart", hoverEnd: "hoverEnd" }, viewQueries: [{ propertyName: "subMenuEl", first: true, predicate: ["subMenuEl"], descendants: true, static: true }], ngImport: i0, template: "<ul\n #subMenuEl\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.left.px]=\"this.left()\"\n [style.top.px]=\"this.top()\"\n [style.max-height.px]=\"this.maxHeight()\"\n [style.visibility]=\"this.positioned() ? 'visible' : 'hidden'\"\n (mouseenter)=\"hoverStart.emit()\"\n (mouseleave)=\"hoverEnd.emit()\">\n @for (item of this.items(); track item.value; let i = $index)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (mouseenter)=\"onItemEnter($event, i)\"\n (mouseleave)=\"scheduleClose()\"\n (click)=\"this.onOptionSelected.emit(item)\">\n <span class=\"sub-menu-item__label\" [title]=\"item.displayValue\">{{ item.displayValue }}</span>\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length && hoveredIndex() === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"position()\"\n [maxHeight]=\"maxHeight()\"\n [anchorEl]=\"hoveredAnchor()\"\n [selectedOption]=\"this.selectedOption()\"\n (hoverStart)=\"cancelClose()\"\n (hoverEnd)=\"scheduleClose()\"\n (onOptionSelected)=\"this.onOptionSelected.emit($event)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{position:fixed;min-width:160px;max-width:200px;background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);z-index:1001;padding:0;margin:0;list-style:none;overflow-y:auto;overflow-x:hidden}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);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%}.sub-menu-item__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TCloudUiDropdownSubMenuComponent, selector: "tcloud-ui-dropdown-sub-menu", inputs: ["items", "position", "anchorEl", "maxHeight", "selectedOption"], outputs: ["onOptionSelected", "hoverStart", "hoverEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
10968
11040
|
}
|
|
10969
11041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownSubMenuComponent, decorators: [{
|
|
10970
11042
|
type: Component,
|
|
10971
|
-
args: [{ selector: 'tcloud-ui-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.top.px]=\"this.
|
|
10972
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }],
|
|
11043
|
+
args: [{ selector: 'tcloud-ui-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n #subMenuEl\n class=\"sub-menu\"\n [ngClass]=\"this.position()\"\n [style.left.px]=\"this.left()\"\n [style.top.px]=\"this.top()\"\n [style.max-height.px]=\"this.maxHeight()\"\n [style.visibility]=\"this.positioned() ? 'visible' : 'hidden'\"\n (mouseenter)=\"hoverStart.emit()\"\n (mouseleave)=\"hoverEnd.emit()\">\n @for (item of this.items(); track item.value; let i = $index)\n {\n <li\n class=\"sub-menu-item\"\n [class.selected]=\"this.selectedOption()?.value === item.value\"\n (mouseenter)=\"onItemEnter($event, i)\"\n (mouseleave)=\"scheduleClose()\"\n (click)=\"this.onOptionSelected.emit(item)\">\n <span class=\"sub-menu-item__label\" [title]=\"item.displayValue\">{{ item.displayValue }}</span>\n @if (this.selectedOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check\"></i>\n }\n @if (item.children?.length && hoveredIndex() === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"position()\"\n [maxHeight]=\"maxHeight()\"\n [anchorEl]=\"hoveredAnchor()\"\n [selectedOption]=\"this.selectedOption()\"\n (hoverStart)=\"cancelClose()\"\n (hoverEnd)=\"scheduleClose()\"\n (onOptionSelected)=\"this.onOptionSelected.emit($event)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n</ul>\n", styles: [".sub-menu{position:fixed;min-width:160px;max-width:200px;background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);z-index:1001;padding:0;margin:0;list-style:none;overflow-y:auto;overflow-x:hidden}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);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%}.sub-menu-item__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
11044
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], onOptionSelected: [{ type: i0.Output, args: ["onOptionSelected"] }], hoverStart: [{ type: i0.Output, args: ["hoverStart"] }], hoverEnd: [{ type: i0.Output, args: ["hoverEnd"] }], subMenuEl: [{
|
|
11045
|
+
type: ViewChild,
|
|
11046
|
+
args: ['subMenuEl', { static: true }]
|
|
11047
|
+
}] } });
|
|
10973
11048
|
|
|
10974
11049
|
var MultiLevelDropdownSize$1;
|
|
10975
11050
|
(function (MultiLevelDropdownSize) {
|
|
@@ -10990,12 +11065,15 @@ class TCloudUiDropdownMultiLevelComponent {
|
|
|
10990
11065
|
this.subMenuPosition = input('right', ...(ngDevMode ? [{ debugName: "subMenuPosition" }] : /* istanbul ignore next */ []));
|
|
10991
11066
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
10992
11067
|
this.size = input(MultiLevelDropdownSize$1.sm, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11068
|
+
this.maxHeight = input(320, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ [])); // Altura máxima (px) do menu/submenus; ativa scroll ao exceder
|
|
10993
11069
|
this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ [])); // Valor pré-selecionado
|
|
10994
11070
|
this.optionSelected = output();
|
|
10995
11071
|
this.selectedOption = signal(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
10996
11072
|
this.selectedParentOption = signal(null, ...(ngDevMode ? [{ debugName: "selectedParentOption" }] : /* istanbul ignore next */ []));
|
|
10997
11073
|
this.hoveredIndex = null;
|
|
11074
|
+
this.hoveredAnchor = null; // Elemento do item sob hover, âncora do submenu flutuante
|
|
10998
11075
|
this.isOpen = false;
|
|
11076
|
+
this.closeTimer = null;
|
|
10999
11077
|
}
|
|
11000
11078
|
ngOnChanges(_simpleChanges) {
|
|
11001
11079
|
// Atualiza a opção selecionada quando o valor pré-selecionado muda
|
|
@@ -11004,14 +11082,21 @@ class TCloudUiDropdownMultiLevelComponent {
|
|
|
11004
11082
|
this.selectedParentOption.set(null);
|
|
11005
11083
|
}
|
|
11006
11084
|
}
|
|
11007
|
-
|
|
11008
|
-
|
|
11009
|
-
|
|
11010
|
-
|
|
11011
|
-
|
|
11012
|
-
|
|
11085
|
+
onItemEnter(event, index) {
|
|
11086
|
+
this.cancelClose();
|
|
11087
|
+
this.hoveredIndex = index;
|
|
11088
|
+
this.hoveredAnchor = event.currentTarget;
|
|
11089
|
+
}
|
|
11090
|
+
// Hover-intent: adia o fechamento para o mouse poder cruzar a scrollbar/gap até o submenu
|
|
11091
|
+
scheduleClose() {
|
|
11092
|
+
this.cancelClose();
|
|
11093
|
+
this.closeTimer = setTimeout(() => { this.hoveredIndex = null; }, 250);
|
|
11094
|
+
}
|
|
11095
|
+
cancelClose() {
|
|
11096
|
+
if (this.closeTimer) {
|
|
11097
|
+
clearTimeout(this.closeTimer);
|
|
11098
|
+
this.closeTimer = null;
|
|
11013
11099
|
}
|
|
11014
|
-
return 0;
|
|
11015
11100
|
}
|
|
11016
11101
|
toggleDropdown() {
|
|
11017
11102
|
this.isOpen = !this.isOpen;
|
|
@@ -11030,21 +11115,21 @@ class TCloudUiDropdownMultiLevelComponent {
|
|
|
11030
11115
|
this.selectOption(option, parentOption);
|
|
11031
11116
|
}
|
|
11032
11117
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11033
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownMultiLevelComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"
|
|
11118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TCloudUiDropdownMultiLevelComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot [style.max-height.px]=\"maxHeight()\">\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"onItemEnter($event, i)\"\n (mouseleave)=\"scheduleClose()\"\n (click)=\"this.selectParentItem($event, item, item)\">\n <span class=\"menu-item__label\" [title]=\"item.displayValue\">{{ item.displayValue }}</span>\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [maxHeight]=\"maxHeight()\"\n [anchorEl]=\"hoveredAnchor\"\n [selectedOption]=\"this.selectedOption()\"\n (hoverStart)=\"cancelClose()\"\n (hoverEnd)=\"scheduleClose()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:block}.tcloud-ui-dropdown-multi-level{position:relative;display:inline-block}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle{align-items:center;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi-level__menu-list{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;padding:0;width:130%;z-index:1000;color:var(--c-neutral-900);overflow-y:auto;overflow-x:hidden}.tcloud-ui-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);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%}.tcloud-ui-dropdown-multi-level__menu-list .menu-item__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TCloudUiDropdownSubMenuComponent, selector: "tcloud-ui-dropdown-sub-menu", inputs: ["items", "position", "anchorEl", "maxHeight", "selectedOption"], outputs: ["onOptionSelected", "hoverStart", "hoverEnd"] }, { kind: "directive", type: TCloudUiButtonDirective, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }] }); }
|
|
11034
11119
|
}
|
|
11035
11120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiDropdownMultiLevelComponent, decorators: [{
|
|
11036
11121
|
type: Component,
|
|
11037
11122
|
args: [{ selector: 'tcloud-ui-dropdown-multi-level', imports: [
|
|
11038
11123
|
TCloudUiDropdownSubMenuComponent,
|
|
11039
11124
|
TCloudUiButtonDirective
|
|
11040
|
-
], template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"
|
|
11125
|
+
], template: "<div class=\"tcloud-ui-dropdown-multi-level\">\n <button\n class=\"tcloud-ui-dropdown-toggle\"\n tcloudButton=\"outline\"\n color=\"dark\"\n [size]=\"this.size()\"\n [class.active]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n </button>\n\n\t<ul class=\"tcloud-ui-dropdown-multi-level__menu-list\" #menuRoot [style.max-height.px]=\"maxHeight()\">\n\t\t@if (isOpen)\n {\n @for (item of menu(); track $index; let i = $index)\n {\n <li\n class=\"menu-item\"\n [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n (mouseenter)=\"onItemEnter($event, i)\"\n (mouseleave)=\"scheduleClose()\"\n (click)=\"this.selectParentItem($event, item, item)\">\n <span class=\"menu-item__label\" [title]=\"item.displayValue\">{{ item.displayValue }}</span>\n @if (this.selectedParentOption()?.value === item?.value)\n {\n <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n }\n @if (item?.children?.length && hoveredIndex === i)\n {\n <tcloud-ui-dropdown-sub-menu\n [items]=\"item.children\"\n [position]=\"subMenuPosition()\"\n [maxHeight]=\"maxHeight()\"\n [anchorEl]=\"hoveredAnchor\"\n [selectedOption]=\"this.selectedOption()\"\n (hoverStart)=\"cancelClose()\"\n (hoverEnd)=\"scheduleClose()\"\n (onOptionSelected)=\"this.selectOption($event, item)\">\n </tcloud-ui-dropdown-sub-menu>\n }\n </li>\n }\n }\n\t</ul>\n</div>\n", styles: [":host{display:block}.tcloud-ui-dropdown-multi-level{position:relative;display:inline-block}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle{align-items:center;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tcloud-ui-dropdown-multi-level .tcloud-ui-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tcloud-ui-dropdown-multi-level__menu-list{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;padding:0;width:130%;z-index:1000;color:var(--c-neutral-900);overflow-y:auto;overflow-x:hidden}.tcloud-ui-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);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%}.tcloud-ui-dropdown-multi-level__menu-list .menu-item__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
|
|
11041
11126
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
11042
11127
|
type: HostListener,
|
|
11043
11128
|
args: ['document:click', ['$event']]
|
|
11044
11129
|
}], menuRoot: [{
|
|
11045
11130
|
type: ViewChild,
|
|
11046
11131
|
args: ['menuRoot', { static: false }]
|
|
11047
|
-
}], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], subMenuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
|
|
11132
|
+
}], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }], subMenuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
|
|
11048
11133
|
|
|
11049
11134
|
var TCloudUiDialogStatusEnum;
|
|
11050
11135
|
(function (TCloudUiDialogStatusEnum) {
|