@itfin/components 1.4.36 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (204) hide show
  1. package/package.json +17 -20
  2. package/src/ITFSettings.js +6 -0
  3. package/src/assets/scss/_css_variables.scss +2 -7
  4. package/src/assets/scss/_dark-theme.scss +2 -12
  5. package/src/assets/scss/_variables.scss +34 -9
  6. package/src/assets/scss/components/_button.scss +147 -10
  7. package/src/assets/scss/components/_checkbox.scss +9 -0
  8. package/src/assets/scss/components/_datepicker.scss +3 -3
  9. package/src/assets/scss/components/_pagination.scss +4 -1
  10. package/src/assets/scss/components/_popover.scss +22 -0
  11. package/src/assets/scss/components/_segmeneted-control.scss +19 -8
  12. package/src/assets/scss/components/_select.scss +6 -8
  13. package/src/assets/scss/components/_text-field.scss +27 -11
  14. package/src/assets/scss/components/select/_dropdown-menu.scss +1 -0
  15. package/src/assets/scss/components/select/_dropdown-toggle.scss +0 -1
  16. package/src/assets/scss/directives/tooltip.scss +10 -5
  17. package/src/assets/scss/main.scss +48 -0
  18. package/src/components/alert/AlertBanner.vue +75 -0
  19. package/src/components/app/App.vue +6 -3
  20. package/src/components/button/Button.vue +3 -1
  21. package/src/components/button/NativeButton.js +4 -0
  22. package/src/components/button/index.stories.js +2 -2
  23. package/src/components/checkbox/Checkbox.vue +2 -1
  24. package/src/components/checkbox/RadioBox.vue +13 -7
  25. package/src/components/copyToClipboard/CopyToClipboard.vue +4 -1
  26. package/src/components/customize/PropertiesList.vue +0 -2
  27. package/src/components/customize/PropertiesPopupMenu.vue +1 -1
  28. package/src/components/customize/PropertyItem.vue +6 -24
  29. package/src/components/datepicker/DatePicker.vue +3 -1
  30. package/src/components/datepicker/DatePickerInline.vue +2 -2
  31. package/src/components/datepicker/DateRangePickerInline.vue +6 -1
  32. package/src/components/dropdown/Dropdown.vue +1 -1
  33. package/src/components/dropdown/DropdownMenu.vue +1 -1
  34. package/src/components/editable/EditButton.vue +1 -1
  35. package/src/components/filter/FilterBadge.vue +20 -1
  36. package/src/components/filter/FilterFacetsList.vue +67 -13
  37. package/src/components/filter/FilterPanel.vue +8 -4
  38. package/src/components/filter/NewFilter.vue +305 -0
  39. package/src/components/form/Label.vue +5 -5
  40. package/src/components/icon/components/nomi-ai-alt.vue +5 -0
  41. package/src/components/icon/components/nomi-arrow-right.vue +4 -0
  42. package/src/components/icon/components/nomi-bell.vue +5 -0
  43. package/src/components/icon/components/nomi-calendar-payment.vue +10 -0
  44. package/src/components/icon/components/nomi-card-plus.vue +1 -0
  45. package/src/components/icon/components/nomi-cash-provider.vue +9 -0
  46. package/src/components/icon/components/nomi-cash-repeat.vue +6 -0
  47. package/src/components/icon/components/nomi-category-edit.vue +5 -0
  48. package/src/components/icon/components/nomi-chavron-up.vue +4 -0
  49. package/src/components/icon/components/nomi-chavron_down.vue +4 -0
  50. package/src/components/icon/components/nomi-chavron_up.vue +4 -0
  51. package/src/components/icon/components/nomi-chevron-up.vue +4 -0
  52. package/src/components/icon/components/nomi-exit-right.vue +4 -0
  53. package/src/components/icon/components/nomi-help.vue +2 -3
  54. package/src/components/icon/components/nomi-history.vue +7 -0
  55. package/src/components/icon/components/nomi-lock.vue +1 -1
  56. package/src/components/icon/components/nomi-pen-alt.vue +4 -0
  57. package/src/components/icon/components/nomi-project.vue +2 -2
  58. package/src/components/icon/components/nomi-refresh-off.vue +4 -0
  59. package/src/components/icon/components/nomi-refresh.vue +4 -0
  60. package/src/components/icon/components/nomi-scissors.vue +1 -1
  61. package/src/components/icon/components/nomi-start.vue +28 -0
  62. package/src/components/icon/components/nomi-table-view.vue +1 -4
  63. package/src/components/icon/components/nomi-transactions-delete.vue +5 -0
  64. package/src/components/icon/components/nomi-type-array.vue +6 -0
  65. package/src/components/icon/components/nomi-type-boolean.vue +5 -0
  66. package/src/components/icon/components/nomi-type-date.vue +4 -0
  67. package/src/components/icon/components/nomi-type-null.vue +4 -0
  68. package/src/components/icon/components/nomi-type-number.vue +4 -0
  69. package/src/components/icon/components/nomi-type-object.vue +4 -0
  70. package/src/components/icon/components/nomi-type-string.vue +4 -0
  71. package/src/components/icon/components/nomi-unarchive.vue +17 -0
  72. package/src/components/icon/components/nomi-unlink.vue +10 -0
  73. package/src/components/icon/components/nomi-user.vue +3 -3
  74. package/src/components/icon/components/nomi-warning-triangle.vue +6 -0
  75. package/src/components/icon/components/nomi-warning_triangle_filled.vue +6 -0
  76. package/src/components/icon/convert-icons.js +3 -0
  77. package/src/components/icon/icons.js +390 -312
  78. package/src/components/icon/new-icons/ai-alt.svg +4 -0
  79. package/src/components/icon/new-icons/arrow-right-alt.svg +3 -0
  80. package/src/components/icon/new-icons/arrow-right.svg +3 -0
  81. package/src/components/icon/new-icons/arrow_left.svg +3 -0
  82. package/src/components/icon/new-icons/automation.svg +4 -0
  83. package/src/components/icon/new-icons/balance.svg +3 -0
  84. package/src/components/icon/new-icons/balance_turnover.svg +4 -0
  85. package/src/components/icon/new-icons/bar-horizontal.svg +6 -0
  86. package/src/components/icon/new-icons/bell.svg +4 -0
  87. package/src/components/icon/new-icons/calendar-payment.svg +9 -0
  88. package/src/components/icon/new-icons/card-plus.svg +1 -0
  89. package/src/components/icon/new-icons/cash-provider.svg +8 -0
  90. package/src/components/icon/new-icons/cash-repeat.svg +5 -0
  91. package/src/components/icon/new-icons/cash.svg +3 -0
  92. package/src/components/icon/new-icons/cashflow.svg +3 -0
  93. package/src/components/icon/new-icons/category-edit.svg +4 -0
  94. package/src/components/icon/new-icons/category.svg +4 -0
  95. package/src/components/icon/new-icons/category_alt.svg +3 -0
  96. package/src/components/icon/new-icons/chart-bars.svg +5 -0
  97. package/src/components/icon/new-icons/chart-donut.svg +3 -0
  98. package/src/components/icon/new-icons/chart-funnel.svg +5 -0
  99. package/src/components/icon/new-icons/chart-kpi.svg +7 -0
  100. package/src/components/icon/new-icons/chart-line.svg +4 -0
  101. package/src/components/icon/new-icons/chart-lines.svg +5 -0
  102. package/src/components/icon/new-icons/check-alt.svg +3 -0
  103. package/src/components/icon/new-icons/check.svg +3 -0
  104. package/src/components/icon/new-icons/chevron-down.svg +3 -0
  105. package/src/components/icon/new-icons/chevron-left.svg +3 -0
  106. package/src/components/icon/new-icons/chevron-right.svg +3 -0
  107. package/src/components/icon/new-icons/chevron-up.svg +3 -0
  108. package/src/components/icon/new-icons/collapse.svg +6 -0
  109. package/src/components/icon/new-icons/control-panel.svg +7 -0
  110. package/src/components/icon/new-icons/credit.svg +3 -0
  111. package/src/components/icon/new-icons/currencies.svg +3 -0
  112. package/src/components/icon/new-icons/debt.svg +3 -0
  113. package/src/components/icon/new-icons/demo.svg +6 -0
  114. package/src/components/icon/new-icons/dev.svg +3 -0
  115. package/src/components/icon/new-icons/dots.svg +5 -0
  116. package/src/components/icon/new-icons/duplicate.svg +4 -0
  117. package/src/components/icon/new-icons/exit-right.svg +3 -0
  118. package/src/components/icon/new-icons/export.svg +3 -0
  119. package/src/components/icon/new-icons/file.svg +3 -0
  120. package/src/components/icon/new-icons/folder.svg +3 -0
  121. package/src/components/icon/new-icons/goods-turnover.svg +3 -0
  122. package/src/components/icon/new-icons/goods.svg +4 -0
  123. package/src/components/icon/new-icons/help-alt.svg +3 -0
  124. package/src/components/icon/new-icons/help.svg +2 -3
  125. package/src/components/icon/new-icons/history.svg +6 -0
  126. package/src/components/icon/new-icons/integration.svg +3 -0
  127. package/src/components/icon/new-icons/link.svg +5 -0
  128. package/src/components/icon/new-icons/lock.svg +1 -1
  129. package/src/components/icon/new-icons/menu.svg +5 -0
  130. package/src/components/icon/new-icons/minus.svg +3 -0
  131. package/src/components/icon/new-icons/payment_calendar.svg +3 -0
  132. package/src/components/icon/new-icons/pc.svg +3 -0
  133. package/src/components/icon/new-icons/pen-alt.svg +3 -0
  134. package/src/components/icon/new-icons/planFact.svg +4 -0
  135. package/src/components/icon/new-icons/pnl.svg +7 -0
  136. package/src/components/icon/new-icons/project.svg +2 -2
  137. package/src/components/icon/new-icons/project_alt.svg +3 -0
  138. package/src/components/icon/new-icons/project_alt2.svg +3 -0
  139. package/src/components/icon/new-icons/promo.svg +3 -0
  140. package/src/components/icon/new-icons/refresh-off.svg +3 -0
  141. package/src/components/icon/new-icons/refresh.svg +3 -0
  142. package/src/components/icon/new-icons/scissors.svg +1 -1
  143. package/src/components/icon/new-icons/segment.svg +3 -0
  144. package/src/components/icon/new-icons/start.svg +27 -0
  145. package/src/components/icon/new-icons/strongbox.svg +3 -0
  146. package/src/components/icon/new-icons/subscription.svg +3 -0
  147. package/src/components/icon/new-icons/table-view.svg +1 -4
  148. package/src/components/icon/new-icons/time.svg +3 -0
  149. package/src/components/icon/new-icons/transactions_alt.svg +6 -0
  150. package/src/components/icon/new-icons/transactions_delete.svg +4 -0
  151. package/src/components/icon/new-icons/type-array.svg +5 -0
  152. package/src/components/icon/new-icons/type-boolean.svg +4 -0
  153. package/src/components/icon/new-icons/type-date.svg +3 -0
  154. package/src/components/icon/new-icons/type-null.svg +3 -0
  155. package/src/components/icon/new-icons/type-number.svg +3 -0
  156. package/src/components/icon/new-icons/type-object.svg +3 -0
  157. package/src/components/icon/new-icons/type-string.svg +3 -0
  158. package/src/components/icon/new-icons/types.svg +6 -0
  159. package/src/components/icon/new-icons/unarchive.svg +16 -0
  160. package/src/components/icon/new-icons/unlink.svg +9 -0
  161. package/src/components/icon/new-icons/user.svg +3 -3
  162. package/src/components/icon/new-icons/user_plus.svg +10 -0
  163. package/src/components/icon/new-icons/warehouse.svg +3 -0
  164. package/src/components/icon/new-icons/warning_triangle.svg +5 -0
  165. package/src/components/icon/new-icons/warning_triangle_filled.svg +5 -0
  166. package/src/components/kanban/BoardCard.vue +1 -1
  167. package/src/components/kanban/BoardCardTimer.vue +1 -1
  168. package/src/components/modal/DeleteConfirmModal.vue +10 -6
  169. package/src/components/modal/ItemEditor.vue +1 -1
  170. package/src/components/modal/Modal.vue +1 -1
  171. package/src/components/overlay/SensitiveOverlay.vue +2 -4
  172. package/src/components/panels/Panel.vue +110 -23
  173. package/src/components/panels/PanelItemEdit.vue +8 -6
  174. package/src/components/panels/PanelList.vue +163 -40
  175. package/src/components/panels/helpers.ts +29 -11
  176. package/src/components/popover/Popover.vue +105 -22
  177. package/src/components/segmented-control/SegmentedControl.vue +9 -3
  178. package/src/components/sortable/draggable.js +1 -1
  179. package/src/components/table/Table2.vue +68 -67
  180. package/src/components/table/TableBody.vue +17 -22
  181. package/src/components/table/TableGroup.vue +40 -24
  182. package/src/components/table/TableHeader.vue +86 -81
  183. package/src/components/table/TableRowToggle.vue +1 -9
  184. package/src/components/table/TableRows.vue +49 -55
  185. package/src/components/table/mobile.js +4 -0
  186. package/src/components/table/table2.scss +34 -15
  187. package/src/components/text-field/MoneyField.vue +10 -4
  188. package/src/components/text-field/TextField.vue +17 -8
  189. package/src/components/tree/TreeEditor.vue +3 -2
  190. package/src/components/view/View.vue +73 -208
  191. package/src/directives/appendToBody.js +1 -0
  192. package/src/helpers/validators.js +9 -35
  193. package/src/helpers/validators.spec.js +11 -48
  194. package/src/locales/en.js +4 -6
  195. package/src/locales/pl.js +158 -0
  196. package/src/locales/uk.js +6 -7
  197. package/src/components/icon/components/nomi-calendar-view.vue +0 -4
  198. package/src/components/icon/components/nomi-kanban-view.vue +0 -6
  199. package/src/components/icon/components/nomi-list-view.vue +0 -7
  200. package/src/components/icon/components/nomi-table-config.vue +0 -9
  201. package/src/components/icon/new-icons/calendar-view.svg +0 -3
  202. package/src/components/icon/new-icons/kanban-view.svg +0 -5
  203. package/src/components/icon/new-icons/list-view.svg +0 -6
  204. package/src/components/icon/new-icons/table-config.svg +0 -8
