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

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiSummaryChipComponent {
    statusIcons = inject(STATUS_ICON_CONFIG);
    /** Status. Alternatively, use {@link icon} and {@link color}. */
    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
    /** Icon token, see {@link https://element.siemens.io/icons/element}. */
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
    /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */
    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
    /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */
    stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
    /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */
    stackedColor = input(...(ngDevMode ? [undefined, { debugName: "stackedColor" }] : []));
    /** The label. */
    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
    /** Value to display. */
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    /**
     * Selected state, will change when clicked.
     * @defaultValue false
     */
    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
    /**
     * Disabled state.
     * @defaultValue false
     */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
    /**
     * Whether to hide the label. Only takes effect when both {@link icon} and {@link value} are provided. The label will still be used for screen-readers.
     * @defaultValue false
     */
    hideLabel = input(false, { ...(ngDevMode ? { debugName: "hideLabel" } : {}), transform: booleanAttribute });
    statusIcon = computed(() => {
        const status = this.status();
        return status
            ? this.statusIcons[status]
            : {
                icon: this.icon(),
                color: this.color(),
                stacked: this.stackedIcon(),
                stackedColor: this.stackedColor()
            };
    }, ...(ngDevMode ? [{ debugName: "statusIcon" }] : []));
    toggleSelected() {
        if (!this.disabled()) {
            this.selected.set(!this.selected());
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSummaryChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", 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: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\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  @let value = this.value();\n  <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n    {{ label() | translate }}\n  </div>\n  @if (value) {\n    <div class=\"si-h5\">{{ value | translate }}</div>\n  }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):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: "21.0.8", ngImport: i0, type: SiSummaryChipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-summary-chip', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\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  @let value = this.value();\n  <div class=\"si-body\" [class.visually-hidden]=\"hideLabel() && value && actualIcon.icon\">\n    {{ label() | translate }}\n  </div>\n  @if (value) {\n    <div class=\"si-h5\">{{ value | translate }}</div>\n  }\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], stackedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIcon", required: false }] }], stackedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }] } });

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

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

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