import { CdkMenuTrigger } from '@angular/cdk/menu';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, booleanAttribute, inject, Component } from '@angular/core';
import * as i1 from '@angular/router';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { elementOptionsVertical } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * This component represents a single notification that can be used within notification
 * centers, popovers, or other containers. It supports various action types including
 * router links, standard links, action buttons, and menus.
 */
class SiNotificationItemComponent {
    icons = addIcons({ elementOptionsVertical });
    /**
     * The timestamp of the notification item.
     */
    timeStamp = input.required(...(ngDevMode ? [{ debugName: "timeStamp" }] : []));
    /**
     * The heading of the notification item.
     */
    heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
    /**
     * Optional translatable description.
     */
    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
    /**
     * Unread messages are emphasized with a bolder font.
     *
     * @defaultValue false
     */
    unread = input(false, { ...(ngDevMode ? { debugName: "unread" } : {}), transform: booleanAttribute });
    /**
     * Link to the source or relevant information of the notification,
     * which triggers when clicking on the notification item text area.
     */
    itemLink = input(...(ngDevMode ? [undefined, { debugName: "itemLink" }] : []));
    /**
     * Actions that are displayed below the text of the notification.
     */
    quickActions = input(...(ngDevMode ? [undefined, { debugName: "quickActions" }] : []));
    /**
     * Action that is displayed on the right side of the notification.
     */
    primaryAction = input(...(ngDevMode ? [undefined, { debugName: "primaryAction" }] : []));
    activatedRoute = inject(ActivatedRoute, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNotificationItemComponent, isStandalone: true, selector: "si-notification-item", inputs: { timeStamp: { classPropertyName: "timeStamp", publicName: "timeStamp", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, itemLink: { classPropertyName: "itemLink", publicName: "itemLink", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNotificationItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-notification-item', imports: [
                        SiTranslatePipe,
                        RouterModule,
                        CommonModule,
                        SiMenuFactoryComponent,
                        CdkMenuTrigger,
                        SiIconComponent
                    ], template: "<div class=\"notification-item px-6 py-5\">\n  <div class=\"notification-item-indicator\">\n    <div>\n      @if (unread()) {\n        <span class=\"dot\"></span>\n      }\n      <ng-content select=\"si-avatar,si-circle-status,si-icon,si-status-icon\" />\n    </div>\n  </div>\n\n  <div class=\"notification-item-content\">\n    @let itemLinkValue = itemLink();\n    @if (itemLinkValue) {\n      @switch (itemLinkValue.type) {\n        @case ('link') {\n          <a\n            [href]=\"itemLinkValue.href\"\n            [target]=\"itemLinkValue.target\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n        @case ('router-link') {\n          <a\n            [routerLink]=\"itemLinkValue.routerLink\"\n            [queryParams]=\"itemLinkValue.extras?.queryParams\"\n            [queryParamsHandling]=\"itemLinkValue.extras?.queryParamsHandling\"\n            [fragment]=\"itemLinkValue.extras?.fragment\"\n            [state]=\"itemLinkValue.extras?.state\"\n            [relativeTo]=\"itemLinkValue.extras?.relativeTo ?? activatedRoute\"\n            [preserveFragment]=\"itemLinkValue.extras?.preserveFragment\"\n            [skipLocationChange]=\"itemLinkValue.extras?.skipLocationChange\"\n            [replaceUrl]=\"itemLinkValue.extras?.replaceUrl\"\n            [attr.aria-label]=\"heading() + ' link'\"\n          >\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </a>\n        }\n      }\n    } @else {\n      <ng-container *ngTemplateOutlet=\"content\" />\n    }\n  </div>\n\n  @let primaryActionValue = primaryAction();\n  @if (primaryActionValue) {\n    <div class=\"notification-item-primary-action\">\n      @if (primaryActionValue.type === 'menu') {\n        <ng-container *ngTemplateOutlet=\"menu; context: { $implicit: primaryActionValue }\" />\n      } @else if (primaryActionValue.type === 'action-button') {\n        <button\n          type=\"button\"\n          class=\"btn btn-tertiary\"\n          (click)=\"primaryActionValue.action(primaryActionValue)\"\n          >{{ primaryActionValue.label | translate }}</button\n        >\n      } @else {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: primaryActionValue }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-primary-action\">\n      <ng-content select=\"[action]\" />\n    </div>\n  }\n\n  @let quickActionsValue = quickActions();\n  @if (quickActionsValue) {\n    <div class=\"notification-item-quick-actions\">\n      @for (quickAction of quickActionsValue; track $index) {\n        <ng-container *ngTemplateOutlet=\"action; context: { $implicit: quickAction }\" />\n      }\n    </div>\n  } @else {\n    <div class=\"notification-item-quick-actions\">\n      <ng-content select=\"[quick-actions]\" />\n    </div>\n  }\n</div>\n\n<ng-template #action let-action>\n  @switch (action.type) {\n    @case ('action-circle-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('action-icon-button') {\n      <ng-container *ngTemplateOutlet=\"actionButton; context: { $implicit: action }\" />\n    }\n    @case ('router-link') {\n      <ng-container *ngTemplateOutlet=\"routerLink; context: { $implicit: action }\" />\n    }\n    @case ('link') {\n      <ng-container *ngTemplateOutlet=\"link; context: { $implicit: action }\" />\n    }\n  }\n</ng-template>\n\n<ng-template #content>\n  <div class=\"d-flex flex-column gap-3 text-body\">\n    <span class=\"si-body text-secondary\">{{ timeStamp() | translate }}</span>\n    <span [class.si-h5-bold]=\"unread()\" [class.si-h5]=\"!unread()\">{{ heading() | translate }}</span>\n    @if (description()) {\n      <span class=\"si-body\">{{ description() | translate }}</span>\n    }\n    <div class=\"si-body\">\n      <ng-content select=\"[description]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #actionButton let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"action.ariaLabel\"\n    (click)=\"action.action(action)\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </button>\n</ng-template>\n\n<ng-template #routerLink let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [routerLink]=\"action.routerLink\"\n    [queryParams]=\"action.extras?.queryParams\"\n    [queryParamsHandling]=\"action.extras?.queryParamsHandling\"\n    [fragment]=\"action.extras?.fragment\"\n    [state]=\"action.extras?.state\"\n    [relativeTo]=\"action.extras?.relativeTo ?? activatedRoute\"\n    [preserveFragment]=\"action.extras?.preserveFragment\"\n    [skipLocationChange]=\"action.extras?.skipLocationChange\"\n    [replaceUrl]=\"action.extras?.replaceUrl\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #link let-action>\n  <a\n    class=\"btn btn-ghost p-2 btn-icon\"\n    [href]=\"action.href\"\n    [target]=\"action.target\"\n    [attr.aria-label]=\"action.ariaLabel\"\n  >\n    <si-icon class=\"icon\" [icon]=\"action.icon\" />\n  </a>\n</ng-template>\n\n<ng-template #menu let-action>\n  <button\n    type=\"button\"\n    class=\"btn btn-ghost btn-icon\"\n    [attr.aria-label]=\"heading() + ' dropdown'\"\n    [cdkMenuTriggerFor]=\"actionMenu\"\n  >\n    <si-icon [icon]=\"icons.elementOptionsVertical\" />\n  </button>\n\n  <ng-template #actionMenu>\n    <si-menu-factory [items]=\"action.menuItems\" />\n  </ng-template>\n</ng-template>\n", styles: [":host div:empty{display:none!important}:host div:has(.notification-item-content a):hover{background-color:var(--element-base-1-hover)}:host .notification-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}:host .notification-item a{text-decoration:none}:host .notification-item a:focus-visible div{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host .notification-item .notification-item-indicator{grid-column:1;grid-row:1}:host .notification-item .notification-item-indicator div{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}:host .notification-item .notification-item-content{grid-column:2;grid-row:1;flex-grow:1}:host .notification-item .notification-item-primary-action{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;margin-inline-start:8px}:host .notification-item .notification-item-quick-actions{grid-column:2;grid-row:2;display:flex;gap:8px;margin-block-start:8px}:host .dot{display:block;position:absolute;block-size:6px;inline-size:6px;border-radius:50%;background-color:var(--element-ui-1);inset-inline-start:-10px}:host .notification-item-indicator:has(si-avatar){margin-inline-end:16px}:host .notification-item-indicator:has(si-circle-status){margin-inline-end:4px}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status)):has(si-icon){margin-inline-end:8px;margin-block-start:calc(.875rem * 1.1428571429 + 4px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)){inline-size:0;margin-block-start:calc(.875rem * 1.1428571429 + 6px)}:host .notification-item-indicator:not(:has(si-avatar,si-circle-status,si-icon)) div{block-size:1rem}\n"] }]
        }], propDecorators: { timeStamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeStamp", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], itemLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLink", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }] } });

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

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

export { SiNotificationItemComponent };
//# sourceMappingURL=siemens-element-ng-notification-item.mjs.map
