@taiga-ui/kit
Version:
Taiga UI Angular main components kit
34 lines • 11.9 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.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", timestamp: "timestamp" }, outputs: { close: "close" }, 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-3);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)}.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-right:.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:vertical;-webkit-line-clamp:2;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' })], 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-3);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)}.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-right:.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:vertical;-webkit-line-clamp:2;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
}], timestamp: [{
type: Input
}], close: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVzaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9wdXNoL3B1c2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHVzaC9wdXNoLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNoRCxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRixPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUMsY0FBYyxFQUFFLGdCQUFnQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7O0FBRXZFLE1BU2EsZ0JBQWdCO0lBVDdCO1FBVXVCLGFBQVEsR0FBRyxXQUFXLENBQUM7UUFDdkIsZUFBVSxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUNwQyxVQUFLLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFHN0MsWUFBTyxHQUFHLEVBQUUsQ0FBQztRQUdiLFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVixjQUFTLEdBQW9CLEVBQUUsQ0FBQztRQUd2QixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQUNwRDsrR0FoQlksZ0JBQWdCO21HQUFoQixnQkFBZ0IsMEpBRmQsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUMsMEJDckIvRSxnaENBNENBLG14Q0QzQmMsU0FBUyw4Q0FBRSxJQUFJLDZGQUFFLFNBQVMsK0hBQUUsaUJBQWlCOztTQU05QyxnQkFBZ0I7NEZBQWhCLGdCQUFnQjtrQkFUNUIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sVUFBVSxXQUNYLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsaUJBQWlCLENBQUMsbUJBR3ZDLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyx3QkFBd0IsQ0FBQyxFQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBQyxDQUFDLENBQUM7OEJBUXBFLE9BQU87c0JBRGIsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsU0FBUztzQkFEZixLQUFLO2dCQUlVLEtBQUs7c0JBRHBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FzeW5jUGlwZSwgTmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dHVpSXNTdHJpbmd9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1R1aUJ1dHRvbiwgdHVpQnV0dG9uT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1R1aUZvcm1hdERhdGVQaXBlfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9waXBlcy9mb3JtYXQtZGF0ZSc7XG5pbXBvcnQge1RVSV9DTE9TRV9XT1JELCBUVUlfQ09NTU9OX0lDT05TfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLXB1c2gnLFxuICAgIGltcG9ydHM6IFtBc3luY1BpcGUsIE5nSWYsIFR1aUJ1dHRvbiwgVHVpRm9ybWF0RGF0ZVBpcGVdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wdXNoLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3B1c2guc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW3R1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcih7c2l6ZTogJ3MnLCBhcHBlYXJhbmNlOiAnc2Vjb25kYXJ5J30pXSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpUHVzaENvbXBvbmVudCB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGlzU3RyaW5nID0gdHVpSXNTdHJpbmc7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNsb3NlV29yZCQgPSBpbmplY3QoVFVJX0NMT1NFX1dPUkQpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBpY29ucyA9IGluamVjdChUVUlfQ09NTU9OX0lDT05TKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGhlYWRpbmcgPSAnJztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHR5cGUgPSAnJztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRpbWVzdGFtcDogbnVtYmVyIHwgc3RyaW5nID0gJyc7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgY2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG59XG4iLCI8ZGl2IGNsYXNzPVwidC1pbWFnZVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImltZ1wiIC8+XG48L2Rpdj5cbjxidXR0b25cbiAgICAqbmdJZj1cImNsb3NlLm9ic2VydmVkXCJcbiAgICBhcHBlYXJhbmNlPVwiXCJcbiAgICBzaXplPVwieHNcIlxuICAgIHR1aUljb25CdXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cInQtY2xvc2VcIlxuICAgIFtpY29uU3RhcnRdPVwiaWNvbnMuY2xvc2VcIlxuICAgIFtzdHlsZS5ib3JkZXItcmFkaXVzLiVdPVwiMTAwXCJcbiAgICAoY2xpY2spPVwiY2xvc2UuZW1pdCgpXCJcbj5cbiAgICB7eyBjbG9zZVdvcmQkIHwgYXN5bmMgfX1cbjwvYnV0dG9uPlxuPGRpdiBjbGFzcz1cInQtdG9wXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0LWljb25cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwidHVpLXN2Zyx0dWktaWNvblwiIC8+XG4gICAgPC9zcGFuPlxuICAgIHt7IHR5cGUgfX1cbiAgICA8c3BhblxuICAgICAgICAqbmdJZj1cInRpbWVzdGFtcFwiXG4gICAgICAgIGNsYXNzPVwidC10aW1lXCJcbiAgICAgICAgW3RleHRDb250ZW50XT1cImlzU3RyaW5nKHRpbWVzdGFtcCkgPyB0aW1lc3RhbXAgOiAodGltZXN0YW1wIHwgdHVpRm9ybWF0RGF0ZSB8IGFzeW5jKVwiXG4gICAgPjwvc3Bhbj5cbjwvZGl2PlxuPGgzXG4gICAgYXV0b21hdGlvbi1pZD1cInR1aS1wdXNoX19oZWFkaW5nXCJcbiAgICBjbGFzcz1cInQtaGVhZGluZ1wiXG4+XG4gICAge3sgaGVhZGluZyB9fVxuPC9oMz5cbjxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICA8bmctY29udGVudCAvPlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwidC1hY3Rpb25zXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0LWJ1dHRvblwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdHVpQnV0dG9uXVwiIC8+XG4gICAgPC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwidC1saW5rXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt0dWlMaW5rXVwiIC8+XG4gICAgPC9zcGFuPlxuPC9kaXY+XG4iXX0=