import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component, inject, DestroyRef, Injectable, InjectionToken, NgModule } from '@angular/core';
import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
import { SiThemeService } from '@siemens/element-ng/theme';
import { elementTriangleFilled, elementStateTick, elementStateQuestionMark, elementStateProgress, elementStatePause, elementStateInfo, elementStateExclamationMark, elementSquareFilled, elementSquare45Filled, elementOctagonFilled, elementCircleFilled } from '@siemens/element-icons';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * @deprecated This component should no longer be used.
 * Use the {@link SiIconComponent} instead.
 * Existing usages can be replaced as follows:
 *
 * ```html
 * <!-- before -->
 * <si-icon icon="element-user" color="text-danger" />
 * <!-- after -->
 * <si-icon icon="element-user" class="icon text-danger" />
 * ```
 *
 * **Important:** Previously, the class `icon` was automatically applied. Unless not needed,
 * it must now be applied manually.
 * The icon class scales up the icon compared to its surrounding text.
 *
 * Stacked icons need to be constructed in HTML directly.
 * If applicable, the `si-status-icon` component should be used instead.
 *
 * ```html
 * <!-- before -->
 * <si-icon
 *   icon="element-circle-filled"
 *   color="status-success"
 *   stackedIcon="element-state-tick"
 *   stackedColor="status-success-contrast"
 *   alt="Success"
 * />
 *
 * <!-- after -->
 * <div class="icon-stack icon" aria-label="Success">
 *   <si-icon icon="element-circle-filled" class="status-success" />
 *   <si-icon icon="element-state-tick" class="status-success-contrast" />
 * </div>
 * ```
 */
class SiIconLegacyComponent {
    /** Icon token, see {@link https://element.siemens.io/icons/element} */
    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
    /** Color class, see {@link https://element.siemens.io/fundamentals/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" }] : []));
    /** Alternative name or translation key for icon. Used for A11y. */
    alt = input(...(ngDevMode ? [undefined, { debugName: "alt" }] : []));
    /**
     * Text-size class for icon size, see {@link https://element.siemens.io/fundamentals/typography/#type-styles-classes}
     *
     * @defaultValue 'icon'
     */
    size = input('icon', ...(ngDevMode ? [{ debugName: "size" }] : []));
    altText = computed(() => {
        return this.alt() ?? this.icon()?.replace('element-', '').split('-').join(' ') ?? '';
    }, ...(ngDevMode ? [{ debugName: "altText" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiIconLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiIconLegacyComponent, isStandalone: true, selector: "si-icon-legacy", inputs: { 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 }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  [class]=\"`d-inline-block position-relative ${icon() ?? ''} ${color() ?? ''} ${size()}`\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n>\n  @if (stackedIcon()) {\n    <i\n      aria-hidden=\"true\"\n      [class]=\"`position-absolute start-0 ${stackedIcon()} ${stackedColor() ?? ''}`\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiIconLegacyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-icon-legacy', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [class]=\"`d-inline-block position-relative ${icon() ?? ''} ${color() ?? ''} ${size()}`\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n>\n  @if (stackedIcon()) {\n    <i\n      aria-hidden=\"true\"\n      [class]=\"`position-absolute start-0 ${stackedIcon()} ${stackedColor() ?? ''}`\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"] }]
        }], propDecorators: { 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 }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const registeredIcons = new Map();
/**
 * Adds the provided icons.
 * It requires an Angular InjectionContent.
 * The Icons are available until the component is destroyed.
 * Call this function only in the component which actually uses the icon.
 * Importing all icons on the global level is discouraged.
 *
 * When using a string instead of the object to use an icon,
 * use the kebab-case version of the icon name.
 *
 * @example
 * ```ts
 * import { elementIcon } from '@siemens/element-icons';
 * import { addIcons } from '@siemens/element-ng/icon';
 *
 * @Component({`<si-icon [icon]="icons.elementIcon"`})
 * class MyComponent {
 *   icons = addIcons({ elementIcon })
 * }
 * ```
 */
