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

A package with Taiga UI layout components

import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, Directive, Input } from '@angular/core';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';

const [TUI_CELL_OPTIONS, tuiCellOptionsProvider] = tuiCreateOptions({ height: 'normal', size: 'l' });

class TuiCellStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCellStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCellStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-cell" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>*:not(:first-child),[tuiCell][data-size=s]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=s]>tui-avatar,[tuiCell][data-size=s]>tui-avatar-stack tui-avatar,[tuiCell][data-size=s]>[tuiAccessories] tui-avatar,[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>*:not(:first-child),[tuiCell][data-size=m]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=m]>tui-avatar,[tuiCell][data-size=m]>tui-avatar-stack tui-avatar,[tuiCell][data-size=m]>[tuiAccessories] tui-avatar,[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l)}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>*:not(:first-child),[tuiCell][data-size=l]>[tuiAccessories]>*:not(:first-child){margin-inline-start:1rem}[tuiCell][data-size=l]>tui-avatar,[tuiCell][data-size=l]>tui-avatar-stack tui-avatar,[tuiCell][data-size=l]>[tuiAccessories] tui-avatar,[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]),button[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]),label[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:not([tuiSurface]):hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCellStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-cell',
                    }, styles: ["[tuiCell]{--t-padding: .125rem 1rem;--t-radius: var(--tui-radius-s);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;box-sizing:content-box;isolation:isolate;color:var(--tui-text-primary);padding:var(--t-padding);min-block-size:var(--t-height);border-radius:var(--t-radius)}[tuiCell]:disabled,[tuiCell][data-state=disabled]{opacity:initial;pointer-events:none}[tuiCell]:disabled>*:not([tuiTooltip]),[tuiCell][data-state=disabled]>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell]:has(input:disabled){opacity:initial;pointer-events:none}[tuiCell]:has(input:disabled)>*:not([tuiTooltip]){opacity:var(--tui-disabled-opacity)}[tuiCell] [tuiAccessories]{position:relative;display:flex;max-block-size:var(--t-height);align-items:center;align-self:stretch}[tuiCell] [tuiCellActions][tuiCellActions]{position:absolute;right:0;z-index:1;padding-inline-end:inherit;--t-group-mask: none;--t-group-mask-end: none;--t-group-mask-start: none}[tuiCell] [tuiCellActions][tuiCellActions]~*{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}[tuiCell] [tuiCellActions][tuiCellActions] button,[tuiCell] [tuiCellActions][tuiCellActions] a{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}[tuiCell] [tuiCellActions][tuiCellActions] button:focus-visible,[tuiCell] [tuiCellActions][tuiCellActions] a:focus-visible{opacity:1}[tuiCell] [tuiSubtitle]{display:flex;align-items:center;gap:.25rem;color:var(--tui-text-secondary)}[tuiCell] [tuiTitle]{flex-shrink:7;margin-inline-end:auto;align-items:normal;text-align:start}[tuiCell] [tuiTitle]~[tuiTitle]{flex-shrink:3;margin-inline-end:0;text-align:end;align-items:flex-end}[tuiCell] [tuiTitle]~[tuiTitle][tuiFade]{align-items:flex-start}[tuiCell] tui-badge-notification[data-size=xs]{position:absolute;top:50%;transform:translateY(-50%);left:-.625rem}[tuiCell][data-size=s]{--t-height: calc(var(--tui-height-s) - .125rem);--t-padding: .1875rem 1rem}[tuiCell][data-size=s][data-height=spacious]{--t-padding: .4375rem 1rem}[tuiCell][data-size=s][data-height=compact]{--t-height: calc(var(--tui-height-s) - .25rem);--t-padding: 0 1rem}[tuiCell][data-size=s] [tuiTitle]{max-block-size:100%;font:var(--tui-font-text-ui-s);gap:0}[tuiCell][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=s]>*:not(:first-child),[tuiCell][data-size=s]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=s]>tui-avatar,[tuiCell][data-size=s]>tui-avatar-stack tui-avatar,[tuiCell][data-size=s]>[tuiAccessories] tui-avatar,[tuiCell][data-size=s]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 1.5rem;font:var(--tui-font-text-m);font-size:.5625rem}[tuiCell][data-size=m]{--t-height: calc(var(--tui-height-m) - .75rem);--t-padding: .375rem 1rem}[tuiCell][data-size=m][data-height=spacious]{--t-padding: 1rem}[tuiCell][data-size=m][data-height=compact]{--t-height: calc(var(--tui-height-m) - .5rem);--t-padding: 0 1rem}[tuiCell][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-s);gap:.125rem}[tuiCell][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiCell][data-size=m]>*:not(:first-child),[tuiCell][data-size=m]>[tuiAccessories]>*:not(:first-child){margin-inline-start:.5rem}[tuiCell][data-size=m]>tui-avatar,[tuiCell][data-size=m]>tui-avatar-stack tui-avatar,[tuiCell][data-size=m]>[tuiAccessories] tui-avatar,[tuiCell][data-size=m]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 2rem;align-self:flex-start}[tuiCell][data-size=l]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: .5rem 1rem;--t-radius: var(--tui-radius-l)}[tuiCell][data-size=l][data-height=spacious]{--t-padding: 1.25rem 1rem}[tuiCell][data-size=l][data-height=compact]{--t-height: calc(var(--tui-height-l) - 1rem);--t-padding: 0 1rem}[tuiCell][data-size=l]>*:not(:first-child),[tuiCell][data-size=l]>[tuiAccessories]>*:not(:first-child){margin-inline-start:1rem}[tuiCell][data-size=l]>tui-avatar,[tuiCell][data-size=l]>tui-avatar-stack tui-avatar,[tuiCell][data-size=l]>[tuiAccessories] tui-avatar,[tuiCell][data-size=l]>[tuiAccessories] tui-avatar-stack tui-avatar{--t-size: 2.5rem;font:var(--tui-font-text-m);font-weight:700;align-self:flex-start}[tuiCell]:hover [tuiCellActions]~*{opacity:0}[tuiCell]:hover [tuiCellActions] button,[tuiCell]:hover [tuiCellActions] a,[tuiCell]:hover [tuiCellActions] label{opacity:1}[tuiCell]:focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.125rem}[tuiOption] [tuiCell],tui-primitive-textfield [tuiCell],tui-textfield [tuiCell]{padding:0;white-space:nowrap;overflow:hidden;border-radius:0}@media (hover: hover) and (pointer: fine){a[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]),button[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]),label[tuiCell]:not([tuiSurface]):hover:not(:disabled,[data-state=disabled]){background:var(--tui-background-neutral-1);cursor:pointer}label[tuiCell]:not([tuiSurface]):hover:not(:has(input:disabled)){background:var(--tui-background-neutral-1);cursor:pointer}}\n"] }]
        }] });
