|
index
|
Type : number
|
Default value : -1
|
|
|
|
rule
|
Type : AclRule
|
|
Required : true
|
|
|
HostBindings
|
class.default-rule
|
Type : any
|
|
|
|
class.dynamic-form-rule
|
Type : any
|
|
|
Methods
|
handleRemove
|
handleRemove()
|
|
|
|
|
|
aclIconName
|
Type : unknown
|
Default value : AclIconName
|
|
|
|
mutableRule
|
Type : unknown
|
Default value : linkedSignal(() => this.rule())
|
|
|
Accessors
|
defaultRule
|
getdefaultRule()
|
|
|
|
dynamicFormRule
|
getdynamicFormRule()
|
|
|
import {
ChangeDetectionStrategy,
Component,
HostBinding,
input,
linkedSignal,
output
} from '@angular/core';
import { AclRule } from '@allianz/taly-acl';
import { AclIconName, copyToClipboard } from '@allianz/taly-acl/angular';
@Component({
selector: 'acl-rule',
templateUrl: './rule.component.html',
styleUrls: ['./rule.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RuleComponent {
index = input(-1);
rule = input.required<AclRule>();
mutableRule = linkedSignal(() => this.rule());
changed = output();
removed = output();
duplicated = output<AclRule>();
aclIconName = AclIconName;
@HostBinding('class.rule-inactive')
get inactive() {
return false === this.mutableRule().active;
}
@HostBinding('class.default-rule')
get defaultRule() {
return this.mutableRule().defaultRule;
}
@HostBinding('class.dynamic-form-rule')
get dynamicFormRule() {
return this.mutableRule().dynamicFormRule;
}
toggleRule() {
const current = this.mutableRule();
current.active = !current.active;
this.mutableRule.set({ ...current });
this.changed.emit();
}
duplicate() {
this.duplicated.emit({ ...this.mutableRule() });
}
clipboard() {
const rule = this.mutableRule();
copyToClipboard(`${rule.path}, ${rule.condition}, ${rule.state}`);
}
handleRemove() {
this.removed.emit();
}
update(prop: keyof AclRule, value: string) {
const current = this.mutableRule();
(current[prop] as string) = value;
this.mutableRule.set({ ...current });
this.changed.emit();
}
}
@if (!defaultRule && !dynamicFormRule) {
<div class="handle">
<ng-content select="[cdkDragHandle]"></ng-content>
</div>
<button class="toggle-show" (click)="toggleRule()">
@if (true === mutableRule().active) {
<acl-icon [name]="aclIconName.EyeBig" title="toggle rule"></acl-icon>
} @if (false === mutableRule().active) {
<acl-icon [name]="aclIconName.EyeBigClosed" title="toggle rule"></acl-icon>
}
</button>
<div class="chip">
<edit-text [value]="mutableRule().path" (update)="update('path', $event)"></edit-text>
</div>
<div class="chip">
<edit-text [value]="mutableRule().condition" (update)="update('condition', $event)"></edit-text>
</div>
<div class="chip">
<edit-selection
[choices]="['hidden', 'visible', 'disabled', 'readonly', 'editable']"
[value]="mutableRule().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>
} @else {
<!-- Placeholders as a simple way to align the columns -->
<div></div>
<div></div>
<div class="chip">
<span>{{ mutableRule().path || '-' }}</span>
</div>
<div class="chip">
<span>{{ mutableRule().condition || '-' }}</span>
</div>
<div class="chip">
<span>{{ mutableRule().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>
}
@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: #e1ebf5;
.chip {
background-color: #e1ebf5;
}
&:hover {
background-color: color.adjust(#e1ebf5, $lightness: -5%);
.chip {
background-color: color.adjust(#e1ebf5, $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()');
opacity: 0.55;
}
}
.chip {
background-color: $debug-color-dark;
color: $debug-color-text;
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