@tetacom/ng-components 1.1.30 → 1.1.32

package/docs/expandPanelDocs.mdx

@@ -0,0 +1,105 @@
+import {Meta} from "@storybook/blocks";
+import ExpandPanelStories from "../src/component/expand-panel/ExpandPanel.stories";
+
+<Meta of={ExpandPanelStories}/>
+
+<div class='column gap-24'>
+  <h1>ExpandPanel</h1>
+  <div class='column'>
+    <p>ExpandPanel обычно используется для фильтров,отображения блоков, которые нужно скрывать, а также при большом
+      количестве элементов в одной строчке</p>
+  </div>
+  <h3>Функции</h3>
+  <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>
+  <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>
+</div>

package/docs/fileAreaDocs.mdx

@@ -0,0 +1,74 @@
+import {Meta} from "@storybook/blocks";
+import FileStories from "../src/component/file-upload/File.stories";
+
+<Meta of={FileStories}/>
+
+<div class='column gap-24'>
+  <h1>FileArea</h1>
+  <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>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <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>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/iconDocs.mdx

@@ -0,0 +1,89 @@
+import {Meta} from "@storybook/blocks";
+import IconStories from "../src/component/icon/Icon.stories";
+
+<Meta of={IconStories}/>
+
+<div class='column gap-24'>
+  <h1>Иконки</h1>
+  <div class='column'>
+    <p>Иконка — элемент графического интерфейса, небольшая картинка, обозначающая приложение, файл, каталог и т. п</p>
+    <p>В библиотеке существует два вида иконок: цветные и без заливки</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.</p>
+    <p>Используются в различных компонентах:</p>
+    <ul>
+      <li>Кнопки</li>
+      <li>Инпуты</li>
+      <li>Селекты</li>
+      <li>Аккордеонах и т.п.</li>
+    </ul>
+  </div>
+  <h3>Как использовать</h3>
+  <div>
+    <p>Для создание иконки используется <code>teta-icon</code> и аттрибут <code>name</code> для указания названия иконки.</p>
+    <p>Для того, чтобы инконки загрузились в проект, необходимо в родительском компоненте или в корневом элементе добавить директиву <code>tetaIconSprite</code> с указанием пакета с нужными иконками.</p>
+    <p>На данный момент есть следующие пакеты с иконками:</p>
+    <ul>
+      <li>'assets/icons.svg'- обычые иконки без заливки</li>
+      <li>'assets/color-icons.svg'- цветные иконки</li>
+      <li>'assets/file-icons.svg'- иконки с типами файлов</li>
+      <li>'assets/lithotype-icons.svg'- иконки литотипов</li>
+    </ul>
+  </div>
+  <h3>Пример кода</h3>
+  <p>
+    <pre><code>&lt;div [tetaIconSprite]="'assets/icons.svg'" class="column bg-global-bgcard font-body-3 padding-3"&gt;
+      &nbsp;&nbsp;&lt;teta-icon name='edit' &gt;
+      &nbsp;&nbsp;&lt;/teta-icon&gt;
+      &nbsp;&lt;/div&gt;</code></pre>
+  </p>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <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>
+      <tr>
+        <td  class='text-align-center'>
+          <p>size</p>
+        </td>
+        <td class='text-align-center'>
+          <code>TetaSize</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Размер иконки</p>
+        </td>
+      </tr>
+      <tr>
+        <td  class='text-align-center'>
+          <p>palette</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Принимает название палитры и окращивает в 50-й оттенок этой палитры</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/inputDocs.mdx

@@ -0,0 +1,92 @@
+import {Meta} from "@storybook/blocks";
+import InputStories from "../src/component/input/Input.stories";
+
+<Meta of={InputStories}/>
+
+<div class='column gap-24'>
+  <h1>Инпут</h1>
+  <div class='column'>
+    <p>Input (поле ввода) — компонент, который позволяет указать значение с помощью клавиатуры.</p>
+    <p>В библиотеке существует два вида иконок: цветные и без заливки</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.</p>
+    <p>Используются в различных компонентах:</p>
+    <ul>
+      <li>Кнопки</li>
+      <li>Инпуты</li>
+      <li>Селекты</li>
+      <li>Аккордеонах и т.п.</li>
+    </ul>
+  </div>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <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'>
+            <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>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/listDocs.mdx

