mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/elements/McDatepicker/McDatepicker.vue

@@ -1,832 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, type PropType, reactive, ref, useAttrs, watch } from 'vue'
-import {
-  DatepickerFormat,
-  DatepickerTypes,
-  DayjsFormat,
-  DatepickerOutputFormat,
-  DatepickerFormatsVariations
-} from '@/enums/Datepicker'
-import type { DatepickerFormatsObjectFormat, IDatepickerPlaceholders, IDatepickerPreset } from '@/types/IDatepicker'
-import { type DatePickerValue, type DatepickerTypesUnion, type DatepickerFormatsObject } from '@/types/IDatepicker'
-//@ts-ignore
-import { dayjs, dayjsLocales } from '../../../utils/dayjs.js'
-import DatePicker, { type DatePickerMarker } from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
-import McTitle from '../McTitle/McTitle.vue'
-import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
-import McButton from '../McButton/McButton.vue'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import { ButtonSize, TitleVariations, Weights } from '@/enums'
-
-const attrs = useAttrs()
-const emit = defineEmits(['update:modelValue'])
-
-const props = defineProps({
-  //@ts-ignore
-  modelValue: {
-    type: [String, Array] as PropType<DatePickerValue>
-  },
-  /**
-   *  Тип датапикера
-   */
-  type: {
-    type: String as () => DatepickerTypesUnion,
-    default: DatepickerTypes.DatePicker
-  },
-  /**
-   *  Заголовок поля:
-   */
-  title: {
-    type: String as PropType<string>,
-    default: ''
-  },
-
-  /**
-   *  Вспомогательный текст под инпутом:
-   */
-  helpText: {
-    type: String as PropType<string>,
-    default: ''
-  },
-
-  /**
-   *  Редактируемый инпут
-   */
-  editable: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  placeholder: {
-    type: String as PropType<string>,
-    default: null
-  },
-
-  /**
-   *  Name
-   */
-  name: {
-    type: String as PropType<string>,
-    required: true
-  },
-
-  /**
-   *  Локаль The locale code (ISO 639-1 + optional country code)
-   */
-  lang: {
-    type: String as PropType<string>,
-    default: 'en'
-  },
-  /**
-   *  Ошибки
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  /**
-   *  Отдаваемая дата будет в формате ISO String
-   */
-  toIsoFormat: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Формат отдаваемой даты
-   */
-  placeholders: {
-    type: Object as IDatepickerPlaceholders,
-    default: () => ({
-      week: 'Week',
-      month: 'Month',
-      quarter: 'Quarter',
-      year: 'Year',
-      confirm: 'Confirm'
-    })
-  },
-  /**
-   * Пресеты для быстрых периодов
-   **/
-  customPresets: {
-    type: Array as PropType<IDatepickerPreset[]>,
-    default: () => []
-  },
-  range: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Если значение true, то датапикер отображается в открытом виде
-   */
-  inline: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Дата, до которой все будет задизэйблено
-   **/
-  minDate: {
-    type: [Date, String] as PropType<Date | string>
-  },
-  /**
-   * Дата, после которой все будет задизэйблено
-   **/
-  maxDate: {
-    type: [String, Date] as PropType<Date | string>
-  },
-  /**
-   * Массив дат запрещенных к выбору / Метод которые проверяет каждую дату
-   **/
-  disabledDates: {
-    type: [Array as PropType<Date[] | string[]>, Function]
-  },
-  /**
-   * Массив дат разрешенных к выбору / Метод которые проверяет каждую дату
-   * **/
-  allowedDates: {
-    type: [Array as PropType<Date[] | string[]>, Function]
-  },
-  /**
-   * Функция проверяющая и устанавливающая доступно ли время для выбора
-   * Params [String] date - текущая дата
-   * return Boolean, где true - время заблокировано для выбора
-   * **/
-  disabledTime: {
-    type: [Array as PropType<Date[] | string[]>, Function]
-  },
-  minWidth: {
-    type: String as PropType<string>,
-    default: '240px'
-  },
-  hours: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  minutes: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  seconds: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  timezone: {
-    type: String as PropType<string>,
-    default: dayjs.tz.guess()
-  },
-  useTimezone: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Показывать ли крестик очищения поля
-   * */
-  clearable: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  loading: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  setDefaultToday: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  markers: {
-    type: Array as () => DatePickerMarker[],
-    default: () => [] as DatePickerMarker[]
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-const pickDate = ref<DatePickerValue>(null)
-const input = ref<InstanceType<typeof DatePicker> | null | any>(null)
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-date-picker--error': !!fieldErrors.errorText.value,
-    'mc-date-picker--disabled': props.disabled
-  }
-})
-
-const formats = reactive<DatepickerFormatsObject>({
-  [DatepickerTypes.TimePicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.TimePicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.TimePicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.TimePicker
-  },
-  [DatepickerTypes.DatePicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.DatePicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.DatePicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.DatePicker
-  },
-  [DatepickerTypes.DateTimePicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.DateTimePicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.DateTimePicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.DateTimePicker
-  },
-  [DatepickerTypes.WeekPicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.WeekPicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.WeekPicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.WeekPicker
-  },
-  [DatepickerTypes.MonthPicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.MonthPicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.MonthPicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.MonthPicker
-  },
-  [DatepickerTypes.YearPicker]: {
-    [DatepickerFormatsVariations.Picker]: DatepickerFormat.YearPicker,
-    [DatepickerFormatsVariations.Dayjs]: DayjsFormat.YearPicker,
-    [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.YearPicker
-  }
-})
-const computedType = computed((): DatepickerTypes => {
-  return (props.type as DatepickerTypes) || DatepickerTypes.DatePicker
-})
-const dateFormat = reactive<DatepickerFormatsObjectFormat>(formats[computedType.value])
-
-const isTimePicker = computed((): boolean => {
-  return computedType.value === DatepickerTypes.TimePicker
-})
-const isDateTimePicker = computed((): boolean => {
-  return computedType.value === DatepickerTypes.DateTimePicker
-})
-const isWeekPicker = computed((): boolean => {
-  return computedType.value === DatepickerTypes.WeekPicker
-})
-const isMonthPicker = computed((): boolean => {
-  return computedType.value === DatepickerTypes.MonthPicker
-})
-const isYearPicker = computed((): boolean => {
-  return computedType.value === DatepickerTypes.YearPicker
-})
-const pickerType = computed((): Partial<Record<DatepickerTypes, boolean>> => {
-  return {
-    [DatepickerTypes.TimePicker]: computedType.value === DatepickerTypes.TimePicker,
-    [DatepickerTypes.WeekPicker]: computedType.value === DatepickerTypes.WeekPicker,
-    [DatepickerTypes.MonthPicker]: computedType.value === DatepickerTypes.MonthPicker,
-    [DatepickerTypes.YearPicker]: computedType.value === DatepickerTypes.YearPicker
-  }
-})
-const isAutoApply = computed((): boolean => {
-  return !isTimePicker.value && !isDateTimePicker.value && !isFooterVisible.value
-})
-const weekNumbers = computed((): string | null => {
-  return isWeekPicker.value ? 'local' : null
-})
-const modelType = computed((): string => {
-  return props.toIsoFormat && !props.useTimezone ? 'iso' : 'format'
-})
-const hoursOptions = computed((): object => {
-  return props.hours && props.hours.length ? { 'hour-options': props.hours } : {}
-})
-const minutesOptions = computed((): object => {
-  return props.minutes && props.minutes.length ? { 'minute-options': props.minutes } : {}
-})
-const secondsOptions = computed((): object => {
-  return props.seconds && props.seconds.length ? { 'second-options': props.seconds } : {}
-})
-const isFooterVisible = computed((): boolean => {
-  return (
-    props.range &&
-    (props.customPresets?.length || !!props.placeholders) &&
-    !isTimePicker.value &&
-    !isYearPicker.value &&
-    !isMonthPicker.value
-  )
-})
-
-const localValue = computed({
-  get() {
-    return getFormattedPickerDate(props.modelValue)
-  },
-  set(value) {
-    if (!value) value = props.range ? [] : null
-    const date = getFormattedOutputDate(value)
-    fieldErrors.toggleErrorVisible()
-    emit('update:modelValue', date)
-  }
-})
-
-onMounted(() => {
-  init()
-})
-
-const init = () => {
-  props.setDefaultToday && handlePreselectToday()
-}
-
-const handlerPreselectRange = (period: string[]): void => {
-  const [start, end] = period
-  input.value && (input.value.currentValue = dayjs ? [dayjs(start).toDate(), dayjs(end).toDate()] : period)
-}
-
-/**
- * Преселект при setDefaultToday = true
- * */
-const handlePreselectToday = (): void => {
-  if (isWeekPicker.value) return
-
-  const hasValue = props.range
-    ? localValue.value?.length && Array.isArray(localValue.value) && localValue.value.every((v) => dayjs(v).isValid())
-    : //@ts-ignore
-      dayjs(localValue.value).isValid()
-
-  if (!hasValue) {
-    let today = props.toIsoFormat
-      ? dayjs().toISOString()
-      : dayjs().format(dateFormat[DatepickerFormatsVariations.Output])
-    localValue.value = props.range ? getFormattedPickerDate([today, today]) : getFormattedPickerDate(today)
-  }
-}
-
-/**
- * Prepare dates for datepicker
- * */
-const getFormattedPickerDate = (value: DatePickerValue): DatePickerValue => {
-  if (isWeekPicker.value) return value
-  let preparedValue = props.range ? (Array.isArray(value) ? value : []) : [value]
-  if (!props.toIsoFormat) {
-    preparedValue = preparedValue.map((pv) => dayjs(pv as string, dateFormat.output).format(dateFormat.dayjs))
-  }
-
-  const [start, end] = preparedValue
-  return props.range ? ([start, end].filter(Boolean) as DatePickerValue) : start
-}
-
-/**
- * Prepare dates for output
- * */
-const getFormattedOutputDate = (value: DatePickerValue): DatePickerValue => {
-  if (isWeekPicker.value) return value
-  let preparedValue = props.range ? (Array.isArray(value) ? value.map((pv) => String(pv)) : []) : [String(value)]
-  if (!props.toIsoFormat) {
-    preparedValue = preparedValue.map((pv) => dayjs(pv, dateFormat.dayjs).format(dateFormat.output))
-  }
-
-  const [start, end] = preparedValue.map((pv) => (pv === 'Invalid Date' ? null : pv))
-  return props.range ? ([start, end].filter(Boolean) as DatePickerValue) : start
-}
-
-const setLocale = async (): Promise<void> => {
-  const locale = props.lang !== 'ar' && Object.keys(dayjsLocales).includes(props.lang) ? props.lang : 'en'
-  //@ts-ignore
-  await dayjsLocales[locale]?.()
-  dayjs.locale(locale)
-}
-
-const selectPeriod = (key: string) => {
-  let start = dayjs()
-  //@ts-ignore
-  const end = pickDate.value ? dayjs(pickDate.value) : dayjs()
-  switch (key) {
-    case 'week':
-      start = dayjs(end).subtract(7, 'days')
-      break
-    case 'month':
-      start = dayjs(end).subtract(1, 'months')
-      break
-    case 'quarter':
-      start = dayjs(end).subtract(3, 'months')
-      break
-    case 'year':
-      start = dayjs(end).subtract(1, 'years')
-      break
-  }
-  input.value.updateInternalModelValue([start.toDate(), end.toDate()])
-}
-const handlePickDate = (date: DatePickerValue) => {
-  pickDate.value = date
-}
-
-const handleSubmit = () => {
-  input.value.selectDate()
-  input.value.closeMenu()
-}
-
-watch(
-  () => props.lang,
-  () => {
-    setLocale()
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div ref="field" class="mc-date-picker" :class="classes">
-    <label v-if="$slots.header || !!props.title" :for="name" class="mc-date-picker__header">
-      <!-- @slot Слот для заголовка над инпутом -->
-      <slot name="title">
-        <mc-title v-if="props.title" :weight="Weights.Medium">{{ props.title }}</mc-title>
-      </slot>
-    </label>
-    <div class="mc-date-picker__inner">
-      <div class="mc-date-picker__input-wrapper" :style="{ minWidth }">
-        <date-picker
-          v-model="localValue"
-          ref="input"
-          :type="type"
-          v-bind="{
-            ...attrs,
-            ...pickerType,
-            ...hoursOptions,
-            ...minutesOptions,
-            ...secondsOptions
-          }"
-          class="mc-date-picker__date-picker"
-          :range="props.range"
-          :multi-calendars="props.range"
-          :month-change-on-scroll="false"
-          :timezone="timezone"
-          :format="dateFormat.picker"
-          :model-type="modelType"
-          :auto-apply="isAutoApply"
-          :partial-flow="isTimePicker || isDateTimePicker"
-          :enable-time-picker="isTimePicker || isDateTimePicker"
-          :clearable="clearable"
-          :inline="inline"
-          :locale="lang"
-          :markers="markers"
-          :action-row="{}"
-          :loading="loading"
-          :week-numbers="weekNumbers"
-          :placeholder="placeholder"
-          :editable="editable"
-          :disabled="disabled"
-          :disabled-dates="disabledDates"
-          :allowed-dates="allowedDates"
-          :min-date="minDate"
-          :max-date="maxDate"
-          :disabled-times="disabledTime"
-          @range-start="handlePickDate"
-        >
-          <!-- @slot Слот для вставки в футер попапа календаря -->
-          <template v-if="isFooterVisible" #action-row>
-            <div class="mc-datepicker__footer-popup">
-              <div class="mc-datepicker__footer-popup-periods">
-                <template v-if="customPresets && customPresets.length">
-                  <mc-button
-                    v-for="preset in customPresets"
-                    :key="preset.title"
-                    variation="black-link"
-                    secondary-color="purple"
-                    @click="handlerPreselectRange(preset.period)"
-                  >
-                    {{ preset.title }}
-                  </mc-button>
-                </template>
-                <template v-else>
-                  <mc-button
-                    v-if="placeholders.week"
-                    variation="black-link"
-                    secondary-color="purple"
-                    @click="selectPeriod('week')"
-                  >
-                    {{ placeholders.week }}
-                  </mc-button>
-                  <mc-button
-                    v-if="placeholders.month"
-                    variation="black-link"
-                    secondary-color="purple"
-                    @click="selectPeriod('month')"
-                  >
-                    {{ placeholders.month }}
-                  </mc-button>
-                  <mc-button
-                    v-if="placeholders.quarter"
-                    variation="black-link"
-                    secondary-color="purple"
-                    @click="selectPeriod('quarter')"
-                  >
-                    {{ placeholders.quarter }}
-                  </mc-button>
-                  <mc-button
-                    v-if="placeholders.year"
-                    variation="black-link"
-                    secondary-color="purple"
-                    @click="selectPeriod('year')"
-                  >
-                    {{ placeholders.year }}
-                  </mc-button>
-                </template>
-              </div>
-              <mc-button
-                v-if="placeholders.confirm"
-                variation="purple-outline"
-                :size="ButtonSize.Xs"
-                @click="handleSubmit"
-              >
-                {{ placeholders.confirm }}
-              </mc-button>
-            </div>
-          </template>
-          <template #input-icon>
-            <mc-svg-icon name="calendar" size="300" :color="props.disabled ? 'outline-gray' : 'black'" />
-          </template>
-          <template v-if="$slots.header" #header>
-            <div>
-              <!-- @slot Слот для вставки в хедер попапа календаря -->
-              <slot name="header" />
-            </div>
-          </template>
-          <template v-if="$slots.sidebar" #sidebar>
-            <div>
-              <!-- @slot Слот для вставки в сайдбар попапа календаря  -->
-              <slot name="sidebar" />
-            </div>
-          </template>
-          <!-- @slot Слот для вставки пользовательской иконки календаря -->
-          <template #icon-calendar>
-            <mc-svg-icon class="mc-date-picker__icon" name="calendar" />
-          </template>
-        </date-picker>
-      </div>
-    </div>
-    <div v-if="!!fieldErrors.errorText.value || !!props.helpText || !!$slots.bottom" class="mc-date-picker__footer">
-      <mc-title v-if="!!fieldErrors.errorText.value" tag-name="div" color="red" :variation="TitleVariations.Overline">
-        {{ fieldErrors.errorText.value }}
-      </mc-title>
-      <br v-if="!!fieldErrors.errorText.value && (!!props.helpText || !!$slots.bottom)" />
-      <!-- @slot Слот для доп. текста под инпутом -->
-      <slot name="bottom">
-        <mc-title v-if="!!props.helpText" tag-name="div" :variation="TitleVariations.Overline">
-          {{ props.helpText }}
-        </mc-title>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-//More info https://vue3datepicker.com/installation/
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/box-shadows' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/font-weights' as *;
-@use '../../../assets/tokens/media-queries' as *;
-@use '../../../assets/tokens/border-radius' as *;
-@use 'sass:color' as sasscolor;
-.mc-date-picker {
-  $block-name: &;
-  display: block;
-  font-family: $font-family-main;
-  &__header {
-    @include reset-text-indents();
-    display: block;
-    margin-bottom: $space-100;
-    &:empty {
-      display: none;
-    }
-  }
-  &__inner {
-    display: flex;
-    align-items: center;
-  }
-  &__input-wrapper {
-    width: 100%;
-    .dp__input {
-      font-family: $font-family-main;
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      height: $size-500;
-      padding: $space-100 $space-300 $space-100 36px;
-      border-color: $color-outline-gray;
-      border-radius: $radius-100;
-      cursor: pointer;
-      color: $color-black;
-      &:hover,
-      &:focus {
-        border-color: $color-purple;
-      }
-      &::placeholder {
-        color: $color-gray;
-      }
-    }
-  }
-  &__footer {
-    margin-top: $space-50;
-    &:empty {
-      display: none;
-    }
-  }
-  .dp__input {
-    font-family: $font-family-main;
-    font-size: $font-size-200;
-    line-height: $line-height-200;
-    height: $size-500;
-    padding: $space-100 $space-300 $space-100 36px;
-    border-color: $color-outline-gray;
-    border-radius: $radius-100;
-    cursor: pointer;
-    color: $color-black;
-    &:hover,
-    &:focus {
-      border-color: $color-purple;
-    }
-    &::placeholder {
-      color: $color-gray;
-    }
-  }
-
-  &--error {
-    .dp__input {
-      border-color: $color-red !important;
-    }
-  }
-  &--disabled {
-    .dp__input {
-      color: $color-outline-gray;
-      cursor: not-allowed;
-      background-color: $color-hover-gray;
-      border-color: $color-outline-gray;
-      box-shadow: none;
-      &:hover,
-      &:focus {
-        border-color: $color-outline-gray;
-      }
-    }
-  }
-  // Input to top
-  // Calendar below
-  .dp + .dp {
-    border-left: none;
-  }
-  .dp {
-    width: 256px;
-    padding: $space-200;
-    font-size: $font-size-200;
-    &--header-wrap {
-      margin-bottom: $space-200;
-    }
-    &__month_year_wrap {
-      justify-content: center;
-    }
-    &__month_year_select {
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      font-weight: $font-weight-semi-bold;
-      color: $color-black;
-      width: max-content;
-      height: auto;
-    }
-    &__input_icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      left: 8px;
-    }
-    &--clear-btn {
-      margin-right: $space-100;
-      svg {
-        padding: 0;
-      }
-      &:hover {
-        svg {
-          color: $color-black;
-        }
-      }
-    }
-    &__calendar {
-      &_item {
-        flex-grow: unset;
-        .dp {
-          &__cell_inner {
-            @include size($size-400);
-            font-size: $font-size-200;
-            line-height: $line-height-200;
-            font-weight: $font-weight-normal;
-            color: $color-black;
-            border-radius: $radius-100;
-            &:hover {
-              color: $color-purple;
-              background-color: sasscolor.scale($color-purple, $lightness: 80%);
-              border-radius: $radius-100;
-            }
-          }
-          &__cell_disabled {
-            background-color: $color-hover-gray !important;
-            border-radius: 0 !important;
-          }
-          &__cell_offset {
-            color: $color-hover-gray;
-          }
-          &__range_between {
-            color: $color-black;
-            background-color: sasscolor.scale($color-purple, $lightness: 90%);
-            border-radius: 0;
-          }
-          &__range_start,
-          &__range_end,
-          &__active_date {
-            color: $color-white !important;
-            background-color: $color-purple !important;
-            border-color: $color-purple !important;
-          }
-          &__active_date {
-            box-shadow: $shadow-s-purple;
-          }
-          &__today {
-            color: $color-purple;
-            border-color: transparent;
-            border-radius: $radius-100;
-          }
-        }
-      }
-      &_header {
-        &_item {
-          @include size($space-400);
-          font-size: $font-size-200;
-          line-height: $line-height-200;
-          font-weight: $font-weight-normal;
-          color: $color-dark-gray;
-          padding: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        &_separator {
-          display: none;
-        }
-      }
-      &_row {
-        margin: 0;
-      }
-    }
-    &__btn {
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      font-weight: $font-weight-semi-bold;
-      background: transparent;
-      &:hover {
-        color: $color-purple;
-      }
-    }
-    &__menu {
-      border-radius: $radius-150;
-      box-shadow: $shadow-s;
-      z-index: 12222;
-      border: transparent;
-      padding: $space-200;
-      &_inner {
-        padding: 0;
-      }
-    }
-    &__arrow_top,
-    &__arrow_bottom,
-    &__arrow_left,
-    &__arrow_right {
-      border: none;
-      box-shadow: $shadow-s;
-      z-index: -1;
-    }
-    &__action_row {
-      padding: 0;
-      margin: 0;
-      .mc-datepicker__footer-popup {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        &-periods {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          @include child-indent-right($space-200);
-          > * {
-            @include child-indent-right($space-300);
-          }
-          .mc-button {
-            @include child-indent-right($space-zero);
-          }
-        }
-      }
-    }
-  }
-  @at-root {
-    html[dir='rtl'] {
-      .mx-icon {
-        &-double {
-          &-right:after {
-            left: $space-100;
-          }
-          &-left:before {
-            left: -$space-100;
-          }
-        }
-      }
-    }
-  }
-}
-</style>