@it-enterprise/forcebpm-ui-kit 1.0.2-beta.22 → 1.0.2-beta.24

package/index.js

@@ -1,5 +1,8 @@
-// Global styles (loaded first, component styles will override)
-import './src/scss/index.scss'
+// Load fonts
+import './src/assets/fonts/loadFonts.js'
+
+// Global styles
+import './src/assets/scss/index.scss'
 
 // Components
 export { default as FHtmlContent } from './src/FHtmlContent.vue'
@@ -22,6 +25,10 @@ export { default as FUserRoles } from './src/FUserRoles.vue'
 export { default as FDatePicker } from './src/f-date-picker/FDatePicker.vue'
 export { default as FMenuDatePicker } from './src/f-date-picker/FMenuDatePicker.vue'
 export { default as FTextFieldDate } from './src/f-date-picker/FTextFieldDate.vue'
+// export { default as FUserGroupPicker } from './src/f-user-group-picker/FUserGroupPicker.vue'
+
+// Utils
+export { hexToRGBA, createRadialGradient } from './src/utils/color.js'
 
 // Icon components
 export { FIcon, forcebpmIcon } from './src/forcebpmIcon.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.22",
+  "version": "1.0.2-beta.24",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

package/src/FNoData.vue

@@ -1,10 +1,21 @@
 <script setup>
 // FNoData
