@tetacom/ng-components 1.1.30 → 1.1.31

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.
Files changed (40) hide show
  1. package/component/date-picker/base-calendar.d.ts +1 -0
  2. package/docs/accordionDocs.mdx +118 -0
  3. package/docs/avatarDocs.mdx +99 -0
  4. package/docs/badgeDocs.mdx +24 -0
  5. package/docs/buttonDocs.mdx +120 -0
  6. package/docs/chartDocs.mdx +153 -0
  7. package/docs/checkboxDocs.mdx +108 -0
  8. package/docs/chipDocs.mdx +17 -0
  9. package/docs/datePickerDocs.mdx +230 -0
  10. package/docs/delimiterDocs.mdx +96 -0
  11. package/docs/dropdownDocs.mdx +143 -0
  12. package/docs/expandCardlDocs.mdx +56 -0
  13. package/docs/expandPanelDocs.mdx +105 -0
  14. package/docs/fileAreaDocs.mdx +74 -0
  15. package/docs/iconDocs.mdx +89 -0
  16. package/docs/inputDocs.mdx +92 -0
  17. package/docs/listDocs.mdx +17 -0
  18. package/docs/messageDocs.mdx +69 -0
  19. package/docs/modalDocs.mdx +63 -0
  20. package/docs/progressBarDocs.mdx +74 -0
  21. package/docs/propertyGridDocs.mdx +135 -0
  22. package/docs/radioDocs.mdx +106 -0
  23. package/docs/resizePanelDocs.mdx +86 -0
  24. package/docs/selectDocs.mdx +240 -0
  25. package/docs/switchDocs.mdx +103 -0
  26. package/docs/tableDocs.mdx +266 -0
  27. package/docs/tabsDocs.mdx +145 -0
  28. package/docs/tagDocs.mdx +19 -0
  29. package/docs/threeDocs.mdx +65 -0
  30. package/docs/toggleDocs.mdx +54 -0
  31. package/docs/toolbarDocs.mdx +16 -0
  32. package/docs/treeDocs.mdx +107 -0
  33. package/esm2022/common/model/view-type.model.mjs +1 -1
  34. package/esm2022/component/avatar/avatar/avatar.component.mjs +2 -2
  35. package/esm2022/component/date-picker/base-calendar.mjs +13 -1
  36. package/esm2022/component/date-picker/date-picker/date-calendar/date-calendar.component.mjs +3 -3
  37. package/esm2022/component/date-picker/date-range/range-calendar/range-calendar.component.mjs +3 -3
  38. package/fesm2022/tetacom-ng-components.mjs +18 -6
  39. package/fesm2022/tetacom-ng-components.mjs.map +1 -1
  40. package/package.json +1 -1
