@tetacom/ng-components 1.1.30 → 1.1.32

package/docs/checkboxDocs.mdx

@@ -0,0 +1,108 @@
+import {Meta} from "@storybook/blocks";
+import checkboxStories from "../src/component/checkbox/Checkbox.stories";
+
+<Meta of={checkboxStories}/>
+
+<div class='column gap-24'>
+  <h1>Чекбоксы</h1>
+  <div class='column'>
+    <p>Checkbox (чекбокс) — компонент, который позволяет пользователю выбрать опцию и может находится в состояниях
+      «выбран» (True) и «не выбран» (False).</p>
+    <p>Основной призыв к действию. Предназначены для выполнения какого-либо действия в системе. </p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Чекбоксы используются когда на странице есть список опций, из которых пользователь может выбрать любое
+      количество. В основном, чекбоксы не зависят друг от друга.</p>
+    <p>Не путать с Toggle, так как если нужно переключить режим, выбрать тему или же сделать какое-то внушительное
+      изменение в интерфейсе, лучше использовать его.</p>
+  </div>
+  <div class='column'>
+    <h3>Состояние выбора чекбоксов</h3>
+    <div>
+      <p>При клике пользователь переводит чекбокс из состояния False в Active. Undefined — неопределенное состояние и
+        используется только у родительских чекбоксов.</p>
+      <p>По дефолту включены состояния чекбокса <code>true</code> и <code>false</code>. Для включения состояния undefined нужно передать свойства <code>binary</code> и <code>allowNull</code> со значением <code>true</code></p>
+    </div>
+  </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>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>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>labelPosition</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>allowNull</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство отвечающее за реагирование на null</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>binary</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство отвечающее за тип вводимых данных. Если <code>boolean</code>, то свойство должно быть <code>true</code></p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/chipDocs.mdx

@@ -0,0 +1,17 @@
+import {Meta} from "@storybook/blocks";
+import ChipStories from "../src/component/chip/Chip.stories";
+
+<Meta of={ChipStories}/>
+
+<div class='column gap-24'>
+  <h1>Чипы</h1>
+  <div class='column'>
+    <p>Чипы — это компактные элементы, которые представляют атрибут или действие.</p>
+    <p>Чипы позволяют пользователям получать информацию, делать выбор, фильтровать контент или запускать действия.</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для того чтобы сделать чип, нужно к блоку добавить CSS класс <code>chip</code></p>
+    <p>Если помимо текста в чипе нужна кнопка (допустим кнопка с иконкой closeBig), то она должна идти после текста</p>
+  </div>
+</div>

package/docs/datePickerDocs.mdx

@@ -0,0 +1,230 @@
+import {Meta} from "@storybook/blocks";
+import DatePickerStories from "../src/component/date-picker/date-picker.stories";
+
+<Meta of={DatePickerStories}/>
+
+<div class='column gap-24'>
+  <h1>DatePicker/DateRange</h1>
+  <div class='column'>
+    <p>DatePicker (выбор даты) — компонент, который помогает вводить дату с клавиатуры или выбирать её с помощью мыши.</p>
+    <p>В строке можно вручную ввести дату в формате дд.мм.гггг достаточно лишь воспользоваться клавиатурой. Нажатие на
+      строку выбора даты/кнопки периода вызывается блок календаря. Блок календаря состоит из специальных элементов
+      (Calendar_Item).</p>
+    <p>Также можно добавить выбор времени, при надобности.В этом случае формат даты будет следующим : дд.мм.гггг, чч:мм</p>
+    <p>DateRange — компонент,который позволяет выбрать отрезок дат (от и до). В строке также можно вводить отрезок дат в формате дд.мм.гггг - дд.мм.гггг</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Datepicker:</p>
+    <ul>
+      <li>Запись в строке происходит в формате дд.мм.гггг;</li>
+      <li>Внутри datePicker-a присутствует mothPicker и yearPicker;</li>
+      <li>В него можно передавать дату в формате string,Date и number(new Date().getTime());</li>
+      <li>Для отображения времени нужно передать <code>[showTime]="true"</code>;</li>
+      <li>Если нужно чтобы datePicker не мог быть пустым, то нужно передать <code>[allowNull]="false"</code>;</li>
+    </ul>
+    <p>DateRange:</p>
+    <ul>
+      <li>Запись в строке происходит в формате дд.мм.гггг-дд.мм.гггг;</li>
+      <li>Внутри dateRange-a присутствует yearPicker;</li>
+      <li>Переключение месяцев происходит посредством стрелочек;</li>
+      <li>Он принимает в себя данные в формате <code>&#123; from:string | Date | number, to:string | Date | number &#125;</code></li>
+      <li>Если нужно чтобы dateRange не мог быть пустым, то нужно передать <code>[allowNull]="false"</code></li>
+    </ul>
+    <p>Также можно передать свойста minDate и maxDate для ограничения по выбору дат.</p>
+  </div>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <h4>Общие свойства у teta-date-picker и teta-date-range </h4>
+    <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>locale</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'en'|'ru'</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>minDate</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string | Date | number</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Минимальная для выбора дата</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>maxDate</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string | Date | number</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Максимальная для выбора дата</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>align</p>
+        </td>
+        <td class='text-align-center'>
+          <code>Align</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Позиционирование содержимого дропдауна по горизонтали</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>verticalAlign</p>
+        </td>
+        <td class='text-align-center'>
+          <code>VerticalAlign</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Позиционирование содержимого дропдауна по вертикали</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>date</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string | Date | number</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>selectDate</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>allowNull</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>invalid</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>backdrop</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <h4>teta-date-picker</h4>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>showTime</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство, которое добавляет выбор времени</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <h4>teta-date-range</h4>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>date</p>
+        </td>
+        <td class='text-align-center'>
+          <code>DateFromToModel</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Другой способ передачи данных в пикер (помимо ngModel)</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>

