@ironsource/shared-ui 2.1.6-test.14 → 2.1.6-test.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css +1 -0
  2. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_858cefbf_lang.css +1 -0
  3. package/ChipV4.vue_vue_type_style_index_0_scoped_12c0f396_lang.css +1 -0
  4. package/DataGrid.vue_vue_type_style_index_0_scoped_057abdf5_lang.css +1 -0
  5. package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_0345d6b1_lang.css +1 -0
  6. package/DropdownV4.vue_vue_type_style_index_0_scoped_7af4f288_lang.css +1 -0
  7. package/FoldableSection.vue_vue_type_style_index_0_scoped_1a5f0e2e_lang.css +1 -0
  8. package/HelpIcon.vue_vue_type_style_index_0_scoped_06fce2e3_lang.css +1 -0
  9. package/IconV4.vue_vue_type_style_index_0_scoped_9d3c9cda_lang.css +1 -0
  10. package/InlineCopy.vue_vue_type_style_index_0_scoped_893a203c_lang.css +1 -0
  11. package/OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css +1 -0
  12. package/README.md +35 -0
  13. package/TextAreaV4.vue_vue_type_style_index_0_scoped_f3b2c01d_lang.css +1 -0
  14. package/ToggleV4.vue_vue_type_style_index_0_scoped_a4aa32fb_lang.css +1 -0
  15. package/TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css +1 -0
  16. package/components/alert/Alert.vue.d.ts +28 -0
  17. package/components/alert/Alert.vue.js +4 -4
  18. package/components/alert/Alert.vue2.js +67 -46
  19. package/components/alert/index.d.ts +104 -2
  20. package/components/autocomplete/Autocomplete.vue.d.ts +1 -0
  21. package/components/autocomplete/Autocomplete.vue2.js +6 -5
  22. package/components/autocomplete/index.d.ts +1 -0
  23. package/components/button/v4/ButtonV4.vue.d.ts +7 -7
  24. package/components/button/v4/IconButtonV4.vue.d.ts +4 -4
  25. package/components/button/v4/index.d.ts +61 -61
  26. package/components/chip/v4/Chip.types.d.ts +6 -0
  27. package/components/chip/v4/ChipV4.vue.d.ts +28 -35
  28. package/components/chip/v4/ChipV4.vue.js +3 -3
  29. package/components/chip/v4/ChipV4.vue2.js +28 -59
  30. package/components/chip/v4/index.d.ts +45 -148
  31. package/components/datePicker/common/DatePicker.common.js +14 -14
  32. package/components/datePicker/v4/DatePickerV4.vue2.js +3 -2
  33. package/components/dateRange/v4/DateRangeV4.vue2.js +3 -2
  34. package/components/dialog/v3/Dialog.vue.d.ts +1 -1
  35. package/components/dialog/v3/index.d.ts +20 -20
  36. package/components/dropdown/common/Dropdown.common.js +80 -75
  37. package/components/dropdown/common/Option.common.d.ts +1 -1
  38. package/components/dropdown/common/Option.common.js +9 -9
  39. package/components/dropdown/composables/useChildOptions.d.ts +7 -0
  40. package/components/dropdown/composables/useChildOptions.js +14 -0
  41. package/components/dropdown/v4/AppDropdownTrigger.vue.d.ts +14 -3
  42. package/components/dropdown/v4/AppDropdownTrigger.vue.js +3 -3
  43. package/components/dropdown/v4/AppDropdownTrigger.vue2.js +102 -61
  44. package/components/dropdown/v4/DefaultDropdownTrigger.vue.d.ts +8 -3
  45. package/components/dropdown/v4/DefaultDropdownTrigger.vue.js +2 -2
  46. package/components/dropdown/v4/DefaultDropdownTrigger.vue2.js +22 -21
  47. package/components/dropdown/v4/DropdownV4.vue.d.ts +22 -6
  48. package/components/dropdown/v4/DropdownV4.vue.js +2 -2
  49. package/components/dropdown/v4/DropdownV4.vue2.js +81 -73
  50. package/components/dropdown/v4/OptionV4.vue.d.ts +6 -6
  51. package/components/dropdown/v4/OptionV4.vue.js +3 -3
  52. package/components/dropdown/v4/OptionV4.vue2.js +51 -45
  53. package/components/dropdown/v4/TreeDropdown.vue.d.ts +112 -0
  54. package/components/dropdown/v4/TreeDropdown.vue.js +7 -0
  55. package/components/dropdown/v4/TreeDropdown.vue2.js +122 -0
  56. package/components/dropdown/v4/dropdownStoryArgs.d.ts +1 -1
  57. package/components/dropdown/v4/index.d.ts +332 -49
  58. package/components/dropdown/v4/index.js +7 -4
  59. package/components/emptyState/v3/EmptyState.vue.d.ts +2 -2
  60. package/components/emptyState/v3/index.d.ts +47 -47
  61. package/components/emptyState/v4/EmptyStateV4.vue.d.ts +3 -3
  62. package/components/emptyState/v4/index.d.ts +7 -7
  63. package/components/icon/v4/Icon.types.d.ts +1 -1
  64. package/components/icon/v4/IconV4.vue.d.ts +16 -6
  65. package/components/icon/v4/IconV4.vue.js +4 -4
  66. package/components/icon/v4/IconV4.vue2.js +36 -33
  67. package/components/icon/v4/index.d.ts +53 -15
  68. package/components/inlineCopy/InlineCopy.vue.js +2 -2
  69. package/components/inlineCopy/InlineCopy.vue2.js +1 -1
  70. package/components/layout/FoldableSection.vue.js +5 -5
  71. package/components/layout/FoldableSection.vue2.js +1 -1
  72. package/components/multibar/MultiBarMenu.vue2.js +12 -11
  73. package/components/snackbar/v4/SnackbarV4.vue.d.ts +20 -20
  74. package/components/table/common/Table.common.d.ts +1 -0
  75. package/components/table/common/Table.common.js +65 -61
  76. package/components/table/v4/DataGrid.vue.d.ts +5 -1
  77. package/components/table/v4/DataGrid.vue.js +3 -3
  78. package/components/table/v4/DataGrid.vue2.js +166 -162
  79. package/components/table/v4/DataGridMenu.vue2.js +3 -2
  80. package/components/table/v4/HelpIcon.vue.js +5 -5
  81. package/components/table/v4/HelpIcon.vue2.js +5 -5
  82. package/components/table/v4/index.d.ts +16 -4
  83. package/components/textArea/v4/TextAreaV4.vue.js +3 -3
  84. package/components/textArea/v4/TextAreaV4.vue2.js +1 -1
  85. package/components/toggle/v4/ToggleV4.vue.d.ts +1 -1
  86. package/components/toggle/v4/ToggleV4.vue.js +3 -3
  87. package/components/toggle/v4/ToggleV4.vue2.js +12 -12
  88. package/components/toggle/v4/index.d.ts +20 -20
  89. package/composables/useFormValidation.js +19 -13
  90. package/design-foundation.stories/icons/iconsData.d.ts +5 -1
  91. package/index.d.ts +1091 -632
  92. package/mocks/apps.d.ts +1 -0
  93. package/mocks/options.d.ts +12 -0
  94. package/package.json +1 -1
  95. package/utils/text.d.ts +1 -0
  96. package/utils/text.js +9 -0
  97. package/Alert.vue_vue_type_style_index_0_scoped_d6680a72_lang.css +0 -1
  98. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_39c47ad1_lang.css +0 -1
  99. package/ChipV4.vue_vue_type_style_index_0_scoped_78d7c9c0_lang.css +0 -1
  100. package/DataGrid.vue_vue_type_style_index_0_scoped_6df3b70f_lang.css +0 -1
  101. package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css +0 -1
  102. package/DropdownV4.vue_vue_type_style_index_0_scoped_0363db63_lang.css +0 -1
  103. package/FoldableSection.vue_vue_type_style_index_0_scoped_8d0fd203_lang.css +0 -1
  104. package/HelpIcon.vue_vue_type_style_index_0_scoped_7a611779_lang.css +0 -1
  105. package/IconV4.vue_vue_type_style_index_0_scoped_a78f8a3e_lang.css +0 -1
  106. package/InlineCopy.vue_vue_type_style_index_0_scoped_6a7b3795_lang.css +0 -1
  107. package/OptionV4.vue_vue_type_style_index_0_scoped_e0c24b6a_lang.css +0 -1
  108. package/TextAreaV4.vue_vue_type_style_index_0_scoped_8199b662_lang.css +0 -1
  109. package/ToggleV4.vue_vue_type_style_index_0_scoped_ad231e8c_lang.css +0 -1