-defineProps({
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import { createRadialGradient } from './utils/color'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
   text: {
     type: String,
     default: null
   },
+  isSearch: {
+    type: Boolean,
+    default: false
+  },
   height: {
     type: String,
     default: '100%',
@@ -18,18 +29,28 @@ defineProps({
     validator: value => {
       return /^(calc\([^()]+\)|\d+(\.\d+)?(px|em|rem|vh|vw|%)|auto)$/.test(value)
     }
-  },
-  gradient: {
-    type: String,
-    default: ''
   }
 })
+
+const { current } = useTheme()
+const gradient = computed(() => {
+  const primary = current.value.colors.primary
+  const spread = current.value.colors.disabled
+  return createRadialGradient(primary, spread)
+})
+
+const dataText = computed(() => {
+  if (props.text) {
+    return props.text
+  }
+  return props.isSearch ? t('noData.matches') : t('noData.title')
+})
 </script>
 
 <template>
   <div class="f-no-data" :style="`height: ${height}; width: ${width}`">
     <div class="f-no-data-overlay" :style="`background: ${gradient}`">
-      <span class="f-no-data-text">{{ text || $t('noData.title') }}</span>
+      <span class="f-no-data-text">{{ dataText }}</span>
     </div>
   </div>
 </template>

package/src/FNotify.vue

@@ -8,7 +8,7 @@ const props = defineProps({
     default: () => []
   }
 })
-const emit = defineEmits(['removeNotify', 'goToL'])
+const emit = defineEmits(['removeNotify', 'goTo'])
 const timers = ref({}) // Store intervals for each notification by id
 const hoveredNotifyId = ref(null)
 const removeNotifyById = id => {
@@ -16,8 +16,8 @@ const removeNotifyById = id => {
   emit('removeNotify', id)
 }
 
-const goToL = nf => {
-  emit('goToL', nf)
+const goTo = nf => {
+  emit('goTo', nf)
 }
 const removeNotifyAfterTimeOut = notify => {
   // Initialize timer object for this notification
@@ -160,16 +160,16 @@ watch(
           <span class="snack-text selectable-text">
             {{ nf.text }}
           </span>
-          <span v-if="nf.commentId && nf.taskId" class="link-open-text cursor-pointer" @click.stop="goToL(nf)">
+          <span v-if="nf.commentId && nf.taskId" class="link-open-text cursor-pointer" @click.stop="goTo(nf)">
             {{ $t('notification.openDescussion') }}
           </span>
-          <span v-else-if="nf.taskId" class="link-open-text cursor-pointer" @click.stop="goToL(nf)">
+          <span v-else-if="nf.taskId" class="link-open-text cursor-pointer" @click.stop="goTo(nf)">
             {{ $t('notification.openTask') }}
           </span>
           <span
             v-else-if="nf.businessObjectKey && nf.businessObjectKeyType && nf.businessObjectDefinitionCode"
             class="link-open-text cursor-pointer"
-            @click.stop="goToL(nf)"
+            @click.stop="goTo(nf)"
           >
             {{ $t('notification.openDocument') }}
           </span>

package/src/assets/fonts/loadFonts.js

@@ -0,0 +1,55 @@
+// Import fonts to ensure Vite processes them correctly
+import regularWoff2 from './ProximaNova-Regular.woff2?url'
+import regularWoff from './ProximaNova-Regular.woff?url'
+import semiboldWoff2 from './ProximaNova-Semibold.woff2?url'
+import semiboldWoff from './ProximaNova-Semibold.woff?url'
+import boldWoff2 from './ProximaNova-Bold.woff2?url'
+import boldWoff from './ProximaNova-Bold.woff?url'
+
+// Create and inject styles
+const fontStyles = document.createElement('style')
+fontStyles.textContent = `
+  /* Proxima Nova Font Family */
+
+  @font-face {
+    font-family: 'Proxima Nova';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src:
+      url('${regularWoff2}') format('woff2'),
+      url('${regularWoff}') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Proxima Nova';
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    src:
+      url('${semiboldWoff2}') format('woff2'),
+      url('${semiboldWoff}') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Proxima Nova';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src:
+      url('${boldWoff2}') format('woff2'),
+      url('${boldWoff}') format('woff');
+  }
+`
+
+// Inject styles at the beginning of head
+document.head.insertAdjacentElement('afterbegin', fontStyles)
+
+export default {
+  regularWoff2,
+  regularWoff,
+  semiboldWoff2,
+  semiboldWoff,
+  boldWoff2,
+  boldWoff
+}

package/src/assets/icons/bell-mute.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.80486 16.0233H4.88678C5.01704 17.0418 5.63723 17.9322 6.54731 18.4074C7.45758 18.8828 8.54261 18.8828 9.45273 18.4074C10.363 17.9322 10.9832 17.0418 11.1134 16.0233H14.1953C14.6629 16.0235 15.1121 15.842 15.4486 15.5173C15.785 15.1927 15.9823 14.75 15.9988 14.2828C16.0155 13.8156 15.8501 13.3602 15.5375 13.0124L14.1526 11.4674V8.61669C14.1501 7.42003 13.799 6.25013 13.1428 5.24949C12.4864 4.249 11.553 3.46108 10.4564 2.98207V2.52185C10.4638 1.89106 10.232 1.2808 9.8077 0.813922C9.38326 0.347185 8.79802 0.0584029 8.16936 0.00565017C7.49035 -0.040455 6.82267 0.197149 6.32537 0.661746C5.82808 1.12634 5.54581 1.77636 5.54567 2.45693V2.98406C4.44916 3.46365 3.51587 4.25201 2.85948 5.25275C2.20324 6.25368 1.85222 7.42387 1.8495 8.62067V11.4592L0.462618 13.0042C0.150056 13.3518 -0.0154149 13.8075 0.00113141 14.2747C0.0178204 14.7419 0.215118 15.1845 0.551432 15.5092C0.887898 15.834 1.33722 16.0153 1.80479 16.0153L1.80486 16.0233ZM8.00122 17.542C7.56138 17.5413 7.13509 17.3904 6.79283 17.1142C6.45057 16.838 6.21309 16.4531 6.11961 16.0233H9.8829C9.78942 16.4531 9.55195 16.838 9.20968 17.1142C8.86741 17.3904 8.44105 17.5413 8.00122 17.542ZM1.36893 13.8254L2.90984 12.108C3.01011 11.9967 3.0657 11.8523 3.06598 11.7025V8.6206C3.06838 7.60074 3.3859 6.60662 3.97494 5.77402C4.56399 4.94141 5.39575 4.31121 6.35678 3.96949C6.4753 3.92748 6.57812 3.8497 6.65067 3.74702C6.72337 3.6442 6.76226 3.52144 6.76226 3.39556V2.45688C6.76269 2.12833 6.89337 1.81324 7.12559 1.58072C7.35768 1.3482 7.67249 1.2171 8.00106 1.21598H8.08818C8.40937 1.24723 8.7068 1.39871 8.92093 1.64013C9.13492 1.8817 9.24962 2.1951 9.24198 2.5177V3.39162C9.24184 3.51749 9.28087 3.64025 9.35343 3.74293C9.42612 3.84575 9.5288 3.9234 9.64746 3.9654C10.6083 4.30696 11.4401 4.93733 12.0288 5.76993C12.6175 6.60253 12.9345 7.59679 12.9362 8.61666V11.7006C12.9364 11.8503 12.992 11.9947 13.0923 12.106L14.6332 13.8235C14.7352 13.9367 14.7892 14.0853 14.7838 14.2377C14.7783 14.39 14.714 14.5343 14.6042 14.6401C14.4943 14.746 14.3478 14.805 14.1952 14.8047H1.80501C1.65254 14.805 1.50588 14.746 1.39613 14.6401C1.28638 14.5343 1.22188 14.39 1.21651 14.2377C1.21114 14.0852 1.26502 13.9367 1.36714 13.8235L1.36893 13.8254Z" fill="#C9CBD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8132 2.89393C16.067 3.14778 16.067 3.55933 15.8132 3.81317L1.81317 17.8132C1.55933 18.067 1.14778 18.067 0.893935 17.8132C0.640094 17.5593 0.640094 17.1478 0.893935 16.8939L14.8939 2.89393C15.1478 2.64009 15.5593 2.64009 15.8132 2.89393Z" fill="#C9CBD2"/>
+</svg>

package/src/assets/icons/bell.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.92375 17.0788H5.20869C5.34753 18.1644 6.00857 19.1135 6.97861 19.62C7.94884 20.1267 9.10534 20.1267 10.0754 19.62C11.0456 19.1135 11.7067 18.1644 11.8455 17.0788H15.1304C15.6288 17.079 16.1076 16.8856 16.4662 16.5394C16.8248 16.1935 17.0351 15.7216 17.0527 15.2237C17.0705 14.7256 16.8942 14.2402 16.561 13.8695L15.0849 12.2228V9.1843C15.0822 7.90881 14.708 6.66185 14.0085 5.5953C13.3089 4.5289 12.314 3.68907 11.1453 3.17851V2.68797C11.1531 2.01563 10.906 1.36517 10.4538 0.867537C10.0014 0.370055 9.37757 0.0622501 8.70751 0.00602237C7.98377 -0.04312 7.2721 0.210136 6.74205 0.705338C6.21199 1.20054 5.91114 1.89337 5.91098 2.61878V3.18063C4.74224 3.69181 3.74747 4.5321 3.04784 5.59877C2.34838 6.66563 1.97423 7.9129 1.97134 9.18854V12.214L0.493092 13.8608C0.15994 14.2313 -0.0164303 14.7171 0.00120594 15.215C0.0189943 15.713 0.229289 16.1847 0.587757 16.5309C0.946387 16.877 1.42531 17.0703 1.92368 17.0703L1.92375 17.0788ZM8.52829 18.6975C8.05948 18.6968 7.6051 18.5359 7.2403 18.2416C6.87549 17.9472 6.62237 17.537 6.52273 17.0788H10.5339C10.4343 17.537 10.1812 17.9471 9.81635 18.2416C9.45153 18.536 8.9971 18.6968 8.52829 18.6975ZM1.45911 14.7361L3.10152 12.9056C3.2084 12.787 3.26765 12.633 3.26795 12.4734V9.18847C3.27051 8.10142 3.60894 7.04182 4.23678 6.15437C4.86463 5.26692 5.75119 4.5952 6.77552 4.23097C6.90185 4.1862 7.01144 4.10329 7.08878 3.99385C7.16626 3.88426 7.20771 3.7534 7.20771 3.61924V2.61872C7.20817 2.26853 7.34746 1.93268 7.59498 1.68485C7.84236 1.43702 8.1779 1.29727 8.52812 1.29608H8.62098C8.96333 1.32939 9.28035 1.49084 9.50858 1.74817C9.73666 2.00565 9.85892 2.3397 9.85078 2.68355V3.61503C9.85063 3.7492 9.89223 3.88005 9.96957 3.98949C10.0471 4.09908 10.1565 4.18185 10.283 4.22662C11.3071 4.59067 12.1937 5.26256 12.8211 6.15001C13.4487 7.03746 13.7865 8.09722 13.7883 9.18426V12.4713C13.7886 12.631 13.8479 12.7849 13.9547 12.9035L15.5971 14.7341C15.7058 14.8548 15.7634 15.0131 15.7577 15.1756C15.7518 15.3379 15.6832 15.4917 15.5662 15.6044C15.4491 15.7174 15.2929 15.7802 15.1303 15.7799H1.92391C1.7614 15.7802 1.60508 15.7174 1.4881 15.6044C1.37112 15.4917 1.30237 15.3379 1.29665 15.1756C1.29092 15.0131 1.34835 14.8548 1.45719 14.7341L1.45911 14.7361Z" fill="#C9CBD2"/>
+</svg>

package/src/assets/icons/checkbox-false.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.25" y="0.25" width="15.5" height="15.5" rx="2.75" stroke="#888EA4" stroke-width="0.5"/>
+</svg>

package/src/assets/icons/checkbox-true.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.25" y="0.25" width="15.5" height="15.5" rx="2.75" stroke="#97B960" stroke-width="0.5"/>
+<path opacity="0.99" d="M5.50315 10.1265L3.0009 7.60705L2.50045 8.11095L2 8.61485L5.50315 12.1441L13.5819 4.00779L12.581 3L5.50315 10.1265Z" fill="#97B960"/>
+</svg>

package/src/assets/icons/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.15234 0.640015L8.10804 7.92002L15.0637 0.640015" stroke="#5E5CE6"/>
+</svg>

package/src/assets/icons/dots.svg

@@ -0,0 +1,5 @@
+<svg width="3" height="16" viewBox="0 0 3 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.41177" cy="14.5882" r="1.41177" transform="rotate(-90 1.41177 14.5882)" fill="#888EA4"/>
+<circle cx="1.41177" cy="8.0001" r="1.41177" transform="rotate(-90 1.41177 8.0001)" fill="#888EA4"/>
+<circle cx="1.41177" cy="1.41172" r="1.41177" transform="rotate(-90 1.41177 1.41172)" fill="#888EA4"/>
+</svg>

package/src/assets/icons/filter.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.52988 0.60185C9.52745 0.66632 9.54812 0.559276 9.52866 0.61888C9.52501 0.631044 9.49947 0.684566 9.52623 0.635909C9.51893 0.650506 9.50798 0.665103 9.50068 0.6797C9.51893 0.638342 9.54934 0.617663 9.53353 0.637126C9.52623 0.645641 9.51893 0.655372 9.51163 0.663887C9.47757 0.706461 9.44473 0.749035 9.41067 0.791609C9.2793 0.958257 9.14793 1.1249 9.01655 1.29277C8.59933 1.8219 8.1821 2.35104 7.76487 2.88018C7.33792 3.42148 6.91096 3.96278 6.48522 4.50408C6.28451 4.75952 6.08259 5.01375 5.88188 5.2692C5.81133 5.35921 5.81011 5.42733 5.81011 5.52586C5.81011 5.62317 5.81011 5.72048 5.81011 5.81779C5.81011 6.14136 5.81011 6.46492 5.81011 6.78849C5.81011 7.37601 5.81011 7.96232 5.81011 8.54984C5.81011 8.56687 5.81011 8.58512 5.81011 8.60215C5.81011 8.60336 5.81011 8.60458 5.81011 8.60579C5.81011 8.61188 5.81011 8.61796 5.81011 8.62404C5.80768 8.65202 5.8089 8.64837 5.81133 8.61431C5.81376 8.61796 5.80038 8.66175 5.79673 8.6654C5.82106 8.64107 5.81133 8.63742 5.79916 8.65567C5.79673 8.66053 5.79308 8.6654 5.79065 8.67026C5.77605 8.69216 5.77849 8.68973 5.79795 8.66297C5.79065 8.67148 5.78214 8.67999 5.77362 8.68851C5.75416 8.70554 5.75659 8.70432 5.78335 8.68364C5.76267 8.71041 5.71402 8.72135 5.68482 8.73838C5.64833 8.75906 5.61184 8.78096 5.57535 8.80164C5.28462 8.9695 4.99269 9.13858 4.70197 9.30644C4.59857 9.36605 4.49639 9.42565 4.393 9.48526C4.38449 9.49012 4.37597 9.49499 4.36746 9.49985C4.36624 9.50107 4.36502 9.50107 4.36381 9.50229C4.36137 9.5035 4.35164 9.50715 4.35043 9.50837C4.39057 9.49255 4.39543 9.49012 4.36381 9.50107C4.35408 9.50472 4.34313 9.50715 4.33218 9.50958C4.30177 9.52053 4.38084 9.51445 4.32002 9.50958C4.31393 9.50958 4.30907 9.50958 4.30299 9.50958C4.27623 9.50715 4.28109 9.50837 4.3188 9.51202C4.3188 9.51323 4.27501 9.50107 4.27136 9.49985C4.22149 9.48769 4.31393 9.52783 4.27136 9.49864C4.26285 9.49255 4.25311 9.48769 4.2446 9.48282C4.19959 9.45728 4.27866 9.52053 4.2446 9.48161C4.20811 9.43903 4.23487 9.48526 4.24095 9.48404C4.23608 9.48526 4.21662 9.44146 4.21176 9.43782C4.19229 9.41835 4.22635 9.49134 4.21419 9.44511C4.21297 9.44146 4.20081 9.39889 4.20202 9.39767C4.20324 9.40862 4.20446 9.41957 4.20567 9.4293C4.20446 9.41835 4.20446 9.4074 4.20446 9.39646C4.20446 9.39281 4.20446 9.39038 4.20446 9.38673C4.20446 9.36848 4.20446 9.35023 4.20446 9.33199C4.20446 9.25171 4.20446 9.17264 4.20446 9.09236C4.20446 8.44158 4.20446 7.7908 4.20446 7.14003C4.20446 6.59508 4.20446 6.05013 4.20446 5.50518C4.20446 5.41395 4.19716 5.34948 4.13269 5.26798C4.11566 5.24608 4.09741 5.22419 4.08038 5.20108C3.97456 5.06606 3.86873 4.93225 3.76169 4.79723C3.37 4.29972 2.97832 3.80343 2.58664 3.30592C2.14508 2.74637 1.70475 2.18683 1.26319 1.62606C1.00896 1.30372 0.754733 0.981368 0.501721 0.659021C0.494423 0.650506 0.488341 0.641991 0.481042 0.63226C0.466445 0.614014 0.493206 0.629827 0.515102 0.674834C0.507803 0.660238 0.496856 0.645641 0.489557 0.631044C0.516318 0.6797 0.490774 0.626178 0.487124 0.614014C0.482259 0.586037 0.482259 0.587253 0.487124 0.617663C0.485908 0.605499 0.485908 0.592119 0.487124 0.579955C0.484692 0.530082 0.472527 0.611581 0.485908 0.587253C0.490773 0.577522 0.493206 0.559276 0.496856 0.548328C0.50902 0.497239 0.468878 0.590902 0.498072 0.548328C0.500505 0.544679 0.519967 0.506971 0.523616 0.508187C0.517534 0.505754 0.490774 0.553194 0.527266 0.51062C0.55281 0.481426 0.517534 0.528866 0.513885 0.517918C0.512669 0.514269 0.550377 0.494806 0.554027 0.492374C0.577138 0.48021 0.572273 0.482642 0.53943 0.497239C0.549161 0.49359 0.560109 0.489941 0.56984 0.487508C0.574706 0.486292 0.580787 0.485075 0.585653 0.483859C0.606332 0.48021 0.606332 0.478993 0.585653 0.482642C0.580787 0.483859 0.574706 0.483859 0.56984 0.485075C0.580788 0.483859 0.591735 0.483859 0.602683 0.483859C0.602683 0.483859 0.602683 0.483859 0.603899 0.483859C0.606332 0.483859 0.607548 0.483859 0.609981 0.483859C0.69148 0.482642 0.772979 0.483859 0.854479 0.483859C1.29482 0.483859 1.73516 0.483859 2.17549 0.483859C2.8506 0.483859 3.52449 0.483859 4.19959 0.483859C4.93673 0.483859 5.67266 0.483859 6.4098 0.483859C7.03868 0.483859 7.66635 0.483859 8.29523 0.483859C8.64312 0.483859 8.99223 0.483859 9.34012 0.483859C9.36445 0.483859 9.38756 0.483859 9.41189 0.483859C9.4131 0.483859 9.41554 0.483859 9.41675 0.483859C9.42283 0.483859 9.43257 0.483859 9.43378 0.483859C9.48852 0.482642 9.38391 0.466829 9.43378 0.483859C9.44351 0.487508 9.45446 0.489941 9.46419 0.492374C9.51528 0.504538 9.42162 0.464396 9.46419 0.49359C9.46784 0.496023 9.50555 0.515485 9.50433 0.519135C9.50677 0.513053 9.45933 0.486292 9.5019 0.522784C9.53839 0.55441 9.4873 0.489941 9.49825 0.515485C9.50312 0.526433 9.51285 0.538597 9.51893 0.548328C9.54812 0.590902 9.50677 0.497239 9.52015 0.548328C9.52136 0.551977 9.53353 0.594552 9.53231 0.595768C9.53109 0.58482 9.52988 0.573873 9.52866 0.564142C9.52988 0.579955 9.52988 0.590903 9.52988 0.60185C9.53231 0.729573 9.63935 0.851213 9.77316 0.845131C9.9021 0.839049 10.0201 0.738087 10.0164 0.60185C10.0091 0.269772 9.74761 0.00824452 9.41554 0.0021625C9.39607 0.0021625 9.37539 0.0021625 9.35593 0.0021625C9.23186 0.0021625 9.10779 0.0021625 8.9825 0.0021625C8.46796 0.0021625 7.95342 0.0021625 7.43888 0.0021625C6.72363 0.0021625 6.00839 0.0021625 5.29314 0.0021625C4.556 0.0021625 3.81764 0.0021625 3.0805 0.0021625C2.49906 0.0021625 1.91883 0.0021625 1.33739 0.0021625C1.09168 0.0021625 0.845964 -0.00270312 0.601466 0.0021625C0.276686 0.00824452 0.0163757 0.261257 0.000562388 0.586037C-0.00673604 0.744169 0.0577333 0.880407 0.151397 0.999615C0.237761 1.10909 0.325343 1.21978 0.411707 1.32926C0.792442 1.81339 1.17439 2.2963 1.55513 2.78043C2.00885 3.35579 2.46135 3.92993 2.91507 4.50529C3.19363 4.85805 3.47218 5.21202 3.74952 5.56478C3.7629 5.58181 3.77628 5.59884 3.78966 5.61587C3.76534 5.5587 3.74222 5.50153 3.7179 5.44436C3.7179 5.62317 3.7179 5.8032 3.7179 5.98201C3.7179 6.3895 3.7179 6.79578 3.7179 7.20328C3.7179 7.63997 3.7179 8.07666 3.7179 8.51335C3.7179 8.78826 3.7179 9.06195 3.7179 9.33685C3.7179 9.51567 3.76047 9.68475 3.88819 9.81855C4.04389 9.98155 4.29934 10.0436 4.51099 9.96817C4.56573 9.94871 4.61074 9.92438 4.65939 9.8964C4.99755 9.70056 5.3345 9.50593 5.67266 9.31009C5.7651 9.25657 5.85634 9.1994 5.95 9.14953C6.12759 9.05465 6.25897 8.90016 6.28694 8.69581C6.29302 8.65323 6.29546 8.61309 6.29546 8.57174C6.29546 8.28223 6.29546 7.99394 6.29546 7.70444C6.29546 7.26167 6.29546 6.8189 6.29546 6.37612C6.29546 6.08054 6.29546 5.78495 6.29546 5.48936C6.29546 5.47477 6.29546 5.45895 6.29546 5.44436C6.27113 5.50153 6.24802 5.5587 6.22369 5.61587C6.3502 5.45409 6.47792 5.29352 6.60442 5.13174C6.90488 4.75101 7.20533 4.36906 7.50578 3.98832C7.86705 3.52974 8.22832 3.07237 8.5896 2.61378C8.89127 2.23062 9.19415 1.84745 9.49582 1.46428C9.62354 1.3025 9.75248 1.14072 9.87899 0.977719C9.96535 0.868243 10.0091 0.742953 10.014 0.60185C10.0177 0.474128 9.89966 0.352487 9.77073 0.358569C9.63814 0.364651 9.53353 0.465613 9.52988 0.60185Z" fill="#3B3B47"/>
+</svg>

package/src/assets/icons/pass-eye-close.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1638 6.12757C14.7278 4.8429 15.7417 3.00907 15.9979 1.0014C16.0119 0.884732 16.0028 0.766448 15.971 0.653303C15.9393 0.540158 15.8856 0.434366 15.813 0.34197C15.7405 0.249573 15.6504 0.17238 15.5479 0.114798C15.4455 0.0572168 15.3327 0.020374 15.2161 0.00637376C15.0994 -0.00762647 14.9811 0.00149008 14.868 0.0332027C14.7548 0.0649153 14.649 0.118603 14.5566 0.1912C14.4642 0.263798 14.387 0.353883 14.3295 0.456313C14.2719 0.558743 14.235 0.671512 14.221 0.788181C14.0086 2.2863 13.2626 3.6574 12.12 4.6494C10.9775 5.64139 9.51523 6.1876 8.00212 6.1876C6.48902 6.1876 5.02677 5.64139 3.88422 4.6494C2.74166 3.6574 1.9956 2.2863 1.78321 0.788181C1.76921 0.671512 1.73236 0.558743 1.67478 0.456313C1.6172 0.353883 1.54001 0.263798 1.44761 0.1912C1.35521 0.118603 1.24942 0.0649153 1.13628 0.0332027C1.02313 0.00149008 0.904849 -0.00762647 0.788181 0.00637376C0.671512 0.020374 0.558743 0.0572168 0.456313 0.114798C0.353883 0.17238 0.263798 0.249573 0.1912 0.34197C0.118603 0.434366 0.0649151 0.540158 0.0332025 0.653303C0.00148992 0.766448 -0.00762642 0.884732 0.00637381 1.0014C0.260315 3.00775 1.27088 4.84138 2.83154 6.12757L0.788181 8.18869C0.642635 8.35865 0.56658 8.57727 0.575217 8.80086C0.583853 9.02445 0.676544 9.23655 0.834766 9.39478C0.992988 9.553 1.20509 9.64569 1.42868 9.65432C1.65228 9.66296 1.87089 9.58691 2.04085 9.44136L4.35962 7.13148C5.22121 7.56687 6.15409 7.84373 7.11371 7.94882V11.1116C7.11371 11.3472 7.20731 11.5732 7.37392 11.7398C7.54053 11.9064 7.7665 12 8.00212 12C8.23775 12 8.46372 11.9064 8.63033 11.7398C8.79694 11.5732 8.89054 11.3472 8.89054 11.1116V7.94882C9.85016 7.84373 10.783 7.56687 11.6446 7.13148L13.9634 9.44136C14.1334 9.58691 14.352 9.66296 14.5756 9.65432C14.7992 9.64569 15.0113 9.553 15.1695 9.39478C15.3277 9.23655 15.4204 9.02445 15.429 8.80086C15.4377 8.57727 15.3616 8.35865 15.2161 8.18869L13.1638 6.12757Z" fill="#5E5CE6"/>
+</svg>

package/src/assets/icons/pass-eye-open.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6069 10.0148C19.5351 9.91549 18.7896 8.89882 17.5709 7.73616L19.1676 6.13882C19.4573 5.84993 19.4573 5.38082 19.1676 5.0926C18.8793 4.80305 18.4102 4.80305 18.1211 5.0926L16.4567 6.75682C15.8751 6.28771 15.2291 5.8286 14.5267 5.42838L15.5998 3.65549C15.8111 3.30549 15.6996 2.85038 15.3496 2.6386C14.9998 2.42638 14.5445 2.53927 14.3331 2.8886L13.1913 4.77616C12.5293 4.50593 11.8322 4.30305 11.1087 4.19727V2.06171C11.1087 1.65304 10.7773 1.32104 10.368 1.32104C9.95934 1.32104 9.62801 1.65304 9.62801 2.06171V4.12527C8.63867 4.17416 7.6929 4.41593 6.80867 4.77638L5.66712 2.88949C5.45601 2.53971 5.00045 2.42638 4.65045 2.63904C4.3009 2.85082 4.1889 3.30571 4.40045 3.65593L5.47356 5.42882C4.77201 5.82882 4.12512 6.28816 3.54356 6.75771L1.87867 5.09282C1.58979 4.80327 1.12067 4.80327 0.831786 5.09282C0.542897 5.38105 0.542897 5.85038 0.831786 6.13905L2.42979 7.73638C1.21067 8.89882 0.465341 9.91571 0.393341 10.015C0.229563 10.2424 0.229563 10.5486 0.393341 10.7766C0.568008 11.0175 4.71445 16.6788 10.0005 16.6788C15.2867 16.6788 19.4327 11.0175 19.6071 10.7764C19.7709 10.5486 19.7709 10.2424 19.6069 10.0148ZM10.0005 14.8064C7.5689 14.8064 5.59001 12.8279 5.59001 10.395C5.59001 7.96282 7.56867 5.98416 10.0005 5.98416C12.4329 5.98416 14.4118 7.96282 14.4118 10.395C14.4118 12.8279 12.4327 14.8064 10.0005 14.8064ZM1.74734 10.395C2.3689 9.63105 3.91512 7.8826 5.9329 6.67527C5.03379 7.65816 4.47956 8.96149 4.47956 10.395C4.47956 11.8297 5.03356 13.1328 5.93334 14.1159C3.91601 12.9084 2.36912 11.1602 1.74734 10.395ZM14.0609 14.1235C14.9642 13.1399 15.5211 11.833 15.5211 10.3953C15.5211 8.96171 14.9671 7.6586 14.068 6.67549C16.086 7.88393 17.6325 9.63238 18.2538 10.3964C17.6327 11.1619 16.0847 12.9155 14.0609 14.1235Z" fill="black"/>
+<path d="M9.99935 7.84448C9.81913 7.84448 9.64424 7.86293 9.47513 7.89915C9.84602 8.14204 10.092 8.55959 10.092 9.03559C10.092 9.78715 9.48335 10.3954 8.73224 10.3954C8.22069 10.3954 7.78069 10.1105 7.54869 9.69315C7.48469 9.91648 7.44824 10.1518 7.44824 10.3954C7.44824 11.8043 8.59046 12.946 9.99935 12.946C11.4076 12.946 12.55 11.8043 12.55 10.3954C12.55 8.9867 11.4078 7.84448 9.99935 7.84448Z" fill="black"/>
+</svg>

package/src/assets/icons/radio-false.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="7.75" fill="none" stroke="#888EA4" stroke-width="0.5"/>
+</svg>

package/src/assets/icons/radio-true.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="7.75" fill="none" stroke="#97B960" stroke-width="0.5"/>
+    <circle cx="8" cy="8" r="4" fill="#97B960"/>
+</svg>

package/src/assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.52911 14.1734C8.93852 14.1734 10.2545 13.7109 11.3243 12.94L15.3488 17L16.8756 15.6544L12.7167 11.5781C13.5573 10.4646 14.0582 9.08562 14.0582 7.58669C14.0582 3.96357 11.1206 0.999969 7.52911 0.999969C3.92919 0.999969 1 3.96357 1 7.58669C1 11.2098 3.92919 14.1734 7.52911 14.1734ZM2.40941 7.58669C2.40941 10.4132 4.71879 12.7516 7.52911 12.7516C10.3309 12.7516 12.6488 10.4132 12.6488 7.58669C12.6488 4.76014 10.3309 2.42181 7.52911 2.42181C4.71879 2.42181 2.40941 4.76014 2.40941 7.58669Z" fill="#5E5CE6" stroke="white" stroke-width=".1"/>
+</svg>

package/src/assets/icons/sort.svg

@@ -0,0 +1,6 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9.75L2.5 11L4 9.75" stroke="#3B3B47"/>
+<path d="M2.5 1L2.5 11" stroke="#3B3B47"/>
+<path d="M9.5 2.25L8 1L6.5 2.25" stroke="#3B3B47"/>
+<path d="M8 11L8 1" stroke="#3B3B47"/>
+</svg>

package/src/assets/icons/star-line.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1704 6.08149L19.011 6.60829C20.3158 6.91817 20.2226 7.56893 19.3527 8.37463L15.2519 12.1862L16.3703 17.7022C16.6499 18.9727 16.1528 19.5615 14.9102 18.8797L10.0016 16.0908L5.09312 18.8797C3.81939 19.5615 3.35339 18.9727 3.63299 17.7022L4.75139 12.1862L0.650593 8.37463C-0.219272 7.56893 -0.312471 6.91817 0.961259 6.60829L6.83285 6.08149L9.16284 0.720482C9.59778 -0.240161 10.4055 -0.240161 10.8404 0.720482L13.1704 6.08149ZM10.0016 15.471L15.1587 18.4149C16.0286 18.7868 16.0596 18.7558 15.8732 17.8261L14.6927 12.0003L19.011 8.00277C19.5391 7.50696 19.7255 7.32102 18.9488 7.1041L12.7976 6.5773L10.3434 0.937401C10.2812 0.782459 10.188 0.658505 10.1259 0.596528C10.0638 0.503563 9.93951 0.503563 9.87738 0.596528C9.78418 0.658505 9.72204 0.782459 9.65991 0.937401L7.20565 6.5773L1.05446 7.1041C0.277794 7.32102 0.464194 7.50696 0.992326 8.00277L5.31058 12.0003L4.13005 17.8261C3.94365 18.7558 3.97472 18.7868 4.84459 18.4149L10.0016 15.471Z" fill="#97B960"/>
+</svg>

package/src/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1704 6.49811L19.011 7.02492C20.3158 7.3348 20.2226 7.98556 19.3527 8.79126L15.2519 12.6028L16.3703 18.1188C16.6499 19.3893 16.1528 19.9781 14.9102 19.2963L10.0016 16.5074L5.09312 19.2963C3.81939 19.9781 3.35339 19.3893 3.63299 18.1188L4.75139 12.6028L0.650593 8.79126C-0.219272 7.98556 -0.312471 7.3348 0.961259 7.02492L6.83285 6.49811L9.16284 1.13711C9.59778 0.176465 10.4055 0.176465 10.8404 1.13711L13.1704 6.49811Z" fill="#97A7C8"/>
+</svg>

package/src/assets/icons/times.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L8 8L15 1" stroke="#888EA4"/>
+<path d="M15 15L8 8L1 15" stroke="#888EA4"/>
+</svg>

package/src/assets/scss/icons.scss

@@ -0,0 +1,175 @@
+// Force BPM custom icons
+.f-icon,
+.f-icon.v-icon {
+  display: inline-block;
+  min-height: 20px;
+  min-width: 20px;
+  height: 20px;
+  width: 20px;
+  font-style: normal;
+  &.pass-eye-close {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/pass-eye-close.svg') no-repeat;
+    mask: url('./../icons/pass-eye-close.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.pass-eye-open {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/pass-eye-open.svg') no-repeat;
+    mask: url('./../icons/pass-eye-open.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.chevron-up {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(-180deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-right {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(-90deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-down {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(0deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-left {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(90deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.radio-true {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/radio-true.svg') no-repeat;
+    mask: url('./../icons/radio-true.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.radio-false {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/radio-false.svg') no-repeat;
+    mask: url('./../icons/radio-false.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.checkbox-true {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/checkbox-true.svg') no-repeat;
+    mask: url('./../icons/checkbox-true.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.checkbox-false {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/checkbox-false.svg') no-repeat;
+    mask: url('./../icons/checkbox-false.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.times {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/times.svg') no-repeat;
+    mask: url('./../icons/times.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.sort {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/sort.svg') no-repeat;
+    mask: url('./../icons/sort.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.filter {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/filter.svg') no-repeat;
+    mask: url('./../icons/filter.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/star.svg') no-repeat;
+    mask: url('./../icons/star.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star-line {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/star-line.svg') no-repeat;
+    mask: url('./../icons/star-line.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star.star-loading,
+  &.star-line.star-loading {
+    animation: rotation 1s infinite linear;
+  }
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
+  &.search {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/search.svg') no-repeat;
+    mask: url('./../icons/search.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.dots {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/dots.svg') no-repeat;
+    mask: url('./../icons/dots.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+    height: 18px;
+    width: 5px;
+  }
+  &.bell {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/bell.svg') no-repeat;
+    mask: url('./../icons/bell.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.bell-mute {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/bell-mute.svg') no-repeat;
+    mask: url('./../icons/bell-mute.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  .f-icon,
+  .f-icon.v-icon {
+    min-height: 18px;
+    min-width: 18px;
+    height: 18px;
+    width: 18px;
+  }
+}

package/src/{scss → assets/scss}/index.scss

@@ -1,3 +1,4 @@
+@use 'icons';
 @use 'utilities';
 @use 'overlay';
 @use 'buttons';

package/src/{scss → assets/scss}/input.scss

@@ -192,13 +192,17 @@
       --v-selection-control-size: 16px;
       min-height: 1.2em;
       .v-selection-control__wrapper {
-        margin-right: 10px;
+        margin-right: 4px;
         .v-selection-control__input {
           &::before {
             content: none;
           }
           .f-icon {
             opacity: 1;
+            min-height: var(--v-selection-control-size);
+            min-width: var(--v-selection-control-size);
+            height: var(--v-selection-control-size);
+            width: var(--v-selection-control-size);
           }
         }
       }
@@ -249,6 +253,10 @@
       }
       .f-icon {
         opacity: 1;
+        min-height: var(--v-selection-control-size);
+        min-width: var(--v-selection-control-size);
+        height: var(--v-selection-control-size);
+        width: var(--v-selection-control-size);
       }
     }
   }

package/src/{scss → assets/scss}/utilities.scss

@@ -55,27 +55,6 @@
   width: 100%;
 }
 
-// Override rounded values
-.rounded-xs {
-  border-radius: 4.8px !important;
-}
-
-.rounded-sm {
-  border-radius: 5.8px !important;
-}
-
-.rounded,
-.rounded-lg {
-  border-radius: 10.8px !important;
-}
-
-// Override border values
-.border {
-  border-width: 0.5px !important;
-  border-style: solid !important;
-  border-color: rgb(var(--v-border-color)) !important;
-}
-
 // Custom scrollbar styles
 .f-scrollbar-y {
   overflow-y: auto;

package/src/f-date-picker/FDatePicker.vue

@@ -139,7 +139,7 @@ const updateDateHandler = value => {
     <!-- Header for "is-range" -->
     <template v-if="isRange" #header>
       <div class="d-flex align-center justify-space-between f-date-picker-header">
-        <span class="range-title">{{ $t('pickers.period.name') }}:</span>
+        <span class="range-title">{{ $t('pickers.periodName') }}:</span>
 
         <!-- From date -->
         <div v-if="fromDateText" class="d-flex align-center">

package/src/f-toolbar/FSortPanel.vue

@@ -33,7 +33,7 @@ const modelValue = defineModel({
       <!-- Sort header -->
       <div class="f-sort-panel-header d-flex align-end pa-3 text-uppercase text-subTitle">
         <FIcon icon="sort" color="text" size="14" class="mr-2" />
-        <span class="lh-1">{{ $t('filterPanel.Sort.Name') }}</span>
+        <span class="lh-1">{{ $t('tooltip.sort') }}</span>
       </div>
 
       <v-divider />

package/src/locales/en.json

@@ -1,25 +1,69 @@
 {
+  "login": {
+    "title": "Sign In",
+    "welcome": "Welcome! Please select a login method",
+    "subTitle": "Enter your login and password to access the system",
+    "rememberMe": "Remember me",
+    "login": "Login",
+    "loginPlaceholder": "Enter your login",
+    "password": "Password",
+    "passwordPlaceholder": "Type password",
+    "loggedIn": "You are already logged in!",
+    "loginSuccess": "Login successful",
+    "loginFail": "Failed to login, try again",
+    "loginError": "Error trying to login, contact support",
+    "forgotPassword": "Forgot password?",
+    "errorLoginOrPass": "Wrong login or password",
+    "loginConfirmation": "Login confirmation",
+    "confirmationCode": "Confirmation code"
+  },
   "buttons": {
-    "close": "Close",
     "share": "Share",
+    "collect": "Collect",
+    "select": "Select",
+    "apply": "Apply",
+    "cancel": "Cancel",
+    "login": "Sign in",
+    "smartID": "Smart ID",
+    "logout": "Logout",
+    "refresh": "Refresh",
+    "edit": "Edit",
+    "editParams": "Edit parameters",
+    "delete": "Delete",
+    "save": "Save",
+    "close": "Close",
+    "toBack": "Back",
+    "rename": "Rename",
     "yes": "Yes",
     "no": "No"
   },
-  "noData": {
-    "title": "No data available"
+  "user": {
+    "telephone": "Phone number",
+    "position": "Position",
+    "department": "Department"
   },
   "tooltip": {
-    "actions": "Actions"
+    "actions": "Additional actions",
+    "filter": "Filter",
+    "sort": "Sort",
+    "search": "Search",
+    "calendar": "Calendar",
+    "clearDate": "Clear date"
   },
-  "updating": "Updating...",
-  "notification": {
-    "openTask": "Open task",
-    "openDocument": "Open document",
-    "openDescussion": "Open discussion"
+  "noData": {
+    "title": "No data available",
+    "matches": "No matches found",
+    "notification": "No notifications"
   },
-  "user": {
-    "telephone": "Phone",
-    "position": "Position",
-    "department": "Department"
+  "pickers": {
+    "from": "From",
+    "to": "To",
+    "time": "Time",
+    "periodName": "Period",
+    "dFormat": "dd",
+    "mFormat": "mm",
+    "yFormat": "yyyy",
+    "hFormat": "hh",
+    "minFormat": "mm"
   }
 }

package/src/locales/ru.json

@@ -1,25 +1,70 @@
 {
+  "login": {
+    "title": "Вход",
+    "welcome": "Добро пожаловать! Пожалуйста, выберите способ входа в систему",
+    "subTitle": "Введите ваши логин и пароль для входа в систему",
+    "rememberMe": "Запомнить меня",
+    "login": "Логин",
+    "loginPlaceholder": "Введите логин",
+    "password": "Пароль",
+    "passwordPlaceholder": "Введите пароль",
+    "loggedIn": "Вы уже вошли в систему!",
+    "loginSuccess": "Вход выполнен успешно",
+    "loginFail": "Не удалось войти в систему, попробуте еще раз",
+    "loginError": "Ошибка при попытке входа в систему, обратитесь в поддержку",
+    "forgotPassword": "Забыли пароль?",
+    "errorLoginOrPass": "Не верный логин или пароль",
+    "loginConfirmation": "Подтверждение входа",
+    "confirmationCode": "Код подтверждения"
+  },
   "buttons": {
-    "close": "Закрыть",
     "share": "Поделиться",
+    "collect": "Отобрать",
+    "select": "Выбрать",
+    "apply": "Применить",
+    "cancel": "Отмена",
+    "login": "Вход",
+    "smartID": "Smart ID",
+    "logout": "Выход",
+    "refresh": "Обновить",
+    "edit": "Редактировать",
+    "editParams": "Редактировать параметры",
+    "delete": "Удалить",
+    "save": "Сохранить",
+    "close": "Закрыть",
+    "toBack": "Назад",
+    "rename": "Переименовать",
     "yes": "Да",
     "no": "Нет"
   },
-  "noData": {
-    "title": "Данные отсутствуют"
+  "user": {
+    "telephone": "Номер телефона",
+    "position": "Должность",
+    "department": "Департамент"
   },
   "tooltip": {
-    "actions": "Действия"
+    "actions": "Дополнительные действия",
+    "filter": "Фильтр",
+    "sort": "Сортировка",
+    "favoritesFilter": "Фильтр по избранным",
+    "search": "Поиск",
+    "calendar": "Календарь",
+    "clearDate": "Очистить дату"
   },
-  "updating": "Обновление...",
-  "notification": {
-    "openTask": "Открыть задачу",
-    "openDocument": "Открыть документ",
-    "openDescussion": "Открыть обсуждение"
+  "noData": {
+    "title": "Нет доступных данных",
+    "matches": "Совпадений не найдено",
+    "notification": "Нет уведомлений"
   },
-  "user": {
-    "telephone": "Телефон",
-    "position": "Должность",
-    "department": "Отдел"
+  "pickers": {
+    "from": "От",
+    "to": "До",
+    "time": "Время",
+    "periodName": "Период",
+    "dFormat": "дд",
+    "mFormat": "мм",
+    "yFormat": "гггг",
+    "hFormat": "чч",
+    "minFormat": "мм"
   }
 }

package/src/locales/uk.json

@@ -1,25 +1,69 @@
 {
+  "login": {
+    "title": "Вхід",
+    "welcome": "Ласкаво просимо! Будь ласка, виберіть спосіб входу в систему",
+    "subTitle": "Введіть ваші логін та пароль для входу в систему",
+    "rememberMe": "Запам'ятати мене",
+    "login": "Логін",
+    "loginPlaceholder": "Введіть логін",
+    "password": "Пароль",
+    "passwordPlaceholder": "Введіть пароль",
+    "loggedIn": "Ви вже увійшли в систему!",
+    "loginSuccess": "Вхід виконано успішно",
+    "loginFail": "Не вдалося увійти в систему, спробуйте ще раз ",
+    "loginError": "Помилка входу в систему, зверніться у підтримку",
+    "forgotPassword": "Забули пароль?",
+    "errorLoginOrPass": "Невірний логін або пароль",
+    "loginConfirmation": "Підтвердження входу",
+    "confirmationCode": "Код підтвердження"
+  },
   "buttons": {
-    "close": "Закрити",
     "share": "Поділитися",
+    "collect": "Зібрати",
+    "select": "Вибрати",
+    "apply": "Застосувати",
+    "cancel": "Скасувати",
+    "login": "Вхід",
+    "smartID": "Smart ID",
+    "logout": "Вихід",
+    "refresh": "Оновити",
+    "edit": "Редагувати",
+    "editParams": "Редагувати параметри",
+    "delete": "Видалити",
+    "save": "Зберегти",
+    "close": "Закрити",
+    "toBack": "Назад",
+    "rename": "Перейменувати",
     "yes": "Так",
     "no": "Ні"
   },
-  "noData": {
-    "title": "Дані відсутні"
+  "user": {
+    "telephone": "Номер телефону",
+    "position": "Посада",
+    "department": "Департамент"
   },
   "tooltip": {
-    "actions": "Дії"
+    "actions": "Додаткові дії",
+    "filter": "Фільтр",
+    "sort": "Сортування",
+    "search": "Пошук",
+    "calendar": "Календар",
+    "clearDate": "Очистити дату"
   },
-  "updating": "Оновлення...",
-  "notification": {
-    "openTask": "Відкрити задачу",
-    "openDocument": "Відкрити документ",
-    "openDescussion": "Відкрити обговорення"
+  "noData": {
+    "title": "Немає доступних даних",
+    "matches": "Співпадінь не знайдено",
+    "notification": "Немає повідомлень"
   },
-  "user": {
-    "telephone": "Телефон",
-    "position": "Посада",
-    "department": "Відділ"
+  "pickers": {
+    "from": "Від",
+    "to": "До",
+    "time": "Час",
+    "periodName": "Період",
+    "dFormat": "дд",
+    "mFormat": "мм",
+    "yFormat": "рррр",
+    "hFormat": "гг",
+    "minFormat": "хх"
   }
 }

package/src/utils/color.js

@@ -0,0 +1,33 @@
+/**
+ * Converts a hexadecimal color code to RGBA format string.
+ *
+ * @param {string} hex - The hexadecimal color code (with or without '#' prefix).
+ *                       Supports both 3-digit (#RGB) and 6-digit (#RRGGBB) formats.
+ * @param {number} alpha - The alpha transparency value (0-1 or 0-255 depending on usage).
+ * @returns {string|null} An RGBA color string in the format 'rgba(r, g, b, a)' or null if hex is falsy.
+ *
+ * @example
+ * hexToRGBA('#FF5733', 0.5) // Returns 'rgba(255, 87, 51, 0.5)'
+ * hexToRGBA('ABC', 1) // Returns 'rgba(170, 187, 204, 1)'
+ * hexToRGBA(null, 1) // Returns null
+ */
+export const hexToRGBA = (hex, alpha) => {
+  if (!hex) return null
+  const result = hex
+    .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+    .substring(1)
+    .match(/.{2}/g)
+    .map(x => parseInt(x, 16))
+  result.push(alpha)
+  return `rgba(${result.join(', ')})`
+}
+
+/**
+ * Creates a radial gradient CSS string with specified colors and opacity transitions.
+ * @param {string} mainColor - The primary color in hex format (e.g., '#FF0000')
+ * @param {string} spreadColor - The secondary color in hex format that fades to transparent at the outer edge
+ * @returns {string} A CSS radial-gradient string with three color stops at 0%, 31.56%, and 57.76%
+ */
+export const createRadialGradient = (mainColor, spreadColor) => {
+  return `radial-gradient(83.34% 88.78% at 50.00% 50.00%, ${hexToRGBA(mainColor, 0.25)} 0%, ${hexToRGBA(mainColor, 0.08)} 31.56%, ${hexToRGBA(spreadColor, 0)} 57.76%)`
+}