npm - @tetacom/ng-components - Versions diffs - 1.6.5 → 1.6.7 - Mend

@tetacom/ng-components 1.6.5 → 1.6.7

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 (31) hide show

package/docs/accordionDocs.mdx +17 -85
package/docs/avatarDocs.mdx +28 -100
package/docs/badgeDocs.mdx +2 -2
package/docs/buttonDocs.mdx +8 -80
package/docs/checkboxDocs.mdx +8 -80
package/docs/datePickerDocs.mdx +33 -178
package/docs/dateRangeDocs.mdx +31 -166
package/docs/delimiterDocs.mdx +20 -91
package/docs/dropdownDocs.mdx +41 -157
package/docs/expandCardlDocs.mdx +18 -55
package/docs/expandPanelDocs.mdx +40 -112
package/docs/fileAreaDocs.mdx +16 -74
package/docs/iconDocs.mdx +8 -47
package/docs/inputDocs.mdx +26 -90
package/docs/listDocs.mdx +11 -18
package/docs/messageDocs.mdx +52 -77
package/docs/modalDocs.mdx +0 -1
package/docs/progressBarDocs.mdx +26 -83
package/docs/radioDocs.mdx +36 -113
package/docs/resizePanelDocs.mdx +25 -93
package/docs/selectDocs.mdx +72 -277
package/docs/switchDocs.mdx +42 -111
package/docs/tableDocs.mdx +7 -205
package/docs/tabsDocs.mdx +12 -94
package/docs/tagDocs.mdx +11 -20
package/docs/toggleDocs.mdx +20 -55
package/docs/toolbarDocs.mdx +9 -17
package/docs/treeDocs.mdx +39 -121
package/fesm2022/tetacom-ng-components.mjs +12 -12
package/fesm2022/tetacom-ng-components.mjs.map +1 -1
package/package.json +1 -1

package/docs/tableDocs.mdx CHANGED Viewed

@@ -70,208 +70,10 @@ Table (таблица) — компонент, который отображае
 ### Свойства
-<table>
-  <thead>
-    <tr>
-      <th>Свойство</th>
-      <th>Tип</th>
-      <th>Описание</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="text-align-center">
-        <p>data</p>
-      </td>
-      <td class="text-align-center">
-        <code>any[]</code>
-      </td>
-      <td class="text-align-center">
-        <p>Данные для формирования таблицы</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>cookieName</p>
-      </td>
-      <td class="text-align-center">
-        <code>string</code>
-      </td>
-      <td class="text-align-center">
-        <p>Будут формироваться куки данных таблицы с указанным именем</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>columns</p>
-      </td>
-      <td class="text-align-center">
-        <code>TableColumns[]</code>
-      </td>
-      <td class="text-align-center">
-        <p>Шаблон столбцов таблицы</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>virtual</p>
-      </td>
-      <td class="text-align-center">
-        <code>boolean</code>
-      </td>
-      <td class="text-align-center">
-        <p>Флаг для добавления виртульного скролла</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>dict</p>
-      </td>
-      <td class="text-align-center">
-        <code>any[]</code>
-      </td>
-      <td class="text-align-center">
-        <p>
-          Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим
-          свойством в <code>data</code>. В качестве значения принимает массив объектов id,name.Требуется если вы
-          добавляете ячейку типа лист.
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>contextMenu</p>
-      </td>
-      <td class="text-align-center">
-        <code>template</code>
-      </td>
-      <td class="text-align-center">
-        <p>Шаблон контекстного меню </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>filterOptions</p>
-      </td>
-      <td class="text-align-center">
-        <code>IDictionary&lt;IIdName&lt;any&gt;[]&gt;</code>
-      </td>
-      <td class="text-align-center">
-        <p>Список опций для фильтрации, если не задано - берет Dict</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>editType</p>
-      </td>
-      <td class="text-align-center">
-        <code>EditType</code>
-      </td>
-      <td class="text-align-center">
-        <p>
-          Тип редактирования - построчно или по ячейкам. При построчном - активируется вся строка для редактирования,
-          иначе - по одной ячейке
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>editEvent</p>
-      </td>
-      <td class="text-align-center">
-        <code>EditEvent</code>
-      </td>
-      <td class="text-align-center">
-        <p>Выбор события при котором начинается редактирование ячейки таблицы</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>selectType</p>
-      </td>
-      <td class="text-align-center">
-        <code>SelectType</code>
-      </td>
-      <td class="text-align-center">
-        <p>Тип выбора строк. Никак, чекбоксами (появляется доп столбец с чеком), или просто мышью.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>selectedRows</p>
-      </td>
-      <td class="text-align-center">
-        <code>any[]</code>
-      </td>
-      <td class="text-align-center">
-        <p>Свойство отвечающее за выбранные ячейки</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>tableService</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Срабатывает при создании сервиса и отдает его.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>cellEditEnd</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Указанная функция применяется при окончании редактирования ячейки </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>cellEditStart</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Указанная функция применяется при начале редактирования ячейки </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>rowEditEnd</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Указанная функция применяется при окончании редактирования строчки.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>rowEditStart</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Указанная функция применяется при начале редактирования строчки.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>activeRowChange</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Указанная функция применяется при изменении выбранной строчки.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+| Свойство   | Тип              | Описание                                                                                                            |
+| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
+| data       | `any[]`          | Данные для формирования таблицы                                                                                     |
+| cookieName | `string`         | Будут формироваться куки данных таблицы с указанным именем                                                          |
+| columns    | `TableColumns[]` | Шаблон столбцов таблицы                                                                                             |
+| virtual    | `boolean`        | Флаг для добавления виртуального скролла                                                                            |
+| dict       | `any[]`          | Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим свойством в |

