@trismegisto/spine 2.1.1 → 3.0.0

package/fesm2022/{trismegisto-spine-auto-service-auto-service-client.component-C7SPavrX.mjs → trismegisto-spine-auto-service-auto-service-client.component-DAxhZC-a.mjs}

@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, computed, Input, ChangeDetectionStrategy, Component, ElementRef, Injector, EventEmitter, afterNextRender, Output } 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, DividerComponent, DrawerComponent, TabsComponent, TabComponent, TabContentDirective } from '@trismegisto/angular';
-import { A as AutoServiceClientPickerComponent } from './trismegisto-spine-auto-service-auto-service-client-picker.component-Z0wCANF6.mjs';
+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-CBt_0Uli.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 { A as AutoServiceDeleteFeedback } from './trismegisto-spine-auto-service-auto-service-delete-6Bk46MOf.mjs';
+import { A as AutoServiceDeleteFeedback, a as autoServiceErrorText } from './trismegisto-spine-auto-service-auto-service-delete-CoJYTtBU.mjs';
 import { SPINE_MESSAGES } from '@trismegisto/spine';
 import { AutoServiceService } from './trismegisto-spine-auto-service.mjs';
 
@@ -157,14 +157,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: "14.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    <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\" (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>:first-child{flex:1 1 20rem;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)}: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: "14.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    <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\" (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>:first-child{flex:1 1 20rem;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-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 }); }
 }
 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    <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\" (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>:first-child{flex:1 1 20rem;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)}: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"] }]
+                    ], 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    <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\" (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>:first-child{flex:1 1 20rem;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-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
             }] } });
