@bethinkpl/design-system 33.0.2 → 33.0.3

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 (41) hide show
  1. package/dist/design-system.css +1 -1
  2. package/dist/design-system.js +11499 -11173
  3. package/dist/design-system.js.map +1 -1
  4. package/dist/lib/js/components/Buttons/IconButton/IconButton.vue.d.ts +1 -0
  5. package/dist/lib/js/components/Cards/CardExpandable/CardExpandable.vue.d.ts +1 -0
  6. package/dist/lib/js/components/Chip/Chip.vue.d.ts +2 -0
  7. package/dist/lib/js/components/DatePickers/DateBox/DateBox.vue.d.ts +1 -0
  8. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +1 -0
  9. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +1 -0
  10. package/dist/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue.d.ts +4 -0
  11. package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue.d.ts +1 -0
  12. package/dist/lib/js/components/Drawer/DrawerSection/DrawerSection.vue.d.ts +3 -0
  13. package/dist/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.vue.d.ts +79 -0
  14. package/dist/lib/js/components/Form/RadioButton/RadioButton.vue.d.ts +1 -0
  15. package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +2 -0
  16. package/dist/lib/js/components/Headers/SectionHeader/SectionHeader.vue.d.ts +2 -0
  17. package/dist/lib/js/components/Icons/Icon/Icon.consts.d.ts +1 -0
  18. package/dist/lib/js/components/Modal/Modal.vue.d.ts +1 -0
  19. package/dist/lib/js/components/Modals/Modal/Modal.vue.d.ts +52 -26
  20. package/dist/lib/js/components/Modals/ModalDialog/ModalDialog.vue.d.ts +52 -26
  21. package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +3 -0
  22. package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts +1 -0
  23. package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts +1 -0
  24. package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +13 -12
  25. package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +1 -0
  26. package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts +1 -0
  27. package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts +1 -0
  28. package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts +1 -0
  29. package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts +1 -0
  30. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts +3 -0
  31. package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts +3 -0
  32. package/dist/lib/js/components/Switch/Switch.vue.d.ts +1 -0
  33. package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +1 -0
  34. package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts +1 -0
  35. package/dist/lib/js/icons/fontawesome.d.ts +1 -0
  36. package/dist/lib/js/index.d.ts +3 -0
  37. package/lib/js/components/Modals/Modal/Modal.stories.ts +5 -1
  38. package/lib/js/components/Modals/Modal/Modal.vue +116 -79
  39. package/lib/js/icons/fontawesome.ts +2 -0
  40. package/lib/js/index.ts +3 -0
  41. package/package.json +1 -1