package/docs/tabsDocs.mdx CHANGED Viewed

@@ -64,100 +64,18 @@ Tab (таб) — компонент, который переключают вк
 #### teta-tabs
-<table>
-  <thead>
-    <tr>
-      <th>Свойство</th>
-      <th>Tип</th>
-      <th>Описание</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="text-align-center">
-        <p>activeId</p>
-      </td>
-      <td class="text-align-center">
-        <code>string</code>
-      </td>
-      <td class="text-align-center">
-        <p>
-          Используется для указания выбранного таба (аттрибут не обязателен, т.к. компонент сам умеет управлять своим
-          состоянием)
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>tabChange</p>
-      </td>
-      <td class="text-align-center">
-        <code>function</code>
-      </td>
-      <td class="text-align-center">
-        <p>Принимает функцию, которая применяется при изменении активного таба.Отдает текущее состояния.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>destroyOnHide</p>
-      </td>
-      <td class="text-align-center">
-        <code>boolean</code>
-      </td>
-      <td class="text-align-center">
-        <p>Свойство, отвечающее за уничтожение и пересоздание содержимого таба.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+| Свойство   | Тип              | Описание                                                                                                            |
+| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
+| data       | `any[]`          | Данные для формирования таблицы                                                                                     |
+| cookieName | `string`         | Будут формироваться куки данных таблицы с указанным именем                                                          |
+| columns    | `TableColumns[]` | Шаблон столбцов таблицы                                                                                             |
+| virtual    | `boolean`        | Флаг для добавления виртуального скролла                                                                            |
+| dict       | `any[]`          | Массив выбираемых элементов. Каждое свойство имеет название, которое должно совпадать с соответствующим свойством в |
 #### teta-tab
