@itfin/components 1.4.40 → 1.5.1

package/src/components/filter/FilterBadge.vue

@@ -12,7 +12,7 @@
       </div>
     </template>
 
-    <div class="px-2">
+    <div>
       <template v-if="type === 'list'">
         <a
           v-for="(item, n) in options.items"
@@ -36,6 +36,16 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
+      <template v-else-if="type === 'month'">
+        <itf-date-picker-inline
+          style="margin: -.5rem"
+          start-view="months"
+          min-view="months"
+          :value="value.value"
+          only-calendar
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
           style="margin: -.5rem"
@@ -43,14 +53,14 @@
           :only-calendar="options.calendarOptions && options.calendarOptions.onlyCalendar"
           :max-date="options.calendarOptions && options.calendarOptions.maxDate"
           :min-date="options.calendarOptions && options.calendarOptions.minDate"
-          :start-view="options.calendarOptions && options.calendarOptions.startView"
-          :min-view="options.calendarOptions && options.calendarOptions.minView"
+          value-format="yyyy-MM-dd"
           @input="onFilterChange({ value: $event })"
         />
       </template>
       <div v-else-if="type === 'facets-list'" style="width: 300px;">
         <filter-facets-list
           :title="options.title"
+          :options="options"
           :value="value.value"
           :items="options.items"
           :total="options.total"
