@tetacom/ng-components 1.4.3 → 1.4.5

package/docs/messageDocs.mdx

@@ -1,32 +1,46 @@
-import {Meta} from "@storybook/blocks";
-import MessageStories from "../src/component/message/Message.stories";
+import { Meta } from '@storybook/blocks';
+import MessageStories from '../src/component/message/Message.stories';
 
-<Meta of={MessageStories}/>
+<Meta of={MessageStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Тост</h1>
-  <div class='column'>
-    <p>Toast (тост) — короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.</p>
+  <div class="column">
+    <p>
+      Toast (тост) — короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его
+      команды.
+    </p>
   </div>
   <h3>Функции</h3>
-  <div class='column'>
-    <p>Используйте тост, если нет возможности сообщить обратную связь. В проектах выпрыгивает из правого нижнего угла.</p>
-    <p>Тост может показывается несколько секунд или бесконечно. Этот компонент так же может содержать кнопки, чтобы закрыть или же перейти к объекту, к которому применима обратная связь.</p>
+  <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>
-      <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>
+  <div class="column">
+    <p>
+      Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент сервис <code>messageService</code> и
+      использовать метод <code>add</code>.{' '}
+    </p>
+    <p>
+      {' '}
+      Этот метод ждет объект типа <code>Message</code>, который содержит следующие свойства:
+    </p>
     <ul>
       <li>name- индификатор для тоста, который используется для его скрытия</li>
       <li>title- текст в заголовке тоста</li>
@@ -38,7 +52,9 @@ import MessageStories from "../src/component/message/Message.stories";
       <li>template - возможность указать свой шаблон тела тоста</li>
       <li>viewType- округление тоста</li>
     </ul>
-  <p>Также есть возможность скрыть тост медотом <code>clearMessages</code></p>
+    <p>
+      Также есть возможность скрыть тост медотом <code>clearMessages</code>
+    </p>
   </div>
   <h3>Виды тостов</h3>
   <div>
@@ -53,17 +69,14 @@ import MessageStories from "../src/component/message/Message.stories";
   <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>
+      <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/progressBarDocs.mdx

@@ -1,74 +1,88 @@
-import {Meta} from "@storybook/blocks";
-import ProgressBarStories from "../src/component/progress-bar/ProgressBar.stories";
+import { Meta } from '@storybook/blocks';
+import ProgressBarStories from '../src/component/progress-bar/ProgressBar.stories';
 
-<Meta of={ProgressBarStories}/>
+<Meta of={ProgressBarStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Слайдер</h1>
-  <div class='column'>
-    <p>Progress bars (Слайдер) — это элемент управления страницей, который позволяет пользователю выбирать значение из
+  <div class="column">
+    <p>
+      Progress bars (Слайдер) — это элемент управления страницей, который позволяет пользователю выбирать значение из
       определенного диапазона. Он представляет собой горизонтальную полосу, которую можно перемещать влево или вправо,
       чтобы выбрать значение в заданном диапазоне. Слайдеры часто используются для настройки параметров, выбора числовых
-      значений (например, громкости,времени или яркости) или фильтрации данных.</p>
+      значений (например, громкости,времени или яркости) или фильтрации данных.
+    </p>
   </div>
   <h3>Функции</h3>
-  <div class='column'>
+  <div class="column">
     <p>Slider выполняет следующие основные функции:</p>
     <ul>
-      <li>Выбор значения в заданном диапазоне: Слайдер позволяет пользователю выбирать значение из определенного числового диапазона.</li>
-      <li>Отображение текущего значения: Слайдер отображает текущее выбранное значение, что позволяет пользователям видеть, какое значение они выбрали</li>
-      <li>Изменение значения в реальном времени: Когда пользователь перемещает бегунок слайдера, значение обновляется в реальном времени, что делает процесс выбора более наглядным и удобным.</li>
+      <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>
+  <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>
+      <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>
+      <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>

package/docs/propertyGridDocs.mdx

@@ -1,135 +1,193 @@
-import {Meta} from "@storybook/blocks";
-import PropertyGridStories from "../src/component/property-grid/PropertyGrid.stories";
+import { Meta } from '@storybook/blocks';
+import PropertyGridStories from '../src/component/property-grid/PropertyGrid.stories';
 
-<Meta of={PropertyGridStories}/>
+<Meta of={PropertyGridStories} />
 
-<div class='column gap-24'>
+<div class="column gap-24">
   <h1>Property grid</h1>
-  <div class='column'>
-    <p>Property grid (сетка свойств) - это элемент пользовательского интерфейса в программировании, который предоставляет способ отображения и редактирования свойств объектов. Это особенно полезно при создании приложений с графическим интерфейсом, где пользователь может настраивать параметры объектов или элементов интерфейса.</p>
+  <div class="column">
+    <p>
+      Property grid (сетка свойств) - это элемент пользовательского интерфейса в программировании, который предоставляет
+      способ отображения и редактирования свойств объектов. Это особенно полезно при создании приложений с графическим
+      интерфейсом, где пользователь может настраивать параметры объектов или элементов интерфейса.
+    </p>
   </div>
   <h3>Как использовать</h3>
-  <div class='column'>
-    <p>Для начала нужно создать <code> &lt;teta-property-grid&gt;</code>.</p>
+  <div class="column">
+    <p>
+      Для начала нужно создать <code> &lt;teta-property-grid&gt;</code>.
+    </p>
     <p>Для создания сетки свойств в компонент необходимо передать свойства:</p>
     <ul>
-      <li><code>item</code> - данные для формирования сетки.</li>
-      <li><code>columns</code> - каркас данных для сетки.</li>
+      <li>
+        <code>item</code> - данные для формирования сетки.
+      </li>
+      <li>
+        <code>columns</code> - каркас данных для сетки.
+      </li>
     </ul>
-    <p><code>columns</code> принимает в себя массив объектов типа <code>TableColumn</code>. Он состоит из:</p>
+    <p>
+      <code>columns</code> принимает в себя массив объектов типа <code>TableColumn</code>. Он состоит из:
+    </p>
     <ul>
-      <li><code>width</code> - ширина  блока</li>
-      <li><code>filterType</code> - тип поля (select,datepicker,string и т.д.)</li>
-      <li><code>unit</code> - единицы измерения</li>
-      <li><code>unitMeasureParameterId</code> - id измеряемого параметра </li>
-      <li><code>unitId</code> - id единицы измерения</li>
-      <li><code>editable</code> - флаг включения/отключения редактирования поля</li>
-      <li><code>defaultValue</code> - данные которые будут выводится при отсутствии данных.</li>
-      <li><code>maxValue</code> - максимальное значение в поле</li>
-      <li><code>minValue</code> - минимальное значение в поле</li>
-      <li><code>required</code> - флаг обязательности ввода данных в поле</li>
-      <li><code>validators</code> - валидаторы для полей</li>
-      <li><code>name</code> - название поля</li>
-      <li><code>caption</code> - описание поля</li>
-      <li><code>hint</code> - указанный текст появляется при наведении описание поля.</li>
-      <li><code>strict</code> - строгое сравнение </li>
+      <li>
+        <code>width</code> - ширина блока
+      </li>
+      <li>
+        <code>filterType</code> - тип поля (select,datepicker,string и т.д.)
+      </li>
+      <li>
+        <code>unit</code> - единицы измерения
+      </li>
+      <li>
+        <code>unitMeasureParameterId</code> - id измеряемого параметра{' '}
+      </li>
+      <li>
+        <code>unitId</code> - id единицы измерения
+      </li>
+      <li>
+        <code>editable</code> - флаг включения/отключения редактирования поля
+      </li>
+      <li>
+        <code>defaultValue</code> - данные которые будут выводится при отсутствии данных.
+      </li>
+      <li>
+        <code>maxValue</code> - максимальное значение в поле
+      </li>
+      <li>
+        <code>minValue</code> - минимальное значение в поле
+      </li>
+      <li>
+        <code>required</code> - флаг обязательности ввода данных в поле
+      </li>
+      <li>
+        <code>validators</code> - валидаторы для полей
+      </li>
+      <li>
+        <code>name</code> - название поля
+      </li>
+      <li>
+        <code>caption</code> - описание поля
+      </li>
+      <li>
+        <code>hint</code> - указанный текст появляется при наведении описание поля.
+      </li>
+      <li>
+        <code>strict</code> - строгое сравнение{' '}
+      </li>
     </ul>
-    <p>При выборе листа в качестве типа поля, то необходимо добавить свойство <code>dict</code>, которое отвечает за отображаемые элементы списка.</p>
-    <p>Также можно сделать кастомное отображение сетки по названию свойства в форме при помощи директивы <code>tetaPropertyGridItemDescription</code>.</p>
+    <p>
+      При выборе листа в качестве типа поля, то необходимо добавить свойство <code>dict</code>, которое отвечает за
+      отображаемые элементы списка.
+    </p>
+    <p>
+      Также можно сделать кастомное отображение сетки по названию свойства в форме при помощи директивы{' '}
+      <code>tetaPropertyGridItemDescription</code>.
+    </p>
   </div>
   <h3>Пример кода кастомной сетки</h3>
-  <p><pre><code>&lt;teta-property-grid class="scrollable padding-h-3 row_auto" style="width: 100%" (controlValueChange)="save($event)" [item]="item" [horizontal]="true" [columns]="columns" [dict]="dict"&gt;
-    &nbsp;&nbsp;&lt;ng-template [tetaPropertyGridItemDescription]="'ram'" let-control&gt;
-    &nbsp;&nbsp;&nbsp;&nbsp;&lt;input [formControl]="control" class="input" /&gt;
-    &nbsp;&nbsp;&lt;/ng-template&gt;
-    &nbsp;&lt;/teta-property-grid&gt;</code></pre></p>
+  <p>
+    <pre>
+      <code>
+        &lt;teta-property-grid class="scrollable padding-h-3 row_auto" style="width: 100%"
+        (controlValueChange)="save($event)" [item]="item" [horizontal]="true" [columns]="columns" [dict]="dict"&gt;
+        &nbsp;&nbsp;&lt;ng-template [tetaPropertyGridItemDescription]="'ram'" let-control&gt;
+        &nbsp;&nbsp;&nbsp;&nbsp;&lt;input [formControl]="control" class="input" /&gt; &nbsp;&nbsp;&lt;/ng-template&gt;
+        &nbsp;&lt;/teta-property-grid&gt;
+      </code>
+    </pre>
+  </p>
   <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>item</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>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>horizontal</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>hideNonEditable</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>decimalPart</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>controlValueChange</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>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>item</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>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>horizontal</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>hideNonEditable</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>decimalPart</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>controlValueChange</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>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>
     </tbody>
   </table>
 </div>