@@ -20,16 +20,26 @@
20
20
  </div>
21
21
  </div>
22
22
  <div class="facets-list">
23
- <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item px-2" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
24
- <span class="facet-name text-dark d-flex align-items-center">
25
- <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
26
- <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
27
- </span>
28
- <span v-if="val.count" class="facet-stat">
29
- {{ val.count }}
30
- <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
31
- </span>
32
- </div>
23
+ <div v-for="(group, g) of groupedList">
24
+ <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
25
+ :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
26
+ <span class="facet-name text-dark d-flex align-items-center">
27
+ <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
28
+ <div class="w-100 text-truncate">{{ group.group }}</div>
29
+ </span>
30
+ </div>
31
+
32
+ <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)">
33
+ <span class="facet-name text-dark d-flex align-items-center">
34
+ <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
35
+ <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
36
+ </span>
37
+ <span v-if="val.count" class="facet-stat">
38
+ {{ val.count }}
39
+ <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
40
+ </span>
41
+ </div>
42
+ </div>
33
43
  </div>
34
44
 
35
45
  <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
@@ -76,7 +86,7 @@
76
86
  margin: 1px 0;
77
87
  &.active {
78
88
  .facet-bar-progress {
79
- background-color: var(--bs-primary);
89
+ background-color: var(--bs-blue);
80
90
  }
81
91
  }