const addIcons = (icons) => {
    const iconMap = {};
    for (const [key, content] of Object.entries(icons)) {
        const registeredIcon = registeredIcons.get(key) ?? {
            content,
            referenceCount: 0
        };
        registeredIcon.referenceCount++;
        registeredIcons.set(key, registeredIcon);
        iconMap[key] = key;
    }
    // Delete registered Icons after Component is destroyed to optimize memory usage.
    // WeakMap must not be used, as the Icon can only be removed on component destruction.
    // When using a WeakMap it would also get destroyed if it is not referenced, but the component may use it later again.
    inject(DestroyRef).onDestroy(() => {
        for (const key of Object.keys(icons)) {
            const registeredIcon = registeredIcons.get(key);
            if (registeredIcon.referenceCount === 1) {
                registeredIcons.delete(key);
            }
            else {
                registeredIcon.referenceCount--;
            }
        }
    });
    return iconMap;
};
const getIcon = (key) => registeredIcons.get(key)?.content;
class IconService {
    themeService = inject(SiThemeService);
    getIcon(name) {
        const camelCaseName = this.kebabToCamelCase(name);
        return this.themeService.themeIcons()[camelCaseName] ?? getIcon(camelCaseName);
    }
    kebabToCamelCase(str) {
        return str?.replace(/-./g, match => match.charAt(1).toUpperCase());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const ICON_CONFIG = new InjectionToken('ICON_CONFIG', {
    providedIn: 'root',
    factory: () => ({ disableSvgIcons: false })
});
/**
 * Configure how Element handles icons. Provide only once in your global configuration.
 */
const provideIconConfig = (config) => ({
    provide: ICON_CONFIG,
    useValue: config
});
/**
 * Component to render a font or SVG icon depending on the configuration.
 * If no SVG icon is found, the component will fall back to render the icon-font.
 * In that case, an application must ensure that the icon font is loaded.
 * This component will only attach the respective class.
 *
 * The content of this component is hidden in the a11y tree.
 * If needed, the consumer must set proper labels.
 */
class SiIconComponent {
    /**
     * Define which icon should be rendered.
     * Provide using:
     * - value of the icon map provided by `addIcons`
     * - (not recommended): plain string in kebab-case or camelCase
     *
     * @example
     * ```ts
     * import { elementUser } from '@siemens/element-icons';
     *
     * @Component({template: `
     *   <si-icon [icon]="icons.elementUser" />
     *   <si-icon icon="element-user" />
     *   <si-icon icon="elementUser" />
     *
     * `})
     * class MyComponent {
     *   icons = addIcons(elementUser);
     * }
     * ```
     */
    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
    config = inject(ICON_CONFIG);
    iconService = inject(IconService);
    svgIcon = computed(() => {
        const icon = this.config.disableSvgIcons ? undefined : this.iconService.getIcon(this.icon());
        if (!icon) {
            return undefined;
        }
        return `url("${icon.replace(/"/g, '\\"')}")`;
    }, ...(ngDevMode ? [{ debugName: "svgIcon" }] : []));
    /** Icon class, which is ensured to be kebab-case. */
    fontIcon = computed(() => this.svgIcon() ? undefined : this.camelToKebabCase(this.icon()), ...(ngDevMode ? [{ debugName: "fontIcon" }] : []));
    isKebabCase(str) {
        return /^[a-z0-9]+(-[a-z0-9]+)*$/.test(str);
    }
    /**
     * Converts a camelCase string to kebab-case.
     * If the string is already in kebab-case, it returns it unchanged.
     *
     * Note: This conversion has limitations with mixed alphanumeric cases.
     * Complex number-letter combinations may not convert as expected.
     */
    camelToKebabCase(str) {
        return this.isKebabCase(str)
            ? str
            : str
                ?.replace(/([a-z])([A-Z0-9])/g, '$1-$2')
                .replace(/([0-9])([A-Z])/g, '$1-$2')
                .toLowerCase();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiIconComponent, isStandalone: true, selector: "si-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-icon": "icon()", "style.--svg-element-icon": "svgIcon()" } }, ngImport: i0, template: ` <div aria-hidden="true" [class]="svgIcon() ? 'svg-element-icon' : fontIcon()"></div>`, isInline: true, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}.svg-element-icon{background-color:currentColor;-webkit-mask-image:var(--svg-element-icon);mask-image:var(--svg-element-icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;block-size:1em;inline-size:1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-icon', template: ` <div aria-hidden="true" [class]="svgIcon() ? 'svg-element-icon' : fontIcon()"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.data-icon]': 'icon()',
                        '[style.--svg-element-icon]': 'svgIcon()'
                    }, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}.svg-element-icon{background-color:currentColor;-webkit-mask-image:var(--svg-element-icon);mask-image:var(--svg-element-icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;block-size:1em;inline-size:1em}\n"] }]
        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });

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

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * The status icon configuration.
 *
 * @experimental
 */