package/docs/delimiterDocs.mdx

@@ -0,0 +1,96 @@
+import {Meta} from "@storybook/blocks";
+import DelimiterStories from "../src/component/delimiter/Delimiter.stories";
+
+<Meta of={DelimiterStories}/>
+
+<div class='column gap-24'>
+  <h1>Разделитель</h1>
+  <div class='column'>
+    <p>Delimiter (разделитель) — компонент, который позволяет разделять элементы между друг другом.</p>
+    <p>Компонент применяется как в горизонтальном, так и в вертикальном вариантах. </p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Необходим для разграничения групп кнопок, в большинстве случаев им разделяются кнопки только с иконками.</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>direction</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'vertical' | 'horizontal'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Направление разделителя</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>width</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>verticalMargin</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>horizontalMargin</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>palette</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/dropdownDocs.mdx

@@ -0,0 +1,143 @@
+import {Meta} from "@storybook/blocks";
+import DropdownStories from "../src/component/dropdown/Dropdown.stories";
+
+<Meta of={DropdownStories}/>
+
+<div class='column gap-24'>
+  <h1>Dropdown</h1>
+  <div class='column'>
+    <p>Dropdown — элемент позволяющий выбрать одно из нескольких заранее определённых значений параметра.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Когда дропдаун неактивен, отображается только выбранное значение или их количество. При нажатии на него список раскрывается,
+      отображая все возможные значения. После выбора список возможных значений исчезает.</p>
+  </div>
+  <h3>Как пользоваться компонентом</h3>
+  <div class='column'>
+    <p>Для начала нужно создать <code> &lt;teta-dropdown&gt;</code>, и в него прокинуть элементы с директивой tetaDropdownHead и tetaDropdownContent</p>
+    <p>Директива <code>tetaDropdownHead</code> отвечает за отображение дочерних элементов в шапке дропдауна.</p>
+    <p>Содержимое блока с директивой <code>tetaDropdownContent</code> используется к качестве элементов выпадающего списка.</p>
+  </div>
+  <h3>Примеры кода</h3>
+  <p><pre><code>&lt;teta-dropdown&gt;
+    &nbsp;&nbsp;&lt;div tetaDropdownHead&gt;Heading 1&lt;/div&gt;
+    &nbsp;&nbsp;&lt;div tetaDropdownContent&gt;
+    &nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-2"&gt;I am the content 1&lt;/div&gt;
+   &nbsp;&nbsp;&lt;/div&gt;
+    &lt;/teta-dropdown&gt;</code></pre></p>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <h4>teta-dropdown</h4>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>align</p>
+        </td>
+        <td class='text-align-center'>
+          <code>Align</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Позиционирование содержимого дропдауна по горизонтали</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>verticalAlign</p>
+        </td>
+        <td class='text-align-center'>
+          <code>VerticalAlign</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>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>appendToBody</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Позволяет прикрепить содержимое дропдауна не к элементу с tetaDropdownHead, а к <code>body</code></p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>autoClose</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>autoCloseIgnore</p>
+        </td>
+        <td class='text-align-center'>
+          <code>AutoCloseIgnoreCase[]</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство, которое игнорирует указанные причины закрытия дропдауна</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>backdrop</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/expandCardlDocs.mdx

@@ -0,0 +1,56 @@
+import {Meta} from "@storybook/blocks";
+import ExpandStories from "../src/component/expand-card/expand.stories";
+
+<Meta of={ExpandStories}/>
+
+<div class='column gap-24'>
+  <h1>ExpandCard</h1>
+  <div class='column'>
+    <p>ExpandCard обычно используется для создания блока с настройками для чего-либо.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>ExpandCard позволяет скрывать содержимое при клике на соответствующую кнопку.</p>
+  </div>
+  <h3>Как пользоваться компонентом</h3>
+  <div class='column'>
+    <p>Нужно создать <code> &lt;teta-expand-item&gt;</code>, внуть передаем блоки с
+      <code>ngProjectAs</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>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>
+    </tbody>
+  </table>
+</div>
+</div>