@taiga-ui/kit
Version:
Taiga UI Angular main components kit
40 lines • 10.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiFadeIn, tuiSlideInTop } from '@taiga-ui/core/animations';
import { TUI_BUTTON_OPTIONS } from '@taiga-ui/core/components/button';
import { TuiExpandComponent } from '@taiga-ui/core/components/expand';
import { tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
import { tuiToAnimationOptions } from '@taiga-ui/core/utils/miscellaneous';
import * as i0 from "@angular/core";
class TuiActionBarComponent {
constructor() {
this.animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
this.expanded = false;
this.size = 'm';
this.appearance = 'glass';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiActionBarComponent, isStandalone: true, selector: "tui-action-bar", inputs: { expanded: "expanded", size: "size" }, host: { attributes: { "tuiTheme": "dark" }, properties: { "attr.data-size": "size", "@tuiFadeIn": "animation", "@tuiSlideInTop": "animation" } }, providers: [
tuiProvide(TUI_BUTTON_OPTIONS, TuiActionBarComponent),
tuiLinkOptionsProvider({ appearance: 'action-grayscale', pseudo: true }),
], ngImport: i0, template: "<tui-expand [expanded]=\"expanded\">\n <ng-content select=\"tui-data-list,[tuiMenu]\" />\n</tui-expand>\n\n<div class=\"t-content\">\n <ng-content />\n\n <div class=\"t-actions\">\n <ng-content select=\"a,button,[tuiAction]\" />\n </div>\n</div>\n", styles: [":host{position:fixed;left:max(calc(50% - 37rem),1.5rem);bottom:1rem;display:flex;inline-size:100%;max-inline-size:min(calc(100vw - 3rem),74rem);box-sizing:border-box;border-radius:1rem;background:var(--tui-service-backdrop);color:var(--tui-text-primary);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);flex-direction:column;justify-content:center;padding:.75rem;text-indent:.75rem;font:var(--tui-font-text-m);white-space:nowrap}:host[data-size=s]{border-radius:var(--tui-radius-l);font:var(--tui-font-text-s);padding:.5rem}:host-context(tui-root._mobile) :host{padding:1rem;border-radius:1.25rem;text-indent:0}:host ::ng-deep tui-data-list[data-size]{padding:0;margin:-.625rem -.625rem 1rem}:host ::ng-deep tui-items-with-more{text-indent:.5rem}:host-context(tui-root._mobile) :host ::ng-deep tui-items-with-more{display:none}.t-content{display:flex;align-items:center;gap:.7rem 2.5rem}:host-context(tui-root._mobile) .t-content{flex-wrap:wrap}.t-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-inline-start:auto;text-indent:0}:host-context(tui-root._mobile) .t-actions{flex:1}:host-context(tui-root._mobile) .t-actions ::ng-deep [tuiButton]{flex:1}\n"], dependencies: [{ kind: "component", type: TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], animations: [tuiFadeIn, tuiSlideInTop], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiActionBarComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiActionBarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-action-bar', imports: [TuiExpandComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
tuiProvide(TUI_BUTTON_OPTIONS, TuiActionBarComponent),
tuiLinkOptionsProvider({ appearance: 'action-grayscale', pseudo: true }),
], animations: [tuiFadeIn, tuiSlideInTop], host: {
tuiTheme: 'dark',
'[attr.data-size]': 'size',
'[@tuiFadeIn]': 'animation',
'[@tuiSlideInTop]': 'animation',
}, template: "<tui-expand [expanded]=\"expanded\">\n <ng-content select=\"tui-data-list,[tuiMenu]\" />\n</tui-expand>\n\n<div class=\"t-content\">\n <ng-content />\n\n <div class=\"t-actions\">\n <ng-content select=\"a,button,[tuiAction]\" />\n </div>\n</div>\n", styles: [":host{position:fixed;left:max(calc(50% - 37rem),1.5rem);bottom:1rem;display:flex;inline-size:100%;max-inline-size:min(calc(100vw - 3rem),74rem);box-sizing:border-box;border-radius:1rem;background:var(--tui-service-backdrop);color:var(--tui-text-primary);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);flex-direction:column;justify-content:center;padding:.75rem;text-indent:.75rem;font:var(--tui-font-text-m);white-space:nowrap}:host[data-size=s]{border-radius:var(--tui-radius-l);font:var(--tui-font-text-s);padding:.5rem}:host-context(tui-root._mobile) :host{padding:1rem;border-radius:1.25rem;text-indent:0}:host ::ng-deep tui-data-list[data-size]{padding:0;margin:-.625rem -.625rem 1rem}:host ::ng-deep tui-items-with-more{text-indent:.5rem}:host-context(tui-root._mobile) :host ::ng-deep tui-items-with-more{display:none}.t-content{display:flex;align-items:center;gap:.7rem 2.5rem}:host-context(tui-root._mobile) .t-content{flex-wrap:wrap}.t-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-inline-start:auto;text-indent:0}:host-context(tui-root._mobile) .t-actions{flex:1}:host-context(tui-root._mobile) .t-actions ::ng-deep [tuiButton]{flex:1}\n"] }]
}], propDecorators: { expanded: [{
type: Input
}], size: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9hY3Rpb24tYmFyL2FjdGlvbi1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYWN0aW9uLWJhci9hY3Rpb24tYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM3RCxPQUFPLEVBQUMsU0FBUyxFQUFFLGFBQWEsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBRW5FLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQ3BFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQ3BFLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3RFLE9BQU8sRUFBQyxvQkFBb0IsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBRTNELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDOztBQUV6RSxNQW1CYSxxQkFBcUI7SUFuQmxDO1FBb0J1QixjQUFTLEdBQUcscUJBQXFCLENBQUMsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQztRQUc1RSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLFNBQUksR0FBYSxHQUFHLENBQUM7UUFFWixlQUFVLEdBQUcsT0FBTyxDQUFDO0tBQ3hDOytHQVZZLHFCQUFxQjttR0FBckIscUJBQXFCLCtQQVpuQjtZQUNQLFVBQVUsQ0FBQyxrQkFBa0IsRUFBRSxxQkFBcUIsQ0FBQztZQUNyRCxzQkFBc0IsQ0FBQyxFQUFDLFVBQVUsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFDLENBQUM7U0FDekUsMEJDckJMLDRRQVdBLHN0Q0RHYyxrQkFBa0Isd0VBUWhCLENBQUMsU0FBUyxFQUFFLGFBQWEsQ0FBQzs7U0FRN0IscUJBQXFCOzRGQUFyQixxQkFBcUI7a0JBbkJqQyxTQUFTO2lDQUNNLElBQUksWUFDTixnQkFBZ0IsV0FDakIsQ0FBQyxrQkFBa0IsQ0FBQyxtQkFHWix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNQLFVBQVUsQ0FBQyxrQkFBa0Isd0JBQXdCO3dCQUNyRCxzQkFBc0IsQ0FBQyxFQUFDLFVBQVUsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFDLENBQUM7cUJBQ3pFLGNBQ1csQ0FBQyxTQUFTLEVBQUUsYUFBYSxDQUFDLFFBQ2hDO3dCQUNGLFFBQVEsRUFBRSxNQUFNO3dCQUNoQixrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQixjQUFjLEVBQUUsV0FBVzt3QkFDM0Isa0JBQWtCLEVBQUUsV0FBVztxQkFDbEM7OEJBTU0sUUFBUTtzQkFEZCxLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R1aVByb3ZpZGV9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge3R1aUZhZGVJbiwgdHVpU2xpZGVJblRvcH0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvYW5pbWF0aW9ucyc7XG5pbXBvcnQgdHlwZSB7VHVpQnV0dG9uT3B0aW9uc30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUVUlfQlVUVE9OX09QVElPTlN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvYnV0dG9uJztcbmltcG9ydCB7VHVpRXhwYW5kQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2V4cGFuZCc7XG5pbXBvcnQge3R1aUxpbmtPcHRpb25zUHJvdmlkZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvbGluayc7XG5pbXBvcnQge1RVSV9BTklNQVRJT05TX1NQRUVEfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHR5cGUge1R1aVNpemVTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5pbXBvcnQge3R1aVRvQW5pbWF0aW9uT3B0aW9uc30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktYWN0aW9uLWJhcicsXG4gICAgaW1wb3J0czogW1R1aUV4cGFuZENvbXBvbmVudF0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi1iYXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYWN0aW9uLWJhci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHR1aVByb3ZpZGUoVFVJX0JVVFRPTl9PUFRJT05TLCBUdWlBY3Rpb25CYXJDb21wb25lbnQpLFxuICAgICAgICB0dWlMaW5rT3B0aW9uc1Byb3ZpZGVyKHthcHBlYXJhbmNlOiAnYWN0aW9uLWdyYXlzY2FsZScsIHBzZXVkbzogdHJ1ZX0pLFxuICAgIF0sXG4gICAgYW5pbWF0aW9uczogW3R1aUZhZGVJbiwgdHVpU2xpZGVJblRvcF0sXG4gICAgaG9zdDoge1xuICAgICAgICB0dWlUaGVtZTogJ2RhcmsnLFxuICAgICAgICAnW2F0dHIuZGF0YS1zaXplXSc6ICdzaXplJyxcbiAgICAgICAgJ1tAdHVpRmFkZUluXSc6ICdhbmltYXRpb24nLFxuICAgICAgICAnW0B0dWlTbGlkZUluVG9wXSc6ICdhbmltYXRpb24nLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFjdGlvbkJhckNvbXBvbmVudCBpbXBsZW1lbnRzIFR1aUJ1dHRvbk9wdGlvbnMge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBhbmltYXRpb24gPSB0dWlUb0FuaW1hdGlvbk9wdGlvbnMoaW5qZWN0KFRVSV9BTklNQVRJT05TX1NQRUVEKSk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBleHBhbmRlZCA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2l6ZTogVHVpU2l6ZVMgPSAnbSc7XG5cbiAgICBwdWJsaWMgcmVhZG9ubHkgYXBwZWFyYW5jZSA9ICdnbGFzcyc7XG59XG4iLCI8dHVpLWV4cGFuZCBbZXhwYW5kZWRdPVwiZXhwYW5kZWRcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ0dWktZGF0YS1saXN0LFt0dWlNZW51XVwiIC8+XG48L3R1aS1leHBhbmQ+XG5cbjxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICA8bmctY29udGVudCAvPlxuXG4gICAgPGRpdiBjbGFzcz1cInQtYWN0aW9uc1wiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJhLGJ1dHRvbixbdHVpQWN0aW9uXVwiIC8+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==