@taiga-ui/kit
Version:
Taiga UI Angular main components kit
39 lines • 12.6 kB
JavaScript
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiButton, tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TuiFormatDatePipe } from '@taiga-ui/core/pipes/format-date';
import { TUI_CLOSE_WORD, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import * as i0 from "@angular/core";
class TuiPushComponent {
constructor() {
this.isString = tuiIsString;
this.closeWord$ = inject(TUI_CLOSE_WORD);
this.icons = inject(TUI_COMMON_ICONS);
this.heading = '';
this.type = '';
this.lines = 2;
this.timestamp = '';
this.close = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPushComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPushComponent, isStandalone: true, selector: "tui-push", inputs: { heading: "heading", type: "type", lines: "lines", timestamp: "timestamp" }, outputs: { close: "close" }, host: { properties: { "style.--t-lines": "lines" } }, providers: [tuiButtonOptionsProvider({ size: 's', appearance: 'secondary' })], ngImport: i0, template: "<div class=\"t-image\">\n <ng-content select=\"img\" />\n</div>\n<button\n *ngIf=\"close.observed\"\n appearance=\"\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"close.emit()\"\n>\n {{ closeWord$ | async }}\n</button>\n<div class=\"t-top\">\n <span class=\"t-icon\">\n <ng-content select=\"tui-svg,tui-icon\" />\n </span>\n {{ type }}\n <span\n *ngIf=\"timestamp\"\n class=\"t-time\"\n [textContent]=\"isString(timestamp) ? timestamp : (timestamp | tuiFormatDate | async)\"\n ></span>\n</div>\n<h3\n automation-id=\"tui-push__heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h3>\n<div class=\"t-content\">\n <ng-content />\n</div>\n<div class=\"t-actions\">\n <span class=\"t-button\">\n <ng-content select=\"[tuiButton]\" />\n </span>\n <span class=\"t-link\">\n <ng-content select=\"[tuiLink]\" />\n </span>\n</div>\n", styles: [":host{position:relative;display:block;inline-size:22.5rem;max-inline-size:100%;box-sizing:border-box;padding:1.25rem 1.25rem .25rem;overflow:hidden;font:var(--tui-font-text-m);border-radius:var(--tui-radius-xl);background:var(--tui-background-elevation-2);box-shadow:var(--tui-shadow-small)}.t-image{display:flex;flex-direction:column;max-block-size:10.625rem;overflow:hidden;margin:-1.25rem -1.25rem 1.25rem}.t-close{position:absolute;top:.75rem;right:.75rem;color:#0000008a;background:#f2f2f252;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:.75rem}}.t-top{display:flex;align-items:center;font:var(--tui-font-text-s);color:var(--tui-text-secondary)}.t-icon{block-size:1.25rem;margin-inline-end:.5rem;transform:scale(.833);transform-origin:top left;color:var(--tui-text-action)}.t-time:before{content:\"\\2022\";display:inline-block;inline-size:1rem;text-align:center}.t-heading{line-height:1.25rem;font-weight:700;margin:.75rem 0 .25rem}.t-heading,.t-content{display:-webkit-box;-webkit-box-orient:block-axis;-webkit-line-clamp:var(--t-lines);word-break:break-word;overflow:hidden}.t-actions{display:flex;align-items:center;font:var(--tui-font-text-s)}.t-button:not(:empty){margin:.75rem .75rem .75rem 0}.t-link{margin:.75rem 0}.t-link:empty{margin:.5rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: TuiFormatDatePipe, name: "tuiFormatDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiPushComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPushComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-push', imports: [AsyncPipe, NgIf, TuiButton, TuiFormatDatePipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiButtonOptionsProvider({ size: 's', appearance: 'secondary' })], host: {
'[style.--t-lines]': 'lines',
}, template: "<div class=\"t-image\">\n <ng-content select=\"img\" />\n</div>\n<button\n *ngIf=\"close.observed\"\n appearance=\"\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"close.emit()\"\n>\n {{ closeWord$ | async }}\n</button>\n<div class=\"t-top\">\n <span class=\"t-icon\">\n <ng-content select=\"tui-svg,tui-icon\" />\n </span>\n {{ type }}\n <span\n *ngIf=\"timestamp\"\n class=\"t-time\"\n [textContent]=\"isString(timestamp) ? timestamp : (timestamp | tuiFormatDate | async)\"\n ></span>\n</div>\n<h3\n automation-id=\"tui-push__heading\"\n class=\"t-heading\"\n>\n {{ heading }}\n</h3>\n<div class=\"t-content\">\n <ng-content />\n</div>\n<div class=\"t-actions\">\n <span class=\"t-button\">\n <ng-content select=\"[tuiButton]\" />\n </span>\n <span class=\"t-link\">\n <ng-content select=\"[tuiLink]\" />\n </span>\n</div>\n", styles: [":host{position:relative;display:block;inline-size:22.5rem;max-inline-size:100%;box-sizing:border-box;padding:1.25rem 1.25rem .25rem;overflow:hidden;font:var(--tui-font-text-m);border-radius:var(--tui-radius-xl);background:var(--tui-background-elevation-2);box-shadow:var(--tui-shadow-small)}.t-image{display:flex;flex-direction:column;max-block-size:10.625rem;overflow:hidden;margin:-1.25rem -1.25rem 1.25rem}.t-close{position:absolute;top:.75rem;right:.75rem;color:#0000008a;background:#f2f2f252;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:.75rem}}.t-top{display:flex;align-items:center;font:var(--tui-font-text-s);color:var(--tui-text-secondary)}.t-icon{block-size:1.25rem;margin-inline-end:.5rem;transform:scale(.833);transform-origin:top left;color:var(--tui-text-action)}.t-time:before{content:\"\\2022\";display:inline-block;inline-size:1rem;text-align:center}.t-heading{line-height:1.25rem;font-weight:700;margin:.75rem 0 .25rem}.t-heading,.t-content{display:-webkit-box;-webkit-box-orient:block-axis;-webkit-line-clamp:var(--t-lines);word-break:break-word;overflow:hidden}.t-actions{display:flex;align-items:center;font:var(--tui-font-text-s)}.t-button:not(:empty){margin:.75rem .75rem .75rem 0}.t-link{margin:.75rem 0}.t-link:empty{margin:.5rem}\n"] }]
}], propDecorators: { heading: [{
type: Input
}], type: [{
type: Input
}], lines: [{
type: Input
}], timestamp: [{
type: Input
}], close: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVzaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9wdXNoL3B1c2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHVzaC9wdXNoLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNoRCxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRixPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUMsY0FBYyxFQUFFLGdCQUFnQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7O0FBRXZFLE1BWWEsZ0JBQWdCO0lBWjdCO1FBYXVCLGFBQVEsR0FBRyxXQUFXLENBQUM7UUFDdkIsZUFBVSxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNwQyxVQUFLLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFHN0MsWUFBTyxHQUFHLEVBQUUsQ0FBQztRQUdiLFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsY0FBUyxHQUFvQixFQUFFLENBQUM7UUFHdkIsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FDcEQ7K0dBbkJZLGdCQUFnQjttR0FBaEIsZ0JBQWdCLGdPQUxkLENBQUMsd0JBQXdCLENBQUMsRUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUMsQ0FBQyxDQUFDLDBCQ3JCL0UsZ2hDQTRDQSxxM0NEM0JjLFNBQVMsOENBQUUsSUFBSSw2RkFBRSxTQUFTLCtIQUFFLGlCQUFpQjs7U0FTOUMsZ0JBQWdCOzRGQUFoQixnQkFBZ0I7a0JBWjVCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLFVBQVUsV0FDWCxDQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixDQUFDLG1CQUd2Qyx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsd0JBQXdCLENBQUMsRUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUMsQ0FBQyxDQUFDLFFBQ3JFO3dCQUNGLG1CQUFtQixFQUFFLE9BQU87cUJBQy9COzhCQVFNLE9BQU87c0JBRGIsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsS0FBSztzQkFEWCxLQUFLO2dCQUlDLFNBQVM7c0JBRGYsS0FBSztnQkFJVSxLQUFLO3NCQURwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R1aUlzU3RyaW5nfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtUdWlCdXR0b24sIHR1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlGb3JtYXREYXRlUGlwZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvcGlwZXMvZm9ybWF0LWRhdGUnO1xuaW1wb3J0IHtUVUlfQ0xPU0VfV09SRCwgVFVJX0NPTU1PTl9JQ09OU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1wdXNoJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBOZ0lmLCBUdWlCdXR0b24sIFR1aUZvcm1hdERhdGVQaXBlXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcHVzaC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9wdXNoLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFt0dWlCdXR0b25PcHRpb25zUHJvdmlkZXIoe3NpemU6ICdzJywgYXBwZWFyYW5jZTogJ3NlY29uZGFyeSd9KV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLi0tdC1saW5lc10nOiAnbGluZXMnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVB1c2hDb21wb25lbnQge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBpc1N0cmluZyA9IHR1aUlzU3RyaW5nO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBjbG9zZVdvcmQkID0gaW5qZWN0KFRVSV9DTE9TRV9XT1JEKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaWNvbnMgPSBpbmplY3QoVFVJX0NPTU1PTl9JQ09OUyk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBoZWFkaW5nID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0eXBlID0gJyc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBsaW5lcyA9IDI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0aW1lc3RhbXA6IG51bWJlciB8IHN0cmluZyA9ICcnO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xufVxuIiwiPGRpdiBjbGFzcz1cInQtaW1hZ2VcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJpbWdcIiAvPlxuPC9kaXY+XG48YnV0dG9uXG4gICAgKm5nSWY9XCJjbG9zZS5vYnNlcnZlZFwiXG4gICAgYXBwZWFyYW5jZT1cIlwiXG4gICAgc2l6ZT1cInhzXCJcbiAgICB0dWlJY29uQnV0dG9uXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgY2xhc3M9XCJ0LWNsb3NlXCJcbiAgICBbaWNvblN0YXJ0XT1cImljb25zLmNsb3NlXCJcbiAgICBbc3R5bGUuYm9yZGVyLXJhZGl1cy4lXT1cIjEwMFwiXG4gICAgKGNsaWNrKT1cImNsb3NlLmVtaXQoKVwiXG4+XG4gICAge3sgY2xvc2VXb3JkJCB8IGFzeW5jIH19XG48L2J1dHRvbj5cbjxkaXYgY2xhc3M9XCJ0LXRvcFwiPlxuICAgIDxzcGFuIGNsYXNzPVwidC1pY29uXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInR1aS1zdmcsdHVpLWljb25cIiAvPlxuICAgIDwvc3Bhbj5cbiAgICB7eyB0eXBlIH19XG4gICAgPHNwYW5cbiAgICAgICAgKm5nSWY9XCJ0aW1lc3RhbXBcIlxuICAgICAgICBjbGFzcz1cInQtdGltZVwiXG4gICAgICAgIFt0ZXh0Q29udGVudF09XCJpc1N0cmluZyh0aW1lc3RhbXApID8gdGltZXN0YW1wIDogKHRpbWVzdGFtcCB8IHR1aUZvcm1hdERhdGUgfCBhc3luYylcIlxuICAgID48L3NwYW4+XG48L2Rpdj5cbjxoM1xuICAgIGF1dG9tYXRpb24taWQ9XCJ0dWktcHVzaF9faGVhZGluZ1wiXG4gICAgY2xhc3M9XCJ0LWhlYWRpbmdcIlxuPlxuICAgIHt7IGhlYWRpbmcgfX1cbjwvaDM+XG48ZGl2IGNsYXNzPVwidC1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cInQtYWN0aW9uc1wiPlxuICAgIDxzcGFuIGNsYXNzPVwidC1idXR0b25cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3R1aUJ1dHRvbl1cIiAvPlxuICAgIDwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cInQtbGlua1wiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdHVpTGlua11cIiAvPlxuICAgIDwvc3Bhbj5cbjwvZGl2PlxuIl19