@taiga-ui/kit
Version:
Taiga UI Angular main components kit
47 lines • 13.3 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { tuiFadeIn, tuiSlideIn } from '@taiga-ui/core/animations';
import { TuiButton, tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
import { tuiToAnimationOptions } from '@taiga-ui/core/utils/miscellaneous';
import * as i0 from "@angular/core";
class TuiDrawer {
constructor() {
this.options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
this.direction = 'right';
this.overlay = false;
}
get animation() {
return { ...this.options, value: this.direction };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDrawer, isStandalone: true, selector: "tui-drawer", inputs: { direction: "direction", overlay: "overlay" }, host: { properties: { "@tuiFadeIn": "options", "@tuiSlideIn": "animation", "class._overlay": "overlay", "style.border-start-start-radius": "direction === \"left\" ? 0 : null", "style.border-start-end-radius": "direction === \"right\" ? 0 : null", "style.left": "direction === \"left\" ? 0 : null", "style.right": "direction === \"right\" ? 0 : null" } }, providers: [
tuiButtonOptionsProvider({
appearance: 'secondary',
size: 's',
}),
], ngImport: i0, template: "<aside class=\"t-aside\">\n <tui-scrollbar class=\"t-scrollbar\">\n <ng-content select=\"header\" />\n <div class=\"t-content\"><ng-content /></div>\n </tui-scrollbar>\n <tui-scrollbar\n class=\"t-footer\"\n [hidden]=\"true\"\n >\n <ng-content select=\"footer\" />\n </tui-scrollbar>\n</aside>\n", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-start-start-radius:1.25rem;border-start-end-radius:1.25rem}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"], dependencies: [{ kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], animations: [tuiSlideIn, tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiDrawer };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDrawer, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-drawer', imports: [TuiButton, TuiScrollbar], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiButtonOptionsProvider({
appearance: 'secondary',
size: 's',
}),
], animations: [tuiSlideIn, tuiFadeIn], host: {
'[@tuiFadeIn]': 'options',
'[@tuiSlideIn]': 'animation',
'[class._overlay]': 'overlay',
'[style.border-start-start-radius]': 'direction === "left" ? 0 : null',
'[style.border-start-end-radius]': 'direction === "right" ? 0 : null',
'[style.left]': 'direction === "left" ? 0 : null',
'[style.right]': 'direction === "right" ? 0 : null',
}, template: "<aside class=\"t-aside\">\n <tui-scrollbar class=\"t-scrollbar\">\n <ng-content select=\"header\" />\n <div class=\"t-content\"><ng-content /></div>\n </tui-scrollbar>\n <tui-scrollbar\n class=\"t-footer\"\n [hidden]=\"true\"\n >\n <ng-content select=\"footer\" />\n </tui-scrollbar>\n</aside>\n", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-start-start-radius:1.25rem;border-start-end-radius:1.25rem}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"] }]
}], propDecorators: { direction: [{
type: Input
}], overlay: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2RyYXdlci9kcmF3ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvZHJhd2VyL2RyYXdlci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRixPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0scUNBQXFDLENBQUM7QUFDakUsT0FBTyxFQUFDLG9CQUFvQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFFM0QsT0FBTyxFQUFDLHFCQUFxQixFQUFDLE1BQU0sb0NBQW9DLENBQUM7O0FBRXpFLE1Bd0JhLFNBQVM7SUF4QnRCO1FBeUJ1QixZQUFPLEdBQUcscUJBQXFCLENBQUMsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQztRQUcxRSxjQUFTLEdBQTJCLE9BQU8sQ0FBQztRQUc1QyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBSzFCO0lBSEcsSUFBYyxTQUFTO1FBQ25CLE9BQU8sRUFBQyxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUMsQ0FBQztJQUNwRCxDQUFDOytHQVhRLFNBQVM7bUdBQVQsU0FBUyxvZEFqQlA7WUFDUCx3QkFBd0IsQ0FBQztnQkFDckIsVUFBVSxFQUFFLFdBQVc7Z0JBQ3ZCLElBQUksRUFBRSxHQUFHO2FBQ1osQ0FBQztTQUNMLDBCQ3JCTCwyVkFZQSxpMEVEQXlCLFlBQVksZ0VBVXJCLENBQUMsVUFBVSxFQUFFLFNBQVMsQ0FBQzs7U0FXMUIsU0FBUzs0RkFBVCxTQUFTO2tCQXhCckIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sWUFBWSxXQUNiLENBQUMsU0FBUyxFQUFFLFlBQVksQ0FBQyxtQkFHakIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDUCx3QkFBd0IsQ0FBQzs0QkFDckIsVUFBVSxFQUFFLFdBQVc7NEJBQ3ZCLElBQUksRUFBRSxHQUFHO3lCQUNaLENBQUM7cUJBQ0wsY0FDVyxDQUFDLFVBQVUsRUFBRSxTQUFTLENBQUMsUUFDN0I7d0JBQ0YsY0FBYyxFQUFFLFNBQVM7d0JBQ3pCLGVBQWUsRUFBRSxXQUFXO3dCQUM1QixrQkFBa0IsRUFBRSxTQUFTO3dCQUM3QixtQ0FBbUMsRUFBRSxpQ0FBaUM7d0JBQ3RFLGlDQUFpQyxFQUFFLGtDQUFrQzt3QkFDckUsY0FBYyxFQUFFLGlDQUFpQzt3QkFDakQsZUFBZSxFQUFFLGtDQUFrQztxQkFDdEQ7OEJBTU0sU0FBUztzQkFEZixLQUFLO2dCQUlDLE9BQU87c0JBRGIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHtBbmltYXRpb25PcHRpb25zfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R1aUZhZGVJbiwgdHVpU2xpZGVJbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1R1aUJ1dHRvbiwgdHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1R1aVNjcm9sbGJhcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9zY3JvbGxiYXInO1xuaW1wb3J0IHtUVUlfQU5JTUFUSU9OU19TUEVFRH0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcbmltcG9ydCB0eXBlIHtUdWlIb3Jpem9udGFsRGlyZWN0aW9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5pbXBvcnQge3R1aVRvQW5pbWF0aW9uT3B0aW9uc30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktZHJhd2VyJyxcbiAgICBpbXBvcnRzOiBbVHVpQnV0dG9uLCBUdWlTY3JvbGxiYXJdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9kcmF3ZXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZHJhd2VyLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgdHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyKHtcbiAgICAgICAgICAgIGFwcGVhcmFuY2U6ICdzZWNvbmRhcnknLFxuICAgICAgICAgICAgc2l6ZTogJ3MnLFxuICAgICAgICB9KSxcbiAgICBdLFxuICAgIGFuaW1hdGlvbnM6IFt0dWlTbGlkZUluLCB0dWlGYWRlSW5dLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tAdHVpRmFkZUluXSc6ICdvcHRpb25zJyxcbiAgICAgICAgJ1tAdHVpU2xpZGVJbl0nOiAnYW5pbWF0aW9uJyxcbiAgICAgICAgJ1tjbGFzcy5fb3ZlcmxheV0nOiAnb3ZlcmxheScsXG4gICAgICAgICdbc3R5bGUuYm9yZGVyLXN0YXJ0LXN0YXJ0LXJhZGl1c10nOiAnZGlyZWN0aW9uID09PSBcImxlZnRcIiA/IDAgOiBudWxsJyxcbiAgICAgICAgJ1tzdHlsZS5ib3JkZXItc3RhcnQtZW5kLXJhZGl1c10nOiAnZGlyZWN0aW9uID09PSBcInJpZ2h0XCIgPyAwIDogbnVsbCcsXG4gICAgICAgICdbc3R5bGUubGVmdF0nOiAnZGlyZWN0aW9uID09PSBcImxlZnRcIiA/IDAgOiBudWxsJyxcbiAgICAgICAgJ1tzdHlsZS5yaWdodF0nOiAnZGlyZWN0aW9uID09PSBcInJpZ2h0XCIgPyAwIDogbnVsbCcsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpRHJhd2VyIHtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgb3B0aW9ucyA9IHR1aVRvQW5pbWF0aW9uT3B0aW9ucyhpbmplY3QoVFVJX0FOSU1BVElPTlNfU1BFRUQpKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGRpcmVjdGlvbjogVHVpSG9yaXpvbnRhbERpcmVjdGlvbiA9ICdyaWdodCc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBvdmVybGF5ID0gZmFsc2U7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IGFuaW1hdGlvbigpOiBBbmltYXRpb25PcHRpb25zICYge3ZhbHVlOiBzdHJpbmd9IHtcbiAgICAgICAgcmV0dXJuIHsuLi50aGlzLm9wdGlvbnMsIHZhbHVlOiB0aGlzLmRpcmVjdGlvbn07XG4gICAgfVxufVxuIiwiPGFzaWRlIGNsYXNzPVwidC1hc2lkZVwiPlxuICAgIDx0dWktc2Nyb2xsYmFyIGNsYXNzPVwidC1zY3JvbGxiYXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiaGVhZGVyXCIgLz5cbiAgICAgICAgPGRpdiBjbGFzcz1cInQtY29udGVudFwiPjxuZy1jb250ZW50IC8+PC9kaXY+XG4gICAgPC90dWktc2Nyb2xsYmFyPlxuICAgIDx0dWktc2Nyb2xsYmFyXG4gICAgICAgIGNsYXNzPVwidC1mb290ZXJcIlxuICAgICAgICBbaGlkZGVuXT1cInRydWVcIlxuICAgID5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZm9vdGVyXCIgLz5cbiAgICA8L3R1aS1zY3JvbGxiYXI+XG48L2FzaWRlPlxuIl19