diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png new file mode 100644 index 000000000000..7adcf787de77 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png new file mode 100644 index 000000000000..ecf9516754e2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png new file mode 100644 index 000000000000..6e854b42344c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png index 8fdb5ff204d2..d10c6419aefa 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png index 866eb5abfb0e..35ea1968a61c 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png index b431e91ed2cf..5b9e549c2be3 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png index 4edc5cb29143..35ea1968a61c 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png index 924784a7155a..e28a1148fe9b 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png index 5c3ea3ce5684..02ad54490416 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png index da23ddb3f1e6..837906ad7391 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png index a81c27863970..71f952fa8b26 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png index 1d45f179e0cd..1a523deb167b 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png index c00a44a6db0f..eabaeba10d90 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png index 244c470549f5..a05e78aa6f4f 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png index 3892cd4d9df8..a550e6b34cf1 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png index 69c9e44a16e5..395855353dda 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png index 737e178ee967..689c643dcbe8 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts index 0d61f2799deb..b43e43c3c238 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts +++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts @@ -2,6 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import { createWidget } from '../../../../helpers/createWidget'; import url from '../../../../helpers/getPageUrl'; +import { Themes } from '../../../../helpers/themes'; import { testScreenshot } from '../../../../helpers/themeUtils'; fixture.disablePageReloads`Appointment Form: Main Form` @@ -226,6 +227,35 @@ test.meta({ browserSize: [450, 1000] })('main form on mobile screen', async (t) }, })); +test.meta({ browserSize: [1500, 1500] })('main form without icons', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + const scheduler = new Scheduler(SCHEDULER_SELECTOR); + const appointmentPopup = await scheduler.openAppointmentPopup(t, undefined, false); + + await testScreenshot( + t, + takeScreenshot, + 'scheduler__appointment__main-form__icons-mode-none.png', + { element: appointmentPopup.contentElement }, + ); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => createWidget('dxScheduler', { + dataSource: [], + views: ['week'], + currentView: 'week', + currentDate: new Date(2021, 2, 25), + resources: getResources(true), + editing: { + form: { + iconsShowMode: 'none', + }, + }, +})); + test.meta({ browserSize: [1500, 1500] })('appointment form resource with multiple selection', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); @@ -338,7 +368,10 @@ test.meta({ browserSize: [1500, 1500] })('Recurrence settings button should have }); }); -test.meta({ browserSize: [1500, 1500] })('appointment form with labelMode=static', async (t) => { +test.meta({ + browserSize: [1500, 1500], + themes: [Themes.genericLight, Themes.materialBlue, Themes.fluentBlue], +})('appointment form with labelMode=static', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const scheduler = new Scheduler(SCHEDULER_SELECTOR); diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index 309239cf053d..38bd26aa9cc9 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss @@ -503,6 +503,10 @@ $scheduler-appointment-form-label-padding: 20px; } } + .dx-scheduler-form-recurrence-group.dx-field-item { + padding: 0; + } + /* Icons alignment */ .dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) { flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index 97a54afea79d..d862b76ec6d1 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss @@ -100,7 +100,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-icon-container-height: 36px !default; $generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-icon-margin-top: 22px !default; - $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default; + $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 7px !default; $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 20px !default; $generic-scheduler-appointment-popup-all-day-item-height: 36px !default; @@ -169,7 +169,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default; $generic-scheduler-appointment-popup-icon-container-height: 26px !default; $generic-scheduler-appointment-popup-icon-padding-right: 5px !default; $generic-scheduler-appointment-popup-icon-margin-top: 18px !default; - $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 4.5px !default; + $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 6px !default; $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default; $generic-scheduler-appointment-popup-item-padding-top: 10px !default; $generic-scheduler-appointment-popup-all-day-item-height: 24px !default; diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts index 9f686ef00dc2..0dd77ae06e4e 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts @@ -1722,21 +1722,8 @@ describe('Appointment Form', () => { const mainFormIcons = POM.popup.mainGroup.querySelectorAll(`.${CLASSES.icon}`); const recurrenceFormIcons = POM.popup.recurrenceGroup.querySelectorAll(`.${CLASSES.icon}`); - expect(mainFormIcons.length).toBe(4); - expect(recurrenceFormIcons.length).toBe(3); - - const mainIconsCorrect = Array.from(mainFormIcons).every((icon) => { - const isVisible = !icon.classList.contains(CLASSES.hidden); - return isVisible === visibleMain; - }); - - const recurrenceIconsCorrect = Array.from(recurrenceFormIcons).every((icon) => { - const isVisible = !icon.classList.contains(CLASSES.hidden); - return isVisible === visibleRecurrence; - }); - - expect(mainIconsCorrect).toBe(true); - expect(recurrenceIconsCorrect).toBe(true); + expect(mainFormIcons.length).toBe(visibleMain ? 4 : 0); + expect(recurrenceFormIcons.length).toBe(visibleRecurrence ? 3 : 0); }); }); }); diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts index dc44f0c7be9a..22ec1e1aa85e 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts @@ -219,17 +219,18 @@ export class AppointmentForm { create(popup: any): void { this._popup = popup; + const iconsShowMode = this.getIconsShowMode(); + const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode); + const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode); + const mainGroup = this.createMainFormGroup(); this._recurrenceForm = new RecurrenceForm(this.scheduler); - const recurrenceGroup = this._recurrenceForm.createRecurrenceFormGroup(); + const recurrenceGroup = this._recurrenceForm + .createRecurrenceFormGroup(); const items = [mainGroup, recurrenceGroup]; - const iconsShowMode = this.getIconsShowMode(); - const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode); - const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode); - this.setStylingModeToEditors(mainGroup, showMainGroupIcons); this.setStylingModeToEditors(recurrenceGroup, showRecurrenceGroupIcons); @@ -348,9 +349,7 @@ export class AppointmentForm { itemType: 'group', cssClass: `${CLASSES.subjectGroup} ${CLASSES.groupWithIcon}`, colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, items: [ { name: SUBJECT_ICON_NAME, @@ -379,9 +378,7 @@ export class AppointmentForm { itemType: 'group', cssClass: `${CLASSES.dateRangeGroup} ${CLASSES.groupWithIcon}`, colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, items: [ { name: DATE_ICON_NAME, @@ -660,9 +657,7 @@ export class AppointmentForm { name: REPEAT_GROUP_NAME, itemType: 'group', colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: `${CLASSES.repeatGroup} ${CLASSES.groupWithIcon}`, items: [ { @@ -716,9 +711,7 @@ export class AppointmentForm { name: DESCRIPTION_GROUP_NAME, itemType: 'group', colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: `${CLASSES.descriptionGroup} ${CLASSES.groupWithIcon}`, items: [ { @@ -778,9 +771,7 @@ export class AppointmentForm { itemType: 'group', visible: resourcesItems.length > 0, colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`, items: [ { @@ -807,9 +798,7 @@ export class AppointmentForm { itemType: 'group', name: `${dataField}Group`, colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: CLASSES.groupWithIcon, items: [ { @@ -818,7 +807,7 @@ export class AppointmentForm { cssClass: CLASSES.formIcon, template: createFormIconTemplate(icon), }, - item, + { ...item }, ], } as GroupItem; }); @@ -840,12 +829,6 @@ export class AppointmentForm { const isIconItem = itemClasses.includes(CLASSES.formIcon); if (isIconItem) { - const isHidden = itemClasses.includes(CLASSES.hidden); - - if (!showIcon && !isHidden) { - item.cssClass += ` ${CLASSES.hidden}`; - } - return; } @@ -862,6 +845,19 @@ export class AppointmentForm { if (item.itemType === 'group') { const groupItem = item as GroupItem; + + if (itemClasses.includes(CLASSES.groupWithIcon)) { + groupItem.items?.forEach((child) => { + const childClasses = (child.cssClass ?? '').split(' '); + + if (childClasses.includes(CLASSES.formIcon)) { + (child as SimpleItem).visible = showIcon; + } else { + (child as SimpleItem).colSpan = showIcon ? 1 : 2; + } + }); + } + groupItem.items?.forEach((child) => { this.setStylingModeToEditors(child, showIcon); }); diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts index 8429a6552c4f..45d4c31eb3f3 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts @@ -201,9 +201,7 @@ export class RecurrenceForm { name: GROUP_NAMES.recurrenceStartDateGroup, itemType: 'group', colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: CLASSES.groupWithIcon, items: [ { @@ -217,6 +215,7 @@ export class RecurrenceForm { getStartDateCommonConfig(this.scheduler.getFirstDayOfWeek()), { name: EDITOR_NAMES.recurrenceStartDateEditor, + colSpan: 1, cssClass: CLASSES.recurrenceStartDateEditor, label: { text: messageLocalization.format('dxScheduler-editorLabelStartDate'), @@ -241,9 +240,7 @@ export class RecurrenceForm { name: GROUP_NAMES.recurrenceRuleGroup, cssClass: `${CLASSES.recurrenceSettingsGroup} ${CLASSES.groupWithIcon}`, colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, items: [ { name: ICON_NAMES.recurrenceRuleIcon, @@ -256,9 +253,7 @@ export class RecurrenceForm { name: GROUP_NAMES.recurrencePatternGroup, colSpan: 1, colCount: 1, - colCountByScreen: { - xs: 1, - }, + colCountByScreen: { xs: 1 }, items: [ this.createRecurrenceRuleGroup(), this.createDaysOfWeekGroup(), @@ -445,9 +440,7 @@ export class RecurrenceForm { name: GROUP_NAMES.recurrenceEndGroup, itemType: 'group', colCount: 2, - colCountByScreen: { - xs: 2, - }, + colCountByScreen: { xs: 2 }, cssClass: `${CLASSES.groupWithIcon} ${CLASSES.recurrenceEndGroup}`, items: [ {