@taiga-ui/kit
Version:
Taiga UI Angular main components kit
110 lines (101 loc) • 15.6 kB
JavaScript
import { DatePipe } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, output, ChangeDetectionStrategy, Component, InjectionToken, Injectable, DestroyRef, Directive } from '@angular/core';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
import { TuiButtonX } from '@taiga-ui/core/directives/button-x';
import { TUI_CLOSE_WORD, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import * as i1$1 from '@taiga-ui/cdk/portals';
import { TuiPortalDirective, tuiAsPortal } from '@taiga-ui/cdk/portals';
import * as i2 from '@taiga-ui/core/portals/alert';
import { TuiAlertDirective, TuiAlertService } from '@taiga-ui/core/portals/alert';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import * as i1 from '@taiga-ui/cdk/directives/animated';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { TuiLink } from '@taiga-ui/core/components/link';
import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
class TuiPushComponent {
constructor() {
this.isString = tuiIsString;
this.closeWord = inject(TUI_CLOSE_WORD);
this.icons = inject(TUI_COMMON_ICONS);
this.heading = input('');
this.type = input('');
this.lines = input(2);
this.timestamp = input('');
this.close = output();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiPushComponent, isStandalone: true, selector: "tui-push", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null } }, 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@if (close['listeners']?.length) {\n <button\n size=\"xs\"\n tuiButtonX\n class=\"t-close\"\n (click)=\"close.emit()\"\n >\n {{ closeWord() }}\n </button>\n}\n<div class=\"t-top\">\n <span class=\"t-icon\">\n <ng-content select=\"tui-icon\" />\n </span>\n {{ type() }}\n @if (timestamp()) {\n <span\n class=\"t-time\"\n [textContent]=\"isString(timestamp()) ? timestamp() : (timestamp() | date: 'h:mm a')\"\n ></span>\n }\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-typography-body-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;inset-block-start:.75rem;inset-inline-end:.75rem;color:#0000008a;background:#f2f2f252;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.t-top{display:flex;align-items:center;font:var(--tui-typography-body-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{font:var(--tui-typography-heading-h6);margin:.75rem 0 .25rem}.t-heading,.t-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--t-lines);word-break:break-word;overflow:hidden}.t-actions{display:flex;align-items:center;font:var(--tui-typography-body-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: DatePipe, name: "date" }, { kind: "directive", type: TuiButtonX, selector: "[tuiButtonX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-push', imports: [DatePipe, TuiButton, TuiButtonX], 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@if (close['listeners']?.length) {\n <button\n size=\"xs\"\n tuiButtonX\n class=\"t-close\"\n (click)=\"close.emit()\"\n >\n {{ closeWord() }}\n </button>\n}\n<div class=\"t-top\">\n <span class=\"t-icon\">\n <ng-content select=\"tui-icon\" />\n </span>\n {{ type() }}\n @if (timestamp()) {\n <span\n class=\"t-time\"\n [textContent]=\"isString(timestamp()) ? timestamp() : (timestamp() | date: 'h:mm a')\"\n ></span>\n }\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-typography-body-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;inset-block-start:.75rem;inset-inline-end:.75rem;color:#0000008a;background:#f2f2f252;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.t-top{display:flex;align-items:center;font:var(--tui-typography-body-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{font:var(--tui-typography-heading-h6);margin:.75rem 0 .25rem}.t-heading,.t-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--t-lines);word-break:break-word;overflow:hidden}.t-actions{display:flex;align-items:center;font:var(--tui-typography-body-s)}.t-button:not(:empty){margin:.75rem .75rem .75rem 0}.t-link{margin:.75rem 0}.t-link:empty{margin:.5rem}\n"] }]
}] });
const [TUI_PUSH_OPTIONS, tuiPushOptionsProvider] = tuiCreateOptions({
heading: '',
type: '',
timestamp: '',
image: '',
icon: '',
iconColor: '',
buttons: [],
block: 'end',
inline: 'end',
});
const TUI_PUSH_CONCURRENCY = new InjectionToken(ngDevMode ? 'TUI_PUSH_CONCURRENCY' : '', { factory: () => 5 });
class TuiPushAlert {
constructor() {
this.context = injectContext();
}
get isDirective() {
return this.context.content instanceof TuiPortalDirective;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiPushAlert, isStandalone: true, selector: "tui-push-alert", hostDirectives: [{ directive: i1.TuiAnimated }, { directive: i2.TuiAlertDirective }], ngImport: i0, template: "<div class=\"t-wrapper\">\n @if (!isDirective) {\n <tui-push\n [heading]=\"context.heading\"\n [timestamp]=\"context.timestamp\"\n [type]=\"context.type\"\n (close)=\"context.$implicit.complete()\"\n >\n @if (context.image) {\n <img\n alt=\"\"\n [src]=\"context.image\"\n />\n }\n @if (context.icon) {\n <tui-icon\n [icon]=\"context.icon\"\n [style.color]=\"context.iconColor\"\n />\n }\n <div\n *polymorpheusOutlet=\"context.content as text; context: context\"\n [innerHTML]=\"text\"\n ></div>\n @if (context.buttons.length > 1) {\n <button\n tuiButton\n type=\"button\"\n (click)=\"context.$implicit.next(context.buttons[0] || '')\"\n >\n {{ context.buttons[0] }}\n </button>\n }\n @if (context.buttons.length) {\n <button\n tuiLink\n type=\"button\"\n (click)=\"context.$implicit.next(context.buttons[context.buttons.length - 1] || '')\"\n >\n {{ context.buttons[context.buttons.length - 1] }}\n </button>\n }\n </tui-push>\n } @else {\n <ng-container *polymorpheusOutlet=\"context.content\" />\n }\n</div>\n", styles: [":host{max-inline-size:calc(100% - 2rem);margin:.625rem 1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushAlert, decorators: [{
type: Component,
args: [{ selector: 'tui-push-alert', imports: [PolymorpheusOutlet, TuiButton, TuiIcon, TuiLink, TuiPushComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated, TuiAlertDirective], template: "<div class=\"t-wrapper\">\n @if (!isDirective) {\n <tui-push\n [heading]=\"context.heading\"\n [timestamp]=\"context.timestamp\"\n [type]=\"context.type\"\n (close)=\"context.$implicit.complete()\"\n >\n @if (context.image) {\n <img\n alt=\"\"\n [src]=\"context.image\"\n />\n }\n @if (context.icon) {\n <tui-icon\n [icon]=\"context.icon\"\n [style.color]=\"context.iconColor\"\n />\n }\n <div\n *polymorpheusOutlet=\"context.content as text; context: context\"\n [innerHTML]=\"text\"\n ></div>\n @if (context.buttons.length > 1) {\n <button\n tuiButton\n type=\"button\"\n (click)=\"context.$implicit.next(context.buttons[0] || '')\"\n >\n {{ context.buttons[0] }}\n </button>\n }\n @if (context.buttons.length) {\n <button\n tuiLink\n type=\"button\"\n (click)=\"context.$implicit.next(context.buttons[context.buttons.length - 1] || '')\"\n >\n {{ context.buttons[context.buttons.length - 1] }}\n </button>\n }\n </tui-push>\n } @else {\n <ng-container *polymorpheusOutlet=\"context.content\" />\n }\n</div>\n", styles: [":host{max-inline-size:calc(100% - 2rem);margin:.625rem 1rem}\n"] }]
}] });
class TuiPushService extends TuiAlertService {
constructor() {
super(inject(TUI_PUSH_CONCURRENCY));
this.options = inject(TUI_PUSH_OPTIONS);
this.component = TuiPushAlert;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
class TuiPushDirective {
constructor() {
this.sub = inject(TuiPortalDirective).openChange.subscribe(() => { });
inject(DestroyRef).onDestroy(() => this.sub.unsubscribe());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiPushDirective, isStandalone: true, selector: "ng-template[tuiPush]", providers: [tuiAsPortal(TuiPushService)], hostDirectives: [{ directive: i1$1.TuiPortalDirective, inputs: ["open", "tuiPush"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiPushDirective, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[tuiPush]',
providers: [tuiAsPortal(TuiPushService)],
hostDirectives: [
{
directive: TuiPortalDirective,
inputs: ['open: tuiPush'],
},
],
}]
}], ctorParameters: () => [] });
const TuiPush = [TuiPushComponent, TuiPushAlert, TuiPushDirective];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_PUSH_CONCURRENCY, TUI_PUSH_OPTIONS, TuiPush, TuiPushAlert, TuiPushComponent, TuiPushDirective, TuiPushService, tuiPushOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-push.mjs.map