@taiga-ui/kit
Version:
Taiga UI Angular main components kit
36 lines • 9.47 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
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 * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/cdk/directives/animated";
class TuiActionBarComponent {
constructor() {
this.expanded = false;
this.size = 'm';
this.appearance = 'secondary-grayscale';
}
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" } }, providers: [
tuiProvide(TUI_BUTTON_OPTIONS, TuiActionBarComponent),
tuiLinkOptionsProvider({ appearance: 'action-grayscale', pseudo: true }),
], hostDirectives: [{ directive: i1.TuiAnimated }], 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:max(1rem,env(safe-area-inset-bottom));display:flex;inline-size:100%;max-inline-size:min(calc(100vw - 3rem),74rem);box-sizing:border-box;border-radius:1rem;background:var(--tui-background-elevation-2);background:color-mix(in hsl,var(--tui-background-elevation-2) 75%,transparent);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.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}: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"] }], 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 }),
], hostDirectives: [TuiAnimated], host: {
tuiTheme: 'dark',
'[attr.data-size]': 'size',
}, 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:max(1rem,env(safe-area-inset-bottom));display:flex;inline-size:100%;max-inline-size:min(calc(100vw - 3rem),74rem);box-sizing:border-box;border-radius:1rem;background:var(--tui-background-elevation-2);background:color-mix(in hsl,var(--tui-background-elevation-2) 75%,transparent);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.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9hY3Rpb24tYmFyL2FjdGlvbi1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYWN0aW9uLWJhci9hY3Rpb24tYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEUsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUM3RCxPQUFPLEVBQ0gsa0JBQWtCLEdBRXJCLE1BQU0sa0NBQWtDLENBQUM7QUFDMUMsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDcEUsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sZ0NBQWdDLENBQUM7OztBQUd0RSxNQWlCYSxxQkFBcUI7SUFqQmxDO1FBbUJXLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsU0FBSSxHQUFhLEdBQUcsQ0FBQztRQUVaLGVBQVUsR0FBRyxxQkFBcUIsQ0FBQztLQUN0RDsrR0FSWSxxQkFBcUI7bUdBQXJCLHFCQUFxQixxTUFWbkI7WUFDUCxVQUFVLENBQUMsa0JBQWtCLEVBQUUscUJBQXFCLENBQUM7WUFDckQsc0JBQXNCLENBQUMsRUFBQyxVQUFVLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBQyxDQUFDO1NBQ3pFLDJFQ3JCTCw0UUFXQSw0NENER2Msa0JBQWtCOztTQWNuQixxQkFBcUI7NEZBQXJCLHFCQUFxQjtrQkFqQmpDLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGdCQUFnQixXQUNqQixDQUFDLGtCQUFrQixDQUFDLG1CQUdaLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1AsVUFBVSxDQUFDLGtCQUFrQix3QkFBd0I7d0JBQ3JELHNCQUFzQixDQUFDLEVBQUMsVUFBVSxFQUFFLGtCQUFrQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUMsQ0FBQztxQkFDekUsa0JBQ2UsQ0FBQyxXQUFXLENBQUMsUUFDdkI7d0JBQ0YsUUFBUSxFQUFFLE1BQU07d0JBQ2hCLGtCQUFrQixFQUFFLE1BQU07cUJBQzdCOzhCQUlNLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpQW5pbWF0ZWR9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGlyZWN0aXZlcy9hbmltYXRlZCc7XG5pbXBvcnQge3R1aVByb3ZpZGV9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIFRVSV9CVVRUT05fT1BUSU9OUyxcbiAgICB0eXBlIFR1aUJ1dHRvbk9wdGlvbnMsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvYnV0dG9uJztcbmltcG9ydCB7VHVpRXhwYW5kQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2V4cGFuZCc7XG5pbXBvcnQge3R1aUxpbmtPcHRpb25zUHJvdmlkZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvbGluayc7XG5pbXBvcnQge3R5cGUgVHVpU2l6ZVN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1hY3Rpb24tYmFyJyxcbiAgICBpbXBvcnRzOiBbVHVpRXhwYW5kQ29tcG9uZW50XSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYWN0aW9uLWJhci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hY3Rpb24tYmFyLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgdHVpUHJvdmlkZShUVUlfQlVUVE9OX09QVElPTlMsIFR1aUFjdGlvbkJhckNvbXBvbmVudCksXG4gICAgICAgIHR1aUxpbmtPcHRpb25zUHJvdmlkZXIoe2FwcGVhcmFuY2U6ICdhY3Rpb24tZ3JheXNjYWxlJywgcHNldWRvOiB0cnVlfSksXG4gICAgXSxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aUFuaW1hdGVkXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aVRoZW1lOiAnZGFyaycsXG4gICAgICAgICdbYXR0ci5kYXRhLXNpemVdJzogJ3NpemUnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUFjdGlvbkJhckNvbXBvbmVudCBpbXBsZW1lbnRzIFR1aUJ1dHRvbk9wdGlvbnMge1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGV4cGFuZGVkID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplUyA9ICdtJztcblxuICAgIHB1YmxpYyByZWFkb25seSBhcHBlYXJhbmNlID0gJ3NlY29uZGFyeS1ncmF5c2NhbGUnO1xufVxuIiwiPHR1aS1leHBhbmQgW2V4cGFuZGVkXT1cImV4cGFuZGVkXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidHVpLWRhdGEtbGlzdCxbdHVpTWVudV1cIiAvPlxuPC90dWktZXhwYW5kPlxuXG48ZGl2IGNsYXNzPVwidC1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgLz5cblxuICAgIDxkaXYgY2xhc3M9XCJ0LWFjdGlvbnNcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYSxidXR0b24sW3R1aUFjdGlvbl1cIiAvPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=