-<table>
-  <thead>
-    <tr>
-      <th>Свойство</th>
-      <th>Tип</th>
-      <th>Описание</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="text-align-center">
-        <p>id</p>
-      </td>
-      <td class="text-align-center">
-        <code>string</code>
-      </td>
-      <td class="text-align-center">
-        <p>Идентификатор,который используется при выборе активного таба</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>disabled</p>
-      </td>
-      <td class="text-align-center">
-        <code>boolean</code>
-      </td>
-      <td class="text-align-center">
-        <p>Отключает взаимодействие с табом</p>
-      </td>
-    </tr>
-    <tr>
-      <td class="text-align-center">
-        <p>title</p>
-      </td>
-      <td class="text-align-center">
-        <code>string</code>
-      </td>
-      <td class="text-align-center">
-        <p>
-          Замента директиве <code>tetaTabTitle</code>. Это свойство нужно использовать, если требуется вывести просто
-          текст без дополнительных модификаций.
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+| Свойство | Тип       | Описание                                                                                                                              |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| id       | `string`  | Идентификатор, который используется при выборе активного таба                                                                         |
+| disabled | `boolean` | Отключает взаимодействие с табом                                                                                                      |
+| title    | `string`  | Замена директиве `tetaTabTitle`. Это свойство нужно использовать, если требуется вывести просто текст без дополнительных модификаций. |

package/docs/tagDocs.mdx CHANGED Viewed

@@ -3,23 +3,14 @@ import TagStories from '../src/component/tag/Tag.stories';
 <Meta of={TagStories} />
-<div class="column gap-24">
-  <h1>Тег</h1>
-  <div class="column">
-    <p>
-      Tag (тег) — компонент, который объединяет между собой похожие объекты: статьи, документы, фотографии. По сути, это
-      метки, которые позволяет маркировать и классифицировать контент, и состоят из релевантных ключевых слов, которые
-      облегчают поиск и просмотр контента.
-    </p>
-  </div>
-  <h3>Как использовать</h3>
-  <div class="column">
-    <p>
-      Для того чтобы сделать чип, нужно к блоку добавить CSS класс <code>tag</code>
-    </p>
-    <p>Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста</p>
-    <p>
-      У тегов есть дополнительный класс для отображения с фоном - <code>tag_filled</code>
-    </p>
-  </div>
-</div>
+# Тег
+Tag (тег) — компонент, который объединяет между собой похожие объекты: статьи, документы, фотографии. По сути, это метки, которые позволяет маркировать и классифицировать контент, и состоят из релевантных ключевых слов, которые облегчают поиск и просмотр контента.
+### Как использовать
+Для того чтобы сделать чип, нужно к блоку добавить CSS класс `tag`
+Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста
+У тегов есть дополнительный класс для отображения с фоном - `tag_filled`

package/docs/toggleDocs.mdx CHANGED Viewed

@@ -3,58 +3,23 @@ import toggleStories from '../src/component/toggle/Toggle.stories';
 <Meta of={toggleStories} />
-<div class="column gap-24">
-  <h1>Переключатель</h1>
-  <div class="column">
-    <p>Toggle (переключатель) — компонент, который позволяет переключаться между состояниями.</p>
-  </div>
-  <h3>Функции</h3>
-  <div class="column">
-    <p>
-      Функционально тогл — аналог чекбокса, но контекст их использования может отличаться. Тогл нельзя использовать для
-      выбора элементов в списке. Например, выбрать несколько параметров.
-    </p>
-    <p>Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.</p>
-  </div>
-  <h3>Как использовать</h3>
-  <div class="column">
-    <p>
-      <code>teta-toggle</code> - компонент для создание тогла. Для управления его состоянием используется{' '}
-      <code>ngModel</code>
-    </p>
-  </div>
-  <h3>Свойства</h3>
-  <table>
-    <thead>
-      <tr>
-        <th>Свойство</th>
-        <th>Tип</th>
-        <th>Описание</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="text-align-center">
-          <p>noLabel</p>
-        </td>
-        <td class="text-align-center">
-          <code>boolean</code>
-        </td>
-        <td class="text-align-center">
-          <p>Свойство, которое отображает/скрывает блок текста в тогле</p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>disabled</p>
-        </td>
-        <td class="text-align-center">
-          <code>boolean</code>
-        </td>
-        <td class="text-align-center">
-          <p>Отключает взаимодействие со всем листом радиокнопок</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+# Переключатель
+Toggle (переключатель) — компонент, который позволяет переключаться между состояниями.
+### Функции
+Функционально тогл — аналог чекбокса, но контекст их использования может отличаться. Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько параметров.
+Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.
+### Как использовать
+`teta-toggle` - компонент для создание тогла. Для управления его состоянием используется `ngModel`
+### Свойства
+| Свойство | Тип       | Описание                                                  |
+| -------- | --------- | --------------------------------------------------------- |
+| noLabel  | `boolean` | Свойство, которое отображает/скрывает блок текста в тогле |
+| disabled | `boolean` | Отключает взаимодействие со всем листом радиокнопок       |