package/dist/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue.d.ts CHANGED
@@ -115,6 +115,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
115
115
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
116
116
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
117
117
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
119
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
120
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
120
121
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts CHANGED
@@ -647,6 +647,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
647
647
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
648
648
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
649
649
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
650
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
650
651
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
651
652
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
652
653
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -971,15 +972,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
971
972
  }, {}, {
972
973
  DsCheckbox: {
973
974
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
974
- modelValue: import('vue').PropType<import('../../Form/Checkbox').CheckboxValue>;
975
+ modelValue: import('vue').PropType<import('../../..').CheckboxValue>;
975
976
  size: {
976
- type: PropType<import('../../Form/Checkbox').CheckboxSize>;
977
+ type: PropType<import('../../..').CheckboxSize>;
977
978
  };
978
979
  state: {
979
- type: PropType<import('../../Form/Checkbox').CheckboxState>;
980
+ type: PropType<import('../../..').CheckboxState>;
980
981
  };
981
982
  elevation: {
982
- type: PropType<import('../../Form/Checkbox').CheckboxElevation>;
983
+ type: PropType<import('../../..').CheckboxElevation>;
983
984
  };
984
985
  value: {
985
986
  type: PropType<string>;
@@ -992,15 +993,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
992
993
  M: {};
993
994
  Defaults: {};
994
995
  }, Readonly<import('vue').ExtractPropTypes<{
995
- modelValue: import('vue').PropType<import('../../Form/Checkbox').CheckboxValue>;
996
+ modelValue: import('vue').PropType<import('../../..').CheckboxValue>;
996
997
  size: {
997
- type: PropType<import('../../Form/Checkbox').CheckboxSize>;
998
+ type: PropType<import('../../..').CheckboxSize>;
998
999
  };
999
1000
  state: {
1000
- type: PropType<import('../../Form/Checkbox').CheckboxState>;
1001
+ type: PropType<import('../../..').CheckboxState>;
1001
1002
  };
1002
1003
  elevation: {
1003
- type: PropType<import('../../Form/Checkbox').CheckboxElevation>;
1004
+ type: PropType<import('../../..').CheckboxElevation>;
1004
1005
  };
1005
1006
  value: {
1006
1007
  type: PropType<string>;
@@ -1010,15 +1011,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1010
1011
  __isTeleport?: never;
1011
1012
  __isSuspense?: never;
1012
1013
  } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
1013
- modelValue: import('vue').PropType<import('../../Form/Checkbox').CheckboxValue>;
1014
+ modelValue: import('vue').PropType<import('../../..').CheckboxValue>;
1014
1015
  size: {
1015
- type: PropType<import('../../Form/Checkbox').CheckboxSize>;
1016
+ type: PropType<import('../../..').CheckboxSize>;
1016
1017
  };
1017
1018
  state: {
1018
- type: PropType<import('../../Form/Checkbox').CheckboxState>;
1019
+ type: PropType<import('../../..').CheckboxState>;
1019
1020
  };
1020
1021
  elevation: {
1021
- type: PropType<import('../../Form/Checkbox').CheckboxElevation>;
1022
+ type: PropType<import('../../..').CheckboxElevation>;
1022
1023
  };
1023
1024
  value: {
1024
1025
  type: PropType<string>;
package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts CHANGED
@@ -181,6 +181,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
181
181
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
182
182
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
183
183
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
184
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
184
185
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
185
186
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
186
187
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SelectList/SelectListItem/SelectListItem.vue.d.ts CHANGED
@@ -140,6 +140,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
140
140
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
141
141
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
142
142
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
143
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
143
144
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
144
145
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
145
146
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue.d.ts CHANGED
@@ -227,6 +227,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
227
227
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
228
228
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
229
229
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
230
231
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
231
232
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
232
233
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Statuses/AccessStatus/AccessStatus.vue.d.ts CHANGED
@@ -98,6 +98,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
98
98
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
99
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
100
100
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
101
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
101
102
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
102
103
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
103
104
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue.d.ts CHANGED
@@ -96,6 +96,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
96
96
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
97
97
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
98
98
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
100
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
100
101
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
101
102
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts CHANGED
@@ -115,6 +115,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
115
115
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
116
116
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
117
117
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
118
119
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
119
120
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
120
121
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -763,6 +764,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
763
764
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
764
765
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
765
766
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
767
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
766
768
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
767
769
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
768
770
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1308,6 +1310,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1308
1310
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
1309
1311
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1310
1312
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1313
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1311
1314
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1312
1315
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1313
1316
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts CHANGED
@@ -134,6 +134,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
134
134
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
135
135
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
136
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
138
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
138
139
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
139
140
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -736,6 +737,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
736
737
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
737
738
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
738
739
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
740
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
739
741
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
740
742
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
741
743
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -1454,6 +1456,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
1454
1456
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
1455
1457
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1456
1458
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
1459
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
1457
1460
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
1458
1461
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
1459
1462
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Switch/Switch.vue.d.ts CHANGED
@@ -134,6 +134,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
134
134
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
135
135
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
136
136
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
137
138
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
138
139
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
139
140
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts CHANGED
@@ -94,6 +94,7 @@ export declare const data: () => {
94
94
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
95
95
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
96
96
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
97
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
97
98
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
98
99
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
99
100
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts CHANGED
@@ -150,6 +150,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
150
150
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
151
151
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
152
152
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
153
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
153
154
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
154
155
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
155
156
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/icons/fontawesome.d.ts CHANGED
@@ -81,6 +81,7 @@ export declare const FONTAWESOME_ICONS: {
81
81
  readonly FA_CIRCLE_QUESTION: import('@fortawesome/fontawesome-common-types').IconDefinition;
82
82
  readonly FA_CIRCLE_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
83
83
  readonly FA_CIRCLE_XMARK: import('@fortawesome/fontawesome-common-types').IconDefinition;
84
+ readonly FA_CIRCLE_XMARK_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
84
85
  readonly FA_CIRCLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
85
86
  readonly FA_CLIPBOARD_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
86
87
  readonly FA_CLIPBOARD_MEDICAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
package/dist/lib/js/index.d.ts CHANGED
@@ -19,6 +19,9 @@ export * from './components/Cards/Card';
19
19
  export { default as DsCard } from './components/Cards/Card';
20
20
  export { default as CardExpandable } from './components/Cards/CardExpandable/';
21
21
  export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
22
+ export { default as DsCheckbox } from './components/Form/Checkbox';
23
+ export * from './components/Form/Checkbox';
24
+ export { default as DsCheckboxGroupField } from './components/Form/CheckboxGroupField';
22
25
  export { default as DsDateBox } from './components/DatePickers/DateBox';
23
26
  export { default as DatePicker } from './components/DatePickers/DatePicker';
24
27
  export { default as DsDatePicker } from './components/DatePickers/DatePicker';
package/lib/js/components/Modals/Modal/Modal.stories.ts CHANGED
@@ -22,7 +22,7 @@ const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
22
22
  ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' +
23
23
  ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' +
24
24
  ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' +
25
- ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' +
25
+ ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage" :is-footer-sticky="isFooterSticky" :is-full-height="isFullHeight">' +
26
26
  '<div v-html="defaultSlot" />' +
27
27
  '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' +
28
28
  '</modal>',
@@ -58,6 +58,8 @@ const args = {
58
58
  footerTertiaryButtonIcon: null,
59
59
  footerTertiaryButtonState: BUTTON_STATES.DEFAULT,
60
60
  footerCheckboxText: '',
61
+ isFooterSticky: false,
62
+ isFullHeight: false,
61
63
  } as Args;
62
64
 
63
65
  const argTypes = {
@@ -110,6 +112,8 @@ const argTypes = {
110
112
  options: Object.values(BUTTON_STATES),
111
113
  },
112
114
  footerCheckboxText: { control: 'text' },
115
+ isFullHeight: { control: 'boolean' },
116
+ isFooterSticky: { control: 'boolean' },
113
117
  onCloseModal: { action: 'close-modal' },
114
118
  onCheckboxChange: { action: 'checkbox-change' },
115
119
  onPrimaryButtonClick: { action: 'primary-button-click' },
package/lib/js/components/Modals/Modal/Modal.vue CHANGED
@@ -1,7 +1,13 @@
1
1
  <template>
2
2
  <teleport to="body">
3
3
  <div class="ds-modal" v-bind="$attrs" @click.self="$emit('close-modal')">
4
- <div class="ds-modal__wrapper" :class="{ '-ds-small': size === MODAL_SIZES.SMALL }">
4
+ <div
5
+ class="ds-modal__wrapper"
6
+ :class="{
7
+ '-ds-small': size === MODAL_SIZES.SMALL,
8
+ '-ds-isFullHeight': isFullHeight,
9
+ }"
10
+ >
5
11
  <div class="ds-modal__rightActions">
6
12
  <slot name="rightActions" />
7
13
  <wnl-icon-button
@@ -41,68 +47,73 @@
41
47
  <slot />
42
48
  </div>
43
49
  <div
44
- v-if="displayFooter"
45
- class="ds-modal__footer"
46
- :class="{ '-ds-singleColumn': calcSingleColumn }"
50
+ class="ds-modal__footerWrapper"
51
+ :class="{ '-ds-stickyFooter': isFooterSticky }"
47
52
  >
48
53
  <div
49
- v-if="footerTertiaryButtonText || footerCheckboxText"
50
- class="ds-modal__footerCtaSecondary"
54
+ v-if="displayFooter"
55
+ class="ds-modal__footer"
56
+ :class="{ '-ds-singleColumn': calcSingleColumn }"
51
57
  >
52
- <div v-if="footerCheckboxText" class="ds-modal__checkbox">
53
- <input
54
- id="ds-modal__checkboxInput"
55
- type="checkbox"
56
- :checked="false"
57
- @change="
58
- $emit(
59
- 'checkbox-change',
60
- ($event.target as HTMLInputElement).checked,
61
- )
62
- "
63
- />
64
- <label
65
- for="ds-modal__checkboxInput"
66
- class="ds-modal__checkboxLabel"
58
+ <div
59
+ v-if="footerTertiaryButtonText || footerCheckboxText"
60
+ class="ds-modal__footerCtaSecondary"
61
+ >
62
+ <div v-if="footerCheckboxText" class="ds-modal__checkbox">
63
+ <input
64
+ id="ds-modal__checkboxInput"
65
+ type="checkbox"
66
+ :checked="false"
67
+ @change="
68
+ $emit(
69
+ 'checkbox-change',
70
+ ($event.target as HTMLInputElement).checked,
71
+ )
72
+ "
73
+ />
74
+ <label
75
+ for="ds-modal__checkboxInput"
76
+ class="ds-modal__checkboxLabel"
77
+ >
78
+ {{ footerCheckboxText }}
79
+ </label>
80
+ </div>
81
+ <wnl-button
82
+ v-if="footerTertiaryButtonText"
83
+ :type="BUTTON_TYPES.TEXT"
84
+ :color="BUTTON_COLORS.NEUTRAL"
85
+ :icon-left="footerTertiaryButtonIcon"
86
+ :state="footerTertiaryButtonState"
87
+ class="ds-modal__tertiaryButton"
88
+ @click="$emit('tertiary-button-click')"
67
89
  >
68
- {{ footerCheckboxText }}
69
- </label>
90
+ {{ footerTertiaryButtonText }}
91
+ </wnl-button>
70
92
  </div>
71
- <wnl-button
72
- v-if="footerTertiaryButtonText"
73
- :type="BUTTON_TYPES.TEXT"
74
- :color="BUTTON_COLORS.NEUTRAL"
75
- :icon-left="footerTertiaryButtonIcon"
76
- :state="footerTertiaryButtonState"
77
- class="ds-modal__tertiaryButton"
78
- @click="$emit('tertiary-button-click')"
93
+ <div
94
+ v-if="footerSecondaryButtonText || footerPrimaryButtonText"
95
+ class="ds-modal__footerCtaPrimary"
79
96
  >
80
- {{ footerTertiaryButtonText }}
81
- </wnl-button>
82
- </div>
83
- <div
84
- v-if="footerSecondaryButtonText || footerPrimaryButtonText"
85
- class="ds-modal__footerCtaPrimary"
86
- >
87
- <wnl-button
88
- v-if="footerSecondaryButtonText"
89
- :type="BUTTON_TYPES.OUTLINED"
90
- :color="calcFooterSecondaryButtonColor"
91
- :icon-right="footerSecondaryButtonIcon"
92
- :state="footerSecondaryButtonState"
93
- @click="$emit('secondary-button-click')"
94
- >
95
- {{ footerSecondaryButtonText }}
96
- </wnl-button>
97
- <wnl-button
98
- v-if="footerPrimaryButtonText"
99
- :color="calcFooterPrimaryButtonColor"
100
- :icon-right="footerPrimaryButtonIcon"
101
- :state="footerPrimaryButtonState"
102
- @click="$emit('primary-button-click')"
103
- >
104
- {{ footerPrimaryButtonText }}
105
- </wnl-button>
97
+ <wnl-button
98
+ v-if="footerSecondaryButtonText"
99
+ :type="BUTTON_TYPES.OUTLINED"
100
+ :color="calcFooterSecondaryButtonColor"
101
+ :icon-right="footerSecondaryButtonIcon"
102
+ :state="footerSecondaryButtonState"
103
+ @click="$emit('secondary-button-click')"
104
+ >
105
+ {{ footerSecondaryButtonText }}
106
+ </wnl-button>
107
+ <wnl-button
108
+ v-if="footerPrimaryButtonText"
109
+ :color="calcFooterPrimaryButtonColor"
110
+ :icon-right="footerPrimaryButtonIcon"
111
+ :state="footerPrimaryButtonState"
112
+ @click="$emit('primary-button-click')"
113
+ >
114
+ {{ footerPrimaryButtonText }}
115
+ </wnl-button>
116
+ </div>
106
117
  </div>
107
118
  </div>
108
119
  </div>
@@ -163,6 +174,15 @@ $image-height-small: 140px;
163
174
  max-height: 84vh;
164
175
  }
165
176
 
177
+ &.-ds-isFullHeight {
178
+ height: 100%;
179
+
180
+ #{$self}__content,
181
+ #{$self}__slotContent {
182
+ height: 100%;
183
+ }
184
+ }
185
+
166
186
  &.-ds-small {
167
187
  max-width: $modal-small-width;
168
188
 
@@ -185,12 +205,13 @@ $image-height-small: 140px;
185
205
  }
186
206
 
187
207
  &__content {
188
- padding: 0 $space-s $space-l;
208
+ display: flex;
209
+ flex-direction: column;
210
+ padding: 0 $space-s 0;
189
211
 
190
212
  @media #{breakpoint-s()} {
191
- padding: 0 $space-xl $space-l;
213
+ padding: 0 $space-xl 0;
192
214
  }
193
-
194
215
  &.-ds-centered {
195
216
  #{$self}__header,
196
217
  #{$self}__slotContent {
@@ -265,6 +286,16 @@ $image-height-small: 140px;
265
286
  width: 100%;
266
287
  }
267
288
 
289
+ &__footerWrapper {
290
+ padding-bottom: $space-l;
291
+
292
+ &.-ds-stickyFooter {
293
+ background: $color-default-background;
294
+ bottom: 0;
295
+ position: sticky;
296
+ }
297
+ }
298
+
268
299
  &__footer {
269
300
  column-gap: $space-s;
270
301
  display: flex;
@@ -455,27 +486,33 @@ export default defineComponent({
455
486
  type: String,
456
487
  default: null,
457
488
  },
489
+ isFooterSticky: {
490
+ type: Boolean,
491
+ default: false,
492
+ },
493
+ isFullHeight: {
494
+ type: Boolean,
495
+ default: false,
496
+ },
497
+ },
498
+ emits: {
499
+ 'tertiary-button-click': () => true,
500
+ 'checkbox-change': (checked: boolean) => true,
501
+ 'close-modal': () => true,
502
+ 'secondary-button-click': () => true,
503
+ 'primary-button-click': () => true,
458
504
  },
459
- // TODO fix me when touching this file
460
- /* eslint vue/require-emit-validator: 0 */
461
- emits: [
462
- 'tertiary-button-click',
463
- 'checkbox-change',
464
- 'close-modal',
465
- 'secondary-button-click',
466
- 'primary-button-click',
467
- ],
468
- data() {
505
+ setup() {
469
506
  return {
470
- BUTTON_COLORS: Object.freeze(BUTTON_COLORS),
471
- BUTTON_ELEVATIONS: Object.freeze(BUTTON_ELEVATIONS),
472
- BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
473
- ICONS: Object.freeze(ICONS),
474
- ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
475
- ICON_SIZES: Object.freeze(ICON_SIZES),
476
- MODAL_SIZES: Object.freeze(MODAL_SIZES),
477
- MODAL_HEADER_TITLE_SIZES: Object.freeze(MODAL_HEADER_TITLE_SIZES),
478
- FEATURE_ICON_SIZES: Object.freeze(FEATURE_ICON_SIZES),
507
+ BUTTON_COLORS,
508
+ BUTTON_ELEVATIONS,
509
+ BUTTON_TYPES,
510
+ ICONS,
511
+ ICON_BUTTON_COLORS,
512
+ ICON_SIZES,
513
+ MODAL_SIZES,
514
+ MODAL_HEADER_TITLE_SIZES,
515
+ FEATURE_ICON_SIZES,
479
516
  };
480
517
  },
481
518
  computed: {
package/lib/js/icons/fontawesome.ts CHANGED
@@ -60,6 +60,7 @@ import { faCircleInfo } from '@fortawesome/pro-regular-svg-icons/faCircleInfo';
60
60
  import { faCircleNotch } from '@fortawesome/pro-regular-svg-icons/faCircleNotch';
61
61
  import { faCircleQuestion } from '@fortawesome/pro-regular-svg-icons/faCircleQuestion';
62
62
  import { faCircleXmark } from '@fortawesome/pro-regular-svg-icons/faCircleXmark';
63
+ import { faCircleXmark as fasCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
63
64
  import { faClipboardMedical } from '@fortawesome/pro-regular-svg-icons/faClipboardMedical';
64
65
  import { faClipboardList } from '@fortawesome/pro-regular-svg-icons/faClipboardList';
65
66
  import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
@@ -335,6 +336,7 @@ export const FONTAWESOME_ICONS = {
335
336
  FA_CIRCLE_QUESTION: faCircleQuestion,
336
337
  FA_CIRCLE_SOLID: faCircleSolid,
337
338
  FA_CIRCLE_XMARK: faCircleXmark,
339
+ FA_CIRCLE_XMARK_SOLID: fasCircleXmark,
338
340
  FA_CIRCLE: faCircle,
339
341
  FA_CLIPBOARD_LIST: faClipboardList,
340
342
  FA_CLIPBOARD_MEDICAL: faClipboardMedical,
package/lib/js/index.ts CHANGED
@@ -19,6 +19,9 @@ export * from './components/Cards/Card';
19
19
  export { default as DsCard } from './components/Cards/Card';
20
20
  export { default as CardExpandable } from './components/Cards/CardExpandable/';
21
21
  export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
22
+ export { default as DsCheckbox } from './components/Form/Checkbox';
23
+ export * from './components/Form/Checkbox';
24
+ export { default as DsCheckboxGroupField } from './components/Form/CheckboxGroupField';
22
25
  export { default as DsDateBox } from './components/DatePickers/DateBox';
23
26
  export { default as DatePicker } from './components/DatePickers/DatePicker';
24
27
  export { default as DsDatePicker } from './components/DatePickers/DatePicker';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bethinkpl/design-system",
3
- "version": "33.0.2",
3
+ "version": "33.0.3",
4
4
  "description": "Bethink universe design-system",
5
5
  "repository": {
6
6
  "type": "git",