@@ -313,11 +313,11 @@ class AutoServiceRoutersReorderComponent {
         afterNextRender(() => this.host.nativeElement.querySelector('.hm-reorder-list__handle')?.focus(), { injector: this.injector });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutersReorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceRoutersReorderComponent, isStandalone: true, selector: "spine-auto-service-routers-reorder", inputs: { clientId: "clientId", open: "open" }, outputs: { openChange: "openChange", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.reorderTitle\" size=\"large\" (closed)=\"close()\">\n  <div class=\"reorder\">\n    <p class=\"muted reorder__hint\">{{ text.reorderHint }}</p>\n\n    <hm-alert *ngIf=\"error\" variant=\"error\">{{ error }}</hm-alert>\n\n    <div *ngIf=\"loading\" class=\"reorder__loading\">{{ text.loading }}</div>\n\n    <ng-container *ngIf=\"!loading && tree.length\">\n      <!-- Trilha dos n\u00EDveis abertos: cada degrau anterior volta para aquele n\u00EDvel. -->\n      <nav class=\"reorder__path\" [attr.aria-label]=\"text.reorderPath\">\n        <ol>\n          <li>\n            <hm-button *ngIf=\"path.length; else rootCurrent\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(-1)\">{{ text.reorderRoot }}</hm-button>\n            <ng-template #rootCurrent><span aria-current=\"location\">{{ text.reorderRoot }}</span></ng-template>\n          </li>\n          <li *ngFor=\"let node of path; let i = index; let last = last\">\n            <hm-icon shape=\"angle\" direction=\"right\" class=\"reorder__sep\" />\n            <hm-button *ngIf=\"!last\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(i)\">{{ nodeName(node) }}</hm-button>\n            <span *ngIf=\"last\" aria-current=\"location\">{{ nodeName(node) }}</span>\n          </li>\n        </ol>\n      </nav>\n\n      <hm-reorder-list [label]=\"listLabel\" [labelHidden]=\"true\" [items]=\"items\" (itemsChange)=\"onItemsChange($event)\" [disabled]=\"saving\">\n        <ng-template let-item let-index=\"index\">\n          <div class=\"reorder__row\">\n            <hm-icon *ngIf=\"item.node.route_icon\" [shape]=\"item.node.route_icon\" class=\"reorder__icon\" />\n            <span class=\"reorder__name\">\n              <span class=\"reorder__label\">{{ item.label }}</span>\n              <span *ngIf=\"item.node.children.length\" class=\"reorder__count\">{{ childCount(item.node) }}</span>\n            </span>\n            <hm-tag [name]=\"typeLabel(item.node.route_type)\" color=\"neutral\" />\n            <span class=\"reorder__actions\">\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"up\" [label]=\"label('moveUp', item)\"\n                [attr.data-move]=\"'up'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === 0\" (clicked)=\"move(index, -1)\" />\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"down\" [label]=\"label('moveDown', item)\"\n                [attr.data-move]=\"'down'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === items.length - 1\" (clicked)=\"move(index, 1)\" />\n              <hm-icon-button\n                *ngIf=\"item.node.children.length\"\n                emphasis=\"subtle\" size=\"small\" icon=\"angle\" iconDirection=\"right\" [label]=\"label('openLevel', item)\"\n                (clicked)=\"enter(item)\" />\n            </span>\n          </div>\n        </ng-template>\n      </hm-reorder-list>\n    </ng-container>\n\n    <div *ngIf=\"!loading && !error && !tree.length\" class=\"reorder__empty\">\n      <hm-icon shape=\"sort-vertical\" size=\"xl\" />\n      <p>{{ text.reorderEmpty }}</p>\n    </div>\n\n    <div class=\"hm-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement }}</div>\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)=\"save()\">{{ text.reorderSave }}</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>:first-child{flex:1 1 20rem;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)}.reorder{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.reorder__hint{margin:0}.reorder__loading{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.reorder__path ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none;font-size:var(--hm-font-size-sm)}.reorder__path li{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}.reorder__path [aria-current]{font-weight:var(--hm-font-weight-semibold);color:var(--hm-text)}.reorder__sep{color:var(--hm-muted)}.reorder__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.reorder__icon{flex:0 0 auto;color:var(--hm-action)}.reorder__name{display:flex;flex:1 1 10rem;flex-direction:column;min-inline-size:0}.reorder__label{overflow-wrap:anywhere}.reorder__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.reorder__actions{display:inline-flex;gap:var(--hm-space-micro);margin-inline-start:auto}.reorder__empty{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: 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: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: ReorderListComponent, selector: "hm-reorder-list", inputs: ["items", "label", "labelHidden", "hint", "size", "removable"], outputs: ["itemsChange", "moved", "removed"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceRoutersReorderComponent, isStandalone: true, selector: "spine-auto-service-routers-reorder", inputs: { clientId: "clientId", open: "open" }, outputs: { openChange: "openChange", saved: "saved" }, usesOnChanges: true, ngImport: i0, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.reorderTitle\" size=\"large\" (closed)=\"close()\">\n  <div class=\"reorder\">\n    <p class=\"muted reorder__hint\">{{ text.reorderHint }}</p>\n\n    <hm-alert *ngIf=\"error\" variant=\"error\">{{ error }}</hm-alert>\n\n    <div *ngIf=\"loading\" class=\"reorder__loading\">{{ text.loading }}</div>\n\n    <ng-container *ngIf=\"!loading && tree.length\">\n      <!-- Trilha dos n\u00EDveis abertos: cada degrau anterior volta para aquele n\u00EDvel. -->\n      <nav class=\"reorder__path\" [attr.aria-label]=\"text.reorderPath\">\n        <ol>\n          <li>\n            <hm-button *ngIf=\"path.length; else rootCurrent\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(-1)\">{{ text.reorderRoot }}</hm-button>\n            <ng-template #rootCurrent><span aria-current=\"location\">{{ text.reorderRoot }}</span></ng-template>\n          </li>\n          <li *ngFor=\"let node of path; let i = index; let last = last\">\n            <hm-icon shape=\"angle\" direction=\"right\" class=\"reorder__sep\" />\n            <hm-button *ngIf=\"!last\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(i)\">{{ nodeName(node) }}</hm-button>\n            <span *ngIf=\"last\" aria-current=\"location\">{{ nodeName(node) }}</span>\n          </li>\n        </ol>\n      </nav>\n\n      <hm-reorder-list [label]=\"listLabel\" [labelHidden]=\"true\" [items]=\"items\" (itemsChange)=\"onItemsChange($event)\" [disabled]=\"saving\">\n        <ng-template let-item let-index=\"index\">\n          <div class=\"reorder__row\">\n            <hm-icon *ngIf=\"item.node.route_icon\" [shape]=\"item.node.route_icon\" class=\"reorder__icon\" />\n            <span class=\"reorder__name\">\n              <span class=\"reorder__label\">{{ item.label }}</span>\n              <span *ngIf=\"item.node.children.length\" class=\"reorder__count\">{{ childCount(item.node) }}</span>\n            </span>\n            <hm-tag [name]=\"typeLabel(item.node.route_type)\" color=\"neutral\" />\n            <span class=\"reorder__actions\">\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"up\" [label]=\"label('moveUp', item)\"\n                [attr.data-move]=\"'up'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === 0\" (clicked)=\"move(index, -1)\" />\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"down\" [label]=\"label('moveDown', item)\"\n                [attr.data-move]=\"'down'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === items.length - 1\" (clicked)=\"move(index, 1)\" />\n              <hm-icon-button\n                *ngIf=\"item.node.children.length\"\n                emphasis=\"subtle\" size=\"small\" icon=\"angle\" iconDirection=\"right\" [label]=\"label('openLevel', item)\"\n                (clicked)=\"enter(item)\" />\n            </span>\n          </div>\n        </ng-template>\n      </hm-reorder-list>\n    </ng-container>\n\n    <div *ngIf=\"!loading && !error && !tree.length\" class=\"reorder__empty\">\n      <hm-icon shape=\"sort-vertical\" size=\"xl\" />\n      <p>{{ text.reorderEmpty }}</p>\n    </div>\n\n    <div class=\"hm-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement }}</div>\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)=\"save()\">{{ text.reorderSave }}</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>:first-child{flex:1 1 20rem;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-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}.reorder{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.reorder__hint{margin:0}.reorder__loading{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.reorder__path ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none;font-size:var(--hm-font-size-sm)}.reorder__path li{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}.reorder__path [aria-current]{font-weight:var(--hm-font-weight-semibold);color:var(--hm-text)}.reorder__sep{color:var(--hm-muted)}.reorder__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.reorder__icon{flex:0 0 auto;color:var(--hm-action)}.reorder__name{display:flex;flex:1 1 10rem;flex-direction:column;min-inline-size:0}.reorder__label{overflow-wrap:anywhere}.reorder__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.reorder__actions{display:inline-flex;gap:var(--hm-space-micro);margin-inline-start:auto}.reorder__empty{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: 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: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: ReorderListComponent, selector: "hm-reorder-list", inputs: ["items", "label", "labelHidden", "hint", "size", "removable", "emptyText"], outputs: ["itemsChange", "moved", "removed"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceRoutersReorderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spine-auto-service-routers-reorder', standalone: true, imports: [CommonModule, AlertComponent, ButtonComponent, IconButtonComponent, IconComponent, ModalComponent, ReorderListComponent, TagComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.reorderTitle\" size=\"large\" (closed)=\"close()\">\n  <div class=\"reorder\">\n    <p class=\"muted reorder__hint\">{{ text.reorderHint }}</p>\n\n    <hm-alert *ngIf=\"error\" variant=\"error\">{{ error }}</hm-alert>\n\n    <div *ngIf=\"loading\" class=\"reorder__loading\">{{ text.loading }}</div>\n\n    <ng-container *ngIf=\"!loading && tree.length\">\n      <!-- Trilha dos n\u00EDveis abertos: cada degrau anterior volta para aquele n\u00EDvel. -->\n      <nav class=\"reorder__path\" [attr.aria-label]=\"text.reorderPath\">\n        <ol>\n          <li>\n            <hm-button *ngIf=\"path.length; else rootCurrent\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(-1)\">{{ text.reorderRoot }}</hm-button>\n            <ng-template #rootCurrent><span aria-current=\"location\">{{ text.reorderRoot }}</span></ng-template>\n          </li>\n          <li *ngFor=\"let node of path; let i = index; let last = last\">\n            <hm-icon shape=\"angle\" direction=\"right\" class=\"reorder__sep\" />\n            <hm-button *ngIf=\"!last\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(i)\">{{ nodeName(node) }}</hm-button>\n            <span *ngIf=\"last\" aria-current=\"location\">{{ nodeName(node) }}</span>\n          </li>\n        </ol>\n      </nav>\n\n      <hm-reorder-list [label]=\"listLabel\" [labelHidden]=\"true\" [items]=\"items\" (itemsChange)=\"onItemsChange($event)\" [disabled]=\"saving\">\n        <ng-template let-item let-index=\"index\">\n          <div class=\"reorder__row\">\n            <hm-icon *ngIf=\"item.node.route_icon\" [shape]=\"item.node.route_icon\" class=\"reorder__icon\" />\n            <span class=\"reorder__name\">\n              <span class=\"reorder__label\">{{ item.label }}</span>\n              <span *ngIf=\"item.node.children.length\" class=\"reorder__count\">{{ childCount(item.node) }}</span>\n            </span>\n            <hm-tag [name]=\"typeLabel(item.node.route_type)\" color=\"neutral\" />\n            <span class=\"reorder__actions\">\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"up\" [label]=\"label('moveUp', item)\"\n                [attr.data-move]=\"'up'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === 0\" (clicked)=\"move(index, -1)\" />\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"down\" [label]=\"label('moveDown', item)\"\n                [attr.data-move]=\"'down'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === items.length - 1\" (clicked)=\"move(index, 1)\" />\n              <hm-icon-button\n                *ngIf=\"item.node.children.length\"\n                emphasis=\"subtle\" size=\"small\" icon=\"angle\" iconDirection=\"right\" [label]=\"label('openLevel', item)\"\n                (clicked)=\"enter(item)\" />\n            </span>\n          </div>\n        </ng-template>\n      </hm-reorder-list>\n    </ng-container>\n\n    <div *ngIf=\"!loading && !error && !tree.length\" class=\"reorder__empty\">\n      <hm-icon shape=\"sort-vertical\" size=\"xl\" />\n      <p>{{ text.reorderEmpty }}</p>\n    </div>\n\n    <div class=\"hm-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement }}</div>\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)=\"save()\">{{ text.reorderSave }}</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>:first-child{flex:1 1 20rem;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)}.reorder{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.reorder__hint{margin:0}.reorder__loading{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.reorder__path ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none;font-size:var(--hm-font-size-sm)}.reorder__path li{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}.reorder__path [aria-current]{font-weight:var(--hm-font-weight-semibold);color:var(--hm-text)}.reorder__sep{color:var(--hm-muted)}.reorder__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.reorder__icon{flex:0 0 auto;color:var(--hm-action)}.reorder__name{display:flex;flex:1 1 10rem;flex-direction:column;min-inline-size:0}.reorder__label{overflow-wrap:anywhere}.reorder__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.reorder__actions{display:inline-flex;gap:var(--hm-space-micro);margin-inline-start:auto}.reorder__empty{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-routers-reorder', standalone: true, imports: [CommonModule, AlertComponent, ButtonComponent, IconButtonComponent, IconComponent, ModalComponent, ReorderListComponent, TagComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<hm-modal [open]=\"open\" (openChange)=\"open = $event\" [heading]=\"text.reorderTitle\" size=\"large\" (closed)=\"close()\">\n  <div class=\"reorder\">\n    <p class=\"muted reorder__hint\">{{ text.reorderHint }}</p>\n\n    <hm-alert *ngIf=\"error\" variant=\"error\">{{ error }}</hm-alert>\n\n    <div *ngIf=\"loading\" class=\"reorder__loading\">{{ text.loading }}</div>\n\n    <ng-container *ngIf=\"!loading && tree.length\">\n      <!-- Trilha dos n\u00EDveis abertos: cada degrau anterior volta para aquele n\u00EDvel. -->\n      <nav class=\"reorder__path\" [attr.aria-label]=\"text.reorderPath\">\n        <ol>\n          <li>\n            <hm-button *ngIf=\"path.length; else rootCurrent\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(-1)\">{{ text.reorderRoot }}</hm-button>\n            <ng-template #rootCurrent><span aria-current=\"location\">{{ text.reorderRoot }}</span></ng-template>\n          </li>\n          <li *ngFor=\"let node of path; let i = index; let last = last\">\n            <hm-icon shape=\"angle\" direction=\"right\" class=\"reorder__sep\" />\n            <hm-button *ngIf=\"!last\" emphasis=\"minimal\" size=\"small\" (clicked)=\"goTo(i)\">{{ nodeName(node) }}</hm-button>\n            <span *ngIf=\"last\" aria-current=\"location\">{{ nodeName(node) }}</span>\n          </li>\n        </ol>\n      </nav>\n\n      <hm-reorder-list [label]=\"listLabel\" [labelHidden]=\"true\" [items]=\"items\" (itemsChange)=\"onItemsChange($event)\" [disabled]=\"saving\">\n        <ng-template let-item let-index=\"index\">\n          <div class=\"reorder__row\">\n            <hm-icon *ngIf=\"item.node.route_icon\" [shape]=\"item.node.route_icon\" class=\"reorder__icon\" />\n            <span class=\"reorder__name\">\n              <span class=\"reorder__label\">{{ item.label }}</span>\n              <span *ngIf=\"item.node.children.length\" class=\"reorder__count\">{{ childCount(item.node) }}</span>\n            </span>\n            <hm-tag [name]=\"typeLabel(item.node.route_type)\" color=\"neutral\" />\n            <span class=\"reorder__actions\">\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"up\" [label]=\"label('moveUp', item)\"\n                [attr.data-move]=\"'up'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === 0\" (clicked)=\"move(index, -1)\" />\n              <hm-icon-button\n                emphasis=\"subtle\" size=\"small\" icon=\"arrow\" iconDirection=\"down\" [label]=\"label('moveDown', item)\"\n                [attr.data-move]=\"'down'\" [attr.data-item]=\"item.id\"\n                [disabled]=\"saving || index === items.length - 1\" (clicked)=\"move(index, 1)\" />\n              <hm-icon-button\n                *ngIf=\"item.node.children.length\"\n                emphasis=\"subtle\" size=\"small\" icon=\"angle\" iconDirection=\"right\" [label]=\"label('openLevel', item)\"\n                (clicked)=\"enter(item)\" />\n            </span>\n          </div>\n        </ng-template>\n      </hm-reorder-list>\n    </ng-container>\n\n    <div *ngIf=\"!loading && !error && !tree.length\" class=\"reorder__empty\">\n      <hm-icon shape=\"sort-vertical\" size=\"xl\" />\n      <p>{{ text.reorderEmpty }}</p>\n    </div>\n\n    <div class=\"hm-visually-hidden\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement }}</div>\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)=\"save()\">{{ text.reorderSave }}</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>:first-child{flex:1 1 20rem;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-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}.reorder{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.reorder__hint{margin:0}.reorder__loading{display:flex;justify-content:center;padding:var(--hm-space-xl);color:var(--hm-muted)}.reorder__path ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none;font-size:var(--hm-font-size-sm)}.reorder__path li{display:inline-flex;align-items:center;gap:var(--hm-space-micro)}.reorder__path [aria-current]{font-weight:var(--hm-font-weight-semibold);color:var(--hm-text)}.reorder__sep{color:var(--hm-muted)}.reorder__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.reorder__icon{flex:0 0 auto;color:var(--hm-action)}.reorder__name{display:flex;flex:1 1 10rem;flex-direction:column;min-inline-size:0}.reorder__label{overflow-wrap:anywhere}.reorder__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.reorder__actions{display:inline-flex;gap:var(--hm-space-micro);margin-inline-start:auto}.reorder__empty{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"] }]
         }], propDecorators: { clientId: [{
                 type: Input
             }], open: [{
@@ -328,6 +328,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Output
             }] } });
 
