File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
show
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
open
|
open(value?: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
boolean
|
Yes
|
|
|
Readonly
aclIconName
|
Default value : AclIconName
|
|
|
|
aclService
|
Default value : inject(AclService)
|
|
|
|
selectedTab
|
Type : "Rules" | "Editor"
|
Default value : 'Rules'
|
|
|
import { Component, Input, inject } from '@angular/core';
import { AclIconName } from '../acl-icon/acl-icon.interface';
import { AclService } from '../services/acl.service';
import { AclRuleFlatTreeNode } from './rules/rules.component';
@Component({
selector: 'acl-hierarchical-inspector',
templateUrl: './hierarchical-inspector.component.html',
styleUrls: ['./hierarchical-inspector.component.scss'],
standalone: false
})
export class AclHierarchicalInspectorComponent {
readonly aclIconName = AclIconName;
selectedTab: 'Rules' | 'Editor' = 'Rules';
selectedNode?: AclRuleFlatTreeNode;
aclService = inject(AclService);
@Input() show = false;
open(value?: boolean) {
this.show = value ?? !this.show;
}
openRuleEditor(value: AclRuleFlatTreeNode) {
this.selectedTab = 'Editor';
this.selectedNode = value;
}
}
<span class="anchor" cdkOverlayOrigin #trigger="cdkOverlayOrigin"></span>
<button class="debug-opener" (click)="open()">
<acl-icon [name]="aclIconName.Acl" size="28"></acl-icon>ACL Hierarchical Inspector
<span class="triangle"><span class="triangle-down"></span></span>
</button>
<ng-template
cdkConnectedOverlay
(detach)="show = false"
[cdkConnectedOverlayOrigin]="trigger"
[cdkConnectedOverlayOpen]="show"
>
<div cdkDrag class="debug-panel" cdkDragRootElement=".cdk-overlay-pane">
<div class="debug-content">
<acl-debug-header (closeWindow)="open(false)" cdkDragHandle></acl-debug-header>
<div class="tab-group-nav padding-left-16">
<button
class="tab-btn"
[ngClass]="{ 'tab-btn--active': selectedTab === 'Rules' }"
(click)="selectedTab = 'Rules'"
>
Rules
</button>
<button
class="tab-btn"
[ngClass]="{ 'tab-btn--active': selectedTab === 'Editor' }"
*ngIf="selectedTab === 'Editor'"
(click)="selectedTab = 'Editor'"
>
<div class="editor-tab">
Editor
<button class="nx-margin-left-2xs close-button" (click)="selectedTab = 'Rules'">
<nx-icon name="close" size="auto"></nx-icon>
</button>
</div>
</button>
</div>
<div class="tab-group">
<div class="tab" *ngIf="selectedTab === 'Rules'">
<acl-rules
[rules]="(this.aclService.currentPolicy$ | async)!"
(openRuleEditor)="openRuleEditor($event)"
></acl-rules>
</div>
<div class="tab" *ngIf="selectedTab === 'Editor'">
<acl-rule-editor [rule]="selectedNode!"></acl-rule-editor>
</div>
</div>
</div>
</div>
</ng-template>
@use '../inspector.shared' as *;
@use '../inspector.colors' as *;
:host {
display: block;
position: fixed;
right: 25px;
top: 262px;
z-index: 10;
}
.anchor {
position: absolute;
right: 30px; /**button width**/
top: 5px;
z-index: -1;
}
.debug-panel {
background-color: $debug-color-dark;
color: #fff;
padding: 2px 0;
line-height: 16px;
font-size: 13px;
border-radius: 8px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.debug-opener {
cursor: pointer;
font-size: 20px;
line-height: 24px;
padding: 8px 16px 8px 6px;
margin: 0 -20px 0 10px;
background-color: $debug-color-dark;
border: 1px solid $debug-color-dark;
color: #fff;
border-radius: 8px;
font-weight: 700;
vertical-align: middle;
display: inline-block;
transition: background-color 0.3s ease;
transform: rotate(90deg) translate(102%);
transform-origin: top right;
&:hover,
&:focus {
background-color: $debug-color-dark-hover;
}
svg {
margin-bottom: -6px;
}
.triangle {
margin-bottom: -1px;
}
}
.tab-group-nav {
background-color: $debug-color-dark;
padding-top: 8px;
}
.tab-btn {
@include base-button-styles;
display: inline-block;
padding: 8px 16px;
font-size: 16px;
line-height: 18px;
font-weight: 700;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-right: 1px;
color: #fff;
&:hover,
&--active {
background-color: $debug-color-light;
}
}
.tab-group {
background-color: $debug-color-light;
}
.tab-content {
font-size: 14px;
}
.tab-content-padding {
padding: 16px;
}
.tab {
display: block;
height: 50vh;
min-width: 400px;
width: min-content;
resize: both;
overflow-y: auto;
}
.editor-tab {
display: flex;
align-items: center;
}
.close-button {
display: flex;
cursor: pointer;
padding: 0;
background-color: $debug-color-light;
border: none;
color: #fff;
border-radius: 3px;
transition: background-color 0.3s ease;
margin-right: -8px;
&:hover {
background-color: $debug-color-dark-hover;
}
}
Legend
Html element with directive