@itfin/components 1.2.56 → 1.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.56",
+  "version": "1.2.58",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/_variables.scss

@@ -4,7 +4,7 @@
 // 2. Include any default variable overrides here
 $font-family-base: 'Fira Sans', sans-serif;
 $headings-font-family: 'Fira Sans', sans-serif;
-$font-family-monospace: 'Fira Mono', monospace;
+$font-family-monospace: "Fira Mono", "Courier New", monospace;
 
 $headings-font-size-base:     1rem;
 $h1-font-size:                $headings-font-size-base * 2;
@@ -32,7 +32,7 @@ $input-bg: #f3f3f3;
 $input-border-color: rgba(#000, .08);
 $input-border-radius: 10px;
 $input-font-size: 0.875rem;
-$input-font-family: 'Fira Mono', monospace;
+$input-font-family: "Fira Mono", "Courier New", monospace;
 
 $input-focus-bg: #fff;
 $input-focus-border-color: #fff;

package/src/components/icon/components/pause.vue

@@ -1,4 +1,4 @@
-<template><svg height="762" viewBox="0 0 762 762" width="762" xmlns="http://www.w3.org/2000/svg">
+<template><svg viewBox="0 0 762 762" xmlns="http://www.w3.org/2000/svg">
   <g fill="currentColor" fill-rule="evenodd" stroke="none" transform="translate(125 125)">
     <path
       d="M224,435.8V76.1c0-6.7-5.4-12.1-12.2-12.1h-71.6c-6.8,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6   C218.6,448,224,442.6,224,435.8z"/>

package/src/components/icon/icons/pause.svg

@@ -1,4 +1,4 @@
-<svg height="762" viewBox="0 0 762 762" width="762" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 762 762" xmlns="http://www.w3.org/2000/svg">
   <g fill="currentColor" fill-rule="evenodd" stroke="none" transform="translate(125 125)">
     <path
       d="M224,435.8V76.1c0-6.7-5.4-12.1-12.2-12.1h-71.6c-6.8,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6   C218.6,448,224,442.6,224,435.8z"/>

package/src/components/icon/icons.js

@@ -1,429 +1,429 @@
 export default {
   'align_vertical': () => import('./components/align_vertical.vue'),
-  'airplay': () => import('./components/airplay.vue'),
   'arrow_bottom_right': () => import('./components/arrow_bottom_right.vue'),
-  'align_horizontal': () => import('./components/align_horizontal.vue'),
+  'alarm_clock': () => import('./components/alarm_clock.vue'),
+  'arrow_bottom_left': () => import('./components/arrow_bottom_left.vue'),
+  'arrow_left_circle': () => import('./components/arrow_left_circle.vue'),
   'archive': () => import('./components/archive.vue'),
-  'angle': () => import('./components/angle.vue'),
-  'arrow_down': () => import('./components/arrow_down.vue'),
   'arrow_down_circle': () => import('./components/arrow_down_circle.vue'),
-  'arrow_right_circle': () => import('./components/arrow_right_circle.vue'),
-  'arrow_left': () => import('./components/arrow_left.vue'),
-  'arrow_left_circle': () => import('./components/arrow_left_circle.vue'),
   'arrow_right': () => import('./components/arrow_right.vue'),
-  'arrow_top_left': () => import('./components/arrow_top_left.vue'),
+  'arrow_left': () => import('./components/arrow_left.vue'),
   'arrow_top_right': () => import('./components/arrow_top_right.vue'),
   'arrow_up': () => import('./components/arrow_up.vue'),
+  'arrow_down': () => import('./components/arrow_down.vue'),
   'arrow_up_circle': () => import('./components/arrow_up_circle.vue'),
-  'backspace': () => import('./components/backspace.vue'),
-  'audio_wave': () => import('./components/audio_wave.vue'),
-  'backward10': () => import('./components/backward10.vue'),
+  'arrow_top_left': () => import('./components/arrow_top_left.vue'),
   'backward': () => import('./components/backward.vue'),
-  'bag': () => import('./components/bag.vue'),
+  'audio_wave': () => import('./components/audio_wave.vue'),
+  'backspace': () => import('./components/backspace.vue'),
+  'arrow_right_circle': () => import('./components/arrow_right_circle.vue'),
   'battery_75': () => import('./components/battery_75.vue'),
   'battery_charging': () => import('./components/battery_charging.vue'),
+  'backward10': () => import('./components/backward10.vue'),
+  'bag': () => import('./components/bag.vue'),
   'battery_empty': () => import('./components/battery_empty.vue'),
-  'battery_full': () => import('./components/battery_full.vue'),
-  'battery_half': () => import('./components/battery_half.vue'),
+  'align_horizontal': () => import('./components/align_horizontal.vue'),
   'battery_low': () => import('./components/battery_low.vue'),
-  'bell_ringing': () => import('./components/bell_ringing.vue'),
-  'bell': () => import('./components/bell.vue'),
+  'battery_half': () => import('./components/battery_half.vue'),
+  'battery_full': () => import('./components/battery_full.vue'),
   'bell_disabled': () => import('./components/bell_disabled.vue'),
+  'bluetooth': () => import('./components/bluetooth.vue'),
+  'bell': () => import('./components/bell.vue'),
+  'book': () => import('./components/book.vue'),
+  'book_text': () => import('./components/book_text.vue'),
   'bell_snooze': () => import('./components/bell_snooze.vue'),
+  'bell_ringing': () => import('./components/bell_ringing.vue'),
   'bookmark': () => import('./components/bookmark.vue'),
   'book_closed': () => import('./components/book_closed.vue'),
+  'box_open': () => import('./components/box_open.vue'),
+  'box_download': () => import('./components/box_download.vue'),
   'bookmark_book': () => import('./components/bookmark_book.vue'),
-  'book': () => import('./components/book.vue'),
   'box': () => import('./components/box.vue'),
   'briefcase': () => import('./components/briefcase.vue'),
-  'box_open': () => import('./components/box_open.vue'),
-  'box_download': () => import('./components/box_download.vue'),
-  'branch': () => import('./components/branch.vue'),
-  'browser_alt': () => import('./components/browser_alt.vue'),
   'browser': () => import('./components/browser.vue'),
-  'calculator': () => import('./components/calculator.vue'),
-  'calendar_date': () => import('./components/calendar_date.vue'),
-  'calendar_day': () => import('./components/calendar_day.vue'),
-  'calendar': () => import('./components/calendar.vue'),
+  'airplay': () => import('./components/airplay.vue'),
   'button_add': () => import('./components/button_add.vue'),
+  'button_minus': () => import('./components/button_minus.vue'),
+  'calendar': () => import('./components/calendar.vue'),
   'calendar_add': () => import('./components/calendar_add.vue'),
-  'calendar_last_day': () => import('./components/calendar_last_day.vue'),
-  'calendar_week': () => import('./components/calendar_week.vue'),
-  'calendar_days': () => import('./components/calendar_days.vue'),
+  'calculator': () => import('./components/calculator.vue'),
+  'browser_alt': () => import('./components/browser_alt.vue'),
+  'calendar_day': () => import('./components/calendar_day.vue'),
   'calendar_move': () => import('./components/calendar_move.vue'),
-  'camera': () => import('./components/camera.vue'),
+  'angle': () => import('./components/angle.vue'),
   'calendar_month': () => import('./components/calendar_month.vue'),
+  'calendar_date': () => import('./components/calendar_date.vue'),
   'calendar_remove': () => import('./components/calendar_remove.vue'),
-  'camera_noflash': () => import('./components/camera_noflash.vue'),
+  'calendar_days': () => import('./components/calendar_days.vue'),
+  'calendar_last_day': () => import('./components/calendar_last_day.vue'),
   'calendar_split': () => import('./components/calendar_split.vue'),
+  'camera': () => import('./components/camera.vue'),
   'camera_alt': () => import('./components/camera_alt.vue'),
-  'camera_noflash_alt': () => import('./components/camera_noflash_alt.vue'),
-  'card_timeline': () => import('./components/card_timeline.vue'),
+  'carousel': () => import('./components/carousel.vue'),
+  'calendar_week': () => import('./components/calendar_week.vue'),
   'capture': () => import('./components/capture.vue'),
+  'card_view': () => import('./components/card_view.vue'),
+  'camera_noflash_alt': () => import('./components/camera_noflash_alt.vue'),
+  'check': () => import('./components/check.vue'),
+  'cast': () => import('./components/cast.vue'),
+  'camera_noflash': () => import('./components/camera_noflash.vue'),
   'chain': () => import('./components/chain.vue'),
   'cart': () => import('./components/cart.vue'),
-  'cast': () => import('./components/cast.vue'),
-  'carousel': () => import('./components/carousel.vue'),
-  'chat_add': () => import('./components/chat_add.vue'),
-  'check_circle': () => import('./components/check_circle.vue'),
   'check_circle_outside': () => import('./components/check_circle_outside.vue'),
+  'chevron_close': () => import('./components/chevron_close.vue'),
+  'check_circle': () => import('./components/check_circle.vue'),
+  'chat_add': () => import('./components/chat_add.vue'),
   'checkbox_checked': () => import('./components/checkbox_checked.vue'),
-  'check': () => import('./components/check.vue'),
+  'card_timeline': () => import('./components/card_timeline.vue'),
   'checkbox_empty': () => import('./components/checkbox_empty.vue'),
-  'chevron_down': () => import('./components/chevron_down.vue'),
-  'chevron_down_circle': () => import('./components/chevron_down_circle.vue'),
-  'chevron_left_circle': () => import('./components/chevron_left_circle.vue'),
-  'chevron_left_double': () => import('./components/chevron_left_double.vue'),
-  'chevron_left': () => import('./components/chevron_left.vue'),
-  'chevron_right': () => import('./components/chevron_right.vue'),
+  'branch': () => import('./components/branch.vue'),
   'chevron_down_double': () => import('./components/chevron_down_double.vue'),
-  'book_text': () => import('./components/book_text.vue'),
+  'chevron_left_circle': () => import('./components/chevron_left_circle.vue'),
   'chevron_open': () => import('./components/chevron_open.vue'),
-  'chevron_close': () => import('./components/chevron_close.vue'),
-  'chevron_up': () => import('./components/chevron_up.vue'),
+  'chevron_right': () => import('./components/chevron_right.vue'),
+  'chevron_left': () => import('./components/chevron_left.vue'),
   'chevron_right_circle': () => import('./components/chevron_right_circle.vue'),
-  'circle_menu': () => import('./components/circle_menu.vue'),
-  'chevron_up_double': () => import('./components/chevron_up_double.vue'),
-  'card_view': () => import('./components/card_view.vue'),
+  'chevron_up': () => import('./components/chevron_up.vue'),
+  'chevron_right_double': () => import('./components/chevron_right_double.vue'),
   'circle': () => import('./components/circle.vue'),
-  'circle_split': () => import('./components/circle_split.vue'),
   'chevron_up_circle': () => import('./components/chevron_up_circle.vue'),
-  'clipboard_check': () => import('./components/clipboard_check.vue'),
-  'clipboard_notes': () => import('./components/clipboard_notes.vue'),
-  'clipboard_cross': () => import('./components/clipboard_cross.vue'),
-  'button_minus': () => import('./components/button_minus.vue'),
-  'clipboard_remove': () => import('./components/clipboard_remove.vue'),
+  'circle_menu': () => import('./components/circle_menu.vue'),
+  'circle_split': () => import('./components/circle_split.vue'),
+  'chevron_up_double': () => import('./components/chevron_up_double.vue'),
+  'clipboard': () => import('./components/clipboard.vue'),
   'clipboard_add': () => import('./components/clipboard_add.vue'),
+  'clipboard_remove': () => import('./components/clipboard_remove.vue'),
+  'clipboard_cross': () => import('./components/clipboard_cross.vue'),
+  'chevron_down': () => import('./components/chevron_down.vue'),
+  'clipboard_check': () => import('./components/clipboard_check.vue'),
+  'clipboard_copy': () => import('./components/clipboard_copy.vue'),
+  'cloud': () => import('./components/cloud.vue'),
+  'cloud_disconnect': () => import('./components/cloud_disconnect.vue'),
   'close': () => import('./components/close.vue'),
   'clock': () => import('./components/clock.vue'),
-  'cloud': () => import('./components/cloud.vue'),
+  'cloud_upload_alt': () => import('./components/cloud_upload_alt.vue'),
   'cloud_download': () => import('./components/cloud_download.vue'),
-  'cloud_disconnect': () => import('./components/cloud_disconnect.vue'),
-  'clipboard_copy': () => import('./components/clipboard_copy.vue'),
   'cloud_download_alt': () => import('./components/cloud_download_alt.vue'),
-  'coins': () => import('./components/coins.vue'),
+  'coffee': () => import('./components/coffee.vue'),
   'cloud_upload': () => import('./components/cloud_upload.vue'),
-  'compass': () => import('./components/compass.vue'),
-  'contacts': () => import('./components/contacts.vue'),
-  'component_add': () => import('./components/component_add.vue'),
   'coin': () => import('./components/coin.vue'),
+  'chevron_left_double': () => import('./components/chevron_left_double.vue'),
+  'coins': () => import('./components/coins.vue'),
+  'chevron_down_circle': () => import('./components/chevron_down_circle.vue'),
   'code': () => import('./components/code.vue'),
-  'clipboard': () => import('./components/clipboard.vue'),
+  'clipboard_notes': () => import('./components/clipboard_notes.vue'),
   'contract': () => import('./components/contract.vue'),
-  'create': () => import('./components/create.vue'),
-  'cloud_upload_alt': () => import('./components/cloud_upload_alt.vue'),
-  'credit_card': () => import('./components/credit_card.vue'),
+  'component_add': () => import('./components/component_add.vue'),
+  'cross_circle': () => import('./components/cross_circle.vue'),
   'cross': () => import('./components/cross.vue'),
-  'coffee': () => import('./components/coffee.vue'),
-  'crosshair': () => import('./components/crosshair.vue'),
-  'cube': () => import('./components/cube.vue'),
+  'contacts': () => import('./components/contacts.vue'),
   'crop': () => import('./components/crop.vue'),
+  'credit_card': () => import('./components/credit_card.vue'),
+  'crosshair': () => import('./components/crosshair.vue'),
   'database': () => import('./components/database.vue'),
-  'diamond': () => import('./components/diamond.vue'),
-  'display_alt': () => import('./components/display_alt.vue'),
-  'document': () => import('./components/document.vue'),
+  'cube': () => import('./components/cube.vue'),
+  'compass': () => import('./components/compass.vue'),
+  'create': () => import('./components/create.vue'),
   'document_justified': () => import('./components/document_justified.vue'),
-  'cylinder': () => import('./components/cylinder.vue'),
-  'disc': () => import('./components/disc.vue'),
-  'chevron_right_double': () => import('./components/chevron_right_double.vue'),
+  'display': () => import('./components/display.vue'),
+  'diamond': () => import('./components/diamond.vue'),
   'document_list': () => import('./components/document_list.vue'),
   'document_stack': () => import('./components/document_stack.vue'),
-  'download_alt': () => import('./components/download_alt.vue'),
-  'door': () => import('./components/door.vue'),
+  'display_alt': () => import('./components/display_alt.vue'),
   'download': () => import('./components/download.vue'),
+  'download_alt': () => import('./components/download_alt.vue'),
+  'document_words': () => import('./components/document_words.vue'),
+  'drag': () => import('./components/drag.vue'),
   'downward': () => import('./components/downward.vue'),
-  'display': () => import('./components/display.vue'),
   'door_alt': () => import('./components/door_alt.vue'),
+  'door': () => import('./components/door.vue'),
   'drag_circle': () => import('./components/drag_circle.vue'),
-  'drag': () => import('./components/drag.vue'),
-  'duplicate_alt': () => import('./components/duplicate_alt.vue'),
-  'drag_vertical': () => import('./components/drag_vertical.vue'),
   'duplicate': () => import('./components/duplicate.vue'),
   'enter': () => import('./components/enter.vue'),
+  'drag_vertical': () => import('./components/drag_vertical.vue'),
+  'duplicate_alt': () => import('./components/duplicate_alt.vue'),
+  'enter_alt': () => import('./components/enter_alt.vue'),
   'episodes': () => import('./components/episodes.vue'),
-  'bluetooth': () => import('./components/bluetooth.vue'),
+  'exit_right': () => import('./components/exit_right.vue'),
   'exit_left': () => import('./components/exit_left.vue'),
+  'expand_height': () => import('./components/expand_height.vue'),
   'expand': () => import('./components/expand.vue'),
-  'exit_right': () => import('./components/exit_right.vue'),
-  'directions': () => import('./components/directions.vue'),
-  'expand_width': () => import('./components/expand_width.vue'),
   'external': () => import('./components/external.vue'),
-  'expand_height': () => import('./components/expand_height.vue'),
   'eye': () => import('./components/eye.vue'),
-  'eye_no': () => import('./components/eye_no.vue'),
+  'expand_width': () => import('./components/expand_width.vue'),
+  'directions': () => import('./components/directions.vue'),
   'eye_closed': () => import('./components/eye_closed.vue'),
   'face_delighted': () => import('./components/face_delighted.vue'),
-  'face_sad': () => import('./components/face_sad.vue'),
-  'face_neutral': () => import('./components/face_neutral.vue'),
-  'file_download': () => import('./components/file_download.vue'),
+  'face_happy': () => import('./components/face_happy.vue'),
   'file_upload': () => import('./components/file_upload.vue'),
+  'eye_no': () => import('./components/eye_no.vue'),
+  'file_download': () => import('./components/file_download.vue'),
   'files_stack': () => import('./components/files_stack.vue'),
-  'files_history': () => import('./components/files_history.vue'),
+  'filter_circle': () => import('./components/filter_circle.vue'),
   'film': () => import('./components/film.vue'),
-  'document_words': () => import('./components/document_words.vue'),
-  'filter': () => import('./components/filter.vue'),
+  'flag': () => import('./components/flag.vue'),
+  'face_sad': () => import('./components/face_sad.vue'),
+  'disc': () => import('./components/disc.vue'),
   'files_multi': () => import('./components/files_multi.vue'),
-  'face_happy': () => import('./components/face_happy.vue'),
+  'filter': () => import('./components/filter.vue'),
   'fingerprint': () => import('./components/fingerprint.vue'),
-  'filtering': () => import('./components/filtering.vue'),
-  'flag': () => import('./components/flag.vue'),
-  'filter_single': () => import('./components/filter_single.vue'),
-  'flame_alt': () => import('./components/flame_alt.vue'),
+  'document': () => import('./components/document.vue'),
   'flame': () => import('./components/flame.vue'),
-  'floppy': () => import('./components/floppy.vue'),
+  'flame_alt': () => import('./components/flame_alt.vue'),
+  'flip_view': () => import('./components/flip_view.vue'),
   'folder_add': () => import('./components/folder_add.vue'),
+  'filter_single': () => import('./components/filter_single.vue'),
+  'floppy': () => import('./components/floppy.vue'),
   'folder_closed': () => import('./components/folder_closed.vue'),
+  'filtering': () => import('./components/filtering.vue'),
+  'folder_open': () => import('./components/folder_open.vue'),
   'folder_minus': () => import('./components/folder_minus.vue'),
+  'forward10': () => import('./components/forward10.vue'),
+  'forward': () => import('./components/forward.vue'),
   'fork_git': () => import('./components/fork_git.vue'),
-  'folder_open': () => import('./components/folder_open.vue'),
   'fullscreen': () => import('./components/fullscreen.vue'),
-  'forward': () => import('./components/forward.vue'),
-  'gift': () => import('./components/gift.vue'),
+  'funnel': () => import('./components/funnel.vue'),
   'frame': () => import('./components/frame.vue'),
-  'enter_alt': () => import('./components/enter_alt.vue'),
+  'cylinder': () => import('./components/cylinder.vue'),
+  'gift': () => import('./components/gift.vue'),
+  'face_neutral': () => import('./components/face_neutral.vue'),
+  'grid': () => import('./components/grid.vue'),
   'gauge': () => import('./components/gauge.vue'),
-  'globe': () => import('./components/globe.vue'),
-  'gps': () => import('./components/gps.vue'),
-  'filter_circle': () => import('./components/filter_circle.vue'),
   'grab': () => import('./components/grab.vue'),
+  'files_history': () => import('./components/files_history.vue'),
+  'graph_box': () => import('./components/graph_box.vue'),
   'graph_bar': () => import('./components/graph_bar.vue'),
+  'gps': () => import('./components/gps.vue'),
+  'hash': () => import('./components/hash.vue'),
   'graph_increase': () => import('./components/graph_increase.vue'),
-  'grid': () => import('./components/grid.vue'),
-  'graph_box': () => import('./components/graph_box.vue'),
-  'grid_circles_add': () => import('./components/grid_circles_add.vue'),
   'grid_small': () => import('./components/grid_small.vue'),
-  'grid_circles': () => import('./components/grid_circles.vue'),
-  'harddrive': () => import('./components/harddrive.vue'),
   'grid_squares_add': () => import('./components/grid_squares_add.vue'),
-  'heart': () => import('./components/heart.vue'),
-  'forward10': () => import('./components/forward10.vue'),
   'heart_rate': () => import('./components/heart_rate.vue'),
+  'harddrive': () => import('./components/harddrive.vue'),
   'grid_squares': () => import('./components/grid_squares.vue'),
-  'hash': () => import('./components/hash.vue'),
-  'height': () => import('./components/height.vue'),
+  'heart': () => import('./components/heart.vue'),
+  'hand': () => import('./components/hand.vue'),
   'hierarchy': () => import('./components/hierarchy.vue'),
   'heart_remove': () => import('./components/heart_remove.vue'),
   'home_alt': () => import('./components/home_alt.vue'),
-  'home_check': () => import('./components/home_check.vue'),
+  'height': () => import('./components/height.vue'),
   'home': () => import('./components/home.vue'),
-  'home_door': () => import('./components/home_door.vue'),
-  'inbox_alt': () => import('./components/inbox_alt.vue'),
+  'grid_circles': () => import('./components/grid_circles.vue'),
   'import': () => import('./components/import.vue'),
-  'info_circle': () => import('./components/info_circle.vue'),
+  'home_check': () => import('./components/home_check.vue'),
   'inbox': () => import('./components/inbox.vue'),
-  'jump_forward': () => import('./components/jump_forward.vue'),
-  'iphone_portrait': () => import('./components/iphone_portrait.vue'),
-  'jump_backward': () => import('./components/jump_backward.vue'),
-  'iphone_landscape': () => import('./components/iphone_landscape.vue'),
-  'cross_circle': () => import('./components/cross_circle.vue'),
+  'info_circle': () => import('./components/info_circle.vue'),
+  'inbox_alt': () => import('./components/inbox_alt.vue'),
   'jump_left': () => import('./components/jump_left.vue'),
+  'jump_backward': () => import('./components/jump_backward.vue'),
   'jump_right': () => import('./components/jump_right.vue'),
-  'lightbulb_on': () => import('./components/lightbulb_on.vue'),
   'laptop': () => import('./components/laptop.vue'),
+  'iphone_portrait': () => import('./components/iphone_portrait.vue'),
+  'jump_forward': () => import('./components/jump_forward.vue'),
   'lightbulb': () => import('./components/lightbulb.vue'),
-  'funnel': () => import('./components/funnel.vue'),
   'lightning_alt': () => import('./components/lightning_alt.vue'),
-  'lineweight': () => import('./components/lineweight.vue'),
+  'link': () => import('./components/link.vue'),
+  'iphone_landscape': () => import('./components/iphone_landscape.vue'),
+  'lightbulb_on': () => import('./components/lightbulb_on.vue'),
   'keyboard': () => import('./components/keyboard.vue'),
+  'lightning': () => import('./components/lightning.vue'),
+  'lineweight': () => import('./components/lineweight.vue'),
+  'link_horizontal': () => import('./components/link_horizontal.vue'),
   'list': () => import('./components/list.vue'),
   'link_broken': () => import('./components/link_broken.vue'),
   'link_vertical': () => import('./components/link_vertical.vue'),
   'list_add': () => import('./components/list_add.vue'),
-  'link_alt': () => import('./components/link_alt.vue'),
-  'link': () => import('./components/link.vue'),
-  'location': () => import('./components/location.vue'),
+  'list_numbered': () => import('./components/list_numbered.vue'),
   'lock': () => import('./components/lock.vue'),
+  'loader': () => import('./components/loader.vue'),
+  'link_alt': () => import('./components/link_alt.vue'),
   'lock_open': () => import('./components/lock_open.vue'),
+  'location': () => import('./components/location.vue'),
   'mail': () => import('./components/mail.vue'),
-  'loader': () => import('./components/loader.vue'),
-  'list_numbered': () => import('./components/list_numbered.vue'),
-  'mail_add': () => import('./components/mail_add.vue'),
-  'mail_minus': () => import('./components/mail_minus.vue'),
   'mail_delete': () => import('./components/mail_delete.vue'),
-  'mail_open': () => import('./components/mail_open.vue'),
+  'globe': () => import('./components/globe.vue'),
+  'mail_add': () => import('./components/mail_add.vue'),
+  'home_door': () => import('./components/home_door.vue'),
   'mail_remove': () => import('./components/mail_remove.vue'),
-  'message': () => import('./components/message.vue'),
-  'marquee': () => import('./components/marquee.vue'),
   'mail_new': () => import('./components/mail_new.vue'),
-  'menu_horizontal': () => import('./components/menu_horizontal.vue'),
-  'menu_vertical': () => import('./components/menu_vertical.vue'),
+  'marquee': () => import('./components/marquee.vue'),
   'menu_hamburger': () => import('./components/menu_hamburger.vue'),
+  'grid_circles_add': () => import('./components/grid_circles_add.vue'),
+  'maximise': () => import('./components/maximise.vue'),
+  'mail_open': () => import('./components/mail_open.vue'),
+  'message': () => import('./components/message.vue'),
+  'microphone': () => import('./components/microphone.vue'),
   'microphone_muted': () => import('./components/microphone_muted.vue'),
-  'mini_player': () => import('./components/mini_player.vue'),
-  'message_writing': () => import('./components/message_writing.vue'),
+  'midpoint': () => import('./components/midpoint.vue'),
+  'microphone_disabled': () => import('./components/microphone_disabled.vue'),
+  'minus_circle': () => import('./components/minus_circle.vue'),
+  'moon': () => import('./components/moon.vue'),
   'minus': () => import('./components/minus.vue'),
-  'microphone': () => import('./components/microphone.vue'),
+  'mini_player': () => import('./components/mini_player.vue'),
+  'no_sign': () => import('./components/no_sign.vue'),
   'minimise': () => import('./components/minimise.vue'),
-  'hand': () => import('./components/hand.vue'),
   'move': () => import('./components/move.vue'),
-  'no_sign': () => import('./components/no_sign.vue'),
-  'microphone_disabled': () => import('./components/microphone_disabled.vue'),
-  'minus_circle': () => import('./components/minus_circle.vue'),
   'notebook': () => import('./components/notebook.vue'),
   'nut': () => import('./components/nut.vue'),
-  'notification': () => import('./components/notification.vue'),
+  'newspaper': () => import('./components/newspaper.vue'),
   'pages': () => import('./components/pages.vue'),
-  'panel_bottom': () => import('./components/panel_bottom.vue'),
-  'panel_left': () => import('./components/panel_left.vue'),
-  'link_horizontal': () => import('./components/link_horizontal.vue'),
-  'panel_right': () => import('./components/panel_right.vue'),
+  'notification': () => import('./components/notification.vue'),
   'panel_center': () => import('./components/panel_center.vue'),
-  'panel_sectioned': () => import('./components/panel_sectioned.vue'),
-  'alarm_clock': () => import('./components/alarm_clock.vue'),
+  'panel_top': () => import('./components/panel_top.vue'),
+  'panel_right': () => import('./components/panel_right.vue'),
+  'panel_left': () => import('./components/panel_left.vue'),
+  'panel_bottom': () => import('./components/panel_bottom.vue'),
+  'paper_plane': () => import('./components/paper_plane.vue'),
   'paper': () => import('./components/paper.vue'),
-  'arrow_bottom_left': () => import('./components/arrow_bottom_left.vue'),
+  'panel_sectioned': () => import('./components/panel_sectioned.vue'),
   'paper_folded': () => import('./components/paper_folded.vue'),
-  'paper_plane': () => import('./components/paper_plane.vue'),
   'paper_plane_alt': () => import('./components/paper_plane_alt.vue'),
-  'moon': () => import('./components/moon.vue'),
-  'panel_top': () => import('./components/panel_top.vue'),
+  'menu_horizontal': () => import('./components/menu_horizontal.vue'),
   'paperclip': () => import('./components/paperclip.vue'),
-  'paragraph_center': () => import('./components/paragraph_center.vue'),
-  'paragraph_right': () => import('./components/paragraph_right.vue'),
   'paragraph_end': () => import('./components/paragraph_end.vue'),
-  'paragraph_start': () => import('./components/paragraph_start.vue'),
   'pause': () => import('./components/pause.vue'),
-  'maximise': () => import('./components/maximise.vue'),
+  'paragraph_start': () => import('./components/paragraph_start.vue'),
   'paragraph_left': () => import('./components/paragraph_left.vue'),
-  'pen': () => import('./components/pen.vue'),
-  'phone_landscape': () => import('./components/phone_landscape.vue'),
-  'picture': () => import('./components/picture.vue'),
   'phone_portrait': () => import('./components/phone_portrait.vue'),
-  'lightning': () => import('./components/lightning.vue'),
+  'picture': () => import('./components/picture.vue'),
+  'paragraph_right': () => import('./components/paragraph_right.vue'),
+  'pie_half': () => import('./components/pie_half.vue'),
+  'phone_landscape': () => import('./components/phone_landscape.vue'),
+  'pie_third': () => import('./components/pie_third.vue'),
   'pie_quarter': () => import('./components/pie_quarter.vue'),
   'play_button': () => import('./components/play_button.vue'),
-  'pie_third': () => import('./components/pie_third.vue'),
-  'plus': () => import('./components/plus.vue'),
   'plus_circle': () => import('./components/plus_circle.vue'),
   'postcard': () => import('./components/postcard.vue'),
+  'plus': () => import('./components/plus.vue'),
   'play': () => import('./components/play.vue'),
-  'project_tnm': () => import('./components/project_tnm.vue'),
   'project_fixed': () => import('./components/project_fixed.vue'),
   'printer': () => import('./components/printer.vue'),
+  'message_writing': () => import('./components/message_writing.vue'),
   'project_nonprofit': () => import('./components/project_nonprofit.vue'),
-  'midpoint': () => import('./components/midpoint.vue'),
-  'pull_down': () => import('./components/pull_down.vue'),
   'projector': () => import('./components/projector.vue'),
-  'pull_up': () => import('./components/pull_up.vue'),
-  'push_left': () => import('./components/push_left.vue'),
-  'push_right': () => import('./components/push_right.vue'),
-  'push_up': () => import('./components/push_up.vue'),
+  'project_tnm': () => import('./components/project_tnm.vue'),
+  'pull_right': () => import('./components/pull_right.vue'),
+  'menu_vertical': () => import('./components/menu_vertical.vue'),
+  'pull_down': () => import('./components/pull_down.vue'),
+  'pull_left': () => import('./components/pull_left.vue'),
   'question_circle': () => import('./components/question_circle.vue'),
+  'push_down': () => import('./components/push_down.vue'),
   'radio_on': () => import('./components/radio_on.vue'),
-  'record': () => import('./components/record.vue'),
+  'pull_up': () => import('./components/pull_up.vue'),
+  'push_up': () => import('./components/push_up.vue'),
+  'push_right': () => import('./components/push_right.vue'),
   'redo': () => import('./components/redo.vue'),
-  'refresh': () => import('./components/refresh.vue'),
-  'flip_view': () => import('./components/flip_view.vue'),
   'replicate_alt': () => import('./components/replicate_alt.vue'),
   'receipt': () => import('./components/receipt.vue'),
-  'pie_half': () => import('./components/pie_half.vue'),
-  'refresh_alt': () => import('./components/refresh_alt.vue'),
+  'replicate': () => import('./components/replicate.vue'),
+  'paragraph_center': () => import('./components/paragraph_center.vue'),
   'reset': () => import('./components/reset.vue'),
-  'reset_hard': () => import('./components/reset_hard.vue'),
+  'reset_alt': () => import('./components/reset_alt.vue'),
   'reset_forward': () => import('./components/reset_forward.vue'),
+  'refresh': () => import('./components/refresh.vue'),
+  'push_left': () => import('./components/push_left.vue'),
   'reuse': () => import('./components/reuse.vue'),
-  'reset_temporary': () => import('./components/reset_temporary.vue'),
+  'retweet': () => import('./components/retweet.vue'),
   'reverse': () => import('./components/reverse.vue'),
-  'reverse_alt': () => import('./components/reverse_alt.vue'),
+  'reset_temporary': () => import('./components/reset_temporary.vue'),
   'revert': () => import('./components/revert.vue'),
-  'scale_contract': () => import('./components/scale_contract.vue'),
-  'scale': () => import('./components/scale.vue'),
-  'rocket': () => import('./components/rocket.vue'),
   'ruler': () => import('./components/ruler.vue'),
-  'scale_extend': () => import('./components/scale_extend.vue'),
-  'settings': () => import('./components/settings.vue'),
+  'record': () => import('./components/record.vue'),
+  'rocket': () => import('./components/rocket.vue'),
+  'reverse_alt': () => import('./components/reverse_alt.vue'),
+  'reset_hard': () => import('./components/reset_hard.vue'),
   'search': () => import('./components/search.vue'),
   'scalpel': () => import('./components/scalpel.vue'),
-  'retweet': () => import('./components/retweet.vue'),
-  'reset_alt': () => import('./components/reset_alt.vue'),
-  'server': () => import('./components/server.vue'),
+  'refresh_alt': () => import('./components/refresh_alt.vue'),
+  'share_alt': () => import('./components/share_alt.vue'),
+  'scale_contract': () => import('./components/scale_contract.vue'),
+  'scale_extend': () => import('./components/scale_extend.vue'),
+  'settings': () => import('./components/settings.vue'),
   'slash_backward': () => import('./components/slash_backward.vue'),
   'shuffle': () => import('./components/shuffle.vue'),
-  'share': () => import('./components/share.vue'),
-  'sort': () => import('./components/sort.vue'),
-  'sliders': () => import('./components/sliders.vue'),
-  'sort_alt': () => import('./components/sort_alt.vue'),
   'slash_forward': () => import('./components/slash_forward.vue'),
+  'sliders': () => import('./components/sliders.vue'),
+  'scale': () => import('./components/scale.vue'),
+  'side_menu': () => import('./components/side_menu.vue'),
+  'split': () => import('./components/split.vue'),
   'speaker': () => import('./components/speaker.vue'),
   'speech_bubble': () => import('./components/speech_bubble.vue'),
-  'split': () => import('./components/split.vue'),
-  'newspaper': () => import('./components/newspaper.vue'),
-  'star': () => import('./components/star.vue'),
+  'sort': () => import('./components/sort.vue'),
   'split_three': () => import('./components/split_three.vue'),
+  'speech_typing': () => import('./components/speech_typing.vue'),
   'support': () => import('./components/support.vue'),
-  'sun': () => import('./components/sun.vue'),
-  'swap': () => import('./components/swap.vue'),
+  'star': () => import('./components/star.vue'),
   'switch': () => import('./components/switch.vue'),
-  'tag': () => import('./components/tag.vue'),
-  'tag_milestone': () => import('./components/tag_milestone.vue'),
+  'sun': () => import('./components/sun.vue'),
+  'pen': () => import('./components/pen.vue'),
+  'mail_minus': () => import('./components/mail_minus.vue'),
   'table_header': () => import('./components/table_header.vue'),
-  'side_menu': () => import('./components/side_menu.vue'),
   'table': () => import('./components/table.vue'),
+  'tag_milestone': () => import('./components/tag_milestone.vue'),
+  'thumbs_down': () => import('./components/thumbs_down.vue'),
   'tags': () => import('./components/tags.vue'),
   'thread': () => import('./components/thread.vue'),
-  'thumbs_down': () => import('./components/thumbs_down.vue'),
   'target': () => import('./components/target.vue'),
   'timeline': () => import('./components/timeline.vue'),
+  'todo': () => import('./components/todo.vue'),
+  'toggle': () => import('./components/toggle.vue'),
   'ticket': () => import('./components/ticket.vue'),
-  'toggles': () => import('./components/toggles.vue'),
-  'replicate': () => import('./components/replicate.vue'),
   'thumbs_up': () => import('./components/thumbs_up.vue'),
-  'translate': () => import('./components/translate.vue'),
-  'toggle': () => import('./components/toggle.vue'),
-  'pull_left': () => import('./components/pull_left.vue'),
+  'toggles': () => import('./components/toggles.vue'),
   'trash': () => import('./components/trash.vue'),
   'trophy': () => import('./components/trophy.vue'),
-  'pull_right': () => import('./components/pull_right.vue'),
-  'push_down': () => import('./components/push_down.vue'),
   'trash_alt': () => import('./components/trash_alt.vue'),
-  'share_alt': () => import('./components/share_alt.vue'),
-  'upload': () => import('./components/upload.vue'),
-  'undo_history': () => import('./components/undo_history.vue'),
+  'translate': () => import('./components/translate.vue'),
+  'tv_mode': () => import('./components/tv_mode.vue'),
+  'tag': () => import('./components/tag.vue'),
   'unlink_horizontal': () => import('./components/unlink_horizontal.vue'),
-  'user': () => import('./components/user.vue'),
+  'unarchive': () => import('./components/unarchive.vue'),
+  'upload': () => import('./components/upload.vue'),
   'unlink_vertical': () => import('./components/unlink_vertical.vue'),
-  'upload_alt': () => import('./components/upload_alt.vue'),
-  'user_circle': () => import('./components/user_circle.vue'),
+  'undo_history': () => import('./components/undo_history.vue'),
   'user_add': () => import('./components/user_add.vue'),
-  'user_male': () => import('./components/user_male.vue'),
+  'upload_alt': () => import('./components/upload_alt.vue'),
+  'upward': () => import('./components/upward.vue'),
+  'user': () => import('./components/user.vue'),
+  'undo': () => import('./components/undo.vue'),
   'user_male_circle': () => import('./components/user_male_circle.vue'),
+  'versions': () => import('./components/versions.vue'),
+  'user_male': () => import('./components/user_male.vue'),
+  'user_circle': () => import('./components/user_circle.vue'),
+  'users': () => import('./components/users.vue'),
   'venn': () => import('./components/venn.vue'),
   'user_remove': () => import('./components/user_remove.vue'),
-  'users': () => import('./components/users.vue'),
-  'tv_mode': () => import('./components/tv_mode.vue'),
+  'volume_0': () => import('./components/volume_0.vue'),
   'video': () => import('./components/video.vue'),
-  'upward': () => import('./components/upward.vue'),
   'version': () => import('./components/version.vue'),
-  'unarchive': () => import('./components/unarchive.vue'),
-  'volume_0': () => import('./components/volume_0.vue'),
-  'volume_high': () => import('./components/volume_high.vue'),
-  'volume_minus': () => import('./components/volume_minus.vue'),
-  'volume_muted': () => import('./components/volume_muted.vue'),
-  'versions': () => import('./components/versions.vue'),
   'volume_add': () => import('./components/volume_add.vue'),
-  'warning_circle': () => import('./components/warning_circle.vue'),
   'volume_low': () => import('./components/volume_low.vue'),
+  'server': () => import('./components/server.vue'),
+  'swap': () => import('./components/swap.vue'),
+  'volume_high': () => import('./components/volume_high.vue'),
+  'share': () => import('./components/share.vue'),
   'warning_triangle': () => import('./components/warning_triangle.vue'),
-  'warning_hex': () => import('./components/warning_hex.vue'),
   'wallet': () => import('./components/wallet.vue'),
+  'volume_minus': () => import('./components/volume_minus.vue'),
+  'warning_hex': () => import('./components/warning_hex.vue'),
+  'volume_disabled': () => import('./components/volume_disabled.vue'),
+  'width': () => import('./components/width.vue'),
   'wifi_none': () => import('./components/wifi_none.vue'),
-  'undo': () => import('./components/undo.vue'),
-  'todo': () => import('./components/todo.vue'),
-  'wifi_error': () => import('./components/wifi_error.vue'),
   'wifi': () => import('./components/wifi.vue'),
+  'wifi_error': () => import('./components/wifi_error.vue'),
+  'volume_muted': () => import('./components/volume_muted.vue'),
   'window': () => import('./components/window.vue'),
-  'window_collapse_right': () => import('./components/window_collapse_right.vue'),
   'waves': () => import('./components/waves.vue'),
-  'write': () => import('./components/write.vue'),
-  'wrap_back': () => import('./components/wrap_back.vue'),
+  'window_collapse_right': () => import('./components/window_collapse_right.vue'),
   'window_collapse_left': () => import('./components/window_collapse_left.vue'),
-  'window_content': () => import('./components/window_content.vue'),
-  'speech_typing': () => import('./components/speech_typing.vue'),
   'wrap_forward': () => import('./components/wrap_forward.vue'),
+  'wrap_back': () => import('./components/wrap_back.vue'),
   'zoom_in': () => import('./components/zoom_in.vue'),
-  'width': () => import('./components/width.vue'),
-  'zoom_out': () => import('./components/zoom_out.vue'),
+  'window_content': () => import('./components/window_content.vue'),
+  'write': () => import('./components/write.vue'),
+  'sort_alt': () => import('./components/sort_alt.vue'),
+  'warning_circle': () => import('./components/warning_circle.vue'),
   'zoom_cancel': () => import('./components/zoom_cancel.vue'),
   'zoom_reset': () => import('./components/zoom_reset.vue'),
-  'volume_disabled': () => import('./components/volume_disabled.vue'),
+  'zoom_out': () => import('./components/zoom_out.vue'),
 }

package/src/components/modal/Modal.vue

@@ -107,7 +107,7 @@ class itfModal extends Vue {
     }
     let context = document.body;
     if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
-      context = this.$el.closest('.itf-append-context') || document.body;
+      context = this.$el.closest('.itf-append-context:not(.modal-content)') || document.body;
       this.$el.parentNode.removeChild(this.$el);
       context.appendChild(this.$el); // should append only to body
     } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {

package/src/components/modal/backdrop.js

@@ -0,0 +1,149 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.3): util/backdrop.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import EventHandler from 'bootstrap/js/src/dom/event-handler'
+import { execute, executeAfterTransition, getElement, reflow } from 'bootstrap/js/src/util/index'
+import Config from 'bootstrap/js/src/util/config'
+
+/**
+ * Constants
+ */
+
+const NAME = 'backdrop'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`
+
+const Default = {
+  className: 'modal-backdrop',
+  clickCallback: null,
+  isAnimated: false,
+  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
+  rootElement: 'body' // give the choice to place backdrop under different elements
+}
+
+const DefaultType = {
+  className: 'string',
+  clickCallback: '(function|null)',
+  isAnimated: 'boolean',
+  isVisible: 'boolean',
+  rootElement: '(element|string)'
+}
+
+/**
+ * Class definition
+ */
+
+class Backdrop extends Config {
+  constructor(config) {
+    super()
+    this._config = this._getConfig(config)
+    this._isAppended = false
+    this._element = null
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  show(callback) {
+    if (!this._config.isVisible) {
+      execute(callback)
+      return
+    }
+
+    this._append()
+
+    const element = this._getElement()
+    if (this._config.isAnimated) {
+      reflow(element)
+    }
+
+    element.classList.add(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      execute(callback)
+    })
+  }
+
+  hide(callback) {
+    if (!this._config.isVisible) {
+      execute(callback)
+      return
+    }
+
+    this._getElement().classList.remove(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      this.dispose()
+      execute(callback)
+    })
+  }
+
+  dispose() {
+    if (!this._isAppended) {
+      return
+    }
+
+    EventHandler.off(this._element, EVENT_MOUSEDOWN)
+
+    this._element.remove()
+    this._isAppended = false
+  }
+
+  // Private
+  _getElement() {
+    if (!this._element) {
+      const backdrop = document.createElement('div')
+      backdrop.className = this._config.className
+      if (this._config.isAnimated) {
+        backdrop.classList.add(CLASS_NAME_FADE)
+      }
+
+      this._element = backdrop
+    }
+
+    return this._element
+  }
+
+  _configAfterMerge(config) {
+    // use getElement() with the default "body" to get a fresh Element on each instantiation
+    config.rootElement = getElement(config.rootElement)
+    return config
+  }
+
+  _append() {
+    if (this._isAppended) {
+      return
+    }
+
+    const element = this._getElement()
+    this._config.rootElement.append(element)
+
+    EventHandler.on(element, EVENT_MOUSEDOWN, () => {
+      execute(this._config.clickCallback)
+    })
+
+    this._isAppended = true
+  }
+
+  _emulateAnimation(callback) {
+    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
+  }
+}
+
+export default Backdrop

package/src/components/modal/modalSrc.js

@@ -10,7 +10,7 @@ import EventHandler from 'bootstrap/js/src/dom/event-handler'
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import ScrollBarHelper from 'bootstrap/js/src/util/scrollbar'
 import BaseComponent from 'bootstrap/js/src/base-component'
-import Backdrop from 'bootstrap/js/src/util/backdrop'
+import Backdrop from './backdrop'
 import FocusTrap from 'bootstrap/js/src/util/focustrap'
 import { enableDismissTrigger } from 'bootstrap/js/src/util/component-functions'
 
@@ -64,7 +64,7 @@ const DefaultType = {
 class Modal extends BaseComponent {
   constructor(element, config) {
     super(element, config)
-console.info(this._config)
+
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
     this._backdrop = this._initializeBackDrop()
     this._focustrap = this._initializeFocusTrap()
@@ -155,6 +155,7 @@ console.info(this._config.context);
   // Private
   _initializeBackDrop() {
     return new Backdrop({
+      rootElement: this._config.context,
       isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
       isAnimated: this._isAnimated()
     })
@@ -340,7 +341,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
 
   if (['A', 'AREA'].includes(this.tagName)) {
     event.preventDefault()
-  } 
+  }
 
   EventHandler.one(target, EVENT_SHOW, showEvent => {
     if (showEvent.defaultPrevented) {