const STATUS_ICON_CONFIG = new InjectionToken('STATUS_ICON_CONFIG', {
    providedIn: 'root',
    factory: () => {
        addIcons({
            elementCircleFilled,
            elementOctagonFilled,
            elementSquare45Filled,
            elementSquareFilled,
            elementStateExclamationMark,
            elementStateInfo,
            elementStatePause,
            elementStateProgress,
            elementStateQuestionMark,
            elementStateTick,
            elementTriangleFilled
        });
        return {
            success: {
                icon: 'elementCircleFilled',
                color: 'status-success',
                stacked: 'elementStateTick',
                stackedColor: 'status-success-contrast',
                background: 'bg-base-success',
                severity: 5,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.SUCCESS:Success`)
            },
            info: {
                icon: 'elementSquareFilled',
                color: 'status-info',
                stacked: 'elementStateInfo',
                stackedColor: 'status-info-contrast',
                background: 'bg-base-info',
                severity: 4,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.INFO:Info`)
            },
            caution: {
                icon: 'elementSquare45Filled',
                color: 'status-caution',
                stacked: 'elementStateExclamationMark',
                stackedColor: 'status-caution-contrast',
                background: 'bg-base-caution',
                severity: 3,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.CAUTION:Caution`)
            },
            warning: {
                icon: 'elementTriangleFilled',
                color: 'status-warning',
                stacked: 'elementStateExclamationMark',
                stackedColor: 'status-warning-contrast',
                background: 'bg-base-warning',
                severity: 2,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.WARNING:Warning`)
            },
            danger: {
                icon: 'elementCircleFilled',
                color: 'status-danger',
                stacked: 'elementStateExclamationMark',
                stackedColor: 'status-danger-contrast',
                background: 'bg-base-danger',
                severity: 1,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.DANGER:Danger`)
            },
            critical: {
                icon: 'elementOctagonFilled',
                color: 'status-critical',
                stacked: 'elementStateExclamationMark',
                stackedColor: 'status-critical-contrast',
                background: 'bg-base-critical',
                severity: 0,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.CRITICAL:Critical`)
            },
            progress: {
                icon: 'elementCircleFilled',
                color: 'status-info',
                stacked: 'elementStateProgress',
                stackedColor: 'status-info-contrast',
                background: 'bg-base-info',
                severity: 7,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.PROGRESS:Progress`)
            },
            pending: {
                icon: 'elementCircleFilled',
                color: 'status-caution',
                stacked: 'elementStatePause',
                stackedColor: 'status-caution-contrast',
                background: 'bg-base-caution',
                severity: 6,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.PENDING:Pending`)
            },
            unknown: {
                icon: 'elementCircleFilled',
                color: 'status-neutral',
                stacked: 'elementStateQuestionMark',
                stackedColor: 'text-body',
                background: 'bg-base-0',
                severity: 8,
                ariaLabel: t(() => $localize `:@@SI_ICON_STATUS.UNKNOWN:Unknown`)
            }
        };
    }
});

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiStatusIconComponent {
    statusIcons = inject(STATUS_ICON_CONFIG);
    status = input.required(...(ngDevMode ? [{ debugName: "status" }] : []));
    statusIcon = computed(() => this.statusIcons[this.status()], ...(ngDevMode ? [{ debugName: "statusIcon" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiStatusIconComponent, isStandalone: true, selector: "si-status-icon", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "icon-stack" }, ngImport: i0, template: `
    @let iconValue = statusIcon();
    @if (iconValue) {
      <si-icon [class]="iconValue.color" [icon]="iconValue.icon" />
      <si-icon [class]="iconValue.stackedColor" [icon]="iconValue.stacked" />
      <span class="visually-hidden">{{ iconValue.ariaLabel | translate }}</span>
    }
  `, isInline: true, 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: SiStatusIconComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'si-status-icon',
                    imports: [SiIconComponent, SiTranslatePipe],
                    template: `
    @let iconValue = statusIcon();
    @if (iconValue) {
      <si-icon [class]="iconValue.color" [icon]="iconValue.icon" />
      <si-icon [class]="iconValue.stackedColor" [icon]="iconValue.stacked" />
      <span class="visually-hidden">{{ iconValue.ariaLabel | translate }}</span>
    }
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: { class: 'icon-stack' }
                }]
        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const elementCheckedImageShape = 'data:image/svg+xml;base64,PHN2ZyBpZD0iSWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPHRpdGxlPm9rPC90aXRsZT4KICA8cGF0aCBkPSJNMzc5LjUxLDE1Ni43NmwtMTczLDE3My03NC03NGExMiwxMiwwLDEsMC0xNywxN2w4Mi41LDgyLjVhMTIsMTIsMCwwLDAsMTcsMGwxODEuNS0xODEuNWExMiwxMiwwLDAsMC0xNy0xN1oiLz4KPC9zdmc+Cg==';

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

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

export { STATUS_ICON_CONFIG, SiIconComponent, SiIconLegacyComponent, SiIconModule, SiStatusIconComponent, addIcons, elementCheckedImageShape, provideIconConfig };
//# sourceMappingURL=siemens-element-ng-icon.mjs.map
