import * as i0 from '@angular/core';
import { input, computed, Directive, Component, booleanAttribute, model, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { SiContentActionBarComponent } from '@siemens/element-ng/content-action-bar';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiCardBaseDirective {
    /**
     * Card header text.
     */
    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
    /**
     * Card secondary header text.
     */
    subHeading = input(...(ngDevMode ? [undefined, { debugName: "subHeading" }] : []));
    /**
     * Image source for the card.
     */
    imgSrc = input(...(ngDevMode ? [undefined, { debugName: "imgSrc" }] : []));
    /**
     * Alt text for a provided image.
     */
    imgAlt = input(...(ngDevMode ? [undefined, { debugName: "imgAlt" }] : []));
    /**
     * Defines if an image is placed on top or start (left) of the card.
     *
     * @defaultValue 'vertical'
     */
    imgDir = input('vertical', ...(ngDevMode ? [{ debugName: "imgDir" }] : []));
    /**
     * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
     *
     * @defaultValue 'scale-down'
     */
    imgObjectFit = input('scale-down', ...(ngDevMode ? [{ debugName: "imgObjectFit" }] : []));
    /**
     * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
     */
    imgObjectPosition = input(...(ngDevMode ? [undefined, { debugName: "imgObjectPosition" }] : []));
    /**
     * In case the card uses an image and horizontal direction is used we set flex row direction.
     */
    classCardHorizontal = computed(() => !!this.imgSrc() && this.imgDir() === 'horizontal', ...(ngDevMode ? [{ debugName: "classCardHorizontal" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCardBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiCardBaseDirective, isStandalone: true, inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subHeading: { classPropertyName: "subHeading", publicName: "subHeading", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.card-horizontal": "classCardHorizontal()", "style.--si-card-img-object-fit": "imgObjectFit()", "style.--si-card-img-object-position": "imgObjectPosition()" }, classAttribute: "card" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCardBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'card',
                        '[class.card-horizontal]': 'classCardHorizontal()',
                        '[style.--si-card-img-object-fit]': 'imgObjectFit()',
                        '[style.--si-card-img-object-position]': 'imgObjectPosition()'
                    }
                }]
        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subHeading", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }], imgAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgAlt", required: false }] }], imgDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgDir", required: false }] }], imgObjectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectFit", required: false }] }], imgObjectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgObjectPosition", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiCardComponent extends SiCardBaseDirective {
    /**
     * Input list of primary action items. Supports up to **4** actions and omits additional ones.
     *
     * @defaultValue []
     */
    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
    /**
     * Input list of secondary action items.
     *
     * @defaultValue []
     */
    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
    /**
     * A param that will be passed to the `action` in the primary/secondary actions.
     * This allows to re-use the same primary/secondary action arrays across rows
     * in a table.
     */
    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
    /**
     * The view type of the content action bar of the card. Default is `collapsible`
     * for dashboards. However, in some cases you might need to change to `expanded`
     * or `mobile`.
     *
     * @defaultValue 'collapsible'
     */
    actionBarViewType = input('collapsible', ...(ngDevMode ? [{ debugName: "actionBarViewType" }] : []));
    /**
     * Optional setting of html title attribute for the content action bar.
     * Helpful for a11y when only one action is configured in expand mode.
     *
     * @defaultValue ''
     */
    actionBarTitle = input('', ...(ngDevMode ? [{ debugName: "actionBarTitle" }] : []));
    /**
     * Returns `true` when primary or secondary actions are set.
     */
    displayContentActionBar = computed(() => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0, ...(ngDevMode ? [{ debugName: "displayContentActionBar" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCardComponent, isStandalone: true, selector: "si-card", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, actionBarViewType: { classPropertyName: "actionBarViewType", publicName: "actionBarViewType", isSignal: true, isRequired: false, transformFunction: null }, actionBarTitle: { classPropertyName: "actionBarTitle", publicName: "actionBarTitle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div class=\"heading\">\n        @if (heading()) {\n          <div class=\"text-truncate si-h5\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body text-secondary pt-2\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.heading{flex:1 1 auto;min-inline-size:0;overflow:hidden}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-header ::ng-deep .icon[headerIcon]{margin-block:-4px}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-card', imports: [SiContentActionBarComponent, SiTranslatePipe], template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div class=\"heading\">\n        @if (heading()) {\n          <div class=\"text-truncate si-h5\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body text-secondary pt-2\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.heading{flex:1 1 auto;min-inline-size:0;overflow:hidden}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-header ::ng-deep .icon[headerIcon]{margin-block:-4px}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"] }]
        }], propDecorators: { primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], actionBarViewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionBarViewType", required: false }] }], actionBarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionBarTitle", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/**
 * An action card component that extends the base card component with option to
 * either select the whole card or trigger an action.
 *
 * Usage:
 * as selectable card:
 * `<button si-card selectable type="button" [(selected)]="isSelected">...</button>`
 *
 * or as an action card:
 * `<button si-card type="button" (click)="doSomeAction()">...</button>`
 */
