@taiga-ui/layout/fesm2022/taiga-ui-layout-components-card.mjs

A package with Taiga UI layout components

import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, Input } from '@angular/core';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';

class TuiCardCollapsedStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardCollapsedStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardCollapsedStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-card-collapsed" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCardCollapsed]{transition-property:clip-path,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-image:radial-gradient(at center,var(--tui-background-neutral-2) 26.5%,transparent 27%) 50% 49% / 0 2rem 2rem / 0 0 2rem}[tuiCardCollapsed]>tui-expand{transition-property:grid-template-rows,padding,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;background:var(--tui-background-neutral-1);border-radius:var(--tui-radius-s);padding:0 1rem;margin:-.25rem 0 calc(-1 * var(--t-space))!important}[tuiCardCollapsed]>tui-expand._expanded{padding:.5rem 1rem;margin:0!important}[tuiCardCollapsed]>tui-expand [tuiTable]{inline-size:100%}[tuiCardCollapsed]>tui-expand [tuiTable] th,[tuiCardCollapsed]>tui-expand [tuiTable] td{background:none;padding-inline-start:0;padding-inline-end:0;border-inline-start:0;border-inline-end:0}[tuiCardCollapsed]>tui-expand [tuiTable] thead th{border:none;block-size:1.75rem}[tuiCardCollapsed]>tui-expand [tuiTable] tr:last-child td{border-block-end:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardCollapsedStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-card-collapsed',
                    }, styles: ["[tuiCardCollapsed]{transition-property:clip-path,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-image:radial-gradient(at center,var(--tui-background-neutral-2) 26.5%,transparent 27%) 50% 49% / 0 2rem 2rem / 0 0 2rem}[tuiCardCollapsed]>tui-expand{transition-property:grid-template-rows,padding,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;background:var(--tui-background-neutral-1);border-radius:var(--tui-radius-s);padding:0 1rem;margin:-.25rem 0 calc(-1 * var(--t-space))!important}[tuiCardCollapsed]>tui-expand._expanded{padding:.5rem 1rem;margin:0!important}[tuiCardCollapsed]>tui-expand [tuiTable]{inline-size:100%}[tuiCardCollapsed]>tui-expand [tuiTable] th,[tuiCardCollapsed]>tui-expand [tuiTable] td{background:none;padding-inline-start:0;padding-inline-end:0;border-inline-start:0;border-inline-end:0}[tuiCardCollapsed]>tui-expand [tuiTable] thead th{border:none;block-size:1.75rem}[tuiCardCollapsed]>tui-expand [tuiTable] tr:last-child td{border-block-end:0}\n"] }]
        }] });
class TuiCardCollapsed {
    constructor() {
        this.nothing = tuiWithStyles(TuiCardCollapsedStyles);
        this.collapsed = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardCollapsed, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardCollapsed, isStandalone: true, selector: "[tuiCardCollapsed]", inputs: { collapsed: ["tuiCardCollapsed", "collapsed"] }, host: { attributes: { "tuiCardCollapsed": "" }, properties: { "style.margin-block-end.rem": "collapsed ? 0.75 : 0", "style.clip-path": "collapsed ? \"inset(-0.75rem)\" : \"inset(0)\"" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardCollapsed, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiCardCollapsed]',
                    host: {
                        tuiCardCollapsed: '',
                        '[style.margin-block-end.rem]': 'collapsed ? 0.75 : 0',
                        '[style.clip-path]': 'collapsed ? "inset(-0.75rem)" : "inset(0)"',
                    },
                }]
        }], propDecorators: { collapsed: [{
                type: Input,
                args: ['tuiCardCollapsed']
            }] } });

class TuiCardLargeStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardLargeStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardLargeStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-card-large" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCardMedium],[tuiCardLarge]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:flex;align-items:flex-start;flex-shrink:0;text-decoration:none;overscroll-behavior:contain;overflow:hidden;background:var(--tui-background-elevation-2)}[tuiCardMedium] [tuiTitle],[tuiCardLarge] [tuiTitle],[tuiCardMedium] [tuiSubtitle],[tuiCardLarge] [tuiSubtitle]{max-inline-size:100%}[tuiCardMedium]>*,[tuiCardLarge]>*{scrollbar-width:none;-ms-overflow-style:none}[tuiCardMedium]>*::-webkit-scrollbar,[tuiCardLarge]>*::-webkit-scrollbar,[tuiCardMedium]>*::-webkit-scrollbar-thumb,[tuiCardLarge]>*::-webkit-scrollbar-thumb{display:none}\n", "[tuiCardLarge][data-space]{--t-space: .75rem;--t-radius: var(--tui-radius-l);--t-comp: -.25rem;--t-padding: .75rem;--t-dim: calc(var(--t-padding) + var(--t-comp));font:var(--tui-font-text-m);padding:var(--t-padding);border-radius:var(--t-radius);box-sizing:border-box}[tuiCardLarge][data-space][data-space=normal]{--t-radius: 1.5rem;--t-padding: 1.5rem;--t-space: 1.5rem}[tuiCardLarge][data-space][data-space=compact]{--t-radius: 1rem;--t-padding: 1.25rem;--t-space: 1.25rem}[tuiCardLarge][data-space]:not([tuiCell],[tuiHeader],[tuiForm]){flex-direction:column;gap:var(--t-space);align-items:stretch}[tuiCardLarge][data-space]:not([tuiCell],[tuiHeader],[tuiForm])>:last-child:not([tuiCell]){margin-block-start:auto}[tuiCardLarge][data-space][tuiHeader]{padding:var(--t-dim) var(--t-dim) var(--t-dim) var(--t-padding)}[tuiCardLarge][data-space][tuiHeader] [tuiLink]:last-child{margin-inline-end:calc(-1 * var(--t-comp))}[tuiCardLarge][data-space]>[tuiHeader]{margin:var(--t-comp) var(--t-comp) calc(1.5 * var(--t-comp)) 0}[tuiCardLarge][data-space]>[tuiHeader] [tuiLink]:last-child{margin-inline-end:calc(-1 * var(--t-comp))}[tuiCardLarge][data-space] [tuiCell]{inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;padding:.5rem;margin:-.5rem -.5rem -.75rem;border-radius:var(--tui-radius-l)}[tuiCardLarge][data-space] [tuiCell]:last-of-type{margin-block-end:-.5rem}[tuiCardLarge][data-space]>[tuiLink]:last-child{display:block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin-block-end:var(--t-comp)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardLargeStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-card-large',
                    }, styles: ["[tuiCardMedium],[tuiCardLarge]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:flex;align-items:flex-start;flex-shrink:0;text-decoration:none;overscroll-behavior:contain;overflow:hidden;background:var(--tui-background-elevation-2)}[tuiCardMedium] [tuiTitle],[tuiCardLarge] [tuiTitle],[tuiCardMedium] [tuiSubtitle],[tuiCardLarge] [tuiSubtitle]{max-inline-size:100%}[tuiCardMedium]>*,[tuiCardLarge]>*{scrollbar-width:none;-ms-overflow-style:none}[tuiCardMedium]>*::-webkit-scrollbar,[tuiCardLarge]>*::-webkit-scrollbar,[tuiCardMedium]>*::-webkit-scrollbar-thumb,[tuiCardLarge]>*::-webkit-scrollbar-thumb{display:none}\n", "[tuiCardLarge][data-space]{--t-space: .75rem;--t-radius: var(--tui-radius-l);--t-comp: -.25rem;--t-padding: .75rem;--t-dim: calc(var(--t-padding) + var(--t-comp));font:var(--tui-font-text-m);padding:var(--t-padding);border-radius:var(--t-radius);box-sizing:border-box}[tuiCardLarge][data-space][data-space=normal]{--t-radius: 1.5rem;--t-padding: 1.5rem;--t-space: 1.5rem}[tuiCardLarge][data-space][data-space=compact]{--t-radius: 1rem;--t-padding: 1.25rem;--t-space: 1.25rem}[tuiCardLarge][data-space]:not([tuiCell],[tuiHeader],[tuiForm]){flex-direction:column;gap:var(--t-space);align-items:stretch}[tuiCardLarge][data-space]:not([tuiCell],[tuiHeader],[tuiForm])>:last-child:not([tuiCell]){margin-block-start:auto}[tuiCardLarge][data-space][tuiHeader]{padding:var(--t-dim) var(--t-dim) var(--t-dim) var(--t-padding)}[tuiCardLarge][data-space][tuiHeader] [tuiLink]:last-child{margin-inline-end:calc(-1 * var(--t-comp))}[tuiCardLarge][data-space]>[tuiHeader]{margin:var(--t-comp) var(--t-comp) calc(1.5 * var(--t-comp)) 0}[tuiCardLarge][data-space]>[tuiHeader] [tuiLink]:last-child{margin-inline-end:calc(-1 * var(--t-comp))}[tuiCardLarge][data-space] [tuiCell]{inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;padding:.5rem;margin:-.5rem -.5rem -.75rem;border-radius:var(--tui-radius-l)}[tuiCardLarge][data-space] [tuiCell]:last-of-type{margin-block-end:-.5rem}[tuiCardLarge][data-space]>[tuiLink]:last-child{display:block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin-block-end:var(--t-comp)}\n"] }]
        }] });
class TuiCardLarge {
    constructor() {
        this.nothing = tuiWithStyles(TuiCardLargeStyles);
        this.space = 'normal';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardLarge, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardLarge, isStandalone: true, selector: "[tuiCardLarge]", inputs: { space: ["tuiCardLarge", "space"] }, host: { attributes: { "tuiCardLarge": "" }, properties: { "attr.data-space": "space || \"normal\"" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardLarge, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiCardLarge]',
                    host: {
                        tuiCardLarge: '',
                        '[attr.data-space]': 'space || "normal"',
                    },
                }]
        }], propDecorators: { space: [{
                type: Input,
                args: ['tuiCardLarge']
            }] } });

class TuiCardMediumStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardMediumStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardMediumStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-card-medium" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCardMedium],[tuiCardLarge]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:flex;align-items:flex-start;flex-shrink:0;text-decoration:none;overscroll-behavior:contain;overflow:hidden;background:var(--tui-background-elevation-2)}[tuiCardMedium] [tuiTitle],[tuiCardLarge] [tuiTitle],[tuiCardMedium] [tuiSubtitle],[tuiCardLarge] [tuiSubtitle]{max-inline-size:100%}[tuiCardMedium]>*,[tuiCardLarge]>*{scrollbar-width:none;-ms-overflow-style:none}[tuiCardMedium]>*::-webkit-scrollbar,[tuiCardLarge]>*::-webkit-scrollbar,[tuiCardMedium]>*::-webkit-scrollbar-thumb,[tuiCardLarge]>*::-webkit-scrollbar-thumb{display:none}\n", "[tuiCardMedium]{inline-size:8.75rem;block-size:8.75rem;flex-direction:column;justify-content:space-between;padding:.75rem;border-radius:var(--tui-radius-l);box-sizing:border-box}[tuiCardMedium][tuiTitle]{padding:.625rem .75rem}[tuiCardMedium] [tuiTitle]{margin:-.125rem 0}[tuiCardMedium] [tuiSubtitle]{color:var(--tui-text-primary)}[tuiCardMedium][tuiTitle],[tuiCardMedium] [tuiTitle]:not([tuiCell] *):not([tuiLabel] *){font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardMediumStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-card-medium',
                    }, styles: ["[tuiCardMedium],[tuiCardLarge]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:flex;align-items:flex-start;flex-shrink:0;text-decoration:none;overscroll-behavior:contain;overflow:hidden;background:var(--tui-background-elevation-2)}[tuiCardMedium] [tuiTitle],[tuiCardLarge] [tuiTitle],[tuiCardMedium] [tuiSubtitle],[tuiCardLarge] [tuiSubtitle]{max-inline-size:100%}[tuiCardMedium]>*,[tuiCardLarge]>*{scrollbar-width:none;-ms-overflow-style:none}[tuiCardMedium]>*::-webkit-scrollbar,[tuiCardLarge]>*::-webkit-scrollbar,[tuiCardMedium]>*::-webkit-scrollbar-thumb,[tuiCardLarge]>*::-webkit-scrollbar-thumb{display:none}\n", "[tuiCardMedium]{inline-size:8.75rem;block-size:8.75rem;flex-direction:column;justify-content:space-between;padding:.75rem;border-radius:var(--tui-radius-l);box-sizing:border-box}[tuiCardMedium][tuiTitle]{padding:.625rem .75rem}[tuiCardMedium] [tuiTitle]{margin:-.125rem 0}[tuiCardMedium] [tuiSubtitle]{color:var(--tui-text-primary)}[tuiCardMedium][tuiTitle],[tuiCardMedium] [tuiTitle]:not([tuiCell] *):not([tuiLabel] *){font-weight:700}\n"] }]
        }] });
class TuiCardMedium {
    constructor() {
        this.nothing = tuiWithStyles(TuiCardMediumStyles);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardMedium, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardMedium, isStandalone: true, selector: "[tuiCardMedium]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardMedium, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiCardMedium]',
                }]
        }] });

class TuiCardRowStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardRowStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardRowStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-card-row" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCardRow]{display:flex;align-items:center;gap:3rem}[tuiCardRow] tui-icon{font-size:1rem}[tuiCardRow] [tuiTitle]{font:var(--tui-font-text-s)}[tuiCardRow] [tuiTitle]>:not([tuiSubtitle]){display:flex;align-items:center;gap:.25rem}[tuiCardRow] [tuiSubtitle]{color:var(--tui-text-secondary);font:var(--tui-font-text-xs)}[tuiCardRow]>[tuiButton],[tuiCardRow]>[tuiIconButton]{margin-inline-start:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardRowStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-card-row',
                    }, styles: ["[tuiCardRow]{display:flex;align-items:center;gap:3rem}[tuiCardRow] tui-icon{font-size:1rem}[tuiCardRow] [tuiTitle]{font:var(--tui-font-text-s)}[tuiCardRow] [tuiTitle]>:not([tuiSubtitle]){display:flex;align-items:center;gap:.25rem}[tuiCardRow] [tuiSubtitle]{color:var(--tui-text-secondary);font:var(--tui-font-text-xs)}[tuiCardRow]>[tuiButton],[tuiCardRow]>[tuiIconButton]{margin-inline-start:auto}\n"] }]
        }] });
class TuiCardRow {
    constructor() {
        this.nothing = tuiWithStyles(TuiCardRowStyles);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiCardRow, isStandalone: true, selector: "[tuiCardRow]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCardRow, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiCardRow]',
                }]
        }] });

const TuiCard = [
    TuiCardLarge,
    TuiCardMedium,
    TuiCardCollapsed,
    TuiCardRow,
];

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

export { TuiCard, TuiCardCollapsed, TuiCardLarge, TuiCardMedium, TuiCardRow };
//# sourceMappingURL=taiga-ui-layout-components-card.mjs.map