@taiga-ui/kit
Version:
Taiga UI Angular main components kit
54 lines (50 loc) • 8.59 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { tuiSlideIn, tuiFadeIn } from '@taiga-ui/core/animations';
import { tuiButtonOptionsProvider, TuiButton } 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';
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 }); }
}
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
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiDrawer };
//# sourceMappingURL=taiga-ui-kit-components-drawer.mjs.map