Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { NgClass } from '@angular/common';
import { booleanAttribute, Component, computed, input } from '@angular/core';
import { SiCardComponent } from '@siemens/element-ng/card';
import {
AccentLineType,
EntityStatusType,
MenuItem as MenuItemLegacy
} from '@siemens/element-ng/common';
import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
import { Link, SiLinkDirective } from '@siemens/element-ng/link';
import { MenuItem } from '@siemens/element-ng/menu';
import { SiTranslateModule, TranslatableString } from '@siemens/element-translate-ng/translate';
import { SiValueWidgetBodyComponent } from './si-value-widget-body.component';
/**
* Is a dynamic UI component that not only displays information, but also includes
* embedded actions which the user can interact with to perform tasks directly
* related to the card's content. Actions might include editing settings,
* initiating processes, or deleting resources.
*
* The actionable widget turns data representation into an interactive hub,
* streamlining the user's tasks and decisions associated with the card's content.
*
* This component is a wrapper using the `.si-value-widget` CSS classes and the
* `<si-card>` component. For more configuration options, use the CSS classes directly.
*/
@Component({
selector: 'si-value-widget',
imports: [
NgClass,
SiCardComponent,
SiLinkDirective,
SiTranslateModule,
SiValueWidgetBodyComponent
],
templateUrl: './si-value-widget.component.html'
})
export class SiValueWidgetComponent {
/**
* Value widget header text.
*/
readonly heading = input<TranslatableString>();
/**
* Input list of primary action items. Supports up to **4** actions and omits additional ones.
*
* @defaultValue []
*/
readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);
/**
* Input list of secondary action items.
*
* @defaultValue []
*/
readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);
/**
* The main value to be displayed. If no value is set,
* the skeleton indicates the loading of the value. Disable
* the automatic loading mechanism by setting `SiValueWidgetComponent.disableAutoLoadingIndicator`.
*/
readonly value = input<TranslatableString>();
/**
* The unit of the value (e.g. kWh or users). Only visible if `value` is available.
*/
readonly unit = input<TranslatableString>();
/**
* The element icon name. Only visible if `value` is available.
*/
readonly icon = input<string>();
/**
* Show a status icon instead of the {@link icon}.
*/
readonly status = input<EntityStatusType>();
/**
* Short description of the value. A description is mandatory
* to show an icon. Only visible if `value` is available.
*/
readonly description = input<TranslatableString>();
/**
* Link that leads the user to more information
* or triggers and action. The `link.title` is displayed.
* The title will be translated.
*/
readonly link = input<Link>();
/**
* Option to disable automatic start of skeleton loading indication.
*
* @defaultValue false
*/
readonly disableAutoLoadingIndicator = input(false, { transform: booleanAttribute });
/**
* Input to start and stop the skeleton loading indication.
*
* @defaultValue false
*/
readonly showLoadingIndicator = input(false, { transform: booleanAttribute });
/**
* Initial delay time in milliseconds before enabling loading indicator.
* Only used once initially during construction.
*
* @defaultValue 300
*/
readonly initialLoadingIndicatorDebounceTime = input(300);
/**
* Image source for the card.
*/
readonly imgSrc = input<string>();
/**
* Alt text for a provided image.
*/
readonly imgAlt = input<string>();
/**
* Defines if an image is placed on top or start (left) of the card.
*
* @defaultValue 'vertical'
*/
readonly imgDir = input<'horizontal' | 'vertical'>('vertical');
/**
* Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
*
* @defaultValue 'scale-down'
*/
readonly imgObjectFit = input<'contain' | 'cover' | 'fill' | 'none' | 'scale-down'>('scale-down');
/**
* Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
*/
readonly imgObjectPosition = input<string>();
/**
* Optional accent line
*/
readonly accentLine = input<AccentLineType>();
protected readonly accentClass = computed(() => {
const accentLine = this.accentLine();
return accentLine ? 'accent-' + accentLine : '';
});
}
|