Web SDK documentation
  1. Components
  2. LinkButtonsComponent

File

global-context/integration/link-buttons/link-buttons.component.ts

Implements

AfterViewInit OnDestroy

Metadata

selector c8y-link-buttons
standalone true
imports IconDirective TooltipModule C8yTranslatePipe
template 
<ng-template #headerContent>
  <button
    class="btn-icon-dot-set"
    [class.active]="isLinked()"
    [attr.aria-label]="'Global context sync controls' | translate"
    [tooltip]="masterTooltipTemplate"
    delay="500"
    container="body"
    (click)="toggle.emit(!isLinked())"
    data-cy="global-context-link--all"
  >
    <span class="btn-icon-dot__item default" [class.active]="isLinked()">
      <i [c8yIcon]="isLinked() ? 'link' : 'unlink'"></i>
    </span>
    @for (control of visibleControls(); track control.stateKey) {
      <span
        [class]="control.cssClass + ' btn-icon-dot__item'"
        [class.active]="isLinked()"
        [attr.data-cy]="'global-context-link--' + control.stateKey"
      >
        <i [c8yIcon]="control.icon"></i>
      </span>
    }
  </button>
  <ng-template #masterTooltipTemplate>{{ masterTooltipText() }}</ng-template>
</ng-template>

Index

Properties
Methods
Inputs
Outputs

Inputs

config
Type : GlobalContextState
Default value : {}
controls
Type : PresetName | PresetDefinition
Default value : PRESET_NAME.DEFAULT
dashboardChild
Type : DashboardChildComponent
isLinked
Type : boolean
Required :  true

Outputs

toggle
Type : boolean

Methods

ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

masterTooltipText
Type : unknown
Default value : computed<string>(() => { const controls = this.visibleControls(); const clickToToggleLabel = this.translateService.instant(gettext('(click to toggle)')); if (!this.isLinked()) { const usingWidgetCustomTimeSettingsLabel = this.translateService.instant( gettext('Using widget custom time settings') ); return `${usingWidgetCustomTimeSettingsLabel}\n${clickToToggleLabel}`; } const linkedNames = controls.map(control => this.translateService.instant(control.label)); const formatter = new Intl.ListFormat( this.translateService.getCurrentLang()?.replace('_', '-'), { type: 'conjunction' } ); const linkedNamesList = formatter.format(linkedNames); const linkedToDashboardLabel = this.translateService.instant(gettext('Synced to dashboard:')); return `${linkedToDashboardLabel}\n${linkedNamesList}\n${clickToToggleLabel}`; })
visibleControls
Type : unknown
Default value : computed(() => { const controlsInput = this.controls(); const presetDef = typeof controlsInput === 'string' ? CONTROL_PRESETS[controlsInput] : controlsInput; const refreshOption = this.config().refreshOption || REFRESH_OPTION.LIVE; const dashboardControls = presetDef[GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD]; const activeControls = applyModeConstraints(dashboardControls, refreshOption); return activeControls.map(key => CONTROL_DISPLAY_CONFIG[key]).filter(Boolean); })

results matching ""

    No results matching ""