@taiga-ui/kit
Version:
Taiga UI Angular main components kit
65 lines (60 loc) • 9.23 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, contentChild, input, Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import * as i1 from '@taiga-ui/cdk/directives/native-validator';
import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i2 from '@taiga-ui/core/directives/appearance';
import { tuiAppearanceOptionsProvider, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
import * as i3 from '@taiga-ui/core/directives/icons';
import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const TUI_BLOCK_DEFAULT_OPTIONS = {
appearance: 'outline-grayscale',
size: 'l',
};
const [TUI_BLOCK_OPTIONS, tuiBlockOptionsProvider] = tuiCreateOptions(TUI_BLOCK_DEFAULT_OPTIONS);
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-block-5.7.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]){--t-height: var(--tui-height-l);--t-radius: var(--tui-radius-l);position:relative;display:inline-flex;gap:.75rem;color:var(--tui-text-primary);border-radius:var(--t-radius);min-block-size:var(--t-height);margin:0;box-sizing:border-box;cursor:pointer;overflow:hidden;font:var(--tui-typography-body-m);padding:var(--tui-padding-l);isolation:isolate}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{gap:.5rem;font:var(--tui-typography-ui-s);padding:.5rem;--t-height: var(--tui-height-s);--t-radius: var(--tui-radius-m)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before,[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{font-size:1rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s] [tuiSubtitle]{font:var(--tui-typography-ui-2xs)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s] [tuiTooltip]{margin:0 .125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{gap:.625rem;font:var(--tui-typography-ui-m);padding:var(--tui-padding-m);--t-height: var(--tui-height-m);--t-radius: var(--tui-radius-m)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]:before,[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]:after{margin:-.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m] input:not([tuiBlock]){margin:.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m] [tuiTooltip]{margin:.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])._disabled :focus{visibility:hidden}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=\"\"]{justify-content:center}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) input[tuiBlock]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;z-index:-1;min-block-size:0;pointer-events:none;border-radius:inherit;padding:0}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) input[tuiBlock][type=file]{opacity:0}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{margin:-.25rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiTitle]{flex:1;gap:0;font:inherit;color:var(--tui-text-primary)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiTooltip]{vertical-align:bottom;margin:.25rem;font-size:1rem;border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-block-${TUI_VERSION}`, styles: ["[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]){--t-height: var(--tui-height-l);--t-radius: var(--tui-radius-l);position:relative;display:inline-flex;gap:.75rem;color:var(--tui-text-primary);border-radius:var(--t-radius);min-block-size:var(--t-height);margin:0;box-sizing:border-box;cursor:pointer;overflow:hidden;font:var(--tui-typography-body-m);padding:var(--tui-padding-l);isolation:isolate}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{gap:.5rem;font:var(--tui-typography-ui-s);padding:.5rem;--t-height: var(--tui-height-s);--t-radius: var(--tui-radius-m)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before,[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{font-size:1rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s] [tuiSubtitle]{font:var(--tui-typography-ui-2xs)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=s] [tuiTooltip]{margin:0 .125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{gap:.625rem;font:var(--tui-typography-ui-m);padding:var(--tui-padding-m);--t-height: var(--tui-height-m);--t-radius: var(--tui-radius-m)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]:before,[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m]:after{margin:-.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m] input:not([tuiBlock]){margin:.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-size=m] [tuiTooltip]{margin:.125rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])._disabled :focus{visibility:hidden}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"])[data-appearance=\"\"]{justify-content:center}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) input[tuiBlock]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;z-index:-1;min-block-size:0;pointer-events:none;border-radius:inherit;padding:0}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) input[tuiBlock][type=file]{opacity:0}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{margin:-.25rem}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiTitle]{flex:1;gap:0;font:inherit;color:var(--tui-text-primary)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiBlock]:where(*[data-tui-version=\"5.7.0\"]) [tuiTooltip]{vertical-align:bottom;margin:.25rem;font-size:1rem;border:none}\n"] }]
}] });
class TuiBlock {
constructor() {
this.nothing = tuiWithStyles(Styles);
this.options = inject(TUI_BLOCK_OPTIONS);
this.control = contentChild(NgControl);
this.size = input(this.options.size, { alias: 'tuiBlock' });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.21", type: TuiBlock, isStandalone: true, selector: "label[tuiBlock],input[tuiBlock]", inputs: { size: { classPropertyName: "size", publicName: "tuiBlock", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiBlock": "" }, properties: { "attr.data-size": "size() || this.options.size || \"l\"", "class._disabled": "!!this.control()?.disabled" } }, providers: [
tuiAppearanceOptionsProvider(TUI_BLOCK_OPTIONS),
tuiAvatarOptionsProvider({ size: 's' }),
], queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TuiNativeValidator }, { directive: i2.TuiWithAppearance }, { directive: i3.TuiWithIcons }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBlock, decorators: [{
type: Directive,
args: [{
selector: 'label[tuiBlock],input[tuiBlock]',
providers: [
tuiAppearanceOptionsProvider(TUI_BLOCK_OPTIONS),
tuiAvatarOptionsProvider({ size: 's' }),
],
hostDirectives: [TuiNativeValidator, TuiWithAppearance, TuiWithIcons],
host: {
tuiBlock: '',
'[attr.data-size]': 'size() || this.options.size || "l"',
'[class._disabled]': '!!this.control()?.disabled',
},
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_BLOCK_DEFAULT_OPTIONS, TUI_BLOCK_OPTIONS, TuiBlock, tuiBlockOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-block.mjs.map