@bethinkpl/design-system 26.14.3 → 26.14.4

package/lib/js/components/Headers/SectionHeader/SectionHeader.vue

@@ -344,6 +344,8 @@ import {
 	SECTION_HEADER_MOBILE_LAYOUTS,
 	SECTION_HEADER_SIZES,
 	SectionHeaderIconColor,
+	SectionHeaderMobileLayout,
+	SectionHeaderSize,
 } from './SectionHeader.consts';
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
@@ -405,7 +407,7 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: SECTION_HEADER_SIZES.MEDIUM,
-			validator(size) {
+			validator(size: SectionHeaderSize) {
 				return Object.values(SECTION_HEADER_SIZES).includes(size);
 			},
 		},
@@ -432,7 +434,8 @@ export default defineComponent({
 		mobileLayout: {
 			type: String,
 			default: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
-			validator: (value) => Object.values(SECTION_HEADER_MOBILE_LAYOUTS).includes(value),
+			validator: (value: SectionHeaderMobileLayout) =>
+				Object.values(SECTION_HEADER_MOBILE_LAYOUTS).includes(value),
 		},
 	},
 	// TODO fix me when touching this file

package/lib/js/components/IconText/IconText.consts.ts

@@ -1,15 +1,23 @@
+import { Value } from '../../utils/type.utils';
+
 export const ICON_TEXT_COLORS = {
 	NEUTRAL_WEAK: 'neutralWeak',
 	NEUTRAL: 'neutral',
 };
 
+export type IconTextColor = Value<typeof ICON_TEXT_COLORS>;
+
 export const ICON_TEXT_SIZES = {
 	X_SMALL: 'xSmall',
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };
 
+export type IconTextSize = Value<typeof ICON_TEXT_SIZES>;
+
 export const ICON_TEXT_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 };
+
+export type IconTextState = Value<typeof ICON_TEXT_STATES>;

package/lib/js/components/IconText/IconText.vue

@@ -122,7 +122,13 @@
 
 <script lang="ts">
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { ICON_TEXT_COLORS, ICON_TEXT_SIZES, ICON_TEXT_STATES } from './IconText.consts';
+import {
+	ICON_TEXT_COLORS,
+	ICON_TEXT_SIZES,
+	ICON_TEXT_STATES,
+	IconTextColor,
+	IconTextSize,
+} from './IconText.consts';
 import { Value } from '../../utils/type.utils';
 import { defineComponent, toRaw } from 'vue';
 