+/** Níveis do roteador acima da página, de cima para baixo. */
+const HIERARCHY_LEVELS = ['header_id', 'navigation_id', 'menu_id', 'item_id', 'submenu_id'];
+/**
+ * A hierarquia é de cima para baixo: um nível preenchido com algum vazio acima dele é um "buraco" (o argos-admin recusa
+ * com 400 `router_hierarchy_gap`). A página é a folha e não entra na conta.
+ */
+function hasHierarchyGap(levels) {
+    let emptyAbove = false;
+    for (const level of HIERARCHY_LEVELS) {
+        if (!levels[level])
+            emptyAbove = true;
+        else if (emptyAbove)
+            return true;
+    }
+    return false;
+}
+const emptyRouterForm = () => ({
+    page_id: '', header_id: '', navigation_id: '', menu_id: '', item_id: '', submenu_id: '', is_private: true, description: '',
+    allowed_type_ids: [],
+});
 class AutoServiceRoutersComponent {
     constructor(service) {
         this.service = service;
@@ -343,13 +363,23 @@ class AutoServiceRoutersComponent {
         /** Modal "Reordenar menu" (ordem dos itens no menu do app, por nível). */
         this.showReorder = false;
         this.editingRouterId = '';
-        this.routerForm = { page_id: '', header_id: '', navigation_id: '', menu_id: '', item_id: '', submenu_id: '', is_private: true, description: '' };
+        this.routerForm = emptyRouterForm();
+        /**
+         * Tipos de grupo do realm (`GET /group-types`). Todos entram, inclusive o Administrador (`assignable: false` só
+         * impede criar grupo com o tipo; aqui é quem pode ver a tela), como no modal de roteador do argos-admin.
+         */
+        this.groupTypes = [];
+        this.groupTypeOptions = [];
+        this.savingRouter = false;
+        /** Falha ao gravar o roteador, mostrada no modal. */
+        this.routerError = null;
         this.rowId = (r) => r.id;
         this.columns = computed(() => [
             { key: 'page', title: this.text.colPage, value: (r) => this.routeName(r.page_id), sortable: true },
             { key: 'built_path', title: this.text.colBuiltPath, value: (r) => r.built_path },
             { 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 },
         ], ...(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(() => [
@@ -360,6 +390,8 @@ class AutoServiceRoutersComponent {
             },
         ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
         this.pathLevels = ['header_id', 'navigation_id', 'menu_id', 'item_id', 'submenu_id', 'page_id'];
+        /** Níveis da hierarquia, de cima para baixo (a página é a folha e fica fora: sempre obrigatória). */
+        this.hierarchyLevels = HIERARCHY_LEVELS;
     }
     get routeOptions() {
         return this.routes.map((r) => ({ value: r.id, label: r.display_name || r.name }));
@@ -370,12 +402,19 @@ class AutoServiceRoutersComponent {
         if (!this.clientId) {
             this.routes = [];
             this.routers = [];
+            this.setGroupTypes([]);
             return;
         }
         this.loading = true;
         try {
-            const [routesRes, routersRes] = await Promise.all([this.service.getWebRoutes(this.clientId), this.service.getRouters(this.clientId)]);
+            const [routesRes, routersRes, typesRes] = await Promise.all([
+                this.service.getWebRoutes(this.clientId),
+                this.service.getRouters(this.clientId),
+                // Sem os tipos a tabela abre igual; os crachás aparecem pelo id e o campo fica sem opção.
+                this.service.getGroupTypes(this.clientId).catch(() => ({ group_types: [] })),
+            ]);
             this.routes = routesRes.routes;
+            this.setGroupTypes(typesRes.group_types ?? []);
             this.routers = routersRes.routers.map((r) => ({ ...r, built_path: this.builtPath(r) }));
         }
         finally {
@@ -383,6 +422,14 @@ class AutoServiceRoutersComponent {
             this.cdr.markForCheck();
         }
     }
+    setGroupTypes(types) {
+        this.groupTypes = types;
+        this.groupTypeOptions = types.map((t) => ({ value: t.id, label: t.name }));
+    }
+    /** Nomes dos crachás permitidos (id sem tipo conhecido aparece como o próprio id). */
+    allowedTypeNames(typeIds) {
+        return (typeIds ?? []).map((id) => this.groupTypes.find((t) => t.id === id)?.name ?? id);
+    }
     routeName(id) { if (!id)
         return '—'; return this.routes.find(r => r.id === id)?.name ?? id; }
     builtPath(r) {
@@ -394,19 +441,53 @@ class AutoServiceRoutersComponent {
     }
     openCreateRouter() {
         this.editingRouterId = '';
-        this.routerForm = { page_id: '', header_id: '', navigation_id: '', menu_id: '', item_id: '', submenu_id: '', is_private: true, description: '' };
+        this.routerError = null;
+        this.routerForm = emptyRouterForm();
         this.showRouterModal = true;
     }
     openEditRouter(r) {
         this.editingRouterId = r.id;
+        this.routerError = null;
         this.routerForm = {
             page_id: r.page_id, header_id: r.header_id ?? '', navigation_id: r.navigation_id ?? '',
             menu_id: r.menu_id ?? '', item_id: r.item_id ?? '', submenu_id: r.submenu_id ?? '', is_private: r.is_private ?? true,
-            description: r.description ?? '',
+            description: r.description ?? '', allowed_type_ids: [...(r.allowed_type_ids ?? [])],
         };
         this.showRouterModal = true;
     }
+    /**
+     * Nível bloqueado: o de cima está vazio (navegação só com header, menu só com navegação, item só com menu, submenu só
+     * com item). Um valor já gravado fora da regra (roteador antigo) continua editável, para dar para limpar.
+     */
+    levelLocked(level) {
+        const index = HIERARCHY_LEVELS.indexOf(level);
+        if (index <= 0 || this.routerForm[level])
+            return false;
+        return !this.routerForm[HIERARCHY_LEVELS[index - 1]];
+    }
+    /** Grava o nível; limpar um nível limpa todos os de baixo. */
+    setLevel(level, value) {
+        this.routerForm[level] = value ?? '';
+        this.routerError = null;
+        if (!value) {
+            for (const below of HIERARCHY_LEVELS.slice(HIERARCHY_LEVELS.indexOf(level) + 1))
+                this.routerForm[below] = '';
+        }
+    }
+    /** Algum nível preenchido com um vazio acima dele (o argos-admin recusa com 400 `router_hierarchy_gap`). */
+    get hierarchyGap() { return hasHierarchyGap(this.routerForm); }
+    levelLabel(level) {
+        switch (level) {
+            case 'header_id': return this.text.levelHeader;
+            case 'navigation_id': return this.text.levelNavigation;
+            case 'menu_id': return this.text.levelMenu;
+            case 'item_id': return this.text.levelItem;
+            default: return this.text.levelSubmenu;
+        }
+    }
     async saveRouter() {
+        if (!this.routerForm.page_id || this.hierarchyGap || this.savingRouter)
+            return;
         const body = {
             page_id: this.routerForm.page_id,
             header_id: this.routerForm.header_id || null,
@@ -416,12 +497,27 @@ class AutoServiceRoutersComponent {
             submenu_id: this.routerForm.submenu_id || null,
             is_private: this.routerForm.is_private,
             description: this.routerForm.description.trim() || null,
+            allowed_type_ids: [...this.routerForm.allowed_type_ids],
         };
-        if (this.editingRouterId) {
-            await this.service.updateRouter(this.clientId, this.editingRouterId, body);
+        this.savingRouter = true;
+        this.routerError = null;
+        this.cdr.markForCheck();
+        try {
+            if (this.editingRouterId) {
+                await this.service.updateRouter(this.clientId, this.editingRouterId, body);
+            }
+            else {
+                await this.service.createRouter(this.clientId, body);
+            }
         }
-        else {
-            await this.service.createRouter(this.clientId, body);
+        catch (err) {
+            // O modal fica aberto com o motivo no idioma ativo (ex.: router_hierarchy_gap).
+            this.routerError = autoServiceErrorText(err, this.text, this.text.routerSaveError);
+            return;
+        }
+        finally {
+            this.savingRouter = false;
+            this.cdr.markForCheck();
         }
         this.showRouterModal = false;
         await this.load();
@@ -440,14 +536,14 @@ 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: "14.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=\"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-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\n    <hm-combobox [label]=\"text.levelHeader\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.header_id\" (valueChange)=\"routerForm.header_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelNavigation\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.navigation_id\" (valueChange)=\"routerForm.navigation_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelMenu\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.menu_id\" (valueChange)=\"routerForm.menu_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelItem\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.item_id\" (valueChange)=\"routerForm.item_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelSubmenu\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.submenu_id\" (valueChange)=\"routerForm.submenu_id = $event\"></hm-combobox>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\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\" (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>:first-child{flex:1 1 20rem;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)}: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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: DividerComponent, selector: "hm-divider", inputs: ["orientation", "label", "labelAlign", "emphasis", "thickness", "spacing", "decorative"] }, { 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: "14.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    <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\" [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>:first-child{flex:1 1 20rem;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-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: "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: 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 }); }
 }
 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, ButtonComponent, CheckboxComponent, ComboboxComponent, DividerComponent, ModalComponent,
+                        CommonModule, FormsModule, AlertComponent, ButtonComponent, CheckboxComponent, ComboboxComponent, ComboboxMultiComponent, DividerComponent, 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=\"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-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\n    <hm-combobox [label]=\"text.levelHeader\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.header_id\" (valueChange)=\"routerForm.header_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelNavigation\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.navigation_id\" (valueChange)=\"routerForm.navigation_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelMenu\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.menu_id\" (valueChange)=\"routerForm.menu_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelItem\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.item_id\" (valueChange)=\"routerForm.item_id = $event\"></hm-combobox>\n    <hm-combobox [label]=\"text.levelSubmenu\" [options]=\"routeOptions\" [clearable]=\"true\" [value]=\"routerForm.submenu_id\" (valueChange)=\"routerForm.submenu_id = $event\"></hm-combobox>\n\n    <hm-divider />\n    <hm-checkbox [(ngModel)]=\"routerForm.is_private\" [label]=\"text.privateHint\" />\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\" (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>:first-child{flex:1 1 20rem;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)}: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)}\n"] }]
+                    ], 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    <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\" [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>:first-child{flex:1 1 20rem;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-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
             }] } });
