@taiga-ui/kit
Version:
Taiga UI Angular main components kit
59 lines • 11.4 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChild, Directive, inject, Input, ViewEncapsulation, } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAppearanceOptionsProvider, TuiWithAppearance, } from '@taiga-ui/core/directives/appearance';
import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { TUI_BLOCK_OPTIONS } from './block.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/cdk/directives/native-validator";
import * as i2 from "@taiga-ui/core/directives/appearance";
import * as i3 from "@taiga-ui/core/directives/icons";
class TuiBlockStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBlockStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiBlockStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-block" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiBlock]{--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-font-text-m);padding:var(--tui-padding-l);isolation:isolate}[tuiBlock][data-size=s]{gap:.5rem;font:var(--tui-font-text-ui-s);padding:.5rem;--t-height: var(--tui-height-s);--t-radius: var(--tui-radius-m)}[tuiBlock][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiBlock][data-size=s] [tuiTooltip]{margin:0 .125rem}[tuiBlock][data-size=m]{gap:.625rem;font:var(--tui-font-text-ui-m);padding:var(--tui-padding-m);--t-height: var(--tui-height-m);--t-radius: var(--tui-radius-m)}[tuiBlock][data-size=m] input:not([tuiBlock]){margin:.125rem}[tuiBlock][data-size=m] [tuiTooltip]{margin:.125rem}[tuiBlock]._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}[tuiBlock]._disabled :focus{visibility:hidden}[tuiBlock][data-appearance=\"\"]{justify-content:center}[tuiBlock] input[tuiBlock]{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;z-index:-1;min-block-size:0;pointer-events:none;border-radius:inherit;padding:0}[tuiBlock] tui-avatar{margin:-.25rem}[tuiBlock] [tuiTitle]{flex:1;gap:0;font:inherit;color:var(--tui-text-primary)}[tuiBlock] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiBlock] [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: "16.2.12", ngImport: i0, type: TuiBlockStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-block',
}, styles: ["[tuiBlock]{--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-font-text-m);padding:var(--tui-padding-l);isolation:isolate}[tuiBlock][data-size=s]{gap:.5rem;font:var(--tui-font-text-ui-s);padding:.5rem;--t-height: var(--tui-height-s);--t-radius: var(--tui-radius-m)}[tuiBlock][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-ui-xs)}[tuiBlock][data-size=s] [tuiTooltip]{margin:0 .125rem}[tuiBlock][data-size=m]{gap:.625rem;font:var(--tui-font-text-ui-m);padding:var(--tui-padding-m);--t-height: var(--tui-height-m);--t-radius: var(--tui-radius-m)}[tuiBlock][data-size=m] input:not([tuiBlock]){margin:.125rem}[tuiBlock][data-size=m] [tuiTooltip]{margin:.125rem}[tuiBlock]._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}[tuiBlock]._disabled :focus{visibility:hidden}[tuiBlock][data-appearance=\"\"]{justify-content:center}[tuiBlock] input[tuiBlock]{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;z-index:-1;min-block-size:0;pointer-events:none;border-radius:inherit;padding:0}[tuiBlock] tui-avatar{margin:-.25rem}[tuiBlock] [tuiTitle]{flex:1;gap:0;font:inherit;color:var(--tui-text-primary)}[tuiBlock] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiBlock] [tuiTooltip]{vertical-align:bottom;margin:.25rem;font-size:1rem;border:none}\n"] }]
}] });
class TuiBlock {
constructor() {
this.nothing = tuiWithStyles(TuiBlockStyles);
this.options = inject(TUI_BLOCK_OPTIONS);
this.size = this.options.size;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBlock, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiBlock, isStandalone: true, selector: "label[tuiBlock],input[tuiBlock]", inputs: { size: ["tuiBlock", "size"] }, host: { attributes: { "tuiBlock": "" }, properties: { "attr.data-size": "size || 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 }], hostDirectives: [{ directive: i1.TuiNativeValidator }, { directive: i2.TuiWithAppearance }, { directive: i3.TuiWithIcons }], ngImport: i0 }); }
}
export { TuiBlock };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBlock, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'label[tuiBlock],input[tuiBlock]',
providers: [
tuiAppearanceOptionsProvider(TUI_BLOCK_OPTIONS),
tuiAvatarOptionsProvider({ size: 's' }),
],
hostDirectives: [TuiNativeValidator, TuiWithAppearance, TuiWithIcons],
host: {
tuiBlock: '',
'[attr.data-size]': 'size || options.size || "l"',
'[class._disabled]': '!!this.control?.disabled',
},
}]
}], propDecorators: { control: [{
type: ContentChild,
args: [NgControl]
}], size: [{
type: Input,
args: ['tuiBlock']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2suZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYmxvY2svYmxvY2suZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDJDQUEyQyxDQUFDO0FBQzdFLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRSxPQUFPLEVBQ0gsNEJBQTRCLEVBQzVCLGlCQUFpQixHQUNwQixNQUFNLHNDQUFzQyxDQUFDO0FBQzlDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQ0FBaUMsQ0FBQztBQUU3RCxPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSxpQ0FBaUMsQ0FBQztBQUV6RSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQzs7Ozs7QUFFbEQsTUFVTSxjQUFjOytHQUFkLGNBQWM7bUdBQWQsY0FBYywrR0FSTixFQUFFOzs0RkFRVixjQUFjO2tCQVZuQixTQUFTO2lDQUNNLElBQUksWUFDTixFQUFFLGlCQUVHLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsS0FBSyxFQUFFLFdBQVc7cUJBQ3JCOztBQUlMLE1BY2EsUUFBUTtJQWRyQjtRQWtCdUIsWUFBTyxHQUFHLGFBQWEsQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN4QyxZQUFPLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFHaEQsU0FBSSxHQUE2QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztLQUM3RDsrR0FUWSxRQUFRO21HQUFSLFFBQVEsa1JBWE47WUFDUCw0QkFBNEIsQ0FBQyxpQkFBaUIsQ0FBQztZQUMvQyx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUMsQ0FBQztTQUN4QywrREFTYSxTQUFTOztTQURkLFFBQVE7NEZBQVIsUUFBUTtrQkFkcEIsU0FBUzttQkFBQztvQkFDUCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLGlDQUFpQztvQkFDM0MsU0FBUyxFQUFFO3dCQUNQLDRCQUE0QixDQUFDLGlCQUFpQixDQUFDO3dCQUMvQyx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUMsQ0FBQztxQkFDeEM7b0JBQ0QsY0FBYyxFQUFFLENBQUMsa0JBQWtCLEVBQUUsaUJBQWlCLEVBQUUsWUFBWSxDQUFDO29CQUNyRSxJQUFJLEVBQUU7d0JBQ0YsUUFBUSxFQUFFLEVBQUU7d0JBQ1osa0JBQWtCLEVBQUUsNkJBQTZCO3dCQUNqRCxtQkFBbUIsRUFBRSwwQkFBMEI7cUJBQ2xEO2lCQUNKOzhCQUdzQixPQUFPO3NCQUR6QixZQUFZO3VCQUFDLFNBQVM7Z0JBT2hCLElBQUk7c0JBRFYsS0FBSzt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkLFxuICAgIERpcmVjdGl2ZSxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOZ0NvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7VHVpTmF0aXZlVmFsaWRhdG9yfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2RpcmVjdGl2ZXMvbmF0aXZlLXZhbGlkYXRvcic7XG5pbXBvcnQge3R1aVdpdGhTdHlsZXN9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIHR1aUFwcGVhcmFuY2VPcHRpb25zUHJvdmlkZXIsXG4gICAgVHVpV2l0aEFwcGVhcmFuY2UsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvYXBwZWFyYW5jZSc7XG5pbXBvcnQge1R1aVdpdGhJY29uc30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9pY29ucyc7XG5pbXBvcnQge3R5cGUgVHVpU2l6ZUwsIHR5cGUgVHVpU2l6ZVN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcbmltcG9ydCB7dHVpQXZhdGFyT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvYXZhdGFyJztcblxuaW1wb3J0IHtUVUlfQkxPQ0tfT1BUSU9OU30gZnJvbSAnLi9ibG9jay5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVzOiBbJ0BpbXBvcnQgXCJAdGFpZ2EtdWkva2l0L3N0eWxlcy9jb21wb25lbnRzL2Jsb2NrLmxlc3NcIjsnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktYmxvY2snLFxuICAgIH0sXG59KVxuY2xhc3MgVHVpQmxvY2tTdHlsZXMge31cblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ2xhYmVsW3R1aUJsb2NrXSxpbnB1dFt0dWlCbG9ja10nLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB0dWlBcHBlYXJhbmNlT3B0aW9uc1Byb3ZpZGVyKFRVSV9CTE9DS19PUFRJT05TKSxcbiAgICAgICAgdHVpQXZhdGFyT3B0aW9uc1Byb3ZpZGVyKHtzaXplOiAncyd9KSxcbiAgICBdLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbVHVpTmF0aXZlVmFsaWRhdG9yLCBUdWlXaXRoQXBwZWFyYW5jZSwgVHVpV2l0aEljb25zXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aUJsb2NrOiAnJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZSB8fCBvcHRpb25zLnNpemUgfHwgXCJsXCInLFxuICAgICAgICAnW2NsYXNzLl9kaXNhYmxlZF0nOiAnISF0aGlzLmNvbnRyb2w/LmRpc2FibGVkJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlCbG9jayB7XG4gICAgQENvbnRlbnRDaGlsZChOZ0NvbnRyb2wpXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNvbnRyb2w/OiBOZ0NvbnRyb2w7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgbm90aGluZyA9IHR1aVdpdGhTdHlsZXMoVHVpQmxvY2tTdHlsZXMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KFRVSV9CTE9DS19PUFRJT05TKTtcblxuICAgIEBJbnB1dCgndHVpQmxvY2snKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplTCB8IFR1aVNpemVTIHwgJycgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcbn1cbiJdfQ==