82
92
  .facet-name {
@@ -105,12 +115,14 @@
105
115
  width: var(--bar-width);
106
116
  min-width: 5px;
107
117
  height: 10px;
108
- background-color: rgba(var(--bs-primary-rgb), 50%);
118
+ background-color: rgba(var(--bs-blue-rgb), 50%);
109
119
  transition: width 0.3s ease 0s;
110
120
  }
111
121
  }
112
122
  </style>
113
123
  <script>
124
+ import uniq from 'lodash/uniq';
125
+ import sortBy from 'lodash/sortBy';
114
126
  import { Vue, Prop, Model, Component } from 'vue-property-decorator';
115
127
  import itfTextField from '../text-field/TextField.vue';
116
128
  import itfButton from '../button/Button';
@@ -149,6 +161,33 @@ class FilterFacetsList extends Vue {
149
161
  return this.visibleList.length > this.limit;
150
162
  }
151
163
 
164
+ get hasGroups() {
165
+ const groups = uniq(this.items && this.items.map(item => item.group).filter(Boolean));
166
+ return groups.length > 1
167
+ }
168
+
169
+ isGroupSelected(items) {
170
+ return items.every(item => item.isSelected);
171
+ }
172
+
173
+ groupSelected(value, items) {
174
+ let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
175
+ if (value) {
176
+ items.forEach((item) => {
177
+ const itemValue = `${item.value}`;
178
+ if (!newVal.includes(itemValue)) {
179
+ newVal.push(itemValue);
180
+ }
181
+ });
182
+ } else {
183
+ items.forEach((item) => {
184
+ const itemValue = `${item.value}`;
185
+ newVal = newVal.filter(val => val !== itemValue);
186
+ });
187
+ }
188
+ this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
189
+ }
190
+
152
191
  get visibleList() {
153
192
  let list = this.items.map(val => {
154
193
  const isSelected = this.multiple
@@ -163,7 +202,22 @@ class FilterFacetsList extends Vue {
163
202
  if (this.isShowSelected) {
164
203
  return list.filter((val) => val.isSelected);
165
204
  }
166
- return list;
205
+ return sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
206
+ }
207
+
208
+ get groupedList() {
209
+ if (!this.hasGroups) {
210
+ return [{ items: this.mappedValues }];
211
+ }
212
+ const groups = {};
213
+ this.mappedValues.forEach((item) => {
214
+ const group = item.group || '';
215
+ if (!groups[group]) {
216
+ groups[group] = [];
217
+ }
218
+ groups[group].push(item);
219
+ });
220
+ return Object.entries(groups).map(([group, items]) => ({ group, items }));
167
221
  }
168
222
 
169
223
  get mappedValues() {
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
2
+ <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly, 'd-none': !visible}">
3
3
  <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
4
4
  <slot name="search">
5
5
  <div>
@@ -35,8 +35,8 @@
35
35
  class="itf-filter-panel__badge"
36
36
  :ref="'item-' + n"
37
37
  v-model="filter[facet.name]"
38
- :is-default="filter[facet.name] && filter[facet.name].isDefault"
39
- :text="filter[facet.name] && filter[facet.name].label"
38
+ :is-default="filter[facet.name].isDefault"
39
+ :text="filter[facet.name].label"
40
40
  :type="facet.type"
41
41
  :icon="facet.icon"
42
42
  :options="facet.options"
@@ -143,6 +143,7 @@ class FilterPanel extends Vue {
143
143
  @Prop({ type: Boolean, default: true }) showFilter;
144
144
  @Prop({ type: Boolean, default: false }) filtersOnly;
145
145
  @Prop(Boolean) mini;
146
+ @Prop({ type: Boolean, default: true }) visible;
146
147
  @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
147
148
 
148
149
  filter = {};
@@ -376,8 +377,11 @@ class FilterPanel extends Vue {
376
377
  }
377
378
  } else if (facet.type === 'date') {
378
379
  const date = DateTime.fromISO(value.value);
379
- value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO())).toFormat('dd MMM yyyy');
380
+ value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
380
381
  value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
382
+ if (value.isDefault && facet.options.defaultValue.label) {
383
+ value.label = facet.options.defaultValue.label;
384
+ }
381
385
  } else if (facet.type === 'month') {
382
386
  const date = DateTime.fromISO(value.value);
383
387
  value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));
