Web SDK documentation
  1. Components
  2. GlobalContextLinkControlsComponent
global-context/core/widget-inline/inline-link-controls.component.ts

Description

Component to display and manage link controls for global context items

Implements

OnInit

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector c8y-global-context-link-controls
standalone true
imports
TooltipModule
C8yTranslatePipe
styles .btn-icon-dot[disabled] { cursor: not-allowed; opacity: 0.75; } .btn-icon-dot.link-auto-unlinked, .btn-icon-dot.link-auto-unlinked:focus { box-shadow: 0 0 0 2px var(--c8y-palette-status-danger); border-color: var(--c8y-palette-status-danger); }
template 
@if (showLinks()) {
  <button
    class="btn-icon-dot-set m-r-4"
    [class.active]="someControlsLinked()"
    [attr.aria-label]="'Global context sync controls' | translate"
    [tooltip]="masterTooltipTemplate"
    delay="500"
    container="body"
    (click)="toggleAll()"
    data-cy="global-context-link--all"
  >
    <span class="btn-icon-dot__item default" [class.active]="allControlsLinked()">
      <i [c8yIcon]="someControlsLinked() ? 'link' : 'unlink'"></i>
    </span>
    <!-- Individual Link icons -->
    @for (control of visibleControls(); track control.key) {
      <span
        [class]="control.cssClass + ' btn-icon-dot__item'"
        [class.active]="control.isLinked"
        [class.link-disabled]="control.disabled"
        [class.link-auto-unlinked]="control.autoUnlinked"
        [attr.data-cy]="'global-context-link--' + control.key"
      >
        <i [c8yIcon]="control.icon"></i>
      </span>
    }
  </button>
  <ng-template #masterTooltipTemplate>{{ masterTooltipText() | translate }}</ng-template>
}

Relationships

Used by

Depends on

results matching ""

    No results matching ""