import * as i0 from '@angular/core';
import { input, model, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { STATUS_ICON } from '@siemens/element-ng/common';
import { SiIconComponent } from '@siemens/element-ng/icon';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
class SiSummaryWidgetComponent {
    /** Status. Alternatively, use {@link icon} and {@link color}. */
    status = input();
    /** Icon token, see {@link https://element.siemens.io/icons/element}. */
    icon = input();
    /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes}. */
    color = input();
    /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */
    stackedIcon = input();
    /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */
    stackedColor = input();
    /** The label. */
    label = input.required();
    /** Value to display. */
    value = input.required();
    /**
     * Selected state, will change when clicked.
     * @defaultValue false
     */
    selected = model(false);
    /**
     * Readonly state.
     * @defaultValue false
     */
    readonly = input(false, { transform: booleanAttribute });
    /**
     * Disabled state.
     * @defaultValue false
     */
    disabled = input(false, { transform: booleanAttribute });
    interactive = computed(() => !this.disabled() && !this.readonly());
    statusIcon = computed(() => {
        const status = this.status();
        return status
            ? STATUS_ICON[status]
            : {
                icon: this.icon(),
                color: this.color(),
                stacked: this.stackedIcon(),
                stackedColor: this.stackedColor()
            };
    });
    toggleSelected() {
        if (this.interactive()) {
            this.selected.set(!this.selected());
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryWidgetComponent, isStandalone: true, selector: "si-summary-widget", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-h5\">{{ value() | translate }}</div>\n    <div class=\"si-body text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryWidgetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-summary-widget', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-h5\">{{ value() | translate }}</div>\n    <div class=\"si-body text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */

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

export { SiSummaryWidgetComponent };
//# sourceMappingURL=siemens-element-ng-summary-widget.mjs.map
