@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

package/fesm2022/rt-tools-ui-kit-v2-input.mjs

@@ -0,0 +1,143 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, signal, computed, input, booleanAttribute, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
+import { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-input';
+/**
+ * Шеренный input common/ui. Поддерживает:
+ * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,
+ *   авто-подсветка invalid, `clearable`);
+ * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`);
+ * - встроенный password-toggle (`passwordToggle=true` + `type="password"`);
+ * - кнопку очистки (крестик) при наличии значения; на password-полях крестик
+ *   не показывается (postfix занят toggle'ом).
+ *
+ * Все размеры/цвета — через `--rt-input-*` semantic-токены.
+ */
+class RtInputComponent extends RtFormControlBase {
+    constructor() {
+        super(...arguments);
+        this.t = inject(RT_KIT_LABELS);
+        this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
+        this.isPasswordVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value() !== '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.effectiveType = computed(() => {
+            const t = this.type();
+            if (t === 'password' && this.passwordToggle() && this.isPasswordVisible()) {
+                return 'text';
+            }
+            return t;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+        this.showPasswordToggle = computed(() => this.passwordToggle() && this.type() === 'password', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
+        this.hasIconRight = computed(() => !!this.iconRight() || this.showPasswordToggle(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasIconRight" }] : /* istanbul ignore next */ []));
+        this.passwordToggleIcon = computed(() => this.isPasswordVisible() ? 'ico-eyeClose' : 'ico-eye', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
+        /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        this.type = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.iconLeft = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconLeft" }] : /* istanbul ignore next */ []));
+        this.iconRight = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconRight" }] : /* istanbul ignore next */ []));
+        this.passwordToggle = input(false, { ...(ngDevMode ? { debugName: "passwordToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.autocomplete = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    }
+    getEmptyValue() {
+        return '';
+    }
+    focusAfterClear() {
+        this.fieldEl()?.nativeElement.focus();
+    }
+    /**
+     * Падинг/гэп рамки принадлежат host-контейнеру, а не `<input>`, поэтому клик
+     * по этой зоне сам по себе не фокусирует поле. Перехватываем mousedown и
+     * переводим фокус в input — но только если клик не пришёлся на само поле
+     * (там нужно нативное позиционирование курсора) и не на интерактивный
+     * постфикс (крестик/таггл со своими обработчиками).
+     */
+    onHostMousedown(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const field = this.fieldEl()?.nativeElement;
+        const target = event.target;
+        if (!field || target === field || target.closest('button, rt-icon-button')) {
+            return;
+        }
+        event.preventDefault();
+        field.focus();
+    }
+    onInput(event) {
+        const target = event.target;
+        const next = target.value;
+        this.value.set(next);
+        this.emitChange(next);
+    }
+    onBlur() {
+        this.markTouched();
+    }
+    togglePassword() {
+        this.isPasswordVisible.update((v) => !v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtInputComponent, isStandalone: true, selector: "rt-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onHostMousedown($event)" }, properties: { "class.rt-input--disabled": "isDisabled()", "class.rt-input--invalid": "isInvalid()", "class.rt-input--readonly": "isReadonly()", "class.rt-input--borderless": "!bordered()", "class.rt-input--appearance--fill": "appearance() === 'fill'", "class.rt-input--size--sm": "size() === 'sm'", "class.rt-input--size--lg": "size() === 'lg'", "class.rt-input--with-icon-left": "!!iconLeft()", "class.rt-input--with-icon-right": "hasIconRight()" }, classAttribute: "rt-input" }, providers: [
+            // Алиас базового токена — чтобы rt-field мог найти контрол через
+            // contentChild(RtFormControlBase) (query по абстрактному классу).
+            { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },
+        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input--size--sm{min-height:var(--rt-input-height-sm)}.rt-input--size--lg{min-height:var(--rt-input-height-lg)}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtIconComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], providers: [
+                        // Алиас базового токена — чтобы rt-field мог найти контрол через
+                        // contentChild(RtFormControlBase) (query по абстрактному классу).
+                        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-input--disabled]': 'isDisabled()',
+                        '[class.rt-input--invalid]': 'isInvalid()',
+                        '[class.rt-input--readonly]': 'isReadonly()',
+                        '[class.rt-input--borderless]': '!bordered()',
+                        '[class.rt-input--appearance--fill]': "appearance() === 'fill'",
+                        '[class.rt-input--size--sm]': "size() === 'sm'",
+                        '[class.rt-input--size--lg]': "size() === 'lg'",
+                        '[class.rt-input--with-icon-left]': '!!iconLeft()',
+                        '[class.rt-input--with-icon-right]': 'hasIconRight()',
+                        '(mousedown)': 'onHostMousedown($event)',
+                    }, template: "<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-input{--rt-input-box-radius: var(--rt-input-radius);--rt-input-fill-radius: var(--rt-radius-sm);--rt-input-toggle-radius: var(--rt-radius-sm);position:relative;display:inline-flex;width:100%;min-height:var(--rt-input-height);box-sizing:border-box;align-items:center;padding:var(--rt-input-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-box-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);cursor:text;font-size:var(--rt-input-font-size);gap:var(--rt-input-gap);line-height:var(--rt-input-line-height);transition:var(--rt-input-transition)}.rt-input:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-input--borderless{border-color:transparent}.rt-input--appearance--fill{border-color:transparent;border-radius:var(--rt-input-fill-radius) var(--rt-input-fill-radius) 0 0;border-bottom-color:var(--rt-color-field-fill-underline);background-color:var(--rt-color-bg-surface-subtle-2)}.rt-input--invalid{border-color:var(--rt-input-color-border-error)}.rt-input--invalid:focus-within{box-shadow:var(--rt-input-focus-shadow-error)}.rt-input--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-input--size--sm{min-height:var(--rt-input-height-sm)}.rt-input--size--lg{min-height:var(--rt-input-height-lg)}.rt-input--readonly{padding-right:0;padding-left:0;border-color:transparent;background-color:transparent;cursor:default}.rt-input__readonly{color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size)}.rt-input__readonly--empty{color:var(--rt-field-value-empty-color)}.rt-input__field{min-width:0;flex:1 1 auto;padding:0;border:none;background:transparent;color:inherit;font:inherit;outline:none}.rt-input__field::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-input__field:disabled{cursor:not-allowed}.rt-input__icon-left,.rt-input__icon-right,.rt-input__clear{flex-shrink:0}.rt-input__icon-left,.rt-input__icon-right{--rt-icon-color-muted: var(--rt-input-icon-color);min-width:var(--rt-input-icon-size);min-height:var(--rt-input-icon-size)}.rt-input__toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-1);border:none;border-radius:var(--rt-input-toggle-radius);margin:0;background:transparent;color:inherit;cursor:pointer}.rt-input__toggle:hover{background-color:var(--rt-input-color-bg-hover)}.rt-input__toggle:focus-visible{outline:var(--rt-input-border-width) solid var(--rt-input-color-border-focus);outline-offset:var(--rt-input-focus-outline-offset)}.rt-input[data-rt-radius=none]{--rt-input-box-radius: var(--rt-radius-none)}.rt-input[data-rt-radius=xs]{--rt-input-box-radius: var(--rt-radius-xs)}.rt-input[data-rt-radius=sm]{--rt-input-box-radius: var(--rt-radius-sm)}.rt-input[data-rt-radius=ms]{--rt-input-box-radius: var(--rt-radius-ms)}.rt-input[data-rt-radius=md]{--rt-input-box-radius: var(--rt-radius-md)}.rt-input[data-rt-radius=lg]{--rt-input-box-radius: var(--rt-radius-lg)}.rt-input[data-rt-radius=xl]{--rt-input-box-radius: var(--rt-radius-xl)}.rt-input[data-rt-radius=\"2xl\"]{--rt-input-box-radius: var(--rt-radius-2xl)}.rt-input[data-rt-radius=full]{--rt-input-box-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtInputComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-input.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.ts","../../../projects/ui-kit-v2/src/lib/components/input/rt-input.component.html","../../../projects/ui-kit-v2/src/lib/components/input/rt-tools-ui-kit-v2-input.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtInput } from '@rt-tools/ui-kit-v2/core';\n\nconst BEM_BLOCK: string = 'rt-input';\n\n/**\n * Шеренный input common/ui. Поддерживает:\n * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,\n *   авто-подсветка invalid, `clearable`);\n * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`);\n * - встроенный password-toggle (`passwordToggle=true` + `type=\"password\"`);\n * - кнопку очистки (крестик) при наличии значения; на password-полях крестик\n *   не показывается (postfix занят toggle'ом).\n *\n * Все размеры/цвета — через `--rt-input-*` semantic-токены.\n */\n@Component({\n    selector: 'rt-input',\n    templateUrl: './rt-input.component.html',\n    styleUrls: ['./rt-input.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    providers: [\n        // Алиас базового токена — чтобы rt-field мог найти контрол через\n        // contentChild(RtFormControlBase) (query по абстрактному классу).\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtInputComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-input--disabled]': 'isDisabled()',\n        '[class.rt-input--invalid]': 'isInvalid()',\n        '[class.rt-input--readonly]': 'isReadonly()',\n        '[class.rt-input--borderless]': '!bordered()',\n        '[class.rt-input--appearance--fill]': \"appearance() === 'fill'\",\n        '[class.rt-input--size--sm]': \"size() === 'sm'\",\n        '[class.rt-input--size--lg]': \"size() === 'lg'\",\n        '[class.rt-input--with-icon-left]': '!!iconLeft()',\n        '[class.rt-input--with-icon-right]': 'hasIconRight()',\n        '(mousedown)': 'onHostMousedown($event)',\n    },\n})\nexport class RtInputComponent extends RtFormControlBase<string> {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly fieldEl: Signal<ElementRef<HTMLInputElement> | undefined> = viewChild<ElementRef<HTMLInputElement>>('fieldEl');\n\n    protected readonly isPasswordVisible: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value() !== '');\n\n    protected readonly effectiveType: Signal<string> = computed((): string => {\n        const t: IRtInput.Type = this.type();\n        if (t === 'password' && this.passwordToggle() && this.isPasswordVisible()) {\n            return 'text';\n        }\n        return t;\n    });\n\n    protected readonly showPasswordToggle: Signal<boolean> = computed((): boolean => this.passwordToggle() && this.type() === 'password');\n\n    protected readonly hasIconRight: Signal<boolean> = computed((): boolean => !!this.iconRight() || this.showPasswordToggle());\n\n    protected readonly passwordToggleIcon: Signal<IRtIcon.Name> = computed((): IRtIcon.Name =>\n        this.isPasswordVisible() ? 'ico-eyeClose' : 'ico-eye'\n    );\n\n    /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */\n    public readonly appearance: InputSignal<IRtInput.Appearance> = input<IRtInput.Appearance>('outline');\n\n    public readonly displayText: Signal<string> = computed((): string => this.value());\n\n    public readonly type: InputSignal<IRtInput.Type> = input<IRtInput.Type>('text');\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly iconRight: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n    public readonly passwordToggle: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n    public readonly autocomplete: InputSignal<string | null> = input<string | null>(null);\n\n    protected getEmptyValue(): string {\n        return '';\n    }\n\n    protected focusAfterClear(): void {\n        this.fieldEl()?.nativeElement.focus();\n    }\n\n    /**\n     * Падинг/гэп рамки принадлежат host-контейнеру, а не `<input>`, поэтому клик\n     * по этой зоне сам по себе не фокусирует поле. Перехватываем mousedown и\n     * переводим фокус в input — но только если клик не пришёлся на само поле\n     * (там нужно нативное позиционирование курсора) и не на интерактивный\n     * постфикс (крестик/таггл со своими обработчиками).\n     */\n    protected onHostMousedown(event: MouseEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        const field: HTMLInputElement | undefined = this.fieldEl()?.nativeElement;\n        const target: HTMLElement = event.target as HTMLElement;\n        if (!field || target === field || target.closest('button, rt-icon-button')) {\n            return;\n        }\n        event.preventDefault();\n        field.focus();\n    }\n\n    protected onInput(event: Event): void {\n        const target: HTMLInputElement = event.target as HTMLInputElement;\n        const next: string = target.value;\n        this.value.set(next);\n        this.emitChange(next);\n    }\n\n    protected onBlur(): void {\n        this.markTouched();\n    }\n\n    protected togglePassword(): void {\n        this.isPasswordVisible.update((v: boolean): boolean => !v);\n    }\n}\n","<ng-container rtBlock=\"rt-input\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"input-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    } @else {\n        @if (iconLeft(); as left) {\n            <rt-icon rtElem=\"icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n        }\n        <input\n            #fieldEl\n            rtElem=\"field\"\n            qa-dataid=\"input-control\"\n            [type]=\"effectiveType()\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"isDisabled()\"\n            [attr.autocomplete]=\"autocomplete()\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel()\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\" />\n        @if (showClearButton() && !showPasswordToggle()) {\n            <rt-icon-button\n                rtElem=\"clear\"\n                qa-dataid=\"input-clear\"\n                icon=\"ico-close\"\n                size=\"sm\"\n                variant=\"ghost\"\n                iconColor=\"muted\"\n                [ariaLabel]=\"t().uiClear\"\n                [tabIndex]=\"-1\"\n                (clicked)=\"clear($event)\" />\n        }\n        @if (showPasswordToggle()) {\n            <button\n                rtElem=\"toggle\"\n                qa-dataid=\"input-password-toggle\"\n                type=\"button\"\n                [attr.aria-label]=\"isPasswordVisible() ? t().uiHidePassword : t().uiShowPassword\"\n                [tabIndex]=\"-1\"\n                (click)=\"togglePassword()\">\n                <rt-icon size=\"sm\" color=\"muted\" [name]=\"passwordToggleIcon()\" />\n            </button>\n        } @else if (iconRight(); as right) {\n            <rt-icon rtElem=\"icon-right\" size=\"sm\" color=\"muted\" [name]=\"right\" />\n        }\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AA6BA,MAAM,SAAS,GAAW,UAAU;AAEpC;;;;;;;;;;AAUG;AAmCG,MAAO,gBAAiB,SAAQ,iBAAyB,CAAA;AAlC/D,IAAA,WAAA,GAAA;;AAmCuB,QAAA,IAAA,CAAA,CAAC,GAA2B,MAAM,CAAC,aAAa,CAAC;QAEjD,IAAA,CAAA,OAAO,GAAqD,SAAS,CAA+B,SAAS;oFAAC;QAE9G,IAAA,CAAA,iBAAiB,GAA4B,MAAM,CAAU,KAAK;8FAAC;QAEnE,IAAA,CAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE;qFAAC;AAExE,QAAA,IAAA,CAAA,aAAa,GAAmB,QAAQ,CAAC,MAAa;AACrE,YAAA,MAAM,CAAC,GAAkB,IAAI,CAAC,IAAI,EAAE;AACpC,YAAA,IAAI,CAAC,KAAK,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;AACvE,gBAAA,OAAO,MAAM;YACjB;AACA,YAAA,OAAO,CAAC;QACZ,CAAC;0FAAC;AAEiB,QAAA,IAAA,CAAA,kBAAkB,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,UAAU;+FAAC;AAElH,QAAA,IAAA,CAAA,YAAY,GAAoB,QAAQ,CAAC,MAAe,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE;yFAAC;AAExG,QAAA,IAAA,CAAA,kBAAkB,GAAyB,QAAQ,CAAC,MACnE,IAAI,CAAC,iBAAiB,EAAE,GAAG,cAAc,GAAG,SAAS;+FACxD;;QAGe,IAAA,CAAA,UAAU,GAAqC,KAAK,CAAsB,SAAS;uFAAC;QAEpF,IAAA,CAAA,WAAW,GAAmB,QAAQ,CAAC,MAAc,IAAI,CAAC,KAAK,EAAE;wFAAC;QAElE,IAAA,CAAA,IAAI,GAA+B,KAAK,CAAgB,MAAM;iFAAC;QAC/D,IAAA,CAAA,WAAW,GAAwB,KAAK,CAAS,EAAE;wFAAC;QACpD,IAAA,CAAA,QAAQ,GAAqC,KAAK,CAAsB,IAAI;qFAAC;QAC7E,IAAA,CAAA,SAAS,GAAqC,KAAK,CAAsB,IAAI;sFAAC;QAC9E,IAAA,CAAA,cAAc,GAAoD,KAAK,CAAwB,KAAK,sFAChH,SAAS,EAAE,gBAAgB,EAAA,CAC7B;QACc,IAAA,CAAA,YAAY,GAA+B,KAAK,CAAgB,IAAI;yFAAC;AA4CxF,IAAA;IA1Ca,aAAa,GAAA;AACnB,QAAA,OAAO,EAAE;IACb;IAEU,eAAe,GAAA;QACrB,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;IACzC;AAEA;;;;;;AAMG;AACO,IAAA,eAAe,CAAC,KAAiB,EAAA;AACvC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACnB;QACJ;QACA,MAAM,KAAK,GAAiC,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa;AACzE,QAAA,MAAM,MAAM,GAAgB,KAAK,CAAC,MAAqB;AACvD,QAAA,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAAE;YACxE;QACJ;QACA,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,KAAK,EAAE;IACjB;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;AAC1B,QAAA,MAAM,MAAM,GAAqB,KAAK,CAAC,MAA0B;AACjE,QAAA,MAAM,IAAI,GAAW,MAAM,CAAC,KAAK;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IACzB;IAEU,MAAM,GAAA;QACZ,IAAI,CAAC,WAAW,EAAE;IACtB;IAEU,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAU,KAAc,CAAC,CAAC,CAAC;IAC9D;8GAhFS,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,0BAAA,EAAA,cAAA,EAAA,yBAAA,EAAA,aAAA,EAAA,0BAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,aAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,0BAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,iBAAA,EAAA,gCAAA,EAAA,cAAA,EAAA,iCAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EApBd;;;AAGP,YAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,gBAAgB,CAAC,EAAE;AAClF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5DL,88DAgDA,EAAA,MAAA,EAAA,CAAA,s3GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADEQ,gBAAA,qBAAqB,8PACrB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,wEACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAsBP,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAlC5B,SAAS;+BACI,UAAU,EAAA,eAAA,EAGH,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,qBAAqB;wBACrB,eAAe;wBACf,cAAc;wBACd,aAAa;wBACb,YAAY;qBACf,EAAA,SAAA,EACU;;;AAGP,wBAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,gBAAiB,CAAC,EAAE;AAClF,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,4BAA4B,EAAE,cAAc;AAC5C,wBAAA,2BAA2B,EAAE,aAAa;AAC1C,wBAAA,4BAA4B,EAAE,cAAc;AAC5C,wBAAA,8BAA8B,EAAE,aAAa;AAC7C,wBAAA,oCAAoC,EAAE,yBAAyB;AAC/D,wBAAA,4BAA4B,EAAE,iBAAiB;AAC/C,wBAAA,4BAA4B,EAAE,iBAAiB;AAC/C,wBAAA,kCAAkC,EAAE,cAAc;AAClD,wBAAA,mCAAmC,EAAE,gBAAgB;AACrD,wBAAA,aAAa,EAAE,yBAAyB;AAC3C,qBAAA,EAAA,QAAA,EAAA,88DAAA,EAAA,MAAA,EAAA,CAAA,s3GAAA,CAAA,EAAA;qEAKsH,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE/EpI;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-live-badge.mjs

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { computed, input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+
+const BEM_BLOCK = 'rt-live-badge';
+/**
+ * Пилюля живого счётчика: точка состояния, подпись и число. `active` означает
+ * «поток жив», а не «счётчик больше нуля»: ноль посетителей при живом потоке —
+ * это данные, а оборванный поток — отсутствие данных, и выглядеть они должны
+ * по-разному.
+ */
+class RtLiveBadgeComponent {
+    constructor() {
+        this.#t_uiLiveOnSite = rtKitLabel('uiLiveOnSite');
+        this.labelText = computed(() => this.label() || this.#t_uiLiveOnSite(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** `null` — данных ещё нет, рисуется прочерк. */
+        this.count = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    #t_uiLiveOnSite;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtLiveBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtLiveBadgeComponent, isStandalone: true, selector: "rt-live-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-live-badge" }, ngImport: i0, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-live-badge{display:inline-flex}rt-live-badge .rt-live-badge{--rt-live-badge-dot-radius: var(--rt-radius-full);display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-live-badge .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}rt-live-badge .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-live-badge-dot-radius);background:var(--rt-color-border-subtle)}rt-live-badge .rt-live-badge__count{color:var(--rt-color-text-primary)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtLiveBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-live-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-live-badge{display:inline-flex}rt-live-badge .rt-live-badge{--rt-live-badge-dot-radius: var(--rt-radius-full);display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-live-badge .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}rt-live-badge .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-live-badge-dot-radius);background:var(--rt-color-border-subtle)}rt-live-badge .rt-live-badge__count{color:var(--rt-color-text-primary)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtLiveBadgeComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-live-badge.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-live-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-live-badge.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/live-badge/rt-live-badge.component.ts","../../../projects/ui-kit-v2/src/lib/components/live-badge/rt-live-badge.component.html","../../../projects/ui-kit-v2/src/lib/components/live-badge/rt-tools-ui-kit-v2-live-badge.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { rtKitLabel } from '@rt-tools/ui-kit-v2/core';\n\nconst BEM_BLOCK: string = 'rt-live-badge';\n\n/**\n * Пилюля живого счётчика: точка состояния, подпись и число. `active` означает\n * «поток жив», а не «счётчик больше нуля»: ноль посетителей при живом потоке —\n * это данные, а оборванный поток — отсутствие данных, и выглядеть они должны\n * по-разному.\n */\n@Component({\n    selector: 'rt-live-badge',\n    templateUrl: './rt-live-badge.component.html',\n    styleUrl: './rt-live-badge.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtLiveBadgeComponent {\n    readonly #t_uiLiveOnSite: Signal<string> = rtKitLabel('uiLiveOnSite');\n\n    protected readonly labelText: Signal<string> = computed((): string => this.label() || this.#t_uiLiveOnSite());\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly label: InputSignal<string> = input<string>('');\n\n    /** `null` — данных ещё нет, рисуется прочерк. */\n    public readonly count: InputSignal<number | null> = input<number | null>(null);\n\n    public readonly active: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n}\n","<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '—' }}</span>\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,SAAS,GAAW,eAAe;AAEzC;;;;;AAKG;MAiBU,oBAAoB,CAAA;AAhBjC,IAAA,WAAA,GAAA;AAiBa,QAAA,IAAA,CAAA,eAAe,GAAmB,UAAU,CAAC,cAAc,CAAC;AAElD,QAAA,IAAA,CAAA,SAAS,GAAmB,QAAQ,CAAC,MAAc,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;sFAAC;;QAG7F,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAS,EAAE;kFAAC;;QAG9C,IAAA,CAAA,KAAK,GAA+B,KAAK,CAAgB,IAAI;kFAAC;QAE9D,IAAA,CAAA,MAAM,GAAoD,KAAK,CAAwB,KAAK,8EACxG,SAAS,EAAE,gBAAgB,EAAA,CAC7B;AACL,IAAA;AAbY,IAAA,eAAe;8GADf,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,2eCzCjC,yVAKA,EAAA,MAAA,EAAA,CAAA,mlBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBD4BQ,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMP,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAhBhC,SAAS;+BACI,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;wBACb,YAAY;qBACf,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,yVAAA,EAAA,MAAA,EAAA,CAAA,mlBAAA,CAAA,EAAA;;;AEvCL;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-logo.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { computed, input, numberAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+
+/**
+ * Высота в px, с которой рисуется вариант, если её не задали явно. `0`
+ * означает «брать умолчание варианта».
+ */
+const DEFAULT_HEIGHT = Object.freeze({
+    wordmark: 51,
+    lockup: 75,
+});
+/** Отношение ширины к высоте, с которым рисуется вариант без явного `aspect`. */
+const DEFAULT_ASPECT = Object.freeze({
+    wordmark: 5.4,
+    lockup: 3.6,
+});
+const BEM_BLOCK = 'rt-logo';
+/**
+ * Логотип приложения: начертание названия и, в варианте `lockup`, слоган под ним.
+ *
+ * Сами начертания кит не везёт — их даёт приложение, задав на любом предке
+ * четыре свойства оформления: `--rt-logo-wordmark`, `--rt-logo-tagline` и их
+ * пару `--rt-logo-wordmark-dark`, `--rt-logo-tagline-dark` для тёмной темы.
+ * Пока свойства не заданы, компонент занимает место, но ничего не рисует.
+ *
+ * ```css
+ * :root {
+ *     --rt-logo-wordmark: url('/logo/wordmark.svg');
+ *     --rt-logo-wordmark-dark: url('/logo/wordmark-inverse.svg');
+ * }
+ * ```
+ *
+ * Начертания лежат фоном, а не в `<img>`: у тёмной темы своя пара файлов, и
+ * подмена `background-image` — единственный способ переключить их одним правилом.
+ */
+class RtLogoComponent {
+    constructor() {
+        /** Реальная высота: явно заданная или умолчание варианта. */
+        this.effectiveHeight = computed(() => {
+            const explicit = this.height();
+            return explicit > 0 ? explicit : DEFAULT_HEIGHT[this.variant()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : /* istanbul ignore next */ []));
+        /** Ширина host'а: высота, растянутая по отношению сторон начертания. */
+        this.effectiveWidth = computed(() => {
+            const explicit = this.aspect();
+            const ratio = explicit > 0 ? explicit : DEFAULT_ASPECT[this.variant()];
+            return Math.round(this.effectiveHeight() * ratio);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
+        /** Показывать ли слоган под начертанием. */
+        this.showTagline = computed(() => this.variant() === 'lockup', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTagline" }] : /* istanbul ignore next */ []));
+        this.variant = input('lockup', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Высота логотипа в пикселях. `0` означает «использовать умолчание варианта».
+         * Принимает строку или число (чтобы писалось как `height="75"`).
+         */
+        this.height = input(0, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Отношение ширины к высоте своего начертания. `0` — умолчание варианта.
+         * Без него узкий или широкий логотип обрежется или обрастёт пустотой:
+         * ширину host'а кит считает сам, а пропорций чужого файла он не знает.
+         */
+        this.aspect = input(0, { ...(ngDevMode ? { debugName: "aspect" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Подпись для скринридера: обычно название продукта. */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtLogoComponent, isStandalone: true, selector: "rt-logo", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "effectiveHeight()", "style.width.px": "effectiveWidth()", "attr.role": "'img'", "attr.aria-label": "ariaLabel()" }, classAttribute: "rt-logo" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-logo{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}.rt-logo:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}.rt-logo:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-logo', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                        '[style.height.px]': 'effectiveHeight()',
+                        '[style.width.px]': 'effectiveWidth()',
+                        '[attr.role]': "'img'",
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-logo{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}.rt-logo:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}.rt-logo:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtLogoComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-logo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-logo.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/logo/rt-logo.component.ts","../../../projects/ui-kit-v2/src/lib/components/logo/rt-logo.component.html","../../../projects/ui-kit-v2/src/lib/components/logo/rt-tools-ui-kit-v2-logo.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtLogo } from './rt-logo.model';\n\n/**\n * Высота в px, с которой рисуется вариант, если её не задали явно. `0`\n * означает «брать умолчание варианта».\n */\nconst DEFAULT_HEIGHT: Readonly<Record<IRtLogo.Variant, number>> = Object.freeze({\n    wordmark: 51,\n    lockup: 75,\n});\n\n/** Отношение ширины к высоте, с которым рисуется вариант без явного `aspect`. */\nconst DEFAULT_ASPECT: Readonly<Record<IRtLogo.Variant, number>> = Object.freeze({\n    wordmark: 5.4,\n    lockup: 3.6,\n});\n\nconst BEM_BLOCK: string = 'rt-logo';\n\n/**\n * Логотип приложения: начертание названия и, в варианте `lockup`, слоган под ним.\n *\n * Сами начертания кит не везёт — их даёт приложение, задав на любом предке\n * четыре свойства оформления: `--rt-logo-wordmark`, `--rt-logo-tagline` и их\n * пару `--rt-logo-wordmark-dark`, `--rt-logo-tagline-dark` для тёмной темы.\n * Пока свойства не заданы, компонент занимает место, но ничего не рисует.\n *\n * ```css\n * :root {\n *     --rt-logo-wordmark: url('/logo/wordmark.svg');\n *     --rt-logo-wordmark-dark: url('/logo/wordmark-inverse.svg');\n * }\n * ```\n *\n * Начертания лежат фоном, а не в `<img>`: у тёмной темы своя пара файлов, и\n * подмена `background-image` — единственный способ переключить их одним правилом.\n */\n@Component({\n    selector: 'rt-logo',\n    templateUrl: './rt-logo.component.html',\n    styleUrls: ['./rt-logo.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[style.height.px]': 'effectiveHeight()',\n        '[style.width.px]': 'effectiveWidth()',\n        '[attr.role]': \"'img'\",\n        '[attr.aria-label]': 'ariaLabel()',\n    },\n})\nexport class RtLogoComponent {\n    /** Реальная высота: явно заданная или умолчание варианта. */\n    protected readonly effectiveHeight: Signal<number> = computed((): number => {\n        const explicit: number = this.height();\n        return explicit > 0 ? explicit : DEFAULT_HEIGHT[this.variant()];\n    });\n\n    /** Ширина host'а: высота, растянутая по отношению сторон начертания. */\n    protected readonly effectiveWidth: Signal<number> = computed((): number => {\n        const explicit: number = this.aspect();\n        const ratio: number = explicit > 0 ? explicit : DEFAULT_ASPECT[this.variant()];\n        return Math.round(this.effectiveHeight() * ratio);\n    });\n\n    /** Показывать ли слоган под начертанием. */\n    protected readonly showTagline: Signal<boolean> = computed((): boolean => this.variant() === 'lockup');\n\n    public readonly variant: InputSignal<IRtLogo.Variant> = input<IRtLogo.Variant>('lockup');\n\n    /**\n     * Высота логотипа в пикселях. `0` означает «использовать умолчание варианта».\n     * Принимает строку или число (чтобы писалось как `height=\"75\"`).\n     */\n    public readonly height: InputSignalWithTransform<number, number | string> = input<number, number | string>(0, {\n        transform: numberAttribute,\n    });\n\n    /**\n     * Отношение ширины к высоте своего начертания. `0` — умолчание варианта.\n     * Без него узкий или широкий логотип обрежется или обрастёт пустотой:\n     * ширину host'а кит считает сам, а пропорций чужого файла он не знает.\n     */\n    public readonly aspect: InputSignalWithTransform<number, number | string> = input<number, number | string>(0, {\n        transform: numberAttribute,\n    });\n\n    /** Подпись для скринридера: обычно название продукта. */\n    public readonly ariaLabel: InputSignal<string> = input<string>('');\n}\n","<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAgBA;;;AAGG;AACH,MAAM,cAAc,GAA8C,MAAM,CAAC,MAAM,CAAC;AAC5E,IAAA,QAAQ,EAAE,EAAE;AACZ,IAAA,MAAM,EAAE,EAAE;AACb,CAAA,CAAC;AAEF;AACA,MAAM,cAAc,GAA8C,MAAM,CAAC,MAAM,CAAC;AAC5E,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,MAAM,EAAE,GAAG;AACd,CAAA,CAAC;AAEF,MAAM,SAAS,GAAW,SAAS;AAEnC;;;;;;;;;;;;;;;;;AAiBG;MAoBU,eAAe,CAAA;AAnB5B,IAAA,WAAA,GAAA;;AAqBuB,QAAA,IAAA,CAAA,eAAe,GAAmB,QAAQ,CAAC,MAAa;AACvE,YAAA,MAAM,QAAQ,GAAW,IAAI,CAAC,MAAM,EAAE;AACtC,YAAA,OAAO,QAAQ,GAAG,CAAC,GAAG,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QACnE,CAAC;4FAAC;;AAGiB,QAAA,IAAA,CAAA,cAAc,GAAmB,QAAQ,CAAC,MAAa;AACtE,YAAA,MAAM,QAAQ,GAAW,IAAI,CAAC,MAAM,EAAE;AACtC,YAAA,MAAM,KAAK,GAAW,QAAQ,GAAG,CAAC,GAAG,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9E,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,KAAK,CAAC;QACrD,CAAC;2FAAC;;QAGiB,IAAA,CAAA,WAAW,GAAoB,QAAQ,CAAC,MAAe,IAAI,CAAC,OAAO,EAAE,KAAK,QAAQ;wFAAC;QAEtF,IAAA,CAAA,OAAO,GAAiC,KAAK,CAAkB,QAAQ;oFAAC;AAExF;;;AAGG;QACa,IAAA,CAAA,MAAM,GAAsD,KAAK,CAA0B,CAAC,8EACxG,SAAS,EAAE,eAAe,EAAA,CAC5B;AAEF;;;;AAIG;QACa,IAAA,CAAA,MAAM,GAAsD,KAAK,CAA0B,CAAC,8EACxG,SAAS,EAAE,eAAe,EAAA,CAC5B;;QAGc,IAAA,CAAA,SAAS,GAAwB,KAAK,CAAS,EAAE;sFAAC;AACrE,IAAA;8GAtCY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,kwBCtE5B,mOAOA,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;ADoDQ,gBAAA,cAAc,yEACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAUR,eAAe,EAAA,UAAA,EAAA,CAAA;kBAnB3B,SAAS;+BACI,SAAS,EAAA,eAAA,EAGF,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;qBAChB,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,mBAAmB,EAAE,mBAAmB;AACxC,wBAAA,kBAAkB,EAAE,kBAAkB;AACtC,wBAAA,aAAa,EAAE,OAAO;AACtB,wBAAA,mBAAmB,EAAE,aAAa;AACrC,qBAAA,EAAA,QAAA,EAAA,mOAAA,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA;;;AEpEL;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-markdown-text.mjs

@@ -0,0 +1,57 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { ERtMarkdownBlock, ERtMarkdownInline, parseMarkdown } from '@rt-tools/ui-kit-v2/core';
+import * as i1 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+
+const BEM_BLOCK = 'rt-markdown-text';
+/**
+ * Текст, написанный разметкой, показанный узлами.
+ *
+ * Перечень разметки зашит в разборщике и входом не задаётся: вход у компонента один — сам
+ * текст. Настраивать нечего, значит нечем и ослабить.
+ *
+ * Присланная строка в страницу не отдаётся ни разу: компонент рисует дерево узлов, которое
+ * вернул разбор, и другого пути у текста внутрь страницы нет. Поэтому сырой HTML, картинки и
+ * адреса чужих схем показываются видимым текстом — узла для них разборщик не строит.
+ *
+ * Таблица рисуется своей разметкой, а не таблицей кита: та объявляет колонки заранее
+ * директивами, а число столбцов здесь приходит из текста и заранее не известно никому.
+ */
+class RtMarkdownTextComponent {
+    constructor() {
+        /** Роды блоков в шаблоне: сравнение идёт со значением перечисления, а не со строкой. */
+        this.blockKind = ERtMarkdownBlock;
+        /** Роды кусков строки в шаблоне. */
+        this.inlineKind = ERtMarkdownInline;
+        this.blocks = computed(() => parseMarkdown(this.text()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+        this.text = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMarkdownTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMarkdownTextComponent, isStandalone: true, selector: "rt-markdown-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "rt-markdown-text" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-markdown-text\">\n    @for (item of blocks(); track $index) {\n        <ng-container *ngTemplateOutlet=\"blockTpl; context: { $implicit: item }\" />\n    }\n\n    <ng-template #blockTpl let-item>\n        @switch (item.kind) {\n            @case (blockKind.Heading) {\n                <div\n                    rtElem=\"heading\"\n                    qa-dataid=\"markdown-heading\"\n                    role=\"heading\"\n                    [attr.aria-level]=\"item.level\"\n                    [rtMod]=\"{ level: item.levelName }\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </div>\n            }\n            @case (blockKind.List) {\n                @if (item.ordered) {\n                    <ol rtElem=\"list\" qa-dataid=\"markdown-list\" [rtMod]=\"{ ordered: true }\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ol>\n                } @else {\n                    <ul rtElem=\"list\" qa-dataid=\"markdown-list\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ul>\n                }\n            }\n            @case (blockKind.Quote) {\n                <blockquote rtElem=\"quote\" qa-dataid=\"markdown-quote\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </blockquote>\n            }\n            @case (blockKind.Code) {\n                <pre rtElem=\"code\" qa-dataid=\"markdown-code\"><code>{{ item.code }}</code></pre>\n            }\n            @case (blockKind.Table) {\n                <ng-container *ngTemplateOutlet=\"tableTpl; context: { $implicit: item }\" />\n            }\n            @default {\n                <p rtElem=\"paragraph\" qa-dataid=\"markdown-paragraph\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </p>\n            }\n        }\n    </ng-template>\n\n    <ng-template #itemsTpl let-items>\n        @for (point of items; track $index) {\n            <li rtElem=\"item\" qa-dataid=\"markdown-item\" [rtMod]=\"{ level: point.levelName }\">\n                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: point.content }\" />\n            </li>\n        }\n    </ng-template>\n\n    <ng-template #tableTpl let-item>\n        <div rtElem=\"table-scroll\" qa-dataid=\"markdown-table-scroll\">\n            <table rtElem=\"table\" qa-dataid=\"markdown-table\">\n                <thead>\n                    <tr>\n                        @for (cell of item.head; track $index) {\n                            <th rtElem=\"head-cell\" qa-dataid=\"markdown-head-cell\">\n                                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                            </th>\n                        }\n                    </tr>\n                </thead>\n                <tbody>\n                    @for (row of item.rows; track $index) {\n                        <tr>\n                            @for (cell of row; track $index) {\n                                <td rtElem=\"cell\" qa-dataid=\"markdown-cell\">\n                                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                                </td>\n                            }\n                        </tr>\n                    }\n                </tbody>\n            </table>\n        </div>\n    </ng-template>\n\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u0443\u0441\u043A\u043E\u0432 \u043F\u0438\u0448\u0443\u0442\u0441\u044F \u0431\u0435\u0437 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432, \u0430 \u0444\u043E\u0440\u043C\u0430\u0442\u0442\u0435\u0440 \u043E\u0442\u043A\u043B\u044E\u0447\u0451\u043D \u0434\u043B\u044F \u043D\u0438\u0445 \u043D\u0430\u0440\u043E\u0447\u043D\u043E: \u043F\u0435\u0440\u0435\u043D\u043E\u0441\n        \u0441\u0442\u0440\u043E\u043A\u0438 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0441\u044F \u043F\u0440\u043E\u0431\u0435\u043B\u043E\u043C, \u0438 \u0440\u0430\u0437\u043C\u0435\u0447\u0435\u043D\u043D\u044B\u0439 \u043A\u0443\u0441\u043E\u043A \u043E\u0442\u044A\u0435\u0437\u0436\u0430\u0435\u0442 \u043E\u0442 \u0441\u043E\u0441\u0435\u0434\u043D\u0435\u0433\u043E \u0437\u043D\u0430\u043A\u0430 \u2014\n        \u00AB\u0436\u0438\u0440\u043D\u043E , \u0430 \u0440\u044F\u0434\u043E\u043C\u00BB.\n    -->\n    <!-- prettier-ignore -->\n    <ng-template #inlineTpl let-nodes>@for (node of nodes; track $index) {@switch (node.kind) {@case (inlineKind.Strong) {<strong rtElem=\"strong\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></strong>}@case (inlineKind.Emphasis) {<em rtElem=\"emphasis\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></em>}@case (inlineKind.Strike) {<s rtElem=\"strike\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></s>}@case (inlineKind.Code) {<code rtElem=\"code-inline\" qa-dataid=\"markdown-code-inline\">{{ node.text }}</code>}@case (inlineKind.Link) {<a rtElem=\"link\" qa-dataid=\"markdown-link\" rel=\"noopener noreferrer\" target=\"_blank\" [href]=\"node.href\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></a>}@case (inlineKind.Break) {<br />}@default {{{ node.text }}}}}</ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-markdown-text{--rt-markdown-text-radius: var(--rt-radius-sm);--rt-markdown-text-border-width: var(--rt-border-width-thin);display:flex;min-width:0;max-width:100%;flex-direction:column;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);gap:var(--rt-space-sm);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-markdown-text__heading{margin:0;color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__heading--level--1{font-size:var(--rt-text-lg)}.rt-markdown-text__heading--level--2{font-size:var(--rt-text-md)}.rt-markdown-text__heading--level--3,.rt-markdown-text__heading--level--4,.rt-markdown-text__heading--level--5,.rt-markdown-text__heading--level--6{font-size:var(--rt-text-sm)}.rt-markdown-text__paragraph{margin:0}.rt-markdown-text__list{padding-left:var(--rt-space-md);margin:0;list-style:disc}.rt-markdown-text__list--ordered{list-style:decimal}.rt-markdown-text__item--level--1{margin-left:var(--rt-space-md)}.rt-markdown-text__item--level--2{margin-left:var(--rt-space-lg)}.rt-markdown-text__quote{padding-left:var(--rt-space-sm);border-left:var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);margin:0;color:var(--rt-color-text-muted)}.rt-markdown-text__code{max-width:100%;padding:var(--rt-space-sm);border-radius:var(--rt-markdown-text-radius);margin:0;background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary);font-family:var(--rt-font-family-mono);font-size:var(--rt-text-2xs);line-height:var(--rt-leading-snug);overflow-x:auto}.rt-markdown-text__code-inline{padding:0 var(--rt-space-2xs);border-radius:var(--rt-markdown-text-radius);background:var(--rt-color-bg-subtle);font-family:var(--rt-font-family-mono);font-size:var(--rt-text-2xs)}.rt-markdown-text__table-scroll{max-width:100%;overflow-x:auto}.rt-markdown-text__table{width:100%;border-collapse:collapse}.rt-markdown-text__head-cell,.rt-markdown-text__cell{padding:var(--rt-space-2xs) var(--rt-space-sm);border:var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);text-align:left}.rt-markdown-text__head-cell{color:var(--rt-color-text-muted);font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__strong{font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__emphasis{font-style:italic}.rt-markdown-text__strike{text-decoration:line-through}.rt-markdown-text__link{color:var(--rt-color-text-link);text-decoration:underline}.rt-markdown-text[data-rt-radius=none]{--rt-markdown-text-radius: var(--rt-radius-none)}.rt-markdown-text[data-rt-radius=xs]{--rt-markdown-text-radius: var(--rt-radius-xs)}.rt-markdown-text[data-rt-radius=sm]{--rt-markdown-text-radius: var(--rt-radius-sm)}.rt-markdown-text[data-rt-radius=ms]{--rt-markdown-text-radius: var(--rt-radius-ms)}.rt-markdown-text[data-rt-radius=md]{--rt-markdown-text-radius: var(--rt-radius-md)}.rt-markdown-text[data-rt-radius=lg]{--rt-markdown-text-radius: var(--rt-radius-lg)}.rt-markdown-text[data-rt-radius=xl]{--rt-markdown-text-radius: var(--rt-radius-xl)}.rt-markdown-text[data-rt-radius=\"2xl\"]{--rt-markdown-text-radius: var(--rt-radius-2xl)}.rt-markdown-text[data-rt-radius=full]{--rt-markdown-text-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMarkdownTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-markdown-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        NgTemplateOutlet,
+                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-markdown-text\">\n    @for (item of blocks(); track $index) {\n        <ng-container *ngTemplateOutlet=\"blockTpl; context: { $implicit: item }\" />\n    }\n\n    <ng-template #blockTpl let-item>\n        @switch (item.kind) {\n            @case (blockKind.Heading) {\n                <div\n                    rtElem=\"heading\"\n                    qa-dataid=\"markdown-heading\"\n                    role=\"heading\"\n                    [attr.aria-level]=\"item.level\"\n                    [rtMod]=\"{ level: item.levelName }\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </div>\n            }\n            @case (blockKind.List) {\n                @if (item.ordered) {\n                    <ol rtElem=\"list\" qa-dataid=\"markdown-list\" [rtMod]=\"{ ordered: true }\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ol>\n                } @else {\n                    <ul rtElem=\"list\" qa-dataid=\"markdown-list\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ul>\n                }\n            }\n            @case (blockKind.Quote) {\n                <blockquote rtElem=\"quote\" qa-dataid=\"markdown-quote\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </blockquote>\n            }\n            @case (blockKind.Code) {\n                <pre rtElem=\"code\" qa-dataid=\"markdown-code\"><code>{{ item.code }}</code></pre>\n            }\n            @case (blockKind.Table) {\n                <ng-container *ngTemplateOutlet=\"tableTpl; context: { $implicit: item }\" />\n            }\n            @default {\n                <p rtElem=\"paragraph\" qa-dataid=\"markdown-paragraph\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </p>\n            }\n        }\n    </ng-template>\n\n    <ng-template #itemsTpl let-items>\n        @for (point of items; track $index) {\n            <li rtElem=\"item\" qa-dataid=\"markdown-item\" [rtMod]=\"{ level: point.levelName }\">\n                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: point.content }\" />\n            </li>\n        }\n    </ng-template>\n\n    <ng-template #tableTpl let-item>\n        <div rtElem=\"table-scroll\" qa-dataid=\"markdown-table-scroll\">\n            <table rtElem=\"table\" qa-dataid=\"markdown-table\">\n                <thead>\n                    <tr>\n                        @for (cell of item.head; track $index) {\n                            <th rtElem=\"head-cell\" qa-dataid=\"markdown-head-cell\">\n                                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                            </th>\n                        }\n                    </tr>\n                </thead>\n                <tbody>\n                    @for (row of item.rows; track $index) {\n                        <tr>\n                            @for (cell of row; track $index) {\n                                <td rtElem=\"cell\" qa-dataid=\"markdown-cell\">\n                                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                                </td>\n                            }\n                        </tr>\n                    }\n                </tbody>\n            </table>\n        </div>\n    </ng-template>\n\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u0443\u0441\u043A\u043E\u0432 \u043F\u0438\u0448\u0443\u0442\u0441\u044F \u0431\u0435\u0437 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u043E\u0432, \u0430 \u0444\u043E\u0440\u043C\u0430\u0442\u0442\u0435\u0440 \u043E\u0442\u043A\u043B\u044E\u0447\u0451\u043D \u0434\u043B\u044F \u043D\u0438\u0445 \u043D\u0430\u0440\u043E\u0447\u043D\u043E: \u043F\u0435\u0440\u0435\u043D\u043E\u0441\n        \u0441\u0442\u0440\u043E\u043A\u0438 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0441\u044F \u043F\u0440\u043E\u0431\u0435\u043B\u043E\u043C, \u0438 \u0440\u0430\u0437\u043C\u0435\u0447\u0435\u043D\u043D\u044B\u0439 \u043A\u0443\u0441\u043E\u043A \u043E\u0442\u044A\u0435\u0437\u0436\u0430\u0435\u0442 \u043E\u0442 \u0441\u043E\u0441\u0435\u0434\u043D\u0435\u0433\u043E \u0437\u043D\u0430\u043A\u0430 \u2014\n        \u00AB\u0436\u0438\u0440\u043D\u043E , \u0430 \u0440\u044F\u0434\u043E\u043C\u00BB.\n    -->\n    <!-- prettier-ignore -->\n    <ng-template #inlineTpl let-nodes>@for (node of nodes; track $index) {@switch (node.kind) {@case (inlineKind.Strong) {<strong rtElem=\"strong\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></strong>}@case (inlineKind.Emphasis) {<em rtElem=\"emphasis\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></em>}@case (inlineKind.Strike) {<s rtElem=\"strike\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></s>}@case (inlineKind.Code) {<code rtElem=\"code-inline\" qa-dataid=\"markdown-code-inline\">{{ node.text }}</code>}@case (inlineKind.Link) {<a rtElem=\"link\" qa-dataid=\"markdown-link\" rel=\"noopener noreferrer\" target=\"_blank\" [href]=\"node.href\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></a>}@case (inlineKind.Break) {<br />}@default {{{ node.text }}}}}</ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-markdown-text{--rt-markdown-text-radius: var(--rt-radius-sm);--rt-markdown-text-border-width: var(--rt-border-width-thin);display:flex;min-width:0;max-width:100%;flex-direction:column;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);gap:var(--rt-space-sm);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-markdown-text__heading{margin:0;color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__heading--level--1{font-size:var(--rt-text-lg)}.rt-markdown-text__heading--level--2{font-size:var(--rt-text-md)}.rt-markdown-text__heading--level--3,.rt-markdown-text__heading--level--4,.rt-markdown-text__heading--level--5,.rt-markdown-text__heading--level--6{font-size:var(--rt-text-sm)}.rt-markdown-text__paragraph{margin:0}.rt-markdown-text__list{padding-left:var(--rt-space-md);margin:0;list-style:disc}.rt-markdown-text__list--ordered{list-style:decimal}.rt-markdown-text__item--level--1{margin-left:var(--rt-space-md)}.rt-markdown-text__item--level--2{margin-left:var(--rt-space-lg)}.rt-markdown-text__quote{padding-left:var(--rt-space-sm);border-left:var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);margin:0;color:var(--rt-color-text-muted)}.rt-markdown-text__code{max-width:100%;padding:var(--rt-space-sm);border-radius:var(--rt-markdown-text-radius);margin:0;background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary);font-family:var(--rt-font-family-mono);font-size:var(--rt-text-2xs);line-height:var(--rt-leading-snug);overflow-x:auto}.rt-markdown-text__code-inline{padding:0 var(--rt-space-2xs);border-radius:var(--rt-markdown-text-radius);background:var(--rt-color-bg-subtle);font-family:var(--rt-font-family-mono);font-size:var(--rt-text-2xs)}.rt-markdown-text__table-scroll{max-width:100%;overflow-x:auto}.rt-markdown-text__table{width:100%;border-collapse:collapse}.rt-markdown-text__head-cell,.rt-markdown-text__cell{padding:var(--rt-space-2xs) var(--rt-space-sm);border:var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);text-align:left}.rt-markdown-text__head-cell{color:var(--rt-color-text-muted);font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__strong{font-weight:var(--rt-font-weight-semibold)}.rt-markdown-text__emphasis{font-style:italic}.rt-markdown-text__strike{text-decoration:line-through}.rt-markdown-text__link{color:var(--rt-color-text-link);text-decoration:underline}.rt-markdown-text[data-rt-radius=none]{--rt-markdown-text-radius: var(--rt-radius-none)}.rt-markdown-text[data-rt-radius=xs]{--rt-markdown-text-radius: var(--rt-radius-xs)}.rt-markdown-text[data-rt-radius=sm]{--rt-markdown-text-radius: var(--rt-radius-sm)}.rt-markdown-text[data-rt-radius=ms]{--rt-markdown-text-radius: var(--rt-radius-ms)}.rt-markdown-text[data-rt-radius=md]{--rt-markdown-text-radius: var(--rt-radius-md)}.rt-markdown-text[data-rt-radius=lg]{--rt-markdown-text-radius: var(--rt-radius-lg)}.rt-markdown-text[data-rt-radius=xl]{--rt-markdown-text-radius: var(--rt-radius-xl)}.rt-markdown-text[data-rt-radius=\"2xl\"]{--rt-markdown-text-radius: var(--rt-radius-2xl)}.rt-markdown-text[data-rt-radius=full]{--rt-markdown-text-radius: var(--rt-radius-full)}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtMarkdownTextComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-markdown-text.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-markdown-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-markdown-text.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/markdown-text/rt-markdown-text.component.ts","../../../projects/ui-kit-v2/src/lib/components/markdown-text/rt-markdown-text.component.html","../../../projects/ui-kit-v2/src/lib/components/markdown-text/rt-tools-ui-kit-v2-markdown-text.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { computed, input, ChangeDetectionStrategy, Component, InputSignal, Signal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { parseMarkdown } from '@rt-tools/ui-kit-v2/core';\nimport { ERtMarkdownBlock, ERtMarkdownInline, IRtMarkdownBlockNode } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-markdown-text';\n\n/**\n * Текст, написанный разметкой, показанный узлами.\n *\n * Перечень разметки зашит в разборщике и входом не задаётся: вход у компонента один — сам\n * текст. Настраивать нечего, значит нечем и ослабить.\n *\n * Присланная строка в страницу не отдаётся ни разу: компонент рисует дерево узлов, которое\n * вернул разбор, и другого пути у текста внутрь страницы нет. Поэтому сырой HTML, картинки и\n * адреса чужих схем показываются видимым текстом — узла для них разборщик не строит.\n *\n * Таблица рисуется своей разметкой, а не таблицей кита: та объявляет колонки заранее\n * директивами, а число столбцов здесь приходит из текста и заранее не известно никому.\n */\n@Component({\n    selector: 'rt-markdown-text',\n    templateUrl: './rt-markdown-text.component.html',\n    styleUrl: './rt-markdown-text.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n        NgTemplateOutlet,\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtMarkdownTextComponent {\n    /** Роды блоков в шаблоне: сравнение идёт со значением перечисления, а не со строкой. */\n    protected readonly blockKind: typeof ERtMarkdownBlock = ERtMarkdownBlock;\n\n    /** Роды кусков строки в шаблоне. */\n    protected readonly inlineKind: typeof ERtMarkdownInline = ERtMarkdownInline;\n\n    protected readonly blocks: Signal<readonly IRtMarkdownBlockNode[]> = computed((): readonly IRtMarkdownBlockNode[] =>\n        parseMarkdown(this.text())\n    );\n\n    public readonly text: InputSignal<string | null> = input.required<string | null>();\n}\n","<ng-container rtBlock=\"rt-markdown-text\">\n    @for (item of blocks(); track $index) {\n        <ng-container *ngTemplateOutlet=\"blockTpl; context: { $implicit: item }\" />\n    }\n\n    <ng-template #blockTpl let-item>\n        @switch (item.kind) {\n            @case (blockKind.Heading) {\n                <div\n                    rtElem=\"heading\"\n                    qa-dataid=\"markdown-heading\"\n                    role=\"heading\"\n                    [attr.aria-level]=\"item.level\"\n                    [rtMod]=\"{ level: item.levelName }\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </div>\n            }\n            @case (blockKind.List) {\n                @if (item.ordered) {\n                    <ol rtElem=\"list\" qa-dataid=\"markdown-list\" [rtMod]=\"{ ordered: true }\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ol>\n                } @else {\n                    <ul rtElem=\"list\" qa-dataid=\"markdown-list\">\n                        <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.items }\" />\n                    </ul>\n                }\n            }\n            @case (blockKind.Quote) {\n                <blockquote rtElem=\"quote\" qa-dataid=\"markdown-quote\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </blockquote>\n            }\n            @case (blockKind.Code) {\n                <pre rtElem=\"code\" qa-dataid=\"markdown-code\"><code>{{ item.code }}</code></pre>\n            }\n            @case (blockKind.Table) {\n                <ng-container *ngTemplateOutlet=\"tableTpl; context: { $implicit: item }\" />\n            }\n            @default {\n                <p rtElem=\"paragraph\" qa-dataid=\"markdown-paragraph\">\n                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: item.content }\" />\n                </p>\n            }\n        }\n    </ng-template>\n\n    <ng-template #itemsTpl let-items>\n        @for (point of items; track $index) {\n            <li rtElem=\"item\" qa-dataid=\"markdown-item\" [rtMod]=\"{ level: point.levelName }\">\n                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: point.content }\" />\n            </li>\n        }\n    </ng-template>\n\n    <ng-template #tableTpl let-item>\n        <div rtElem=\"table-scroll\" qa-dataid=\"markdown-table-scroll\">\n            <table rtElem=\"table\" qa-dataid=\"markdown-table\">\n                <thead>\n                    <tr>\n                        @for (cell of item.head; track $index) {\n                            <th rtElem=\"head-cell\" qa-dataid=\"markdown-head-cell\">\n                                <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                            </th>\n                        }\n                    </tr>\n                </thead>\n                <tbody>\n                    @for (row of item.rows; track $index) {\n                        <tr>\n                            @for (cell of row; track $index) {\n                                <td rtElem=\"cell\" qa-dataid=\"markdown-cell\">\n                                    <ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: cell }\" />\n                                </td>\n                            }\n                        </tr>\n                    }\n                </tbody>\n            </table>\n        </div>\n    </ng-template>\n\n    <!--\n        Ветки шаблона кусков пишутся без переносов, а форматтер отключён для них нарочно: перенос\n        строки в разметке становится пробелом, и размеченный кусок отъезжает от соседнего знака —\n        «жирно , а рядом».\n    -->\n    <!-- prettier-ignore -->\n    <ng-template #inlineTpl let-nodes>@for (node of nodes; track $index) {@switch (node.kind) {@case (inlineKind.Strong) {<strong rtElem=\"strong\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></strong>}@case (inlineKind.Emphasis) {<em rtElem=\"emphasis\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></em>}@case (inlineKind.Strike) {<s rtElem=\"strike\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></s>}@case (inlineKind.Code) {<code rtElem=\"code-inline\" qa-dataid=\"markdown-code-inline\">{{ node.text }}</code>}@case (inlineKind.Link) {<a rtElem=\"link\" qa-dataid=\"markdown-link\" rel=\"noopener noreferrer\" target=\"_blank\" [href]=\"node.href\"><ng-container *ngTemplateOutlet=\"inlineTpl; context: { $implicit: node.children }\" /></a>}@case (inlineKind.Break) {<br />}@default {{{ node.text }}}}}</ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAS,GAAW,kBAAkB;AAE5C;;;;;;;;;;;;AAYG;MAmBU,uBAAuB,CAAA;AAlBpC,IAAA,WAAA,GAAA;;QAoBuB,IAAA,CAAA,SAAS,GAA4B,gBAAgB;;QAGrD,IAAA,CAAA,UAAU,GAA6B,iBAAiB;AAExD,QAAA,IAAA,CAAA,MAAM,GAA4C,QAAQ,CAAC,MAC1E,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;mFAC7B;QAEe,IAAA,CAAA,IAAI,GAA+B,KAAK,CAAC,QAAQ;iFAAiB;AACrF,IAAA;8GAZY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,+UC1CpC,knLA0FA,EAAA,MAAA,EAAA,CAAA,gyGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;AD1DQ,gBAAA,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,oDACZ,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOX,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAlBnC,SAAS;+BACI,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,cAAc;wBACd,aAAa;wBACb,YAAY;wBACZ,gBAAgB;AACnB,qBAAA,EAAA,cAAA,EACe,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,knLAAA,EAAA,MAAA,EAAA,CAAA,gyGAAA,CAAA,EAAA;;;AExCL;;AAEG;;;;"}