@taiga-ui/kit
Version:
Taiga UI Angular main components kit
44 lines • 12.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/cdk/directives/animated";
class TuiDrawer {
constructor() {
this.direction = 'right';
this.overlay = false;
}
get from() {
return this.direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
}
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: { "class._overlay": "overlay", "style.border-top-left-radius": "direction === \"left\" ? 0 : null", "style.border-top-right-radius": "direction === \"right\" ? 0 : null", "style.left": "direction === \"left\" ? 0 : null", "style.right": "direction === \"right\" ? 0 : null", "style.--tui-from": "from" } }, providers: [
tuiButtonOptionsProvider({
appearance: 'secondary',
size: 's',
}),
], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "<aside class=\"t-aside\">\n <tui-scrollbar class=\"t-scrollbar\">\n <ng-content select=\"header\" />\n <div class=\"t-content\">\n <ng-content />\n </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:max(3rem,env(safe-area-inset-top));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-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host._overlay>.t-aside{padding-block-start:env(safe-area-inset-top)}: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;box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom)}.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"] }], 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: [TuiScrollbar], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiButtonOptionsProvider({
appearance: 'secondary',
size: 's',
}),
], hostDirectives: [TuiAnimated], host: {
'[class._overlay]': 'overlay',
'[style.border-top-left-radius]': 'direction === "left" ? 0 : null',
'[style.border-top-right-radius]': 'direction === "right" ? 0 : null',
'[style.left]': 'direction === "left" ? 0 : null',
'[style.right]': 'direction === "right" ? 0 : null',
'[style.--tui-from]': 'from',
}, template: "<aside class=\"t-aside\">\n <tui-scrollbar class=\"t-scrollbar\">\n <ng-content select=\"header\" />\n <div class=\"t-content\">\n <ng-content />\n </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:max(3rem,env(safe-area-inset-top));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-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host._overlay>.t-aside{padding-block-start:env(safe-area-inset-top)}: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;box-sizing:border-box;padding-block-end:env(safe-area-inset-bottom)}.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL2RyYXdlci9kcmF3ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvZHJhd2VyL2RyYXdlci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM5RCxPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMxRSxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0scUNBQXFDLENBQUM7OztBQUdqRSxNQXVCYSxTQUFTO0lBdkJ0QjtRQXlCVyxjQUFTLEdBQTJCLE9BQU8sQ0FBQztRQUc1QyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBSzFCO0lBSEcsSUFBVyxJQUFJO1FBQ1gsT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLE9BQU8sQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLG1CQUFtQixDQUFDO0lBQ2pGLENBQUM7K0dBVFEsU0FBUzttR0FBVCxTQUFTLHdiQWhCUDtZQUNQLHdCQUF3QixDQUFDO2dCQUNyQixVQUFVLEVBQUUsV0FBVztnQkFDdkIsSUFBSSxFQUFFLEdBQUc7YUFDWixDQUFDO1NBQ0wsMkVDbEJMLG1YQWNBLHFpRkRMYyxZQUFZOztTQW9CYixTQUFTOzRGQUFULFNBQVM7a0JBdkJyQixTQUFTO2lDQUNNLElBQUksWUFDTixZQUFZLFdBQ2IsQ0FBQyxZQUFZLENBQUMsbUJBR04sdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDUCx3QkFBd0IsQ0FBQzs0QkFDckIsVUFBVSxFQUFFLFdBQVc7NEJBQ3ZCLElBQUksRUFBRSxHQUFHO3lCQUNaLENBQUM7cUJBQ0wsa0JBQ2UsQ0FBQyxXQUFXLENBQUMsUUFDdkI7d0JBQ0Ysa0JBQWtCLEVBQUUsU0FBUzt3QkFDN0IsZ0NBQWdDLEVBQUUsaUNBQWlDO3dCQUNuRSxpQ0FBaUMsRUFBRSxrQ0FBa0M7d0JBQ3JFLGNBQWMsRUFBRSxpQ0FBaUM7d0JBQ2pELGVBQWUsRUFBRSxrQ0FBa0M7d0JBQ25ELG9CQUFvQixFQUFFLE1BQU07cUJBQy9COzhCQUlNLFNBQVM7c0JBRGYsS0FBSztnQkFJQyxPQUFPO3NCQURiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpQW5pbWF0ZWR9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGlyZWN0aXZlcy9hbmltYXRlZCc7XG5pbXBvcnQge3R1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlTY3JvbGxiYXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvc2Nyb2xsYmFyJztcbmltcG9ydCB7dHlwZSBUdWlIb3Jpem9udGFsRGlyZWN0aW9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktZHJhd2VyJyxcbiAgICBpbXBvcnRzOiBbVHVpU2Nyb2xsYmFyXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHJhd2VyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RyYXdlci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHR1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcih7XG4gICAgICAgICAgICBhcHBlYXJhbmNlOiAnc2Vjb25kYXJ5JyxcbiAgICAgICAgICAgIHNpemU6ICdzJyxcbiAgICAgICAgfSksXG4gICAgXSxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aUFuaW1hdGVkXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbY2xhc3MuX292ZXJsYXldJzogJ292ZXJsYXknLFxuICAgICAgICAnW3N0eWxlLmJvcmRlci10b3AtbGVmdC1yYWRpdXNdJzogJ2RpcmVjdGlvbiA9PT0gXCJsZWZ0XCIgPyAwIDogbnVsbCcsXG4gICAgICAgICdbc3R5bGUuYm9yZGVyLXRvcC1yaWdodC1yYWRpdXNdJzogJ2RpcmVjdGlvbiA9PT0gXCJyaWdodFwiID8gMCA6IG51bGwnLFxuICAgICAgICAnW3N0eWxlLmxlZnRdJzogJ2RpcmVjdGlvbiA9PT0gXCJsZWZ0XCIgPyAwIDogbnVsbCcsXG4gICAgICAgICdbc3R5bGUucmlnaHRdJzogJ2RpcmVjdGlvbiA9PT0gXCJyaWdodFwiID8gMCA6IG51bGwnLFxuICAgICAgICAnW3N0eWxlLi0tdHVpLWZyb21dJzogJ2Zyb20nLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aURyYXdlciB7XG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGlyZWN0aW9uOiBUdWlIb3Jpem9udGFsRGlyZWN0aW9uID0gJ3JpZ2h0JztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG92ZXJsYXkgPSBmYWxzZTtcblxuICAgIHB1YmxpYyBnZXQgZnJvbSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5kaXJlY3Rpb24gPT09ICdyaWdodCcgPyAndHJhbnNsYXRlWCgxMDAlKScgOiAndHJhbnNsYXRlWCgtMTAwJSknO1xuICAgIH1cbn1cbiIsIjxhc2lkZSBjbGFzcz1cInQtYXNpZGVcIj5cbiAgICA8dHVpLXNjcm9sbGJhciBjbGFzcz1cInQtc2Nyb2xsYmFyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImhlYWRlclwiIC8+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvdHVpLXNjcm9sbGJhcj5cbiAgICA8dHVpLXNjcm9sbGJhclxuICAgICAgICBjbGFzcz1cInQtZm9vdGVyXCJcbiAgICAgICAgW2hpZGRlbl09XCJ0cnVlXCJcbiAgICA+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiIC8+XG4gICAgPC90dWktc2Nyb2xsYmFyPlxuPC9hc2lkZT5cbiJdfQ==