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 | 1x 305x 305x 515x 305x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { AfterViewInit, booleanAttribute, computed, Directive, input, signal } from '@angular/core';
import { SiAutoCollapsableListMeasurable } from './si-auto-collapsable-list-measurable.class';
@Directive({
selector: '[siAutoCollapsableListItem]',
host: {
'[style.visibility]': 'isVisible() ? "visible" : "hidden"',
'[style.position]': 'isVisible() ? "" : "absolute"',
// Ensure hidden items are behind the visible ones. Otherwise, the visible ones are not clickable
'[style.z-index]': 'isVisible() ? "" : "-1"'
},
exportAs: 'siAutoCollapsableListItem'
})
export class SiAutoCollapsableListItemDirective
extends SiAutoCollapsableListMeasurable
implements AfterViewInit
{
/**
* Hide this item even if enough space is available.
* When calculating the overall available size, this item is still considered when forceHide=true
*
* @defaultValue false
*/
readonly forceHide = input(false, { transform: booleanAttribute });
/**
* True if enough space is available for this item.
*
* @defaultValue false
*/
readonly canBeVisible = signal<boolean>(false);
/**
* True if this item is actually visible to the user
*/
readonly isVisible = computed(() => this.canBeVisible() && !this.forceHide());
ngAfterViewInit(): void {
Iif (getComputedStyle(this.elementRef.nativeElement).display === 'inline') {
console.error('siAutoCollapsibleListItem does not work on items with display="inline"');
}
}
}
|