@@ -0,0 +1,17 @@
+import {Meta} from "@storybook/blocks";
+import ListStories from "../src/component/list/List.stories";
+
+<Meta of={ListStories}/>
+
+<div class='column gap-24'>
+  <h1>Лист</h1>
+  <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>
+</div>

package/docs/messageDocs.mdx

@@ -0,0 +1,69 @@
+import {Meta} from "@storybook/blocks";
+import MessageStories from "../src/component/message/Message.stories";
+
+<Meta of={MessageStories}/>
+
+<div class='column gap-24'>
+  <h1>Тост</h1>
+  <div class='column'>
+    <p>Toast (тост) — короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Используйте тост, если нет возможности сообщить обратную связь. В проектах выпрыгивает из правого нижнего угла.</p>
+    <p>Тост может показывается несколько секунд или бесконечно. Этот компонент так же может содержать кнопки, чтобы закрыть или же перейти к объекту, к которому применима обратная связь.</p>
+  </div>
+    <h3>Виды тостов</h3>
+    <div>
+      <p>Есть несколько видов тостов. Они различаются своими State Lines.</p>
+        <ul>
+          <li>Default (Серый)</li>
+          <li>Success (Зеленый)</li>
+          <li>Error (Красный)</li>
+          <li>Warning (Желтый)</li>
+        </ul>
+    </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент сервис <code>messageService</code> и использовать метод <code>add</code>. </p>
+    <p> Этот метод ждет объект типа <code>Message</code>, который содержит следующие свойства:</p>
+    <ul>
+      <li>name- индификатор для тоста, который используется для его скрытия</li>
+      <li>title- текст в заголовке тоста</li>
+      <li>text- текст в теле тоста</li>
+      <li>duration - длительность отобращения тоста в миллисекундах</li>
+      <li>infinite - бесконечная длительность отображения тоста</li>
+      <li>className - дополнительные классы для тоста</li>
+      <li>palette - цвет левой границы</li>
+      <li>template - возможность указать свой шаблон тела тоста</li>
+      <li>viewType- округление тоста</li>
+    </ul>
+  <p>Также есть возможность скрыть тост медотом <code>clearMessages</code></p>
+  </div>
+  <h3>Виды тостов</h3>
+  <div>
+    <p>Есть несколько видов тостов. Они различаются своими State Lines.</p>
+    <ul>
+      <li>Default (Серый)</li>
+      <li>Success (Зеленый)</li>
+      <li>Error (Красный)</li>
+      <li>Warning (Жельтый)</li>
+    </ul>
+  </div>
+  <h3>Пример кода</h3>
+  <div>
+    <p>
+    <pre><code>addMessage()&#123;
+      &nbsp;&nbsp;this.messageService.add(
+      &nbsp;&nbsp;&nbsp;new Message(&#123;
+      &nbsp;&nbsp;&nbsp;&nbsp;name:'example',
+      &nbsp;&nbsp;&nbsp;&nbsp;title:'Ошибка',
+      &nbsp;&nbsp;&nbsp;&nbsp;text:'Перелогиньтесь',
+      &nbsp;&nbsp;&nbsp;&nbsp;palette: 'red',
+      &nbsp;&nbsp;&nbsp;&nbsp;duration: 5000,
+      &nbsp;&nbsp;&nbsp;&#125;);
+      &nbsp;&nbsp;)
+      &nbsp;&#125;</code></pre>
+    </p>
+  </div>
+</div>

package/docs/modalDocs.mdx

@@ -0,0 +1,63 @@
+import {Meta} from "@storybook/blocks";
+import ModalStories from "../src/component/modal/Modal.stories";
+
+<Meta of={ModalStories}/>
+
+<div class='column gap-24'>
+  <h1>Модальное окно</h1>
+  <div class='column'>
+    <p>Modal Window или Pop Up (модальное окно) — это эмуляция диалогового окна браузера, появляющегося поверх страницы
+      в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Используйте модальное окно для второстепенного содержимого страниц, которое требуется только в некоторых случаях,
+      или для того, чтобы сосредоточить внимание пользователя на совершаемом действии. Как правило, это настройки,
+      создание новых документов, заполнение небольших форм.</p>
+    <p>Не используйте модальное окно для больших форм. Большие формы — это формы которые не помещаются в два экрана
+      монитора. </p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент
+      сервис <code>modalService</code> и использовать метод <code>create</code>, передав компонент, который будет
+      помещен в модалку и необходимые свойсва.</p>
+    <p>Этот метод вернет объект со свойствами: <code>close</code>- функция, которая принимает причину закрытия модалки и закрывает
+      ее, <code>onClose</code>- поток, который срабатывает при закрытии модалки и отдает объект с причиной закрытия модалки и
+      данными, которые мы вернули из модалки</p>
+    <p>Внутри компонента модалки мы привязываем события для закрытия модалки (допустим при нажатии на кнопку). Для этого
+      нужно внедрить сервис <code>CurrentModal</code> и вызвать метод close и передать в него объект со свойствами:</p>
+    <ul>
+      <li><code>reason</code> - принимает номер причины закрытия модалки (ModalCloseReason)</li>
+      <li><code>data</code> - данные, которые нужно вывести из модалки</li>
+    </ul>
+    <p></p>
+    <p>Также есть возможность скрыть все открытые модалки медотом <code>closeAll</code> из <code>modalService</code></p>
+  </div>
+  <h3>Пример кода</h3>
+  <div>
+    <p>Создание модалки</p>
+    <p>
+    <pre><code>createModal(name:string,description:string)&#123;
+      &nbsp;&nbsp;const modal=this.modalService.create(Component,&#123;name,description&#125;)
+      &nbsp;&nbsp;modal.onClose.pipe(
+      &nbsp;&nbsp;&nbsp;takeWhile(()=>this.alive),
+      &nbsp;&nbsp;&nbsp;filter((data)=>data.reason===ModalCloseReason.resolve),
+      &nbsp;&nbsp;&nbsp;tap((data)=>&#123;console.log(data.data.description)&#125;)
+      &nbsp;&nbsp;).subscribe()
+      &nbsp;&#125;</code></pre>
+    </p>
+    <p>Закрытие модалки</p>
+    <p>
+    <pre><code>closeModal(description:string)&#123;
+      &nbsp;&nbsp;this.currentModal.close(
+      &nbsp;&nbsp;&nbsp;&#123;
+      &nbsp;&nbsp;&nbsp;&nbsp;reason:ModalCloseReason.resolve,
+      &nbsp;&nbsp;&nbsp;&nbsp;data:&#123;description&#125;,
+      &nbsp;&nbsp;&nbsp;&#125;
+      &nbsp;&nbsp;)
+      &nbsp;&#125;</code></pre>
+    </p>
+
+  </div>
+</div>

package/docs/progressBarDocs.mdx

@@ -0,0 +1,74 @@
+import {Meta} from "@storybook/blocks";
+import ProgressBarStories from "../src/component/progress-bar/ProgressBar.stories";
+
+<Meta of={ProgressBarStories}/>
+
+<div class='column gap-24'>
+  <h1>Слайдер</h1>
+  <div class='column'>
+    <p>Progress bars (Слайдер) — это элемент управления страницей, который позволяет пользователю выбирать значение из
+      определенного диапазона. Он представляет собой горизонтальную полосу, которую можно перемещать влево или вправо,
+      чтобы выбрать значение в заданном диапазоне. Слайдеры часто используются для настройки параметров, выбора числовых
+      значений (например, громкости,времени или яркости) или фильтрации данных.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Slider выполняет следующие основные функции:</p>
+    <ul>
+      <li>Выбор значения в заданном диапазоне: Слайдер позволяет пользователю выбирать значение из определенного числового диапазона.</li>
+      <li>Отображение текущего значения: Слайдер отображает текущее выбранное значение, что позволяет пользователям видеть, какое значение они выбрали</li>
+      <li>Изменение значения в реальном времени: Когда пользователь перемещает бегунок слайдера, значение обновляется в реальном времени, что делает процесс выбора более наглядным и удобным.</li>
+      <li>Вы можете настроить шаг, с которым изменяется значение при перемещении бегунка слайдера.</li>
+    </ul>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для создания слайдера существует компонент <code>teta-progress-bar</code>. Для передачи данных в него нужно использовать <code>ngModel</code></p>
+    <p>Также в слайдере есть возможность настройки "шага". Это происходит с помощью передачи в него свойства step</p>
+  </div>
+  <h3>Свойства</h3>
+  <table>
+    <thead>
+    <tr>
+      <th>Свойство</th>
+      <th>Tип</th>
+      <th>Описание</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td class='text-align-center'>
+        <p>step</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>min</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>max</p>
+      </td>
+      <td class='text-align-center'>
+        <code>number</code>
+      </td>
+      <td class='text-align-center'>
+        <p>Максимальное значение слайдера</p>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>