@@ -0,0 +1 @@
1
+ .alert[data-v-06e0871a]{padding:var(--spacing-150) var(--spacing-200);display:flex;align-items:center}.alert--rounded[data-v-06e0871a]{border-radius:var(--border-radius-lg)}.alert--success[data-v-06e0871a]{outline-color:var(--success-main);background-color:var(--success-lighter)}.alert--success .alert-icon[data-v-06e0871a]{color:var(--success-main)}.alert--warning[data-v-06e0871a]{outline-color:var(--warning-main);background-color:var(--warning-lighter)}.alert--warning .alert-icon[data-v-06e0871a]{color:var(--warning-main)}.alert--danger[data-v-06e0871a]{outline-color:var(--error-main);background-color:var(--error-lighter)}.alert--danger .alert-icon[data-v-06e0871a]{color:var(--error-main)}.alert--info[data-v-06e0871a]{outline-color:var(--info-main);background-color:var(--info-lighter)}.alert--info .alert-icon[data-v-06e0871a]{color:var(--info-main)}.alert--standard[data-v-06e0871a]{outline:none}.alert--outlined[data-v-06e0871a]{background-color:var(--common-white);outline-width:1px;outline-offset:-1px;outline-style:solid}.alert-icon--align-top[data-v-06e0871a]{align-self:flex-start}.alert-content[data-v-06e0871a]{flex:1;margin:0 var(--spacing-150)}.alert-content--no-icon[data-v-06e0871a]{margin-left:var(--spacing-100)}.title-container[data-v-06e0871a]{display:flex;align-items:center}.alert-title[data-v-06e0871a]{color:var(--text-primary);line-height:20px}.alert-description[data-v-06e0871a]{color:var(--text-secondary)}.close-button[data-v-06e0871a]{margin-left:var(--spacing-100)}
@@ -0,0 +1 @@
1
+ .app-trigger-wrapper[data-v-858cefbf]{display:flex}.app-trigger-wrapper.with-copy .app-trigger[data-v-858cefbf]{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);width:calc(100% - 41px)}.app-trigger-key[data-v-858cefbf]{flex:none}.app-trigger-key--content[data-v-858cefbf]{padding:10px;background:var(--default-main);cursor:pointer;border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;border-left:1px solid var(--common-divider);color:var(--action-active)}.app-trigger-key--content[data-v-858cefbf]:hover{background:var(--action-selected);color:var(--action-primary)}.app-trigger[data-v-858cefbf]{width:100%;padding:0 12px;border-radius:var(--border-radius-lg);cursor:pointer;user-select:none;display:inline-flex;background:var(--default-main);height:40px;align-items:center}.app-trigger[data-v-858cefbf]:hover,.app-trigger.active[data-v-858cefbf]{background:var(--action-selected)}.app-trigger.disabled[data-v-858cefbf]{cursor:auto}.app-trigger--content[data-v-858cefbf]{color:var(--text-primary);display:flex;column-gap:4px;width:calc(100% - 20px);align-items:center}.app-trigger--content .x-circle-wrapper[data-v-858cefbf]{color:var(--primary-dark)}.app-trigger--content .x-circle-wrapper[data-v-858cefbf]:hover{color:var(--primary-main)}.app-trigger--icon[data-v-858cefbf]{display:flex;align-items:center;color:var(--action-active)}.app-trigger .displayed-value[data-v-858cefbf]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.app-trigger .image[data-v-858cefbf]{width:28px;height:28px;flex:none}.app-trigger .image img[data-v-858cefbf]{border-radius:4px;width:100%;height:100%}.app-trigger .start-icon[data-v-858cefbf],.app-trigger .end-icon[data-v-858cefbf]{display:flex;color:var(--action-active)}.app-trigger .end-icon[data-v-858cefbf]{margin-right:var(--spacing-100)}.app-trigger .label-text[data-v-858cefbf]{display:flex;align-items:center;gap:8px}.app-trigger .label-text .text-content[data-v-858cefbf]{display:flex;align-items:center;gap:4px;width:100%}.app-trigger .label-text .text-content .text-content-value[data-v-858cefbf]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-trigger .label-text .is-mandatory[data-v-858cefbf]{padding-top:5px;color:var(--error-main)}.value-tooltip[data-v-858cefbf]{display:block}.value-tooltip[data-v-858cefbf] .container{width:100%}
@@ -0,0 +1 @@
1
+ .chip[data-v-12c0f396]{display:inline-flex;align-items:center;width:fit-content;height:fit-content;border-radius:var(--border-radius-sm);padding:2px 4px}.chip--medium[data-v-12c0f396]{padding:6px;border-radius:var(--border-radius-md)}.chip--default[data-v-12c0f396]{color:var(--action-primary);background:var(--default-light);outline-color:var(--common-divider)}.chip--primary[data-v-12c0f396]{color:var(--primary-contrast-text);background:var(--primary-light);outline-color:var(--primary-main)}.chip--info[data-v-12c0f396]{color:var(--info-contrast-text);background:var(--info-light);outline-color:var(--info-dark)}.chip--error[data-v-12c0f396]{color:var(--error-contrast-text);background:var(--error-light);outline-color:var(--error-main)}.chip--warning[data-v-12c0f396]{color:var(--warning-contrast-text);background:var(--warning-light);outline-color:var(--warning-main)}.chip--success[data-v-12c0f396]{color:var(--success-contrast-text);background:var(--success-light);outline-color:var(--success-main)}.chip--dark[data-v-12c0f396]{color:var(--common-inverse-white);background:var(--common-inverse-black);outline-color:var(--common-divider)}.chip--filled[data-v-12c0f396]{outline-width:0}.chip--outlined[data-v-12c0f396]{outline-style:solid;outline-width:1px;outline-offset:-1px;background:transparent}.chip--outlined.chip--dark[data-v-12c0f396]{color:var(--action-primary)}.chip--disabled[data-v-12c0f396]{color:var(--action-disabled);background:var(--action-disabled-background);cursor:not-allowed}
@@ -0,0 +1 @@
1
+ .sticky[data-v-057abdf5]{position:sticky}.table-container[data-v-057abdf5]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-057abdf5]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-057abdf5]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-057abdf5]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-057abdf5]{width:13.75rem}.table-header.isStickyHeader[data-v-057abdf5]{z-index:calc(var(--671cd302) + 3);top:0}.table-head-container[data-v-057abdf5]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-057abdf5]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-057abdf5]{display:inline-table}.table-header-actions[data-v-057abdf5]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-057abdf5]{position:relative}.table-row.loading[data-v-057abdf5]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-057abdf5]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-057abdf5]{border-bottom:none}.expanded-row[data-v-057abdf5]{grid-column:var(--be93a49a);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-057abdf5]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-057abdf5]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-057abdf5],table th[data-v-057abdf5]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-057abdf5]:first-of-type,table th[data-v-057abdf5]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-057abdf5]:last-of-type,table th[data-v-057abdf5]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-057abdf5],table th.expand-toggle-cell[data-v-057abdf5]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-057abdf5]{border-bottom:none;z-index:calc(var(--671cd302) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-057abdf5]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--13ad9fec)}table>thead>tr>th[data-v-057abdf5]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-057abdf5]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-057abdf5]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-057abdf5]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-057abdf5]{cursor:pointer}table>thead.sticky[data-v-057abdf5]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-057abdf5]{z-index:calc(var(--671cd302) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-057abdf5]{display:block}table>tbody>*>tr[data-v-057abdf5]{background-color:var(--background-default);min-height:var(--6feb5274);height:auto;display:grid;align-items:center;grid-template-columns:var(--13ad9fec)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-057abdf5]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-057abdf5],table>tbody>*>tr.activeMenu>td[data-v-057abdf5]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-057abdf5]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--6feb5274);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-057abdf5]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-057abdf5]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-057abdf5]{justify-content:flex-end;text-align:right}.section-container[data-v-057abdf5]{left:0}.sections[data-v-057abdf5]{display:flex}.section[data-v-057abdf5]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-057abdf5]{width:100%}.empty-state[data-v-057abdf5]{min-height:250px}
@@ -0,0 +1 @@
1
+ .default-dropdown-wrapper[data-v-0345d6b1]{position:relative}.dropdown-trigger[data-v-0345d6b1]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-0345d6b1]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-0345d6b1]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-0345d6b1]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-0345d6b1]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-0345d6b1],.dropdown-trigger.disabled .caret-down[data-v-0345d6b1]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-0345d6b1]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-0345d6b1]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-0345d6b1]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-0345d6b1],.dropdown-trigger.state-success[data-v-0345d6b1],.dropdown-trigger.state-warning[data-v-0345d6b1]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-0345d6b1],.dropdown-trigger.state-success.small[data-v-0345d6b1],.dropdown-trigger.state-warning.small[data-v-0345d6b1]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-0345d6b1],.dropdown-trigger.state-success.large[data-v-0345d6b1],.dropdown-trigger.state-warning.large[data-v-0345d6b1]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-0345d6b1]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-0345d6b1]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-0345d6b1]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-0345d6b1]{color:var(--action-active)}.content[data-v-0345d6b1]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-0345d6b1]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-0345d6b1]{width:20px;height:20px;flex:none}.content .image img[data-v-0345d6b1]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-0345d6b1]{display:flex;color:var(--action-active)}.content .status-dot[data-v-0345d6b1]{padding-right:.25rem}.content .status-dot>div[data-v-0345d6b1]{position:relative;top:-1px}.dropdown-field-label[data-v-0345d6b1]{color:var(--text-primary)}.dropdown-field-help-text[data-v-0345d6b1]{margin-top:4px;position:absolute}
@@ -0,0 +1 @@
1
+ .v-enter-active[data-v-7af4f288],.v-leave-active[data-v-7af4f288]{transition:opacity .25s ease}ol[data-v-7af4f288],ul[data-v-7af4f288],menu[data-v-7af4f288]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-7af4f288],.dropdown.full-width .button__container[data-v-7af4f288]{width:100%}.dropdown-list-wrapper[data-v-7af4f288]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-7af4f288]{padding:.5rem}.list-container--multi[data-v-7af4f288]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-7af4f288]{padding-bottom:.25rem}.inline-search .list-container[data-v-7af4f288]{padding-top:0}.no-result-container[data-v-7af4f288]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-7af4f288]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-7af4f288]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-7af4f288]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-7af4f288]{margin-right:.5rem}.actions-wrapper[data-v-7af4f288]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-7af4f288]{margin-left:.5rem}
@@ -0,0 +1 @@
1
+ .title-wrapper[data-v-1a5f0e2e]{display:flex;align-items:center;gap:var(--spacing-50);color:var(--text-primary);margin-bottom:var(--spacing-100);max-width:fit-content;cursor:pointer}.toggle-icon[data-v-1a5f0e2e]{color:var(--action-active)}.v-enter-active[data-v-1a5f0e2e],.v-leave-active[data-v-1a5f0e2e]{transition:opacity .25s ease}.v-enter-from[data-v-1a5f0e2e],.v-leave-to[data-v-1a5f0e2e]{opacity:0}.title[data-v-1a5f0e2e]{line-height:28px}[data-v-1a5f0e2e] .toggle-icon svg{display:block}
@@ -0,0 +1 @@
1
+ .table-help-icon[data-v-06fce2e3]{margin-left:var(--spacing-50);color:var(--action-active);margin-right:calc(var(--spacing-50) * -1)}.info-icon[data-v-06fce2e3]{color:var(--action-active)}.info-icon[data-v-06fce2e3]:hover{color:var(--action-primary)}
@@ -0,0 +1 @@
1
+ .icon[data-v-9d3c9cda]{user-select:none;display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content}.icon .icon-wrapper[data-v-9d3c9cda]{width:var(--2c0b56f5);height:var(--3b908dd8);color:var(--1ca7f58b)}.icon .icon-wrapper[data-v-9d3c9cda] svg{width:100%;height:100%}
@@ -0,0 +1 @@
1
+ .inline-copy[data-v-893a203c]{display:inline-flex;cursor:pointer;color:var(--text-secondary)}.inline-copy .icon-copy[data-v-893a203c]{padding:0 4px;cursor:pointer;color:var(--action-active)}.inline-copy .icon-copy[data-v-893a203c]:hover{color:var(--action-primary)}
@@ -0,0 +1 @@
1
+ .label[data-v-9db0f796]{color:#41454d}.item-container[data-v-9db0f796]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-9db0f796]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-9db0f796]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-9db0f796],.item-container[data-v-9db0f796]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-9db0f796]{background-color:var(--action-selected)}.subtitle[data-v-9db0f796]{color:#7b838c;line-height:1rem}.clear-button[data-v-9db0f796]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-9db0f796]:hover{color:#3083ff}.item[data-v-9db0f796]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-9db0f796],.item--multi[data-v-9db0f796]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-9db0f796]{width:20px;height:20px;flex:none}.item .image img[data-v-9db0f796]{width:20px;height:20px;border-radius:4px}.item .start-icon[data-v-9db0f796],.item .end-icon[data-v-9db0f796]{display:flex;color:var(--action-active)}.item .option-text[data-v-9db0f796]{line-height:1.1875rem}.text-container[data-v-9db0f796]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tooltip-option[data-v-9db0f796]{display:block}.tooltip-option[data-v-9db0f796] .container{width:100%}
package/README.md CHANGED
@@ -130,3 +130,38 @@ npm run pw:ui:local
130
130
  ```
131
131
 
132
132
  Read more about this project <a href="https://github.com/ironsource-mobile/shared-ui-ssp/blob/main/e2e/playwright/README.md">here</a>
133
+
134
+ ## Upload custom icons
135
+
136
+ For uploading a new custom icon like 'ad-network' icon type, follow the next steps:
137
+
138
+ - Compress your SVG
139
+ - Go to <a href="https://svgomg.net/">SVGOMG tool</a> and past your SVG icon
140
+ - Then download the new compressed icon
141
+
142
+ - Validate your SVG
143
+ - Open the SVG file with your editor
144
+ - Make sure the it has `fill="currentColor"` wherever the color should be changeable
145
+ - Make sure it has no width & height hardcoded properties
146
+ - Make sure it has no ids like 'a' or 'b' which possibly won't be unique (change `id="a"` to `id="applovin_a"` for example)
147
+
148
+ - Upload to S3
149
+ - Connect to AWS through Okta
150
+ - Go to S3
151
+ - Search Bucket named 'fusion-assets'
152
+ - Go to the 'fusion-assets/assets/icons/...'
153
+ - Go to the right folder for you
154
+ - Drag your SVG files to the table in order to upload them
155
+
156
+ - Invalidate Cache
157
+ - Connect to AWS through Okta
158
+ - Go to CloudFront
159
+ - Search a distribution named 'fusion.ironsrc.net'
160
+ - Go to the 'Invalidations' tab
161
+ - Create the correct invalidation according to what you've uploaded earlier (example: '/assets/icons/v4/ad-networks/*')
162
+ - Note: you can use the old invalidations by clicking 'Copy to new'
163
+
164
+ - Clear your browser cache
165
+ - Go to your StoryBook link
166
+ - Clear your browser cache
167
+ - New icons should be displayed!!
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-f3b2c01d],.font-chart-2[data-v-f3b2c01d],.font-chart-1[data-v-f3b2c01d]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-f3b2c01d],.font-table-label[data-v-f3b2c01d],.font-button[data-v-f3b2c01d],.font-heading-6[data-v-f3b2c01d],.font-heading-5[data-v-f3b2c01d],.font-heading-4[data-v-f3b2c01d],.font-heading-3[data-v-f3b2c01d],.font-heading-2[data-v-f3b2c01d],.font-heading-1[data-v-f3b2c01d],.font-title[data-v-f3b2c01d]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-f3b2c01d],.font-input-label[data-v-f3b2c01d],.font-overline[data-v-f3b2c01d],.font-subtitle-2[data-v-f3b2c01d],.font-subtitle-1[data-v-f3b2c01d]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-f3b2c01d],.font-body-2[data-v-f3b2c01d],.textarea[data-v-f3b2c01d],.font-body-1[data-v-f3b2c01d]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-f3b2c01d]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-f3b2c01d]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-f3b2c01d]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-f3b2c01d]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-f3b2c01d]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-f3b2c01d]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-f3b2c01d]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.textarea[data-v-f3b2c01d],.font-body-1[data-v-f3b2c01d]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-f3b2c01d]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-f3b2c01d]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-f3b2c01d]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-f3b2c01d]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-f3b2c01d]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-f3b2c01d]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-f3b2c01d]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-f3b2c01d]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-f3b2c01d]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-f3b2c01d]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-f3b2c01d],.font-tab-label2[data-v-f3b2c01d]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-f3b2c01d]{font-size:.75rem;line-height:1rem}h1[data-v-f3b2c01d],h2[data-v-f3b2c01d],h3[data-v-f3b2c01d],h4[data-v-f3b2c01d],h5[data-v-f3b2c01d],h6[data-v-f3b2c01d]{margin:0}.textarea-field[data-v-f3b2c01d]{display:flex;flex-direction:column}.textarea[data-v-f3b2c01d]{flex-grow:1;background:var(--default-main);color:var(--text-primary);padding:var(--spacing-125) var(--spacing-100);height:calc(var(--spacing-900) - 1px);width:100%;border:none;border-radius:var(--border-radius-md);outline:1px solid var(--action-outlined-border);outline-offset:-1px;margin-bottom:1px}.textarea[data-v-f3b2c01d]:hover{outline:1px solid var(--action-active)}.textarea[data-v-f3b2c01d]:focus{outline:2px solid var(--primary-main)}.textarea[data-v-f3b2c01d]::placeholder{color:var(--text-secondary)}.textarea--disabled[data-v-f3b2c01d]{color:var(--text-disabled)}.textarea--disabled[data-v-f3b2c01d]::placeholder{color:var(--text-disabled)}.textarea--disabled[data-v-f3b2c01d]:hover{outline:1px solid var(--action-outlined-border)}.textarea--variant-success[data-v-f3b2c01d],.textarea--variant-success[data-v-f3b2c01d]:hover,.textarea--variant-success[data-v-f3b2c01d]:focus{outline:2px solid var(--success-dark)}.textarea--variant-error[data-v-f3b2c01d],.textarea--variant-error[data-v-f3b2c01d]:hover,.textarea--variant-error[data-v-f3b2c01d]:focus{outline:2px solid var(--error-main)}.textarea--variant-warning[data-v-f3b2c01d],.textarea--variant-warning[data-v-f3b2c01d]:hover,.textarea--variant-warning[data-v-f3b2c01d]:focus{outline:2px solid var(--warning-dark)}.textarea-label[data-v-f3b2c01d]{flex-grow:initial}.footer[data-v-f3b2c01d]{display:flex;justify-content:flex-end;align-items:center;margin-top:var(--spacing-50)}
@@ -0,0 +1 @@
1
+ .toggle .toggle-body[data-v-a4aa32fb]:hover{outline-color:var(--action-active)}.toggle .toggle-disabled[data-v-a4aa32fb]{background-color:var(--action-disabled-background);outline-color:var(--action-outlined-border)}.toggle .toggle-disabled .toggle-head[data-v-a4aa32fb]{background-color:var(--action-disabled)}.toggle .toggle-disabled[data-v-a4aa32fb]:hover{outline-color:var(--action-outlined-border)}.toggle .toggle-disabled-text[data-v-a4aa32fb]{color:var(--text-disabled)}.toggle--color-primary .toggle-active[data-v-a4aa32fb]{background-color:var(--primary-main);outline-color:var(--primary-dark)}.toggle--color-primary .toggle-active .toggle-head[data-v-a4aa32fb]{background-color:var(--common-white)}.toggle--color-primary .toggle-active .loader[data-v-a4aa32fb]{border-color:var(--primary-darker);border-bottom-color:transparent}.toggle--color-primary .toggle-active[data-v-a4aa32fb]:hover{background-color:var(--primary-main-50-p);outline-color:var(--primary-main)}.toggle--color-primary .toggle-active.toggle-disabled[data-v-a4aa32fb]{background-color:var(--primary-main-8-p);outline-color:var(--primary-main-50-p)}.toggle--color-primary .toggle-active.toggle-disabled .toggle-head[data-v-a4aa32fb]{background-color:var(--primary-main-50-p)}.toggle--color-test .toggle-active[data-v-a4aa32fb]{background-color:var(--warning-main);outline-color:var(--warning-dark)}.toggle--color-test .toggle-active .toggle-head[data-v-a4aa32fb]{background-color:var(--common-white)}.toggle--color-test .toggle-active .loader[data-v-a4aa32fb]{border-color:var(--warning-darker);border-bottom-color:transparent}.toggle--color-test .toggle-active[data-v-a4aa32fb]:hover{background-color:var(--warning-main-50-p);outline-color:var(--warning-dark)}.toggle--color-test .toggle-active.toggle-disabled[data-v-a4aa32fb]{background-color:var(--warning-main-8-p);outline-color:var(--warning-main-50-p)}.toggle--color-test .toggle-active.toggle-disabled .toggle-head[data-v-a4aa32fb]{background-color:var(--warning-main-50-p)}.toggle--size-small .toggle-body[data-v-a4aa32fb],.toggle--size-small .toggle-wrap[data-v-a4aa32fb]{height:1rem}.toggle--size-small .toggle-active .toggle-head[data-v-a4aa32fb]{transform:translate(.75rem)}.toggle--size-small .toggle-head[data-v-a4aa32fb]{width:.75rem;height:.75rem}.toggle--size-small .toggle-body[data-v-a4aa32fb]{width:1.75rem}.toggle--size-small .loader[data-v-a4aa32fb]{width:9px;height:9px}.toggle--size-medium .toggle-body[data-v-a4aa32fb],.toggle--size-medium .toggle-wrap[data-v-a4aa32fb]{height:1.25rem}.toggle--size-medium .toggle-active .toggle-head[data-v-a4aa32fb]{transform:translate(1rem)}.toggle--size-medium .toggle-head[data-v-a4aa32fb]{width:1rem;height:1rem}.toggle--size-medium .toggle-body[data-v-a4aa32fb]{width:2.25rem}.toggle--size-medium .loader[data-v-a4aa32fb]{width:12px;height:12px}.toggle-wrap[data-v-a4aa32fb]{display:flex;align-items:center;gap:var(--spacing-50)}.toggle-body[data-v-a4aa32fb]{border-radius:100px;background-color:var(--action-hover);outline:1px solid var(--action-outlined-border);outline-offset:-1px;position:relative;cursor:pointer;display:inline-block}.toggle-body.toggle-disabled[data-v-a4aa32fb]{cursor:default}.toggle-head[data-v-a4aa32fb]{border-radius:100px;background-color:var(--action-active);position:absolute;left:.125rem;top:.125rem;transition:transform .25s linear,background-color .25s linear;display:flex;justify-content:center;align-items:center}.toggle-checkbox[data-v-a4aa32fb]{display:none}.toggle-text[data-v-a4aa32fb]{color:var(--text-primary)}.feedback-text[data-v-a4aa32fb]{display:block;padding-top:var(--spacing-150)}.info-icon[data-v-a4aa32fb]{color:var(--action-active)}.loader[data-v-a4aa32fb]{border:1px solid var(--action-active);border-bottom-color:transparent;border-radius:100%;display:inline-block;box-sizing:border-box;animation:rotation-a4aa32fb 1s linear infinite}.loader.loader-active[data-v-a4aa32fb]{border-bottom-color:transparent}@keyframes rotation-a4aa32fb{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
@@ -0,0 +1 @@
1
+ .child-options[data-v-142eab98]{padding-left:1rem}
@@ -5,7 +5,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
5
5
  variant?: "outlined" | "standard";
6
6
  dismissible?: boolean;
7
7
  actionText?: string;
8
+ actionVariant?: "contained" | "outlined";
9
+ actionIconName?: string;
10
+ actionLoading?: boolean;
11
+ actionSize?: "small" | "medium";
8
12
  rounded?: boolean;
13
+ hideIcon?: boolean;
9
14
  testId?: string;
10
15
  }>, {
11
16
  title: string;
@@ -14,10 +19,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
14
19
  color: string;
15
20
  dismissible: boolean;
16
21
  actionText: string;
22
+ actionIconName: any;
23
+ actionVariant: string;
24
+ actionLoading: boolean;
25
+ actionSize: string;
17
26
  rounded: boolean;
27
+ hideIcon: boolean;
18
28
  testId: string;
19
29
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
20
30
  close: () => void;
31
+ actionButtonClick: () => void;
21
32
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
22
33
  title?: string;
23
34
  description?: string;
@@ -25,7 +36,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
25
36
  variant?: "outlined" | "standard";
26
37
  dismissible?: boolean;
27
38
  actionText?: string;
39
+ actionVariant?: "contained" | "outlined";
40
+ actionIconName?: string;
41
+ actionLoading?: boolean;
42
+ actionSize?: "small" | "medium";
28
43
  rounded?: boolean;
44
+ hideIcon?: boolean;
29
45
  testId?: string;
30
46
  }>, {
31
47
  title: string;
@@ -34,10 +50,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
34
50
  color: string;
35
51
  dismissible: boolean;
36
52
  actionText: string;
53
+ actionIconName: any;
54
+ actionVariant: string;
55
+ actionLoading: boolean;
56
+ actionSize: string;
37
57
  rounded: boolean;
58
+ hideIcon: boolean;
38
59
  testId: string;
39
60
  }>>> & {
40
61
  onClose?: () => any;
62
+ onActionButtonClick?: () => any;
41
63
  }, {
42
64
  title: string;
43
65
  variant: "outlined" | "standard";
@@ -46,8 +68,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
46
68
  description: string;
47
69
  dismissible: boolean;
48
70
  actionText: string;
71
+ actionVariant: "contained" | "outlined";
72
+ actionIconName: string;
73
+ actionLoading: boolean;
74
+ actionSize: "small" | "medium";
49
75
  rounded: boolean;
76
+ hideIcon: boolean;
50
77
  }>, {
78
+ "after-title"?(_: {}): any;
51
79
  default?(_: {}): any;
52
80
  }>;
53
81
  export default _default;
@@ -1,7 +1,7 @@
1
- import o from "./Alert.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Alert.vue_vue_type_style_index_0_scoped_d6680a72_lang.css"; //*');
4
- const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d6680a72"]]);
1
+ import e from "./Alert.vue2.js";
2
+ /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css"; //*');
4
+ const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-06e0871a"]]);
5
5
  export {
6
6
  p as default
7
7
  };
@@ -1,11 +1,11 @@
1
- import "../../Alert.vue_vue_type_style_index_0_scoped_d6680a72_lang.css"; import { defineComponent as B, computed as I, openBlock as l, createElementBlock as u, mergeProps as a, unref as e, createVNode as m, normalizeClass as v, createElementVNode as x, createBlock as s, withCtx as f, createTextVNode as N, toDisplayString as T, createCommentVNode as i, renderSlot as A } from "vue";
2
- import y from "../typography/v4/Typography.vue.js";
3
- import C from "../icon/v4/IconV4.vue.js";
1
+ import "../../Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css"; import { defineComponent as N, computed as x, openBlock as n, createElementBlock as y, mergeProps as l, unref as e, createBlock as d, normalizeClass as I, createCommentVNode as c, createElementVNode as T, withCtx as s, createTextVNode as g, toDisplayString as u, renderSlot as k, createVNode as z } from "vue";
2
+ import B from "../typography/v4/Typography.vue.js";
3
+ import A from "../icon/v4/IconV4.vue.js";
4
4
  import E from "../button/v4/ButtonV4.vue.js";
5
- import p from "../button/v4/IconButtonV4.vue.js";
5
+ import S from "../button/v4/IconButtonV4.vue.js";
6
6
  import { useTestIdAttrs as h } from "../../utils/testIds.js";
7
7
  import { AlertTestIdModifiers as o } from "../../testids/index.js";
8
- const S = { class: "alert-content" }, b = { key: 0 }, R = /* @__PURE__ */ B({
8
+ const V = { class: "title-container" }, $ = { key: 0 }, U = /* @__PURE__ */ N({
9
9
  __name: "Alert",
10
10
  props: {
11
11
  title: { default: "" },
@@ -14,74 +14,95 @@ const S = { class: "alert-content" }, b = { key: 0 }, R = /* @__PURE__ */ B({
14
14
  variant: { default: "standard" },
15
15
  dismissible: { type: Boolean, default: !1 },
16
16
  actionText: { default: "" },
17
+ actionVariant: { default: "outlined" },
18
+ actionIconName: { default: null },
19
+ actionLoading: { type: Boolean, default: !1 },
20
+ actionSize: { default: "small" },
17
21
  rounded: { type: Boolean, default: !0 },
22
+ hideIcon: { type: Boolean, default: !1 },
18
23
  testId: { default: "" }
19
24
  },
20
- emits: ["close"],
21
- setup(t, { emit: g }) {
22
- const c = t, k = I(() => {
23
- const r = {
25
+ emits: ["close", "actionButtonClick"],
26
+ setup(t, { emit: f }) {
27
+ const m = t, v = x(() => {
28
+ const i = {
24
29
  success: "check-circle",
25
30
  warning: "warning",
26
31
  danger: "warning-octagon",
27
32
  info: "info"
28
33
  };
29
- return r[c.color] || r.success;
30
- }), n = h(c.testId, o);
31
- return (r, d) => (l(), u("div", a({
34
+ return i[m.color] || i.success;
35
+ }), a = h(m.testId, o);
36
+ return (i, r) => (n(), y("div", l({
32
37
  class: ["alert", {
33
38
  [`alert--${t.color}`]: !0,
34
39
  [`alert--${t.variant}`]: !0,
35
40
  "alert--rounded": t.rounded
36
41
  }]
37
- }, e(n)[e(o).WRAPPER]), [
38
- m(e(C), {
39
- name: e(k),
40
- class: v(["alert-icon", { "alert-icon--align-top": t.title && t.description }]),
42
+ }, e(a)[e(o).WRAPPER]), [
43
+ t.hideIcon ? c("", !0) : (n(), d(e(A), {
44
+ key: 0,
45
+ name: e(v),
46
+ class: I(["alert-icon", { "alert-icon--align-top": t.title && t.description }]),
41
47
  type: "fill",
42
48
  size: "20px"
43
- }, null, 8, ["name", "class"]),
44
- x("div", S, [
45
- t.title ? (l(), s(e(y), a({
46
- key: 0,
47
- class: "alert-title",
48
- variant: "h4"
49
- }, e(n)[e(o).TITLE]), {
50
- default: f(() => [
51
- N(T(t.title), 1)
52
- ]),
53
- _: 1
54
- }, 16)) : i("", !0),
55
- m(e(y), a({
49
+ }, null, 8, ["name", "class"])),
50
+ T("div", {
51
+ class: I(["alert-content", {
52
+ "alert-content--no-icon": t.hideIcon
53
+ }])
54
+ }, [
55
+ T("div", V, [
56
+ t.title ? (n(), d(e(B), l({
57
+ key: 0,
58
+ class: "alert-title",
59
+ variant: "h4"
60
+ }, e(a)[e(o).TITLE]), {
61
+ default: s(() => [
62
+ g(u(t.title), 1)
63
+ ]),
64
+ _: 1
65
+ }, 16)) : c("", !0),
66
+ k(i.$slots, "after-title", {}, void 0, !0)
67
+ ]),
68
+ z(e(B), l({
56
69
  class: "alert-description",
57
70
  variant: "body1"
58
- }, e(n)[e(o).MESSAGE]), {
59
- default: f(() => [
60
- A(r.$slots, "default", {}, () => [
61
- t.description ? (l(), u("span", b, T(t.description), 1)) : i("", !0)
71
+ }, e(a)[e(o).MESSAGE]), {
72
+ default: s(() => [
73
+ k(i.$slots, "default", {}, () => [
74
+ t.description ? (n(), y("span", $, u(t.description), 1)) : c("", !0)
62
75
  ], !0)
63
76
  ]),
64
77
  _: 3
65
78
  }, 16)
66
- ]),
67
- t.actionText ? (l(), s(e(E), a({
68
- key: 0,
69
- variant: "outlined",
70
- content: t.actionText,
71
- color: t.color,
72
- size: "small"
73
- }, e(n)[e(o).ACTION_BUTTON]), null, 16, ["content", "color"])) : i("", !0),
74
- t.dismissible ? (l(), s(e(p), a({
79
+ ], 2),
80
+ t.actionText ? (n(), d(e(E), l({
75
81
  key: 1,
82
+ variant: t.actionVariant,
83
+ "end-icon-name": t.actionIconName,
84
+ color: t.color,
85
+ size: t.actionSize,
86
+ loading: t.actionLoading
87
+ }, e(a)[e(o).ACTION_BUTTON], {
88
+ onClick: r[0] || (r[0] = (C) => f("actionButtonClick"))
89
+ }), {
90
+ default: s(() => [
91
+ g(u(t.actionText), 1)
92
+ ]),
93
+ _: 1
94
+ }, 16, ["variant", "end-icon-name", "color", "size", "loading"])) : c("", !0),
95
+ t.dismissible ? (n(), d(e(S), l({
96
+ key: 2,
76
97
  class: "close-button",
77
98
  "icon-name": "x",
78
99
  size: "small"
79
- }, e(n)[e(o).CLOSE_BUTTON], {
80
- onClick: d[0] || (d[0] = (w) => g("close"))
81
- }), null, 16)) : i("", !0)
100
+ }, e(a)[e(o).CLOSE_BUTTON], {
101
+ onClick: r[1] || (r[1] = (C) => f("close"))
102
+ }), null, 16)) : c("", !0)
82
103
  ], 16));
83
104
  }
84
105
  });
85
106
  export {
86
- R as default
107
+ U as default
87
108
  };
@@ -11,7 +11,12 @@ declare const AlertTypes: () => ({
11
11
  description: string;
12
12
  dismissible: boolean;
13
13
  actionText: string;
14
+ actionVariant: "contained" | "outlined";
15
+ actionIconName: string;
16
+ actionLoading: boolean;
17
+ actionSize: "small" | "medium";
14
18
  rounded: boolean;
19
+ hideIcon: boolean;
15
20
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
16
21
  title: {
17
22
  type: import("vue").PropType<string>;
@@ -41,13 +46,34 @@ declare const AlertTypes: () => ({
41
46
  type: import("vue").PropType<string>;
42
47
  default: string;
43
48
  };
49
+ actionVariant: {
50
+ type: import("vue").PropType<"contained" | "outlined">;
51
+ default: string;
52
+ };
53
+ actionIconName: {
54
+ type: import("vue").PropType<string>;
55
+ default: any;
56
+ };
57
+ actionLoading: {
58
+ type: import("vue").PropType<boolean>;
59
+ default: boolean;
60
+ };
61
+ actionSize: {
62
+ type: import("vue").PropType<"small" | "medium">;
63
+ default: string;
64
+ };
44
65
  rounded: {
45
66
  type: import("vue").PropType<boolean>;
46
67
  default: boolean;
47
68
  };
69
+ hideIcon: {
70
+ type: import("vue").PropType<boolean>;
71
+ default: boolean;
72
+ };
48
73
  }>> & {
49
74
  onClose?: () => any;
50
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "rounded">;
75
+ onActionButtonClick?: () => any;
76
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionVariant" | "actionIconName" | "actionLoading" | "actionSize" | "rounded" | "hideIcon">;
51
77
  $attrs: {
52
78
  [x: string]: unknown;
53
79
  };
@@ -59,7 +85,7 @@ declare const AlertTypes: () => ({
59
85
  }>;
60
86
  $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
61
87
  $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
62
- $emit: (event: "close") => void;
88
+ $emit: ((event: "close") => void) & ((event: "actionButtonClick") => void);
63
89
  $el: any;
64
90
  $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
65
91
  title: {
@@ -90,14 +116,36 @@ declare const AlertTypes: () => ({
90
116
  type: import("vue").PropType<string>;
91
117
  default: string;
92
118
  };
119
+ actionVariant: {
120
+ type: import("vue").PropType<"contained" | "outlined">;
121
+ default: string;
122
+ };
123
+ actionIconName: {
124
+ type: import("vue").PropType<string>;
125
+ default: any;
126
+ };
127
+ actionLoading: {
128
+ type: import("vue").PropType<boolean>;
129
+ default: boolean;
130
+ };
131
+ actionSize: {
132
+ type: import("vue").PropType<"small" | "medium">;
133
+ default: string;
134
+ };
93
135
  rounded: {
94
136
  type: import("vue").PropType<boolean>;
95
137
  default: boolean;
96
138
  };
139
+ hideIcon: {
140
+ type: import("vue").PropType<boolean>;
141
+ default: boolean;
142
+ };
97
143
  }>> & {
98
144
  onClose?: () => any;
145
+ onActionButtonClick?: () => any;
99
146
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
100
147
  close: () => void;
148
+ actionButtonClick: () => void;
101
149
  }, string, {
102
150
  title: string;
103
151
  variant: "outlined" | "standard";
@@ -106,7 +154,12 @@ declare const AlertTypes: () => ({
106
154
  description: string;
107
155
  dismissible: boolean;
108
156
  actionText: string;
157
+ actionVariant: "contained" | "outlined";
158
+ actionIconName: string;
159
+ actionLoading: boolean;
160
+ actionSize: "small" | "medium";
109
161
  rounded: boolean;
162
+ hideIcon: boolean;
110
163
  }, {}, string> & {
111
164
  beforeCreate?: (() => void) | (() => void)[];
112
165
  created?: (() => void) | (() => void)[];
@@ -156,12 +209,33 @@ declare const AlertTypes: () => ({
156
209
  type: import("vue").PropType<string>;
157
210
  default: string;
158
211
  };
212
+ actionVariant: {
213
+ type: import("vue").PropType<"contained" | "outlined">;
214
+ default: string;
215
+ };
216
+ actionIconName: {
217
+ type: import("vue").PropType<string>;
218
+ default: any;
219
+ };
220
+ actionLoading: {
221
+ type: import("vue").PropType<boolean>;
222
+ default: boolean;
223
+ };
224
+ actionSize: {
225
+ type: import("vue").PropType<"small" | "medium">;
226
+ default: string;
227
+ };
159
228
  rounded: {
160
229
  type: import("vue").PropType<boolean>;
161
230
  default: boolean;
162
231
  };
232
+ hideIcon: {
233
+ type: import("vue").PropType<boolean>;
234
+ default: boolean;
235
+ };
163
236
  }>> & {
164
237
  onClose?: () => any;
238
+ onActionButtonClick?: () => any;
165
239
  } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
166
240
  __isFragment?: never;
167
241
  __isTeleport?: never;
@@ -195,14 +269,36 @@ declare const AlertTypes: () => ({
195
269
  type: import("vue").PropType<string>;
196
270
  default: string;
197
271
  };
272
+ actionVariant: {
273
+ type: import("vue").PropType<"contained" | "outlined">;
274
+ default: string;
275
+ };
276
+ actionIconName: {
277
+ type: import("vue").PropType<string>;
278
+ default: any;
279
+ };
280
+ actionLoading: {
281
+ type: import("vue").PropType<boolean>;
282
+ default: boolean;
283
+ };
284
+ actionSize: {
285
+ type: import("vue").PropType<"small" | "medium">;
286
+ default: string;
287
+ };
198
288
  rounded: {
199
289
  type: import("vue").PropType<boolean>;
200
290
  default: boolean;
201
291
  };
292
+ hideIcon: {
293
+ type: import("vue").PropType<boolean>;
294
+ default: boolean;
295
+ };
202
296
  }>> & {
203
297
  onClose?: () => any;
298
+ onActionButtonClick?: () => any;
204
299
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
205
300
  close: () => void;
301
+ actionButtonClick: () => void;
206
302
  }, string, {
207
303
  title: string;
208
304
  variant: "outlined" | "standard";
@@ -211,9 +307,15 @@ declare const AlertTypes: () => ({
211
307
  description: string;
212
308
  dismissible: boolean;
213
309
  actionText: string;
310
+ actionVariant: "contained" | "outlined";
311
+ actionIconName: string;
312
+ actionLoading: boolean;
313
+ actionSize: "small" | "medium";
214
314
  rounded: boolean;
315
+ hideIcon: boolean;
215
316
  }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
216
317
  $slots: {
318
+ "after-title"?(_: {}): any;
217
319
  default?(_: {}): any;
218
320
  };
219
321
  }))[];
@@ -115,6 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
115
115
  }>, {
116
116
  default?(_: {
117
117
  option: unknown;
118
+ index: number;
118
119
  selected: boolean;
119
120
  active: boolean;
120
121
  disabled: any;
@@ -6,6 +6,7 @@ import "../dropdown/v4/ChipDropdownTrigger.vue.js";
6
6
  import "../dropdown/v4/AppDropdownTrigger.vue.js";
7
7
  import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
8
8
  import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
9
+ import "../dropdown/v4/TreeDropdown.vue.js";
9
10
  import "../dropdown/v4/OptionV4.vue.js";
10
11
  import E from "../input/v4/TextField.vue.js";
11
12
  import { useVModel as z } from "@vueuse/core";
@@ -14,7 +15,7 @@ import P from "../shared/FieldMaxLength.vue.js";
14
15
  const N = {
15
16
  key: 0,
16
17
  class: "footer"
17
- }, Q = /* @__PURE__ */ w({
18
+ }, X = /* @__PURE__ */ w({
18
19
  __name: "Autocomplete",
19
20
  props: {
20
21
  modelValue: { default: "" },
@@ -40,8 +41,8 @@ const N = {
40
41
  testId: { default: "" }
41
42
  },
42
43
  emits: ["update:modelValue"],
43
- setup(e, { emit: g }) {
44
- const a = e, i = z(a, "modelValue", g), p = (l) => {
44
+ setup(e, { emit: p }) {
45
+ const a = e, i = z(a, "modelValue", p), g = (l) => {
45
46
  l !== void 0 && (i.value = a.displayValue(l));
46
47
  }, k = c(() => (i.value || "").length), y = (l, t) => a.displayValue(l).toLowerCase().replace(/\s+/g, "").includes(t.toLowerCase().replace(/\s+/g, "")), u = c(() => {
47
48
  const l = i.value.toString();
@@ -68,7 +69,7 @@ const N = {
68
69
  "search-auto-focus": !1,
69
70
  "full-width": !1,
70
71
  "test-id": e.testId,
71
- "onUpdate:selected": p
72
+ "onUpdate:selected": g
72
73
  }, {
73
74
  "dropdown-trigger": x(() => [
74
75
  v(d(E), {
@@ -117,5 +118,5 @@ const N = {
117
118
  }
118
119
  });
119
120
  export {
120
- Q as default
121
+ X as default
121
122
  };
@@ -469,6 +469,7 @@ declare const AutocompleteTypes: () => ({
469
469
  $slots: {
470
470
  default?(_: {
471
471
  option: unknown;
472
+ index: number;
472
473
  selected: boolean;
473
474
  active: boolean;
474
475
  disabled: any;