import * as i0 from '@angular/core';
import { inject, input, booleanAttribute, computed, signal, viewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { elementRight4 } from '@siemens/element-icons';
import { BlinkService } from '@siemens/element-ng/common';
import { STATUS_ICON_CONFIG, addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiCircleStatusComponent {
    statusIcons = inject(STATUS_ICON_CONFIG);
    /**
     * The status (success, info, warning, danger) to be visualized.
     */
    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
    /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the
     input. The possibility to have custom color is often requested by projects, so we keep it.
     however in order to discourage it's use, we keep it marked deprecated.
     */
    /**
     * A custom color (e.g. `#fefefe`) for exceptional cases.
     * @deprecated use the semantic `status` input instead.
     */
    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
    /**
     * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.
     * Leave undefined for visualizing the status without an icon.
     */
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
    /**
     * Set the size using either regular or small only works when used together with `icon`
     *
     * @defaultValue 'regular'
     */
    size = input('regular', ...(ngDevMode ? [{ debugName: "size" }] : []));
    /**
     * event direction is out
     *
     * @defaultValue false
     */
    eventOut = input(false, { ...(ngDevMode ? { debugName: "eventOut" } : {}), transform: booleanAttribute });
    /**
     * Custom icon class for event out
     */
    eventIcon = input(...(ngDevMode ? [undefined, { debugName: "eventIcon" }] : []));
    /**
     * Whether the status should appear with a pulsing circle around the badge.
     *
     * @defaultValue false
     */
    blink = input(false, { ...(ngDevMode ? { debugName: "blink" } : {}), transform: booleanAttribute });
    /**
     * Blink pulse generator for synchronized blinking with other components
     */
    blinkPulse = input(...(ngDevMode ? [undefined, { debugName: "blinkPulse" }] : []));
    /**
     * Aria label for icon and status combo. Needed for a11y
     */
    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
    backgroundClass = computed(() => this.statusIcon()?.background ?? '', ...(ngDevMode ? [{ debugName: "backgroundClass" }] : []));
    theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel(), ...(ngDevMode ? [{ debugName: "theAriaLabel" }] : []));
    autoLabel = computed(() => {
        const status = this.status();
        const statusName = status && this.statusIcons[status] ? status : 'none';
        const direction = this.eventOut() ? ' out' : '';
        const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';
        return `${iconName.toLocaleLowerCase()}${this.status() && this.icon() ? 'in ' : ''}status ${statusName}${direction}`;
    }, ...(ngDevMode ? [{ debugName: "autoLabel" }] : []));
    statusIcon = computed(() => {
        const status = this.status();
        return status ? this.statusIcons[status] : undefined;
    }, ...(ngDevMode ? [{ debugName: "statusIcon" }] : []));
    blinkOn = signal(false, ...(ngDevMode ? [{ debugName: "blinkOn" }] : []));
    contrastFix = signal(false, ...(ngDevMode ? [{ debugName: "contrastFix" }] : []));
    icons = addIcons({ elementRight4 });
    blinkSubs;
    bg = viewChild.required('bg');
    blinkService = inject(BlinkService);
    ngOnChanges(changes) {
        if (this.blinkService && changes.blink) {
            this.blinkSubs?.unsubscribe();
            if (this.blink()) {
                const pulse = this.blinkPulse() ?? this.blinkService.pulse$;
                this.blinkSubs = pulse.subscribe(onOff => {
                    this.blinkOn.set(onOff);
                });
            }
            else {
                this.blinkOn.set(false);
            }
        }
        if (changes.color || changes.blink) {
            queueMicrotask(() => {
                this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());
            });
        }
    }
    ngOnDestroy() {
        this.blinkSubs?.unsubscribe();
    }
    calculateContrastFix() {
        // see https://www.w3.org/TR/AERT/#color-contrast
        const rgb = getComputedStyle(this.bg().nativeElement)
            .backgroundColor?.match(/\d+/g)
            ?.map(v => +v);
        return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCircleStatusComponent, isStandalone: true, selector: "si-circle-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, eventOut: { classPropertyName: "eventOut", publicName: "eventOut", isSignal: true, isRequired: false, transformFunction: null }, eventIcon: { classPropertyName: "eventIcon", publicName: "eventIcon", isSignal: true, isRequired: false, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, blinkPulse: { classPropertyName: "blinkPulse", publicName: "blinkPulse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "bg", first: true, predicate: ["bg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-7px;inset-inline-end:-11px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\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: SiCircleStatusComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-circle-status', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-7px;inset-inline-end:-11px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"] }]
        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], eventOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventOut", required: false }] }], eventIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventIcon", required: false }] }], blink: [{ type: i0.Input, args: [{ isSignal: true, alias: "blink", required: false }] }], blinkPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "blinkPulse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], bg: [{ type: i0.ViewChild, args: ['bg', { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiCircleStatusModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusModule, imports: [SiCircleStatusComponent], exports: [SiCircleStatusComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusModule, imports: [SiCircleStatusComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiCircleStatusComponent],
                    exports: [SiCircleStatusComponent]
                }]
        }] });

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

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

export { SiCircleStatusComponent, SiCircleStatusModule };
//# sourceMappingURL=siemens-element-ng-circle-status.mjs.map
