|
contentShown
|
Type : boolean
|
Default value : true
|
|
|
|
givenAclTag
|
Type : AclTag
|
|
|
can be set by the component creator like the acl tag directive
to override the automatically extracted acl tag from the injection chain
which is not always matching the expectations
|
Methods
|
addHiddenRule
|
addHiddenRule()
|
|
|
|
|
|
addVisibleRule
|
addVisibleRule()
|
|
|
|
|
|
removeAllInspectorInjectedRules
|
removeAllInspectorInjectedRules()
|
|
|
|
|
|
aclIconName
|
Type : unknown
|
Default value : AclIconName
|
|
|
|
aclInspector
|
Type : unknown
|
Default value : inject(AclInspectorService)
|
|
|
|
injectedAclTag
|
Type : unknown
|
Default value : inject<AclTag>(ACL_TAG_TOKEN, { optional: true })
|
|
|
import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';
import { map } from 'rxjs/operators';
import { AclInspectorService } from '../inspector/inspector.service';
import { AclTag } from '@allianz/taly-acl';
import { AclIconName } from '../acl-icon/acl-icon.interface';
import { ACL_TAG_TOKEN } from '../tokens/public-api';
import { copyToClipboard } from '../util/copy-clipboard';
@Component({
selector: 'acl-tag-hint',
templateUrl: 'acl-tag-hint.component.html',
styleUrls: ['./acl-tag-hint.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AclTagHintComponent {
injectedAclTag = inject<AclTag>(ACL_TAG_TOKEN, { optional: true });
aclInspector = inject(AclInspectorService);
@HostBinding('class.content-shown')
@Input()
contentShown = true;
/**
* can be set by the component creator like the acl tag directive
* to override the automatically extracted acl tag from the injection chain
* which is not always matching the expectations
*/
@Input() givenAclTag!: AclTag;
aclIconName = AclIconName;
addVisibleRule() {
this.aclInspector.addRule({
path: this.aclTag.aclKey,
state: 'visible',
active: true,
condition: '',
defaultRule: false,
inspectorRule: true
});
}
addHiddenRule() {
this.aclInspector.addRule({
path: this.aclTag.aclKey,
state: 'hidden',
condition: '',
active: true,
defaultRule: false,
inspectorRule: true
});
}
removeAllInspectorInjectedRules() {
this.aclInspector.removeInspectorInjectedRules(this.aclTag.aclKey);
}
clipboard() {
copyToClipboard(this.aclTag.aclKey);
}
get ownTag() {
return this.aclTag?.ownTag || 'n/a';
}
get aclKey$() {
return this.aclTag?.aclKey$.pipe(map((value) => value.aclKey));
}
get aclTag() {
return this.givenAclTag ?? this.injectedAclTag;
}
}
<div class="acl-hint">
<acl-icon
[name]="aclIconName.Acl"
size="24"
[title]="'ACL Hint: ' + (aclKey$ | async)"
class="acl-icon"
></acl-icon>
<div class="acl-key" title="acl key">{{ aclKey$ | async }}</div>
<div class="actions">
<button class="btn-icon btn-icon--secondary" aria-label="Duplicate rule" (click)="clipboard()">
<acl-icon [name]="aclIconName.Copy" title="Duplicate rule" size="24"></acl-icon>
</button>
<button
class="btn-icon btn-icon--secondary"
aria-label="Inject visible rule"
(click)="addVisibleRule()"
>
<acl-icon [name]="aclIconName.ViewGrant" title="Inject visible rule" size="24"></acl-icon>
</button>
<button
class="btn-icon btn-icon--secondary"
aria-label="Inject hidden rule"
(click)="addHiddenRule()"
>
<acl-icon [name]="aclIconName.ViewDeny" title="Inject hidden rule" size="24"></acl-icon>
</button>
<button
class="btn-icon btn-icon--secondary"
aria-label="Remove all injected rules"
(click)="removeAllInspectorInjectedRules()"
>
<acl-icon [name]="aclIconName.Broom" title="Remove all injected rules" size="24"></acl-icon>
</button>
</div>
</div>
@use '../inspector.shared' as *;
@use '../inspector.colors' as *;
:host {
display: inline-block;
}
.acl-hint {
background-color: $debug-color-dark;
color: #fff;
padding: 5px 6px;
font-size: 16px;
line-height: 18px;
vertical-align: middle;
font-weight: 700;
border-radius: 8px;
margin-top: 10px;
display: flex;
acl-icon {
color: #fff;
}
}
.btn-icon {
@include base-button-styles;
padding: 0 2px;
}
.acl-key {
color: $debug-color-success;
margin-left: 8px;
margin-top: 3px;
}
.actions {
display: inline-block;
margin-left: 12px;
}
:host:not(.content-shown) {
.acl-hint {
opacity: 0.5;
}
}
:host(.content-shown) {
opacity: 1;
transform: opacity 0.5 linear;
}
Legend
Html element with directive