@trismegisto/spine 3.0.4 → 3.1.0

package/fesm2022/{trismegisto-spine-auto-service-auto-service-client.component-wu2tFGS7.mjs → trismegisto-spine-auto-service-auto-service-client.component-DzmlpLPu.mjs}

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, computed, Input, ChangeDetectionStrategy, Component, ElementRef, Injector, EventEmitter, afterNextRender, Output } from '@angular/core';
+import { inject, ChangeDetectorRef, computed, Input, ChangeDetectionStrategy, Component, ElementRef, Injector, EventEmitter, afterNextRender, Output, signal } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { ButtonComponent, CheckboxComponent, ComboboxComponent, IconComponent, InputComponent, TextareaComponent, ModalComponent, DataGridComponent, DataGridCellDirective, TagComponent, AlertComponent, IconButtonComponent, ReorderListComponent, ComboboxMultiComponent, DividerComponent, DrawerComponent, TabsComponent, TabComponent, TabContentDirective } from '@trismegisto/angular';
-import { A as AutoServiceClientPickerComponent } from './trismegisto-spine-auto-service-auto-service-client-picker.component-DdtDk_xl.mjs';
+import { ButtonComponent, CheckboxComponent, ComboboxComponent, IconComponent, InputComponent, TextareaComponent, ModalComponent, DataGridComponent, DataGridCellDirective, TagComponent, CopyButtonComponent, AlertComponent, IconButtonComponent, ReorderListComponent, ComboboxMultiComponent, DividerComponent, DataGridActionBarComponent, DrawerComponent, TreeComponent, TabsComponent, TabComponent, TabContentDirective } from '@trismegisto/angular';
+import { A as AutoServiceClientPickerComponent } from './trismegisto-spine-auto-service-auto-service-client-picker.component-Cl7ahisu.mjs';
 import * as i3 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { HERMES_ICONS } from '@trismegisto/icons/catalog';
-import { formatMessage, pluralMessage, moveItem, formatMessageHtml } from '@trismegisto/primitives';
+import { formatMessage, pluralMessage, moveItem } from '@trismegisto/primitives';
 import { A as AutoServiceDeleteFeedback, a as autoServiceErrorText } from './trismegisto-spine-auto-service-auto-service-delete-CV_t9vxm.mjs';
 import { SPINE_MESSAGES } from '@trismegisto/spine';
 import { o as optionalIdValidator, a as optionalIdBody } from './trismegisto-spine-auto-service-optional-id.validator-0JPeqhjm.mjs';
@@ -69,6 +69,7 @@ class AutoServiceRoutesComponent {
                 key: 'excludable', title: this.text.colExcludable, sortable: true,
                 value: (r) => (r.excludable ? this.text.excludableYes : this.text.excludableNo),
             },
+            { key: 'id', title: this.text.colId, value: (r) => r.id },
         ], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         // Rota de template não se edita nem se exclui aqui (403 no admin-server); excluir, além disso, só em rota
         // excluível (409). Linha sem ação nenhuma fica sem o kebab.
@@ -81,6 +82,10 @@ class AutoServiceRoutesComponent {
             },
         ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
     }