package/docs/toolbarDocs.mdx CHANGED Viewed

@@ -3,20 +3,12 @@ import ToolbarStories from '../src/component/toolbar/Toolbar.stories';
 <Meta of={ToolbarStories} />
-<div class="column gap-24">
-  <h1>Панель инструментов</h1>
-  <div class="column">
-    <p>
-      Toolbar (панель инструментов) — элемент графического интерфейса пользователя. Обычно панель инструментов
-      располагается в верхней части окна программы и содержит иконки, кнопки или выпадающие списки, которые позволяют
-      пользователю выполнять определенные действия без необходимости просматривать меню или вводить команды вручную.
-    </p>
-  </div>
-  <h3>Как использовать</h3>
-  <div class="column">
-    <p>
-      Для создания туллбара используется компонент <code>teta-toolbar</code>
-    </p>
-    <p>Внутрь передается контент, который необходимо отобразить в нем.</p>
-  </div>
-</div>
+# Панель инструментов
+Toolbar (панель инструментов) — элемент графического интерфейса пользователя. Обычно панель инструментов располагается в верхней части окна программы и содержит иконки, кнопки или выпадающие списки, которые позволяют пользователю выполнять определенные действия без необходимости просматривать меню или вводить команды вручную.
+### Как использовать
+Для создания туллбара используется компонент `teta-toolbar`
+Внутрь передается контент, который необходимо отобразить в нем.

package/docs/treeDocs.mdx CHANGED Viewed

@@ -3,124 +3,42 @@ import TreeStories from '../src/component/tree/Tree.stories';
 <Meta of={TreeStories} />
