File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
HostBindings
|
|
|
Accessors
|
|
|
|
index
|
Type : number
|
Default value : -1
|
|
|
HostBindings
|
class.default-rule
|
Type : any
|
|
|
|
class.dynamic-form-rule
|
Type : any
|
|
|
Methods
|
handleRemove
|
handleRemove()
|
|
|
|
|
|
update
|
update(prop, value: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| prop |
|
No
|
| value |
string
|
No
|
|
|
aclIconName
|
Default value : AclIconName
|
|
|
Accessors
|
defaultRule
|
getdefaultRule()
|
|
|
|
dynamicFormRule
|
getdynamicFormRule()
|
|
|
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { AclRule } from '@allianz/taly-acl';
import { AclIconName } from '../../acl-icon/acl-icon.interface';
import { copyToClipboard } from '../../util/copy-clipboard';
@Component({
selector: 'acl-rule',
templateUrl: './rule.component.html',
styleUrls: ['./rule.component.scss'],
standalone: false
})
export class RuleComponent {
@Input() index = -1;
@Input() rule!: AclRule;
@Output() changed = new EventEmitter();
@Output() removed = new EventEmitter();
@Output() duplicated = new EventEmitter();
aclIconName = AclIconName;
@HostBinding('class.rule-inactive')
get inactive() {
return false === this.rule.active;
}
@HostBinding('class.default-rule')
get defaultRule() {
return this.rule.defaultRule;
}
@HostBinding('class.dynamic-form-rule')
get dynamicFormRule() {
return this.rule.dynamicFormRule;
}
toggleRule() {
this.rule.active = !this.rule.active;
this.changed.emit();
}
duplicate() {
this.duplicated.emit({ ...this.rule });
}
clipboard() {
copyToClipboard(`${this.rule.path}, ${this.rule.condition}, ${this.rule.state}`);
}
handleRemove() {
this.removed.emit(this.rule);
}
update(prop: keyof AclRule, value: string) {
(this.rule[prop] as string) = value;
this.changed.emit();
}
}
<ng-container *ngIf="!defaultRule && !dynamicFormRule; else defaultOrDynamicFormRuleTemplate">
<div class="handle">
<ng-content select="[cdkDragHandle]"></ng-content>
</div>
<button class="toggle-show" (click)="toggleRule()">
<acl-icon
*ngIf="true === rule.active"
[name]="aclIconName.EyeBig"
title="toggle rule"
></acl-icon>
<acl-icon
*ngIf="false === rule.active"
[name]="aclIconName.EyeBigClosed"
title="toggle rule"
></acl-icon>
</button>
<div class="chip">
<edit-text [value]="rule.path" (update)="update('path', $event)"></edit-text>
</div>
<div class="chip">
<edit-text [value]="rule.condition" (update)="update('condition', $event)"></edit-text>
</div>
<div class="chip">
<edit-selection
[choices]="['hidden', 'visible', 'disabled', 'readonly', 'editable']"
[value]="rule.state"
(update)="update('state', $event)"
></edit-selection>
</div>
<div class="actions">
<button class="btn-icon" (click)="handleRemove()">
<acl-icon [name]="aclIconName.Waste" title="remove rule"></acl-icon>
</button>
<button class="btn-icon" (click)="duplicate()">
<acl-icon [name]="aclIconName.Duplicate" title="duplicate rule"></acl-icon>
</button>
<button class="btn-icon" (click)="clipboard()">
<acl-icon [name]="aclIconName.Copy" title="copy to clipboard"></acl-icon>
</button>
</div>
</ng-container>
<ng-template #defaultOrDynamicFormRuleTemplate>
<!-- Placeholders as a simple way to align the columns -->
<div></div>
<div></div>
<div class="chip">
<span>{{ rule.path || '-' }}</span>
</div>
<div class="chip">
<span>{{ rule.condition || '-' }}</span>
</div>
<div class="chip">
<span>{{ rule.state || '-' }}</span>
</div>
<div class="actions">
<button class="btn-icon" (click)="duplicate()">
<acl-icon [name]="aclIconName.Duplicate" title="duplicate rule"></acl-icon>
</button>
<button class="btn-icon" (click)="clipboard()">
<acl-icon [name]="aclIconName.Copy" title="copy to clipboard"></acl-icon>
</button>
</div>
</ng-template>
@use '../../inspector.shared' as *;
@use '../../inspector.colors' as *;
@use 'sass:color';
@use 'sass:string';
:host {
display: block;
padding: 5px;
display: grid;
grid-template-columns: 30px 30px auto auto 90px 95px;
align-items: center;
text-align: center;
gap: 5px;
border-bottom: 1px solid $debug-color-dark;
background-color: $debug-color-light;
&.default-rule {
.chip {
background-color: $debug-color-light;
}
&:hover {
.chip {
background-color: color.adjust($debug-color-light, $lightness: 5%);
}
}
}
&.dynamic-form-rule {
background-color: #29324d;
.chip {
background-color: #29324d;
}
&:hover {
background-color: color.adjust(#29324d, $lightness: 5%);
.chip {
background-color: color.adjust(#29324d, $lightness: 5%);
}
}
}
&:hover {
background-color: color.adjust($debug-color-light, $lightness: 5%);
}
&.rule-inactive {
/**
unquote to prevent conflict with sass built-in grayscale
via https://github.com/sass/libsass/issues/151#issuecomment-475507413
*/
filter: string.unquote('grayscale()');
}
}
.chip {
background-color: $debug-color-dark;
color: #fff;
display: inline-block;
padding: 0 8px;
border-radius: 3px;
min-width: 24px;
vertical-align: middle;
height: 24px;
line-height: 24px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.toggle-show {
cursor: pointer;
background-color: transparent;
border: none;
font-size: 16px;
justify-self: center;
}
.actions {
display: flex;
justify-content: flex-end;
}
.btn-icon {
@include base-button-styles;
font-size: 16px;
padding: 3px;
margin-right: 1px;
border-radius: 3px;
display: inline-block;
padding-bottom: 2px;
&:hover {
background-color: $debug-color-dark;
}
&:last-child {
margin-right: 0;
}
}
.handle {
cursor: move;
margin-left: 8px;
}
Legend
Html element with directive