+    /** Nome acessível do botão de copiar: diz de qual rota é o id. */
+    copyIdLabel(r) {
+        return formatMessage(this.text.copyRouteId, { name: r.display_name || r.name });
+    }
     ngOnChanges(changes) { if (changes['clientId'])
         this.load(); }
     async load() {
@@ -162,14 +167,14 @@ class AutoServiceRoutesComponent {
             void this.deleteRoute(e.row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutesComponent, deps: [{ token: AutoServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceRoutesComponent, isStandalone: true, selector: "spine-auto-service-routes", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routes\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routesCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRoutes\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreateRoute()\">{{ text.newRoute }}</hm-button>\n  <ng-template hmCell=\"name\" let-r>\n    <span class=\"name-cell\">\n      {{ r.name }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"icon\" let-r>\n    <span class=\"icon-cell\">\n      <hm-icon *ngIf=\"r.icon\" [shape]=\"r.icon\"></hm-icon>\n      {{ r.icon || '\u2014' }}\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"path\" let-r>\n    <code *ngIf=\"r.path\">{{ r.path }}</code>\n    <ng-container *ngIf=\"!r.path\">\u2014</ng-container>\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar rota -->\n<hm-modal [open]=\"showRouteModal\" (openChange)=\"showRouteModal = $event\" [heading]=\"editingRouteId ? text.editRoute : text.newRoute\" (closed)=\"showRouteModal = false\">\n  <div class=\"form-stack\">\n    @if (!editingRouteId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-input [formControl]=\"name\" [label]=\"text.internalName\" />\n    <hm-input [formControl]=\"displayName\" [label]=\"text.displayName\" />\n    <hm-combobox [options]=\"iconOptions\" [formControl]=\"icon\" [label]=\"text.icon\" [placeholder]=\"text.iconPlaceholder\" />\n    <hm-input [formControl]=\"path\" [label]=\"text.path\" [placeholder]=\"text.pathPlaceholder\" [hint]=\"text.pathHint\" [messages]=\"pathMessages()\" />\n    <hm-textarea [formControl]=\"info\" [label]=\"text.info\" />\n    <hm-checkbox [formControl]=\"excludable\" [label]=\"text.excludable\" />\n    <p *ngIf=\"excludableLocked\" class=\"field-note\">{{ text.excludableLocked }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouteModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!name.value || path.invalid || (!editingRouteId && newId.invalid)\" (clicked)=\"saveRoute()\">\n      {{ editingRouteId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.field-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.icon-cell{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "help", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceRoutesComponent, isStandalone: true, selector: "spine-auto-service-routes", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routes\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routesCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRoutes\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreateRoute()\">{{ text.newRoute }}</hm-button>\n  <ng-template hmCell=\"name\" let-r>\n    <span class=\"name-cell\">\n      {{ r.name }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"icon\" let-r>\n    <span class=\"icon-cell\">\n      <hm-icon *ngIf=\"r.icon\" [shape]=\"r.icon\"></hm-icon>\n      {{ r.icon || '\u2014' }}\n    </span>\n  </ng-template>\n  <!-- UUID da rota: s\u00F3 o bot\u00E3o de copiar (para criar a mesma rota com o mesmo id no outro ambiente). -->\n  <ng-template hmCell=\"id\" let-r>\n    <hm-copy-button [value]=\"r.id\" [label]=\"copyIdLabel(r)\" [copiedLabel]=\"text.idCopied\" />\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar rota -->\n<hm-modal [open]=\"showRouteModal\" (openChange)=\"showRouteModal = $event\" [heading]=\"editingRouteId ? text.editRoute : text.newRoute\" (closed)=\"showRouteModal = false\">\n  <div class=\"form-stack\">\n    @if (!editingRouteId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-input [formControl]=\"name\" [label]=\"text.internalName\" />\n    <hm-input [formControl]=\"displayName\" [label]=\"text.displayName\" />\n    <hm-combobox [options]=\"iconOptions\" [formControl]=\"icon\" [label]=\"text.icon\" [placeholder]=\"text.iconPlaceholder\" />\n    <hm-input [formControl]=\"path\" [label]=\"text.path\" [placeholder]=\"text.pathPlaceholder\" [hint]=\"text.pathHint\" [messages]=\"pathMessages()\" />\n    <hm-textarea [formControl]=\"info\" [label]=\"text.info\" />\n    <hm-checkbox [formControl]=\"excludable\" [label]=\"text.excludable\" />\n    <p *ngIf=\"excludableLocked\" class=\"field-note\">{{ text.excludableLocked }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouteModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!name.value || path.invalid || (!editingRouteId && newId.invalid)\" (clicked)=\"saveRoute()\">\n      {{ editingRouteId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.field-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.icon-cell{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "help", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: CopyButtonComponent, selector: "hm-copy-button", inputs: ["value", "label", "copiedLabel", "variant", "size", "disabled", "feedbackDuration"], outputs: ["copied", "copyFailed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spine-auto-service-routes', standalone: true, imports: [
                         CommonModule, ReactiveFormsModule, ButtonComponent, CheckboxComponent, ComboboxComponent, IconComponent, InputComponent,
-                        TextareaComponent, ModalComponent, DataGridComponent, DataGridCellDirective, TagComponent,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routes\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routesCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRoutes\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreateRoute()\">{{ text.newRoute }}</hm-button>\n  <ng-template hmCell=\"name\" let-r>\n    <span class=\"name-cell\">\n      {{ r.name }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"icon\" let-r>\n    <span class=\"icon-cell\">\n      <hm-icon *ngIf=\"r.icon\" [shape]=\"r.icon\"></hm-icon>\n      {{ r.icon || '\u2014' }}\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"path\" let-r>\n    <code *ngIf=\"r.path\">{{ r.path }}</code>\n    <ng-container *ngIf=\"!r.path\">\u2014</ng-container>\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar rota -->\n<hm-modal [open]=\"showRouteModal\" (openChange)=\"showRouteModal = $event\" [heading]=\"editingRouteId ? text.editRoute : text.newRoute\" (closed)=\"showRouteModal = false\">\n  <div class=\"form-stack\">\n    @if (!editingRouteId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-input [formControl]=\"name\" [label]=\"text.internalName\" />\n    <hm-input [formControl]=\"displayName\" [label]=\"text.displayName\" />\n    <hm-combobox [options]=\"iconOptions\" [formControl]=\"icon\" [label]=\"text.icon\" [placeholder]=\"text.iconPlaceholder\" />\n    <hm-input [formControl]=\"path\" [label]=\"text.path\" [placeholder]=\"text.pathPlaceholder\" [hint]=\"text.pathHint\" [messages]=\"pathMessages()\" />\n    <hm-textarea [formControl]=\"info\" [label]=\"text.info\" />\n    <hm-checkbox [formControl]=\"excludable\" [label]=\"text.excludable\" />\n    <p *ngIf=\"excludableLocked\" class=\"field-note\">{{ text.excludableLocked }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouteModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!name.value || path.invalid || (!editingRouteId && newId.invalid)\" (clicked)=\"saveRoute()\">\n      {{ editingRouteId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.field-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.icon-cell{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}\n"] }]
+                        TextareaComponent, ModalComponent, DataGridComponent, DataGridCellDirective, TagComponent, CopyButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routes\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routesCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRoutes\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreateRoute()\">{{ text.newRoute }}</hm-button>\n  <ng-template hmCell=\"name\" let-r>\n    <span class=\"name-cell\">\n      {{ r.name }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"icon\" let-r>\n    <span class=\"icon-cell\">\n      <hm-icon *ngIf=\"r.icon\" [shape]=\"r.icon\"></hm-icon>\n      {{ r.icon || '\u2014' }}\n    </span>\n  </ng-template>\n  <!-- UUID da rota: s\u00F3 o bot\u00E3o de copiar (para criar a mesma rota com o mesmo id no outro ambiente). -->\n  <ng-template hmCell=\"id\" let-r>\n    <hm-copy-button [value]=\"r.id\" [label]=\"copyIdLabel(r)\" [copiedLabel]=\"text.idCopied\" />\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar rota -->\n<hm-modal [open]=\"showRouteModal\" (openChange)=\"showRouteModal = $event\" [heading]=\"editingRouteId ? text.editRoute : text.newRoute\" (closed)=\"showRouteModal = false\">\n  <div class=\"form-stack\">\n    @if (!editingRouteId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-input [formControl]=\"name\" [label]=\"text.internalName\" />\n    <hm-input [formControl]=\"displayName\" [label]=\"text.displayName\" />\n    <hm-combobox [options]=\"iconOptions\" [formControl]=\"icon\" [label]=\"text.icon\" [placeholder]=\"text.iconPlaceholder\" />\n    <hm-input [formControl]=\"path\" [label]=\"text.path\" [placeholder]=\"text.pathPlaceholder\" [hint]=\"text.pathHint\" [messages]=\"pathMessages()\" />\n    <hm-textarea [formControl]=\"info\" [label]=\"text.info\" />\n    <hm-checkbox [formControl]=\"excludable\" [label]=\"text.excludable\" />\n    <p *ngIf=\"excludableLocked\" class=\"field-note\">{{ text.excludableLocked }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouteModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!name.value || path.invalid || (!editingRouteId && newId.invalid)\" (clicked)=\"saveRoute()\">\n      {{ editingRouteId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.field-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.icon-cell{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}\n"] }]
         }], ctorParameters: () => [{ type: AutoServiceService }], propDecorators: { clientId: [{
                 type: Input
             }] } });
