@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 { TuiBadgedContentDirective } from './badged-content.directive';
import * as i0 from "@angular/core";
class TuiBadgedContentComponent {
    constructor() {
        this.cdr = inject(ChangeDetectorRef);
    }
    onResize() {
        this.cdr.detectChanges();
    }
    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    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[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    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[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}.t-badge_top{top:var(--t-offset);right:var(--t-offset)}.t-badge_bottom{bottom:var(--t-offset);right:var(--t-offset)}.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    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[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    (waResizeObserver)=\"onResize()\"\n>\n    <ng-content select=\"tui-badge-notification[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}.t-badge_top{top:var(--t-offset);right:var(--t-offset)}.t-badge_bottom{bottom:var(--t-offset);right:var(--t-offset)}.t-border:not(:empty){display:flex;border-radius:6rem;box-shadow:0 0 0 1px currentColor;background:currentColor}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2VkLWNvbnRlbnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYmFkZ2VkLWNvbnRlbnQvYmFkZ2VkLWNvbnRlbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvYmFkZ2VkLWNvbnRlbnQvYmFkZ2VkLWNvbnRlbnQudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBRTlELE9BQU8sRUFBQyx5QkFBeUIsRUFBQyxNQUFNLDRCQUE0QixDQUFDOztBQUVyRSxNQVFhLHlCQUF5QjtJQVJ0QztRQVNxQixRQUFHLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7S0FLcEQ7SUFIVSxRQUFRO1FBQ1gsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUM3QixDQUFDOytHQUxRLHlCQUF5QjttR0FBekIseUJBQXlCLDhFQ2xCdEMsbXJCQXlCQSxvdkJEWnlDLGdCQUFnQjs7U0FLNUMseUJBQXlCOzRGQUF6Qix5QkFBeUI7a0JBUnJDLFNBQVM7aUNBQ00sSUFBSSxZQUNOLG9CQUFvQixXQUNyQixDQUFDLHlCQUF5QixFQUFFLGdCQUFnQixDQUFDLG1CQUdyQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7V2FSZXNpemVPYnNlcnZlcn0gZnJvbSAnQG5nLXdlYi1hcGlzL3Jlc2l6ZS1vYnNlcnZlcic7XG5cbmltcG9ydCB7VHVpQmFkZ2VkQ29udGVudERpcmVjdGl2ZX0gZnJvbSAnLi9iYWRnZWQtY29udGVudC5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWJhZGdlZC1jb250ZW50JyxcbiAgICBpbXBvcnRzOiBbVHVpQmFkZ2VkQ29udGVudERpcmVjdGl2ZSwgV2FSZXNpemVPYnNlcnZlcl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlZC1jb250ZW50LnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2JhZGdlZC1jb250ZW50LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQmFkZ2VkQ29udGVudENvbXBvbmVudCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBjZHIgPSBpbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpO1xuXG4gICAgcHVibGljIG9uUmVzaXplKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRlbnQgLz5cblxuPGRpdlxuICAgICNiYWRnZVRvcFxuICAgIGNsYXNzPVwidC1iYWRnZSB0LWJhZGdlX3RvcFwiXG4gICAgW3N0eWxlLi0tdC1iYWRnZS1oZWlnaHQucHhdPVwiYmFkZ2VUb3Aub2Zmc2V0SGVpZ2h0XCJcbiAgICAod2FSZXNpemVPYnNlcnZlcik9XCJvblJlc2l6ZSgpXCJcbj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJ0dWktYmFkZ2Utbm90aWZpY2F0aW9uW3R1aVNsb3Q9J3RvcCddXCIgLz5cbiAgICA8ZGl2IGNsYXNzPVwidC1ib3JkZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3R1aVNsb3Q9J3RvcCddXCIgLz5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48ZGl2XG4gICAgI2JhZGdlQm90dG9tXG4gICAgY2xhc3M9XCJ0LWJhZGdlIHQtYmFkZ2VfYm90dG9tXCJcbiAgICBbc3R5bGUuLS10LWJhZGdlLWhlaWdodC5weF09XCJiYWRnZUJvdHRvbS5vZmZzZXRIZWlnaHRcIlxuICAgICh3YVJlc2l6ZU9ic2VydmVyKT1cIm9uUmVzaXplKClcIlxuPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInR1aS1iYWRnZS1ub3RpZmljYXRpb25bdHVpU2xvdD0nYm90dG9tJ11cIiAvPlxuICAgIDxkaXYgY2xhc3M9XCJ0LWJvcmRlclwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdHVpU2xvdD0nYm90dG9tJ11cIiAvPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=