@@ -0,0 +1,305 @@
1
+ <template>
2
+ <div>
3
+ <div class="px-1">
4
+ <div class="facets-filter-header">
5
+ <div v-if="title">{{title}}</div>
6
+ </div>
7
+
8
+ <itf-text-field small v-model="query" class="mb-2" :placeholder="$t('components.filter.search')" clearable />
9
+
10
+ <div class="d-flex justify-content-between small mb-2">
11
+ <a v-if="isSelectedAll" href="" @click.stop.prevent="onSelectAll(false)">{{$t('components.filter.deselectAll')}}</a>
12
+ <a v-else href="" @click.stop.prevent="onSelectAll(true)">{{$t('components.filter.selectAll')}}</a>
13
+
14
+ <span class="text-muted" v-if="!isHasSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</span>
15
+ <a v-else-if="!isShowSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</a>
16
+ <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showAll')}}</a>
17
+ </div>
18
+ <div v-if="!mappedValues.length">
19
+ <div class="text-muted text-center py-4">{{ $t('components.filter.noResults') }}</div>
20
+ </div>
21
+ </div>
22
+ <div class="facets-list">
23
+ <div v-for="(val, g) of groupedList" :key="g" :style="{paddingLeft: `${((val.level || 0) + 0.5) * 1}rem`}"
24
+ class="dropdown-item" :class="{'active': val.isSelected, 'active': isGroupSelected(val)}" @click="onFilterClick(val)">
25
+ <span class="facet-name text-dark d-flex align-items-center">
26
+ <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
27
+ <itf-icon new v-if="val.isGroup && groupIcon" :name="groupIcon" class="me-1" />
28
+ <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
29
+ </span>
30
+ <span v-if="val.count" class="facet-stat">
31
+ {{ val.count }}
32
+ <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
33
+ </span>
34
+ </div>
35
+ </div>
36
+
37
+ <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
38
+ <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
39
+ <span v-else>{{ $t('components.filter.showMore', { count: visibleList.length }) }}</span>
40
+ </itf-button>
41
+ </div>
42
+ </template>
43
+ <style lang="scss" scoped>
44
+ .facets-filter-header {
45
+ border-bottom: 1px solid var(--bs-border-color-translucent);
46
+ color: #A5A5A9;
47
+ padding: 0 0.75rem .5rem;
48
+ margin: 0 -.75rem .75rem;
49
+ }
50
+ .facets-list {
51
+ max-height: 50vh;
52
+ overflow: auto;
53
+ }
54
+ .dropdown-item {
55
+ --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .25);
56
+
57
+ cursor: pointer;
58
+ display: inline-flex;
59
+ -webkit-box-align: center;
60
+ align-items: center;
61
+ -webkit-box-pack: justify;
62
+ justify-content: space-between;
63
+ position: relative;
64
+ box-sizing: border-box;
65
+ min-height: 1.75rem;
66
+ width: 100%;
67
+ font-size: 0.875rem;
68
+ line-height: 1.25rem;
69
+ font-weight: 400;
70
+ white-space: normal;
71
+ user-select: none;
72
+ border-radius: 0.25rem;
73
+ border-width: 1px;
74
+ border-style: solid;
75
+ border-color: transparent;
76
+ border-image: initial;
77
+ transition: none 0s ease 0s;
78
+ margin: 1px 0;
79
+ &.active {
80
+ .facet-bar-progress {
81
+ background-color: var(--bs-blue);
82
+ }
83
+ }
84
+ .facet-name {
85
+ min-width: 0;
86
+ text-align: left;
87
+ line-height: 100%;
88
+ white-space: nowrap;
89
+
90
+ .itf-checkbox {
91
+ min-height: 1.25rem;
92
+ }
93
+ }
94
+ .facet-stat {
95
+ display: flex;
96
+ -webkit-box-align: center;
97
+ align-items: center;
98
+ margin-left: 0.25rem;
99
+ }
100
+ .facet-bar {
101
+ display: inline-block;
102
+ margin-left: 0.5rem;
103
+ width: 60px;
104
+ }
105
+ .facet-bar-progress {
106
+ display: block;
107
+ width: var(--bar-width);
108
+ min-width: 5px;
109
+ height: 10px;
110
+ background-color: rgba(var(--bs-blue-rgb), 50%);
111
+ transition: width 0.3s ease 0s;
112
+ }
113
+ }
114
+ </style>
115
+ <script>
116
+ import uniq from 'lodash/uniq';
117
+ import sortBy from 'lodash/sortBy';
118
+ import groupBy from 'lodash/groupBy';
119
+ import { Vue, Prop, Model, Component } from 'vue-property-decorator';
120
+ import itfTextField from '../text-field/TextField.vue';
121
+ import itfIcon from '../icon/Icon';
122
+ import itfButton from '../button/Button';
123
+ import itfCheckbox from '../checkbox/Checkbox.vue';
124
+
125
+ export default @Component({
126
+ name: 'FilterFacetsList',
127
+ components: {
128
+ itfCheckbox,
129
+ itfIcon,
130
+ itfButton,
131
+ itfTextField
132
+ }
133
+ })
134
+ class FilterFacetsList extends Vue {
135
+ @Model('input') value;
136
+ @Prop() items;
137
+ @Prop() item;
138
+ @Prop() total;
139
+ @Prop() options;
140
+ @Prop({ type: Number, default: 5 }) limit;
141
+ @Prop(Boolean) multiple;
142
+ @Prop(Boolean) showAll;
143
+ @Prop(String) title;
144
+
145
+ query = '';
146
+ showMore = false;
147
+ isShowSelected = false;
148
+
149
+ toggleMore() {
150
+ this.showMore = !this.showMore;
151
+ }
152
+
153
+ get groupIcon() {
154
+ return this.options?.groupIcon;
155
+ }
156
+
157
+ get flatList() {
158
+ return treeToFlat(this.items || []);
159
+
160
+ function getIdsDeep(items, mapFunc) {
161
+ return (items ?? []).reduce((acc, item) => {
162
+ const id = mapFunc(item);
163
+ if (id) {
164
+ acc.push(id);
165
+ }
166
+ if (item.items && item.items.length) {
167
+ acc.push(...getIdsDeep(item.items, mapFunc));
168
+ }
169
+ return acc;
170
+ }, []);
171
+ }
172
+ function treeToFlat(items, level = 0) {
173
+ return (items ?? []).reduce((acc, item) => {
174
+ acc.push({
175
+ ...item,
176
+ level,
177
+ ids: [item.isGroup ? `g:${item.value}` : item.value].concat(
178
+ getIdsDeep(item.items, (item) => item.isGroup ? `g:${item.value}` : item.value)
179
+ )
180
+ .filter(Boolean),
181
+ });
182
+ if (item.items && item.items.length) {
183
+ // acc.push({ ...item, group: item.label, level });
184
+ acc.push(...treeToFlat(item.items, level + 1));
185
+ }
186
+ return acc;
187
+ }, []);
188
+ }
189
+ }
190
+
191
+ get hasMore() {
192
+ if (this.showAll) {
193
+ return false;
194
+ }
195
+ return this.visibleList.length > this.limit;
196
+ }
197
+
198
+ get hasGroups() {
199
+ const groups = uniq(this.flatList && this.flatList.map(item => item.group).filter(Boolean));
200
+ return groups.length > 1
201
+ }
202
+
203
+ isGroupSelected(val) {
204
+ return (val.ids ?? []).every(id => this.value.includes(`${id}`));
205
+ }
206
+
207
+ groupSelected(value, ids) {
208
+ let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
209
+ console.info(value, ids);
210
+ if (value) {
211
+ ids.forEach((id) => {
212
+ const itemValue = `${id}`;
213
+ if (!newVal.includes(itemValue)) {
214
+ newVal.push(itemValue);
215
+ }
216
+ });
217
+ } else {
218
+ ids.forEach((id) => {
219
+ const itemValue = `${id}`;
220
+ newVal = newVal.filter(val => val !== itemValue);
221
+ });
222
+ }
223
+ this.$emit('input', this.multiple ? newVal : (newVal.length > 0 ? newVal[0] : null));
224
+ }
225
+
226
+ get visibleList() {
227
+ let list = this.flatList.map(val => {
228
+ const isSelected = this.multiple
229
+ ? Array.isArray(this.value) && this.value.map(String).includes(`${val.value}`)
230
+ : `${this.value}` === `${val.value}`;
231
+
232
+ return { ...val, isSelected };
233
+ });
234
+ if (this.query) {
235
+ list = list.filter((val) => val.label.toLowerCase().includes(this.query.toLowerCase()));
236
+ }
237
+ if (this.isShowSelected) {
238
+ return list.filter((val) => val.isSelected);
239
+ }
240
+ return this.hasGroups ? sortBy(list, (item) => item.group || item.label) : list;//sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
241
+ }
242
+
243
+ get groupedList() {
244
+ if (!this.hasGroups) {
245
+ return this.mappedValues;
246
+ }
247
+ const groups = groupBy(this.mappedValues, (item) => item.group || '');
248
+ return Object.entries(groups).reduce((acc, [group, items]) => [...acc, { label: group, isGroup: true }, ...(items.map(item => ({ ...item, level: 1 })))], []);
249
+ }
250
+
251
+ get mappedValues() {
252
+ const list = this.visibleList;
253
+ if (!this.showMore && !this.showAll) {
254
+ return list.slice(0, this.limit);
255
+ }
256
+ return list;
257
+ }
258
+
259
+ getPercent(item) {
260
+ return this.total ? Math.round((item.count / this.total) * 100) : 0;
261
+ }
262
+
263
+ onFilterClick(val) {
264
+ if (val.isGroup) {
265
+ this.groupSelected(!val.isSelected, val.ids);
266
+ return;
267
+ }
268
+ const value = `${val.value}`;
269
+ if (!this.multiple) {
270
+ return this.$emit('input', `${this.value}` === value ? null : value);
271
+ }
272
+ const newVal = [...Array.isArray(this.value) ? [...this.value] : []].map((s) => s.toString());
273
+ if (newVal.includes(value)) {
274
+ newVal.splice(newVal.indexOf(value), 1);
275
+ } else {
276
+ newVal.push(value);
277
+ }
278
+ this.$emit('input', newVal);
279
+ }
280
+
281
+ get isSelectedAll() {
282
+ return this.mappedValues.every(o => o.isSelected);
283
+ }
284
+
285
+ onSelectAll(isSelect = false) {
286
+ if (isSelect) {
287
+ this.$emit('input', this.visibleList.map((val) => `${val.value}`));
288
+ } else {
289
+ this.$emit('input', []);
290
+ }
291
+ this.isShowSelected = false;
292
+ }
293
+
294
+ get isHasSelected() {
295
+ return this.value && this.value.length > 0 && !this.query; // тільки коли не пошук
296
+ }
297
+
298
+ onShowSelected(isShow = false) {
299
+ if (!this.value.length && isShow) { // не показувати, якщо нічого не вибрано
300
+ return;
301
+ }
302
+ this.isShowSelected = isShow;
303
+ }
304
+ }
305
+ </script>
@@ -6,11 +6,12 @@
6
6
  <label class="itf-label__label form-label d-flex" v-if="label">
