@rt-tools/ui-kit-v2 0.26.0 → 0.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rt-tools-ui-kit-v2-card.mjs +4 -4
- package/fesm2022/rt-tools-ui-kit-v2-card.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +6 -0
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-service-logo.mjs +154 -0
- package/fesm2022/rt-tools-ui-kit-v2-service-logo.mjs.map +1 -0
- package/fesm2022/rt-tools-ui-kit-v2.mjs +1 -0
- package/package.json +5 -1
- package/src/lib/components/card/rt-card.component.scss +10 -0
- package/src/lib/components/service-logo/CONTEXT.md +40 -0
- package/src/lib/components/service-logo/rt-service-logo.component.scss +68 -0
- package/src/styles/_primitives.scss +11 -0
- package/src/styles/_semantic.scss +4 -0
- package/styles/tokens.css +33 -0
- package/types/rt-tools-ui-kit-v2-card.d.ts +1 -1
- package/types/rt-tools-ui-kit-v2-core.d.ts +1 -1
- package/types/rt-tools-ui-kit-v2-service-logo.d.ts +57 -0
- package/types/rt-tools-ui-kit-v2.d.ts +1 -0
|
@@ -69,8 +69,8 @@ var RtCardComponent = class RtCardComponent {
|
|
|
69
69
|
inputs: ["radius", "radius"]
|
|
70
70
|
}],
|
|
71
71
|
ngImport: i0,
|
|
72
|
-
template: "<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n",
|
|
73
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-card{display:block}rt-card .rt-card{--rt-card-radius: var(--rt-radius-xl);--rt-card-shadow: var(--rt-shadow-card);--rt-card-shadow-hover: var(--rt-shadow-lg);--rt-card-focus-shadow: var(--rt-shadow-focus-ring);--rt-card-transition-duration: var(--rt-duration-fast);display:block;padding:var(--rt-space-lg);border-radius:var(--rt-card-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-card-shadow);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-card-transition-duration) ease,transform var(--rt-card-transition-duration) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-card-shadow-hover)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-card-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}rt-card[data-rt-radius=none]>.rt-card{--rt-card-radius: var(--rt-radius-none)}rt-card[data-rt-radius=xs]>.rt-card{--rt-card-radius: var(--rt-radius-xs)}rt-card[data-rt-radius=sm]>.rt-card{--rt-card-radius: var(--rt-radius-sm)}rt-card[data-rt-radius=ms]>.rt-card{--rt-card-radius: var(--rt-radius-ms)}rt-card[data-rt-radius=md]>.rt-card{--rt-card-radius: var(--rt-radius-md)}rt-card[data-rt-radius=lg]>.rt-card{--rt-card-radius: var(--rt-radius-lg)}rt-card[data-rt-radius=xl]>.rt-card{--rt-card-radius: var(--rt-radius-xl)}rt-card[data-rt-radius=\"2xl\"]>.rt-card{--rt-card-radius: var(--rt-radius-2xl)}rt-card[data-rt-radius=full]>.rt-card{--rt-card-radius: var(--rt-radius-full)}}\n"],
|
|
72
|
+
template: "<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <div rtElem=\"media\" qa-dataid=\"card-media\"><ng-content select=\"[rtCardMedia]\" /></div>\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n",
|
|
73
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-card{display:block}rt-card .rt-card{--rt-card-radius: var(--rt-radius-xl);--rt-card-shadow: var(--rt-shadow-card);--rt-card-shadow-hover: var(--rt-shadow-lg);--rt-card-focus-shadow: var(--rt-shadow-focus-ring);--rt-card-transition-duration: var(--rt-duration-fast);display:block;padding:var(--rt-space-lg);border-radius:var(--rt-card-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-card-shadow);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-card-transition-duration) ease,transform var(--rt-card-transition-duration) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-card-shadow-hover)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-card-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__media{display:flex;margin-block-end:var(--rt-space-md)}rt-card .rt-card__media:empty{display:none}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}rt-card[data-rt-radius=none]>.rt-card{--rt-card-radius: var(--rt-radius-none)}rt-card[data-rt-radius=xs]>.rt-card{--rt-card-radius: var(--rt-radius-xs)}rt-card[data-rt-radius=sm]>.rt-card{--rt-card-radius: var(--rt-radius-sm)}rt-card[data-rt-radius=ms]>.rt-card{--rt-card-radius: var(--rt-radius-ms)}rt-card[data-rt-radius=md]>.rt-card{--rt-card-radius: var(--rt-radius-md)}rt-card[data-rt-radius=lg]>.rt-card{--rt-card-radius: var(--rt-radius-lg)}rt-card[data-rt-radius=xl]>.rt-card{--rt-card-radius: var(--rt-radius-xl)}rt-card[data-rt-radius=\"2xl\"]>.rt-card{--rt-card-radius: var(--rt-radius-2xl)}rt-card[data-rt-radius=full]>.rt-card{--rt-card-radius: var(--rt-radius-full)}}\n"],
|
|
74
74
|
dependencies: [
|
|
75
75
|
{
|
|
76
76
|
kind: "directive",
|
|
@@ -116,8 +116,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
116
116
|
inputs: ["radius"]
|
|
117
117
|
}],
|
|
118
118
|
host: { class: BEM_BLOCK },
|
|
119
|
-
template: "<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n",
|
|
120
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-card{display:block}rt-card .rt-card{--rt-card-radius: var(--rt-radius-xl);--rt-card-shadow: var(--rt-shadow-card);--rt-card-shadow-hover: var(--rt-shadow-lg);--rt-card-focus-shadow: var(--rt-shadow-focus-ring);--rt-card-transition-duration: var(--rt-duration-fast);display:block;padding:var(--rt-space-lg);border-radius:var(--rt-card-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-card-shadow);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-card-transition-duration) ease,transform var(--rt-card-transition-duration) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-card-shadow-hover)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-card-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}rt-card[data-rt-radius=none]>.rt-card{--rt-card-radius: var(--rt-radius-none)}rt-card[data-rt-radius=xs]>.rt-card{--rt-card-radius: var(--rt-radius-xs)}rt-card[data-rt-radius=sm]>.rt-card{--rt-card-radius: var(--rt-radius-sm)}rt-card[data-rt-radius=ms]>.rt-card{--rt-card-radius: var(--rt-radius-ms)}rt-card[data-rt-radius=md]>.rt-card{--rt-card-radius: var(--rt-radius-md)}rt-card[data-rt-radius=lg]>.rt-card{--rt-card-radius: var(--rt-radius-lg)}rt-card[data-rt-radius=xl]>.rt-card{--rt-card-radius: var(--rt-radius-xl)}rt-card[data-rt-radius=\"2xl\"]>.rt-card{--rt-card-radius: var(--rt-radius-2xl)}rt-card[data-rt-radius=full]>.rt-card{--rt-card-radius: var(--rt-radius-full)}}\n"]
|
|
119
|
+
template: "<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <div rtElem=\"media\" qa-dataid=\"card-media\"><ng-content select=\"[rtCardMedia]\" /></div>\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n",
|
|
120
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-card{display:block}rt-card .rt-card{--rt-card-radius: var(--rt-radius-xl);--rt-card-shadow: var(--rt-shadow-card);--rt-card-shadow-hover: var(--rt-shadow-lg);--rt-card-focus-shadow: var(--rt-shadow-focus-ring);--rt-card-transition-duration: var(--rt-duration-fast);display:block;padding:var(--rt-space-lg);border-radius:var(--rt-card-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-card-shadow);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-card-transition-duration) ease,transform var(--rt-card-transition-duration) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-card-shadow-hover)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-card-focus-shadow);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__media{display:flex;margin-block-end:var(--rt-space-md)}rt-card .rt-card__media:empty{display:none}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}rt-card[data-rt-radius=none]>.rt-card{--rt-card-radius: var(--rt-radius-none)}rt-card[data-rt-radius=xs]>.rt-card{--rt-card-radius: var(--rt-radius-xs)}rt-card[data-rt-radius=sm]>.rt-card{--rt-card-radius: var(--rt-radius-sm)}rt-card[data-rt-radius=ms]>.rt-card{--rt-card-radius: var(--rt-radius-ms)}rt-card[data-rt-radius=md]>.rt-card{--rt-card-radius: var(--rt-radius-md)}rt-card[data-rt-radius=lg]>.rt-card{--rt-card-radius: var(--rt-radius-lg)}rt-card[data-rt-radius=xl]>.rt-card{--rt-card-radius: var(--rt-radius-xl)}rt-card[data-rt-radius=\"2xl\"]>.rt-card{--rt-card-radius: var(--rt-radius-2xl)}rt-card[data-rt-radius=full]>.rt-card{--rt-card-radius: var(--rt-radius-full)}}\n"]
|
|
121
121
|
}]
|
|
122
122
|
}],
|
|
123
123
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rt-tools-ui-kit-v2-card.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/card/rt-card.component.ts","../../../projects/ui-kit-v2/src/lib/components/card/rt-card.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-card';\n\n/**\n * Контейнер-карточка с опциональным header (текст ИЛИ projected slot) и footer\n * (projected slot). Default content проецируется в основную область. Поддерживает\n * clickable mode для card-as-button сценариев: при `clickable=true` корневой\n * `<article>` получает `role=\"button\"`, `tabindex=\"0\"` и эмиттит `cardClick`\n * MouseEvent на клик и Enter/Space с клавиатуры.\n *\n * Две стратегии header:\n * 1. Текстом через `header=\"...\"` input — рендерит `<h3 class=\"rt-card__title\">`.\n * 2. Произвольный контент через attribute-selector slot `[rtCardHeader]`.\n *\n * Footer — только через slot `[rtCardFooter]`. Пустые header/footer слоты\n * визуально скрываются через `:empty` CSS-селектор.\n *\n * Все цвета и размеры — через семантические `--rt-*` токены; BEM-разметка через\n * директивы `rtBlock` / `rtElem` / `rtMod` из `@rt-tools/core`.\n */\n@Component({\n selector: 'rt-card',\n templateUrl: './rt-card.component.html',\n styleUrl: './rt-card.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n },\n})\nexport class RtCardComponent {\n /** Заголовок-текст; если задан — рендерится `<h3 class=\"rt-card__title\">`. */\n public readonly header: InputSignal<string | null> = input<string | null>(null);\n\n /** ARIA-label на корневом `<article>`. */\n public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n /** Делает карточку интерактивной: `role=\"button\"`, `tabindex=\"0\"`, клавиатура. */\n public readonly clickable: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /** Эмиттит MouseEvent при клике (или Enter/Space) — только если `clickable=true`. */\n public readonly cardClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n protected onClick(event: MouseEvent): void {\n if (this.clickable()) {\n this.cardClick.emit(event);\n }\n }\n\n protected onKeyActivate(event: Event): void {\n if (!this.clickable()) {\n return;\n }\n event.preventDefault();\n this.cardClick.emit(event as unknown as MouseEvent);\n }\n}\n","<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n"],"mappings":";;;;;AAiBA,MAAM,YAAoB;AAoC1B,IAAa,kBAAb,MAAa,gBAAe;CAjB5B,cAAA;EAmBoB,KAAA,SAAqC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;EAG/D,KAAA,YAAwC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGlE,KAAA,YAA6D,MAA6B,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;GAC3G,WAAW;EAAgB,CAAA;EAIf,KAAA,YAA0C,OAAM;CAenE;CAba,QAAQ,OAAiB;EAC/B,IAAI,KAAK,UAAS,GACd,KAAK,UAAU,KAAK,KAAK;CAEjC;CAEU,cAAc,OAAY;EAChC,IAAI,CAAC,KAAK,UAAS,GACf;EAEJ,MAAM,eAAc;EACpB,KAAK,UAAU,KAAK,KAA8B;CACtD;CA3BS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAf;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAe,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,QAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,SAAA,EAAA,WAAA,YAAA;GAAA,MAAA,EAAA,gBAAA,UAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCrD5B;
|
|
1
|
+
{"version":3,"file":"rt-tools-ui-kit-v2-card.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/card/rt-card.component.ts","../../../projects/ui-kit-v2/src/lib/components/card/rt-card.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\n\nconst BEM_BLOCK: string = 'rt-card';\n\n/**\n * Контейнер-карточка с опциональным header (текст ИЛИ projected slot) и footer\n * (projected slot). Default content проецируется в основную область. Поддерживает\n * clickable mode для card-as-button сценариев: при `clickable=true` корневой\n * `<article>` получает `role=\"button\"`, `tabindex=\"0\"` и эмиттит `cardClick`\n * MouseEvent на клик и Enter/Space с клавиатуры.\n *\n * Две стратегии header:\n * 1. Текстом через `header=\"...\"` input — рендерит `<h3 class=\"rt-card__title\">`.\n * 2. Произвольный контент через attribute-selector slot `[rtCardHeader]`.\n *\n * Footer — только через slot `[rtCardFooter]`. Пустые header/footer слоты\n * визуально скрываются через `:empty` CSS-селектор.\n *\n * Все цвета и размеры — через семантические `--rt-*` токены; BEM-разметка через\n * директивы `rtBlock` / `rtElem` / `rtMod` из `@rt-tools/core`.\n */\n@Component({\n selector: 'rt-card',\n templateUrl: './rt-card.component.html',\n styleUrl: './rt-card.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n },\n})\nexport class RtCardComponent {\n /** Заголовок-текст; если задан — рендерится `<h3 class=\"rt-card__title\">`. */\n public readonly header: InputSignal<string | null> = input<string | null>(null);\n\n /** ARIA-label на корневом `<article>`. */\n public readonly ariaLabel: InputSignal<string | null> = input<string | null>(null);\n\n /** Делает карточку интерактивной: `role=\"button\"`, `tabindex=\"0\"`, клавиатура. */\n public readonly clickable: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /** Эмиттит MouseEvent при клике (или Enter/Space) — только если `clickable=true`. */\n public readonly cardClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n\n protected onClick(event: MouseEvent): void {\n if (this.clickable()) {\n this.cardClick.emit(event);\n }\n }\n\n protected onKeyActivate(event: Event): void {\n if (!this.clickable()) {\n return;\n }\n event.preventDefault();\n this.cardClick.emit(event as unknown as MouseEvent);\n }\n}\n","<article\n rtBlock=\"rt-card\"\n qa-dataid=\"card\"\n [rtMod]=\"{ clickable: clickable() }\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() ? 0 : null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (keydown.enter)=\"onKeyActivate($event)\"\n (keydown.space)=\"onKeyActivate($event)\">\n <div rtElem=\"media\" qa-dataid=\"card-media\"><ng-content select=\"[rtCardMedia]\" /></div>\n <header rtElem=\"header\">\n @if (header(); as h) {\n <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n }\n <ng-content select=\"[rtCardHeader]\" />\n </header>\n <div rtElem=\"content\">\n <ng-content />\n </div>\n <footer rtElem=\"footer\">\n <ng-content select=\"[rtCardFooter]\" />\n </footer>\n</article>\n"],"mappings":";;;;;AAiBA,MAAM,YAAoB;AAoC1B,IAAa,kBAAb,MAAa,gBAAe;CAjB5B,cAAA;EAmBoB,KAAA,SAAqC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;EAG/D,KAAA,YAAwC,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAGlE,KAAA,YAA6D,MAA6B,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;GAC3G,WAAW;EAAgB,CAAA;EAIf,KAAA,YAA0C,OAAM;CAenE;CAba,QAAQ,OAAiB;EAC/B,IAAI,KAAK,UAAS,GACd,KAAK,UAAU,KAAK,KAAK;CAEjC;CAEU,cAAc,OAAY;EAChC,IAAI,CAAC,KAAK,UAAS,GACf;EAEJ,MAAM,eAAc;EACpB,KAAK,UAAU,KAAK,KAA8B;CACtD;CA3BS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAf;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAe,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,QAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,WAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,SAAA,EAAA,WAAA,YAAA;GAAA,MAAA,EAAA,gBAAA,UAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCrD5B;GAwBA,QAAA,CAAA,k9DAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDoBQ;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAY,UAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAOP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAjB3B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAS,iBAGF,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;GACH;GAAA,gBACe,CAAC;IAAE,WAAW;IAAmB,QAAQ,CAAC,QAAQ;GAAC,CAAE;GAAC,MAChE,EACF,OAAO,UACV;GAAA,UAAA;GAAA,QAAA,CAAA,k9DAAA;EAAA,CAAA"}
|
|
@@ -939,6 +939,8 @@ const RT_DESIGN_TOKEN_NAMES = [
|
|
|
939
939
|
"--rt-color-border-strong",
|
|
940
940
|
"--rt-color-border-subtle",
|
|
941
941
|
"--rt-color-field-fill-underline",
|
|
942
|
+
"--rt-color-service-logo-bg",
|
|
943
|
+
"--rt-color-service-logo-mark",
|
|
942
944
|
"--rt-color-skeleton-base",
|
|
943
945
|
"--rt-color-skeleton-wave",
|
|
944
946
|
"--rt-color-state-danger",
|
|
@@ -1170,6 +1172,7 @@ const RT_DESIGN_TOKEN_NAMES = [
|
|
|
1170
1172
|
"--rt-mat-shadow-fab-hover",
|
|
1171
1173
|
"--rt-mat-shadow-level-2",
|
|
1172
1174
|
"--rt-mat-yellow-100",
|
|
1175
|
+
"--rt-mist-50",
|
|
1173
1176
|
"--rt-nav-caret-size",
|
|
1174
1177
|
"--rt-nav-color-disabled",
|
|
1175
1178
|
"--rt-nav-color-focus",
|
|
@@ -1330,6 +1333,9 @@ const RT_DESIGN_TOKEN_NAMES = [
|
|
|
1330
1333
|
"--rt-shadow-nav-panel",
|
|
1331
1334
|
"--rt-shadow-none",
|
|
1332
1335
|
"--rt-shadow-profile-menu",
|
|
1336
|
+
"--rt-shadow-service-logo-lg",
|
|
1337
|
+
"--rt-shadow-service-logo-md",
|
|
1338
|
+
"--rt-shadow-service-logo-sm",
|
|
1333
1339
|
"--rt-shadow-sm",
|
|
1334
1340
|
"--rt-shadow-status-dot",
|
|
1335
1341
|
"--rt-shadow-step-indicator",
|