@@ -388,6 +393,7 @@ class AutoServiceRoutersComponent {
             { key: 'description', title: this.text.colDescription, value: (r) => r.description ?? '' },
             { key: 'is_private', title: this.text.colVisibility, value: (r) => (r.is_private ? this.text.private : this.text.public), sortable: true },
             { key: 'allowed_type_ids', title: this.text.colAllowedBadges, value: (r) => this.allowedTypeNames(r.allowed_type_ids).join(', ') || this.text.anyBadge },
+            { key: 'id', title: this.text.colId, value: (r) => r.id },
         ], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         // Router de template não se edita nem se exclui aqui (403 no admin-server): a linha fica sem o kebab.
         this.rowActions = computed(() => [
@@ -401,6 +407,10 @@ class AutoServiceRoutersComponent {
         /** Níveis da hierarquia, de cima para baixo (a página é a folha e fica fora: sempre obrigatória). */
         this.hierarchyLevels = HIERARCHY_LEVELS;
     }
+    /** Nome acessível do botão de copiar: diz de qual roteador é o id (o caminho montado identifica a tela). */
+    copyIdLabel(r) {
+        return formatMessage(this.text.copyRouterId, { name: r.built_path || this.routeName(r.page_id) });
+    }
     get routeOptions() {
         return this.routes.map((r) => ({ value: r.id, label: r.display_name || r.name }));
     }
@@ -545,14 +555,15 @@ class AutoServiceRoutersComponent {
             void this.deleteRouter(e.row.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutersComponent, deps: [{ token: AutoServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceRoutersComponent, isStandalone: true, selector: "spine-auto-service-routers", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routers\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routersCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRouters\"\n>\n  <hm-button dataGridActions emphasis=\"medium\" icon=\"sort-vertical\" [disabled]=\"!routers.length\" (clicked)=\"showReorder = true\">{{ text.reorder }}</hm-button>\n  <hm-button dataGridActions icon=\"plus\" [disabled]=\"!routes.length\" (clicked)=\"openCreateRouter()\">{{ text.newRouter }}</hm-button>\n  <ng-template hmCell=\"page\" let-r>\n    <span class=\"name-cell\">\n      {{ routeName(r.page_id) }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"is_private\" let-r>\n    <hm-tag [name]=\"r.is_private ? text.private : text.public\" [color]=\"r.is_private ? 'warning' : 'success'\" />\n  </ng-template>\n  <ng-template hmCell=\"allowed_type_ids\" let-r>\n    <span *ngIf=\"!r.allowed_type_ids?.length; else badges\" class=\"muted\">{{ text.anyBadge }}</span>\n    <ng-template #badges>\n      <span class=\"name-cell\">\n        <hm-tag *ngFor=\"let name of allowedTypeNames(r.allowed_type_ids)\" [name]=\"name\" color=\"info\" />\n      </span>\n    </ng-template>\n  </ng-template>\n  <ng-template hmCell=\"built_path\" let-r>\n    <code>{{ r.built_path }}</code>\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: ordem dos itens no menu do app (vale tamb\u00E9m para roteadores de template) -->\n<spine-auto-service-routers-reorder [clientId]=\"clientId\" [open]=\"showReorder\" (openChange)=\"showReorder = $event\" (saved)=\"load()\" />\n\n<!-- Modal: criar/editar roteador -->\n<hm-modal [open]=\"showRouterModal\" (openChange)=\"showRouterModal = $event\" [heading]=\"editingRouterId ? text.editRouter : text.newRouter\" size=\"large\" (closed)=\"showRouterModal = false\">\n  <div class=\"form-stack\">\n    <hm-alert *ngIf=\"routerError\" variant=\"error\">{{ routerError }}</hm-alert>\n    @if (!editingRouterId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-combobox [label]=\"text.page\" [options]=\"routeOptions\" [value]=\"routerForm.page_id\" (valueChange)=\"routerForm.page_id = $event\"></hm-combobox>\n    <hm-textarea [label]=\"text.routerDescription\" [rows]=\"2\" [hint]=\"text.routerDescriptionHint\" [(ngModel)]=\"routerForm.description\" />\n\n    <hm-divider [label]=\"text.hierarchy\" />\n    <p class=\"hierarchy-hint muted\">{{ text.hierarchyHint }}</p>\n\n    <!-- De cima para baixo: cada n\u00EDvel s\u00F3 abre com o de cima escolhido; limpar um n\u00EDvel limpa os de baixo. -->\n    <hm-combobox *ngFor=\"let level of hierarchyLevels\" [label]=\"levelLabel(level)\" [options]=\"routeOptions\" [clearable]=\"true\"\n      [disabled]=\"levelLocked(level)\" [value]=\"routerForm[level]\" (valueChange)=\"setLevel(level, $event)\"></hm-combobox>\n    <hm-alert *ngIf=\"hierarchyGap\" variant=\"warning\">{{ text.routerErrors.hierarchyGap }}</hm-alert>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\n    <!-- Vazio = qualquer crach\u00E1 (mesma regra do modal de roteador do argos-admin). -->\n    <hm-combobox-multi [label]=\"text.colAllowedBadges\" [options]=\"groupTypeOptions\" [placeholder]=\"text.anyBadge\"\n      [hint]=\"text.allowedBadgesHint\" [visibleChipsLimit]=\"null\" [selected]=\"routerForm.allowed_type_ids\"\n      (selectedChange)=\"routerForm.allowed_type_ids = [...$event]; routerError = null\" />\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouterModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!routerForm.page_id || hierarchyGap || (!editingRouterId && newId.invalid)\" [loading]=\"savingRouter\" (clicked)=\"saveRouter()\">\n      {{ editingRouterId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.hierarchy-hint{margin:0;font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: ComboboxMultiComponent, selector: "hm-combobox-multi", inputs: ["label", "options", "selected", "extraOptions", "unknownLabel", "placeholder", "hint", "help", "max", "visibleChipsLimit"], outputs: ["selectedChange"] }, { kind: "component", type: DividerComponent, selector: "hm-divider", inputs: ["orientation", "label", "labelAlign", "emphasis", "thickness", "spacing", "decorative"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "help", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: AutoServiceRoutersReorderComponent, selector: "spine-auto-service-routers-reorder", inputs: ["clientId", "open"], outputs: ["openChange", "saved"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceRoutersComponent, isStandalone: true, selector: "spine-auto-service-routers", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routers\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routersCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRouters\"\n>\n  <hm-button dataGridActions emphasis=\"medium\" icon=\"sort-vertical\" [disabled]=\"!routers.length\" (clicked)=\"showReorder = true\">{{ text.reorder }}</hm-button>\n  <hm-button dataGridActions icon=\"plus\" [disabled]=\"!routes.length\" (clicked)=\"openCreateRouter()\">{{ text.newRouter }}</hm-button>\n  <ng-template hmCell=\"page\" let-r>\n    <span class=\"name-cell\">\n      {{ routeName(r.page_id) }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"is_private\" let-r>\n    <hm-tag [name]=\"r.is_private ? text.private : text.public\" [color]=\"r.is_private ? 'warning' : 'success'\" />\n  </ng-template>\n  <ng-template hmCell=\"allowed_type_ids\" let-r>\n    <span *ngIf=\"!r.allowed_type_ids?.length; else badges\" class=\"muted\">{{ text.anyBadge }}</span>\n    <ng-template #badges>\n      <span class=\"name-cell\">\n        <hm-tag *ngFor=\"let name of allowedTypeNames(r.allowed_type_ids)\" [name]=\"name\" color=\"info\" />\n      </span>\n    </ng-template>\n  </ng-template>\n  <ng-template hmCell=\"built_path\" let-r>\n    <code>{{ r.built_path }}</code>\n  </ng-template>\n  <!-- UUID do roteador: s\u00F3 o bot\u00E3o de copiar (para criar o mesmo roteador com o mesmo id no outro ambiente). -->\n  <ng-template hmCell=\"id\" let-r>\n    <hm-copy-button [value]=\"r.id\" [label]=\"copyIdLabel(r)\" [copiedLabel]=\"text.idCopied\" />\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: ordem dos itens no menu do app (vale tamb\u00E9m para roteadores de template) -->\n<spine-auto-service-routers-reorder [clientId]=\"clientId\" [open]=\"showReorder\" (openChange)=\"showReorder = $event\" (saved)=\"load()\" />\n\n<!-- Modal: criar/editar roteador -->\n<hm-modal [open]=\"showRouterModal\" (openChange)=\"showRouterModal = $event\" [heading]=\"editingRouterId ? text.editRouter : text.newRouter\" size=\"large\" (closed)=\"showRouterModal = false\">\n  <div class=\"form-stack\">\n    <hm-alert *ngIf=\"routerError\" variant=\"error\">{{ routerError }}</hm-alert>\n    @if (!editingRouterId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-combobox [label]=\"text.page\" [options]=\"routeOptions\" [value]=\"routerForm.page_id\" (valueChange)=\"routerForm.page_id = $event\"></hm-combobox>\n    <hm-textarea [label]=\"text.routerDescription\" [rows]=\"2\" [hint]=\"text.routerDescriptionHint\" [(ngModel)]=\"routerForm.description\" />\n\n    <hm-divider [label]=\"text.hierarchy\" />\n    <p class=\"hierarchy-hint muted\">{{ text.hierarchyHint }}</p>\n\n    <!-- De cima para baixo: cada n\u00EDvel s\u00F3 abre com o de cima escolhido; limpar um n\u00EDvel limpa os de baixo. -->\n    <hm-combobox *ngFor=\"let level of hierarchyLevels\" [label]=\"levelLabel(level)\" [options]=\"routeOptions\" [clearable]=\"true\"\n      [disabled]=\"levelLocked(level)\" [value]=\"routerForm[level]\" (valueChange)=\"setLevel(level, $event)\"></hm-combobox>\n    <hm-alert *ngIf=\"hierarchyGap\" variant=\"warning\">{{ text.routerErrors.hierarchyGap }}</hm-alert>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\n    <!-- Vazio = qualquer crach\u00E1 (mesma regra do modal de roteador do argos-admin). -->\n    <hm-combobox-multi [label]=\"text.colAllowedBadges\" [options]=\"groupTypeOptions\" [placeholder]=\"text.anyBadge\"\n      [hint]=\"text.allowedBadgesHint\" [visibleChipsLimit]=\"null\" [selected]=\"routerForm.allowed_type_ids\"\n      (selectedChange)=\"routerForm.allowed_type_ids = [...$event]; routerError = null\" />\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouterModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!routerForm.page_id || hierarchyGap || (!editingRouterId && newId.invalid)\" [loading]=\"savingRouter\" (clicked)=\"saveRouter()\">\n      {{ editingRouterId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.hierarchy-hint{margin:0;font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: ComboboxComponent, selector: "hm-combobox", inputs: ["label", "options", "value", "placeholder", "icon", "hint", "help", "size", "labelHidden", "clearable", "requiredManual", "loading", "allowCustomValue"], outputs: ["valueChange"] }, { kind: "component", type: ComboboxMultiComponent, selector: "hm-combobox-multi", inputs: ["label", "options", "selected", "extraOptions", "unknownLabel", "placeholder", "hint", "help", "max", "visibleChipsLimit"], outputs: ["selectedChange"] }, { kind: "component", type: DividerComponent, selector: "hm-divider", inputs: ["orientation", "label", "labelAlign", "emphasis", "thickness", "spacing", "decorative"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "help", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: AutoServiceRoutersReorderComponent, selector: "spine-auto-service-routers-reorder", inputs: ["clientId", "open"], outputs: ["openChange", "saved"] }, { kind: "component", type: CopyButtonComponent, selector: "hm-copy-button", inputs: ["value", "label", "copiedLabel", "variant", "size", "disabled", "feedbackDuration"], outputs: ["copied", "copyFailed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spine-auto-service-routers', standalone: true, imports: [
                         CommonModule, FormsModule, ReactiveFormsModule, AlertComponent, ButtonComponent, CheckboxComponent, ComboboxComponent, ComboboxMultiComponent, DividerComponent,
                         InputComponent, ModalComponent, DataGridComponent, DataGridCellDirective, TagComponent, TextareaComponent, AutoServiceRoutersReorderComponent,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routers\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routersCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRouters\"\n>\n  <hm-button dataGridActions emphasis=\"medium\" icon=\"sort-vertical\" [disabled]=\"!routers.length\" (clicked)=\"showReorder = true\">{{ text.reorder }}</hm-button>\n  <hm-button dataGridActions icon=\"plus\" [disabled]=\"!routes.length\" (clicked)=\"openCreateRouter()\">{{ text.newRouter }}</hm-button>\n  <ng-template hmCell=\"page\" let-r>\n    <span class=\"name-cell\">\n      {{ routeName(r.page_id) }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"is_private\" let-r>\n    <hm-tag [name]=\"r.is_private ? text.private : text.public\" [color]=\"r.is_private ? 'warning' : 'success'\" />\n  </ng-template>\n  <ng-template hmCell=\"allowed_type_ids\" let-r>\n    <span *ngIf=\"!r.allowed_type_ids?.length; else badges\" class=\"muted\">{{ text.anyBadge }}</span>\n    <ng-template #badges>\n      <span class=\"name-cell\">\n        <hm-tag *ngFor=\"let name of allowedTypeNames(r.allowed_type_ids)\" [name]=\"name\" color=\"info\" />\n      </span>\n    </ng-template>\n  </ng-template>\n  <ng-template hmCell=\"built_path\" let-r>\n    <code>{{ r.built_path }}</code>\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: ordem dos itens no menu do app (vale tamb\u00E9m para roteadores de template) -->\n<spine-auto-service-routers-reorder [clientId]=\"clientId\" [open]=\"showReorder\" (openChange)=\"showReorder = $event\" (saved)=\"load()\" />\n\n<!-- Modal: criar/editar roteador -->\n<hm-modal [open]=\"showRouterModal\" (openChange)=\"showRouterModal = $event\" [heading]=\"editingRouterId ? text.editRouter : text.newRouter\" size=\"large\" (closed)=\"showRouterModal = false\">\n  <div class=\"form-stack\">\n    <hm-alert *ngIf=\"routerError\" variant=\"error\">{{ routerError }}</hm-alert>\n    @if (!editingRouterId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-combobox [label]=\"text.page\" [options]=\"routeOptions\" [value]=\"routerForm.page_id\" (valueChange)=\"routerForm.page_id = $event\"></hm-combobox>\n    <hm-textarea [label]=\"text.routerDescription\" [rows]=\"2\" [hint]=\"text.routerDescriptionHint\" [(ngModel)]=\"routerForm.description\" />\n\n    <hm-divider [label]=\"text.hierarchy\" />\n    <p class=\"hierarchy-hint muted\">{{ text.hierarchyHint }}</p>\n\n    <!-- De cima para baixo: cada n\u00EDvel s\u00F3 abre com o de cima escolhido; limpar um n\u00EDvel limpa os de baixo. -->\n    <hm-combobox *ngFor=\"let level of hierarchyLevels\" [label]=\"levelLabel(level)\" [options]=\"routeOptions\" [clearable]=\"true\"\n      [disabled]=\"levelLocked(level)\" [value]=\"routerForm[level]\" (valueChange)=\"setLevel(level, $event)\"></hm-combobox>\n    <hm-alert *ngIf=\"hierarchyGap\" variant=\"warning\">{{ text.routerErrors.hierarchyGap }}</hm-alert>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\n    <!-- Vazio = qualquer crach\u00E1 (mesma regra do modal de roteador do argos-admin). -->\n    <hm-combobox-multi [label]=\"text.colAllowedBadges\" [options]=\"groupTypeOptions\" [placeholder]=\"text.anyBadge\"\n      [hint]=\"text.allowedBadgesHint\" [visibleChipsLimit]=\"null\" [selected]=\"routerForm.allowed_type_ids\"\n      (selectedChange)=\"routerForm.allowed_type_ids = [...$event]; routerError = null\" />\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouterModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!routerForm.page_id || hierarchyGap || (!editingRouterId && newId.invalid)\" [loading]=\"savingRouter\" (clicked)=\"saveRouter()\">\n      {{ editingRouterId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.hierarchy-hint{margin:0;font-size:var(--hm-font-size-sm)}\n"] }]
+                        CopyButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"routers\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.routersCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noRouters\"\n>\n  <hm-button dataGridActions emphasis=\"medium\" icon=\"sort-vertical\" [disabled]=\"!routers.length\" (clicked)=\"showReorder = true\">{{ text.reorder }}</hm-button>\n  <hm-button dataGridActions icon=\"plus\" [disabled]=\"!routes.length\" (clicked)=\"openCreateRouter()\">{{ text.newRouter }}</hm-button>\n  <ng-template hmCell=\"page\" let-r>\n    <span class=\"name-cell\">\n      {{ routeName(r.page_id) }}\n      <hm-tag *ngIf=\"r.templated\" [name]=\"text.templateTag\" color=\"info\" [title]=\"text.templateLocked\" />\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"is_private\" let-r>\n    <hm-tag [name]=\"r.is_private ? text.private : text.public\" [color]=\"r.is_private ? 'warning' : 'success'\" />\n  </ng-template>\n  <ng-template hmCell=\"allowed_type_ids\" let-r>\n    <span *ngIf=\"!r.allowed_type_ids?.length; else badges\" class=\"muted\">{{ text.anyBadge }}</span>\n    <ng-template #badges>\n      <span class=\"name-cell\">\n        <hm-tag *ngFor=\"let name of allowedTypeNames(r.allowed_type_ids)\" [name]=\"name\" color=\"info\" />\n      </span>\n    </ng-template>\n  </ng-template>\n  <ng-template hmCell=\"built_path\" let-r>\n    <code>{{ r.built_path }}</code>\n  </ng-template>\n  <!-- UUID do roteador: s\u00F3 o bot\u00E3o de copiar (para criar o mesmo roteador com o mesmo id no outro ambiente). -->\n  <ng-template hmCell=\"id\" let-r>\n    <hm-copy-button [value]=\"r.id\" [label]=\"copyIdLabel(r)\" [copiedLabel]=\"text.idCopied\" />\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: ordem dos itens no menu do app (vale tamb\u00E9m para roteadores de template) -->\n<spine-auto-service-routers-reorder [clientId]=\"clientId\" [open]=\"showReorder\" (openChange)=\"showReorder = $event\" (saved)=\"load()\" />\n\n<!-- Modal: criar/editar roteador -->\n<hm-modal [open]=\"showRouterModal\" (openChange)=\"showRouterModal = $event\" [heading]=\"editingRouterId ? text.editRouter : text.newRouter\" size=\"large\" (closed)=\"showRouterModal = false\">\n  <div class=\"form-stack\">\n    <hm-alert *ngIf=\"routerError\" variant=\"error\">{{ routerError }}</hm-alert>\n    @if (!editingRouterId) {\n      <hm-input [formControl]=\"newId\" [label]=\"text.optionalId\" [placeholder]=\"text.optionalIdPlaceholder\" [hint]=\"text.optionalIdHint\" [messages]=\"idMessages()\" />\n    }\n    <hm-combobox [label]=\"text.page\" [options]=\"routeOptions\" [value]=\"routerForm.page_id\" (valueChange)=\"routerForm.page_id = $event\"></hm-combobox>\n    <hm-textarea [label]=\"text.routerDescription\" [rows]=\"2\" [hint]=\"text.routerDescriptionHint\" [(ngModel)]=\"routerForm.description\" />\n\n    <hm-divider [label]=\"text.hierarchy\" />\n    <p class=\"hierarchy-hint muted\">{{ text.hierarchyHint }}</p>\n\n    <!-- De cima para baixo: cada n\u00EDvel s\u00F3 abre com o de cima escolhido; limpar um n\u00EDvel limpa os de baixo. -->\n    <hm-combobox *ngFor=\"let level of hierarchyLevels\" [label]=\"levelLabel(level)\" [options]=\"routeOptions\" [clearable]=\"true\"\n      [disabled]=\"levelLocked(level)\" [value]=\"routerForm[level]\" (valueChange)=\"setLevel(level, $event)\"></hm-combobox>\n    <hm-alert *ngIf=\"hierarchyGap\" variant=\"warning\">{{ text.routerErrors.hierarchyGap }}</hm-alert>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\n    <!-- Vazio = qualquer crach\u00E1 (mesma regra do modal de roteador do argos-admin). -->\n    <hm-combobox-multi [label]=\"text.colAllowedBadges\" [options]=\"groupTypeOptions\" [placeholder]=\"text.anyBadge\"\n      [hint]=\"text.allowedBadgesHint\" [visibleChipsLimit]=\"null\" [selected]=\"routerForm.allowed_type_ids\"\n      (selectedChange)=\"routerForm.allowed_type_ids = [...$event]; routerError = null\" />\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"showRouterModal = false\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!routerForm.page_id || hierarchyGap || (!editingRouterId && newId.invalid)\" [loading]=\"savingRouter\" (clicked)=\"saveRouter()\">\n      {{ editingRouterId ? text.save : text.create }}\n    </hm-button>\n  </ng-container>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}.name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.form-stack{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.hierarchy-hint{margin:0;font-size:var(--hm-font-size-sm)}\n"] }]
         }], ctorParameters: () => [{ type: AutoServiceService }], propDecorators: { clientId: [{
                 type: Input
             }] } });