7
7
  {{label}}
8
8
  <span class="star" v-if="required">*</span>
9
- <itf-tooltip v-if="helpTooltip" class="ms-auto align-items-center">
10
- <template #activator><itf-icon :size="16" name="question_circle" class="itf-label__tooltip" /></template>
9
+ <itf-tooltip v-if="helpTooltip" class="align-items-center">
10
+ <template #activator><itf-icon name="help-alt" new class="itf-label__tooltip ms-1 mb-1" /></template>
11
11
  {{helpTooltip}}
12
- <div><a href="javascript:;" @click="onDetailsClick" v-if="helpDetails" v-text="helpDetails"></a></div>
12
+ <div><a href="" @click.prevent.stop="onDetailsClick" v-if="helpDetails" v-text="helpDetails"></a></div>
13
13
  </itf-tooltip>
14
+ <slot name="after-label"></slot>
14
15
  </label>
15
16
  <div v-if="left && helpText">
16
17
  <small class="text-muted" v-html="helpText"></small>
@@ -76,8 +77,7 @@ class itfLabel extends Mixins(ValidatableMixin) {
76
77
  }
77
78
 
78
79
  onDetailsClick() {
79
- slavik.askQuestion(this.helpDetails);
80
- console.info(slavik, this.helpDetails)
80
+ this.$emit('details');
81
81
  }