@@ -665,11 +761,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>:first-child{flex:1 1 20rem;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)}.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  <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>:first-child{flex:1 1 20rem;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-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 }); }
 }
 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>:first-child{flex:1 1 20rem;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)}.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, 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>:first-child{flex:1 1 20rem;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-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"] }]
         }], ctorParameters: () => [{ type: AutoServiceService }], propDecorators: { clientId: [{
                 type: Input
             }], access: [{
@@ -721,7 +817,7 @@ class AutoServiceAccessComponent {
         this.loading = true;
         try {
             const res = await this.service.getAccess(this.clientId);
-            this.entries = res.access;
+            this.entries = (res.access ?? []).filter((a) => !a.group_is_admin);
         }
         finally {
             this.loading = false;
@@ -734,7 +830,7 @@ class AutoServiceAccessComponent {
             return;
         }
         const res = await this.service.getGroups(this.clientId);
-        this.availableGroups = res.groups;
+        this.availableGroups = (res.groups ?? []).filter((g) => !g.is_admin);
         this.cdr.markForCheck();
     }
     openCreate() { this.showCreate = true; }
@@ -752,11 +848,11 @@ class AutoServiceAccessComponent {
             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>:first-child{flex:1 1 20rem;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)}: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</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>:first-child{flex:1 1 20rem;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-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 }); }
 }
 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>:first-child{flex:1 1 20rem;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)}:host{display:block}\n"] }]
