@rt-tools/ui-kit-v2 0.30.0 → 0.31.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-service-block.mjs +131 -0
- package/fesm2022/rt-tools-ui-kit-v2-service-block.mjs.map +1 -0
- package/fesm2022/rt-tools-ui-kit-v2.mjs +1 -0
- package/package.json +5 -1
- package/src/lib/components/service-block/CONTEXT.md +37 -0
- package/src/lib/components/service-block/rt-service-block.component.scss +61 -0
- package/types/rt-tools-ui-kit-v2-service-block.d.ts +34 -0
- package/types/rt-tools-ui-kit-v2.d.ts +1 -0
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from "@angular/core";
|
|
3
|
+
import { BlockDirective, ElemDirective } from "@rt-tools/core";
|
|
4
|
+
import { RtServiceLogoComponent } from "@rt-tools/ui-kit-v2/service-logo";
|
|
5
|
+
const BEM_BLOCK = "rt-service-block";
|
|
6
|
+
var RtServiceBlockComponent = class RtServiceBlockComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.logos = input.required(...ngDevMode ? [{ debugName: "logos" }] : /* istanbul ignore next */ []);
|
|
9
|
+
this.name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|
|
10
|
+
this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
14
|
+
minVersion: "12.0.0",
|
|
15
|
+
version: "22.2.2",
|
|
16
|
+
ngImport: i0,
|
|
17
|
+
type: RtServiceBlockComponent,
|
|
18
|
+
deps: [],
|
|
19
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
static {
|
|
23
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
24
|
+
minVersion: "17.0.0",
|
|
25
|
+
version: "22.2.2",
|
|
26
|
+
type: RtServiceBlockComponent,
|
|
27
|
+
isStandalone: true,
|
|
28
|
+
selector: "rt-service-block",
|
|
29
|
+
inputs: {
|
|
30
|
+
logos: {
|
|
31
|
+
classPropertyName: "logos",
|
|
32
|
+
publicName: "logos",
|
|
33
|
+
isSignal: true,
|
|
34
|
+
isRequired: true,
|
|
35
|
+
transformFunction: null
|
|
36
|
+
},
|
|
37
|
+
name: {
|
|
38
|
+
classPropertyName: "name",
|
|
39
|
+
publicName: "name",
|
|
40
|
+
isSignal: true,
|
|
41
|
+
isRequired: true,
|
|
42
|
+
transformFunction: null
|
|
43
|
+
},
|
|
44
|
+
description: {
|
|
45
|
+
classPropertyName: "description",
|
|
46
|
+
publicName: "description",
|
|
47
|
+
isSignal: true,
|
|
48
|
+
isRequired: false,
|
|
49
|
+
transformFunction: null
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
host: { classAttribute: "rt-service-block" },
|
|
53
|
+
ngImport: i0,
|
|
54
|
+
template: "<ng-container rtBlock=\"rt-service-block\">\n <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n <div rtElem=\"text\">\n <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n @if (description(); as text) {\n <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n }\n </div>\n</ng-container>\n",
|
|
55
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-block{--rt-service-block-gap: var(--rt-space-4);--rt-service-block-text-gap: var(--rt-space-0-5);--rt-service-block-padding-bottom: var(--rt-space-5);--rt-service-block-divider: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);--rt-service-block-name-size: var(--rt-text-xl);--rt-service-block-name-weight: var(--rt-font-weight-semibold);--rt-service-block-name-line-height: var(--rt-leading-snug);--rt-service-block-name-color: var(--rt-color-text-primary);--rt-service-block-description-size: var(--rt-text-sm);--rt-service-block-description-weight: var(--rt-font-weight-regular);--rt-service-block-description-line-height: var(--rt-leading-normal);--rt-service-block-description-color: var(--rt-color-text-muted);display:flex;width:100%;align-items:center;padding-bottom:var(--rt-service-block-padding-bottom);border-bottom:var(--rt-service-block-divider);gap:var(--rt-service-block-gap)}.rt-service-block__logo{flex:none}.rt-service-block__text{display:flex;min-width:0;flex:1 1 0;flex-direction:column;gap:var(--rt-service-block-text-gap);overflow-wrap:anywhere}.rt-service-block__name{margin:0;color:var(--rt-service-block-name-color);font-size:var(--rt-service-block-name-size);font-weight:var(--rt-service-block-name-weight);line-height:var(--rt-service-block-name-line-height)}.rt-service-block__description{margin:0;color:var(--rt-service-block-description-color);font-size:var(--rt-service-block-description-size);font-weight:var(--rt-service-block-description-weight);line-height:var(--rt-service-block-description-line-height)}}\n"],
|
|
56
|
+
dependencies: [
|
|
57
|
+
{
|
|
58
|
+
kind: "directive",
|
|
59
|
+
type: BlockDirective,
|
|
60
|
+
selector: "[rtBlock]",
|
|
61
|
+
inputs: ["rtMod"]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
kind: "directive",
|
|
65
|
+
type: ElemDirective,
|
|
66
|
+
selector: "[rtElem]",
|
|
67
|
+
inputs: ["rtMod"]
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
kind: "component",
|
|
71
|
+
type: RtServiceLogoComponent,
|
|
72
|
+
selector: "rt-service-logo",
|
|
73
|
+
inputs: ["logos", "size"]
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
77
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
82
|
+
minVersion: "12.0.0",
|
|
83
|
+
version: "22.2.2",
|
|
84
|
+
ngImport: i0,
|
|
85
|
+
type: RtServiceBlockComponent,
|
|
86
|
+
decorators: [{
|
|
87
|
+
type: Component,
|
|
88
|
+
args: [{
|
|
89
|
+
selector: "rt-service-block",
|
|
90
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
91
|
+
encapsulation: ViewEncapsulation.None,
|
|
92
|
+
imports: [
|
|
93
|
+
BlockDirective,
|
|
94
|
+
ElemDirective,
|
|
95
|
+
RtServiceLogoComponent
|
|
96
|
+
],
|
|
97
|
+
host: { class: BEM_BLOCK },
|
|
98
|
+
template: "<ng-container rtBlock=\"rt-service-block\">\n <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n <div rtElem=\"text\">\n <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n @if (description(); as text) {\n <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n }\n </div>\n</ng-container>\n",
|
|
99
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-block{--rt-service-block-gap: var(--rt-space-4);--rt-service-block-text-gap: var(--rt-space-0-5);--rt-service-block-padding-bottom: var(--rt-space-5);--rt-service-block-divider: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);--rt-service-block-name-size: var(--rt-text-xl);--rt-service-block-name-weight: var(--rt-font-weight-semibold);--rt-service-block-name-line-height: var(--rt-leading-snug);--rt-service-block-name-color: var(--rt-color-text-primary);--rt-service-block-description-size: var(--rt-text-sm);--rt-service-block-description-weight: var(--rt-font-weight-regular);--rt-service-block-description-line-height: var(--rt-leading-normal);--rt-service-block-description-color: var(--rt-color-text-muted);display:flex;width:100%;align-items:center;padding-bottom:var(--rt-service-block-padding-bottom);border-bottom:var(--rt-service-block-divider);gap:var(--rt-service-block-gap)}.rt-service-block__logo{flex:none}.rt-service-block__text{display:flex;min-width:0;flex:1 1 0;flex-direction:column;gap:var(--rt-service-block-text-gap);overflow-wrap:anywhere}.rt-service-block__name{margin:0;color:var(--rt-service-block-name-color);font-size:var(--rt-service-block-name-size);font-weight:var(--rt-service-block-name-weight);line-height:var(--rt-service-block-name-line-height)}.rt-service-block__description{margin:0;color:var(--rt-service-block-description-color);font-size:var(--rt-service-block-description-size);font-weight:var(--rt-service-block-description-weight);line-height:var(--rt-service-block-description-line-height)}}\n"]
|
|
100
|
+
}]
|
|
101
|
+
}],
|
|
102
|
+
propDecorators: {
|
|
103
|
+
logos: [{
|
|
104
|
+
type: i0.Input,
|
|
105
|
+
args: [{
|
|
106
|
+
isSignal: true,
|
|
107
|
+
alias: "logos",
|
|
108
|
+
required: true
|
|
109
|
+
}]
|
|
110
|
+
}],
|
|
111
|
+
name: [{
|
|
112
|
+
type: i0.Input,
|
|
113
|
+
args: [{
|
|
114
|
+
isSignal: true,
|
|
115
|
+
alias: "name",
|
|
116
|
+
required: true
|
|
117
|
+
}]
|
|
118
|
+
}],
|
|
119
|
+
description: [{
|
|
120
|
+
type: i0.Input,
|
|
121
|
+
args: [{
|
|
122
|
+
isSignal: true,
|
|
123
|
+
alias: "description",
|
|
124
|
+
required: false
|
|
125
|
+
}]
|
|
126
|
+
}]
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
export { RtServiceBlockComponent };
|
|
130
|
+
|
|
131
|
+
//# sourceMappingURL=rt-tools-ui-kit-v2-service-block.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rt-tools-ui-kit-v2-service-block.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/service-block/rt-service-block.component.ts","../../../projects/ui-kit-v2/src/lib/components/service-block/rt-service-block.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtServiceLogo, RtServiceLogoComponent } from '@rt-tools/ui-kit-v2/service-logo';\n\nconst BEM_BLOCK: string = 'rt-service-block';\n\n/**\n * Блок службы — первый блок тела панели настройки подключения: знак службы размера `md`, справа\n * имя службы и строка-описание, под блоком черта. Одна разметка на интеграции, способы оплаты и\n * мессенджеры. Своих текстов блок не несёт: имя, описание и подписи знаков даёт приложение.\n */\n@Component({\n selector: 'rt-service-block',\n templateUrl: './rt-service-block.component.html',\n styleUrl: './rt-service-block.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // standalone components / directives\n BlockDirective,\n ElemDirective,\n RtServiceLogoComponent,\n ],\n host: {\n class: BEM_BLOCK,\n },\n})\nexport class RtServiceBlockComponent {\n /** Знаки службы — те же, что принимает `rt-service-logo`; несколько ложатся внахлёст. */\n public readonly logos: InputSignal<readonly IRtServiceLogo.Item[]> = input.required<readonly IRtServiceLogo.Item[]>();\n\n /** Имя службы — жирная строка справа от знака. */\n public readonly name: InputSignal<string> = input.required<string>();\n\n /** Строка-описание под именем. Пустая строка не рисуется. */\n public readonly description: InputSignal<string> = input<string>('');\n}\n","<ng-container rtBlock=\"rt-service-block\">\n <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n <div rtElem=\"text\">\n <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n @if (description(); as text) {\n <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n }\n </div>\n</ng-container>\n"],"mappings":";;;;AAMA,MAAM,YAAoB;AAuB1B,IAAa,0BAAb,MAAa,wBAAuB;CAhBpC,cAAA;EAkBoB,KAAA,QAAqD,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAGrG,KAAA,OAA4B,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;EAGpD,KAAA,cAAmC,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACvE;CATY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAuB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAvB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAuB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,aAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,MAAA,EAAA,gBAAA,mBAAA;GAAA,UAAA;GAAA,UC7BpC;GAWA,QAAA,CAAA,glDAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDUQ;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAsB,UAAA;KAAA,QAAA,CAAA,SAAA,MAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAMjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAhBnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,iBAGX,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;GACH;GAAA,MACK,EACF,OAAO,UACV;GAAA,UAAA;GAAA,QAAA,CAAA,glDAAA;EAAA,CAAA"}
|
|
@@ -72,6 +72,7 @@ export * from "@rt-tools/ui-kit-v2/radius";
|
|
|
72
72
|
export * from "@rt-tools/ui-kit-v2/ripple";
|
|
73
73
|
export * from "@rt-tools/ui-kit-v2/scroll-area";
|
|
74
74
|
export * from "@rt-tools/ui-kit-v2/section-nav";
|
|
75
|
+
export * from "@rt-tools/ui-kit-v2/service-block";
|
|
75
76
|
export * from "@rt-tools/ui-kit-v2/service-logo";
|
|
76
77
|
export * from "@rt-tools/ui-kit-v2/select";
|
|
77
78
|
export * from "@rt-tools/ui-kit-v2/side-menu";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rt-tools/ui-kit-v2",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"author": "Yauheni Krumin",
|
|
6
6
|
"type": "module",
|
|
@@ -365,6 +365,10 @@
|
|
|
365
365
|
"types": "./types/rt-tools-ui-kit-v2-select.d.ts",
|
|
366
366
|
"default": "./fesm2022/rt-tools-ui-kit-v2-select.mjs"
|
|
367
367
|
},
|
|
368
|
+
"./service-block": {
|
|
369
|
+
"types": "./types/rt-tools-ui-kit-v2-service-block.d.ts",
|
|
370
|
+
"default": "./fesm2022/rt-tools-ui-kit-v2-service-block.mjs"
|
|
371
|
+
},
|
|
368
372
|
"./service-logo": {
|
|
369
373
|
"types": "./types/rt-tools-ui-kit-v2-service-logo.d.ts",
|
|
370
374
|
"default": "./fesm2022/rt-tools-ui-kit-v2-service-logo.mjs"
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# `rt-service-block`
|
|
2
|
+
|
|
3
|
+
```html
|
|
4
|
+
<rt-service-block [logos]="[{ src: service.logoUrl, label: service.name }]" [name]="service.name" [description]="service.purpose" />
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
| вход | тип | умолчание |
|
|
8
|
+
| ------------- | -------------------------------- | ---------- |
|
|
9
|
+
| `logos` | `readonly IRtServiceLogo.Item[]` | обязателен |
|
|
10
|
+
| `name` | `string` | обязателен |
|
|
11
|
+
| `description` | `string` | `''` |
|
|
12
|
+
|
|
13
|
+
Выходов нет.
|
|
14
|
+
|
|
15
|
+
Спек — `docs/specs/ui-kit-v2/service-block/`; здесь только устройство папки.
|
|
16
|
+
|
|
17
|
+
## Главное, что нужно знать
|
|
18
|
+
|
|
19
|
+
**Знак — готовый `rt-service-logo` без входа размера, то есть `md`.** Знаки передаются тем же
|
|
20
|
+
типом `IRtServiceLogo.Item`, своей модели у блока нет: второе имя одного типа разошлось бы с
|
|
21
|
+
первым.
|
|
22
|
+
|
|
23
|
+
**Числа — компонента «Service Block», и все они в свойствах блока.** Промежутки, ступени шрифта,
|
|
24
|
+
цвета и черта объявлены на корне блока ступенями шкалы.
|
|
25
|
+
|
|
26
|
+
**Текст переносится, знак — нет.** Знак стоит `flex: none`, место текста ужимается до нуля и
|
|
27
|
+
переносит слова по любому знаку (`overflow-wrap: anywhere`).
|
|
28
|
+
|
|
29
|
+
## Края
|
|
30
|
+
|
|
31
|
+
- Пустое описание не рисуется: имя остаётся одно, по центру знака.
|
|
32
|
+
- Корень шаблона — `ng-container`: класс блока висит только на хосте.
|
|
33
|
+
- Своих текстов нет: имя, описание и подписи знаков даёт приложение.
|
|
34
|
+
|
|
35
|
+
## Рядом
|
|
36
|
+
|
|
37
|
+
- [`rt-service-logo`](../service-logo/rt-service-logo.component.ts) — знак службы в круге.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
@layer rt-kit.components {
|
|
2
|
+
/* rt-service-block — блок службы в теле панели подключения. ViewEncapsulation.None.
|
|
3
|
+
Корень шаблона — ng-container, поэтому класс блока висит только на хосте.
|
|
4
|
+
Числа — компонента «Service Block»: промежутки, ступени шрифта, цвета и черта снизу. */
|
|
5
|
+
|
|
6
|
+
.rt-service-block {
|
|
7
|
+
--rt-service-block-gap: var(--rt-space-4);
|
|
8
|
+
--rt-service-block-text-gap: var(--rt-space-0-5);
|
|
9
|
+
--rt-service-block-padding-bottom: var(--rt-space-5);
|
|
10
|
+
--rt-service-block-divider: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
|
|
11
|
+
--rt-service-block-name-size: var(--rt-text-xl);
|
|
12
|
+
--rt-service-block-name-weight: var(--rt-font-weight-semibold);
|
|
13
|
+
--rt-service-block-name-line-height: var(--rt-leading-snug);
|
|
14
|
+
--rt-service-block-name-color: var(--rt-color-text-primary);
|
|
15
|
+
--rt-service-block-description-size: var(--rt-text-sm);
|
|
16
|
+
--rt-service-block-description-weight: var(--rt-font-weight-regular);
|
|
17
|
+
--rt-service-block-description-line-height: var(--rt-leading-normal);
|
|
18
|
+
--rt-service-block-description-color: var(--rt-color-text-muted);
|
|
19
|
+
|
|
20
|
+
/* Блок занимает всё место по ширине и в потоке, и во флекс-ряду: иначе он ужимается до
|
|
21
|
+
своего текста, и черта под ним кончается вместе с описанием. */
|
|
22
|
+
display: flex;
|
|
23
|
+
width: 100%;
|
|
24
|
+
align-items: center;
|
|
25
|
+
padding-bottom: var(--rt-service-block-padding-bottom);
|
|
26
|
+
border-bottom: var(--rt-service-block-divider);
|
|
27
|
+
gap: var(--rt-service-block-gap);
|
|
28
|
+
|
|
29
|
+
/* Знак держит свой размер: текст ужимается и переносится, круг — нет. */
|
|
30
|
+
&__logo {
|
|
31
|
+
flex: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Место текста — всё, что осталось от знака. Длинное слово переносится по любому
|
|
35
|
+
знаку, чтобы не вылезти за черту на узком экране. */
|
|
36
|
+
&__text {
|
|
37
|
+
display: flex;
|
|
38
|
+
min-width: 0;
|
|
39
|
+
flex: 1 1 0;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
gap: var(--rt-service-block-text-gap);
|
|
42
|
+
overflow-wrap: anywhere;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&__name {
|
|
46
|
+
margin: 0;
|
|
47
|
+
color: var(--rt-service-block-name-color);
|
|
48
|
+
font-size: var(--rt-service-block-name-size);
|
|
49
|
+
font-weight: var(--rt-service-block-name-weight);
|
|
50
|
+
line-height: var(--rt-service-block-name-line-height);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&__description {
|
|
54
|
+
margin: 0;
|
|
55
|
+
color: var(--rt-service-block-description-color);
|
|
56
|
+
font-size: var(--rt-service-block-description-size);
|
|
57
|
+
font-weight: var(--rt-service-block-description-weight);
|
|
58
|
+
line-height: var(--rt-service-block-description-line-height);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { InputSignal } from "@angular/core";
|
|
3
|
+
import { IRtServiceLogo } from "@rt-tools/ui-kit-v2/service-logo";
|
|
4
|
+
/**
|
|
5
|
+
* Блок службы — первый блок тела панели настройки подключения: знак службы размера `md`, справа
|
|
6
|
+
* имя службы и строка-описание, под блоком черта. Одна разметка на интеграции, способы оплаты и
|
|
7
|
+
* мессенджеры. Своих текстов блок не несёт: имя, описание и подписи знаков даёт приложение.
|
|
8
|
+
*/
|
|
9
|
+
export declare class RtServiceBlockComponent {
|
|
10
|
+
/** Знаки службы — те же, что принимает `rt-service-logo`; несколько ложатся внахлёст. */
|
|
11
|
+
readonly logos: InputSignal<readonly IRtServiceLogo.Item[]>;
|
|
12
|
+
/** Имя службы — жирная строка справа от знака. */
|
|
13
|
+
readonly name: InputSignal<string>;
|
|
14
|
+
/** Строка-описание под именем. Пустая строка не рисуется. */
|
|
15
|
+
readonly description: InputSignal<string>;
|
|
16
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RtServiceBlockComponent, never>;
|
|
17
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RtServiceBlockComponent, "rt-service-block", never, {
|
|
18
|
+
"logos": {
|
|
19
|
+
"alias": "logos";
|
|
20
|
+
"required": true;
|
|
21
|
+
"isSignal": true;
|
|
22
|
+
};
|
|
23
|
+
"name": {
|
|
24
|
+
"alias": "name";
|
|
25
|
+
"required": true;
|
|
26
|
+
"isSignal": true;
|
|
27
|
+
};
|
|
28
|
+
"description": {
|
|
29
|
+
"alias": "description";
|
|
30
|
+
"required": false;
|
|
31
|
+
"isSignal": true;
|
|
32
|
+
};
|
|
33
|
+
}, {}, never, never, true, never>;
|
|
34
|
+
}
|
|
@@ -72,6 +72,7 @@ export * from "@rt-tools/ui-kit-v2/radius";
|
|
|
72
72
|
export * from "@rt-tools/ui-kit-v2/ripple";
|
|
73
73
|
export * from "@rt-tools/ui-kit-v2/scroll-area";
|
|
74
74
|
export * from "@rt-tools/ui-kit-v2/section-nav";
|
|
75
|
+
export * from "@rt-tools/ui-kit-v2/service-block";
|
|
75
76
|
export * from "@rt-tools/ui-kit-v2/service-logo";
|
|
76
77
|
export * from "@rt-tools/ui-kit-v2/select";
|
|
77
78
|
export * from "@rt-tools/ui-kit-v2/side-menu";
|