@taiga-ui/kit
Version:
Taiga UI Angular main components kit
36 lines • 9.51 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9hY3Rpb24tYmFyL2FjdGlvbi1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYWN0aW9uLWJhci9hY3Rpb24tYmFyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEUsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUU3RCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMsc0JBQXNCLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQzs7O0FBR3RFLE1BaUJhLHFCQUFxQjtJQWpCbEM7UUFtQlcsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdqQixTQUFJLEdBQWEsR0FBRyxDQUFDO1FBRVosZUFBVSxHQUFHLHFCQUFxQixDQUFDO0tBQ3REOytHQVJZLHFCQUFxQjttR0FBckIscUJBQXFCLHFNQVZuQjtZQUNQLFVBQVUsQ0FBQyxrQkFBa0IsRUFBRSxxQkFBcUIsQ0FBQztZQUNyRCxzQkFBc0IsQ0FBQyxFQUFDLFVBQVUsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFDLENBQUM7U0FDekUsMkVDbkJMLDRRQVdBLDQ0Q0RDYyxrQkFBa0I7O1NBY25CLHFCQUFxQjs0RkFBckIscUJBQXFCO2tCQWpCakMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sZ0JBQWdCLFdBQ2pCLENBQUMsa0JBQWtCLENBQUMsbUJBR1osdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDUCxVQUFVLENBQUMsa0JBQWtCLHdCQUF3Qjt3QkFDckQsc0JBQXNCLENBQUMsRUFBQyxVQUFVLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBQyxDQUFDO3FCQUN6RSxrQkFDZSxDQUFDLFdBQVcsQ0FBQyxRQUN2Qjt3QkFDRixRQUFRLEVBQUUsTUFBTTt3QkFDaEIsa0JBQWtCLEVBQUUsTUFBTTtxQkFDN0I7OEJBSU0sUUFBUTtzQkFEZCxLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUdWlBbmltYXRlZH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9kaXJlY3RpdmVzL2FuaW1hdGVkJztcbmltcG9ydCB7dHVpUHJvdmlkZX0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB0eXBlIHtUdWlCdXR0b25PcHRpb25zfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1RVSV9CVVRUT05fT1BUSU9OU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlFeHBhbmRDb21wb25lbnR9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvZXhwYW5kJztcbmltcG9ydCB7dHVpTGlua09wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9saW5rJztcbmltcG9ydCB0eXBlIHtUdWlTaXplU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWFjdGlvbi1iYXInLFxuICAgIGltcG9ydHM6IFtUdWlFeHBhbmRDb21wb25lbnRdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hY3Rpb24tYmFyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2FjdGlvbi1iYXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB0dWlQcm92aWRlKFRVSV9CVVRUT05fT1BUSU9OUywgVHVpQWN0aW9uQmFyQ29tcG9uZW50KSxcbiAgICAgICAgdHVpTGlua09wdGlvbnNQcm92aWRlcih7YXBwZWFyYW5jZTogJ2FjdGlvbi1ncmF5c2NhbGUnLCBwc2V1ZG86IHRydWV9KSxcbiAgICBdLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbVHVpQW5pbWF0ZWRdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHVpVGhlbWU6ICdkYXJrJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQWN0aW9uQmFyQ29tcG9uZW50IGltcGxlbWVudHMgVHVpQnV0dG9uT3B0aW9ucyB7XG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZXhwYW5kZWQgPSBmYWxzZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemU6IFR1aVNpemVTID0gJ20nO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IGFwcGVhcmFuY2UgPSAnc2Vjb25kYXJ5LWdyYXlzY2FsZSc7XG59XG4iLCI8dHVpLWV4cGFuZCBbZXhwYW5kZWRdPVwiZXhwYW5kZWRcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ0dWktZGF0YS1saXN0LFt0dWlNZW51XVwiIC8+XG48L3R1aS1leHBhbmQ+XG5cbjxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICA8bmctY29udGVudCAvPlxuXG4gICAgPGRpdiBjbGFzcz1cInQtYWN0aW9uc1wiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJhLGJ1dHRvbixbdHVpQWN0aW9uXVwiIC8+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==