class SiActionCardComponent extends SiCardBaseDirective {
    static idCounter = 0;
    id = `__si-action-card-${SiActionCardComponent.idCounter++}`;
    /**
     * Makes whole card selectable.
     *
     * @defaultValue false
     */
    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : {}), transform: booleanAttribute });
    /**
     * Indicates if the card is selected.
     * Ignored when `selectable` is not set to `true`.
     *
     * @defaultValue false
     * */
    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
    headingId = `${this.id}-heading`;
    subHeadingId = `${this.id}-subHeading`;
    contentId = `${this.id}-content`;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiActionCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiActionCardComponent, isStandalone: true, selector: "button[si-action-card]", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { listeners: { "click": "selectable() ? selected.set(!selected()) : null" }, properties: { "attr.aria-pressed": "selectable() ? (selected() ? \"true\" : \"false\") : undefined", "attr.aria-labelledby": "heading() ? headingId : undefined", "attr.aria-describedby": "subHeading() ? `${subHeadingId} ${contentId}` : contentId", "class.selected": "selectable() && selected()" }, classAttribute: "action-card" }, usesInheritance: true, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div class=\"heading\">\n        @if (heading()) {\n          <div class=\"text-truncate si-h5\" [id]=\"headingId\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body text-secondary pt-2\" [id]=\"subHeadingId\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n    </div>\n  }\n  <div class=\"d-contents\" [id]=\"contentId\">\n    <ng-content #cardBody select=\"[body]\" />\n    <ng-content #cardFooter select=\"[footer]\" />\n  </div>\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.heading{flex:1 1 auto;min-inline-size:0;overflow:hidden}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-header ::ng-deep .icon[headerIcon]{margin-block:-4px}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\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: SiActionCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'button[si-action-card]', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'action-card',
                        '[attr.aria-pressed]': 'selectable() ? (selected() ? "true" : "false") : undefined',
                        '[attr.aria-labelledby]': 'heading() ? headingId : undefined',
                        '[attr.aria-describedby]': 'subHeading() ? `${subHeadingId} ${contentId}` : contentId',
                        '[class.selected]': 'selectable() && selected()',
                        '(click)': 'selectable() ? selected.set(!selected()) : null'
                    }, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div class=\"heading\">\n        @if (heading()) {\n          <div class=\"text-truncate si-h5\" [id]=\"headingId\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body text-secondary pt-2\" [id]=\"subHeadingId\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n    </div>\n  }\n  <div class=\"d-contents\" [id]=\"contentId\">\n    <ng-content #cardBody select=\"[body]\" />\n    <ng-content #cardFooter select=\"[footer]\" />\n  </div>\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.heading{flex:1 1 auto;min-inline-size:0;overflow:hidden}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-header ::ng-deep .icon[headerIcon]{margin-block:-4px}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"] }]
        }], propDecorators: { selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }] } });

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

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

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

export { SiActionCardComponent, SiCardComponent, SiCardModule };
//# sourceMappingURL=siemens-element-ng-card.mjs.map
