@taiga-ui/layout
Version:
A package with Taiga UI layout components
104 lines (99 loc) • 7.96 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, signal, Directive, Input } from '@angular/core';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_BUTTON_OPTIONS } from '@taiga-ui/core/components/button';
import { TUI_NOTIFICATION_OPTIONS } from '@taiga-ui/core/components/notification';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TUI_SEGMENTED_OPTIONS } from '@taiga-ui/kit/components/segmented';
import { TUI_SWITCH_OPTIONS } from '@taiga-ui/kit/components/switch';
import { TUI_HEADER_OPTIONS } from '@taiga-ui/layout/components/header';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const [TUI_FORM_OPTIONS, tuiFormOptionsProvider] = tuiCreateOptions({ size: 'l' });
const HEADER_SIZE = {
s: 'xxxs',
m: 'xs',
l: 's',
};
class TuiFormStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFormStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFormStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-form" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiForm][tuiForm]{display:flex;flex-direction:column;align-items:stretch}[tuiForm][data-size=s]{gap:.75rem;font:var(--tui-font-text-s)}[tuiForm][data-size=s] tui-error:not(.tui-space-top-none){margin-block-start:-.75rem}[tuiForm][data-size=s] [tuiHeader]{padding-block-end:.5rem}[tuiForm][data-size=s] [tuiHeader] [tuiSubtitle]{font:var(--tui-font-text-ui-s)}[tuiForm][data-size=m]{gap:1rem;font:var(--tui-font-text-s)}[tuiForm][data-size=m] tui-error:not(.tui-space-top-none){margin-block-start:-1rem}[tuiForm][data-size=l]{gap:1.25rem;font:var(--tui-font-text-m)}[tuiForm][data-size=l] tui-error:not(.tui-space-top-none){margin-block-start:-1.25rem}[tuiForm]>header{padding-block-end:.25rem}[tuiForm]>fieldset{display:grid;gap:inherit;grid-auto-flow:column;grid-auto-columns:1fr;border:none;padding:0;margin:0}[tuiForm]>footer{display:flex;gap:.75rem;margin-block-start:.25rem}tui-dialog [tuiForm]>footer{justify-content:flex-end}[tuiForm]>button,[tuiForm]>a{align-self:flex-start}[tuiForm] [tuiLabel]:not([data-orientation=vertical]){font:inherit}[tuiForm][data-size=s] [tuiLabel]:not([data-orientation=vertical]) [tuiTooltip],[tuiForm][data-size=m] [tuiLabel]:not([data-orientation=vertical]) [tuiTooltip]{block-size:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFormStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-form',
}, styles: ["[tuiForm][tuiForm]{display:flex;flex-direction:column;align-items:stretch}[tuiForm][data-size=s]{gap:.75rem;font:var(--tui-font-text-s)}[tuiForm][data-size=s] tui-error:not(.tui-space-top-none){margin-block-start:-.75rem}[tuiForm][data-size=s] [tuiHeader]{padding-block-end:.5rem}[tuiForm][data-size=s] [tuiHeader] [tuiSubtitle]{font:var(--tui-font-text-ui-s)}[tuiForm][data-size=m]{gap:1rem;font:var(--tui-font-text-s)}[tuiForm][data-size=m] tui-error:not(.tui-space-top-none){margin-block-start:-1rem}[tuiForm][data-size=l]{gap:1.25rem;font:var(--tui-font-text-m)}[tuiForm][data-size=l] tui-error:not(.tui-space-top-none){margin-block-start:-1.25rem}[tuiForm]>header{padding-block-end:.25rem}[tuiForm]>fieldset{display:grid;gap:inherit;grid-auto-flow:column;grid-auto-columns:1fr;border:none;padding:0;margin:0}[tuiForm]>footer{display:flex;gap:.75rem;margin-block-start:.25rem}tui-dialog [tuiForm]>footer{justify-content:flex-end}[tuiForm]>button,[tuiForm]>a{align-self:flex-start}[tuiForm] [tuiLabel]:not([data-orientation=vertical]){font:inherit}[tuiForm][data-size=s] [tuiLabel]:not([data-orientation=vertical]) [tuiTooltip],[tuiForm][data-size=m] [tuiLabel]:not([data-orientation=vertical]) [tuiTooltip]{block-size:1.25rem}\n"] }]
}] });
class TuiForm {
constructor() {
this.options = inject(TUI_FORM_OPTIONS);
this.nothing = tuiWithStyles(TuiFormStyles);
this.size = this.options.size;
}
set tuiForm(size) {
this.size = size || this.options.size;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiForm, isStandalone: true, selector: "[tuiForm]", inputs: { tuiForm: "tuiForm" }, host: { attributes: { "tuiForm": "" }, properties: { "attr.data-size": "size" } }, providers: [
projectSize(TUI_BUTTON_OPTIONS, (size) => size),
projectSize(TUI_NOTIFICATION_OPTIONS, (size) => size),
projectSize(TUI_HEADER_OPTIONS, (size) => HEADER_SIZE[size]),
projectSize(TUI_SWITCH_OPTIONS, (size) => (size === 'l' ? 'm' : 's')),
projectSize(TUI_SEGMENTED_OPTIONS, (size) => (size === 'l' ? 'm' : 's')),
{
provide: TUI_TEXTFIELD_OPTIONS,
useFactory: () => ({
...inject(TUI_TEXTFIELD_OPTIONS, { skipSelf: true }),
size: signal(inject(TuiForm).size),
}),
},
], hostDirectives: [{ directive: i1.TuiTextfieldOptionsDirective, inputs: ["tuiTextfieldAppearance", "tuiTextfieldAppearance", "tuiTextfieldCleaner", "tuiTextfieldCleaner"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiForm, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiForm]',
providers: [
projectSize(TUI_BUTTON_OPTIONS, (size) => size),
projectSize(TUI_NOTIFICATION_OPTIONS, (size) => size),
projectSize(TUI_HEADER_OPTIONS, (size) => HEADER_SIZE[size]),
projectSize(TUI_SWITCH_OPTIONS, (size) => (size === 'l' ? 'm' : 's')),
projectSize(TUI_SEGMENTED_OPTIONS, (size) => (size === 'l' ? 'm' : 's')),
{
provide: TUI_TEXTFIELD_OPTIONS,
useFactory: () => ({
...inject(TUI_TEXTFIELD_OPTIONS, { skipSelf: true }),
size: signal(inject(TuiForm).size),
}),
},
],
hostDirectives: [
{
directive: TuiTextfieldOptionsDirective,
inputs: ['tuiTextfieldAppearance', 'tuiTextfieldCleaner'],
},
],
host: {
tuiForm: '',
'[attr.data-size]': 'size',
},
}]
}], propDecorators: { tuiForm: [{
type: Input
}] } });
function projectSize(provide, project) {
return {
provide,
useFactory: () => ({
...inject(provide, { skipSelf: true }),
size: project(inject(TuiForm).size),
}),
};
}
/**
* Generated bundle index. Do not edit.
*/
export { TUI_FORM_OPTIONS, TuiForm, tuiFormOptionsProvider };
//# sourceMappingURL=taiga-ui-layout-components-form.mjs.map