|
aclPath
|
Type : string
|
Default value : ''
|
|
|
|
settingsOpen
|
Type : boolean
|
Default value : false
|
|
|
|
aclIconName
|
Type : unknown
|
Default value : AclIconName
|
|
|
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { AclIconModule } from '../acl-icon/acl-icon.module';
import { AclIconName } from '../acl-icon/acl-icon.interface';
@Component({
selector: 'acl-tag-hint',
templateUrl: 'acl-tag-hint.component.html',
styleUrls: ['./acl-tag-hint.component.scss'],
imports: [CommonModule, AclIconModule],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AclTagHintComponent {
readonly aclPath = input('');
readonly settingsOpen = input(false);
readonly toggleSettings = output();
aclIconName = AclIconName;
}
<button
type="button"
class="acl-hint"
[class.acl-hint--active]="settingsOpen()"
[title]="'ACL Hint: ' + aclPath()"
[attr.aria-expanded]="settingsOpen()"
[attr.aria-label]="'ACL settings for ' + aclPath()"
(click)="toggleSettings.emit()"
>
<span class="acl-hint__path">{{ aclPath() }}</span>
<acl-icon
class="acl-hint__cog"
[name]="aclIconName.Cog"
title="ACL settings"
size="20"
></acl-icon>
</button>
@use '../inspector.shared' as *;
@use '../inspector.colors' as *;
:host {
display: block;
// Capped by the overlay service to the width of the tagged element.
max-width: 100%;
}
.acl-hint {
@include base-button-styles;
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
max-width: 100%;
height: 32px;
padding: 4px 8px;
border-radius: 6px;
background-color: $hint-color-surface;
color: $hint-color-text-muted;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
&:hover:not(#{&}--active) {
background-color: $hint-color-surface-hover;
}
}
.acl-hint__path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.acl-hint__cog {
flex: 0 0 auto;
}
Legend
Html element with directive