@rt-tools/ui-kit-v2 0.34.3 → 0.34.4

package/fesm2022/rt-tools-ui-kit-v2-photo-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-photo-viewer.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.logic.ts","../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.component.ts","../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.component.html"],"sourcesContent":["/**\n * Чистая логика просмотрщика: переходы между кадрами и то, какие из них стоит\n * держать загруженными.\n */\n\n/** Листание по кругу: с последнего кадра стрелка вправо ведёт на первый */\nexport function nextPhotoIndex(current: number, total: number, step: number): number {\n    if (total <= 0) {\n        return 0;\n    }\n    return (((current + step) % total) + total) % total;\n}\n\n/** Индекс из адреса: в URL кадры нумеруются с единицы, внутри — с нуля */\nexport function indexFromParam(param: string | null, total: number): number {\n    const parsed: number = Number(param);\n    if (!Number.isInteger(parsed) || parsed < 1 || parsed > total) {\n        return -1;\n    }\n    return parsed - 1;\n}\n\nexport function paramFromIndex(index: number): string {\n    return String(index + 1);\n}\n\n/**\n * Индекс кадра по позиции прокрутки. Нужен, потому что листать можно свайпом:\n * без этого счётчик показывал бы один кадр, а на экране был бы другой.\n */\nexport function indexFromScroll(scrollLeft: number, slideWidth: number, total: number): number {\n    if (slideWidth <= 0 || total <= 0) {\n        return 0;\n    }\n    const index: number = Math.round(scrollLeft / slideWidth);\n    return Math.min(Math.max(index, 0), total - 1);\n}\n\n/**\n * Кадры, которые держим в разметке: текущий и соседние. Полноразмерная\n * фотография весит сотни килобайт, и загружать все пятьдесят разом — значит\n * выесть трафик пользователя ради кадров, до которых он не долистает.\n */\nexport function shouldRenderPhoto(index: number, current: number, total: number): boolean {\n    if (total <= 0) {\n        return false;\n    }\n    const distance: number = Math.min(Math.abs(index - current), total - Math.abs(index - current));\n    return distance <= 1;\n}\n","import { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterNextRender,\n    computed,\n    inject,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Signal,\n    TemplateRef,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\n// rt-tools\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtDialogRef } from '@rt-tools/ui-kit-v2/dialog';\nimport { RT_DIALOG_DATA } from '@rt-tools/ui-kit-v2/dialog';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { indexFromScroll, nextPhotoIndex, shouldRenderPhoto } from './rt-photo-viewer.logic';\nimport { IRtPhotoViewer } from './rt-photo-viewer.model';\n\nconst BEM_BLOCK: string = 'rt-photo-viewer';\n\n/**\n * Полноэкранный просмотрщик фотографий поверх `RtDialogService`.\n *\n * Листание — нативный `scroll-snap`: свайп, инерцию и прилипание даёт сам\n * браузер, и на телефоне это ощущается правильнее любой реализации на\n * обработчиках. Готовую библиотеку не берём — весь кит здесь собственный, а\n * токены, BEM и `qa-dataid` ложатся естественно.\n *\n * Руками сделаны: стрелки, клавиши `←` `→`, счётчик и предзагрузка соседних\n * кадров. `Esc`, блокировку прокрутки фона и затемнение даёт сам диалог.\n */\n@Component({\n    selector: 'rt-photo-viewer',\n    templateUrl: './rt-photo-viewer.component.html',\n    styleUrl: './rt-photo-viewer.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // angular\n        CdkTrapFocus,\n        NgTemplateOutlet,\n\n        // rt-tools\n        BlockDirective,\n        ElemDirective,\n\n        // components\n        RtIconButtonComponent,\n\n        // transloco\n    ],\n    host: {\n        class: BEM_BLOCK,\n        role: 'dialog',\n        'aria-modal': 'true',\n        // Клавиши слушает сам просмотрщик, поэтому фокус переводится на него\n        // сразу после открытия — иначе стрелки и Esc не работали бы, пока\n        // пользователь куда-нибудь не кликнет\n        tabindex: '-1',\n        '(keydown.escape)': 'close()',\n        '(keydown.arrowLeft)': 'move(-1)',\n        '(keydown.arrowRight)': 'move(1)',\n    },\n})\nexport class RtPhotoViewerComponent {\n    readonly #data: IRtPhotoViewer.Data = inject(RT_DIALOG_DATA) as IRtPhotoViewer.Data;\n    readonly #dialogRef: RtDialogRef<number> = inject(RtDialogRef<number>);\n    readonly #host: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly track: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('track');\n\n    protected readonly photos: readonly IRtPhotoViewer.Photo[] = this.#data.photos;\n\n    /** Панель правки под дорожкой; там, где кадр только смотрят, её нет */\n    protected readonly panel: TemplateRef<IRtPhotoViewer.PanelContext> | null = this.#data.panel ?? null;\n\n    protected readonly currentIndex: WritableSignal<number> = signal<number>(this.#data.startIndex);\n\n    protected readonly counter: Signal<string> = computed((): string => `${this.currentIndex() + 1} / ${this.photos.length}`);\n\n    /** Соседние кадры готовятся заранее, дальние в разметку не попадают */\n    protected readonly rendered: Signal<readonly boolean[]> = computed((): readonly boolean[] =>\n        this.photos.map((_photo: IRtPhotoViewer.Photo, index: number): boolean =>\n            shouldRenderPhoto(index, this.currentIndex(), this.photos.length)\n        )\n    );\n\n    constructor() {\n        // Открытие может быть не с первого кадра: без явной прокрутки счётчик\n        // показывал бы второй кадр, а на экране остался бы первый\n        afterNextRender((): void => {\n            this.#host.nativeElement.focus();\n            this.#scrollToCurrent();\n        });\n    }\n\n    /** Наружу отдаётся кадр, на котором закрыли: по нему вызывающая сторона чистит адрес */\n    public close(): void {\n        this.#dialogRef.close(this.currentIndex());\n    }\n\n    protected move(step: number): void {\n        this.select(nextPhotoIndex(this.currentIndex(), this.photos.length, step));\n    }\n\n    protected select(index: number): void {\n        this.currentIndex.set(index);\n        this.#scrollToCurrent();\n    }\n\n    /** Свайп листает мимо стрелок — счётчик догоняет позицию дорожки */\n    protected onScroll(): void {\n        const track: HTMLElement | undefined = this.track()?.nativeElement;\n        if (track) {\n            this.currentIndex.set(indexFromScroll(track.scrollLeft, track.clientWidth, this.photos.length));\n        }\n    }\n\n    /**\n     * Прокрутка ленты вслед за выбором. Позиция считается от ширины дорожки, а\n     * не от `scrollWidth`: кадры за пределами окна ещё не отрисованы, и общая\n     * ширина до их появления меньше реальной.\n     *\n     * Переход мгновенный: `behavior: 'smooth'` внутри оверлея молча не двигает\n     * дорожку — счётчик менялся, а кадр оставался прежним. Свайп при этом\n     * по-прежнему анимирует сам браузер через scroll-snap.\n     */\n    #scrollToCurrent(): void {\n        const track: HTMLElement | undefined = this.track()?.nativeElement;\n        if (!track) {\n            return;\n        }\n        track.scrollTo({ left: track.clientWidth * this.currentIndex(), behavior: 'instant' });\n    }\n}\n","<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- Ловушка держит Tab внутри; фокус ставит сам компонент, поэтому\n         авто-захвата здесь нет: он перебивал фокус на просмотрщике, и клавиши\n         переставали листать -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerClose\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerPrev\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerNext\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- Панель приходит снаружи: где-то кадр только смотрят, где-то им ещё и\n             управляют, и решение принимается там же, где кадр виден крупно -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-photo-viewer.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.logic.ts","../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.component.ts","../../../projects/ui-kit-v2/src/lib/components/photo-viewer/rt-photo-viewer.component.html"],"sourcesContent":["/**\n * Чистая логика просмотрщика: переходы между кадрами и то, какие из них стоит\n * держать загруженными.\n */\n\n/** Листание по кругу: с последнего кадра стрелка вправо ведёт на первый */\nexport function nextPhotoIndex(current: number, total: number, step: number): number {\n    if (total <= 0) {\n        return 0;\n    }\n    return (((current + step) % total) + total) % total;\n}\n\n/** Индекс из адреса: в URL кадры нумеруются с единицы, внутри — с нуля */\nexport function indexFromParam(param: string | null, total: number): number {\n    const parsed: number = Number(param);\n    if (!Number.isInteger(parsed) || parsed < 1 || parsed > total) {\n        return -1;\n    }\n    return parsed - 1;\n}\n\nexport function paramFromIndex(index: number): string {\n    return String(index + 1);\n}\n\n/**\n * Индекс кадра по позиции прокрутки. Нужен, потому что листать можно свайпом:\n * без этого счётчик показывал бы один кадр, а на экране был бы другой.\n */\nexport function indexFromScroll(scrollLeft: number, slideWidth: number, total: number): number {\n    if (slideWidth <= 0 || total <= 0) {\n        return 0;\n    }\n    const index: number = Math.round(scrollLeft / slideWidth);\n    return Math.min(Math.max(index, 0), total - 1);\n}\n\n/**\n * Кадры, которые держим в разметке: текущий и соседние. Полноразмерная\n * фотография весит сотни килобайт, и загружать все пятьдесят разом — значит\n * выесть трафик пользователя ради кадров, до которых он не долистает.\n */\nexport function shouldRenderPhoto(index: number, current: number, total: number): boolean {\n    if (total <= 0) {\n        return false;\n    }\n    const distance: number = Math.min(Math.abs(index - current), total - Math.abs(index - current));\n    return distance <= 1;\n}\n","import { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterNextRender,\n    computed,\n    inject,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Signal,\n    TemplateRef,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\n// rt-tools\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtDialogRef } from '@rt-tools/ui-kit-v2/dialog';\nimport { RT_DIALOG_DATA } from '@rt-tools/ui-kit-v2/dialog';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { indexFromScroll, nextPhotoIndex, shouldRenderPhoto } from './rt-photo-viewer.logic';\nimport { IRtPhotoViewer } from './rt-photo-viewer.model';\n\nconst BEM_BLOCK: string = 'rt-photo-viewer';\n\n/**\n * Полноэкранный просмотрщик фотографий поверх `RtDialogService`.\n *\n * Листание — нативный `scroll-snap`: свайп, инерцию и прилипание даёт сам\n * браузер, и на телефоне это ощущается правильнее любой реализации на\n * обработчиках. Готовую библиотеку не берём — весь кит здесь собственный, а\n * токены, BEM и `qa-dataid` ложатся естественно.\n *\n * Руками сделаны: стрелки, клавиши `←` `→`, счётчик и предзагрузка соседних\n * кадров. `Esc`, блокировку прокрутки фона и затемнение даёт сам диалог.\n */\n@Component({\n    selector: 'rt-photo-viewer',\n    templateUrl: './rt-photo-viewer.component.html',\n    styleUrl: './rt-photo-viewer.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // angular\n        CdkTrapFocus,\n        NgTemplateOutlet,\n\n        // rt-tools\n        BlockDirective,\n        ElemDirective,\n\n        // components\n        RtIconButtonComponent,\n\n        // transloco\n    ],\n    host: {\n        class: BEM_BLOCK,\n        role: 'dialog',\n        'aria-modal': 'true',\n        // Клавиши слушает сам просмотрщик, поэтому фокус переводится на него\n        // сразу после открытия — иначе стрелки и Esc не работали бы, пока\n        // пользователь куда-нибудь не кликнет\n        tabindex: '-1',\n        '(keydown.escape)': 'close()',\n        '(keydown.arrowLeft)': 'move(-1)',\n        '(keydown.arrowRight)': 'move(1)',\n    },\n})\nexport class RtPhotoViewerComponent {\n    readonly #data: IRtPhotoViewer.Data = inject(RT_DIALOG_DATA) as IRtPhotoViewer.Data;\n    readonly #dialogRef: RtDialogRef<number> = inject(RtDialogRef<number>);\n    readonly #host: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly track: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('track');\n\n    protected readonly photos: readonly IRtPhotoViewer.Photo[] = this.#data.photos;\n\n    /** Панель правки под дорожкой; там, где кадр только смотрят, её нет */\n    protected readonly panel: TemplateRef<IRtPhotoViewer.PanelContext> | null = this.#data.panel ?? null;\n\n    protected readonly currentIndex: WritableSignal<number> = signal<number>(this.#data.startIndex);\n\n    protected readonly counter: Signal<string> = computed((): string => `${this.currentIndex() + 1} / ${this.photos.length}`);\n\n    /** Соседние кадры готовятся заранее, дальние в разметку не попадают */\n    protected readonly rendered: Signal<readonly boolean[]> = computed((): readonly boolean[] =>\n        this.photos.map((_photo: IRtPhotoViewer.Photo, index: number): boolean =>\n            shouldRenderPhoto(index, this.currentIndex(), this.photos.length)\n        )\n    );\n\n    constructor() {\n        // Открытие может быть не с первого кадра: без явной прокрутки счётчик\n        // показывал бы второй кадр, а на экране остался бы первый\n        afterNextRender((): void => {\n            this.#host.nativeElement.focus();\n            this.#scrollToCurrent();\n        });\n    }\n\n    /** Наружу отдаётся кадр, на котором закрыли: по нему вызывающая сторона чистит адрес */\n    public close(): void {\n        this.#dialogRef.close(this.currentIndex());\n    }\n\n    protected move(step: number): void {\n        this.select(nextPhotoIndex(this.currentIndex(), this.photos.length, step));\n    }\n\n    protected select(index: number): void {\n        this.currentIndex.set(index);\n        this.#scrollToCurrent();\n    }\n\n    /** Свайп листает мимо стрелок — счётчик догоняет позицию дорожки */\n    protected onScroll(): void {\n        const track: HTMLElement | undefined = this.track()?.nativeElement;\n        if (track) {\n            this.currentIndex.set(indexFromScroll(track.scrollLeft, track.clientWidth, this.photos.length));\n        }\n    }\n\n    /**\n     * Прокрутка ленты вслед за выбором. Позиция считается от ширины дорожки, а\n     * не от `scrollWidth`: кадры за пределами окна ещё не отрисованы, и общая\n     * ширина до их появления меньше реальной.\n     *\n     * Переход мгновенный: `behavior: 'smooth'` внутри оверлея молча не двигает\n     * дорожку — счётчик менялся, а кадр оставался прежним. Свайп при этом\n     * по-прежнему анимирует сам браузер через scroll-snap.\n     */\n    #scrollToCurrent(): void {\n        const track: HTMLElement | undefined = this.track()?.nativeElement;\n        if (!track) {\n            return;\n        }\n        track.scrollTo({ left: track.clientWidth * this.currentIndex(), behavior: 'instant' });\n    }\n}\n","<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- Ловушка держит Tab внутри; фокус ставит сам компонент, поэтому\n         авто-захвата здесь нет: он перебивал фокус на просмотрщике, и клавиши\n         переставали листать -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerClose\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerPrev\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().photoViewerNext\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- Панель приходит снаружи: где-то кадр только смотрят, где-то им ещё и\n             управляют, и решение принимается там же, где кадр виден крупно -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n"],"mappings":"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"}

package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs

@@ -631,6 +631,8 @@ var RtMessageComposerComponent = class RtMessageComposerComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]
@@ -1588,6 +1590,8 @@ var RtChatComponent = class RtChatComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]
@@ -2124,6 +2128,8 @@ var RtAiChatCopyComponent = class RtAiChatCopyComponent {
 					"disabled",
 					"active",
 					"expanded",
+					"ariaHaspopup",
+					"link",
 					"indicator"
 				],
 				outputs: ["clicked"]
@@ -2297,6 +2303,8 @@ var RtAiChatAnswerComponent = class RtAiChatAnswerComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]
@@ -2968,6 +2976,8 @@ var RtAiChatComponent = class RtAiChatComponent {
 						"disabled",
 						"active",
 						"expanded",
+						"ariaHaspopup",
+						"link",
 						"indicator"
 					],
 					outputs: ["clicked"]