@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
45 lines • 9.57 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
import { tuiSlideIn } from '@taiga-ui/core/animations';
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
import { tuiToAnimationOptions } from '@taiga-ui/core/utils/miscellaneous';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TuiSidebarDirective } from './sidebar.directive';
import * as i0 from "@angular/core";
/**
* @deprecated use {@link TuiDrawer} instead
*/
class TuiSidebarComponent {
constructor() {
this.directive = inject(TuiSidebarDirective);
this.options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
this.left = { ...this.options, value: 'left' };
this.right = { ...this.options, value: 'right' };
}
ngDoCheck() {
this.directive.check();
}
get animation() {
return this.direction === 'left' ? this.left : this.right;
}
get direction() {
return this.directive.direction;
}
get content() {
return this.directive.content;
}
get autoWidth() {
return this.directive.autoWidth;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSidebarComponent, isStandalone: true, selector: "aside[tuiSidebar]", host: { properties: { "class": "\"t-\" + direction", "@tuiSlideIn": "animation" } }, ngImport: i0, template: "<div\n tuiActiveZone\n class=\"t-wrapper\"\n [class.t-wrapper_auto-width]=\"autoWidth\"\n>\n <ng-container *polymorpheusOutlet=\"content as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;display:flex}:host:before,:host:after{position:absolute;top:0;left:0;inline-size:100%;content:\"\";block-size:100%;background:#00000061;animation:tuiFadeIn var(--tui-duration)}:host:before{left:-100%;inline-size:200%}:host:after{left:100%}:host.ng-animating:before,:host.ng-animating:after{opacity:0;transition:opacity var(--tui-duration)}:host.t-right{justify-content:flex-end}:host.t-left{justify-content:flex-start}.t-wrapper{position:relative;display:flex;flex-direction:column;background:var(--tui-background-base);box-shadow:0 10rem var(--tui-background-base);inline-size:17.25rem}.t-wrapper_auto-width{inline-size:auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }], animations: [tuiSlideIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiSidebarComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSidebarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'aside[tuiSidebar]', imports: [PolymorpheusOutlet, TuiActiveZone], changeDetection: ChangeDetectionStrategy.OnPush, animations: [tuiSlideIn], host: {
'[class]': '"t-" + direction',
'[@tuiSlideIn]': 'animation',
}, template: "<div\n tuiActiveZone\n class=\"t-wrapper\"\n [class.t-wrapper_auto-width]=\"autoWidth\"\n>\n <ng-container *polymorpheusOutlet=\"content as text\">\n {{ text }}\n </ng-container>\n</div>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;display:flex}:host:before,:host:after{position:absolute;top:0;left:0;inline-size:100%;content:\"\";block-size:100%;background:#00000061;animation:tuiFadeIn var(--tui-duration)}:host:before{left:-100%;inline-size:200%}:host:after{left:100%}:host.ng-animating:before,:host.ng-animating:after{opacity:0;transition:opacity var(--tui-duration)}:host.t-right{justify-content:flex-end}:host.t-left{justify-content:flex-start}.t-wrapper{position:relative;display:flex;flex-direction:column;background:var(--tui-background-base);box-shadow:0 10rem var(--tui-background-base);inline-size:17.25rem}.t-wrapper_auto-width{inline-size:auto}\n"] }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1tb2JpbGUvZGlyZWN0aXZlcy9zaWRlYmFyL3NpZGViYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tbW9iaWxlL2RpcmVjdGl2ZXMvc2lkZWJhci9zaWRlYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBZ0IsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZGLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxzQ0FBc0MsQ0FBQztBQUNuRSxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckQsT0FBTyxFQUFDLG9CQUFvQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFFM0QsT0FBTyxFQUFDLHFCQUFxQixFQUFDLE1BQU0sb0NBQW9DLENBQUM7QUFDekUsT0FBTyxFQUEyQixrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBRXBGLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQUV4RDs7R0FFRztBQUNILE1BYWEsbUJBQW1CO0lBYmhDO1FBY3FCLGNBQVMsR0FBRyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUN4QyxZQUFPLEdBQUcscUJBQXFCLENBQUMsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQztRQUM5RCxTQUFJLEdBQUcsRUFBQyxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxDQUFDO1FBQ3hDLFVBQUssR0FBRyxFQUFDLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFDLENBQUM7S0FxQjlEO0lBbkJVLFNBQVM7UUFDWixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxJQUFjLFNBQVM7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztJQUM5RCxDQUFDO0lBRUQsSUFBYyxTQUFTO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQWMsT0FBTztRQUNqQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUFjLFNBQVM7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQztJQUNwQyxDQUFDOytHQXhCUSxtQkFBbUI7bUdBQW5CLG1CQUFtQixrS0MzQmhDLG9OQVNBLGl2QkRRYyxrQkFBa0IsOEhBQUUsYUFBYSxrUEFJL0IsQ0FBQyxVQUFVLENBQUM7O1NBTWYsbUJBQW1COzRGQUFuQixtQkFBbUI7a0JBYi9CLFNBQVM7aUNBQ00sSUFBSSxZQUNOLG1CQUFtQixXQUNwQixDQUFDLGtCQUFrQixFQUFFLGFBQWEsQ0FBQyxtQkFHM0IsdUJBQXVCLENBQUMsTUFBTSxjQUNuQyxDQUFDLFVBQVUsQ0FBQyxRQUNsQjt3QkFDRixTQUFTLEVBQUUsa0JBQWtCO3dCQUM3QixlQUFlLEVBQUUsV0FBVztxQkFDL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge3R5cGUgQW5pbWF0aW9uT3B0aW9uc30gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIHR5cGUgRG9DaGVjaywgaW5qZWN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpQWN0aXZlWm9uZX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9kaXJlY3RpdmVzL2FjdGl2ZS16b25lJztcbmltcG9ydCB7dHVpU2xpZGVJbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1RVSV9BTklNQVRJT05TX1NQRUVEfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHt0eXBlIFR1aUhvcml6b250YWxEaXJlY3Rpb259IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcbmltcG9ydCB7dHVpVG9BbmltYXRpb25PcHRpb25zfSBmcm9tICdAdGFpZ2EtdWkvY29yZS91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7dHlwZSBQb2x5bW9ycGhldXNDb250ZW50LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge1R1aVNpZGViYXJEaXJlY3RpdmV9IGZyb20gJy4vc2lkZWJhci5kaXJlY3RpdmUnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkIHVzZSB7QGxpbmsgVHVpRHJhd2VyfSBpbnN0ZWFkXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdhc2lkZVt0dWlTaWRlYmFyXScsXG4gICAgaW1wb3J0czogW1BvbHltb3JwaGV1c091dGxldCwgVHVpQWN0aXZlWm9uZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NpZGViYXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2lkZWJhci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgYW5pbWF0aW9uczogW3R1aVNsaWRlSW5dLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzc10nOiAnXCJ0LVwiICsgZGlyZWN0aW9uJyxcbiAgICAgICAgJ1tAdHVpU2xpZGVJbl0nOiAnYW5pbWF0aW9uJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTaWRlYmFyQ29tcG9uZW50IGltcGxlbWVudHMgRG9DaGVjayB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBkaXJlY3RpdmUgPSBpbmplY3QoVHVpU2lkZWJhckRpcmVjdGl2ZSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gdHVpVG9BbmltYXRpb25PcHRpb25zKGluamVjdChUVUlfQU5JTUFUSU9OU19TUEVFRCkpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgbGVmdCA9IHsuLi50aGlzLm9wdGlvbnMsIHZhbHVlOiAnbGVmdCd9O1xuICAgIHByaXZhdGUgcmVhZG9ubHkgcmlnaHQgPSB7Li4udGhpcy5vcHRpb25zLCB2YWx1ZTogJ3JpZ2h0J307XG5cbiAgICBwdWJsaWMgbmdEb0NoZWNrKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRpcmVjdGl2ZS5jaGVjaygpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgYW5pbWF0aW9uKCk6IEFuaW1hdGlvbk9wdGlvbnMge1xuICAgICAgICByZXR1cm4gdGhpcy5kaXJlY3Rpb24gPT09ICdsZWZ0JyA/IHRoaXMubGVmdCA6IHRoaXMucmlnaHQ7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBkaXJlY3Rpb24oKTogVHVpSG9yaXpvbnRhbERpcmVjdGlvbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmRpcmVjdGl2ZS5kaXJlY3Rpb247XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBjb250ZW50KCk6IFBvbHltb3JwaGV1c0NvbnRlbnQge1xuICAgICAgICByZXR1cm4gdGhpcy5kaXJlY3RpdmUuY29udGVudDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IGF1dG9XaWR0aCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZGlyZWN0aXZlLmF1dG9XaWR0aDtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgdHVpQWN0aXZlWm9uZVxuICAgIGNsYXNzPVwidC13cmFwcGVyXCJcbiAgICBbY2xhc3MudC13cmFwcGVyX2F1dG8td2lkdGhdPVwiYXV0b1dpZHRoXCJcbj5cbiAgICA8bmctY29udGFpbmVyICpwb2x5bW9ycGhldXNPdXRsZXQ9XCJjb250ZW50IGFzIHRleHRcIj5cbiAgICAgICAge3sgdGV4dCB9fVxuICAgIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=