@@ -612,62 +623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             }] } });
 
 /**
- * Um nível da árvore de rotas — se referencia (`imports: [RouteTreeNodeComponent]`) pra
- * desenhar os filhos, já que não existe nenhum componente de árvore no DS novo (o antigo
- * usava `hermes-tree`/`*hermesRecursiveFor`, sem equivalente). Folha = checkbox (marca/
- * desmarca um guard); pasta = só rótulo, sem estado próprio.
+ * "Gerenciar rotas" de um acesso do client: as telas privadas que o grupo pode receber (roteadores sem restrição de
+ * crachá ou que aceitam o crachá do grupo), em `hm-tree` pelos níveis do menu, como no painel do Argos. No topo, só o
+ * filtro; a seleção guarda só folhas (páginas) e a diferença vira guard criado ou removido ao confirmar.
  */
-class RouteTreeNodeComponent {
-    constructor() {
-        this.selectedChange = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RouteTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: RouteTreeNodeComponent, isStandalone: true, selector: "spine-route-tree-node", inputs: { node: "node" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: `
-    <li class="tree-node" [class.tree-node--folder]="node.isFolder">
-      <label *ngIf="!node.isFolder" class="tree-node__leaf">
-        <input type="checkbox" class="hm-check" [(ngModel)]="node.selected" (ngModelChange)="selectedChange.emit()" />
-        <hm-icon shape="router" class="tree-node__icon"></hm-icon>
-        <span>{{ node.name }}</span>
-      </label>
-
-      <div *ngIf="node.isFolder" class="tree-node__folder">
-        <hm-icon shape="filter-grid" class="tree-node__icon"></hm-icon>
-        <span>{{ node.name }}</span>
-      </div>
-
-      <ul class="tree-node__children" *ngIf="node.children.length">
-        <spine-route-tree-node *ngFor="let child of node.children" [node]="child" (selectedChange)="selectedChange.emit()"></spine-route-tree-node>
-      </ul>
-    </li>
-  `, isInline: true, styles: [".tree-node{list-style:none}.tree-node__children{list-style:none;margin:0;padding-inline-start:var(--hm-space-lg)}.tree-node__leaf,.tree-node__folder{display:flex;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-micro) 0;font-size:var(--hm-font-size-sm)}.tree-node__leaf{cursor:pointer}.tree-node__folder{font-weight:var(--hm-font-weight-semibold);color:var(--hm-muted)}.tree-node__icon{flex:0 0 auto;color:var(--hm-action)}\n"], dependencies: [{ kind: "component", type: RouteTreeNodeComponent, selector: "spine-route-tree-node", inputs: ["node"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RouteTreeNodeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spine-route-tree-node', standalone: true, imports: [CommonModule, FormsModule, IconComponent, RouteTreeNodeComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `
-    <li class="tree-node" [class.tree-node--folder]="node.isFolder">
-      <label *ngIf="!node.isFolder" class="tree-node__leaf">
-        <input type="checkbox" class="hm-check" [(ngModel)]="node.selected" (ngModelChange)="selectedChange.emit()" />
-        <hm-icon shape="router" class="tree-node__icon"></hm-icon>
-        <span>{{ node.name }}</span>
-      </label>
-
-      <div *ngIf="node.isFolder" class="tree-node__folder">
-        <hm-icon shape="filter-grid" class="tree-node__icon"></hm-icon>
-        <span>{{ node.name }}</span>
-      </div>
-
-      <ul class="tree-node__children" *ngIf="node.children.length">
-        <spine-route-tree-node *ngFor="let child of node.children" [node]="child" (selectedChange)="selectedChange.emit()"></spine-route-tree-node>
-      </ul>
-    </li>
-  `, styles: [".tree-node{list-style:none}.tree-node__children{list-style:none;margin:0;padding-inline-start:var(--hm-space-lg)}.tree-node__leaf,.tree-node__folder{display:flex;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-micro) 0;font-size:var(--hm-font-size-sm)}.tree-node__leaf{cursor:pointer}.tree-node__folder{font-weight:var(--hm-font-weight-semibold);color:var(--hm-muted)}.tree-node__icon{flex:0 0 auto;color:var(--hm-action)}\n"] }]
-        }], propDecorators: { node: [{
-                type: Input,
-                args: [{ required: true }]
-            }], selectedChange: [{
-                type: Output
-            }] } });
-
 class AutoServiceAccessGuardsComponent {
     constructor(service) {
         this.service = service;
@@ -675,8 +634,6 @@ class AutoServiceAccessGuardsComponent {
         /** Telas com estado em campo comum, preenchido depois de `await`: marca a view ao terminar (app sem zone.js). */
         this.cdr = inject(ChangeDetectorRef);
         this.fmt = formatMessage;
-        /** Para `[innerHTML]`: escapa os parâmetros (o tipo de grupo vem do servidor). */
-        this.fmtHtml = formatMessageHtml;
         this.clientId = '';
         this.access = null;
         this.open = false;
@@ -685,9 +642,20 @@ class AutoServiceAccessGuardsComponent {
         this.availableRoutes = [];
         this.clientPrivateRouters = [];
         this.guards = [];
-        this.tree = [];
         this.loading = false;
         this.saving = false;
+        this.tree = signal([], ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+        /** Termo do filtro no topo do drawer; a árvore mostrada é `visibleTree`. */
+        this.filter = signal('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.visibleTree = computed(() => filterRouteTree(this.tree(), this.filter()), ...(ngDevMode ? [{ debugName: "visibleTree" }] : /* istanbul ignore next */ []));
+        this.treeNodes = computed(() => this.visibleTree().map(n => toTreeNode(n)), ...(ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []));
+        /** Só folhas (páginas): o que tem guard agora na árvore. */
+        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+        this.expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+        this.originalSelectedIds = new Set();
+        this.nodesByKey = computed(() => indexByKey(this.tree()), ...(ngDevMode ? [{ debugName: "nodesByKey" }] : /* istanbul ignore next */ []));
+        /** Nós visíveis por chave: marcar uma pasta com o filtro ativo só mexe nas páginas que aparecem. */
+        this.visibleByKey = computed(() => indexByKey(this.visibleTree()), ...(ngDevMode ? [{ debugName: "visibleByKey" }] : /* istanbul ignore next */ []));
         this.levels = ['header_id', 'navigation_id', 'menu_id', 'item_id', 'submenu_id'];
     }
     ngOnChanges(changes) { if (changes['open'] && this.open) {
@@ -737,19 +705,57 @@ class AutoServiceAccessGuardsComponent {
                 routerId: router.id, guardId: guard?.guard_id, selected: !!guard, children: [],
             });
         }
-        this.tree = root;
+        this.tree.set(root);
+        const original = new Set(root.flatMap(collectLeaves).filter(l => l.selected).map(l => l.key));
+        this.originalSelectedIds = original;
+        this.selectedIds.set(new Set(original));
+        this.expandedIds.set(new Set());
+        this.filter.set('');
+    }
+    /** Filtrar abre as pastas que sobraram, para as telas encontradas aparecerem sem clique. */
+    onFilterChange(term) {
+        this.filter.set(term);
+        if (!term.trim())
+            return;
+        this.expandedIds.update(current => new Set([...current, ...folderKeys(this.visibleTree())]));
+    }
+    /** Com caixas o hm-tree emite folhas (ou a pasta sem folhas): pasta vira as páginas dela que estão à vista. */
+    onTreeChanged(changes) {
+        this.selectedIds.update(current => {
+            const next = new Set(current);
+            for (const change of changes) {
+                const node = this.visibleByKey().get(change.id);
+                if (!node)
+                    continue;
+                for (const leaf of collectLeaves(node)) {
+                    if (change.selected)
+                        next.add(leaf.key);
+                    else
+                        next.delete(leaf.key);
+                }
+            }
+            return next;
+        });
+    }
+    get hasChanges() {
+        const selected = this.selectedIds();
+        if (selected.size !== this.originalSelectedIds.size)
+            return true;
+        for (const id of selected)
+            if (!this.originalSelectedIds.has(id))
+                return true;
+        return false;
     }
-    collectLeaves(node) {
-        if (!node.isFolder)
-            return [node];
-        return node.children.flatMap(child => this.collectLeaves(child));
+    /** Folha (página) pela chave; `undefined` para pasta ou chave desconhecida. */
+    leafByKey(key) {
+        const node = this.nodesByKey().get(key);
+        return node && !node.isFolder ? node : undefined;
     }
-    get allLeaves() { return this.tree.flatMap(node => this.collectLeaves(node)); }
-    get hasChanges() { return this.allLeaves.some(leaf => !!leaf.selected !== !!leaf.guardId); }
     async confirm() {
-        const leaves = this.allLeaves;
-        const toAdd = leaves.filter(l => l.selected && !l.guardId);
-        const toRemove = leaves.filter(l => !l.selected && l.guardId);
+        const selected = this.selectedIds();
+        const isLeaf = (l) => !!l;
+        const toAdd = [...selected].filter(id => !this.originalSelectedIds.has(id)).map(id => this.leafByKey(id)).filter(isLeaf);
+        const toRemove = [...this.originalSelectedIds].filter(id => !selected.has(id)).map(id => this.leafByKey(id)).filter(isLeaf);
         if (toAdd.length === 0 && toRemove.length === 0) {
             this.close();
             return;
@@ -770,11 +776,11 @@ class AutoServiceAccessGuardsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceAccessGuardsComponent, deps: [{ token: AutoServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceAccessGuardsComponent, isStandalone: true, selector: "spine-auto-service-access-guards", inputs: { clientId: "clientId", access: "access", open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<hm-drawer [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"fmt(text.routesOf, { group: access?.group_name ?? '' })\" (closed)=\"close()\">\n  <p class=\"muted\" *ngIf=\"!loading\" [innerHTML]=\"fmtHtml(text.guardsHint, { badge: access?.group_type_name ?? '' })\"></p>\n\n  <div *ngIf=\"loading\" class=\"loading-row\">\n    <span>{{ text.loading }}</span>\n  </div>\n\n  <ul class=\"route-tree\" *ngIf=\"!loading\">\n    <spine-route-tree-node *ngFor=\"let node of tree\" [node]=\"node\"></spine-route-tree-node>\n  </ul>\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree.length === 0\">\n    <hm-icon shape=\"filter-grid\" size=\"xl\"></hm-icon>\n    <p>{{ text.noPrivateRoutes }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"close()\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!hasChanges\" [loading]=\"saving\" (clicked)=\"confirm()\">{{ text.confirmChanges }}</hm-button>\n  </ng-container>\n</hm-drawer>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.loading-row{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.route-tree{list-style:none;margin:0;padding:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-xl);color:var(--hm-muted);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: DrawerComponent, selector: "hm-drawer", inputs: ["open", "heading", "size", "position", "pinned", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: RouteTreeNodeComponent, selector: "spine-route-tree-node", inputs: ["node"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceAccessGuardsComponent, isStandalone: true, selector: "spine-auto-service-access-guards", inputs: { clientId: "clientId", access: "access", open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<hm-drawer [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"fmt(text.routesOf, { group: access?.group_name ?? '' })\" (closed)=\"close()\">\n  <div *ngIf=\"loading\" class=\"loading-row\">\n    <span>{{ text.loading }}</span>\n  </div>\n\n  <!-- Topo sem mensagens: s\u00F3 o filtro, com o mesmo visual da busca das grades. -->\n  <hm-data-grid-action-bar *ngIf=\"!loading && tree().length\"\n    [search]=\"filter()\" (searchChange)=\"onFilterChange($event)\"\n    [placeholder]=\"text.filterRoutes\" [label]=\"text.filterRoutes\" />\n\n  <hm-tree\n    *ngIf=\"!loading && treeNodes().length\"\n    [nodes]=\"treeNodes()\"\n    [label]=\"text.routesTreeLabel\"\n    [selected]=\"selectedIds()\"\n    [(expanded)]=\"expandedIds\"\n    (changed)=\"onTreeChanged($event)\"\n  />\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree().length > 0 && treeNodes().length === 0\">\n    <hm-icon shape=\"search\" size=\"xl\"></hm-icon>\n    <p>{{ fmt(text.noFilterMatch, { term: filter() }) }}</p>\n  </div>\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree().length === 0\">\n    <hm-icon shape=\"filter-grid\" size=\"xl\"></hm-icon>\n    <p>{{ text.noPrivateRoutes }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"close()\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!hasChanges\" [loading]=\"saving\" (clicked)=\"confirm()\">{{ text.confirmChanges }}</hm-button>\n  </ng-container>\n</hm-drawer>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.loading-row{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-xl);color:var(--hm-muted);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DataGridActionBarComponent, selector: "hm-data-grid-action-bar", inputs: ["search", "placeholder", "label"], outputs: ["searchChange"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: DrawerComponent, selector: "hm-drawer", inputs: ["open", "heading", "size", "position", "pinned", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: TreeComponent, selector: "hm-tree", inputs: ["nodes", "label", "emptyMessage", "selectable", "selectionMode", "selection", "selected", "expanded", "activeId", "loadChildren", "draggable", "canDrop", "nodeActions"], outputs: ["selectionChange", "expandedChange", "activeIdChange", "changed", "activated", "moved", "nodeAction"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceAccessGuardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-auto-service-access-guards', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, DrawerComponent, RouteTreeNodeComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-drawer [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"fmt(text.routesOf, { group: access?.group_name ?? '' })\" (closed)=\"close()\">\n  <p class=\"muted\" *ngIf=\"!loading\" [innerHTML]=\"fmtHtml(text.guardsHint, { badge: access?.group_type_name ?? '' })\"></p>\n\n  <div *ngIf=\"loading\" class=\"loading-row\">\n    <span>{{ text.loading }}</span>\n  </div>\n\n  <ul class=\"route-tree\" *ngIf=\"!loading\">\n    <spine-route-tree-node *ngFor=\"let node of tree\" [node]=\"node\"></spine-route-tree-node>\n  </ul>\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree.length === 0\">\n    <hm-icon shape=\"filter-grid\" size=\"xl\"></hm-icon>\n    <p>{{ text.noPrivateRoutes }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"close()\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!hasChanges\" [loading]=\"saving\" (clicked)=\"confirm()\">{{ text.confirmChanges }}</hm-button>\n  </ng-container>\n</hm-drawer>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.loading-row{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.route-tree{list-style:none;margin:0;padding:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-xl);color:var(--hm-muted);text-align:center}\n"] }]
+            args: [{ selector: 'spine-auto-service-access-guards', standalone: true, imports: [CommonModule, ButtonComponent, DataGridActionBarComponent, IconComponent, DrawerComponent, TreeComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-drawer [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"fmt(text.routesOf, { group: access?.group_name ?? '' })\" (closed)=\"close()\">\n  <div *ngIf=\"loading\" class=\"loading-row\">\n    <span>{{ text.loading }}</span>\n  </div>\n\n  <!-- Topo sem mensagens: s\u00F3 o filtro, com o mesmo visual da busca das grades. -->\n  <hm-data-grid-action-bar *ngIf=\"!loading && tree().length\"\n    [search]=\"filter()\" (searchChange)=\"onFilterChange($event)\"\n    [placeholder]=\"text.filterRoutes\" [label]=\"text.filterRoutes\" />\n\n  <hm-tree\n    *ngIf=\"!loading && treeNodes().length\"\n    [nodes]=\"treeNodes()\"\n    [label]=\"text.routesTreeLabel\"\n    [selected]=\"selectedIds()\"\n    [(expanded)]=\"expandedIds\"\n    (changed)=\"onTreeChanged($event)\"\n  />\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree().length > 0 && treeNodes().length === 0\">\n    <hm-icon shape=\"search\" size=\"xl\"></hm-icon>\n    <p>{{ fmt(text.noFilterMatch, { term: filter() }) }}</p>\n  </div>\n\n  <div class=\"empty-state\" *ngIf=\"!loading && tree().length === 0\">\n    <hm-icon shape=\"filter-grid\" size=\"xl\"></hm-icon>\n    <p>{{ text.noPrivateRoutes }}</p>\n  </div>\n\n  <ng-container footer>\n    <hm-button emphasis=\"medium\" (clicked)=\"close()\">{{ text.cancel }}</hm-button>\n    <hm-button [disabled]=\"!hasChanges\" [loading]=\"saving\" (clicked)=\"confirm()\">{{ text.confirmChanges }}</hm-button>\n  </ng-container>\n</hm-drawer>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.loading-row{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xs);padding:var(--hm-space-xl);color:var(--hm-muted);text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: AutoServiceService }], propDecorators: { clientId: [{
                 type: Input
             }], access: [{
@@ -784,6 +790,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
             }], openChange: [{
                 type: Output
             }] } });
+function toTreeNode(node) {
+    return {
+        id: node.key, label: node.name, leaf: !node.isFolder,
+        children: node.isFolder ? node.children.map(toTreeNode) : undefined,
+    };
+}
+function collectLeaves(node) {
+    return node.isFolder ? node.children.flatMap(collectLeaves) : [node];
+}
+function indexByKey(root) {
+    const map = new Map();
+    const walk = (nodes) => { for (const n of nodes) {
+        map.set(n.key, n);
+        walk(n.children);
+    } };
+    walk(root);
+    return map;
+}
+function folderKeys(root) {
+    return [...indexByKey(root).values()].filter(n => n.isFolder).map(n => n.key);
+}
+/** Minúsculo e sem acento: "operacao" casa com "Operação". */
+function normalize(value) {
+    return (value ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+/** A árvore só com as telas cujo nome casa com o termo; a pasta que casa pelo nome vem inteira. Termo vazio = tudo. */
+function filterRouteTree(nodes, term) {
+    const needle = normalize(term.trim());
+    if (!needle)
+        return nodes;
+    const walk = (list) => list.flatMap((n) => {
+        if (n.isFolder) {
+            if (normalize(n.name).includes(needle))
+                return [n];
+            const children = walk(n.children);
+            return children.length ? [{ ...n, children }] : [];
+        }
+        return normalize(n.name).includes(needle) ? [n] : [];
+    });
+    return walk(nodes);
+}
 
 class AutoServiceAccessComponent {
     constructor(service) {
@@ -802,12 +849,13 @@ class AutoServiceAccessComponent {
         this.rowId = (a) => a.access_id;
         this.columns = computed(() => [
             { key: 'group_name', title: this.text.colGroup, value: (a) => a.group_name, sortable: true },
-            { key: 'group_type_name', title: this.text.colBadge, value: (a) => a.group_type_name, sortable: true },
+            { key: 'group_type_name', title: this.text.colType, value: (a) => a.group_type_name, sortable: true },
+            // Como no painel do Argos: "Gerenciar rotas" é um botão na linha, não um item do menu.
+            { key: 'guards', title: this.text.colGuards, value: () => '' },
         ], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.rowActions = computed(() => [
-            { id: 'guards', icon: 'shield', label: this.text.manageRoutes },
             {
-                id: 'delete', icon: 'trash', label: this.text.remove, danger: true, separatorAbove: true,
+                id: 'delete', icon: 'trash', label: this.text.remove, danger: true,
                 confirm: (a) => ({ heading: this.text.confirmRemoveAccessHeading, message: formatMessage(this.text.confirmRemoveAccess, { group: a.group_name }) }),
             },
         ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
@@ -851,17 +899,18 @@ class AutoServiceAccessComponent {
     }
     openGuards(access) { this.activeAccess = access; this.showGuards = true; }
     onAction(e) {
-        if (e.action === 'guards')
-            this.openGuards(e.row);
         if (e.action === 'delete')
             void this.deleteAccess(e.row.access_id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceAccessComponent, deps: [{ token: AutoServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceAccessComponent, isStandalone: true, selector: "spine-auto-service-access", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"entries\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.accessCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noAccess\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newAccess }}</hm-button>\n</hm-data-grid>\n\n<spine-auto-service-access-create\n  [clientId]=\"clientId\"\n  [availableGroups]=\"availableGroups\"\n  [open]=\"showCreate\"\n  (openChange)=\"showCreate = $event\"\n  (created)=\"onCreated()\">\n</spine-auto-service-access-create>\n\n<spine-auto-service-access-guards\n  *ngIf=\"activeAccess\"\n  [clientId]=\"clientId\"\n  [access]=\"activeAccess\"\n  [open]=\"showGuards\"\n  (openChange)=\"showGuards = $event\">\n</spine-auto-service-access-guards>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "component", type: AutoServiceAccessCreateComponent, selector: "spine-auto-service-access-create", inputs: ["clientId", "availableGroups", "open"], outputs: ["openChange", "created"] }, { kind: "component", type: AutoServiceAccessGuardsComponent, selector: "spine-auto-service-access-guards", inputs: ["clientId", "access", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceAccessComponent, isStandalone: true, selector: "spine-auto-service-access", inputs: { clientId: "clientId" }, usesOnChanges: true, ngImport: i0, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"entries\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.accessCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noAccess\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newAccess }}</hm-button>\n  <ng-template hmCell=\"group_type_name\" let-a>\n    <hm-tag [name]=\"a.group_type_name\" color=\"neutral\" />\n  </ng-template>\n  <ng-template hmCell=\"guards\" let-a>\n    <hm-button emphasis=\"minimal\" icon=\"shield\" (clicked)=\"openGuards(a)\">{{ text.manageRoutes }}</hm-button>\n  </ng-template>\n</hm-data-grid>\n\n<spine-auto-service-access-create\n  [clientId]=\"clientId\"\n  [availableGroups]=\"availableGroups\"\n  [open]=\"showCreate\"\n  (openChange)=\"showCreate = $event\"\n  (created)=\"onCreated()\">\n</spine-auto-service-access-create>\n\n<spine-auto-service-access-guards\n  *ngIf=\"activeAccess\"\n  [clientId]=\"clientId\"\n  [access]=\"activeAccess\"\n  [open]=\"showGuards\"\n  (openChange)=\"showGuards = $event\">\n</spine-auto-service-access-guards>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "busy", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: AutoServiceAccessCreateComponent, selector: "spine-auto-service-access-create", inputs: ["clientId", "availableGroups", "open"], outputs: ["openChange", "created"] }, { kind: "component", type: AutoServiceAccessGuardsComponent, selector: "spine-auto-service-access-guards", inputs: ["clientId", "access", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceAccessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-auto-service-access', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, DataGridComponent, AutoServiceAccessCreateComponent, AutoServiceAccessGuardsComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"entries\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.accessCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noAccess\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newAccess }}</hm-button>\n</hm-data-grid>\n\n<spine-auto-service-access-create\n  [clientId]=\"clientId\"\n  [availableGroups]=\"availableGroups\"\n  [open]=\"showCreate\"\n  (openChange)=\"showCreate = $event\"\n  (created)=\"onCreated()\">\n</spine-auto-service-access-create>\n\n<spine-auto-service-access-guards\n  *ngIf=\"activeAccess\"\n  [clientId]=\"clientId\"\n  [access]=\"activeAccess\"\n  [open]=\"showGuards\"\n  (openChange)=\"showGuards = $event\">\n</spine-auto-service-access-guards>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}\n"] }]
+            args: [{ selector: 'spine-auto-service-access', standalone: true, imports: [
+                        CommonModule, ButtonComponent, IconComponent, DataGridComponent, DataGridCellDirective, TagComponent,
+                        AutoServiceAccessCreateComponent, AutoServiceAccessGuardsComponent,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"entries\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.accessCaption\"\n  [loading]=\"loading\"\n  [rowActions]=\"rowActions()\"\n  (actionTriggered)=\"onAction($event)\"\n  [emptyMessage]=\"text.noAccess\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newAccess }}</hm-button>\n  <ng-template hmCell=\"group_type_name\" let-a>\n    <hm-tag [name]=\"a.group_type_name\" color=\"neutral\" />\n  </ng-template>\n  <ng-template hmCell=\"guards\" let-a>\n    <hm-button emphasis=\"minimal\" icon=\"shield\" (clicked)=\"openGuards(a)\">{{ text.manageRoutes }}</hm-button>\n  </ng-template>\n</hm-data-grid>\n\n<spine-auto-service-access-create\n  [clientId]=\"clientId\"\n  [availableGroups]=\"availableGroups\"\n  [open]=\"showCreate\"\n  (openChange)=\"showCreate = $event\"\n  (created)=\"onCreated()\">\n</spine-auto-service-access-create>\n\n<spine-auto-service-access-guards\n  *ngIf=\"activeAccess\"\n  [clientId]=\"clientId\"\n  [access]=\"activeAccess\"\n  [open]=\"showGuards\"\n  (openChange)=\"showGuards = $event\">\n</spine-auto-service-access-guards>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: AutoServiceService }], propDecorators: { clientId: [{
                 type: Input
             }] } });
@@ -886,4 +935,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         }] });
 
 export { AutoServiceClientComponent };
-//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-client.component-wu2tFGS7.mjs.map
+//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-client.component-DzmlpLPu.mjs.map