@taiga-ui/layout
Version:
A package with Taiga UI layout components
61 lines (57 loc) • 9.75 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, Directive, Input } from '@angular/core';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
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 { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
const [TUI_HEADER_OPTIONS, tuiHeaderOptionsProvider] = tuiCreateOptions({
size: 'h5',
});
class TuiHeaderStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeaderStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiHeaderStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-header" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiHeader]{position:relative;display:flex;align-items:flex-start;box-sizing:content-box;color:var(--tui-text-primary);margin:0;text-align:start}[tuiHeader] [tuiTitle]{flex-grow:2}[tuiHeader] [tuiAccessories]{display:flex;align-items:center;gap:.75rem;white-space:nowrap}[tuiHeader] [tuiAccessories]:has([tuiLink]){align-items:baseline}[tuiHeader] [tuiAccessories]:before{content:\"\\200b\";visibility:hidden}[tuiHeader] [tuiSubtitle]{font:var(--tui-font-text-m);color:var(--tui-text-secondary)}[tuiHeader] [tuiLink]{font:var(--tui-font-text-m)}[tuiHeader] [tuiCaption]{font:var(--tui-font-text-s);color:var(--tui-text-secondary);font-weight:500;text-transform:uppercase;margin:0}[tuiHeader][data-size=xxl] [tuiTitle],[tuiHeader][data-size=h1] [tuiTitle],[tuiHeader][data-size=xxl] [tuiAccessories],[tuiHeader][data-size=h1] [tuiAccessories]{font:var(--tui-font-heading-1)}[tuiHeader][data-size=xl] [tuiTitle],[tuiHeader][data-size=h2] [tuiTitle],[tuiHeader][data-size=xl] [tuiAccessories],[tuiHeader][data-size=h2] [tuiAccessories]{font:var(--tui-font-heading-2)}[tuiHeader][data-size=l] [tuiTitle],[tuiHeader][data-size=h3] [tuiTitle],[tuiHeader][data-size=l] [tuiAccessories],[tuiHeader][data-size=h3] [tuiAccessories]{font:var(--tui-font-heading-3)}[tuiHeader][data-size=m] [tuiTitle],[tuiHeader][data-size=h4] [tuiTitle],[tuiHeader][data-size=m] [tuiAccessories],[tuiHeader][data-size=h4] [tuiAccessories]{font:var(--tui-font-heading-4)}[tuiHeader][data-size=s] [tuiTitle],[tuiHeader][data-size=h5] [tuiTitle],[tuiHeader][data-size=s] [tuiAccessories],[tuiHeader][data-size=h5] [tuiAccessories]{font:var(--tui-font-heading-5)}[tuiHeader][data-size=xs] [tuiTitle],[tuiHeader][data-size=h6] [tuiTitle],[tuiHeader][data-size=xs] [tuiAccessories],[tuiHeader][data-size=h6] [tuiAccessories]{font:var(--tui-font-heading-6)}[tuiHeader][data-size=xxs] [tuiTitle],[tuiHeader][data-size=body-xl] [tuiTitle],[tuiHeader][data-size=xxs] [tuiAccessories],[tuiHeader][data-size=body-xl] [tuiAccessories]{font:var(--tui-font-text-xl)}[tuiHeader][data-size=xxs] [tuiTitle],[tuiHeader][data-size=body-xl] [tuiTitle]{font-weight:700}[tuiHeader][data-size=body-l] [tuiTitle],[tuiHeader][data-size=body-l] [tuiAccessories]{font:var(--tui-font-text-l)}[tuiHeader][data-size=body-l] [tuiTitle]{font-weight:700}[tuiHeader][data-size=body-m] [tuiTitle],[tuiHeader][data-size=body-m] [tuiAccessories]{font:var(--tui-font-text-m)}[tuiHeader][data-size=body-m] [tuiTitle]{gap:.125rem;font-weight:700}[tuiHeader][data-size=body-m] [tuiSubtitle],[tuiHeader][data-size=body-l] [tuiSubtitle],[tuiHeader][data-size=body-m] [tuiLink],[tuiHeader][data-size=body-l] [tuiLink]{font:var(--tui-font-text-s)}[tuiHeader][data-size=xxl] [tuiSubtitle],[tuiHeader][data-size=xl] [tuiSubtitle],[tuiHeader][data-size=l] [tuiSubtitle],[tuiHeader][data-size=h1] [tuiSubtitle],[tuiHeader][data-size=h2] [tuiSubtitle],[tuiHeader][data-size=h3] [tuiSubtitle],[tuiHeader][data-size=xxl] [tuiLink],[tuiHeader][data-size=xl] [tuiLink],[tuiHeader][data-size=l] [tuiLink],[tuiHeader][data-size=h1] [tuiLink],[tuiHeader][data-size=h2] [tuiLink],[tuiHeader][data-size=h3] [tuiLink]{font:var(--tui-font-text-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeaderStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-header',
}, styles: ["[tuiHeader]{position:relative;display:flex;align-items:flex-start;box-sizing:content-box;color:var(--tui-text-primary);margin:0;text-align:start}[tuiHeader] [tuiTitle]{flex-grow:2}[tuiHeader] [tuiAccessories]{display:flex;align-items:center;gap:.75rem;white-space:nowrap}[tuiHeader] [tuiAccessories]:has([tuiLink]){align-items:baseline}[tuiHeader] [tuiAccessories]:before{content:\"\\200b\";visibility:hidden}[tuiHeader] [tuiSubtitle]{font:var(--tui-font-text-m);color:var(--tui-text-secondary)}[tuiHeader] [tuiLink]{font:var(--tui-font-text-m)}[tuiHeader] [tuiCaption]{font:var(--tui-font-text-s);color:var(--tui-text-secondary);font-weight:500;text-transform:uppercase;margin:0}[tuiHeader][data-size=xxl] [tuiTitle],[tuiHeader][data-size=h1] [tuiTitle],[tuiHeader][data-size=xxl] [tuiAccessories],[tuiHeader][data-size=h1] [tuiAccessories]{font:var(--tui-font-heading-1)}[tuiHeader][data-size=xl] [tuiTitle],[tuiHeader][data-size=h2] [tuiTitle],[tuiHeader][data-size=xl] [tuiAccessories],[tuiHeader][data-size=h2] [tuiAccessories]{font:var(--tui-font-heading-2)}[tuiHeader][data-size=l] [tuiTitle],[tuiHeader][data-size=h3] [tuiTitle],[tuiHeader][data-size=l] [tuiAccessories],[tuiHeader][data-size=h3] [tuiAccessories]{font:var(--tui-font-heading-3)}[tuiHeader][data-size=m] [tuiTitle],[tuiHeader][data-size=h4] [tuiTitle],[tuiHeader][data-size=m] [tuiAccessories],[tuiHeader][data-size=h4] [tuiAccessories]{font:var(--tui-font-heading-4)}[tuiHeader][data-size=s] [tuiTitle],[tuiHeader][data-size=h5] [tuiTitle],[tuiHeader][data-size=s] [tuiAccessories],[tuiHeader][data-size=h5] [tuiAccessories]{font:var(--tui-font-heading-5)}[tuiHeader][data-size=xs] [tuiTitle],[tuiHeader][data-size=h6] [tuiTitle],[tuiHeader][data-size=xs] [tuiAccessories],[tuiHeader][data-size=h6] [tuiAccessories]{font:var(--tui-font-heading-6)}[tuiHeader][data-size=xxs] [tuiTitle],[tuiHeader][data-size=body-xl] [tuiTitle],[tuiHeader][data-size=xxs] [tuiAccessories],[tuiHeader][data-size=body-xl] [tuiAccessories]{font:var(--tui-font-text-xl)}[tuiHeader][data-size=xxs] [tuiTitle],[tuiHeader][data-size=body-xl] [tuiTitle]{font-weight:700}[tuiHeader][data-size=body-l] [tuiTitle],[tuiHeader][data-size=body-l] [tuiAccessories]{font:var(--tui-font-text-l)}[tuiHeader][data-size=body-l] [tuiTitle]{font-weight:700}[tuiHeader][data-size=body-m] [tuiTitle],[tuiHeader][data-size=body-m] [tuiAccessories]{font:var(--tui-font-text-m)}[tuiHeader][data-size=body-m] [tuiTitle]{gap:.125rem;font-weight:700}[tuiHeader][data-size=body-m] [tuiSubtitle],[tuiHeader][data-size=body-l] [tuiSubtitle],[tuiHeader][data-size=body-m] [tuiLink],[tuiHeader][data-size=body-l] [tuiLink]{font:var(--tui-font-text-s)}[tuiHeader][data-size=xxl] [tuiSubtitle],[tuiHeader][data-size=xl] [tuiSubtitle],[tuiHeader][data-size=l] [tuiSubtitle],[tuiHeader][data-size=h1] [tuiSubtitle],[tuiHeader][data-size=h2] [tuiSubtitle],[tuiHeader][data-size=h3] [tuiSubtitle],[tuiHeader][data-size=xxl] [tuiLink],[tuiHeader][data-size=xl] [tuiLink],[tuiHeader][data-size=l] [tuiLink],[tuiHeader][data-size=h1] [tuiLink],[tuiHeader][data-size=h2] [tuiLink],[tuiHeader][data-size=h3] [tuiLink]{font:var(--tui-font-text-l)}\n"] }]
}] });
class TuiHeader {
constructor() {
this.options = inject(TUI_HEADER_OPTIONS);
this.nothing = tuiWithStyles(TuiHeaderStyles);
this.size = this.options.size;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiHeader, isStandalone: true, selector: "[tuiHeader]", inputs: { size: ["tuiHeader", "size"] }, host: { attributes: { "tuiHeader": "" }, properties: { "attr.data-size": "size || options.size" } }, providers: [
tuiAvatarOptionsProvider({ size: 's' }),
tuiButtonOptionsProvider({ size: 's' }),
tuiBadgeOptionsProvider({ size: 'm' }),
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiHeader, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiHeader]',
providers: [
tuiAvatarOptionsProvider({ size: 's' }),
tuiButtonOptionsProvider({ size: 's' }),
tuiBadgeOptionsProvider({ size: 'm' }),
],
host: {
tuiHeader: '',
'[attr.data-size]': 'size || options.size',
},
}]
}], propDecorators: { size: [{
type: Input,
args: ['tuiHeader']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_HEADER_OPTIONS, TuiHeader, tuiHeaderOptionsProvider };
//# sourceMappingURL=taiga-ui-layout-components-header.mjs.map