global-context/shared/preview-controls/preview-controls.component.ts
OnInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | c8y-preview-controls |
| standalone | true |
| imports |
AsyncPipe
IconDirective
ReactiveFormsModule
DateTimeContextPickerComponent
AggregationPickerComponent
AutoRefreshControlComponent
TooltipModule
C8yTranslatePipe
|
| styles |
:host {
position: relative;
display: block;
cursor: not-allowed;
}
/* Block all interactions with form controls */
:host form {
position: relative;
pointer-events: none;
user-select: none;
}
/* Add subtle visual indication of non-interactive state */
:host form::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.05);
z-index: 1;
pointer-events: none;
}
/* Ensure buttons and inputs look disabled */
:host form button,
:host form input,
:host form select,
:host form .dropdown-toggle,
:host form .btn {
cursor: not-allowed !important;
opacity: 0.85;
}
/* Ensure all child interactive elements are non-interactive */
:host form * {
pointer-events: none !important;
user-select: none !important;
}
|
| templateUrl | ./preview-controls.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
| config |
Type : GlobalContextState
|
| widgetControls |
Type : WidgetControls
|
| getInlineControlsSettings |
getInlineControlsSettings()
|
|
Returns the current inline controls settings
Returns :
Partial<GlobalContextSettings>
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| setControlsVisibility | ||||||
setControlsVisibility(context?: GlobalContextState)
|
||||||
|
Updates visibility of controls based on display mode and widget type
Parameters :
Returns :
void
|
| setInlineControlsSettings | ||||||
setInlineControlsSettings(settings: Partial
|
||||||
|
Updates the inline controls settings
Parameters :
Returns :
void
|
| form |
Type : FormGroup
|
| Readonly GLOBAL_CONTEXT_DISPLAY_MODE |
Type : unknown
|
Default value : GLOBAL_CONTEXT_DISPLAY_MODE
|
| Readonly inlineControlsSettings$ |
Type : unknown
|
Default value : new BehaviorSubject<Partial<GlobalContextSettings>>({})
|
| Readonly REFRESH_OPTION |
Type : unknown
|
Default value : REFRESH_OPTION
|
| shouldDisableCustomInterval |
Type : object
|
Default value : { isDisabled: false, msg: null }
|
| config | ||||||
getconfig()
|
||||||
setconfig(value: GlobalContextState)
|
||||||
|
Parameters :
Returns :
void
|
<!-- Main Controls -->
@let isConfigMode = config?.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG;
@let settings = inlineControlsSettings$ | async;
@if (form && settings) {
<form
class="d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll"
[formGroup]="form"
>
<!-- Control Group Container -->
<div class="input-group w-auto">
<!-- Aggregation Picker -->
@if (settings.showAggregation) {
<c8y-aggregation-picker
formControlName="aggregation"
[resetToDefault]="true"
></c8y-aggregation-picker>
}
<!-- Auto Refresh Controls -->
@if (settings.showAutoRefresh) {
<!-- Auto Refresh Toggle -->
<c8y-auto-refresh-control
[isLoading]="isLoading"
[disableCounter]="shouldDisableCounter"
formControlName="isAutoRefreshEnabled"
[autoRefreshSeconds]="form.get('refreshInterval')?.value"
></c8y-auto-refresh-control>
}
@if (settings.showTimeContext) {
@let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;
@let configValue =
isHistoryMode
? {
showDateTo: true,
showDateFrom: true
}
: {
showDateTo: false,
showDateFrom: true
};
<c8y-date-time-context-picker
style="margin-left: -1px"
formControlName="dateTimeContext"
[shouldDisableInterval]="shouldDisableCustomInterval"
[config]="configValue"
></c8y-date-time-context-picker>
}
<!-- Manual Refresh Button -->
@if (settings.showRefresh) {
<div class="input-group-btn">
<button
class="btn btn-default"
[attr.aria-label]="'Refresh' | translate"
[tooltip]="'Refresh' | translate"
placement="bottom"
type="button"
[adaptivePosition]="false"
[delay]="500"
[disabled]="isLoading"
>
<i
[class.icon-spin]="isLoading"
[c8yIcon]="'refresh'"
></i>
</button>
</div>
}
</div>
</form>
}