82
82
  }
83
83
  </script>
@@ -0,0 +1,5 @@
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">
2
+ <rect id="Filled/ai" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" />
3
+ <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" />
4
+ </svg>
5
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
4
+ </template>
@@ -0,0 +1,5 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ <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"/>
4
+ </svg>
5
+ </template>
@@ -0,0 +1,10 @@
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" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
2
+ <defs>
3
+ <clipPath id="clipPath_0">
4
+ <rect width="24.000000" height="24.000000" x="0.000000" y="0.000000" rx="6.153846" fill="rgb(255,255,255)" />
5
+ </clipPath>
6
+ </defs>
7
+ <rect id="Filled/payment-calendar, subscription" width="24.000000" height="24.000000" x="0.000000" y="0.000000" rx="6.153846" />
8
+ <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" />
9
+ </svg>
10
+ </template>
@@ -0,0 +1 @@
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>
@@ -0,0 +1,9 @@
1
+ <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">
2
+ <rect id="left icon" width="32.000000" height="32.000000" x="0.000000" y="0.000000" fill="rgb(228,233,237)" fill-opacity="0" />
3
+ <g id="Group">
4
+ <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" />
5
+ <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" />
6
+ <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" />
7
+ </g>
8
+ </svg>
9
+ </template>
@@ -0,0 +1,6 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M15 5C16.8856 5 17.8283 5.00015 18.4141 5.58594C18.9998 6.17172 19 7.11438 19 9V11C19 11.389 18.9973 11.7379 18.9922 12.0518C18.4552 11.8439 17.823 11.9563 17.3896 12.3896C17.2259 12.5534 17.1091 12.7457 17.0371 12.9502H15.2002C13.8757 12.9502 12.7541 13.8093 12.3564 15H9C7.11438 15 6.17172 14.9998 5.58594 14.4141C5.00015 13.8283 5 12.8856 5 11V9C5 7.11438 5.00015 6.17172 5.58594 5.58594C6.17172 5.00015 7.11438 5 9 5H15ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8ZM8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9ZM16 9C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z" fill="currentColor"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1318 13.1318C18.3076 12.9561 18.5928 12.9561 18.7686 13.1318L19.7686 14.1318C19.9443 14.3075 19.9443 14.5928 19.7686 14.7685L18.7686 15.7685C18.5928 15.9442 18.3076 15.9442 18.1318 15.7685C17.9561 15.5928 17.9561 15.3075 18.1318 15.1318L18.3633 14.9004H15.2002C14.6203 14.9004 14.1504 15.3703 14.1504 15.9502V16.9502C14.1504 17.1987 13.9487 17.4004 13.7002 17.4004C13.4517 17.4004 13.25 17.1987 13.25 16.9502V15.9502C13.25 14.8732 14.1232 14 15.2002 14H18.3633L18.1318 13.7685C17.9561 13.5928 17.9561 13.3075 18.1318 13.1318Z" fill="currentColor"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2002 16.4999C19.4487 16.5 19.6504 16.7016 19.6504 16.9501V17.9501C19.6504 19.0271 18.7771 19.9003 17.7002 19.9003H14.5371L14.7685 20.1318C14.9442 20.3075 14.9442 20.5928 14.7685 20.7685C14.5928 20.9442 14.3075 20.9442 14.1318 20.7685L13.1318 19.7685C12.9561 19.5928 12.9561 19.3075 13.1318 19.1318L14.1318 18.1318C14.3075 17.9561 14.5928 17.956 14.7685 18.1318C14.9442 18.3075 14.9442 18.5928 14.7685 18.7685L14.5371 18.9999H17.7002C18.28 18.9999 18.75 18.53 18.75 17.9501V16.9501C18.75 16.7016 18.9516 16.4999 19.2002 16.4999Z" fill="currentColor"/>
5
+ </svg>
6
+ </template>
@@ -0,0 +1,5 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ <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"/>
4
+ </svg>
5
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
4
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 10L12 14L16 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
4
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
4
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M16 14L12 10L8 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
4
+ </template>
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
4
+ </template>
@@ -1,5 +1,4 @@
1
- <template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
2
- <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
3
- <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.965 16.2C12.21 16.2 12.4172 16.1153 12.5866 15.9459C12.756 15.7765 12.8405 15.5695 12.84 15.325C12.8395 15.0805 12.7551 14.8733 12.5866 14.7034C12.4181 14.5335 12.2109 14.4491 11.965 14.45C11.7191 14.4509 11.5121 14.5356 11.3441 14.7041C11.1761 14.8726 11.0914 15.0795 11.09 15.325C11.0886 15.5705 11.1733 15.7777 11.3441 15.9466C11.5149 16.1155 11.7219 16.2 11.965 16.2ZM12 19C11.0317 19 10.1217 18.8161 9.27001 18.4484C8.41834 18.0807 7.67751 17.582 7.04751 16.9525C6.41751 16.323 5.91888 15.5821 5.55162 14.73C5.18435 13.8779 5.00048 12.9679 5.00002 12C4.99955 11.0321 5.18342 10.1221 5.55162 9.27C5.91981 8.41787 6.41845 7.67704 7.04751 7.04751C7.67658 6.41798 8.41741 5.91934 9.27001 5.55161C10.1226 5.18388 11.0326 5.00001 12 5.00001C12.9674 5.00001 13.8774 5.18388 14.73 5.55161C15.5826 5.91934 16.3234 6.41798 16.9525 7.04751C17.5816 7.67704 18.0804 8.41787 18.4491 9.27C18.8178 10.1221 19.0014 11.0321 19 12C18.9986 12.9679 18.8147 13.8779 18.4484 14.73C18.0821 15.5821 17.5834 16.323 16.9525 16.9525C16.3216 17.582 15.5807 18.0809 14.73 18.4491C13.8793 18.8173 12.9693 19.0009 12 19ZM12.07 8.99C12.3617 8.99 12.6155 9.08334 12.8316 9.27C13.0477 9.45667 13.1555 9.69 13.155 9.97C13.155 10.2267 13.0764 10.4542 12.9191 10.6525C12.7618 10.8508 12.5838 11.0375 12.385 11.2125C12.1167 11.4458 11.8805 11.7025 11.6766 11.9825C11.4727 12.2625 11.3705 12.5775 11.37 12.9275C11.37 13.0908 11.4314 13.228 11.5541 13.3391C11.6768 13.4502 11.8196 13.5055 11.9825 13.505C12.1575 13.505 12.3064 13.4467 12.4291 13.33C12.5518 13.2133 12.6305 13.0675 12.665 12.8925C12.7117 12.6475 12.8167 12.4289 12.98 12.2366C13.1433 12.0443 13.3183 11.8605 13.505 11.685C13.7733 11.4283 14.0039 11.1483 14.1966 10.845C14.3893 10.5417 14.4855 10.2033 14.485 9.83C14.485 9.235 14.243 8.74804 13.7591 8.36911C13.2752 7.99017 12.7121 7.80047 12.07 7.80001C11.6267 7.80001 11.2039 7.89334 10.8016 8.08001C10.3993 8.26667 10.093 8.55251 9.88251 8.93751C9.80084 9.0775 9.77471 9.22637 9.80411 9.3841C9.83351 9.54184 9.91214 9.6613 10.04 9.7425C10.2033 9.83584 10.3725 9.865 10.5475 9.83C10.7225 9.795 10.8683 9.69584 10.985 9.5325C11.1133 9.3575 11.2739 9.22334 11.4666 9.13C11.6593 9.03667 11.8605 8.99 12.07 8.99Z" fill="currentColor"/>
4
3
  </svg>
