@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-data-table-sub-component-toggle.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
import { ButtonComponent } from '@sixbell-telco/sdk/components/button';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matKeyboardArrowDown, matInfo } from '@sixbell-telco/sdk/components/icon/material/baseline';

class DataTableSubComponentToggleCellComponent {
    row = input.required();
    isExpanded = input.required(); // Current state of the sub-component for this row
    toggled = output(); // Emits row.id when clicked to trigger parent component update
    // Input to determine if this specific row is eligible to display a sub-component
    canToggleSubComponent = input(false);
    iconChevronDown = matKeyboardArrowDown;
    iconInfo = matInfo;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataTableSubComponentToggleCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DataTableSubComponentToggleCellComponent, isStandalone: true, selector: "st-data-table-sub-component-toggle-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, canToggleSubComponent: { classPropertyName: "canToggleSubComponent", publicName: "canToggleSubComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, ngImport: i0, template: `
		@if (canToggleSubComponent()) {
			<st-button
				variant="secondary"
				size="xs"
				[circle]="true"
				[ghost]="true"
				class="group"
				(click)="toggled.emit(row().id)"
				[attr.aria-expanded]="isExpanded()"
				title="{{ isExpanded() ? 'Hide Details' : 'Show Details' }}"
			>
				<st-icon
					class="transition-transform duration-300 ease-in-out group-aria-[expanded=false]:rotate-0 group-aria-[expanded=true]:rotate-180"
					[icon]="iconChevronDown"
					size="sm"
				></st-icon>
				<span class="sr-only">{{ isExpanded() ? 'Hide Details' : 'Show Details' }}</span>
			</st-button>
		} @else {
			<!-- Display an informational icon if a sub-component cannot be shown for this row -->
			<st-button
				variant="secondary"
				size="xs"
				[circle]="true"
				[ghost]="true"
				[attr.aria-expanded]="isExpanded()"
				title="{{ isExpanded() ? 'Hide Details' : 'Show Details' }}"
				[disabled]="true"
			>
				<st-icon [icon]="iconInfo" size="sm"></st-icon>
				<span class="sr-only">{{ isExpanded() ? 'Hide Details' : 'Show Details' }}</span>
			</st-button>
		}
	`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "component", type: ButtonComponent, selector: "st-button", inputs: ["variant", "ghost", "outline", "link", "soft", "dash", "wide", "circle", "square", "glass", "block", "loader", "size", "shadow", "focusable", "icon", "iconPosition", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DataTableSubComponentToggleCellComponent, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'st-data-table-sub-component-toggle-cell',
                    imports: [CommonModule, IconComponent, ButtonComponent],
                    template: `
		@if (canToggleSubComponent()) {
			<st-button
				variant="secondary"
				size="xs"
				[circle]="true"
				[ghost]="true"
				class="group"
				(click)="toggled.emit(row().id)"
				[attr.aria-expanded]="isExpanded()"
				title="{{ isExpanded() ? 'Hide Details' : 'Show Details' }}"
			>
				<st-icon
					class="transition-transform duration-300 ease-in-out group-aria-[expanded=false]:rotate-0 group-aria-[expanded=true]:rotate-180"
					[icon]="iconChevronDown"
					size="sm"
				></st-icon>
				<span class="sr-only">{{ isExpanded() ? 'Hide Details' : 'Show Details' }}</span>
			</st-button>
		} @else {
			<!-- Display an informational icon if a sub-component cannot be shown for this row -->
			<st-button
				variant="secondary"
				size="xs"
				[circle]="true"
				[ghost]="true"
				[attr.aria-expanded]="isExpanded()"
				title="{{ isExpanded() ? 'Hide Details' : 'Show Details' }}"
				[disabled]="true"
			>
				<st-icon [icon]="iconInfo" size="sm"></st-icon>
				<span class="sr-only">{{ isExpanded() ? 'Hide Details' : 'Show Details' }}</span>
			</st-button>
		}
	`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DataTableSubComponentToggleCellComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-data-table-sub-component-toggle.mjs.map