structra-ui 0.2.60 → 0.2.62

package/fesm2022/structra-ui.mjs

@@ -6560,7 +6560,7 @@ class SelectFieldComponent extends DropdownOptionFieldBase {
                 useExisting: forwardRef(() => SelectFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"select-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"select-field__value-btn\"\r\n          [class.select-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"select-field__value\">{{ displayValue }}</span>\r\n        </div>\r\n        <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"8\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\r\n      [class.select-field__option--selected]=\"isSelected(opt)\"\r\n      [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n      [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      {{ opt.label }}\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"select-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"select-field__value-btn\"\r\n          [class.select-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"select-field__value\">{{ displayValue }}</span>\r\n        </div>\r\n        <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"1\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\r\n      [class.select-field__option--selected]=\"isSelected(opt)\"\r\n      [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n      [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      {{ opt.label }}\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
@@ -6570,7 +6570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => SelectFieldComponent),
                             multi: true,
                         },
-                    ], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"select-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"select-field__value-btn\"\r\n          [class.select-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"select-field__value\">{{ displayValue }}</span>\r\n        </div>\r\n        <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"8\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\r\n      [class.select-field__option--selected]=\"isSelected(opt)\"\r\n      [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n      [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      {{ opt.label }}\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"] }]
+                    ], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"select-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"select-field__value-btn\"\r\n          [class.select-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"select-field__value\">{{ displayValue }}</span>\r\n        </div>\r\n        <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"1\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\r\n      [class.select-field__option--selected]=\"isSelected(opt)\"\r\n      [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n      [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      {{ opt.label }}\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"] }]
         }], propDecorators: { hostInvalidClass: [{
                 type: HostBinding,
                 args: ['class.select-field--invalid']
@@ -7256,7 +7256,7 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
                 useExisting: forwardRef(() => MultiselectFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"multiselect-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"multiselect-field__value-btn\"\r\n          [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"displayAriaLabel\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\r\n        </div>\r\n        <span class=\"multiselect-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n  <ng-content select=\"[appFieldSuffix]\" />\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"8\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\r\n      [class.multiselect-field__option--selected]=\"isSelected(opt)\"\r\n      [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\r\n      [attr.tabindex]=\"optionSelectDisabled(opt) ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      <span class=\"multiselect-field__check\" aria-hidden=\"true\">\r\n        @if (isSelected(opt)) {\r\n        <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\r\n        }\r\n      </span>\r\n      <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"multiselect-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"multiselect-field__value-btn\"\r\n          [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"displayAriaLabel\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\r\n        </div>\r\n        <span class=\"multiselect-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n  <ng-content select=\"[appFieldSuffix]\" />\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"1\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\r\n      [class.multiselect-field__option--selected]=\"isSelected(opt)\"\r\n      [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\r\n      [attr.tabindex]=\"optionSelectDisabled(opt) ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      <span class=\"multiselect-field__check\" aria-hidden=\"true\">\r\n        @if (isSelected(opt)) {\r\n        <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\r\n        }\r\n      </span>\r\n      <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
             type: Component,
@@ -7266,7 +7266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => MultiselectFieldComponent),
                             multi: true,
                         },
-                    ], template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"multiselect-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"multiselect-field__value-btn\"\r\n          [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"displayAriaLabel\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\r\n        </div>\r\n        <span class=\"multiselect-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n  <ng-content select=\"[appFieldSuffix]\" />\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"8\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\r\n      [class.multiselect-field__option--selected]=\"isSelected(opt)\"\r\n      [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\r\n      [attr.tabindex]=\"optionSelectDisabled(opt) ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      <span class=\"multiselect-field__check\" aria-hidden=\"true\">\r\n        @if (isSelected(opt)) {\r\n        <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\r\n        }\r\n      </span>\r\n      <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"] }]
+                    ], template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\"\r\n  [loading]=\"loading\"\r\n  [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\r\n  [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\r\n  [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\r\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"multiselect-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\r\n      (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <div\r\n          #nativeInput\r\n          role=\"combobox\"\r\n          class=\"multiselect-field__value-btn\"\r\n          [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\r\n          [id]=\"controlId\"\r\n          [attr.name]=\"name || null\"\r\n          [attr.tabindex]=\"disabled || readonly ? -1 : 0\"\r\n          [attr.aria-disabled]=\"disabled ? true : null\"\r\n          [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\r\n          [attr.aria-expanded]=\"panelOpen\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\r\n          [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"displayAriaLabel\"\r\n          (click)=\"openToggle()\"\r\n          (blur)=\"onDropdownBlur($event)\"\r\n        >\r\n          <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\r\n        </div>\r\n        <span class=\"multiselect-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\r\n          (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\r\n          <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n  <ng-content select=\"[appFieldSuffix]\" />\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n    @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\r\n    <app-skeleton-list [rows]=\"1\" />\r\n    }\r\n    @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\r\n    <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n    }\r\n    @for (opt of listOptions; track trackOption($index, opt)) {\r\n    <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\r\n      [class.multiselect-field__option--selected]=\"isSelected(opt)\"\r\n      [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\r\n      [attr.tabindex]=\"optionSelectDisabled(opt) ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\r\n      (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n      <span class=\"multiselect-field__check\" aria-hidden=\"true\">\r\n        @if (isSelected(opt)) {\r\n        <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\r\n        }\r\n      </span>\r\n      <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\r\n    </div>\r\n    }\r\n    @if (options.length > 0 && pagination && loadingMore) {\r\n    <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"] }]
         }], propDecorators: { hostInvalidClass: [{
                 type: HostBinding,
                 args: ['class.multiselect-field--invalid']
@@ -7951,7 +7951,7 @@ class DropdownSearchFieldComponent extends DropdownOptionFieldBase {
                 useExisting: forwardRef(() => DropdownSearchFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "optionsListRef", first: true, predicate: ["optionsListEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\r\n  [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\r\n  [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\r\n  [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\r\n  [contextMenuId]=\"contextMenuId\" (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"dropdown-search-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [flexibleConnectedOverlay]=\"false\" (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\r\n          [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\r\n          [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\"\r\n          [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\r\n          autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\r\n          role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\r\n          (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\r\n          (blur)=\"onMainBlur($event)\" />\r\n        <span class=\"dropdown-search-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\r\n          <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\r\n    <div #optionsListEl class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n      [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\r\n      (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n      @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\r\n      <app-skeleton-list [rows]=\"8\" />\r\n      }\r\n      @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\r\n      <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n      }\r\n      @for (opt of listOptions; track trackOption($index, opt)) {\r\n      <div role=\"option\" class=\"dropdown-search-field__option\"\r\n        [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\r\n        [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\r\n        [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n        [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n        (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n        {{ opt.label }}\r\n      </div>\r\n      }\r\n      @if (options.length > 0 && loadingMore) {\r\n      <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:text;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "optionsListRef", first: true, predicate: ["optionsListEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\r\n  [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\r\n  [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\r\n  [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\r\n  [contextMenuId]=\"contextMenuId\" (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"dropdown-search-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [flexibleConnectedOverlay]=\"false\" (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\r\n          [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\r\n          [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\"\r\n          [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\r\n          autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\r\n          role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\r\n          (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\r\n          (blur)=\"onMainBlur($event)\" />\r\n        <span class=\"dropdown-search-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\r\n          <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\r\n    <div #optionsListEl class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n      [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\r\n      (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n      @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\r\n      <app-skeleton-list [rows]=\"1\" />\r\n      }\r\n      @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\r\n      <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n      }\r\n      @for (opt of listOptions; track trackOption($index, opt)) {\r\n      <div role=\"option\" class=\"dropdown-search-field__option\"\r\n        [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\r\n        [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\r\n        [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n        [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n        (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n        {{ opt.label }}\r\n      </div>\r\n      }\r\n      @if (options.length > 0 && loadingMore) {\r\n      <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:text;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownSearchFieldComponent, decorators: [{
             type: Component,
@@ -7961,7 +7961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => DropdownSearchFieldComponent),
                             multi: true,
                         },
-                    ], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\r\n  [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\r\n  [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\r\n  [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\r\n  [contextMenuId]=\"contextMenuId\" (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"dropdown-search-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [flexibleConnectedOverlay]=\"false\" (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\r\n          [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\r\n          [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\"\r\n          [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\r\n          autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\r\n          role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\r\n          (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\r\n          (blur)=\"onMainBlur($event)\" />\r\n        <span class=\"dropdown-search-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\r\n          <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\r\n    <div #optionsListEl class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n      [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\r\n      (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n      @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\r\n      <app-skeleton-list [rows]=\"8\" />\r\n      }\r\n      @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\r\n      <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n      }\r\n      @for (opt of listOptions; track trackOption($index, opt)) {\r\n      <div role=\"option\" class=\"dropdown-search-field__option\"\r\n        [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\r\n        [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\r\n        [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n        [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n        (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n        {{ opt.label }}\r\n      </div>\r\n      }\r\n      @if (options.length > 0 && loadingMore) {\r\n      <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:text;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"] }]
+                    ], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n  [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\r\n  [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\r\n  [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\r\n  [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\r\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\r\n  [contextMenuId]=\"contextMenuId\" (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\r\n  <ng-content select=\"[appFieldPrefix]\" />\r\n  <div class=\"dropdown-search-field__wrap\">\r\n    <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\r\n      [flexibleConnectedOverlay]=\"false\" (openChange)=\"onDropdownOpenChange($event)\">\r\n      <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\r\n        (keydown)=\"onTriggerKeydown($event)\">\r\n        <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\r\n          [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\r\n          [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\"\r\n          [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\r\n          autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\r\n          role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\r\n          [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n          [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\r\n          (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\r\n          (blur)=\"onMainBlur($event)\" />\r\n        <span class=\"dropdown-search-field__trigger-suffix\">\r\n          <ng-content select=\"[appMultiselectTriggerSuffix]\" />\r\n        </span>\r\n        <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\r\n          [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\r\n          <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </app-dropdown-base>\r\n  </div>\r\n</app-base-field>\r\n\r\n<ng-template #optionsPanelTpl>\r\n  <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\r\n    <div #optionsListEl class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\r\n      [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\r\n      (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\r\n      @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\r\n      <app-skeleton-list [rows]=\"1\" />\r\n      }\r\n      @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\r\n      <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\r\n      }\r\n      @for (opt of listOptions; track trackOption($index, opt)) {\r\n      <div role=\"option\" class=\"dropdown-search-field__option\"\r\n        [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\r\n        [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\r\n        [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\r\n        [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\r\n        (keydown)=\"onOptionRowKeydown($event, opt)\">\r\n        {{ opt.label }}\r\n      </div>\r\n      }\r\n      @if (options.length > 0 && loadingMore) {\r\n      <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:text;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"] }]
         }], propDecorators: { hostInvalidClass: [{
                 type: HostBinding,
                 args: ['class.dropdown-search-field--invalid']