5
4
  </template>
@@ -0,0 +1,7 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.3535 7.47363V11.6419" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M15.966 13.7257L12.3535 11.6416" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M7.47353 9.18446H4V5.71094" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M6.9525 17.0431C8.02097 18.1124 9.38259 18.8409 10.8651 19.1362C12.3476 19.4316 13.8845 19.2806 15.2812 18.7024C16.6779 18.1242 17.8717 17.1448 18.7117 15.8879C19.5517 14.6311 20 13.1534 20 11.6418C20 10.1301 19.5517 8.6524 18.7117 7.39558C17.8717 6.13876 16.6779 5.1593 15.2812 4.5811C13.8845 4.0029 12.3476 3.85193 10.8651 4.14729C9.38259 4.44266 8.02097 5.17109 6.9525 6.24043L4 9.18424" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
6
+ </svg>
7
+ </template>
@@ -1,4 +1,4 @@
1
1
  <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.40002C13.9882 4.40002 15.6 6.0118 15.6 8.00002V10.0491C16.033 10.1019 16.3329 10.2116 16.5607 10.4394C17 10.8787 17 11.5858 17 13V15C17 16.4142 17 17.1214 16.5607 17.5607C16.1213 18 15.4142 18 14 18H10C8.58579 18 7.87868 18 7.43934 17.5607C7 17.1214 7 16.4142 7 15V13C7 11.5858 7 10.8787 7.43934 10.4394C7.66715 10.2116 7.96695 10.1019 8.4 10.0491L8.4 8.00002C8.4 6.0118 10.0118 4.40002 12 4.40002ZM14.4 8.00002V10.0005C14.2733 10 14.1401 10 14 10H10C9.85987 10 9.72668 10 9.6 10.0005L9.6 8.00002C9.6 6.67454 10.6745 5.60002 12 5.60002C13.3255 5.60002 14.4 6.67454 14.4 8.00002ZM12.6 13C12.6 12.6687 12.3314 12.4 12 12.4C11.6686 12.4 11.4 12.6687 11.4 13V15C11.4 15.3314 11.6686 15.6 12 15.6C12.3314 15.6 12.6 15.3314 12.6 15V13Z" fill="currentColor"/>
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.3999C13.9882 4.3999 15.6 6.01168 15.6 7.9999V10.0489C16.033 10.1018 16.3329 10.2114 16.5607 10.4392C17 10.8786 17 11.5857 17 12.9999V14.9999C17 16.4141 17 17.1212 16.5607 17.5606C16.1213 17.9999 15.4142 17.9999 14 17.9999H10C8.58579 17.9999 7.87868 17.9999 7.43934 17.5606C7 17.1212 7 16.4141 7 14.9999V12.9999C7 11.5857 7 10.8786 7.43934 10.4392C7.66715 10.2114 7.96695 10.1018 8.4 10.0489L8.4 7.9999C8.4 6.01168 10.0118 4.3999 12 4.3999ZM14.4 7.9999V10.0003C14.2733 9.99991 14.1401 9.99991 14 9.99991H10C9.85987 9.99991 9.72668 9.99991 9.6 10.0003L9.6 7.9999C9.6 6.67442 10.6745 5.5999 12 5.5999C13.3255 5.5999 14.4 6.67442 14.4 7.9999ZM12.6 12.9999C12.6 12.6685 12.3314 12.3999 12 12.3999C11.6686 12.3999 11.4 12.6685 11.4 12.9999V14.9999C11.4 15.3313 11.6686 15.5999 12 15.5999C12.3314 15.5999 12.6 15.3313 12.6 14.9999V12.9999Z" fill="currentColor"/>
3
3
  </svg>
4
4
  </template>