@taiga-ui/layout
Version:
A package with Taiga UI layout components
67 lines • 14.1 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, signal, ViewEncapsulation, } from '@angular/core';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TuiScrollable, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
import { tuiDropdownOptionsProvider } from '@taiga-ui/core/directives/dropdown';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import * as i0 from "@angular/core";
class TuiAsideComponent {
constructor() {
// TODO: refactor to signal inputs after Angular update
this.expanded = signal(false);
}
set tuiNavigationAside(expanded) {
this.expanded.set(expanded);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAsideComponent, isStandalone: true, selector: "aside[tuiNavigationAside]", inputs: { tuiNavigationAside: "tuiNavigationAside" }, host: { attributes: { "tuiNavigationAside": "", "tuiTheme": "dark" }, properties: { "class._expanded": "expanded()" } }, providers: [
tuiButtonOptionsProvider({ size: 's', appearance: 'flat-grayscale' }),
tuiDropdownOptionsProvider({
appearance: 'dropdown-navigation',
align: 'right',
offset: 12,
}),
], ngImport: i0, template: `
<ng-content select="header" />
<tui-scrollbar class="t-nav-scrollbar">
<div
tuiFade="vertical"
tuiScrollable
class="t-nav-content"
>
<ng-content />
</div>
</tui-scrollbar>
<ng-content select="footer" />
`, isInline: true, styles: ["aside[tuiNavigationAside]{transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:sticky;top:3rem;left:0;z-index:1;display:flex;inset-inline-start:0;inline-size:3rem;flex-direction:column;padding:.5rem .5rem .25rem;box-sizing:border-box;background:var(--tui-theme-color, #000);color:var(--tui-text-primary)}aside[tuiNavigationAside]:before{content:\"\";position:absolute;top:0;left:100%;z-index:-1;inset-inline-start:100%;block-size:3rem;inline-size:3rem;pointer-events:none;border-top-left-radius:1.25rem;box-shadow:-1.5rem 0 var(--tui-theme-color, #000);transform:scaleX(var(--tui-inline))}aside[tuiNavigationAside]:after{content:\"\";position:fixed;top:inherit;left:0;bottom:-3rem;z-index:-1;inset-inline-start:0;inline-size:3rem;background:inherit}aside[tuiNavigationAside]._expanded{inline-size:14.375rem}aside[tuiNavigationAside]._expanded+main[tuiNavigationMain]{max-inline-size:calc(100% - 14.375rem)}aside[tuiNavigationAside] .t-nav-scrollbar{margin:0 -.25rem}aside[tuiNavigationAside] .t-nav-content{scrollbar-width:none;-ms-overflow-style:none;block-size:100%;padding:0 .25rem;overflow:auto}aside[tuiNavigationAside] .t-nav-content::-webkit-scrollbar,aside[tuiNavigationAside] .t-nav-content::-webkit-scrollbar-thumb{display:none}aside[tuiNavigationAside] tui-expand [tuiAsideItem]{padding-inline-start:2rem}aside[tuiNavigationAside] hr{background:var(--tui-border-normal);block-size:1px;margin:0 0 .25rem;border:none}aside[tuiNavigationAside] header{padding-block-end:.25rem;box-shadow:inset 0 -1px var(--tui-border-normal);margin-block-end:1rem}aside[tuiNavigationAside] footer{display:flex;flex-direction:column;flex:1}aside[tuiNavigationAside] footer:before{content:\"\";min-block-size:1.75rem;margin:0 -.5rem;flex:1;-webkit-mask:linear-gradient(transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%);mask:linear-gradient(transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%)}aside[tuiNavigationAside]+main[tuiNavigationMain]{max-inline-size:calc(100% - 3rem)}[tuiAsideItem][tuiAsideItem]{inline-size:100%;justify-content:flex-start;gap:.625rem;margin-block-end:.25rem}[tuiAsideItem][tuiAsideItem]:after{border:none!important;margin-inline-start:auto!important;color:var(--tui-text-tertiary)}[tuiAsideItem][tuiAsideItem].tui-dropdown-open,[tuiAsideItem][tuiAsideItem]._active:not(._chevron-rotated),aside[tuiNavigationAside]:not(._expanded) [tuiAsideItem][tuiAsideItem]._active{background:var(--tui-background-neutral-1-hover)}tui-dropdown[data-appearance=dropdown-navigation]{border:none;background:var(--tui-background-elevation-3);background:color-mix(in srgb,var(--tui-theme-color, #000) 80%,#fff)}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]{justify-content:flex-start;margin:0;padding:0 .5rem}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._active{background:transparent}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._link:not(._custom):after{opacity:0}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._link._active:after{opacity:1}\n"], dependencies: [{ kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiScrollable, selector: "[tuiScrollable]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiAsideComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAsideComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'aside[tuiNavigationAside]', imports: [TuiFade, TuiScrollable, TuiScrollbar], template: `
<ng-content select="header" />
<tui-scrollbar class="t-nav-scrollbar">
<div
tuiFade="vertical"
tuiScrollable
class="t-nav-content"
>
<ng-content />
</div>
</tui-scrollbar>
<ng-content select="footer" />
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiButtonOptionsProvider({ size: 's', appearance: 'flat-grayscale' }),
tuiDropdownOptionsProvider({
appearance: 'dropdown-navigation',
align: 'right',
offset: 12,
}),
], host: {
tuiNavigationAside: '',
tuiTheme: 'dark',
'[class._expanded]': 'expanded()',
}, styles: ["aside[tuiNavigationAside]{transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:sticky;top:3rem;left:0;z-index:1;display:flex;inset-inline-start:0;inline-size:3rem;flex-direction:column;padding:.5rem .5rem .25rem;box-sizing:border-box;background:var(--tui-theme-color, #000);color:var(--tui-text-primary)}aside[tuiNavigationAside]:before{content:\"\";position:absolute;top:0;left:100%;z-index:-1;inset-inline-start:100%;block-size:3rem;inline-size:3rem;pointer-events:none;border-top-left-radius:1.25rem;box-shadow:-1.5rem 0 var(--tui-theme-color, #000);transform:scaleX(var(--tui-inline))}aside[tuiNavigationAside]:after{content:\"\";position:fixed;top:inherit;left:0;bottom:-3rem;z-index:-1;inset-inline-start:0;inline-size:3rem;background:inherit}aside[tuiNavigationAside]._expanded{inline-size:14.375rem}aside[tuiNavigationAside]._expanded+main[tuiNavigationMain]{max-inline-size:calc(100% - 14.375rem)}aside[tuiNavigationAside] .t-nav-scrollbar{margin:0 -.25rem}aside[tuiNavigationAside] .t-nav-content{scrollbar-width:none;-ms-overflow-style:none;block-size:100%;padding:0 .25rem;overflow:auto}aside[tuiNavigationAside] .t-nav-content::-webkit-scrollbar,aside[tuiNavigationAside] .t-nav-content::-webkit-scrollbar-thumb{display:none}aside[tuiNavigationAside] tui-expand [tuiAsideItem]{padding-inline-start:2rem}aside[tuiNavigationAside] hr{background:var(--tui-border-normal);block-size:1px;margin:0 0 .25rem;border:none}aside[tuiNavigationAside] header{padding-block-end:.25rem;box-shadow:inset 0 -1px var(--tui-border-normal);margin-block-end:1rem}aside[tuiNavigationAside] footer{display:flex;flex-direction:column;flex:1}aside[tuiNavigationAside] footer:before{content:\"\";min-block-size:1.75rem;margin:0 -.5rem;flex:1;-webkit-mask:linear-gradient(transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%);mask:linear-gradient(transparent 0,black 3rem,black calc(100% - 3rem),transparent 100%)}aside[tuiNavigationAside]+main[tuiNavigationMain]{max-inline-size:calc(100% - 3rem)}[tuiAsideItem][tuiAsideItem]{inline-size:100%;justify-content:flex-start;gap:.625rem;margin-block-end:.25rem}[tuiAsideItem][tuiAsideItem]:after{border:none!important;margin-inline-start:auto!important;color:var(--tui-text-tertiary)}[tuiAsideItem][tuiAsideItem].tui-dropdown-open,[tuiAsideItem][tuiAsideItem]._active:not(._chevron-rotated),aside[tuiNavigationAside]:not(._expanded) [tuiAsideItem][tuiAsideItem]._active{background:var(--tui-background-neutral-1-hover)}tui-dropdown[data-appearance=dropdown-navigation]{border:none;background:var(--tui-background-elevation-3);background:color-mix(in srgb,var(--tui-theme-color, #000) 80%,#fff)}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]{justify-content:flex-start;margin:0;padding:0 .5rem}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._active{background:transparent}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._link:not(._custom):after{opacity:0}tui-dropdown[data-appearance=dropdown-navigation] [tuiAsideItem]._link._active:after{opacity:1}\n"] }]
}], propDecorators: { tuiNavigationAside: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNpZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGF5b3V0L2NvbXBvbmVudHMvbmF2aWdhdGlvbi9hc2lkZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDMUUsT0FBTyxFQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUMsTUFBTSxxQ0FBcUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsMEJBQTBCLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUM5RSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sK0JBQStCLENBQUM7O0FBRXRELE1Ba0NhLGlCQUFpQjtJQWxDOUI7UUFtQ0ksdURBQXVEO1FBQ3ZDLGFBQVEsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7S0FNNUM7SUFKRyxJQUNXLGtCQUFrQixDQUFDLFFBQWlCO1FBQzNDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hDLENBQUM7K0dBUFEsaUJBQWlCO21HQUFqQixpQkFBaUIsdVBBZGY7WUFDUCx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFDLENBQUM7WUFDbkUsMEJBQTBCLENBQUM7Z0JBQ3ZCLFVBQVUsRUFBRSxxQkFBcUI7Z0JBQ2pDLEtBQUssRUFBRSxPQUFPO2dCQUNkLE1BQU0sRUFBRSxFQUFFO2FBQ2IsQ0FBQztTQUNMLDBCQXZCUzs7Ozs7Ozs7Ozs7O0tBWVQsc25HQWJTLE9BQU8sNEhBQUUsYUFBYSw0REFBRSxZQUFZOztTQStCckMsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBbEM3QixTQUFTO2lDQUNNLElBQUksWUFDTiwyQkFBMkIsV0FDNUIsQ0FBQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksQ0FBQyxZQUNyQzs7Ozs7Ozs7Ozs7O0tBWVQsaUJBRWMsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDUCx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFDLENBQUM7d0JBQ25FLDBCQUEwQixDQUFDOzRCQUN2QixVQUFVLEVBQUUscUJBQXFCOzRCQUNqQyxLQUFLLEVBQUUsT0FBTzs0QkFDZCxNQUFNLEVBQUUsRUFBRTt5QkFDYixDQUFDO3FCQUNMLFFBQ0s7d0JBQ0Ysa0JBQWtCLEVBQUUsRUFBRTt3QkFDdEIsUUFBUSxFQUFFLE1BQU07d0JBQ2hCLG1CQUFtQixFQUFFLFlBQVk7cUJBQ3BDOzhCQU9VLGtCQUFrQjtzQkFENUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIElucHV0LFxuICAgIHNpZ25hbCxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlTY3JvbGxhYmxlLCBUdWlTY3JvbGxiYXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvc2Nyb2xsYmFyJztcbmltcG9ydCB7dHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvZHJvcGRvd24nO1xuaW1wb3J0IHtUdWlGYWRlfSBmcm9tICdAdGFpZ2EtdWkva2l0L2RpcmVjdGl2ZXMvZmFkZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdhc2lkZVt0dWlOYXZpZ2F0aW9uQXNpZGVdJyxcbiAgICBpbXBvcnRzOiBbVHVpRmFkZSwgVHVpU2Nyb2xsYWJsZSwgVHVpU2Nyb2xsYmFyXSxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJoZWFkZXJcIiAvPlxuICAgICAgICA8dHVpLXNjcm9sbGJhciBjbGFzcz1cInQtbmF2LXNjcm9sbGJhclwiPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIHR1aUZhZGU9XCJ2ZXJ0aWNhbFwiXG4gICAgICAgICAgICAgICAgdHVpU2Nyb2xsYWJsZVxuICAgICAgICAgICAgICAgIGNsYXNzPVwidC1uYXYtY29udGVudFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L3R1aS1zY3JvbGxiYXI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiIC8+XG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnLi9hc2lkZS5zdHlsZS5sZXNzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgdHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyKHtzaXplOiAncycsIGFwcGVhcmFuY2U6ICdmbGF0LWdyYXlzY2FsZSd9KSxcbiAgICAgICAgdHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXIoe1xuICAgICAgICAgICAgYXBwZWFyYW5jZTogJ2Ryb3Bkb3duLW5hdmlnYXRpb24nLFxuICAgICAgICAgICAgYWxpZ246ICdyaWdodCcsXG4gICAgICAgICAgICBvZmZzZXQ6IDEyLFxuICAgICAgICB9KSxcbiAgICBdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHVpTmF2aWdhdGlvbkFzaWRlOiAnJyxcbiAgICAgICAgdHVpVGhlbWU6ICdkYXJrJyxcbiAgICAgICAgJ1tjbGFzcy5fZXhwYW5kZWRdJzogJ2V4cGFuZGVkKCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFzaWRlQ29tcG9uZW50IHtcbiAgICAvLyBUT0RPOiByZWZhY3RvciB0byBzaWduYWwgaW5wdXRzIGFmdGVyIEFuZ3VsYXIgdXBkYXRlXG4gICAgcHVibGljIHJlYWRvbmx5IGV4cGFuZGVkID0gc2lnbmFsKGZhbHNlKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCB0dWlOYXZpZ2F0aW9uQXNpZGUoZXhwYW5kZWQ6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5leHBhbmRlZC5zZXQoZXhwYW5kZWQpO1xuICAgIH1cbn1cbiJdfQ==