package/docs/chipDocs.mdx ADDED
@@ -0,0 +1,17 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import ChipStories from "../src/component/chip/Chip.stories";
3
+
4
+ <Meta of={ChipStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>Чипы</h1>
8
+ <div class='column'>
9
+ <p>Чипы — это компактные элементы, которые представляют атрибут или действие.</p>
10
+ <p>Чипы позволяют пользователям получать информацию, делать выбор, фильтровать контент или запускать действия.</p>
11
+ </div>
12
+ <h3>Как использовать</h3>
13
+ <div class='column'>
14
+ <p>Для того чтобы сделать чип, нужно к блоку добавить CSS класс <code>chip</code></p>
15
+ <p>Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста</p>
16
+ </div>
17
+ </div>
package/docs/datePickerDocs.mdx ADDED
@@ -0,0 +1,230 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import DatePickerStories from "../src/component/date-picker/date-picker.stories";
3
+
4
+ <Meta of={DatePickerStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>DatePicker/DateRange</h1>
8
+ <div class='column'>
9
+ <p>DatePicker (выбор даты) — компонент, который помогает вводить дату с клавиатуры или выбирать её с помощью мыши.</p>
10
+ <p>В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на
11
+ строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов
12
+ (Calendar_Item).</p>
13
+ <p>Также можно добавить выбор времени, при надобности.В этом случае формат даты будет следующим : дд.мм.гггг, чч:мм</p>
14
+ <p>DateRange — компонент,который позволяет выбрать отрезок дат (от и до). В строке также можно вводить отрезок дат в формате дд.мм.гггг - дд.мм.гггг</p>
15
+ </div>
16
+ <h3>Как использовать</h3>
17
+ <div class='column'>
18
+ <p>Datepicker:</p>
19
+ <ul>
20
+ <li>Запись в строке происходит в формате дд.мм.гггг;</li>
21
+ <li>Внутри datePicker-a присутствует mothPicker и yearPicker;</li>
22
+ <li>В него можно передавать дату в формате string,Date и number(new Date().getTime());</li>
23
+ <li>Для отображения времени нужно передать <code>[showTime]="true"</code>;</li>
24
+ <li>Если нужно чтобы datePicker не мог быть пустым, то нужно передать <code>[allowNull]="false"</code>;</li>
25
+ </ul>
26
+ <p>DateRange:</p>
27
+ <ul>
28
+ <li>Запись в строке происходит в формате дд.мм.гггг-дд.мм.гггг;</li>
29
+ <li>Внутри dateRange-a присутствует yearPicker;</li>
30
+ <li>Переключение месяцев происходит посредством стрелочек;</li>
31
+ <li>Он принимает в себя данные в формате <code>&#123; from:string | Date | number, to:string | Date | number &#125;</code></li>
32
+ <li>Если нужно чтобы dateRange не мог быть пустым, то нужно передать <code>[allowNull]="false"</code></li>
33
+ </ul>
34
+ <p>Также можно передать свойста minDate и maxDate для ограничения по выбору дат.</p>
35
+ </div>
36
+ <div class='column'>
37
+ <h3>Свойства</h3>
38
+ <h4>Общие свойства у teta-date-picker и teta-date-range </h4>
39
+ <table>
40
+ <thead>
41
+ <tr>
42
+ <th>Свойство</th>
43
+ <th>Tип</th>
44
+ <th>Описание</th>
45
+ </tr>
46
+ </thead>
47
+ <tbody>
48
+ <tr>
49
+ <td class='text-align-center'>
50
+ <p>viewType</p>
51
+ </td>
52
+ <td class='text-align-center'>
53
+ <code>'rounded'|'circle'|'brick'</code>
54
+ </td>
55
+ <td class='text-align-center'>
56
+ <p>Свойство округления компонента.</p>
57
+ </td>
58
+ </tr>
59
+ <tr>
60
+ <td class='text-align-center'>
61
+ <p>locale</p>
62
+ </td>
63
+ <td class='text-align-center'>
64
+ <code>'en'|'ru'</code>
65
+ </td>
66
+ <td class='text-align-center'>
67
+ <p>Локализация календаря</p>
68
+ </td>
69
+ </tr>
70
+ <tr>
71
+ <td class='text-align-center'>
72
+ <p>disabled</p>
73
+ </td>
74
+ <td class='text-align-center'>
75
+ <code>boolean</code>
76
+ </td>
77
+ <td class='text-align-center'>
78
+ <p>Отключает реакцию компонента на клик пользователя</p>
79
+ </td>
80
+ </tr>
81
+ <tr>
82
+ <td class='text-align-center'>
83
+ <p>minDate</p>
84
+ </td>
85
+ <td class='text-align-center'>
86
+ <code>string | Date | number</code>
87
+ </td>
88
+ <td class='text-align-center'>
89
+ <p>Минимальная для выбора дата</p>
90
+ </td>
91
+ </tr>
92
+ <tr>
93
+ <td class='text-align-center'>
94
+ <p>maxDate</p>
95
+ </td>
96
+ <td class='text-align-center'>
97
+ <code>string | Date | number</code>
98
+ </td>
99
+ <td class='text-align-center'>
100
+ <p>Максимальная для выбора дата</p>
101
+ </td>
102
+ </tr>
103
+ <tr>
104
+ <td class='text-align-center'>
105
+ <p>align</p>
106
+ </td>
107
+ <td class='text-align-center'>
108
+ <code>Align</code>
109
+ </td>
110
+ <td class='text-align-center'>
111
+ <p>Позиционирование содержимого дропдауна по горизонтали</p>
112
+ </td>
113
+ </tr>
114
+ <tr>
115
+ <td class='text-align-center'>
116
+ <p>verticalAlign</p>
117
+ </td>
118
+ <td class='text-align-center'>
119
+ <code>VerticalAlign</code>
120
+ </td>
121
+ <td class='text-align-center'>
122
+ <p>Позиционирование содержимого дропдауна по вертикали</p>
123
+ </td>
124
+ </tr>
125
+ <tr>
126
+ <td class='text-align-center'>
127
+ <p>date</p>
128
+ </td>
129
+ <td class='text-align-center'>
130
+ <code>string | Date | number</code>
131
+ </td>
132
+ <td class='text-align-center'>
133
+ <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
134
+ </td>
135
+ </tr>
136
+ <tr>
137
+ <td class='text-align-center'>
138
+ <p>selectDate</p>
139
+ </td>
140
+ <td class='text-align-center'>
141
+ <code>function</code>
142
+ </td>
143
+ <td class='text-align-center'>
144
+ <p>Применяет функцию при изменении данных.Отдает выбранную дату/рендж</p>
145
+ </td>
146
+ </tr>
147
+ <tr>
148
+ <td class='text-align-center'>
149
+ <p>allowNull</p>
150
+ </td>
151
+ <td class='text-align-center'>
152
+ <code>boolean</code>
153
+ </td>
154
+ <td class='text-align-center'>
155
+ <p>Свойство, которое позволяет/запрещает оставлять пустую строчку в пикере </p>
156
+ </td>
157
+ </tr>
158
+ <tr>
159
+ <td class='text-align-center'>
160
+ <p>invalid</p>
161
+ </td>
162
+ <td class='text-align-center'>
163
+ <code>boolean</code>
164
+ </td>
165
+ <td class='text-align-center'>
166
+ <p>Свойство для отображения некорректности введенных данных</p>
167
+ </td>
168
+ </tr>
169
+ <tr>
170
+ <td class='text-align-center'>
171
+ <p>backdrop</p>
172
+ </td>
173
+ <td class='text-align-center'>
174
+ <code>boolean</code>
175
+ </td>
176
+ <td class='text-align-center'>
177
+ <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
178
+ </td>
179
+ </tr>
180
+ </tbody>
181
+ </table>
182
+ <h4>teta-date-picker</h4>
183
+ <table>
184
+ <thead>
185
+ <tr>
186
+ <th>Свойство</th>
187
+ <th>Tип</th>
188
+ <th>Описание</th>
189
+ </tr>
190
+ </thead>
191
+ <tbody>
192
+ <tr>
193
+ <td class='text-align-center'>
194
+ <p>showTime</p>
195
+ </td>
196
+ <td class='text-align-center'>
197
+ <code>boolean</code>
198
+ </td>
199
+ <td class='text-align-center'>
200
+ <p>Свойство, которое добавляет выбор времени</p>
201
+ </td>
202
+ </tr>
203
+ </tbody>
204
+ </table>
205
+ <h4>teta-date-range</h4>
206
+ <table>
207
+ <thead>
208
+ <tr>
209
+ <th>Свойство</th>
210
+ <th>Tип</th>
211
+ <th>Описание</th>
212
+ </tr>
213
+ </thead>
214
+ <tbody>
215
+ <tr>
216
+ <td class='text-align-center'>
217
+ <p>date</p>
218
+ </td>
219
+ <td class='text-align-center'>
220
+ <code>DateFromToModel</code>
221
+ </td>
222
+ <td class='text-align-center'>
223
+ <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
224
+ </td>
225
+ </tr>
226
+ </tbody>
227
+ </table>
228
+
229
+ </div>
230
+ </div>
package/docs/delimiterDocs.mdx ADDED
@@ -0,0 +1,96 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import DelimiterStories from "../src/component/delimiter/Delimiter.stories";
3
+
4
+ <Meta of={DelimiterStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>Разделитель</h1>
8
+ <div class='column'>
9
+ <p>Delimiter (разделитель) — компонент, который позволяет разделять элементы между друг другом.</p>
10
+ <p>Компонент применяется как в горизонтальном, так и в вертикальном вариантах. </p>
11
+ </div>
12
+ <h3>Как использовать</h3>
13
+ <div class='column'>
14
+ <p>Необходим для разграничения групп кнопок, в большинстве случаев им разделяются кнопки только с иконками.</p>
15
+ </div>
16
+ <div class='column'>
17
+ <h3>Свойства</h3>
18
+ <table>
19
+ <thead>
20
+ <tr>
21
+ <th>Свойство</th>
22
+ <th>Tип</th>
23
+ <th>Описание</th>
24
+ </tr>
25
+ </thead>
26
+ <tbody>
27
+ <tr>
28
+ <td class='text-align-center'>
29
+ <p>direction</p>
30
+ </td>
31
+ <td class='text-align-center'>
32
+ <code>'vertical' | 'horizontal'</code>
33
+ </td>
34
+ <td class='text-align-center'>
35
+ <p>Направление разделителя</p>
36
+ </td>
37
+ </tr>
38
+ <tr>
39
+ <td class='text-align-center'>
40
+ <p>height</p>
41
+ </td>
42
+ <td class='text-align-center'>
43
+ <code>number</code>
44
+ </td>
45
+ <td class='text-align-center'>
46
+ <p>Высота разделителя</p>
47
+ </td>
48
+ </tr>
49
+ <tr>
50
+ <td class='text-align-center'>
51
+ <p>width</p>
52
+ </td>
53
+ <td class='text-align-center'>
54
+ <code>number</code>
55
+ </td>
56
+ <td class='text-align-center'>
57
+ <p>Ширина разделителя</p>
58
+ </td>
59
+ </tr>
60
+ <tr>
61
+ <td class='text-align-center'>
62
+ <p>verticalMargin</p>
63
+ </td>
64
+ <td class='text-align-center'>
65
+ <code>number</code>
66
+ </td>
67
+ <td class='text-align-center'>
68
+ <p>Отступ от компонента по вертикали</p>
69
+ </td>
70
+ </tr>
71
+ <tr>
72
+ <td class='text-align-center'>
73
+ <p>horizontalMargin</p>
74
+ </td>
75
+ <td class='text-align-center'>
76
+ <code>number</code>
77
+ </td>
78
+ <td class='text-align-center'>
79
+ <p>Отступ от компонента по горизонтали</p>
80
+ </td>
81
+ </tr>
82
+ <tr>
83
+ <td class='text-align-center'>
84
+ <p>palette</p>
85
+ </td>
86
+ <td class='text-align-center'>
87
+ <code>string</code>
88
+ </td>
89
+ <td class='text-align-center'>
90
+ <p>Цвет разделителя</p>
91
+ </td>
92
+ </tr>
93
+ </tbody>
94
+ </table>
95
+ </div>
96
+ </div>
package/docs/dropdownDocs.mdx ADDED
@@ -0,0 +1,143 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import DropdownStories from "../src/component/dropdown/Dropdown.stories";
3
+
4
+ <Meta of={DropdownStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>Dropdown</h1>
8
+ <div class='column'>
9
+ <p>Dropdown — элемент позволяющий выбрать одно из нескольких заранее определённых значений параметра.</p>
10
+ </div>
11
+ <h3>Функции</h3>
12
+ <div class='column'>
13
+ <p>Когда дропдаун неактивен, отображается только выбранное значение или их количество. При нажатии на него список раскрывается,
14
+ отображая все возможные значения. После выбора список возможных значений исчезает.</p>
15
+ </div>
16
+ <h3>Как пользоваться компонентом</h3>
17
+ <div class='column'>
18
+ <p>Для начала нужно создать <code> &lt;teta-dropdown&gt;</code>, и в него прокинуть элементы с директивой tetaDropdownHead и tetaDropdownContent</p>
19
+ <p>Директива <code>tetaDropdownHead</code> отвечает за отображение дочерних элементов в шапке дропдауна.</p>
20
+ <p>Содержимое блока с директивой <code>tetaDropdownContent</code> используется к качестве элементов выпадающего списка.</p>
21
+ </div>
22
+ <h3>Примеры кода</h3>
23
+ <p><pre><code>&lt;teta-dropdown&gt;
24
+ &nbsp;&nbsp;&lt;div tetaDropdownHead&gt;Heading 1&lt;/div&gt;
25
+ &nbsp;&nbsp;&lt;div tetaDropdownContent&gt;
26
+ &nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-2"&gt;I am the content 1&lt;/div&gt;
27
+ &nbsp;&nbsp;&lt;/div&gt;
28
+ &lt;/teta-dropdown&gt;</code></pre></p>
29
+ <div class='column'>
30
+ <h3>Свойства</h3>
31
+ <h4>teta-dropdown</h4>
32
+ <table>
33
+ <thead>
34
+ <tr>
35
+ <th>Свойство</th>
36
+ <th>Tип</th>
37
+ <th>Описание</th>
38
+ </tr>
39
+ </thead>
40
+ <tbody>
41
+ <tr>
42
+ <td class='text-align-center'>
43
+ <p>align</p>
44
+ </td>
45
+ <td class='text-align-center'>
46
+ <code>Align</code>
47
+ </td>
48
+ <td class='text-align-center'>
49
+ <p>Позиционирование содержимого дропдауна по горизонтали</p>
50
+ </td>
51
+ </tr>
52
+ <tr>
53
+ <td class='text-align-center'>
54
+ <p>verticalAlign</p>
55
+ </td>
56
+ <td class='text-align-center'>
57
+ <code>VerticalAlign</code>
58
+ </td>
59
+ <td class='text-align-center'>
60
+ <p>Позиционирование содержимого дропдауна по вертикали</p>
61
+ </td>
62
+ </tr>
63
+ <tr>
64
+ <td class='text-align-center'>
65
+ <p>open</p>
66
+ </td>
67
+ <td class='text-align-center'>
68
+ <code>boolean</code>
69
+ </td>
70
+ <td class='text-align-center'>
71
+ <p>Свойство позволяющее управлять состоянием аккордеона</p>
72
+ </td>
73
+ </tr>
74
+ <tr>
75
+ <td class='text-align-center'>
76
+ <p>openChange</p>
77
+ </td>
78
+ <td class='text-align-center'>
79
+ <code>function</code>
80
+ </td>
81
+ <td class='text-align-center'>
82
+ <p>Указанная функция выполняется при изменении свойства <code>open</code>. Отдает текущее состояние</p>
83
+ </td>
84
+ </tr>
85
+ <tr>
86
+ <td class='text-align-center'>
87
+ <p>disabled</p>
88
+ </td>
89
+ <td class='text-align-center'>
90
+ <code>boolean</code>
91
+ </td>
92
+ <td class='text-align-center'>
93
+ <p>Свойство для отключения аккордеона</p>
94
+ </td>
95
+ </tr>
96
+ <tr>
97
+ <td class='text-align-center'>
98
+ <p>appendToBody</p>
99
+ </td>
100
+ <td class='text-align-center'>
101
+ <code>boolean</code>
102
+ </td>
103
+ <td class='text-align-center'>
104
+ <p>Позволяет прикрепить содержимое дропдауна не к элементу с tetaDropdownHead, а к <code>body</code></p>
105
+ </td>
106
+ </tr>
107
+ <tr>
108
+ <td class='text-align-center'>
109
+ <p>autoClose</p>
110
+ </td>
111
+ <td class='text-align-center'>
112
+ <code>boolean</code>
113
+ </td>
114
+ <td class='text-align-center'>
115
+ <p>Свойство, которое включает/отключает закрытие дропдауна автоматически.</p>
116
+ </td>
117
+ </tr>
118
+ <tr>
119
+ <td class='text-align-center'>
120
+ <p>autoCloseIgnore</p>
121
+ </td>
122
+ <td class='text-align-center'>
123
+ <code>AutoCloseIgnoreCase[]</code>
124
+ </td>
125
+ <td class='text-align-center'>
126
+ <p>Свойство, которое игнорирует указанные причины закрытия дропдауна</p>
127
+ </td>
128
+ </tr>
129
+ <tr>
130
+ <td class='text-align-center'>
131
+ <p>backdrop</p>
132
+ </td>
133
+ <td class='text-align-center'>
134
+ <code>boolean</code>
135
+ </td>
136
+ <td class='text-align-center'>
137
+ <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
138
+ </td>
139
+ </tr>
140
+ </tbody>
141
+ </table>
142
+ </div>
143
+ </div>
package/docs/expandCardlDocs.mdx ADDED
@@ -0,0 +1,56 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import ExpandStories from "../src/component/expand-card/expand.stories";
3
+
4
+ <Meta of={ExpandStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>ExpandCard</h1>
8
+ <div class='column'>
9
+ <p>ExpandCard обычно используется для создания блока с настройками для чего-либо.</p>
10
+ </div>
11
+ <h3>Функции</h3>
12
+ <div class='column'>
13
+ <p>ExpandCard позволяет скрывать содержимое при клике на соответствующую кнопку.</p>
14
+ </div>
15
+ <h3>Как пользоваться компонентом</h3>
16
+ <div class='column'>
17
+ <p>Нужно создать <code> &lt;teta-expand-item&gt;</code>, внуть передаем блоки с
18
+ <code>ngProjectAs</code>(текст в шапке) и его содержимое.</p>
19
+ </div>
20
+ <div class='column'>
21
+ <h3>Свойства</h3>
22
+ <table>
23
+ <thead>
24
+ <tr>
25
+ <th>Свойство</th>
26
+ <th>Tип</th>
27
+ <th>Описание</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ <tr>
32
+ <td class='text-align-center'>
33
+ <p>open</p>
34
+ </td>
35
+ <td class='text-align-center'>
36
+ <code>boolean</code>
37
+ </td>
38
+ <td class='text-align-center'>
39
+ <p>Свойство позволяющее управлять его состоянием</p>
40
+ </td>
41
+ </tr>
42
+ <tr>
43
+ <td class='text-align-center'>
44
+ <p>openChange</p>
45
+ </td>
46
+ <td class='text-align-center'>
47
+ <code>function</code>
48
+ </td>
49
+ <td class='text-align-center'>
50
+ <p>Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.</p>
51
+ </td>
52
+ </tr>
53
+ </tbody>
54
+ </table>
55
+ </div>
56
+ </div>
package/docs/expandPanelDocs.mdx ADDED
@@ -0,0 +1,105 @@
1
+ import {Meta} from "@storybook/blocks";
2
+ import ExpandPanelStories from "../src/component/expand-panel/ExpandPanel.stories";
3
+
4
+ <Meta of={ExpandPanelStories}/>
5
+
6
+ <div class='column gap-24'>
7
+ <h1>ExpandPanel</h1>
8
+ <div class='column'>
9
+ <p>ExpandPanel обычно используется для фильтров,отображения блоков, которые нужно скрывать, а также при большом
10
+ количестве элементов в одной строчке</p>
11
+ </div>
12
+ <h3>Функции</h3>
13
+ <div class='column'>
14
+ <p>ExpandPanel позволяет скрывать содержимое при клике на соответствующую кнопку.</p>
15
+ <p>При скрытии содержимого, название меняет написание на горизонтальное</p>
16
+ </div>
17
+ <h3>Как пользоваться компонентом</h3>
18
+ <div class='column'>
19
+ <p>Создаем <code> &lt;teta-expand-panel&gt;</code>, внуть передаем блоки с
20
+ директивами <code>tetaExpandPanelHead</code> и <code>tetaExpandPanelContent</code>.</p>
21
+ <p>Директива <code>tetaExpandPanelHead</code> отвечает за отображение дочерних элементов в шапке элемента.</p>
22
+ <p>Блок с директивой <code>tetaExpandPanelContent</code> используется как содержимое раскрывающейся панели.</p>
23
+ </div>
24
+ <h3>Примеры кода</h3>
25
+ <p>
26
+ <pre><code>&lt;div [tetaIconSprite]="'assets/icons.svg'" class="column bg-global-bgcard font-body-3 padding-3" style="width:fit-content;height: 500px"&gt;
27
+ &nbsp;&lt;teta-expand-panel placeholder='Фильтры' &gt;
28
+ &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelHead&gt;Фильтры&lt;/ng-template&gt;
29
+ &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelContent&gt;
30
+ &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-2"&gt;Фильтр1&lt;/div&gt;
31
+ &nbsp;&nbsp;&nbsp;&lt;/ng-template&gt;
32
+ &nbsp;&lt;/teta-expand-panel&gt;
33
+ &lt;/div&gt;</code></pre>
34
+ </p>
35
+ <div class='column'>
36
+ <h3>Свойства</h3>
37
+ <h4>teta-expand-panel</h4>
38
+ <table>
39
+ <thead>
40
+ <tr>
41
+ <th>Свойство</th>
42
+ <th>Tип</th>
43
+ <th>Описание</th>
44
+ </tr>
45
+ </thead>
46
+ <tbody>
47
+ <tr>
48
+ <td class='text-align-center'>
49
+ <p>placeholder</p>
50
+ </td>
51
+ <td class='text-align-center'>
52
+ <code>string</code>
53
+ </td>
54
+ <td class='text-align-center'>
55
+ <p>Текст панели в закрытом состоянии</p>
56
+ </td>
57
+ </tr>
58
+ <tr>
59
+ <td class='text-align-center'>
60
+ <p>open</p>
61
+ </td>
62
+ <td class='text-align-center'>
63
+ <code>boolean</code>
64
+ </td>
65
+ <td class='text-align-center'>
66
+ <p>Свойство позволяющее управлять состоянием панели</p>
67
+ </td>
68
+ </tr>
69
+ <tr>
70
+ <td class='text-align-center'>
71
+ <p>openChange</p>
72
+ </td>
73
+ <td class='text-align-center'>
74
+ <code>function</code>
75
+ </td>
76
+ <td class='text-align-center'>
77
+ <p>Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.</p>
78
+ </td>
79
+ </tr>
80
+ <tr>
81
+ <td class='text-align-center'>
82
+ <p>direction</p>
83
+ </td>
84
+ <td class='text-align-center'>
85
+ <code>'left'|'right'</code>
86
+ </td>
87
+ <td class='text-align-center'>
88
+ <p>Свойство для выбора направления скрытия панели</p>
89
+ </td>
90
+ </tr>
91
+ <tr>
92
+ <td class='text-align-center'>
93
+ <p>cookieName</p>
94
+ </td>
95
+ <td class='text-align-center'>
96
+ <code>string</code>
97
+ </td>
98
+ <td class='text-align-center'>
99
+ <p>При вводе этого свойства создается кука с указанным именем и с состоянием панели.</p>
100
+ </td>
101
+ </tr>
102
+ </tbody>
103
+ </table>
104
+ </div>
105
+ </div>