@@ -113,9 +123,13 @@ body[data-theme="dark"] {
   &.filter-not-default-pill {
     background-color: var(--filter-badge__selected-bg-color);
     outline: 1px solid var(--filter-badge__selected-color);
+
+    .icon { color: var(--filter-badge__selected-color) }
   }
   &.filter-invalid-pill {
     background-color: var(--filter-badge__invalid-bg-color);
+
+    .icon { color: var(--filter-badge__invalid-color) }
   }
   &.filter-pill__default-value {
     padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);

package/src/components/filter/FilterFacetsList.vue

@@ -20,16 +20,26 @@
       </div>
     </div>
     <div class="facets-list">
-    <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item px-2" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
-      <span class="facet-name text-dark d-flex align-items-center">
-        <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-        <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
-      </span>
-      <span v-if="val.count" class="facet-stat">
-        {{ val.count }}
-        <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
-      </span>
-    </div>
+      <div v-for="(group, g) of groupedList">
+        <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
+             :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
+            <div class="w-100 text-truncate">{{ group.group }}</div>
+          </span>
+        </div>
+
+        <div v-for="(val, n) of group.items" :key="n" class="dropdown-item ps-1" :class="{'active': val.isSelected, 'ps-4': group.group}" @click="onFilterClick(val)">
+          <span class="facet-name text-dark d-flex align-items-center">
+            <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+            <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
+          </span>
+          <span v-if="val.count" class="facet-stat">
+            {{ val.count }}
+            <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+          </span>
+        </div>
+      </div>
     </div>
 
     <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
@@ -76,7 +86,7 @@
   margin: 1px 0;
   &.active {
     .facet-bar-progress {
-      background-color: var(--bs-primary);
+      background-color: var(--bs-blue);
     }
   }
   .facet-name {
@@ -105,12 +115,14 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgba(var(--bs-primary-rgb), 50%);
+    background-color: rgba(var(--bs-blue-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }
 </style>
 <script>
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfButton from '../button/Button';
@@ -149,6 +161,33 @@ class FilterFacetsList extends Vue {
     return this.visibleList.length > this.limit;
   }
 
+  get hasGroups() {
+    const groups = uniq(this.items && this.items.map(item => item.group).filter(Boolean));
+    return groups.length > 1
+  }
+
+  isGroupSelected(items) {
+    return items.every(item => item.isSelected);
+  }
+
+  groupSelected(value, items) {
+    let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
+    if (value) {
+      items.forEach((item) => {
+        const itemValue = `${item.value}`;
+        if (!newVal.includes(itemValue)) {
+          newVal.push(itemValue);
+        }
+      });
+    } else {
+      items.forEach((item) => {
+        const itemValue = `${item.value}`;
+        newVal = newVal.filter(val => val !== itemValue);
+      });
+    }
+    this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
+  }
+
   get visibleList() {
     let list = this.items.map(val => {
       const isSelected = this.multiple
@@ -163,7 +202,22 @@ class FilterFacetsList extends Vue {
     if (this.isShowSelected) {
       return list.filter((val) => val.isSelected);
     }
-    return list;
+    return sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
+  }
+
+  get groupedList() {
+    if (!this.hasGroups) {
+      return [{ items: this.mappedValues }];
+    }
+    const groups = {};
+    this.mappedValues.forEach((item) => {
+      const group = item.group || '';
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(item);
+    });
+    return Object.entries(groups).map(([group, items]) => ({ group, items }));
   }
 
   get mappedValues() {

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
+  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly, 'd-none': !visible}">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>
@@ -35,8 +35,8 @@
           class="itf-filter-panel__badge"
           :ref="'item-' + n"
           v-model="filter[facet.name]"
-          :is-default="filter[facet.name] && filter[facet.name].isDefault"
-          :text="filter[facet.name] && filter[facet.name].label"
+          :is-default="filter[facet.name].isDefault"
+          :text="filter[facet.name].label"
           :type="facet.type"
           :icon="facet.icon"
           :options="facet.options"
@@ -143,6 +143,7 @@ class FilterPanel extends Vue {
   @Prop({ type: Boolean, default: true }) showFilter;
   @Prop({ type: Boolean, default: false }) filtersOnly;
   @Prop(Boolean) mini;
+  @Prop({ type: Boolean, default: true }) visible;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 
   filter = {};
@@ -376,25 +377,11 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      const effectiveDate = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO()));
-      // Якщо календарь в режимі вибору місяця (startView/minView === 'month'),
-      // відображаємо весь місяць, наприклад: "01 - 31 Mar 2026"
-      if (
-        facet.options?.calendarOptions &&
-        facet.options.calendarOptions.startView === 'months' &&
-        facet.options.calendarOptions.minView === 'months'
-      ) {
-        const startOfMonth = effectiveDate.startOf('month');
-        const endOfMonth = effectiveDate.endOf('month');
-        const startLabel = startOfMonth.toFormat('dd');
-        const endLabel = endOfMonth.toFormat('dd MMM yyyy');
-        value.label = `${startLabel} - ${endLabel}`;
-      } else {
-        // Стандартний сценарій: одиночна дата
-        value.label = effectiveDate.toFormat('dd MMM yyyy');
-      }
-
+      value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
+      if (value.isDefault && facet.options.defaultValue.label) {
+        value.label = facet.options.defaultValue.label;
+      }
     } else if  (facet.type === 'month') {
       const date = DateTime.fromISO(value.value);
       value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));

package/src/components/filter/NewFilter.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <div class="px-1">
+      <div class="facets-filter-header">
+        <div v-if="title">{{title}}</div>
+      </div>
+
+      <itf-text-field small v-model="query" class="mb-2" :placeholder="$t('components.filter.search')" clearable />
+
+      <div class="d-flex justify-content-between small mb-2">
+        <a v-if="isSelectedAll" href="" @click.stop.prevent="onSelectAll(false)">{{$t('components.filter.deselectAll')}}</a>
+        <a v-else href="" @click.stop.prevent="onSelectAll(true)">{{$t('components.filter.selectAll')}}</a>
+
+        <span class="text-muted" v-if="!isHasSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</span>
+        <a v-else-if="!isShowSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</a>
+        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showAll')}}</a>
+      </div>
+      <div v-if="!mappedValues.length">
+        <div class="text-muted text-center py-4">{{ $t('components.filter.noResults') }}</div>
+      </div>
+    </div>
+    <div class="facets-list">
+      <div v-for="(val, g) of groupedList" :key="g" :style="{paddingLeft: `${((val.level || 0) + 0.5) * 1}rem`}"
+           class="dropdown-item" :class="{'active': val.isSelected, 'active': isGroupSelected(val)}" @click="onFilterClick(val)">
+        <span class="facet-name text-dark d-flex align-items-center">
+          <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+          <itf-icon new v-if="val.isGroup && groupIcon" :name="groupIcon" class="me-1" />
+          <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
+        </span>
+        <span v-if="val.count" class="facet-stat">
+          {{ val.count }}
+          <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+        </span>
+      </div>
+    </div>
+
+    <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
+      <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
+      <span v-else>{{ $t('components.filter.showMore', { count: visibleList.length }) }}</span>
+    </itf-button>
+  </div>
+</template>
+<style lang="scss" scoped>
+.facets-filter-header {
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  color: #A5A5A9;
+  padding: 0 0.75rem .5rem;
+  margin: 0 -.75rem .75rem;
+}
+.facets-list {
+  max-height: 50vh;
+  overflow: auto;
+}
+.dropdown-item {
+  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .25);
+
+  cursor: pointer;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 1.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  white-space: normal;
+  user-select: none;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-image: initial;
+  transition: none 0s ease 0s;
+  margin: 1px 0;
+  &.active {
+    .facet-bar-progress {
+      background-color: var(--bs-blue);
+    }
+  }
+  .facet-name {
+    min-width: 0;
+    text-align: left;
+    line-height: 100%;
+    white-space: nowrap;
+
+    .itf-checkbox {
+      min-height: 1.25rem;
+    }
+  }
+  .facet-stat {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    margin-left: 0.25rem;
+  }
+  .facet-bar {
+    display: inline-block;
+    margin-left: 0.5rem;
+    width: 60px;
+  }
+  .facet-bar-progress {
+    display: block;
+    width: var(--bar-width);
+    min-width: 5px;
+    height: 10px;
+    background-color: rgba(var(--bs-blue-rgb), 50%);
+    transition: width 0.3s ease 0s;
+  }
+}
+</style>
+<script>
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
+import groupBy from 'lodash/groupBy';
+import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfTextField from '../text-field/TextField.vue';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfCheckbox from '../checkbox/Checkbox.vue';
+
+export default @Component({
+  name: 'FilterFacetsList',
+  components: {
+    itfCheckbox,
+    itfIcon,
+    itfButton,
+    itfTextField
+  }
+})
+class FilterFacetsList extends Vue {
+  @Model('input') value;
+  @Prop() items;
+  @Prop() item;
+  @Prop() total;
+  @Prop() options;
+  @Prop({ type: Number, default: 5 }) limit;
+  @Prop(Boolean) multiple;
+  @Prop(Boolean) showAll;
+  @Prop(String) title;
+
+  query = '';
+  showMore = false;
+  isShowSelected = false;
+
+  toggleMore() {
+    this.showMore = !this.showMore;
+  }
+
+  get groupIcon() {
+    return this.options?.groupIcon;
+  }
+
+  get flatList() {
+    return treeToFlat(this.items || []);
+
+    function getIdsDeep(items, mapFunc) {
+      return (items ?? []).reduce((acc, item) => {
+        const id = mapFunc(item);
+        if (id) {
+          acc.push(id);
+        }
+        if (item.items && item.items.length) {
+          acc.push(...getIdsDeep(item.items, mapFunc));
+        }
+        return acc;
+      }, []);
+    }
+    function treeToFlat(items, level = 0) {
+      return (items ?? []).reduce((acc, item) => {
+        acc.push({
+          ...item,
+          level,
+          ids: [item.isGroup ? `g:${item.value}` : item.value].concat(
+            getIdsDeep(item.items, (item) => item.isGroup ? `g:${item.value}` : item.value)
+          )
+            .filter(Boolean),
+        });
+        if (item.items && item.items.length) {
+          // acc.push({ ...item, group: item.label, level });
+          acc.push(...treeToFlat(item.items, level + 1));
+        }
+        return acc;
+      }, []);
+    }
+  }
+
+  get hasMore() {
+    if (this.showAll) {
+      return false;
+    }
+    return this.visibleList.length > this.limit;
+  }
+
+  get hasGroups() {
+    const groups = uniq(this.flatList && this.flatList.map(item => item.group).filter(Boolean));
+    return groups.length > 1
+  }
+
+  isGroupSelected(val) {
+    return (val.ids ?? []).every(id => this.value.includes(`${id}`));
+  }
+
+  groupSelected(value, ids) {
+    let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
+    console.info(value, ids);
+    if (value) {
+      ids.forEach((id) => {
+        const itemValue = `${id}`;
+        if (!newVal.includes(itemValue)) {
+          newVal.push(itemValue);
+        }
+      });
+    } else {
+      ids.forEach((id) => {
+        const itemValue = `${id}`;
+        newVal = newVal.filter(val => val !== itemValue);
+      });
+    }
+    this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
+  }
+
+  get visibleList() {
+    let list = this.flatList.map(val => {
+      const isSelected = this.multiple
+        ? Array.isArray(this.value) && this.value.map(String).includes(`${val.value}`)
+        : `${this.value}` === `${val.value}`;
+
+      return { ...val, isSelected };
+    });
+    if (this.query) {
+      list = list.filter((val) => val.label.toLowerCase().includes(this.query.toLowerCase()));
+    }
+    if (this.isShowSelected) {
+      return list.filter((val) => val.isSelected);
+    }
+    return this.hasGroups ? sortBy(list, (item) => item.group || item.label) : list;//sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
+  }
+
+  get groupedList() {
+    if (!this.hasGroups) {
+      return this.mappedValues;
+    }
+    const groups = groupBy(this.mappedValues, (item) => item.group || '');
+    return Object.entries(groups).reduce((acc, [group, items]) => [...acc, { label: group, isGroup: true }, ...(items.map(item => ({ ...item, level: 1 })))], []);
+  }
+
+  get mappedValues() {
+    const list = this.visibleList;
+    if (!this.showMore && !this.showAll) {
+      return list.slice(0, this.limit);
+    }
+    return list;
+  }
+
+  getPercent(item) {
+    return this.total ? Math.round((item.count / this.total) * 100) : 0;
+  }
+
+  onFilterClick(val) {
+    if (val.isGroup) {
+      this.groupSelected(!val.isSelected, val.ids);
+      return;
+    }
+    const value = `${val.value}`;
+    if (!this.multiple) {
+      return this.$emit('input', `${this.value}` === value ? null : value);
+    }
+    const newVal = [...Array.isArray(this.value) ? [...this.value] : []].map((s) => s.toString());
+    if (newVal.includes(value)) {
+      newVal.splice(newVal.indexOf(value), 1);
+    } else {
+      newVal.push(value);
+    }
+    this.$emit('input', newVal);
+  }
+
+  get isSelectedAll() {
+    return this.mappedValues.every(o => o.isSelected);
+  }
+
+  onSelectAll(isSelect = false) {
+    if (isSelect) {
+      this.$emit('input', this.visibleList.map((val) => `${val.value}`));
+    } else {
+      this.$emit('input', []);
+    }
+    this.isShowSelected = false;
+  }
+
+  get isHasSelected() {
+    return this.value && this.value.length > 0 && !this.query; // тільки коли не пошук
+  }
+
+  onShowSelected(isShow = false) {
+    if (!this.value.length && isShow) { // не показувати, якщо нічого не вибрано
+      return;
+    }
+    this.isShowSelected = isShow;
+  }
+}
+</script>

package/src/components/form/Label.vue

@@ -6,11 +6,12 @@
         <label class="itf-label__label form-label d-flex" v-if="label">
           {{label}}
           <span class="star" v-if="required">*</span>
-          <itf-tooltip v-if="helpTooltip" class="ms-auto align-items-center">
-            <template #activator><itf-icon :size="16" name="question_circle" class="itf-label__tooltip" /></template>
+          <itf-tooltip v-if="helpTooltip" class="align-items-center">
+            <template #activator><itf-icon name="help-alt" new class="itf-label__tooltip ms-1 mb-1" /></template>
             {{helpTooltip}}
-            <div><a href="javascript:;" @click="onDetailsClick" v-if="helpDetails" v-text="helpDetails"></a></div>
+            <div><a href="" @click.prevent.stop="onDetailsClick" v-if="helpDetails" v-text="helpDetails"></a></div>
           </itf-tooltip>
+          <slot name="after-label"></slot>
         </label>
         <div v-if="left && helpText">
           <small class="text-muted" v-html="helpText"></small>
@@ -76,8 +77,7 @@ class itfLabel extends Mixins(ValidatableMixin) {
   }
 
   onDetailsClick() {
-    slavik.askQuestion(this.helpDetails);
-    console.info(slavik, this.helpDetails)
+    this.$emit('details');
   }
 }
 </script>

package/src/components/icon/components/nomi-ai-alt.vue

@@ -0,0 +1,5 @@
+<template><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="Filled/ai" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" />
+	<path id="Vector" d="M17.7877 13.5465C17.7893 13.7995 17.7124 14.0468 17.5677 14.2543C17.4229 14.4619 17.2174 14.6194 16.9794 14.7054L12.9782 16.1839L11.5043 20.1882C11.4171 20.4253 11.2591 20.63 11.0519 20.7745C10.8447 20.9191 10.5981 20.9966 10.3454 20.9966C10.0927 20.9966 9.84614 20.9191 9.6389 20.7745C9.43167 20.63 9.27375 20.4253 9.18647 20.1882L7.70328 16.1839L3.69898 14.71C3.46187 14.6228 3.25723 14.4649 3.11268 14.2576C2.96813 14.0504 2.89062 13.8038 2.89062 13.5511C2.89062 13.2984 2.96813 13.0519 3.11268 12.8446C3.25723 12.6374 3.46187 12.4795 3.69898 12.3922L7.70328 10.909L9.17716 6.90469C9.26444 6.66757 9.42236 6.46293 9.62959 6.31839C9.83683 6.17384 10.0834 6.09633 10.3361 6.09633C10.5888 6.09633 10.8354 6.17384 11.0426 6.31839C11.2498 6.46293 11.4077 6.66757 11.495 6.90469L12.9782 10.909L16.9825 12.3829C17.2207 12.4696 17.4261 12.6281 17.5703 12.8365C17.7145 13.045 17.7905 13.293 17.7877 13.5465ZM13.4437 6.09949L14.6848 6.09949L14.6848 7.34065C14.6848 7.50524 14.7502 7.66308 14.8666 7.77947C14.983 7.89585 15.1408 7.96123 15.3054 7.96123C15.47 7.96123 15.6278 7.89585 15.7442 7.77947C15.8606 7.66308 15.926 7.50524 15.926 7.34065L15.926 6.09949L17.1671 6.09949C17.3317 6.09949 17.4896 6.0341 17.606 5.91772C17.7223 5.80134 17.7877 5.64349 17.7877 5.47891C17.7877 5.31432 17.7223 5.15647 17.606 5.04009C17.4896 4.92371 17.3317 4.85833 17.1671 4.85833L15.926 4.85833L15.926 3.61716C15.926 3.45257 15.8606 3.29473 15.7442 3.17835C15.6278 3.06196 15.47 2.99658 15.3054 2.99658C15.1408 2.99658 14.983 3.06196 14.8666 3.17835C14.7502 3.29473 14.6848 3.45257 14.6848 3.61716L14.6848 4.85833L13.4437 4.85833C13.2791 4.85833 13.1212 4.92371 13.0048 5.04009C12.8885 5.15647 12.8231 5.31432 12.8231 5.47891C12.8231 5.64349 12.8885 5.80134 13.0048 5.91772C13.1212 6.0341 13.2791 6.09949 13.4437 6.09949ZM20.27 8.58181L19.6495 8.58181L19.6495 7.96123C19.6495 7.79664 19.5841 7.63879 19.4677 7.52241C19.3513 7.40603 19.1935 7.34065 19.0289 7.34065C18.8643 7.34065 18.7064 7.40603 18.5901 7.52241C18.4737 7.63879 18.4083 7.79664 18.4083 7.96123L18.4083 8.58181L17.7877 8.58181C17.6231 8.58181 17.4653 8.64719 17.3489 8.76357C17.2325 8.87996 17.1671 9.0378 17.1671 9.20239C17.1671 9.36698 17.2325 9.52483 17.3489 9.64121C17.4653 9.75759 17.6231 9.82297 17.7877 9.82297L18.4083 9.82297L18.4083 10.4436C18.4083 10.6081 18.4737 10.766 18.5901 10.8824C18.7064 10.9988 18.8643 11.0641 19.0289 11.0641C19.1935 11.0641 19.3513 10.9988 19.4677 10.8824C19.5841 10.766 19.6495 10.6081 19.6495 10.4436L19.6495 9.82297L20.27 9.82297C20.4346 9.82297 20.5925 9.75759 20.7089 9.64121C20.8252 9.52483 20.8906 9.36698 20.8906 9.20239C20.8906 9.0378 20.8252 8.87996 20.7089 8.76357C20.5925 8.64719 20.4346 8.58181 20.27 8.58181Z" fill="currentColor" fill-rule="nonzero" />
+</svg>
+</template>

package/src/components/icon/components/nomi-bell.vue

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.05926 10.2604C5.86966 7.95184 7.35815 5.83804 9.59554 5.23853C11.8329 4.63902 14.1789 5.72538 15.169 7.81944L17.7259 13.2276C17.9926 13.7916 17.6834 14.4594 17.0807 14.6209L7.80438 17.1065C7.20174 17.268 6.59999 16.8442 6.54892 16.2224L6.05926 10.2604Z" fill="currentColor"/>
+<path d="M14.1503 16.4414C14.417 16.3699 14.698 16.5299 14.7012 16.806C14.7054 17.1621 14.6145 17.516 14.4334 17.8296C14.1682 18.289 13.7314 18.6242 13.219 18.7615C12.7067 18.8988 12.1608 18.8269 11.7014 18.5617C11.3878 18.3806 11.1321 18.1196 10.9577 17.8091C10.8224 17.5684 10.9858 17.2893 11.2525 17.2178L12.7014 16.8296L14.1503 16.4414Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-budget.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0059 9.66699L18.0273 12.0977C18.3384 12.4736 18.5786 12.8947 18.7471 13.3613C18.9155 13.8279 19 14.3073 19 14.7998C19 15.9799 18.5919 16.9753 17.7754 17.7852C16.9587 18.5951 15.9665 19 14.7998 19H9.2002C8.02113 19.0005 7.02625 18.5955 6.21582 17.7852C5.40538 16.9747 5 15.9794 5 14.7998C5.00002 14.3073 5.08447 13.8279 5.25293 13.3613C5.42144 12.8947 5.66156 12.4736 5.97266 12.0977L7.99414 9.66699H16.0059ZM12 12C11.5733 12.001 11.2068 12.1532 10.9014 12.457C10.596 12.7609 10.4438 13.1274 10.4443 13.5557C10.4449 13.9838 10.5972 14.35 10.9014 14.6543C11.2057 14.9587 11.5722 15.1113 12 15.1113C12.4298 15.1134 12.7958 14.9607 13.0986 14.6543C13.4014 14.3479 13.5541 13.9818 13.5557 13.5557C13.5572 13.1294 13.4046 12.763 13.0986 12.457C12.7928 12.1513 12.4266 11.999 12 12ZM15.8887 5C16.1863 5 16.4102 5.12292 16.5596 5.36914C16.7089 5.61544 16.7185 5.86867 16.5889 6.12793L15.5977 8.11133H8.40234L7.41113 6.12793C7.28202 5.86867 7.29161 5.61544 7.44043 5.36914C7.58924 5.12292 7.81323 5 8.11133 5H15.8887Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-calendar-payment.vue

@@ -0,0 +1,10 @@
+<template><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
+	<defs>
+		<clipPath id="clipPath_0">
+			<rect width="24.000000" height="24.000000" x="0.000000" y="0.000000" rx="6.153846" fill="rgb(255,255,255)" />
+		</clipPath>
+	</defs>
+	<rect id="Filled/payment-calendar, subscription" width="24.000000" height="24.000000" x="0.000000" y="0.000000" rx="6.153846" />
+	<path id="Subtract" d="M16 5.40039C16.3312 5.40039 16.5994 5.66881 16.5996 6L16.5996 7.05078C17.0326 7.10357 17.3327 7.21174 17.5605 7.43945C17.9996 7.87877 18 8.58624 18 10L18 15C18 16.4138 17.9997 17.1212 17.5605 17.5605C17.1212 17.9997 16.414 18 15 18L9 18C7.586 18 6.87881 17.9997 6.43945 17.5605C6.00034 17.1212 6 16.4138 6 15L6 10C6 8.58624 6.00035 7.87877 6.43945 7.43945C6.66727 7.21174 6.96737 7.10357 7.40039 7.05078L7.40039 6C7.4006 5.66881 7.66876 5.40039 8 5.40039C8.33124 5.40039 8.5994 5.66881 8.59961 6L8.59961 7.00195C8.7264 7.00152 8.85972 7 9 7L15 7C15.1403 7 15.2736 7.00152 15.4004 7.00195L15.4004 6C15.4006 5.66881 15.6688 5.40039 16 5.40039ZM11.9443 9C11.8415 9.00005 11.7428 9.04071 11.6699 9.11328C11.597 9.18621 11.5557 9.28554 11.5557 9.38867L11.5557 9.55273C10.7104 9.70415 10 10.3402 10 11.2041C10.0003 12.0677 10.7106 12.7031 11.5557 12.8545L11.5557 14.6533C11.0703 14.5211 10.7773 14.1475 10.7773 13.7959C10.7772 13.693 10.7367 13.5943 10.6641 13.5215C10.5912 13.4486 10.4918 13.4073 10.3887 13.4072C10.2857 13.4073 10.1871 13.4487 10.1143 13.5215C10.0414 13.5943 10.0001 13.6929 10 13.7959C10 14.6598 10.7104 15.2959 11.5557 15.4473L11.5557 15.6113C11.5557 15.7144 11.597 15.8138 11.6699 15.8867C11.7428 15.9593 11.8415 15.9999 11.9443 16C12.0473 16 12.1468 15.9595 12.2197 15.8867C12.2926 15.8138 12.333 15.7144 12.333 15.6113L12.333 15.4473C13.1782 15.2958 13.8887 14.6597 13.8887 13.7959C13.8884 12.9323 13.178 12.297 12.333 12.1455L12.333 10.3467C12.8183 10.4795 13.1113 10.8526 13.1113 11.2041C13.1115 11.3071 13.1528 11.4057 13.2256 11.4785C13.2985 11.5513 13.397 11.5927 13.5 11.5928C13.6031 11.5927 13.7025 11.5514 13.7754 11.4785C13.8481 11.4057 13.8885 11.307 13.8887 11.2041C13.8887 10.3403 13.1782 9.70421 12.333 9.55273L12.333 9.38867C12.333 9.28559 12.2926 9.1862 12.2197 9.11328C12.1468 9.04047 12.0474 9.00005 11.9443 9ZM12.333 12.9395C12.8182 13.0716 13.1111 13.4444 13.1113 13.7959C13.1113 14.1475 12.8184 14.5211 12.333 14.6533L12.333 12.9395ZM11.5557 12.0605C11.0703 11.9283 10.7773 11.5547 10.7773 11.2031C10.7776 10.8517 11.0705 10.4794 11.5557 10.3467L11.5557 12.0605Z" fill="currentColor" fill-rule="nonzero" />
+</svg>
+</template>

package/src/components/icon/components/nomi-card-plus.vue

@@ -0,0 +1 @@
+<template><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none"><rect id="Filled/card plus" width="24.000000" height="24.000000" x="0.000000" y="0.000000" /><path id="Union" d="M16.5 13C18.433 13 20 14.567 20 16.5C20 18.433 18.433 20 16.5 20C14.567 20 13 18.433 13 16.5C13 14.567 14.567 13 16.5 13ZM16.4883 14.5117C16.1571 14.5179 15.8944 14.7909 15.9004 15.1221L15.9141 15.9111L15.125 15.9258C14.7938 15.9319 14.5302 16.2049 14.5361 16.5361C14.5422 16.8673 14.8154 17.1308 15.1465 17.125L15.9355 17.1104L15.9502 17.9004C15.9565 18.2315 16.2304 18.4943 16.5615 18.4883C16.8926 18.4819 17.1554 18.209 17.1494 17.8779L17.1348 17.0879L17.9248 17.0742C18.256 17.0681 18.5187 16.7951 18.5127 16.4639C18.5066 16.1326 18.2336 15.869 17.9023 15.875L17.1123 15.8887L17.0986 15.0996C17.0923 14.7686 16.8194 14.5057 16.4883 14.5117ZM19 12.5205C18.2758 12.0646 17.419 11.7998 16.5 11.7998C14.0732 11.7998 12.0758 13.6393 11.8262 16L8 16C6.58579 16 5.87879 15.9999 5.43945 15.5605C5.00011 15.1212 5 14.4142 5 13L5 9.59961L19 9.59961L19 12.5205ZM16 6C17.4142 6 18.1212 6.00011 18.5605 6.43945C18.9328 6.81174 18.9874 7.37622 18.9961 8.40039L5.00391 8.40039C5.01258 7.37622 5.06716 6.81174 5.43945 6.43945C5.87879 6.00011 6.58579 6 8 6L16 6Z" fill="currentColor" fill-rule="nonzero" /></svg></template>

package/src/components/icon/components/nomi-cash-provider.vue

@@ -0,0 +1,9 @@
+<template><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none">
+	<rect id="left icon" width="32.000000" height="32.000000" x="0.000000" y="0.000000" fill="rgb(228,233,237)" fill-opacity="0" />
+	<g id="Group">
+		<path id="Vector" d="M30.3379 20.2422C29.8761 19.6502 28.846 19.1529 26.7502 20.3843C26.9397 19.5199 26.2529 18.9753 25.436 18.9753C24.7137 18.9753 23.873 19.1647 23.1981 19.8396C22.2391 18.5727 21.2445 18.7266 19.3145 19.9225C18.5804 20.3843 17.9292 20.775 17.4437 21.0473C17.3135 21.1184 17.2069 21.1776 17.1122 21.2249C17.3017 21.2605 17.4911 21.296 17.7042 21.296C20.4157 21.296 22.5469 21.296 22.5469 23.6404C22.5469 25.4401 20.4512 25.9848 19.3382 26.0084L15.4901 26.0084C13.418 26.0084 11.3933 23.8298 11.3933 23.8298C11.3933 23.8298 13.7851 24.8126 15.4901 24.8126L19.3263 24.8126C19.3382 24.8126 21.3747 24.7297 21.3747 23.6404C21.3747 22.6339 20.3446 22.4682 18.7225 22.4682C16.0703 22.4682 14.7915 21.2605 14.7915 21.2605C14.7915 21.2605 12.7313 19.7567 12.0919 19.3542C10.6 18.4188 9.78304 17.9333 7.08344 18.9634C5.41395 19.6147 2.66699 20.9171 2.66699 20.9171L6.00597 28.3291L7.58073 27.3701C8.51612 26.7662 9.40414 26.7899 10.6474 27.3701C12.0445 28.0213 13.9745 28.6488 15.3243 29.0869C17.3727 29.7381 17.7161 29.6434 19.0659 28.8738C20.2144 28.2107 28.3487 23.4036 29.2012 22.7997C30.5273 21.8525 30.9417 21.0355 30.3379 20.2422Z" fill="currentColor" fill-rule="nonzero" />
+		<path id="Vector" d="M17.2661 6.03394C14.3416 6.03394 11.9854 8.402 11.9854 11.3147C11.9854 14.2393 14.3534 16.5955 17.2661 16.5955C20.1789 16.5955 22.5469 14.2274 22.5469 11.3147C22.5469 8.402 20.1789 6.03394 17.2661 6.03394ZM18.0594 13.7065L16.461 13.7065L16.461 10.5214L15.2178 10.5214L16.8162 8.92298L18.0594 8.92298L18.0594 13.7065Z" fill="currentColor" fill-rule="nonzero" />
+		<path id="Vector" d="M21.9664 1.33325C19.8825 1.33325 18.1775 2.88434 17.917 4.89719C19.2076 5.02744 20.3916 5.53657 21.3507 6.31803L21.3507 4.82615L20.3798 4.82615L21.623 3.58292L22.5939 3.58292L22.5939 7.31262L22.3334 7.31262C22.7952 7.90464 23.1623 8.5677 23.4109 9.28996C24.9738 8.70978 26.0868 7.2179 26.0868 5.45369C26.075 3.1685 24.2397 1.33325 21.9664 1.33325Z" fill="currentColor" fill-rule="nonzero" />
+	</g>
+</svg>
+</template>

package/src/components/icon/components/nomi-category-edit.vue

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7139 4C17.6567 4 18.129 4.00008 18.4219 4.29297C18.7145 4.58588 18.7139 5.05749 18.7139 6V13.6611L14.6611 17.7139H7.85742C7.54202 17.714 7.28628 17.9698 7.28613 18.2852C7.28613 18.6007 7.54193 18.8563 7.85742 18.8564H14V20H7C6.05719 20 5.58586 19.9999 5.29297 19.707C5.00008 19.4141 5 18.9428 5 18V6C5 5.05719 5.00008 4.58586 5.29297 4.29297C5.58586 4.00008 6.05719 4 7 4H16.7139ZM11.8584 13.6006C11.4798 13.6006 11.1731 13.9066 11.1729 14.2852C11.1729 14.6639 11.4797 14.9707 11.8584 14.9707H15.2861C15.6645 14.9703 15.9717 14.6636 15.9717 14.2852C15.9715 13.9069 15.6643 13.601 15.2861 13.6006H11.8584ZM10.1436 6.74316C9.76489 6.74322 9.45801 7.05003 9.45801 7.42871V8.45703H8.42969C8.05102 8.45703 7.74422 8.76393 7.74414 9.14258C7.74414 9.52129 8.05098 9.82812 8.42969 9.82812H9.45801V10.8574C9.45823 11.2359 9.76503 11.5419 10.1436 11.542C10.5218 11.5416 10.8289 11.2357 10.8291 10.8574V9.82812H11.8584C12.2365 9.82745 12.543 9.52087 12.543 9.14258C12.5429 8.76435 12.2365 8.45771 11.8584 8.45703H10.8291V7.42871C10.8291 7.05026 10.5219 6.74358 10.1436 6.74316Z" fill="currentColor"/>
+<path d="M15.2929 18.2071L19.2929 14.2071C19.6834 13.8166 20.3166 13.8166 20.7071 14.2071L22.2929 15.7929C22.6834 16.1834 22.6834 16.8166 22.2929 17.2071L18.2929 21.2071C18.1054 21.3946 17.851 21.5 17.5858 21.5H16C15.4477 21.5 15 21.0523 15 20.5V18.9142C15 18.649 15.1054 18.3946 15.2929 18.2071Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-delta.vue

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="1.5"
+          stroke="currentColor" d="M8.00016 5.17996L12.2602 12H3.74016L8.00016 5.17996Z"
+          fill="none"
+          fill-opacity="currentColor"></path>
+</svg>
+</template>

package/src/components/icon/components/nomi-exit-right.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1787 16.0909V12.5455H12.3237C12.1817 12.5455 12.0454 12.488 11.9449 12.3857C11.8445 12.2834 11.788 12.1447 11.788 12C11.788 11.8553 11.8445 11.7166 11.9449 11.6143C12.0454 11.512 12.1817 11.4545 12.3237 11.4545H17.1787V7.90909C17.1782 7.40293 16.9805 6.91766 16.629 6.55976C16.2774 6.20185 15.8008 6.00054 15.3037 6H8.87503C8.37791 6.00054 7.90129 6.20185 7.54977 6.55976C7.19825 6.91766 7.00053 7.40293 7 7.90909V16.0909C7.00053 16.5971 7.19825 17.0823 7.54977 17.4402C7.90129 17.7981 8.37791 17.9995 8.87503 18H15.3037C15.8008 17.9995 16.2774 17.7981 16.629 17.4402C16.9805 17.0823 17.1782 16.5971 17.1787 16.0909ZM21.1711 12.5455L19.4072 14.3417C19.311 14.4448 19.2581 14.5821 19.2599 14.7244C19.2617 14.8666 19.318 15.0025 19.4168 15.1031C19.5156 15.2037 19.6491 15.261 19.7887 15.2628C19.9284 15.2646 20.0633 15.2108 20.1646 15.1128L22.8432 12.3856C22.9436 12.2833 23 12.1446 23 12C23 11.8554 22.9436 11.7167 22.8432 11.6144L20.1646 8.88716C20.0633 8.78918 19.9284 8.73537 19.7887 8.73719C19.6491 8.73901 19.5156 8.79632 19.4168 8.89691C19.318 8.99749 19.2617 9.13339 19.2599 9.27562C19.2581 9.41785 19.311 9.55517 19.4072 9.6583L21.1711 11.4545H17.1787V12.5455H21.1711Z" fill="currentColor"/>
+</svg>
+</template>