class TuiCell {
    constructor() {
        this.options = inject(TUI_CELL_OPTIONS);
        this.nothing = tuiWithStyles(TuiCellStyles);
        this.size = this.options.size;
        this.height = this.options.height;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiCell, isStandalone: true, selector: "[tuiCell]:not(ng-template)", inputs: { size: ["tuiCell", "size"], height: ["tuiCellHeight", "height"] }, host: { attributes: { "tuiCell": "" }, properties: { "attr.data-size": "size || options.size", "attr.data-height": "height" } }, providers: [
            tuiAvatarOptionsProvider({ size: 'm' }),
            tuiButtonOptionsProvider({ size: 's' }),
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCell, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiCell]:not(ng-template)',
                    providers: [
                        tuiAvatarOptionsProvider({ size: 'm' }),
                        tuiButtonOptionsProvider({ size: 's' }),
                    ],
                    host: {
                        tuiCell: '',
                        '[attr.data-size]': 'size || options.size',
                        '[attr.data-height]': 'height',
                    },
                }]
        }], propDecorators: { size: [{
                type: Input,
                args: ['tuiCell']
            }], height: [{
                type: Input,
                args: ['tuiCellHeight']
            }] } });

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

export { TUI_CELL_OPTIONS, TuiCell, tuiCellOptionsProvider };
//# sourceMappingURL=taiga-ui-layout-components-cell.mjs.map