@tetacom/ng-components 1.4.4 → 1.4.5

package/docs/expandPanelDocs.mdx

@@ -1,105 +1,117 @@
-import {Meta} from "@storybook/blocks";
-import ExpandPanelStories from "../src/component/expand-panel/ExpandPanel.stories";
+import { Meta } from '@storybook/blocks';
+import ExpandPanelStories from '../src/component/expand-panel/ExpandPanel.stories';
 
-<Meta of={ExpandPanelStories}/>
+<Meta of={ExpandPanelStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>ExpandPanel</h1>
-  <div class='column'>
-    <p>ExpandPanel обычно используется для фильтров,отображения блоков, которые нужно скрывать, а также при большом
-      количестве элементов в одной строчке</p>
+  <div class="column">
+    <p>
+      ExpandPanel обычно используется для фильтров,отображения блоков, которые нужно скрывать, а также при большом
+      количестве элементов в одной строчке
+    </p>
   </div>
   <h3>Функции</h3>
-  <div class='column'>
+  <div class="column">
     <p>ExpandPanel позволяет скрывать содержимое при клике на соответствующую кнопку.</p>
     <p>При скрытии содержимого, название меняет написание на горизонтальное</p>
   </div>
   <h3>Как пользоваться компонентом</h3>
-  <div class='column'>
-    <p>Создаем <code> &lt;teta-expand-panel&gt;</code>, внуть передаем блоки с
-      директивами <code>tetaExpandPanelHead</code> и <code>tetaExpandPanelContent</code>.</p>
-    <p>Директива <code>tetaExpandPanelHead</code> отвечает за отображение дочерних элементов в шапке элемента.</p>
-    <p>Блок с директивой <code>tetaExpandPanelContent</code> используется как содержимое раскрывающейся панели.</p>
+  <div class="column">
+    <p>
+      Создаем <code> &lt;teta-expand-panel&gt;</code>, внуть передаем блоки с директивами{' '}
+      <code>tetaExpandPanelHead</code> и <code>tetaExpandPanelContent</code>.
+    </p>
+    <p>
+      Директива <code>tetaExpandPanelHead</code> отвечает за отображение дочерних элементов в шапке элемента.
+    </p>
+    <p>
+      Блок с директивой <code>tetaExpandPanelContent</code> используется как содержимое раскрывающейся панели.
+    </p>
   </div>
   <h3>Примеры кода</h3>
   <p>
-    <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;
-    &nbsp;&lt;teta-expand-panel placeholder='Фильтры' &gt;
-      &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelHead&gt;Фильтры&lt;/ng-template&gt;
-      &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelContent&gt;
-        &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-2"&gt;Фильтр1&lt;/div&gt;
-      &nbsp;&nbsp;&nbsp;&lt;/ng-template&gt;
-    &nbsp;&lt;/teta-expand-panel&gt;
-    &lt;/div&gt;</code></pre>
-</p>
-  <div class='column'>
-  <h3>Свойства</h3>
-  <h4>teta-expand-panel</h4>
-  <table>
-    <thead>
-    <tr>
-      <th>Свойство</th>
-      <th>Tип</th>
-      <th>Описание</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <td class='text-align-center'>
-        <p>placeholder</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>open</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>openChange</p>
-      </td>
-      <td class='text-align-center'>
-        <code>function</code>
-      </td>
-      <td class='text-align-center'>
-        <p>Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.</p>
-      </td>
-    </tr>
-    <tr>
-      <td class='text-align-center'>
-        <p>direction</p>
-      </td>
-      <td class='text-align-center'>
-        <code>'left'|'right'</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>
-    </tbody>
-  </table>
-</div>
+    <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; &nbsp;&lt;teta-expand-panel placeholder='Фильтры' &gt;
+        &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelHead&gt;Фильтры&lt;/ng-template&gt;
+        &nbsp;&nbsp;&nbsp;&lt;ng-template tetaExpandPanelContent&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3
+        padding-h-2"&gt;Фильтр1&lt;/div&gt; &nbsp;&nbsp;&nbsp;&lt;/ng-template&gt; &nbsp;&lt;/teta-expand-panel&gt;
+        &lt;/div&gt;
+      </code>
+    </pre>
+  </p>
+  <div class="column">
+    <h3>Свойства</h3>
+    <h4>teta-expand-panel</h4>
+    <table>
+      <thead>
+        <tr>
+          <th>Свойство</th>
+          <th>Tип</th>
+          <th>Описание</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="text-align-center">
+            <p>placeholder</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>open</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>openChange</p>
+          </td>
+          <td class="text-align-center">
+            <code>function</code>
+          </td>
+          <td class="text-align-center">
+            <p>
+              Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td class="text-align-center">
+            <p>direction</p>
+          </td>
+          <td class="text-align-center">
+            <code>'left'|'right'</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>
+      </tbody>
+    </table>
+  </div>
 </div>

package/docs/fileAreaDocs.mdx

@@ -1,73 +1,78 @@
-import {Meta} from "@storybook/blocks";
-import FileStories from "../src/component/file-upload/File.stories";
+import { Meta } from '@storybook/blocks';
+import FileStories from '../src/component/file-upload/File.stories';
 
-<Meta of={FileStories}/>
+<Meta of={FileStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>FileArea</h1>
-  <div class='column'>
-    <p>FileArea - область в которой работает перетаскивания туда файлов для загрузки(Drag and Drop). Также можно
-      кликнуть на специальную кнопку, чтобы указать путь к файлу и загрузить его.</p>
+  <div class="column">
+    <p>
+      FileArea - область в которой работает перетаскивания туда файлов для загрузки(Drag and Drop). Также можно кликнуть
+      на специальную кнопку, чтобы указать путь к файлу и загрузить его.
+    </p>
   </div>
   <h3>Как пользоваться компонентом</h3>
-  <div class='column'>
-    <p>Создаем <code> &lt;teta-file-upload-area&gt;</code>, внуть передаем внутрь элементы, которые будут отображаться в нем.</p>
+  <div class="column">
+    <p>
+      Создаем <code> &lt;teta-file-upload-area&gt;</code>, внуть передаем внутрь элементы, которые будут отображаться в
+      нем.
+    </p>
   </div>
-  <div class='column'>
+  <div class="column">
     <h3>Свойства</h3>
     <table>
       <thead>
-      <tr>
-        <th>Свойство</th>
-        <th>Tип</th>
-        <th>Описание</th>
-      </tr>
+        <tr>
+          <th>Свойство</th>
+          <th>Tип</th>
+          <th>Описание</th>
+        </tr>
       </thead>
       <tbody>
-      <tr>
-        <td class='text-align-center'>
-          <p>upload</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>accept</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>multiple</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>
+        <tr>
+          <td class="text-align-center">
+            <p>upload</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>accept</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>multiple</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>

package/docs/inputDocs.mdx

@@ -1,17 +1,20 @@
-import {Meta} from "@storybook/blocks";
-import InputStories from "../src/component/input/Input.stories";
+import { Meta } from '@storybook/blocks';
+import InputStories from '../src/component/input/Input.stories';
 
-<Meta of={InputStories}/>
+<Meta of={InputStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Инпут</h1>
-  <div class='column'>
+  <div class="column">
     <p>Input (поле ввода) — компонент, который позволяет указать значение с помощью клавиатуры.</p>
     <p>В библиотеке существует два вида иконок: цветные и без заливки</p>
   </div>
   <h3>Как использовать</h3>
-  <div class='column'>
-    <p>Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.</p>
+  <div class="column">
+    <p>
+      Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или
+      категории, не используя текст.
+    </p>
     <p>Используются в различных компонентах:</p>
     <ul>
       <li>Кнопки</li>
@@ -20,72 +23,72 @@ import InputStories from "../src/component/input/Input.stories";
       <li>Аккордеонах и т.п.</li>
     </ul>
   </div>
-  <div class='column'>
+  <div class="column">
     <h3>Свойства</h3>
     <table>
       <thead>
-      <tr>
-        <th>Свойство</th>
-        <th>Tип</th>
-        <th>Описание</th>
-      </tr>
+        <tr>
+          <th>Свойство</th>
+          <th>Tип</th>
+          <th>Описание</th>
+        </tr>
       </thead>
       <tbody>
-      <tr>
-        <td  class='text-align-center'>
-          <p>viewType</p>
-        </td>
-        <td class='text-align-center'>
-          <code>'rounded'|'circle'|'brick'</code>
-        </td>
-        <td  class='text-align-center'>
+        <tr>
+          <td class="text-align-center">
+            <p>viewType</p>
+          </td>
+          <td class="text-align-center">
+            <code>'rounded'|'circle'|'brick'</code>
+          </td>
+          <td class="text-align-center">
             <p>Свойство округления компонента.</p>
-        </td>
-      </tr>
-      <tr>
-        <td  class='text-align-center'>
-          <p>size</p>
-        </td>
-        <td class='text-align-center'>
-          <code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</code>
-        </td>
-        <td  class='text-align-center'>
-          <p>Размер компонента</p>
-        </td>
-      </tr>
-      <tr>
-        <td  class='text-align-center'>
-          <p>photo</p>
-        </td>
-        <td class='text-align-center'>
-          <code>'string | ArrayBuffer'</code>
-        </td>
-        <td  class='text-align-center'>
-          <p>Изображение для фона компонента</p>
-        </td>
-      </tr>
-      <tr>
-        <td  class='text-align-center'>
-          <p>id</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>name</p>
-        </td>
-        <td class='text-align-center'>
-          <code>'string'</code>
-        </td>
-        <td  class='text-align-center'>
-          <p>Отображаемый текст</p>
-        </td>
-      </tr>
+          </td>
+        </tr>
+        <tr>
+          <td class="text-align-center">
+            <p>size</p>
+          </td>
+          <td class="text-align-center">
+            <code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</code>
+          </td>
+          <td class="text-align-center">
+            <p>Размер компонента</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="text-align-center">
+            <p>photo</p>
+          </td>
+          <td class="text-align-center">
+            <code>'string | ArrayBuffer'</code>
+          </td>
+          <td class="text-align-center">
+            <p>Изображение для фона компонента</p>
+          </td>
+        </tr>
+        <tr>
+          <td class="text-align-center">
+            <p>id</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>name</p>
+          </td>
+          <td class="text-align-center">
+            <code>'string'</code>
+          </td>
+          <td class="text-align-center">
+            <p>Отображаемый текст</p>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>

package/docs/listDocs.mdx

@@ -1,17 +1,23 @@
-import {Meta} from "@storybook/blocks";
-import ListStories from "../src/component/list/List.stories";
+import { Meta } from '@storybook/blocks';
+import ListStories from '../src/component/list/List.stories';
 
-<Meta of={ListStories}/>
+<Meta of={ListStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Лист</h1>
-  <div class='column'>
+  <div class="column">
     <p>Лист - список элементов идущих подряд.</p>
     <p>Лист обычно используется в дропдаунах, селектах и в деревьях</p>
   </div>
   <h3>Как использовать</h3>
-  <div class='column'>
-    <p>Сначала необходимо создать блок с классом <code>list</code> внутрь передать несколько элементов с классом <code>list-item</code></p>
-    <p>Если нужно чтобы список элементов был интерактивным, элементам списка необходимо дополнительно добавить класс <code>list-item_interactive</code></p>
+  <div class="column">
+    <p>
+      Сначала необходимо создать блок с классом <code>list</code> внутрь передать несколько элементов с классом{' '}
+      <code>list-item</code>
+    </p>
+    <p>
+      Если нужно чтобы список элементов был интерактивным, элементам списка необходимо дополнительно добавить класс{' '}
+      <code>list-item_interactive</code>
+    </p>
   </div>
 </div>