@@ -135,7 +141,7 @@ export default defineComponent({
 		color: {
 			type: String,
 			default: ICON_TEXT_COLORS.NEUTRAL_WEAK,
-			validator(color) {
+			validator(color: IconTextColor) {
 				return Object.values(ICON_TEXT_COLORS).includes(color);
 			},
 		},
@@ -159,7 +165,7 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: ICON_TEXT_SIZES.X_SMALL,
-			validator(size) {
+			validator(size: IconTextSize) {
 				return Object.values(ICON_TEXT_SIZES).includes(size);
 			},
 		},

package/lib/js/components/Icons/Icon/Icon.vue

@@ -44,7 +44,7 @@ export default defineComponent({
 			validator: (value: string) => Object.values(ICON_SIZES).includes(value),
 		},
 		rotation: {
-			type: Number,
+			type: [Number, null],
 			default: null,
 		},
 		flippedVertical: {

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue

@@ -209,7 +209,7 @@ export default defineComponent({
 		rightColumnSize: {
 			type: String as PropType<ThreeColumnLayoutRightColumnSize>,
 			default: THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,
-			validator(rightColumnSize) {
+			validator(rightColumnSize: ThreeColumnLayoutRightColumnSize) {
 				return Object.values(THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE).includes(
 					rightColumnSize,
 				);

package/lib/js/components/Modals/Modal/Modal.vue

@@ -50,7 +50,12 @@
 									id="ds-modal__checkboxInput"
 									type="checkbox"
 									:checked="false"
-									@change="$emit('checkbox-change', $event.target.checked)"
+									@change="
+										$emit(
+											'checkbox-change',
+											($event.target as HTMLInputElement).checked,
+										)
+									"
 								/>
 								<label
 									for="ds-modal__checkboxInput"
@@ -323,6 +328,7 @@ import WnlButton, {
 	BUTTON_ELEVATIONS,
 	BUTTON_STATES,
 	BUTTON_TYPES,
+	ButtonState,
 } from '../../Buttons/Button';
 import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { defineComponent, toRaw } from 'vue';
@@ -389,7 +395,7 @@ export default defineComponent({
 		footerPrimaryButtonState: {
 			type: String,
 			default: BUTTON_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ButtonState) {
 				return Object.values(BUTTON_STATES).includes(state);
 			},
 		},
@@ -407,7 +413,7 @@ export default defineComponent({
 		footerSecondaryButtonState: {
 			type: String,
 			default: BUTTON_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ButtonState) {
 				return Object.values(BUTTON_STATES).includes(state);
 			},
 		},
@@ -425,7 +431,7 @@ export default defineComponent({
 		footerTertiaryButtonState: {
 			type: String,
 			default: BUTTON_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ButtonState) {
 				return Object.values(BUTTON_STATES).includes(state);
 			},
 		},

package/lib/js/components/Modals/ModalDialog/ModalDialog.vue

@@ -30,7 +30,7 @@ import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from '../Modal';
 import { ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR } from '../../Icons/FeatureIcon';
 import { defineComponent, toRaw } from 'vue';
-import { BUTTON_STATES } from '../../Buttons/Button';
+import { BUTTON_STATES, ButtonState } from '../../Buttons/Button';
 
 export default defineComponent({
 	name: 'ModalDialog',
@@ -80,7 +80,7 @@ export default defineComponent({
 		footerPrimaryButtonState: {
 			type: String,
 			default: BUTTON_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ButtonState) {
 				return Object.values(BUTTON_STATES).includes(state);
 			},
 		},
@@ -98,7 +98,7 @@ export default defineComponent({
 		footerSecondaryButtonState: {
 			type: String,
 			default: BUTTON_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ButtonState) {
 				return Object.values(BUTTON_STATES).includes(state);
 			},
 		},

package/lib/js/components/Outline/OutlineItem/OutlineItem.consts.ts

@@ -1,13 +1,22 @@
+import { Value } from '../../../utils/type.utils';
+
 export const OUTLINE_ITEM_SIZES = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };
+
+export type OutlineItemSize = Value<typeof OUTLINE_ITEM_SIZES>;
+
 export const OUTLINE_ITEM_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 };
 
+export type OutlineItemState = Value<typeof OUTLINE_ITEM_STATES>;
+
 export const OUTLINE_ITEM_BACKGROUND_COLORS = {
 	NEUTRAL_WEAK: 'neutralWeak',
 	NEUTRAL: 'neutral',
 };
+
+export type OutlineItemBackgroundColor = Value<typeof OUTLINE_ITEM_BACKGROUND_COLORS>;

package/lib/js/components/Outline/OutlineItem/OutlineItem.vue

@@ -221,6 +221,9 @@ import {
 	OUTLINE_ITEM_BACKGROUND_COLORS,
 	OUTLINE_ITEM_SIZES,
 	OUTLINE_ITEM_STATES,
+	OutlineItemBackgroundColor,
+	OutlineItemSize,
+	OutlineItemState,
 } from './OutlineItem.consts';
 
 export default defineComponent({
@@ -232,14 +235,14 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: OUTLINE_ITEM_SIZES.SMALL,
-			validator(size) {
+			validator(size: OutlineItemSize) {
 				return Object.values(OUTLINE_ITEM_SIZES).includes(size);
 			},
 		},
 		backgroundColor: {
 			type: String,
 			default: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
-			validator(color) {
+			validator(color: OutlineItemBackgroundColor) {
 				return Object.values(OUTLINE_ITEM_BACKGROUND_COLORS).includes(color);
 			},
 		},
@@ -284,7 +287,7 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: OUTLINE_ITEM_STATES.DEFAULT,
-			validator(state) {
+			validator(state: OutlineItemState) {
 				return Object.values(OUTLINE_ITEM_STATES).includes(state);
 			},
 		},

package/lib/js/components/Pagination/Pagination.vue

@@ -283,7 +283,7 @@ export default defineComponent({
 		currentPage: {
 			type: Number,
 			default: FIRST_PAGE_NUMBER,
-			validator(page) {
+			validator(page: number) {
 				return page > 0;
 			},
 		},
@@ -298,7 +298,7 @@ export default defineComponent({
 		itemsPerPage: {
 			type: Number,
 			default: PAGINATION_DEFAULT_ITEMS_PER_PAGE,
-			validator(itemsPerPage) {
+			validator(itemsPerPage: number) {
 				return itemsPerPage > 0;
 			},
 		},

package/lib/js/components/ProgressBar/ProgressBar.consts.ts

@@ -1,3 +1,5 @@
+import { Value } from '../../utils/type.utils';
+
 export const PROGRESS_BAR_RANGE_COLORS = {
 	PRIMARY_MEDIUM: 'primaryMedium',
 	PRIMARY: 'primary',
@@ -30,6 +32,8 @@ export const PROGRESS_BAR_RANGE_COLORS = {
 	FAIL_GHOST: 'failGhost',
 } as const;
 
+export type ProgressBarRangeColor = Value<typeof PROGRESS_BAR_RANGE_COLORS>;
+
 export const PROGRESS_BAR_BADGE_COLORS = {
 	PRIMARY: 'primary',
 	NEUTRAL: 'neutral',
@@ -39,27 +43,37 @@ export const PROGRESS_BAR_BADGE_COLORS = {
 	FAIL: 'fail',
 } as const;
 
+export type ProgressBarBadgeColor = Value<typeof PROGRESS_BAR_BADGE_COLORS>;
+
 export const PROGRESS_BAR_SIZES = {
 	MEDIUM: 'medium',
 	SMALL: 'small',
 	XSMALL: 'extra small',
 } as const;
 
+export type ProgressBarSize = Value<typeof PROGRESS_BAR_SIZES>;
+
 export const PROGRESS_BAR_LABEL_TEXT_SIZES = {
 	MEDIUM: 'medium',
 	SMALL: 'small',
 } as const;
 
+export type ProgressBarLabelTextSize = Value<typeof PROGRESS_BAR_LABEL_TEXT_SIZES>;
+
 export const PROGRESS_BAR_RADII = {
 	DEFAULT: 'default',
 	NONE: 'none',
 };
 
+export type ProgressBarRadius = Value<typeof PROGRESS_BAR_RADII>;
+
 export const PROGRESS_BAR_LAYOUTS = {
 	DEFAULT: 'default',
 	COMPACT: 'compact',
 };
 
+export type ProgressBarLayout = Value<typeof PROGRESS_BAR_LAYOUTS>;
+
 export interface ProgressBarRange {
 	color: typeof PROGRESS_BAR_RANGE_COLORS[keyof typeof PROGRESS_BAR_RANGE_COLORS];
 	start: number;

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -12,7 +12,7 @@
 					'-ds-medium': labelTextSize === PROGRESS_BAR_LABEL_TEXT_SIZES.MEDIUM,
 					'-ds-ellipsis': labelTextEllipsis,
 				}"
-				:title="labelTextEllipsis ? labelText : null"
+				:title="labelTextEllipsis ? labelText : undefined"
 			>
 				{{ labelText }}
 			</div>
@@ -312,7 +312,12 @@ import {
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
 	PROGRESS_BAR_SIZES,
+	ProgressBarBadgeColor,
+	ProgressBarLabelTextSize,
+	ProgressBarLayout,
+	ProgressBarRadius,
 	ProgressBarRange,
+	ProgressBarSize,
 } from './ProgressBar.consts';
 
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
@@ -326,21 +331,21 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: PROGRESS_BAR_SIZES.SMALL,
-			validator(size) {
+			validator(size: ProgressBarSize) {
 				return Object.values(PROGRESS_BAR_SIZES).includes(size);
 			},
 		},
 		labelTextSize: {
 			type: String,
 			default: PROGRESS_BAR_LABEL_TEXT_SIZES.SMALL,
-			validator(size) {
+			validator(size: ProgressBarLabelTextSize) {
 				return Object.values(PROGRESS_BAR_LABEL_TEXT_SIZES).includes(size);
 			},
 		},
 		ranges: {
 			type: Array as PropType<Array<ProgressBarRange>>,
 			required: true,
-			validator(ranges) {
+			validator(ranges: Array<ProgressBarRange>) {
 				return ranges.every(
 					(range: ProgressBarRange) =>
 						range.start >= 0 && range.length >= 0 && range.start + range.length <= 100,
@@ -350,14 +355,14 @@ export default defineComponent({
 		radius: {
 			type: String,
 			default: PROGRESS_BAR_RADII.DEFAULT,
-			validator(size) {
+			validator(size: ProgressBarRadius) {
 				return Object.values(PROGRESS_BAR_RADII).includes(size);
 			},
 		},
 		layout: {
 			type: String,
 			default: PROGRESS_BAR_LAYOUTS.DEFAULT,
-			validator(size) {
+			validator(size: ProgressBarLayout) {
 				return Object.values(PROGRESS_BAR_LAYOUTS).includes(size);
 			},
 		},
@@ -384,14 +389,14 @@ export default defineComponent({
 		badgePosition: {
 			type: Number,
 			default: null,
-			validator(position) {
+			validator(position: number) {
 				return position >= 0 && position <= 100;
 			},
 		},
 		badgeColor: {
 			type: String,
 			default: PROGRESS_BAR_BADGE_COLORS.INFO,
-			validator(color) {
+			validator(color: ProgressBarBadgeColor) {
 				return Object.values(PROGRESS_BAR_BADGE_COLORS).includes(color);
 			},
 		},

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -246,14 +246,14 @@ export default defineComponent({
 		state: {
 			type: String as PropType<ProgressDonutChartState>,
 			default: PROGRESS_DONUT_CHART_STATES.DEFAULT,
-			validator(state) {
+			validator(state: ProgressDonutChartState) {
 				return Object.values(PROGRESS_DONUT_CHART_STATES).includes(state);
 			},
 		},
 		ranges: {
 			type: Array as PropType<Array<ProgressDonutChartRange>>,
 			required: true,
-			validator(ranges) {
+			validator(ranges: Array<ProgressDonutChartRange>) {
 				return ranges.every(
 					(range: ProgressDonutChartRange) =>
 						range.start >= 0 && range.length >= 0 && range.start + range.length <= 100,

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 		borderColor: {
 			type: String as PropType<GroupRichListItemBorderColor>,
 			default: null,
-			validator(borderColor) {
+			validator(borderColor: GroupRichListItemBorderColor) {
 				return Object.values(GROUP_RICH_LIST_ITEM_BORDER_COLOR).includes(borderColor);
 			},
 		},
@@ -120,7 +120,7 @@ export default defineComponent({
 		backgroundColor: {
 			type: String as PropType<GroupRichListItemBackgroundColor>,
 			default: GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
-			validator(backgroundColor) {
+			validator(backgroundColor: GroupRichListItemBackgroundColor) {
 				return Object.values(GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR).includes(
 					backgroundColor,
 				);

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -536,7 +536,7 @@ export default defineComponent({
 		size: {
 			type: String as PropType<RichListItemSize>,
 			default: RICH_LIST_ITEM_SIZE.MEDIUM,
-			validator(size) {
+			validator(size: RichListItemSize) {
 				return Object.values(RICH_LIST_ITEM_SIZE).includes(size);
 			},
 		},
@@ -562,7 +562,7 @@ export default defineComponent({
 		iconColor: {
 			type: String as PropType<IconColor>,
 			default: null,
-			validator(iconColor) {
+			validator(iconColor: IconColor) {
 				return Object.values(ICON_COLORS).includes(iconColor);
 			},
 		},
@@ -573,7 +573,7 @@ export default defineComponent({
 		borderColor: {
 			type: String as PropType<RichListItemBorderColor>,
 			default: null,
-			validator(borderColor) {
+			validator(borderColor: RichListItemBorderColor) {
 				return Object.values(RICH_LIST_ITEM_BORDER_COLOR).includes(borderColor);
 			},
 		},
@@ -588,15 +588,15 @@ export default defineComponent({
 		backgroundColor: {
 			type: String as PropType<RichListItemBackgroundColor>,
 			default: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
-			validator(backgroundColor) {
+			validator(backgroundColor: RichListItemBackgroundColor) {
 				return Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR).includes(backgroundColor);
 			},
 		},
 		elevation: {
 			type: String as PropType<RichListItemElevation>,
 			default: null,
-			validator(evolution) {
-				return Object.values(RICH_LIST_ITEM_ELEVATION).includes(evolution);
+			validator(elevation: RichListItemElevation) {
+				return Object.values(RICH_LIST_ITEM_ELEVATION).includes(elevation);
 			},
 		},
 		hasDraggableHandler: {
@@ -618,7 +618,7 @@ export default defineComponent({
 	},
 	emits: {
 		'icon-click': () => true,
-		click: () => true,
+		click: (event: Event) => true,
 		'update:is-selected': (isSelected: boolean) => true,
 	},
 	data() {

package/lib/js/components/SectionTitle/SectionTitle.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { SECTION_TITLE_SIZES } from './SectionTitle.consts';
+import { SECTION_TITLE_SIZES, SectionTitleSize } from './SectionTitle.consts';
 
 export default defineComponent({
 	name: 'SectionTitle',
@@ -42,7 +42,7 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: SECTION_TITLE_SIZES.XS,
-			validator(size) {
+			validator(size: SectionTitleSize) {
 				return Object.values(SECTION_TITLE_SIZES).includes(size);
 			},
 		},

package/lib/js/components/SelectList/SelectListItem/SelectListItem.consts.ts

@@ -1,16 +1,24 @@
+import { Value } from '../../../utils/type.utils';
+
 export const SELECT_LIST_ITEM_SELECTION_MODE = {
 	SELECT_ONLY: 'selectOnly',
 	TOGGLE: 'toggle',
-};
+} as const;
+
+export type SelectListItemSelectionMode = Value<typeof SELECT_LIST_ITEM_SELECTION_MODE>;
 
 export const SELECT_LIST_ITEM_SIZES = {
 	X_SMALL: 'xSmall',
 	SMALL: 'small',
 	MEDIUM: 'medium',
-};
+} as const;
+
+export type SelectListItemSize = Value<typeof SELECT_LIST_ITEM_SIZES>;
 
 export const SELECT_LIST_ITEM_STATES = {
 	DEFAULT: 'default',
 	LOADING: 'loading',
 	DISABLED: 'disabled',
-};
+} as const;
+
+export type SelectListItemState = Value<typeof SELECT_LIST_ITEM_STATES>;

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -165,6 +165,9 @@ import {
 	SELECT_LIST_ITEM_SELECTION_MODE,
 	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_STATES,
+	SelectListItemSelectionMode,
+	SelectListItemSize,
+	SelectListItemState,
 } from './SelectListItem.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { defineComponent, toRaw } from 'vue';
@@ -201,21 +204,21 @@ export default defineComponent({
 		selectionMode: {
 			type: String,
 			default: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
-			validator(selectionMode) {
+			validator(selectionMode: SelectListItemSelectionMode) {
 				return Object.values(SELECT_LIST_ITEM_SELECTION_MODE).includes(selectionMode);
 			},
 		},
 		size: {
 			type: String,
 			default: SELECT_LIST_ITEM_SIZES.SMALL,
-			validator(size) {
+			validator(size: SelectListItemSize) {
 				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
 			},
 		},
 		state: {
 			type: String,
 			default: SELECT_LIST_ITEM_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SelectListItemState) {
 				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);
 			},
 		},

package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue

@@ -14,6 +14,8 @@ import {
 	SELECT_LIST_ITEM_SELECTION_MODE,
 	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_STATES,
+	SelectListItemSize,
+	SelectListItemState,
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';
@@ -54,15 +56,15 @@ export default defineComponent({
 		size: {
 			type: String,
 			default: SELECT_LIST_ITEM_SIZES.SMALL,
-			validator(size) {
+			validator(size: SelectListItemSize) {
 				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
 			},
 		},
 		state: {
 			type: String,
 			default: SELECT_LIST_ITEM_STATES.DEFAULT,
-			validator(size) {
-				return Object.values(SELECT_LIST_ITEM_STATES).includes(size);
+			validator(state: SelectListItemState) {
+				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);
 			},
 		},
 	},

package/lib/js/components/SurveyQuestions/SurveyQuestion.consts.ts

@@ -1,9 +1,15 @@
+import { Value } from '../../utils/type.utils';
+
 export const SURVEY_QUESTION_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 } as const;
 
+export type SurveyQuestionState = Value<typeof SURVEY_QUESTION_STATES>;
+
 export const SURVEY_QUESTION_SCALE_CONTAINERS = {
 	ONE: 'one',
 	TWO: 'two',
 } as const;
+
+export type SurveyQuestionScaleContainer = Value<typeof SURVEY_QUESTION_SCALE_CONTAINERS>;

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -87,7 +87,7 @@ import DsModal from '../../Modal';
 import DsButton, { BUTTON_TYPES } from '../../Buttons/Button';
 import IconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import { SURVEY_QUESTION_STATES, SurveyQuestionState } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../SurveyQuestionTextarea.vue';
 import { randomString } from '../../../utils/string';
 
@@ -118,7 +118,7 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: SURVEY_QUESTION_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyQuestionState) {
 				return Object.values(SURVEY_QUESTION_STATES).includes(state);
 			},
 		},

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -239,7 +239,12 @@ import SurveyToggle, {
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import {
+	SURVEY_QUESTION_SCALE_CONTAINERS,
+	SURVEY_QUESTION_STATES,
+	SurveyQuestionScaleContainer,
+	SurveyQuestionState,
+} from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -263,14 +268,14 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: SURVEY_QUESTION_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyQuestionState) {
 				return Object.values(SURVEY_QUESTION_STATES).includes(state);
 			},
 		},
 		scaleOptions: {
 			type: Array as () => Array<SurveyQuestionScaleOption>,
 			required: true,
-			validator(scaleOptions) {
+			validator(scaleOptions: Array<SurveyQuestionScaleOption>) {
 				return scaleOptions.every((option) => typeof option === 'object');
 			},
 		},
@@ -293,7 +298,7 @@ export default defineComponent({
 		containers: {
 			type: String,
 			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
-			validator(containers) {
+			validator(containers: SurveyQuestionScaleContainer) {
 				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
 			},
 		},