Web SDK documentation
  1. Components
  2. GlobalContextLinkControlsComponent

File

global-context/core/widget-inline/inline-link-controls.component.ts

Description

Component to display and manage link controls for global context items

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector c8y-global-context-link-controls
standalone true
imports IconDirective 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"
    [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>
}

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

controlConfigs
Type : Record<string, LinkControlConfig>
linkStates
Type : literal type

Outputs

allLinksToggled
Type : EventEmitter

Methods

ngOnInit
ngOnInit()
Returns : void
toggleAll
toggleAll()
Returns : void

Properties

allControlsLinked
Type : unknown
Default value : computed<boolean>(() => { const controls = this.visibleControls(); return controls.length > 0 && controls.every(control => control.isLinked); })
masterTooltipText
Type : unknown
Default value : computed<string>(() => { const controls = this.visibleControls(); const linkedControls = controls.filter(control => control.isLinked); const controlConfigs = this.controlConfigsSignal(); const clickToToggleLabel = this.translateService.instant(gettext('(click to toggle)')); if (linkedControls.length === 0) { const usingWidgetCustomTimeSettingsLabel = this.translateService.instant( gettext('Using widget custom time settings') ); return `${usingWidgetCustomTimeSettingsLabel}\n${clickToToggleLabel}`; } const linkedNames = linkedControls.map(control => { const config = controlConfigs[control.key]; return this.translateService.instant(config?.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}`; })
showLinks
Type : unknown
Default value : computed<boolean>(() => { const linkStates = this.linkStatesSignal(); return Object.keys(linkStates).length > 0; })
someControlsLinked
Type : unknown
Default value : computed<boolean>(() => { const controls = this.visibleControls(); return controls.length > 0 && controls.some(control => control.isLinked); })
visibleControls
Type : unknown
Default value : computed<LinkControlInfo[]>(() => { const linkStates = this.linkStatesSignal(); const controlConfigs = this.controlConfigsSignal(); return Object.entries(linkStates) .filter(([key]) => controlConfigs[key]) .map(([key, isLinked]) => ({ key, isLinked, cssClass: (controlConfigs[key]?.cssClass || 'default').trim(), icon: controlConfigs[key]?.icon || '', disabled: !!controlConfigs[key]?.disabled, disabledTooltip: controlConfigs[key]?.disabledTooltip, autoUnlinked: !!controlConfigs[key]?.autoUnlinked })); })

Accessors

linkStates
getlinkStates()
setlinkStates(value: literal type)
Parameters :
Name Type Optional
value literal type No
Returns : void
controlConfigs
setcontrolConfigs(value: Record<string | LinkControlConfig>)
Parameters :
Name Type Optional
value Record<string | LinkControlConfig> No
Returns : void

results matching ""

    No results matching ""