-<div class="column gap-24">
-  <h1>Дерево</h1>
-  <div class="column">
-    <p>
-      Tree (дерево) — компонент, использующийся для отображения иерархических структур, представленных расширяемыми
-      узлами дерева.
-    </p>
-    <p>Компонент используется для сущностей, которые имеют ссылки на самих себя.</p>
-  </div>
-  <h3>Правила применения</h3>
-  <div class="column">
-    <p>
-      У дерева есть отдельные элементы (TreeItem), которые совмещаются между собой. Каждый элемент имеет свой
-      уровень.Раскрытие происходит иерархично: 1 уровень раскрывается на 2 уровень, 2 уровень на 3 уровень и т. п.
-    </p>
-  </div>
-  <h3>Как использовать</h3>
-  <div class="column">
-    <p>
-      Для начала нужно создать <code> &lt;teta-tree&gt;</code>. Этот компонент ждет свойство <code>data</code>, оно ждет
-      объект со свойством <code>children</code>, которое принимает массив таких же данных. Также можно передавать любые
-      дополнительные свойства, которые необходимы вам для генерации дерева.
-    </p>
-    <p>
-      Внутрь необходимо передать блок <code>ng-template</code> с директивой <code>teta-template</code> для кастомизации
-      элемента дерева.
-    </p>
-  </div>
-  <h3>Пример кода</h3>
-  <p>
-    <pre>
-      <code>
-        &lt;teta-tree [data]="data"&gt; &nbsp;&nbsp;&lt;ng-template tetaTemplate let-item&gt;
-        &nbsp;&nbsp;&nbsp;&nbsp;&lt;teta-icon [name]="item.icon"&gt;&lt;/teta-icon&gt;
-        &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&#123;&#123;item.name&#125;&#125;&lt;/p&gt; &nbsp;&nbsp;&lt;/ng-template&gt;
-        &nbsp;&lt;/teta-tree&gt;
-      </code>
-    </pre>
-  </p>
-  <h3>Свойства</h3>
-  <h4>teta-tree</h4>
-  <table>
-    <thead>
-      <tr>
-        <th>Свойство</th>
-        <th>Tип</th>
-        <th>Описание</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="text-align-center">
-          <p>data</p>
-        </td>
-        <td class="text-align-center">
-          <code>ITreeData[]</code>
-        </td>
-        <td class="text-align-center">
-          <p>Данные для формирования дерева</p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>childNodeName</p>
-        </td>
-        <td class="text-align-center">
-          <code>string</code>
-        </td>
-        <td class="text-align-center">
-          <p>
-            Свойство, отвечающее за название элемента с дочерними элементами дерева (по дефолту <code>children</code>)
-          </p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>height</p>
-        </td>
-        <td class="text-align-center">
-          <code>number</code>
-        </td>
-        <td class="text-align-center">
-          <p>Высота дерева</p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>openItems</p>
-        </td>
-        <td class="text-align-center">
-          <code>ITreeData[]</code>
-        </td>
-        <td class="text-align-center">
-          <p>Свойство, отвечающее контроль над открытыми элементами дерева</p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>virtual</p>
-        </td>
-        <td class="text-align-center">
-          <code>boolean</code>
-        </td>
-        <td class="text-align-center">
-          <p>Флаг добавления виртуального скролла</p>
-        </td>
-      </tr>
-      <tr>
-        <td class="text-align-center">
-          <p>openItemsChange</p>
-        </td>
-        <td class="text-align-center">
-          <code>function</code>
-        </td>
-        <td class="text-align-center">
-          <p>Переданная функция срабатывает при открытии/закрытии элемента дерева и отдает открытые элементы дерева</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+# Дерево
+Tree (дерево) — компонент, использующийся для отображения иерархических структур, представленных расширяемыми узлами дерева.
+Компонент используется для сущностей, которые имеют ссылки на самих себя.
+### Правила применения
+У дерева есть отдельные элементы (TreeItem), которые совмещаются между собой. Каждый элемент имеет свой уровень. Раскрытие происходит иерархично: 1 уровень раскрывается на 2 уровень, 2 уровень на 3 уровень и т. п.
+### Как использовать
+Для начала нужно создать `<teta-tree>`. Этот компонент ждет свойство `data`, оно ждет объект со свойством `children`, которое принимает массив таких же данных. Также можно передавать любые дополнительные свойства, которые необходимы вам для генерации дерева.
+Внутрь необходимо передать блок `ng-template` с директивой `teta-template` для кастомизации элемента дерева.
+### Пример кода
+```
+<teta-tree [data]="data">
+  <ng-template tetaTemplate let-item>
+    <teta-icon [name]="item.icon"></teta-icon>
+    <p>{{ item.name }}</p>
+  </ng-template>
+</teta-tree>
+```
+### Свойства
+#### teta-tree
+| Свойство        | Тип           | Описание                                                                                               |
+| --------------- | ------------- | ------------------------------------------------------------------------------------------------------ |
+| data            | `ITreeData[]` | Данные для формирования дерева                                                                         |
+| childNodeName   | `string`      | Свойство, отвечающее за название элемента с дочерними элементами дерева (по дефолту `children`)        |
+| height          | `number`      | Высота дерева                                                                                          |
+| openItems       | `ITreeData[]` | Свойство, отвечающее контроль над открытыми элементами дерева                                          |
+| virtual         | `boolean`     | Флаг добавления виртуального скролла                                                                   |
+| openItemsChange | `function`    | Переданная функция срабатывает при открытии/закрытии элемента дерева и отдает открытые элементы дерева |