+            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>:first-child{flex:1 1 20rem;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-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
             }] } });
@@ -770,15 +866,15 @@ class AutoServiceClientComponent {
     onClientChange(c) { this.client = c; }
     setTab(tab) { this.activeTab = tab; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceClientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceClientComponent, isStandalone: true, selector: "spine-auto-service-client", ngImport: i0, template: "<!-- T\u00EDtulo e descri\u00E7\u00E3o da tela v\u00EAm da barra da p\u00E1gina (nome + description do router). -->\n<div class=\"as-stack\">\n  <spine-auto-service-client-picker (clientChange)=\"onClientChange($event)\"></spine-auto-service-client-picker>\n\n  <!-- Conte\u00FAdo de cada aba \u00E9 pregui\u00E7oso (*hmTabContent): s\u00F3 busca na API quando a aba \u00E9 aberta. -->\n  <hm-tabs *ngIf=\"client as c\" [label]=\"text.clientSections\" [active]=\"activeTab\" (activeChange)=\"setTab($any($event))\">\n    <hm-tab id=\"routes\" [label]=\"text.tabRoutes\">\n      <spine-auto-service-routes *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routes>\n    </hm-tab>\n    <hm-tab id=\"routers\" [label]=\"text.tabRouters\">\n      <spine-auto-service-routers *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routers>\n    </hm-tab>\n    <hm-tab id=\"access\" [label]=\"text.tabAccess\">\n      <spine-auto-service-access *hmTabContent [clientId]=\"c.id\"></spine-auto-service-access>\n    </hm-tab>\n  </hm-tabs>\n</div>\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>:first-child{flex:1 1 20rem;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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "hm-tabs", inputs: ["label", "active", "orientation", "mode", "overflow", "fillHeight", "noPanelGap"], outputs: ["activeChange"] }, { kind: "component", type: TabComponent, selector: "hm-tab", inputs: ["id", "label", "disabled", "count", "route", "exact", "destroyOnHide"] }, { kind: "directive", type: TabContentDirective, selector: "ng-template[hmTabContent]" }, { kind: "component", type: AutoServiceClientPickerComponent, selector: "spine-auto-service-client-picker", outputs: ["clientChange"] }, { kind: "component", type: AutoServiceRoutesComponent, selector: "spine-auto-service-routes", inputs: ["clientId"] }, { kind: "component", type: AutoServiceRoutersComponent, selector: "spine-auto-service-routers", inputs: ["clientId"] }, { kind: "component", type: AutoServiceAccessComponent, selector: "spine-auto-service-access", inputs: ["clientId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: AutoServiceClientComponent, isStandalone: true, selector: "spine-auto-service-client", ngImport: i0, template: "<!-- T\u00EDtulo e descri\u00E7\u00E3o da tela v\u00EAm da barra da p\u00E1gina (nome + description do router). -->\n<div class=\"as-stack\">\n  <spine-auto-service-client-picker (clientChange)=\"onClientChange($event)\"></spine-auto-service-client-picker>\n\n  <!-- Conte\u00FAdo de cada aba \u00E9 pregui\u00E7oso (*hmTabContent): s\u00F3 busca na API quando a aba \u00E9 aberta. -->\n  <hm-tabs *ngIf=\"client as c\" [label]=\"text.clientSections\" [active]=\"activeTab\" (activeChange)=\"setTab($any($event))\">\n    <hm-tab id=\"routes\" [label]=\"text.tabRoutes\">\n      <spine-auto-service-routes *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routes>\n    </hm-tab>\n    <hm-tab id=\"routers\" [label]=\"text.tabRouters\">\n      <spine-auto-service-routers *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routers>\n    </hm-tab>\n    <hm-tab id=\"access\" [label]=\"text.tabAccess\">\n      <spine-auto-service-access *hmTabContent [clientId]=\"c.id\"></spine-auto-service-access>\n    </hm-tab>\n  </hm-tabs>\n</div>\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>:first-child{flex:1 1 20rem;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-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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "hm-tabs", inputs: ["label", "active", "orientation", "mode", "overflow", "fillHeight", "noPanelGap"], outputs: ["activeChange"] }, { kind: "component", type: TabComponent, selector: "hm-tab", inputs: ["id", "label", "disabled", "count", "route", "exact", "destroyOnHide"] }, { kind: "directive", type: TabContentDirective, selector: "ng-template[hmTabContent]" }, { kind: "component", type: AutoServiceClientPickerComponent, selector: "spine-auto-service-client-picker", outputs: ["clientChange"] }, { kind: "component", type: AutoServiceRoutesComponent, selector: "spine-auto-service-routes", inputs: ["clientId"] }, { kind: "component", type: AutoServiceRoutersComponent, selector: "spine-auto-service-routers", inputs: ["clientId"] }, { kind: "component", type: AutoServiceAccessComponent, selector: "spine-auto-service-access", inputs: ["clientId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceClientComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spine-auto-service-client', standalone: true, imports: [
                         CommonModule, TabsComponent, TabComponent, TabContentDirective,
                         AutoServiceClientPickerComponent, AutoServiceRoutesComponent, AutoServiceRoutersComponent, AutoServiceAccessComponent,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- T\u00EDtulo e descri\u00E7\u00E3o da tela v\u00EAm da barra da p\u00E1gina (nome + description do router). -->\n<div class=\"as-stack\">\n  <spine-auto-service-client-picker (clientChange)=\"onClientChange($event)\"></spine-auto-service-client-picker>\n\n  <!-- Conte\u00FAdo de cada aba \u00E9 pregui\u00E7oso (*hmTabContent): s\u00F3 busca na API quando a aba \u00E9 aberta. -->\n  <hm-tabs *ngIf=\"client as c\" [label]=\"text.clientSections\" [active]=\"activeTab\" (activeChange)=\"setTab($any($event))\">\n    <hm-tab id=\"routes\" [label]=\"text.tabRoutes\">\n      <spine-auto-service-routes *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routes>\n    </hm-tab>\n    <hm-tab id=\"routers\" [label]=\"text.tabRouters\">\n      <spine-auto-service-routers *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routers>\n    </hm-tab>\n    <hm-tab id=\"access\" [label]=\"text.tabAccess\">\n      <spine-auto-service-access *hmTabContent [clientId]=\"c.id\"></spine-auto-service-access>\n    </hm-tab>\n  </hm-tabs>\n</div>\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>:first-child{flex:1 1 20rem;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)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- T\u00EDtulo e descri\u00E7\u00E3o da tela v\u00EAm da barra da p\u00E1gina (nome + description do router). -->\n<div class=\"as-stack\">\n  <spine-auto-service-client-picker (clientChange)=\"onClientChange($event)\"></spine-auto-service-client-picker>\n\n  <!-- Conte\u00FAdo de cada aba \u00E9 pregui\u00E7oso (*hmTabContent): s\u00F3 busca na API quando a aba \u00E9 aberta. -->\n  <hm-tabs *ngIf=\"client as c\" [label]=\"text.clientSections\" [active]=\"activeTab\" (activeChange)=\"setTab($any($event))\">\n    <hm-tab id=\"routes\" [label]=\"text.tabRoutes\">\n      <spine-auto-service-routes *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routes>\n    </hm-tab>\n    <hm-tab id=\"routers\" [label]=\"text.tabRouters\">\n      <spine-auto-service-routers *hmTabContent [clientId]=\"c.id\"></spine-auto-service-routers>\n    </hm-tab>\n    <hm-tab id=\"access\" [label]=\"text.tabAccess\">\n      <spine-auto-service-access *hmTabContent [clientId]=\"c.id\"></spine-auto-service-access>\n    </hm-tab>\n  </hm-tabs>\n</div>\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>:first-child{flex:1 1 20rem;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-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}\n"] }]
         }] });
 
 export { AutoServiceClientComponent };
-//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-client.component-C7SPavrX.mjs.map
+//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-client.component-DAxhZC-a.mjs.map