@taiga-ui/kit/esm2022/components/badged-content/badged-content.component.mjs

Taiga UI Angular main components kit

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, } from '@angular/core';
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiBadgedContentDirective } from './badged-content.directive';
import * as i0 from "@angular/core";
class TuiBadgedContentComponent {
    constructor() {
        this.cdr = inject(ChangeDetectorRef);
        this.el = tuiInjectElement();
    }
    get imgTop() {
        return this.resolve('.t-badge_top img');
    }
    get imgBottom() {
        return this.resolve('.t-badge_bottom img');
    }
    onResize() {
        this.cdr.detectChanges();
    }
    resolve(selector) {
        return `url(${this.el.querySelector(selector)?.getAttribute('src') || ''})`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBadgedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiBadgedContentComponent, isStandalone: true, selector: "tui-badged-content", ngImport: i0, template: "<ng-content />\n\n<div\n    #badgeTop\n    class=\"t-badge t-badge_top\"\n    [style.--t-badge-height.px]=\"badgeTop.offsetHeight\"\n    [style.--t-img]=\"imgTop\"\n    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[tuiSlot='top'], img[tuiSlot='top']\" />\n    <div class=\"t-border\">\n        <ng-content select=\"[tuiSlot='top']\" />\n    </div>\n</div>\n\n<div\n    #badgeBottom\n    class=\"t-badge t-badge_bottom\"\n    [style.--t-badge-height.px]=\"badgeBottom.offsetHeight\"\n    [style.--t-img]=\"imgBottom\"\n    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[tuiSlot='bottom'], img[tuiSlot='bottom']\" />\n    <div class=\"t-border\">\n        <ng-content select=\"[tuiSlot='bottom']\" />\n    </div>\n</div>\n", styles: [":host{--tui-radius: var(--tui-radius-l);--t-badge-height: 0;--t-corner-offset: calc((var(--tui-radius) * 1.4142 - var(--tui-radius)) * 1 / 1.4142);position:relative;display:inline-block;block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;inline-size:-webkit-max-content;inline-size:max-content;color:var(--tui-background-base)}.t-badge{--t-offset: calc(var(--t-badge-height) * -.5 + var(--t-corner-offset));position:absolute;display:flex;isolation:isolate}.t-badge_top{top:var(--t-offset);right:var(--t-offset)}.t-badge_bottom{bottom:var(--t-offset);right:var(--t-offset)}.t-badge:before{top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";position:absolute;z-index:-1;inline-size:120%;block-size:120%;-webkit-mask-image:var(--t-img);mask-image:var(--t-img);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:currentColor}.t-border:not(:empty){display:flex;border-radius:6rem;box-shadow:0 0 0 1px currentColor;background:currentColor}\n"], dependencies: [{ kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiBadgedContentComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiBadgedContentComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-badged-content', imports: [TuiBadgedContentDirective, WaResizeObserver], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n\n<div\n    #badgeTop\n    class=\"t-badge t-badge_top\"\n    [style.--t-badge-height.px]=\"badgeTop.offsetHeight\"\n    [style.--t-img]=\"imgTop\"\n    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[tuiSlot='top'], img[tuiSlot='top']\" />\n    <div class=\"t-border\">\n        <ng-content select=\"[tuiSlot='top']\" />\n    </div>\n</div>\n\n<div\n    #badgeBottom\n    class=\"t-badge t-badge_bottom\"\n    [style.--t-badge-height.px]=\"badgeBottom.offsetHeight\"\n    [style.--t-img]=\"imgBottom\"\n    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[tuiSlot='bottom'], img[tuiSlot='bottom']\" />\n    <div class=\"t-border\">\n        <ng-content select=\"[tuiSlot='bottom']\" />\n    </div>\n</div>\n", styles: [":host{--tui-radius: var(--tui-radius-l);--t-badge-height: 0;--t-corner-offset: calc((var(--tui-radius) * 1.4142 - var(--tui-radius)) * 1 / 1.4142);position:relative;display:inline-block;block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;inline-size:-webkit-max-content;inline-size:max-content;color:var(--tui-background-base)}.t-badge{--t-offset: calc(var(--t-badge-height) * -.5 + var(--t-corner-offset));position:absolute;display:flex;isolation:isolate}.t-badge_top{top:var(--t-offset);right:var(--t-offset)}.t-badge_bottom{bottom:var(--t-offset);right:var(--t-offset)}.t-badge:before{top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";position:absolute;z-index:-1;inline-size:120%;block-size:120%;-webkit-mask-image:var(--t-img);mask-image:var(--t-img);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:currentColor}.t-border:not(:empty){display:flex;border-radius:6rem;box-shadow:0 0 0 1px currentColor;background:currentColor}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2VkLWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYmFkZ2VkLWNvbnRlbnQvYmFkZ2VkLWNvbnRlbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYmFkZ2VkLWNvbnRlbnQvYmFkZ2VkLWNvbnRlbnQudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzlELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBRXpELE9BQU8sRUFBQyx5QkFBeUIsRUFBQyxNQUFNLDRCQUE0QixDQUFDOztBQUVyRSxNQVFhLHlCQUF5QjtJQVJ0QztRQVNxQixRQUFHLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFDaEMsT0FBRSxHQUFHLGdCQUFnQixFQUFFLENBQUM7S0FpQjVDO0lBZkcsSUFBVyxNQUFNO1FBQ2IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVELElBQVcsU0FBUztRQUNoQixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMscUJBQXFCLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRU0sUUFBUTtRQUNYLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVPLE9BQU8sQ0FBQyxRQUFnQjtRQUM1QixPQUFPLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEVBQUUsWUFBWSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDO0lBQ2hGLENBQUM7K0dBbEJRLHlCQUF5QjttR0FBekIseUJBQXlCLDhFQ25CdEMsaXlCQTJCQSxpa0NEYnlDLGdCQUFnQjs7U0FLNUMseUJBQXlCOzRGQUF6Qix5QkFBeUI7a0JBUnJDLFNBQVM7aUNBQ00sSUFBSSxZQUNOLG9CQUFvQixXQUNyQixDQUFDLHlCQUF5QixFQUFFLGdCQUFnQixDQUFDLG1CQUdyQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7V2FSZXNpemVPYnNlcnZlcn0gZnJvbSAnQG5nLXdlYi1hcGlzL3Jlc2l6ZS1vYnNlcnZlcic7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcblxuaW1wb3J0IHtUdWlCYWRnZWRDb250ZW50RGlyZWN0aXZlfSBmcm9tICcuL2JhZGdlZC1jb250ZW50LmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktYmFkZ2VkLWNvbnRlbnQnLFxuICAgIGltcG9ydHM6IFtUdWlCYWRnZWRDb250ZW50RGlyZWN0aXZlLCBXYVJlc2l6ZU9ic2VydmVyXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYmFkZ2VkLWNvbnRlbnQudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYmFkZ2VkLWNvbnRlbnQuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlCYWRnZWRDb250ZW50Q29tcG9uZW50IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcblxuICAgIHB1YmxpYyBnZXQgaW1nVG9wKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLnJlc29sdmUoJy50LWJhZGdlX3RvcCBpbWcnKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGltZ0JvdHRvbSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5yZXNvbHZlKCcudC1iYWRnZV9ib3R0b20gaW1nJyk7XG4gICAgfVxuXG4gICAgcHVibGljIG9uUmVzaXplKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSByZXNvbHZlKHNlbGVjdG9yOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gYHVybCgke3RoaXMuZWwucXVlcnlTZWxlY3RvcihzZWxlY3Rvcik/LmdldEF0dHJpYnV0ZSgnc3JjJykgfHwgJyd9KWA7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cblxuPGRpdlxuICAgICNiYWRnZVRvcFxuICAgIGNsYXNzPVwidC1iYWRnZSB0LWJhZGdlX3RvcFwiXG4gICAgW3N0eWxlLi0tdC1iYWRnZS1oZWlnaHQucHhdPVwiYmFkZ2VUb3Aub2Zmc2V0SGVpZ2h0XCJcbiAgICBbc3R5bGUuLS10LWltZ109XCJpbWdUb3BcIlxuICAgICh3YVJlc2l6ZU9ic2VydmVyKT1cIm9uUmVzaXplKClcIlxuPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInR1aS1iYWRnZS1ub3RpZmljYXRpb25bdHVpU2xvdD0ndG9wJ10sIGltZ1t0dWlTbG90PSd0b3AnXVwiIC8+XG4gICAgPGRpdiBjbGFzcz1cInQtYm9yZGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt0dWlTbG90PSd0b3AnXVwiIC8+XG4gICAgPC9kaXY+XG48L2Rpdj5cblxuPGRpdlxuICAgICNiYWRnZUJvdHRvbVxuICAgIGNsYXNzPVwidC1iYWRnZSB0LWJhZGdlX2JvdHRvbVwiXG4gICAgW3N0eWxlLi0tdC1iYWRnZS1oZWlnaHQucHhdPVwiYmFkZ2VCb3R0b20ub2Zmc2V0SGVpZ2h0XCJcbiAgICBbc3R5bGUuLS10LWltZ109XCJpbWdCb3R0b21cIlxuICAgICh3YVJlc2l6ZU9ic2VydmVyKT1cIm9uUmVzaXplKClcIlxuPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInR1aS1iYWRnZS1ub3RpZmljYXRpb25bdHVpU2xvdD0nYm90dG9tJ10sIGltZ1t0dWlTbG90PSdib3R0b20nXVwiIC8+XG4gICAgPGRpdiBjbGFzcz1cInQtYm9yZGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt0dWlTbG90PSdib3R0b20nXVwiIC8+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==