mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
41630d5d7c
feature(ui-label, ahf, warenausgabe, customer-orders): Added and Updated Label Library and Label to the Views, Updated Positioning Ref: #5479
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
computed,
|
|
input,
|
|
ViewEncapsulation,
|
|
} from '@angular/core';
|
|
|
|
/**
|
|
* Priority label component for displaying priority indicators.
|
|
* Supports priority levels 1 (high) and 2 (low) with custom text content.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <ui-prio-label [priority]="1">Pflicht</ui-prio-label>
|
|
* <ui-prio-label [priority]="2">Prio 2</ui-prio-label>
|
|
* ```
|
|
*
|
|
* @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev
|
|
*/
|
|
@Component({
|
|
selector: 'ui-prio-label',
|
|
template: '<ng-content></ng-content>',
|
|
encapsulation: ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
host: {
|
|
'[class]': '["ui-prio-label", priorityClass()]',
|
|
'data-what': 'prio-label',
|
|
'[attr.data-which]': '"priority-" + priority()',
|
|
'role': 'status',
|
|
},
|
|
})
|
|
export class PrioLabelComponent {
|
|
/** The priority level of the label (1 = high, 2 = low). */
|
|
priority = input<1 | 2>(1);
|
|
|
|
/** A computed CSS class based on the current priority. */
|
|
priorityClass = computed(() => `ui-prio-label--${this.priority()}`);
|
|
}
|