@tager/admin-banners 0.1.5 → 0.3.0

package/dist/index.umd.js

@@ -1,181 +1,174 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@tager/admin-services'), require('path-to-regexp'), require('@tager/admin-ui')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@tager/admin-services', 'path-to-regexp', '@tager/admin-ui'], factory) :
-  (global = global || self, factory(global.TagerAdminBlog = {}, global.Vue, global.adminServices, global.pathToRegexp, global.adminUi));
-}(this, (function (exports, Vue, adminServices, pathToRegexp, adminUi) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tager/admin-services'), require('@vue/composition-api'), require('@tager/admin-ui'), require('path-to-regexp')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tager/admin-services', '@vue/composition-api', '@tager/admin-ui', 'path-to-regexp'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TagerAdminBanners = {}, global.adminServices, global.compositionApi, global.adminUi, global.pathToRegexp));
+}(this, (function (exports, adminServices, compositionApi, adminUi, pathToRegexp) { 'use strict';
 
-  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
+  const EN = {
+      home: 'Home',
+      zone: 'Banner zone',
+      zones: 'Banner zones',
+      banners: 'Banners',
+      bannerForm: 'Banner Form',
+      createBanner: 'Create Banner',
+      updateBanner: 'Update Banner',
+      link: 'Link',
+      image: 'Image',
+      openNewTab: 'Open new tab',
+      period: 'Period',
+      from: 'From',
+      to: 'To',
+      disabled: 'Disabled',
+      comment: 'Comment',
+      status: 'Status',
+      bannerZoneIsDeleted: 'Banner zone is deleted',
+      newTab: 'New Tab',
+      yes: 'Yes',
+      no: 'No',
+      edit: 'Edit',
+      remove: 'Remove',
+      actions: 'actions',
+      date: 'Date',
+      success: 'Success',
+      error: 'Error',
+      statuses: {
+          waiting: 'Waiting',
+          archived: 'Archived',
+          active: 'Active',
+          disabled: 'Disabled',
+      },
+      bannerWasSuccessfullyCreated: 'Banner was successfully created',
+      bannerWasSuccessfullyUpdated: 'Banner was successfully updated',
+      bannerCreationWasFailed: 'Banner creation was failed',
+      bannerUpdateWasFailed: 'Banner update was failed',
+  };
 
-  /** Banner area */
-  function getBannerAreaList() {
-      return adminServices.request.get({ path: '/market-boards' });
-  }
-  function getBannerAreaById(areaId) {
-      return adminServices.request.get({ path: `/market-boards/${areaId}` });
-  }
-  function getBannerAreaByAlias(areaAlias) {
-      return adminServices.request.get({ path: `/market-boards/${areaAlias}` });
-  }
-  function createBannerArea(payload) {
-      return adminServices.request.post({ path: '/market-boards', body: payload });
-  }
-  function updateBannerArea(areaId, payload) {
-      return adminServices.request.put({ path: `/market-boards/${areaId}`, body: payload });
-  }
-  function deleteBannerArea(areaId) {
-      return adminServices.request.delete({ path: `/market-boards/${areaId}` });
+  const RU = {
+      home: 'Главная',
+      zone: 'Баннерная зона',
+      zones: 'Баннерные зоны',
+      banners: 'Баннеры',
+      bannerForm: 'Форма баннера',
+      createBanner: 'Добавить баннер',
+      updateBanner: 'Редактировать баннер',
+      link: 'Ссылка',
+      image: 'Картинка',
+      openNewTab: 'Открывать в новой вкладке',
+      period: 'Срок действия',
+      from: 'От',
+      to: 'До',
+      disabled: 'Выключен',
+      comment: 'Комментарий',
+      status: 'Статус',
+      bannerZoneIsDeleted: 'Баннерная зона удалена',
+      newTab: 'Новая вкладка',
+      yes: 'Да',
+      no: 'Нет',
+      edit: 'Редактировать',
+      remove: 'Удалить',
+      actions: 'Действия',
+      date: 'Дата',
+      success: 'Успех',
+      error: 'Ошибка',
+      statuses: {
+          waiting: 'В ожидании',
+          archived: 'Архивный',
+          active: 'Активный',
+          disabled: 'Отключен',
+      },
+      bannerWasSuccessfullyCreated: 'Баннер успешно создан',
+      bannerWasSuccessfullyUpdated: 'Баннер успешно обновлен',
+      bannerCreationWasFailed: 'Не удалось создать баннер',
+      bannerUpdateWasFailed: 'Не удалось обновить баннер',
+  };
+
+  /** Zones **/
+  function getZones(params) {
+      return adminServices.request.get({ path: '/admin/adv/zones', params });
   }
-  /** Banners */
-  function getBannerItemList(areaId) {
-      return adminServices.request.get({ path: `/market-boards/${areaId}/items` });
+  /** Banners **/
+  function getBanners(params) {
+      return adminServices.request.get({ path: '/admin/adv', params });
   }
-  function getBannerItemById(bannerItemId) {
-      return adminServices.request.get({ path: `/market-boards/items/${bannerItemId}` });
+  function getBanner(bannerId) {
+      return adminServices.request.get({ path: `/admin/adv/${bannerId}` });
   }
-  function createBannerItem(areaId, payload) {
-      return adminServices.request.post({
-          path: `/market-boards/${areaId}/items`,
-          body: payload,
-      });
+  function createBanner(payload) {
+      return adminServices.request.post({ path: '/admin/adv', body: payload });
   }
-  function updateBannerItem(bannerItemId, payload) {
+  function updateBanner(bannerId, payload) {
       return adminServices.request.put({
-          path: `/market-boards/items/${bannerItemId}`,
+          path: `/admin/adv/${bannerId}`,
           body: payload,
       });
   }
-  function deleteBannerItem(bannerItemId) {
-      return adminServices.request.delete({ path: `/market-boards/items/${bannerItemId}` });
-  }
-  function moveBannerItem(bannerItemId, direction) {
-      return adminServices.request.post({
-          path: `/market-boards/items/${bannerItemId}/${direction}`,
-      });
+  function deleteBanner(bannerId) {
+      return adminServices.request.delete({ path: `/admin/banners/${bannerId}` });
   }
 
-  const BANNER_ROUTE_PATHS = {
-      AREA_LIST: '/banners',
-      AREA_FORM: '/banners/:areaId',
-      ITEM_LIST: '/banners/:areaAlias/items',
-      ITEM_FORM: '/banners/:areaAlias/items/:itemId',
+  const BANNERS_ROUTE_PATHS = {
+      ZONE_LIST: '/banners/zones',
+      BANNER_LIST: '/banners',
+      BANNER_FORM: '/banners/:bannerId',
   };
-  function getBannerAreaListUrl() {
-      return BANNER_ROUTE_PATHS.AREA_LIST;
-  }
-  function getBannerAreaFormUrl(params) {
-      return pathToRegexp.compile(BANNER_ROUTE_PATHS.AREA_FORM)({
-          areaId: params.areaId,
-      });
+  function getBannersZoneListUrl() {
+      return BANNERS_ROUTE_PATHS.ZONE_LIST;
   }
-  function getBannerItemListUrl(params) {
-      return pathToRegexp.compile(BANNER_ROUTE_PATHS.ITEM_LIST)({
-          areaAlias: params.areaAlias,
-      });
+  function getBannersBannerListUrl() {
+      return BANNERS_ROUTE_PATHS.BANNER_LIST;
   }
-  function getBannerItemFormUrl(params) {
-      return pathToRegexp.compile(BANNER_ROUTE_PATHS.ITEM_FORM)({
-          areaAlias: params.areaAlias,
-          itemId: params.itemId,
-      });
+  function getBannersBannerFormUrl(params) {
+      return pathToRegexp.compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
   }
 
-  const COLUMN_DEFS = [
-      {
-          id: 1,
-          name: 'ID',
-          field: 'id',
-          style: { width: '50px', textAlign: 'center' },
-          headStyle: { width: '50px', textAlign: 'center' },
-      },
-      { id: 2, name: 'Alias', field: 'alias' },
-      { id: 3, name: 'Label', field: 'label' },
-      { id: 4, name: 'Scenario', field: 'scenario' },
-      {
-          id: 6,
-          name: 'Banner Items',
-          field: 'linkToBannerItems',
-          style: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-          headStyle: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-      },
-      {
-          id: 8,
-          name: 'Actions',
-          field: 'actions',
-          style: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-          headStyle: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-      },
-  ];
-  var script = Vue.extend({
-      name: 'BannerAreaList',
-      data() {
-          return {
-              columnDefs: COLUMN_DEFS,
-              rowData: [],
-              deletingBannerAreaIdList: [],
-              isRowDataLoading: false,
-              errorMessage: null,
-          };
-      },
-      mounted() {
-          this.refreshBannerAreaList();
-      },
-      methods: {
-          getBannerAreaUrl(areaId) {
-              return getBannerAreaFormUrl({ areaId });
-          },
-          refreshBannerAreaList() {
-              this.isRowDataLoading = true;
-              return getBannerAreaList()
-                  .then((response) => {
-                  this.rowData = response.data;
-                  this.errorMessage = null;
-              })
-                  .catch((error) => {
-                  console.error(error);
-                  this.rowData = [];
-                  this.errorMessage = adminServices.getMessageFromError(error);
-              })
-                  .finally(() => {
-                  this.isRowDataLoading = false;
-              });
+  function getColumnDefs(t) {
+      return [
+          {
+              id: 0,
+              name: 'ID',
+              field: 'id',
+              style: { width: '50px', textAlign: 'center' },
+              headStyle: { width: '50px', textAlign: 'center' },
           },
-          handleBannerAreaDelete(bannerArea) {
-              const shouldDeleteBannerArea = confirm(`Are you sure you want to delete banner area "${bannerArea.label}"`);
-              if (!shouldDeleteBannerArea)
-                  return;
-              this.deletingBannerAreaIdList.push(bannerArea.id);
-              deleteBannerArea(bannerArea.id)
-                  .then((response) => {
-                  if (response.success) {
-                      this.refreshBannerAreaList().then(() => {
-                          this.deletingBannerAreaIdList.filter((id) => id !== bannerArea.id);
-                      });
-                      this.$toast({
-                          variant: 'success',
-                          title: 'Success',
-                          body: 'Banner area was successfully removed',
-                      });
-                  }
-                  else {
-                      this.$toast({
-                          variant: 'danger',
-                          title: 'Error',
-                          body: 'Banner area deletion was failed',
-                      });
-                  }
-              })
-                  .catch((error) => {
-                  console.error(error);
-                  this.$toast({
-                      variant: 'danger',
-                      title: 'Error',
-                      body: 'Banner area deletion was failed',
-                  });
-              });
+          {
+              id: 1,
+              name: t('banners:name'),
+              field: 'name',
+              type: 'name',
           },
-          getLinkToBannerItems(areaAlias) {
-              return getBannerItemListUrl({ areaAlias });
+          {
+              id: 2,
+              name: t('banners:banners'),
+              field: 'bannersCount',
+              style: { whiteSpace: 'nowrap', width: '130px' },
           },
+      ];
+  }
+  function getLinkToBannersByZone(zoneId) {
+      return `${getBannersBannerListUrl()}?filter[zone]=${zoneId}`;
+  }
+
+  var script = compositionApi.defineComponent({
+      name: 'ZoneList',
+      setup(props, context) {
+          const { fetchEntityList: fetchZones, isLoading: isZonesLoading, rowData, errorMessage, handleChange, } = adminUi.useDataTable({
+              fetchEntityList: getZones,
+              initialValue: [],
+              context,
+              resourceName: 'Banner Zones',
+          });
+          compositionApi.onMounted(() => {
+              fetchZones();
+          });
+          const columnDefs = compositionApi.computed(() => getColumnDefs(context.root.$t));
+          return {
+              columnDefs,
+              isRowDataLoading: isZonesLoading,
+              rowData,
+              errorMessage,
+              handleChange,
+              getLinkToBannersByZone,
+          };
       },
   });
 
@@ -254,59 +247,6 @@
       return script;
   }
 
-  const isOldIE = typeof navigator !== 'undefined' &&
-      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-  function createInjector(context) {
-      return (id, style) => addStyle(id, style);
-  }
-  let HEAD;
-  const styles = {};
-  function addStyle(id, css) {
-      const group = isOldIE ? css.media || 'default' : id;
-      const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-      if (!style.ids.has(id)) {
-          style.ids.add(id);
-          let code = css.source;
-          if (css.map) {
-              // https://developer.chrome.com/devtools/docs/javascript-debugging
-              // this makes source maps inside style tags work properly in Chrome
-              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-              // http://stackoverflow.com/a/26603875
-              code +=
-                  '\n/*# sourceMappingURL=data:application/json;base64,' +
-                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                      ' */';
-          }
-          if (!style.element) {
-              style.element = document.createElement('style');
-              style.element.type = 'text/css';
-              if (css.media)
-                  style.element.setAttribute('media', css.media);
-              if (HEAD === undefined) {
-                  HEAD = document.head || document.getElementsByTagName('head')[0];
-              }
-              HEAD.appendChild(style.element);
-          }
-          if ('styleSheet' in style.element) {
-              style.styles.push(code);
-              style.element.styleSheet.cssText = style.styles
-                  .filter(Boolean)
-                  .join('\n');
-          }
-          else {
-              const index = style.ids.size - 1;
-              const textNode = document.createTextNode(code);
-              const nodes = style.element.childNodes;
-              if (nodes[index])
-                  style.element.removeChild(nodes[index]);
-              if (nodes.length)
-                  style.element.insertBefore(textNode, nodes[index]);
-              else
-                  style.element.appendChild(textNode);
-          }
-      }
-  }
-
   /* script */
   const __vue_script__ = script;
 
@@ -316,82 +256,45 @@
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c("page", {
-      attrs: {
-        title: "Banner Areas",
-        "header-buttons": [
-          { text: "New banner area", href: _vm.getBannerAreaUrl("create") },
-        ],
-      },
+      attrs: { title: _vm.$t("banners:zones") },
       scopedSlots: _vm._u([
         {
           key: "content",
           fn: function () {
             return [
-              _c("base-table", {
+              _c("data-table", {
                 attrs: {
                   "column-defs": _vm.columnDefs,
                   "row-data": _vm.rowData,
                   loading: _vm.isRowDataLoading,
                   "error-message": _vm.errorMessage,
+                  "data-table": "banners-zones",
+                  "use-search": false,
+                  "use-pagination": false,
                 },
+                on: { change: _vm.handleChange },
                 scopedSlots: _vm._u([
                   {
-                    key: "cell(link-to-banner-items)",
+                    key: "cell(banners-count)",
                     fn: function (ref) {
                       var row = ref.row;
                       return [
                         _c(
-                          "base-button",
+                          "count-button",
                           {
                             attrs: {
-                              href: _vm.getLinkToBannerItems(row.alias),
+                              href: _vm.getLinkToBannersByZone(row.id),
                               variant: "outline-secondary",
+                              count: row.bannersCount,
                             },
                           },
-                          [_vm._v("\n          Banner Items\n        ")]
-                        ),
-                      ]
-                    },
-                  },
-                  {
-                    key: "cell(actions)",
-                    fn: function (ref) {
-                      var row = ref.row;
-                      return [
-                        _c(
-                          "base-button",
-                          {
-                            attrs: {
-                              variant: "icon",
-                              title: "Edit",
-                              disabled: _vm.deletingBannerAreaIdList.includes(
-                                row.id
-                              ),
-                              href: _vm.getBannerAreaUrl(row.id),
-                            },
-                          },
-                          [_c("svg-icon", { attrs: { name: "edit" } })],
-                          1
-                        ),
-                        _vm._v(" "),
-                        _c(
-                          "base-button",
-                          {
-                            attrs: {
-                              variant: "icon",
-                              title: "Remove",
-                              disabled: _vm.deletingBannerAreaIdList.includes(
-                                row.id
-                              ),
-                            },
-                            on: {
-                              click: function ($event) {
-                                return _vm.handleBannerAreaDelete(row)
-                              },
-                            },
-                          },
-                          [_c("svg-icon", { attrs: { name: "delete" } })],
-                          1
+                          [
+                            _vm._v(
+                              "\n          " +
+                                _vm._s(_vm.$t("banners:banners")) +
+                                "\n        "
+                            ),
+                          ]
                         ),
                       ]
                     },
@@ -409,17 +312,15 @@
   __vue_render__._withStripped = true;
 
     /* style */
-    const __vue_inject_styles__ = function (inject) {
-      if (!inject) return
-      inject("data-v-61f24706_0", { source: ".actions-cell button[data-v-61f24706]:not(:last-child) {\n  margin-right: 0.5rem;\n}\n\n/*# sourceMappingURL=BannerAreaList.vue.map */", map: {"version":3,"sources":["C:\\Work\\tager-admin-banners\\src\\views\\BannerAreaList.vue","BannerAreaList.vue"],"names":[],"mappings":"AA2KA;EACA,oBAAA;AC1KA;;AAEA,6CAA6C","file":"BannerAreaList.vue","sourcesContent":["<template>\r\n  <page\r\n    title=\"Banner Areas\"\r\n    :header-buttons=\"[\r\n      { text: 'New banner area', href: getBannerAreaUrl('create') },\r\n    ]\"\r\n  >\r\n    <template v-slot:content>\r\n      <base-table\r\n        :column-defs=\"columnDefs\"\r\n        :row-data=\"rowData\"\r\n        :loading=\"isRowDataLoading\"\r\n        :error-message=\"errorMessage\"\r\n      >\r\n        <template v-slot:cell(link-to-banner-items)=\"{ row }\">\r\n          <base-button\r\n            :href=\"getLinkToBannerItems(row.alias)\"\r\n            variant=\"outline-secondary\"\r\n          >\r\n            Banner Items\r\n          </base-button>\r\n        </template>\r\n\r\n        <template v-slot:cell(actions)=\"{ row }\">\r\n          <base-button\r\n            variant=\"icon\"\r\n            title=\"Edit\"\r\n            :disabled=\"deletingBannerAreaIdList.includes(row.id)\"\r\n            :href=\"getBannerAreaUrl(row.id)\"\r\n          >\r\n            <svg-icon name=\"edit\"></svg-icon>\r\n          </base-button>\r\n          <base-button\r\n            variant=\"icon\"\r\n            title=\"Remove\"\r\n            :disabled=\"deletingBannerAreaIdList.includes(row.id)\"\r\n            @click=\"handleBannerAreaDelete(row)\"\r\n          >\r\n            <svg-icon name=\"delete\"></svg-icon>\r\n          </base-button>\r\n        </template>\r\n      </base-table>\r\n    </template>\r\n  </page>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport Vue from 'vue';\r\nimport { ColumnDefinition } from '@tager/admin-ui';\r\nimport { getMessageFromError, Nullable } from '@tager/admin-services';\r\n\r\nimport { BannerArea } from '../typings/model';\r\nimport { deleteBannerArea, getBannerAreaList } from '../services/requests';\r\nimport { getBannerAreaFormUrl, getBannerItemListUrl } from '../constants/paths';\r\n\r\nconst COLUMN_DEFS: Array<ColumnDefinition<BannerArea>> = [\r\n  {\r\n    id: 1,\r\n    name: 'ID',\r\n    field: 'id',\r\n    style: { width: '50px', textAlign: 'center' },\r\n    headStyle: { width: '50px', textAlign: 'center' },\r\n  },\r\n  { id: 2, name: 'Alias', field: 'alias' },\r\n  { id: 3, name: 'Label', field: 'label' },\r\n  { id: 4, name: 'Scenario', field: 'scenario' },\r\n  {\r\n    id: 6,\r\n    name: 'Banner Items',\r\n    field: 'linkToBannerItems',\r\n    style: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },\r\n    headStyle: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },\r\n  },\r\n  {\r\n    id: 8,\r\n    name: 'Actions',\r\n    field: 'actions',\r\n    style: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },\r\n    headStyle: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },\r\n  },\r\n];\r\n\r\nexport default Vue.extend({\r\n  name: 'BannerAreaList',\r\n  data(): {\r\n    columnDefs: Array<ColumnDefinition<BannerArea>>;\r\n    rowData: Array<BannerArea>;\r\n    deletingBannerAreaIdList: Array<number>;\r\n    isRowDataLoading: boolean;\r\n    errorMessage: Nullable<string>;\r\n  } {\r\n    return {\r\n      columnDefs: COLUMN_DEFS,\r\n      rowData: [],\r\n      deletingBannerAreaIdList: [],\r\n      isRowDataLoading: false,\r\n      errorMessage: null,\r\n    };\r\n  },\r\n  mounted(): void {\r\n    this.refreshBannerAreaList();\r\n  },\r\n  methods: {\r\n    getBannerAreaUrl(areaId: number | string): string {\r\n      return getBannerAreaFormUrl({ areaId });\r\n    },\r\n    refreshBannerAreaList(): Promise<void> {\r\n      this.isRowDataLoading = true;\r\n\r\n      return getBannerAreaList()\r\n        .then((response) => {\r\n          this.rowData = response.data;\r\n          this.errorMessage = null;\r\n        })\r\n        .catch((error) => {\r\n          console.error(error);\r\n          this.rowData = [];\r\n          this.errorMessage = getMessageFromError(error);\r\n        })\r\n        .finally(() => {\r\n          this.isRowDataLoading = false;\r\n        });\r\n    },\r\n    handleBannerAreaDelete(bannerArea: BannerArea) {\r\n      const shouldDeleteBannerArea = confirm(\r\n        `Are you sure you want to delete banner area \"${bannerArea.label}\"`\r\n      );\r\n\r\n      if (!shouldDeleteBannerArea) return;\r\n\r\n      this.deletingBannerAreaIdList.push(bannerArea.id);\r\n\r\n      deleteBannerArea(bannerArea.id)\r\n        .then((response) => {\r\n          if (response.success) {\r\n            this.refreshBannerAreaList().then(() => {\r\n              this.deletingBannerAreaIdList.filter(\r\n                (id) => id !== bannerArea.id\r\n              );\r\n            });\r\n            this.$toast({\r\n              variant: 'success',\r\n              title: 'Success',\r\n              body: 'Banner area was successfully removed',\r\n            });\r\n          } else {\r\n            this.$toast({\r\n              variant: 'danger',\r\n              title: 'Error',\r\n              body: 'Banner area deletion was failed',\r\n            });\r\n          }\r\n        })\r\n        .catch((error) => {\r\n          console.error(error);\r\n          this.$toast({\r\n            variant: 'danger',\r\n            title: 'Error',\r\n            body: 'Banner area deletion was failed',\r\n          });\r\n        });\r\n    },\r\n    getLinkToBannerItems(areaAlias: string) {\r\n      return getBannerItemListUrl({ areaAlias });\r\n    },\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.actions-cell {\r\n  button:not(:last-child) {\r\n    margin-right: 0.5rem;\r\n  }\r\n}\r\n</style>\r\n",".actions-cell button:not(:last-child) {\n  margin-right: 0.5rem;\n}\n\n/*# sourceMappingURL=BannerAreaList.vue.map */"]}, media: undefined });
-
-    };
+    const __vue_inject_styles__ = undefined;
     /* scoped */
-    const __vue_scope_id__ = "data-v-61f24706";
+    const __vue_scope_id__ = undefined;
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */
     const __vue_is_functional_template__ = false;
+    /* style inject */
+    
     /* style inject SSR */
     
     /* style inject shadow dom */
@@ -434,368 +335,2691 @@
       __vue_is_functional_template__,
       __vue_module_identifier__,
       false,
-      createInjector,
+      undefined,
       undefined,
       undefined
     );
 
-  const initialValues = {
-      alias: '',
-      label: '',
-      scenario: '',
-  };
-  var script$1 = Vue.extend({
-      name: 'BannerAreaForm',
-      data() {
-          return {
-              values: Object.assign({}, initialValues),
-              errors: {},
-              isContentLoading: false,
-          };
-      },
-      computed: {
-          areaId() {
-              return this.$route.params.areaId;
-          },
-          isCreation() {
-              return this.areaId === 'create';
-          },
-      },
-      watch: {
-          areaId() {
-              this.updateValues();
-          },
-      },
-      mounted() {
-          this.updateValues();
-      },
-      methods: {
-          convertReviewToInitialValues(bannerArea) {
-              return {
-                  alias: bannerArea.alias,
-                  label: bannerArea.label,
-                  scenario: bannerArea.scenario,
-              };
-          },
-          updateValues() {
-              if (this.isCreation) {
-                  this.values = Object.assign({}, initialValues);
-              }
-              else {
-                  this.isContentLoading = true;
-                  getBannerAreaById(this.areaId)
-                      .then((response) => {
-                      this.values = this.convertReviewToInitialValues(response.data);
-                  })
-                      .catch(console.error)
-                      .finally(() => {
-                      this.isContentLoading = false;
-                  });
-              }
-          },
-          submitForm() {
-              const body = {
-                  label: this.values.label,
-                  alias: this.values.alias,
-                  scenario: this.values.scenario,
-              };
-              const requestPromise = this.isCreation
-                  ? createBannerArea(body)
-                  : updateBannerArea(this.areaId, body);
-              requestPromise
-                  .then(() => {
-                  this.errors = {};
-                  this.$router.push(getBannerAreaListUrl());
-                  this.$toast({
-                      variant: 'success',
-                      title: 'Success',
-                      body: `Banner Area was successfully ${this.isCreation ? 'created' : 'updated'}`,
-                  });
-              })
-                  .catch((error) => {
-                  console.error(error);
-                  this.errors = adminServices.convertRequestErrorToMap(error);
-                  this.$toast({
-                      variant: 'danger',
-                      title: 'Error',
-                      body: `Blog bannerArea ${this.isCreation ? 'creation' : 'update'} was failed`,
-                  });
-              });
-          },
-          getAreaListUrl: getBannerAreaListUrl,
-      },
-  });
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  /* script */
-  const __vue_script__$1 = script$1;
+  function createCommonjsModule(fn, basedir, module) {
+  	return module = {
+  	  path: basedir,
+  	  exports: {},
+  	  require: function (path, base) {
+        return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+      }
+  	}, fn(module, module.exports), module.exports;
+  }
 
-  /* template */
-  var __vue_render__$1 = function () {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("page", {
-      attrs: {
-        title: _vm.isCreation ? "Create Banner Area" : "Update Banner Area",
-        "is-content-loading": _vm.isContentLoading,
-        footer: { onSubmit: _vm.submitForm, backHref: _vm.getAreaListUrl() },
-      },
-      scopedSlots: _vm._u([
-        {
-          key: "content",
-          fn: function () {
-            return [
-              _c(
-                "form",
-                {
-                  attrs: { novalidate: "" },
-                  on: {
-                    submit: function ($event) {
-                      $event.preventDefault();
-                      return _vm.submitForm($event)
-                    },
-                  },
-                },
-                [
-                  _c("form-field", {
-                    attrs: {
-                      name: "alias",
-                      label: "Alias",
-                      error: _vm.errors.alias,
-                    },
-                    model: {
-                      value: _vm.values.alias,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "alias", $$v);
-                      },
-                      expression: "values.alias",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field", {
-                    attrs: {
-                      name: "label",
-                      label: "Label",
-                      error: _vm.errors.label,
-                    },
-                    model: {
-                      value: _vm.values.label,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "label", $$v);
-                      },
-                      expression: "values.label",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field", {
-                    attrs: {
-                      name: "scenario",
-                      label: "Scenario",
-                      error: _vm.errors.scenario,
-                    },
-                    model: {
-                      value: _vm.values.scenario,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "scenario", $$v);
-                      },
-                      expression: "values.scenario",
-                    },
-                  }),
-                ],
-                1
-              ),
-            ]
-          },
-          proxy: true,
-        },
-      ]),
-    })
-  };
-  var __vue_staticRenderFns__$1 = [];
-  __vue_render__$1._withStripped = true;
+  function commonjsRequire () {
+  	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+  }
 
-    /* style */
-    const __vue_inject_styles__$1 = function (inject) {
-      if (!inject) return
-      inject("data-v-5a068baa_0", { source: ".bottom[data-v-5a068baa] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.save-button[data-v-5a068baa] {\n  min-width: 100px;\n}\n.alias-field-inner[data-v-5a068baa] {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span[data-v-5a068baa] {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerAreaForm.vue.map */", map: {"version":3,"sources":["C:\\Work\\tager-admin-banners\\src\\views\\BannerAreaForm.vue","BannerAreaForm.vue"],"names":[],"mappings":"AAyJA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;ACxJA;AD2JA;EACA,gBAAA;ACxJA;AD2JA;EACA,aAAA;EACA,mBAAA;ACxJA;AD0JA;EACA,gBAAA;EACA,kBAAA;ACxJA;;AAEA,6CAA6C","file":"BannerAreaForm.vue","sourcesContent":["<template>\r\n  <page\r\n    :title=\"isCreation ? 'Create Banner Area' : 'Update Banner Area'\"\r\n    :is-content-loading=\"isContentLoading\"\r\n    :footer=\"{ onSubmit: submitForm, backHref: getAreaListUrl() }\"\r\n  >\r\n    <template v-slot:content>\r\n      <form novalidate @submit.prevent=\"submitForm\">\r\n        <form-field\r\n          v-model=\"values.alias\"\r\n          name=\"alias\"\r\n          label=\"Alias\"\r\n          :error=\"errors.alias\"\r\n        />\r\n\r\n        <form-field\r\n          v-model=\"values.label\"\r\n          name=\"label\"\r\n          label=\"Label\"\r\n          :error=\"errors.label\"\r\n        />\r\n\r\n        <form-field\r\n          v-model=\"values.scenario\"\r\n          name=\"scenario\"\r\n          label=\"Scenario\"\r\n          :error=\"errors.scenario\"\r\n        />\r\n      </form>\r\n    </template>\r\n  </page>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport Vue from 'vue';\r\nimport { convertRequestErrorToMap } from '@tager/admin-services';\r\n\r\nimport {\r\n  BannerAreaCreatePayload,\r\n  createBannerArea,\r\n  getBannerAreaById,\r\n  updateBannerArea,\r\n} from '../services/requests';\r\nimport { BannerArea } from '../typings/model';\r\nimport { getBannerAreaListUrl } from '../constants/paths';\r\n\r\ntype FormValues = {\r\n  alias: string;\r\n  label: string;\r\n  scenario: string;\r\n};\r\n\r\nconst initialValues: FormValues = {\r\n  alias: '',\r\n  label: '',\r\n  scenario: '',\r\n};\r\n\r\nexport default Vue.extend({\r\n  name: 'BannerAreaForm',\r\n  data(): {\r\n    values: FormValues;\r\n    errors: Record<string, string>;\r\n    isContentLoading: boolean;\r\n  } {\r\n    return {\r\n      values: { ...initialValues },\r\n      errors: {},\r\n      isContentLoading: false,\r\n    };\r\n  },\r\n  computed: {\r\n    areaId(): string {\r\n      return this.$route.params.areaId;\r\n    },\r\n    isCreation(): boolean {\r\n      return this.areaId === 'create';\r\n    },\r\n  },\r\n  watch: {\r\n    areaId() {\r\n      this.updateValues();\r\n    },\r\n  },\r\n  mounted(): void {\r\n    this.updateValues();\r\n  },\r\n  methods: {\r\n    convertReviewToInitialValues(bannerArea: BannerArea): FormValues {\r\n      return {\r\n        alias: bannerArea.alias,\r\n        label: bannerArea.label,\r\n        scenario: bannerArea.scenario,\r\n      };\r\n    },\r\n    updateValues() {\r\n      if (this.isCreation) {\r\n        this.values = { ...initialValues };\r\n      } else {\r\n        this.isContentLoading = true;\r\n\r\n        getBannerAreaById(this.areaId)\r\n          .then((response) => {\r\n            this.values = this.convertReviewToInitialValues(response.data);\r\n          })\r\n          .catch(console.error)\r\n          .finally(() => {\r\n            this.isContentLoading = false;\r\n          });\r\n      }\r\n    },\r\n    submitForm() {\r\n      const body: BannerAreaCreatePayload = {\r\n        label: this.values.label,\r\n        alias: this.values.alias,\r\n        scenario: this.values.scenario,\r\n      };\r\n\r\n      const requestPromise = this.isCreation\r\n        ? createBannerArea(body)\r\n        : updateBannerArea(this.areaId, body);\r\n\r\n      requestPromise\r\n        .then(() => {\r\n          this.errors = {};\r\n          this.$router.push(getBannerAreaListUrl());\r\n\r\n          this.$toast({\r\n            variant: 'success',\r\n            title: 'Success',\r\n            body: `Banner Area was successfully ${\r\n              this.isCreation ? 'created' : 'updated'\r\n            }`,\r\n          });\r\n        })\r\n        .catch((error) => {\r\n          console.error(error);\r\n          this.errors = convertRequestErrorToMap(error);\r\n          this.$toast({\r\n            variant: 'danger',\r\n            title: 'Error',\r\n            body: `Blog bannerArea ${\r\n              this.isCreation ? 'creation' : 'update'\r\n            } was failed`,\r\n          });\r\n        });\r\n    },\r\n    getAreaListUrl: getBannerAreaListUrl,\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.bottom {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.save-button {\r\n  min-width: 100px;\r\n}\r\n\r\n.alias-field-inner {\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  span {\r\n    font-size: 0.9em;\r\n    margin-right: 10px;\r\n  }\r\n}\r\n</style>\r\n",".bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerAreaForm.vue.map */"]}, media: undefined });
+  var lodash_isequal = createCommonjsModule(function (module, exports) {
+  /**
+   * Lodash (Custom Build) <https://lodash.com/>
+   * Build: `lodash modularize exports="npm" -o ./`
+   * Copyright JS Foundation and other contributors <https://js.foundation/>
+   * Released under MIT license <https://lodash.com/license>
+   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+   */
 
-    };
-    /* scoped */
-    const __vue_scope_id__$1 = "data-v-5a068baa";
-    /* module identifier */
-    const __vue_module_identifier__$1 = undefined;
-    /* functional template */
-    const __vue_is_functional_template__$1 = false;
-    /* style inject SSR */
-    
-    /* style inject shadow dom */
-    
+  /** Used as the size to enable large array optimizations. */
+  var LARGE_ARRAY_SIZE = 200;
 
-    
-    const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-      __vue_inject_styles__$1,
-      __vue_script__$1,
-      __vue_scope_id__$1,
-      __vue_is_functional_template__$1,
-      __vue_module_identifier__$1,
-      false,
-      createInjector,
-      undefined,
-      undefined
-    );
+  /** Used to stand-in for `undefined` hash values. */
+  var HASH_UNDEFINED = '__lodash_hash_undefined__';
 
-  const COLUMN_DEFS$1 = [
-      {
-          id: 2,
-          name: 'Image',
-          field: 'image',
-          type: 'image',
-      },
-      {
-          id: 1,
-          name: 'Title',
-          field: 'title',
-      },
-      { id: 3, name: 'Text', field: 'text', type: 'html' },
-      { id: 4, name: 'Button: Label', field: 'buttonLabel' },
-      { id: 5, name: 'Button: Link', field: 'buttonLink' },
-      {
-          id: 6,
-          name: 'Button: Is new tab?',
-          field: 'buttonIsNewTab',
-          format: ({ row }) => adminUi.formatBoolean(row.buttonIsNewTab),
-      },
-      {
-          id: 7,
-          name: 'Actions',
-          field: 'actions',
-          style: { whiteSpace: 'nowrap', width: '205px' },
-          headStyle: { whiteSpace: 'nowrap', width: '205px' },
-      },
-  ];
-  var script$2 = Vue.extend({
-      name: 'BannerItemList',
-      data() {
-          return {
-              bannerArea: null,
-              columnDefs: COLUMN_DEFS$1,
-              rowData: [],
-              deletingBannerItemIdList: [],
-              isBannerItemMoving: false,
-              isRowDataLoading: false,
-              errorMessage: null,
-          };
-      },
-      computed: {
-          areaAlias() {
-              return this.$route.params.areaAlias;
+  /** Used to compose bitmasks for value comparisons. */
+  var COMPARE_PARTIAL_FLAG = 1,
+      COMPARE_UNORDERED_FLAG = 2;
+
+  /** Used as references for various `Number` constants. */
+  var MAX_SAFE_INTEGER = 9007199254740991;
+
+  /** `Object#toString` result references. */
+  var argsTag = '[object Arguments]',
+      arrayTag = '[object Array]',
+      asyncTag = '[object AsyncFunction]',
+      boolTag = '[object Boolean]',
+      dateTag = '[object Date]',
+      errorTag = '[object Error]',
+      funcTag = '[object Function]',
+      genTag = '[object GeneratorFunction]',
+      mapTag = '[object Map]',
+      numberTag = '[object Number]',
+      nullTag = '[object Null]',
+      objectTag = '[object Object]',
+      promiseTag = '[object Promise]',
+      proxyTag = '[object Proxy]',
+      regexpTag = '[object RegExp]',
+      setTag = '[object Set]',
+      stringTag = '[object String]',
+      symbolTag = '[object Symbol]',
+      undefinedTag = '[object Undefined]',
+      weakMapTag = '[object WeakMap]';
+
+  var arrayBufferTag = '[object ArrayBuffer]',
+      dataViewTag = '[object DataView]',
+      float32Tag = '[object Float32Array]',
+      float64Tag = '[object Float64Array]',
+      int8Tag = '[object Int8Array]',
+      int16Tag = '[object Int16Array]',
+      int32Tag = '[object Int32Array]',
+      uint8Tag = '[object Uint8Array]',
+      uint8ClampedTag = '[object Uint8ClampedArray]',
+      uint16Tag = '[object Uint16Array]',
+      uint32Tag = '[object Uint32Array]';
+
+  /**
+   * Used to match `RegExp`
+   * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+   */
+  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+  /** Used to detect host constructors (Safari). */
+  var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+  /** Used to detect unsigned integer values. */
+  var reIsUint = /^(?:0|[1-9]\d*)$/;
+
+  /** Used to identify `toStringTag` values of typed arrays. */
+  var typedArrayTags = {};
+  typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
+  typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
+  typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
+  typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
+  typedArrayTags[uint32Tag] = true;
+  typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
+  typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
+  typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
+  typedArrayTags[errorTag] = typedArrayTags[funcTag] =
+  typedArrayTags[mapTag] = typedArrayTags[numberTag] =
+  typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
+  typedArrayTags[setTag] = typedArrayTags[stringTag] =
+  typedArrayTags[weakMapTag] = false;
+
+  /** Detect free variable `global` from Node.js. */
+  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+  /** Detect free variable `self`. */
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  /** Used as a reference to the global object. */
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  /** Detect free variable `exports`. */
+  var freeExports =  exports && !exports.nodeType && exports;
+
+  /** Detect free variable `module`. */
+  var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+  /** Detect the popular CommonJS extension `module.exports`. */
+  var moduleExports = freeModule && freeModule.exports === freeExports;
+
+  /** Detect free variable `process` from Node.js. */
+  var freeProcess = moduleExports && freeGlobal.process;
+
+  /** Used to access faster Node.js helpers. */
+  var nodeUtil = (function() {
+    try {
+      return freeProcess && freeProcess.binding && freeProcess.binding('util');
+    } catch (e) {}
+  }());
+
+  /* Node.js helper references. */
+  var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+
+  /**
+   * A specialized version of `_.filter` for arrays without support for
+   * iteratee shorthands.
+   *
+   * @private
+   * @param {Array} [array] The array to iterate over.
+   * @param {Function} predicate The function invoked per iteration.
+   * @returns {Array} Returns the new filtered array.
+   */
+  function arrayFilter(array, predicate) {
+    var index = -1,
+        length = array == null ? 0 : array.length,
+        resIndex = 0,
+        result = [];
+
+    while (++index < length) {
+      var value = array[index];
+      if (predicate(value, index, array)) {
+        result[resIndex++] = value;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Appends the elements of `values` to `array`.
+   *
+   * @private
+   * @param {Array} array The array to modify.
+   * @param {Array} values The values to append.
+   * @returns {Array} Returns `array`.
+   */
+  function arrayPush(array, values) {
+    var index = -1,
+        length = values.length,
+        offset = array.length;
+
+    while (++index < length) {
+      array[offset + index] = values[index];
+    }
+    return array;
+  }
+
+  /**
+   * A specialized version of `_.some` for arrays without support for iteratee
+   * shorthands.
+   *
+   * @private
+   * @param {Array} [array] The array to iterate over.
+   * @param {Function} predicate The function invoked per iteration.
+   * @returns {boolean} Returns `true` if any element passes the predicate check,
+   *  else `false`.
+   */
+  function arraySome(array, predicate) {
+    var index = -1,
+        length = array == null ? 0 : array.length;
+
+    while (++index < length) {
+      if (predicate(array[index], index, array)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * The base implementation of `_.times` without support for iteratee shorthands
+   * or max array length checks.
+   *
+   * @private
+   * @param {number} n The number of times to invoke `iteratee`.
+   * @param {Function} iteratee The function invoked per iteration.
+   * @returns {Array} Returns the array of results.
+   */
+  function baseTimes(n, iteratee) {
+    var index = -1,
+        result = Array(n);
+
+    while (++index < n) {
+      result[index] = iteratee(index);
+    }
+    return result;
+  }
+
+  /**
+   * The base implementation of `_.unary` without support for storing metadata.
+   *
+   * @private
+   * @param {Function} func The function to cap arguments for.
+   * @returns {Function} Returns the new capped function.
+   */
+  function baseUnary(func) {
+    return function(value) {
+      return func(value);
+    };
+  }
+
+  /**
+   * Checks if a `cache` value for `key` exists.
+   *
+   * @private
+   * @param {Object} cache The cache to query.
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function cacheHas(cache, key) {
+    return cache.has(key);
+  }
+
+  /**
+   * Gets the value at `key` of `object`.
+   *
+   * @private
+   * @param {Object} [object] The object to query.
+   * @param {string} key The key of the property to get.
+   * @returns {*} Returns the property value.
+   */
+  function getValue(object, key) {
+    return object == null ? undefined : object[key];
+  }
+
+  /**
+   * Converts `map` to its key-value pairs.
+   *
+   * @private
+   * @param {Object} map The map to convert.
+   * @returns {Array} Returns the key-value pairs.
+   */
+  function mapToArray(map) {
+    var index = -1,
+        result = Array(map.size);
+
+    map.forEach(function(value, key) {
+      result[++index] = [key, value];
+    });
+    return result;
+  }
+
+  /**
+   * Creates a unary function that invokes `func` with its argument transformed.
+   *
+   * @private
+   * @param {Function} func The function to wrap.
+   * @param {Function} transform The argument transform.
+   * @returns {Function} Returns the new function.
+   */
+  function overArg(func, transform) {
+    return function(arg) {
+      return func(transform(arg));
+    };
+  }
+
+  /**
+   * Converts `set` to an array of its values.
+   *
+   * @private
+   * @param {Object} set The set to convert.
+   * @returns {Array} Returns the values.
+   */
+  function setToArray(set) {
+    var index = -1,
+        result = Array(set.size);
+
+    set.forEach(function(value) {
+      result[++index] = value;
+    });
+    return result;
+  }
+
+  /** Used for built-in method references. */
+  var arrayProto = Array.prototype,
+      funcProto = Function.prototype,
+      objectProto = Object.prototype;
+
+  /** Used to detect overreaching core-js shims. */
+  var coreJsData = root['__core-js_shared__'];
+
+  /** Used to resolve the decompiled source of functions. */
+  var funcToString = funcProto.toString;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty = objectProto.hasOwnProperty;
+
+  /** Used to detect methods masquerading as native. */
+  var maskSrcKey = (function() {
+    var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+    return uid ? ('Symbol(src)_1.' + uid) : '';
+  }());
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var nativeObjectToString = objectProto.toString;
+
+  /** Used to detect if a method is native. */
+  var reIsNative = RegExp('^' +
+    funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
+    .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
+  );
+
+  /** Built-in value references. */
+  var Buffer = moduleExports ? root.Buffer : undefined,
+      Symbol = root.Symbol,
+      Uint8Array = root.Uint8Array,
+      propertyIsEnumerable = objectProto.propertyIsEnumerable,
+      splice = arrayProto.splice,
+      symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+  /* Built-in method references for those with the same name as other `lodash` methods. */
+  var nativeGetSymbols = Object.getOwnPropertySymbols,
+      nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
+      nativeKeys = overArg(Object.keys, Object);
+
+  /* Built-in method references that are verified to be native. */
+  var DataView = getNative(root, 'DataView'),
+      Map = getNative(root, 'Map'),
+      Promise = getNative(root, 'Promise'),
+      Set = getNative(root, 'Set'),
+      WeakMap = getNative(root, 'WeakMap'),
+      nativeCreate = getNative(Object, 'create');
+
+  /** Used to detect maps, sets, and weakmaps. */
+  var dataViewCtorString = toSource(DataView),
+      mapCtorString = toSource(Map),
+      promiseCtorString = toSource(Promise),
+      setCtorString = toSource(Set),
+      weakMapCtorString = toSource(WeakMap);
+
+  /** Used to convert symbols to primitives and strings. */
+  var symbolProto = Symbol ? Symbol.prototype : undefined,
+      symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
+
+  /**
+   * Creates a hash object.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function Hash(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  /**
+   * Removes all key-value entries from the hash.
+   *
+   * @private
+   * @name clear
+   * @memberOf Hash
+   */
+  function hashClear() {
+    this.__data__ = nativeCreate ? nativeCreate(null) : {};
+    this.size = 0;
+  }
+
+  /**
+   * Removes `key` and its value from the hash.
+   *
+   * @private
+   * @name delete
+   * @memberOf Hash
+   * @param {Object} hash The hash to modify.
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function hashDelete(key) {
+    var result = this.has(key) && delete this.__data__[key];
+    this.size -= result ? 1 : 0;
+    return result;
+  }
+
+  /**
+   * Gets the hash value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf Hash
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function hashGet(key) {
+    var data = this.__data__;
+    if (nativeCreate) {
+      var result = data[key];
+      return result === HASH_UNDEFINED ? undefined : result;
+    }
+    return hasOwnProperty.call(data, key) ? data[key] : undefined;
+  }
+
+  /**
+   * Checks if a hash value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf Hash
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function hashHas(key) {
+    var data = this.__data__;
+    return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
+  }
+
+  /**
+   * Sets the hash `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf Hash
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the hash instance.
+   */
+  function hashSet(key, value) {
+    var data = this.__data__;
+    this.size += this.has(key) ? 0 : 1;
+    data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
+    return this;
+  }
+
+  // Add methods to `Hash`.
+  Hash.prototype.clear = hashClear;
+  Hash.prototype['delete'] = hashDelete;
+  Hash.prototype.get = hashGet;
+  Hash.prototype.has = hashHas;
+  Hash.prototype.set = hashSet;
+
+  /**
+   * Creates an list cache object.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function ListCache(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  /**
+   * Removes all key-value entries from the list cache.
+   *
+   * @private
+   * @name clear
+   * @memberOf ListCache
+   */
+  function listCacheClear() {
+    this.__data__ = [];
+    this.size = 0;
+  }
+
+  /**
+   * Removes `key` and its value from the list cache.
+   *
+   * @private
+   * @name delete
+   * @memberOf ListCache
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function listCacheDelete(key) {
+    var data = this.__data__,
+        index = assocIndexOf(data, key);
+
+    if (index < 0) {
+      return false;
+    }
+    var lastIndex = data.length - 1;
+    if (index == lastIndex) {
+      data.pop();
+    } else {
+      splice.call(data, index, 1);
+    }
+    --this.size;
+    return true;
+  }
+
+  /**
+   * Gets the list cache value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf ListCache
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function listCacheGet(key) {
+    var data = this.__data__,
+        index = assocIndexOf(data, key);
+
+    return index < 0 ? undefined : data[index][1];
+  }
+
+  /**
+   * Checks if a list cache value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf ListCache
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function listCacheHas(key) {
+    return assocIndexOf(this.__data__, key) > -1;
+  }
+
+  /**
+   * Sets the list cache `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf ListCache
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the list cache instance.
+   */
+  function listCacheSet(key, value) {
+    var data = this.__data__,
+        index = assocIndexOf(data, key);
+
+    if (index < 0) {
+      ++this.size;
+      data.push([key, value]);
+    } else {
+      data[index][1] = value;
+    }
+    return this;
+  }
+
+  // Add methods to `ListCache`.
+  ListCache.prototype.clear = listCacheClear;
+  ListCache.prototype['delete'] = listCacheDelete;
+  ListCache.prototype.get = listCacheGet;
+  ListCache.prototype.has = listCacheHas;
+  ListCache.prototype.set = listCacheSet;
+
+  /**
+   * Creates a map cache object to store key-value pairs.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function MapCache(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  /**
+   * Removes all key-value entries from the map.
+   *
+   * @private
+   * @name clear
+   * @memberOf MapCache
+   */
+  function mapCacheClear() {
+    this.size = 0;
+    this.__data__ = {
+      'hash': new Hash,
+      'map': new (Map || ListCache),
+      'string': new Hash
+    };
+  }
+
+  /**
+   * Removes `key` and its value from the map.
+   *
+   * @private
+   * @name delete
+   * @memberOf MapCache
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function mapCacheDelete(key) {
+    var result = getMapData(this, key)['delete'](key);
+    this.size -= result ? 1 : 0;
+    return result;
+  }
+
+  /**
+   * Gets the map value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf MapCache
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function mapCacheGet(key) {
+    return getMapData(this, key).get(key);
+  }
+
+  /**
+   * Checks if a map value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf MapCache
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function mapCacheHas(key) {
+    return getMapData(this, key).has(key);
+  }
+
+  /**
+   * Sets the map `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf MapCache
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the map cache instance.
+   */
+  function mapCacheSet(key, value) {
+    var data = getMapData(this, key),
+        size = data.size;
+
+    data.set(key, value);
+    this.size += data.size == size ? 0 : 1;
+    return this;
+  }
+
+  // Add methods to `MapCache`.
+  MapCache.prototype.clear = mapCacheClear;
+  MapCache.prototype['delete'] = mapCacheDelete;
+  MapCache.prototype.get = mapCacheGet;
+  MapCache.prototype.has = mapCacheHas;
+  MapCache.prototype.set = mapCacheSet;
+
+  /**
+   *
+   * Creates an array cache object to store unique values.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [values] The values to cache.
+   */
+  function SetCache(values) {
+    var index = -1,
+        length = values == null ? 0 : values.length;
+
+    this.__data__ = new MapCache;
+    while (++index < length) {
+      this.add(values[index]);
+    }
+  }
+
+  /**
+   * Adds `value` to the array cache.
+   *
+   * @private
+   * @name add
+   * @memberOf SetCache
+   * @alias push
+   * @param {*} value The value to cache.
+   * @returns {Object} Returns the cache instance.
+   */
+  function setCacheAdd(value) {
+    this.__data__.set(value, HASH_UNDEFINED);
+    return this;
+  }
+
+  /**
+   * Checks if `value` is in the array cache.
+   *
+   * @private
+   * @name has
+   * @memberOf SetCache
+   * @param {*} value The value to search for.
+   * @returns {number} Returns `true` if `value` is found, else `false`.
+   */
+  function setCacheHas(value) {
+    return this.__data__.has(value);
+  }
+
+  // Add methods to `SetCache`.
+  SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
+  SetCache.prototype.has = setCacheHas;
+
+  /**
+   * Creates a stack cache object to store key-value pairs.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function Stack(entries) {
+    var data = this.__data__ = new ListCache(entries);
+    this.size = data.size;
+  }
+
+  /**
+   * Removes all key-value entries from the stack.
+   *
+   * @private
+   * @name clear
+   * @memberOf Stack
+   */
+  function stackClear() {
+    this.__data__ = new ListCache;
+    this.size = 0;
+  }
+
+  /**
+   * Removes `key` and its value from the stack.
+   *
+   * @private
+   * @name delete
+   * @memberOf Stack
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function stackDelete(key) {
+    var data = this.__data__,
+        result = data['delete'](key);
+
+    this.size = data.size;
+    return result;
+  }
+
+  /**
+   * Gets the stack value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf Stack
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function stackGet(key) {
+    return this.__data__.get(key);
+  }
+
+  /**
+   * Checks if a stack value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf Stack
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function stackHas(key) {
+    return this.__data__.has(key);
+  }
+
+  /**
+   * Sets the stack `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf Stack
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the stack cache instance.
+   */
+  function stackSet(key, value) {
+    var data = this.__data__;
+    if (data instanceof ListCache) {
+      var pairs = data.__data__;
+      if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
+        pairs.push([key, value]);
+        this.size = ++data.size;
+        return this;
+      }
+      data = this.__data__ = new MapCache(pairs);
+    }
+    data.set(key, value);
+    this.size = data.size;
+    return this;
+  }
+
+  // Add methods to `Stack`.
+  Stack.prototype.clear = stackClear;
+  Stack.prototype['delete'] = stackDelete;
+  Stack.prototype.get = stackGet;
+  Stack.prototype.has = stackHas;
+  Stack.prototype.set = stackSet;
+
+  /**
+   * Creates an array of the enumerable property names of the array-like `value`.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @param {boolean} inherited Specify returning inherited property names.
+   * @returns {Array} Returns the array of property names.
+   */
+  function arrayLikeKeys(value, inherited) {
+    var isArr = isArray(value),
+        isArg = !isArr && isArguments(value),
+        isBuff = !isArr && !isArg && isBuffer(value),
+        isType = !isArr && !isArg && !isBuff && isTypedArray(value),
+        skipIndexes = isArr || isArg || isBuff || isType,
+        result = skipIndexes ? baseTimes(value.length, String) : [],
+        length = result.length;
+
+    for (var key in value) {
+      if ((inherited || hasOwnProperty.call(value, key)) &&
+          !(skipIndexes && (
+             // Safari 9 has enumerable `arguments.length` in strict mode.
+             key == 'length' ||
+             // Node.js 0.10 has enumerable non-index properties on buffers.
+             (isBuff && (key == 'offset' || key == 'parent')) ||
+             // PhantomJS 2 has enumerable non-index properties on typed arrays.
+             (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
+             // Skip index properties.
+             isIndex(key, length)
+          ))) {
+        result.push(key);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Gets the index at which the `key` is found in `array` of key-value pairs.
+   *
+   * @private
+   * @param {Array} array The array to inspect.
+   * @param {*} key The key to search for.
+   * @returns {number} Returns the index of the matched value, else `-1`.
+   */
+  function assocIndexOf(array, key) {
+    var length = array.length;
+    while (length--) {
+      if (eq(array[length][0], key)) {
+        return length;
+      }
+    }
+    return -1;
+  }
+
+  /**
+   * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
+   * `keysFunc` and `symbolsFunc` to get the enumerable property names and
+   * symbols of `object`.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @param {Function} keysFunc The function to get the keys of `object`.
+   * @param {Function} symbolsFunc The function to get the symbols of `object`.
+   * @returns {Array} Returns the array of property names and symbols.
+   */
+  function baseGetAllKeys(object, keysFunc, symbolsFunc) {
+    var result = keysFunc(object);
+    return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
+  }
+
+  /**
+   * The base implementation of `getTag` without fallbacks for buggy environments.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the `toStringTag`.
+   */
+  function baseGetTag(value) {
+    if (value == null) {
+      return value === undefined ? undefinedTag : nullTag;
+    }
+    return (symToStringTag && symToStringTag in Object(value))
+      ? getRawTag(value)
+      : objectToString(value);
+  }
+
+  /**
+   * The base implementation of `_.isArguments`.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+   */
+  function baseIsArguments(value) {
+    return isObjectLike(value) && baseGetTag(value) == argsTag;
+  }
+
+  /**
+   * The base implementation of `_.isEqual` which supports partial comparisons
+   * and tracks traversed objects.
+   *
+   * @private
+   * @param {*} value The value to compare.
+   * @param {*} other The other value to compare.
+   * @param {boolean} bitmask The bitmask flags.
+   *  1 - Unordered comparison
+   *  2 - Partial comparison
+   * @param {Function} [customizer] The function to customize comparisons.
+   * @param {Object} [stack] Tracks traversed `value` and `other` objects.
+   * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+   */
+  function baseIsEqual(value, other, bitmask, customizer, stack) {
+    if (value === other) {
+      return true;
+    }
+    if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
+      return value !== value && other !== other;
+    }
+    return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
+  }
+
+  /**
+   * A specialized version of `baseIsEqual` for arrays and objects which performs
+   * deep comparisons and tracks traversed objects enabling objects with circular
+   * references to be compared.
+   *
+   * @private
+   * @param {Object} object The object to compare.
+   * @param {Object} other The other object to compare.
+   * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+   * @param {Function} customizer The function to customize comparisons.
+   * @param {Function} equalFunc The function to determine equivalents of values.
+   * @param {Object} [stack] Tracks traversed `object` and `other` objects.
+   * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+   */
+  function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
+    var objIsArr = isArray(object),
+        othIsArr = isArray(other),
+        objTag = objIsArr ? arrayTag : getTag(object),
+        othTag = othIsArr ? arrayTag : getTag(other);
+
+    objTag = objTag == argsTag ? objectTag : objTag;
+    othTag = othTag == argsTag ? objectTag : othTag;
+
+    var objIsObj = objTag == objectTag,
+        othIsObj = othTag == objectTag,
+        isSameTag = objTag == othTag;
+
+    if (isSameTag && isBuffer(object)) {
+      if (!isBuffer(other)) {
+        return false;
+      }
+      objIsArr = true;
+      objIsObj = false;
+    }
+    if (isSameTag && !objIsObj) {
+      stack || (stack = new Stack);
+      return (objIsArr || isTypedArray(object))
+        ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
+        : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
+    }
+    if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
+      var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
+          othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
+
+      if (objIsWrapped || othIsWrapped) {
+        var objUnwrapped = objIsWrapped ? object.value() : object,
+            othUnwrapped = othIsWrapped ? other.value() : other;
+
+        stack || (stack = new Stack);
+        return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
+      }
+    }
+    if (!isSameTag) {
+      return false;
+    }
+    stack || (stack = new Stack);
+    return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
+  }
+
+  /**
+   * The base implementation of `_.isNative` without bad shim checks.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a native function,
+   *  else `false`.
+   */
+  function baseIsNative(value) {
+    if (!isObject(value) || isMasked(value)) {
+      return false;
+    }
+    var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+    return pattern.test(toSource(value));
+  }
+
+  /**
+   * The base implementation of `_.isTypedArray` without Node.js optimizations.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+   */
+  function baseIsTypedArray(value) {
+    return isObjectLike(value) &&
+      isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+  }
+
+  /**
+   * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @returns {Array} Returns the array of property names.
+   */
+  function baseKeys(object) {
+    if (!isPrototype(object)) {
+      return nativeKeys(object);
+    }
+    var result = [];
+    for (var key in Object(object)) {
+      if (hasOwnProperty.call(object, key) && key != 'constructor') {
+        result.push(key);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * A specialized version of `baseIsEqualDeep` for arrays with support for
+   * partial deep comparisons.
+   *
+   * @private
+   * @param {Array} array The array to compare.
+   * @param {Array} other The other array to compare.
+   * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+   * @param {Function} customizer The function to customize comparisons.
+   * @param {Function} equalFunc The function to determine equivalents of values.
+   * @param {Object} stack Tracks traversed `array` and `other` objects.
+   * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
+   */
+  function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
+    var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
+        arrLength = array.length,
+        othLength = other.length;
+
+    if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
+      return false;
+    }
+    // Assume cyclic values are equal.
+    var stacked = stack.get(array);
+    if (stacked && stack.get(other)) {
+      return stacked == other;
+    }
+    var index = -1,
+        result = true,
+        seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;
+
+    stack.set(array, other);
+    stack.set(other, array);
+
+    // Ignore non-index properties.
+    while (++index < arrLength) {
+      var arrValue = array[index],
+          othValue = other[index];
+
+      if (customizer) {
+        var compared = isPartial
+          ? customizer(othValue, arrValue, index, other, array, stack)
+          : customizer(arrValue, othValue, index, array, other, stack);
+      }
+      if (compared !== undefined) {
+        if (compared) {
+          continue;
+        }
+        result = false;
+        break;
+      }
+      // Recursively compare arrays (susceptible to call stack limits).
+      if (seen) {
+        if (!arraySome(other, function(othValue, othIndex) {
+              if (!cacheHas(seen, othIndex) &&
+                  (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
+                return seen.push(othIndex);
+              }
+            })) {
+          result = false;
+          break;
+        }
+      } else if (!(
+            arrValue === othValue ||
+              equalFunc(arrValue, othValue, bitmask, customizer, stack)
+          )) {
+        result = false;
+        break;
+      }
+    }
+    stack['delete'](array);
+    stack['delete'](other);
+    return result;
+  }
+
+  /**
+   * A specialized version of `baseIsEqualDeep` for comparing objects of
+   * the same `toStringTag`.
+   *
+   * **Note:** This function only supports comparing values with tags of
+   * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
+   *
+   * @private
+   * @param {Object} object The object to compare.
+   * @param {Object} other The other object to compare.
+   * @param {string} tag The `toStringTag` of the objects to compare.
+   * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+   * @param {Function} customizer The function to customize comparisons.
+   * @param {Function} equalFunc The function to determine equivalents of values.
+   * @param {Object} stack Tracks traversed `object` and `other` objects.
+   * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+   */
+  function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
+    switch (tag) {
+      case dataViewTag:
+        if ((object.byteLength != other.byteLength) ||
+            (object.byteOffset != other.byteOffset)) {
+          return false;
+        }
+        object = object.buffer;
+        other = other.buffer;
+
+      case arrayBufferTag:
+        if ((object.byteLength != other.byteLength) ||
+            !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
+          return false;
+        }
+        return true;
+
+      case boolTag:
+      case dateTag:
+      case numberTag:
+        // Coerce booleans to `1` or `0` and dates to milliseconds.
+        // Invalid dates are coerced to `NaN`.
+        return eq(+object, +other);
+
+      case errorTag:
+        return object.name == other.name && object.message == other.message;
+
+      case regexpTag:
+      case stringTag:
+        // Coerce regexes to strings and treat strings, primitives and objects,
+        // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
+        // for more details.
+        return object == (other + '');
+
+      case mapTag:
+        var convert = mapToArray;
+
+      case setTag:
+        var isPartial = bitmask & COMPARE_PARTIAL_FLAG;
+        convert || (convert = setToArray);
+
+        if (object.size != other.size && !isPartial) {
+          return false;
+        }
+        // Assume cyclic values are equal.
+        var stacked = stack.get(object);
+        if (stacked) {
+          return stacked == other;
+        }
+        bitmask |= COMPARE_UNORDERED_FLAG;
+
+        // Recursively compare objects (susceptible to call stack limits).
+        stack.set(object, other);
+        var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
+        stack['delete'](object);
+        return result;
+
+      case symbolTag:
+        if (symbolValueOf) {
+          return symbolValueOf.call(object) == symbolValueOf.call(other);
+        }
+    }
+    return false;
+  }
+
+  /**
+   * A specialized version of `baseIsEqualDeep` for objects with support for
+   * partial deep comparisons.
+   *
+   * @private
+   * @param {Object} object The object to compare.
+   * @param {Object} other The other object to compare.
+   * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+   * @param {Function} customizer The function to customize comparisons.
+   * @param {Function} equalFunc The function to determine equivalents of values.
+   * @param {Object} stack Tracks traversed `object` and `other` objects.
+   * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+   */
+  function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
+    var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
+        objProps = getAllKeys(object),
+        objLength = objProps.length,
+        othProps = getAllKeys(other),
+        othLength = othProps.length;
+
+    if (objLength != othLength && !isPartial) {
+      return false;
+    }
+    var index = objLength;
+    while (index--) {
+      var key = objProps[index];
+      if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
+        return false;
+      }
+    }
+    // Assume cyclic values are equal.
+    var stacked = stack.get(object);
+    if (stacked && stack.get(other)) {
+      return stacked == other;
+    }
+    var result = true;
+    stack.set(object, other);
+    stack.set(other, object);
+
+    var skipCtor = isPartial;
+    while (++index < objLength) {
+      key = objProps[index];
+      var objValue = object[key],
+          othValue = other[key];
+
+      if (customizer) {
+        var compared = isPartial
+          ? customizer(othValue, objValue, key, other, object, stack)
+          : customizer(objValue, othValue, key, object, other, stack);
+      }
+      // Recursively compare objects (susceptible to call stack limits).
+      if (!(compared === undefined
+            ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))
+            : compared
+          )) {
+        result = false;
+        break;
+      }
+      skipCtor || (skipCtor = key == 'constructor');
+    }
+    if (result && !skipCtor) {
+      var objCtor = object.constructor,
+          othCtor = other.constructor;
+
+      // Non `Object` object instances with different constructors are not equal.
+      if (objCtor != othCtor &&
+          ('constructor' in object && 'constructor' in other) &&
+          !(typeof objCtor == 'function' && objCtor instanceof objCtor &&
+            typeof othCtor == 'function' && othCtor instanceof othCtor)) {
+        result = false;
+      }
+    }
+    stack['delete'](object);
+    stack['delete'](other);
+    return result;
+  }
+
+  /**
+   * Creates an array of own enumerable property names and symbols of `object`.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @returns {Array} Returns the array of property names and symbols.
+   */
+  function getAllKeys(object) {
+    return baseGetAllKeys(object, keys, getSymbols);
+  }
+
+  /**
+   * Gets the data for `map`.
+   *
+   * @private
+   * @param {Object} map The map to query.
+   * @param {string} key The reference key.
+   * @returns {*} Returns the map data.
+   */
+  function getMapData(map, key) {
+    var data = map.__data__;
+    return isKeyable(key)
+      ? data[typeof key == 'string' ? 'string' : 'hash']
+      : data.map;
+  }
+
+  /**
+   * Gets the native function at `key` of `object`.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @param {string} key The key of the method to get.
+   * @returns {*} Returns the function if it's native, else `undefined`.
+   */
+  function getNative(object, key) {
+    var value = getValue(object, key);
+    return baseIsNative(value) ? value : undefined;
+  }
+
+  /**
+   * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the raw `toStringTag`.
+   */
+  function getRawTag(value) {
+    var isOwn = hasOwnProperty.call(value, symToStringTag),
+        tag = value[symToStringTag];
+
+    try {
+      value[symToStringTag] = undefined;
+      var unmasked = true;
+    } catch (e) {}
+
+    var result = nativeObjectToString.call(value);
+    if (unmasked) {
+      if (isOwn) {
+        value[symToStringTag] = tag;
+      } else {
+        delete value[symToStringTag];
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Creates an array of the own enumerable symbols of `object`.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @returns {Array} Returns the array of symbols.
+   */
+  var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
+    if (object == null) {
+      return [];
+    }
+    object = Object(object);
+    return arrayFilter(nativeGetSymbols(object), function(symbol) {
+      return propertyIsEnumerable.call(object, symbol);
+    });
+  };
+
+  /**
+   * Gets the `toStringTag` of `value`.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the `toStringTag`.
+   */
+  var getTag = baseGetTag;
+
+  // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
+  if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
+      (Map && getTag(new Map) != mapTag) ||
+      (Promise && getTag(Promise.resolve()) != promiseTag) ||
+      (Set && getTag(new Set) != setTag) ||
+      (WeakMap && getTag(new WeakMap) != weakMapTag)) {
+    getTag = function(value) {
+      var result = baseGetTag(value),
+          Ctor = result == objectTag ? value.constructor : undefined,
+          ctorString = Ctor ? toSource(Ctor) : '';
+
+      if (ctorString) {
+        switch (ctorString) {
+          case dataViewCtorString: return dataViewTag;
+          case mapCtorString: return mapTag;
+          case promiseCtorString: return promiseTag;
+          case setCtorString: return setTag;
+          case weakMapCtorString: return weakMapTag;
+        }
+      }
+      return result;
+    };
+  }
+
+  /**
+   * Checks if `value` is a valid array-like index.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
+   * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
+   */
+  function isIndex(value, length) {
+    length = length == null ? MAX_SAFE_INTEGER : length;
+    return !!length &&
+      (typeof value == 'number' || reIsUint.test(value)) &&
+      (value > -1 && value % 1 == 0 && value < length);
+  }
+
+  /**
+   * Checks if `value` is suitable for use as unique object key.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
+   */
+  function isKeyable(value) {
+    var type = typeof value;
+    return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
+      ? (value !== '__proto__')
+      : (value === null);
+  }
+
+  /**
+   * Checks if `func` has its source masked.
+   *
+   * @private
+   * @param {Function} func The function to check.
+   * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+   */
+  function isMasked(func) {
+    return !!maskSrcKey && (maskSrcKey in func);
+  }
+
+  /**
+   * Checks if `value` is likely a prototype object.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
+   */
+  function isPrototype(value) {
+    var Ctor = value && value.constructor,
+        proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
+
+    return value === proto;
+  }
+
+  /**
+   * Converts `value` to a string using `Object.prototype.toString`.
+   *
+   * @private
+   * @param {*} value The value to convert.
+   * @returns {string} Returns the converted string.
+   */
+  function objectToString(value) {
+    return nativeObjectToString.call(value);
+  }
+
+  /**
+   * Converts `func` to its source code.
+   *
+   * @private
+   * @param {Function} func The function to convert.
+   * @returns {string} Returns the source code.
+   */
+  function toSource(func) {
+    if (func != null) {
+      try {
+        return funcToString.call(func);
+      } catch (e) {}
+      try {
+        return (func + '');
+      } catch (e) {}
+    }
+    return '';
+  }
+
+  /**
+   * Performs a
+   * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+   * comparison between two values to determine if they are equivalent.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to compare.
+   * @param {*} other The other value to compare.
+   * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+   * @example
+   *
+   * var object = { 'a': 1 };
+   * var other = { 'a': 1 };
+   *
+   * _.eq(object, object);
+   * // => true
+   *
+   * _.eq(object, other);
+   * // => false
+   *
+   * _.eq('a', 'a');
+   * // => true
+   *
+   * _.eq('a', Object('a'));
+   * // => false
+   *
+   * _.eq(NaN, NaN);
+   * // => true
+   */
+  function eq(value, other) {
+    return value === other || (value !== value && other !== other);
+  }
+
+  /**
+   * Checks if `value` is likely an `arguments` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+   *  else `false`.
+   * @example
+   *
+   * _.isArguments(function() { return arguments; }());
+   * // => true
+   *
+   * _.isArguments([1, 2, 3]);
+   * // => false
+   */
+  var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
+    return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
+      !propertyIsEnumerable.call(value, 'callee');
+  };
+
+  /**
+   * Checks if `value` is classified as an `Array` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+   * @example
+   *
+   * _.isArray([1, 2, 3]);
+   * // => true
+   *
+   * _.isArray(document.body.children);
+   * // => false
+   *
+   * _.isArray('abc');
+   * // => false
+   *
+   * _.isArray(_.noop);
+   * // => false
+   */
+  var isArray = Array.isArray;
+
+  /**
+   * Checks if `value` is array-like. A value is considered array-like if it's
+   * not a function and has a `value.length` that's an integer greater than or
+   * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+   * @example
+   *
+   * _.isArrayLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isArrayLike(document.body.children);
+   * // => true
+   *
+   * _.isArrayLike('abc');
+   * // => true
+   *
+   * _.isArrayLike(_.noop);
+   * // => false
+   */
+  function isArrayLike(value) {
+    return value != null && isLength(value.length) && !isFunction(value);
+  }
+
+  /**
+   * Checks if `value` is a buffer.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.3.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
+   * @example
+   *
+   * _.isBuffer(new Buffer(2));
+   * // => true
+   *
+   * _.isBuffer(new Uint8Array(2));
+   * // => false
+   */
+  var isBuffer = nativeIsBuffer || stubFalse;
+
+  /**
+   * Performs a deep comparison between two values to determine if they are
+   * equivalent.
+   *
+   * **Note:** This method supports comparing arrays, array buffers, booleans,
+   * date objects, error objects, maps, numbers, `Object` objects, regexes,
+   * sets, strings, symbols, and typed arrays. `Object` objects are compared
+   * by their own, not inherited, enumerable properties. Functions and DOM
+   * nodes are compared by strict equality, i.e. `===`.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to compare.
+   * @param {*} other The other value to compare.
+   * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+   * @example
+   *
+   * var object = { 'a': 1 };
+   * var other = { 'a': 1 };
+   *
+   * _.isEqual(object, other);
+   * // => true
+   *
+   * object === other;
+   * // => false
+   */
+  function isEqual(value, other) {
+    return baseIsEqual(value, other);
+  }
+
+  /**
+   * Checks if `value` is classified as a `Function` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+   * @example
+   *
+   * _.isFunction(_);
+   * // => true
+   *
+   * _.isFunction(/abc/);
+   * // => false
+   */
+  function isFunction(value) {
+    if (!isObject(value)) {
+      return false;
+    }
+    // The use of `Object#toString` avoids issues with the `typeof` operator
+    // in Safari 9 which returns 'object' for typed arrays and other constructors.
+    var tag = baseGetTag(value);
+    return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+  }
+
+  /**
+   * Checks if `value` is a valid array-like length.
+   *
+   * **Note:** This method is loosely based on
+   * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+   * @example
+   *
+   * _.isLength(3);
+   * // => true
+   *
+   * _.isLength(Number.MIN_VALUE);
+   * // => false
+   *
+   * _.isLength(Infinity);
+   * // => false
+   *
+   * _.isLength('3');
+   * // => false
+   */
+  function isLength(value) {
+    return typeof value == 'number' &&
+      value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+  }
+
+  /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+  function isObject(value) {
+    var type = typeof value;
+    return value != null && (type == 'object' || type == 'function');
+  }
+
+  /**
+   * Checks if `value` is object-like. A value is object-like if it's not `null`
+   * and has a `typeof` result of "object".
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+   * @example
+   *
+   * _.isObjectLike({});
+   * // => true
+   *
+   * _.isObjectLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isObjectLike(_.noop);
+   * // => false
+   *
+   * _.isObjectLike(null);
+   * // => false
+   */
+  function isObjectLike(value) {
+    return value != null && typeof value == 'object';
+  }
+
+  /**
+   * Checks if `value` is classified as a typed array.
+   *
+   * @static
+   * @memberOf _
+   * @since 3.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+   * @example
+   *
+   * _.isTypedArray(new Uint8Array);
+   * // => true
+   *
+   * _.isTypedArray([]);
+   * // => false
+   */
+  var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+
+  /**
+   * Creates an array of the own enumerable property names of `object`.
+   *
+   * **Note:** Non-object values are coerced to objects. See the
+   * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
+   * for more details.
+   *
+   * @static
+   * @since 0.1.0
+   * @memberOf _
+   * @category Object
+   * @param {Object} object The object to query.
+   * @returns {Array} Returns the array of property names.
+   * @example
+   *
+   * function Foo() {
+   *   this.a = 1;
+   *   this.b = 2;
+   * }
+   *
+   * Foo.prototype.c = 3;
+   *
+   * _.keys(new Foo);
+   * // => ['a', 'b'] (iteration order is not guaranteed)
+   *
+   * _.keys('hi');
+   * // => ['0', '1']
+   */
+  function keys(object) {
+    return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
+  }
+
+  /**
+   * This method returns a new empty array.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.13.0
+   * @category Util
+   * @returns {Array} Returns the new empty array.
+   * @example
+   *
+   * var arrays = _.times(2, _.stubArray);
+   *
+   * console.log(arrays);
+   * // => [[], []]
+   *
+   * console.log(arrays[0] === arrays[1]);
+   * // => false
+   */
+  function stubArray() {
+    return [];
+  }
+
+  /**
+   * This method returns `false`.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.13.0
+   * @category Util
+   * @returns {boolean} Returns `false`.
+   * @example
+   *
+   * _.times(2, _.stubFalse);
+   * // => [false, false]
+   */
+  function stubFalse() {
+    return false;
+  }
+
+  module.exports = isEqual;
+  });
+
+  /**
+   * lodash (Custom Build) <https://lodash.com/>
+   * Build: `lodash modularize exports="npm" -o ./`
+   * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+   * Released under MIT license <https://lodash.com/license>
+   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+   * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+   */
+
+  /** Used as references for various `Number` constants. */
+  var INFINITY = 1 / 0,
+      MAX_SAFE_INTEGER = 9007199254740991;
+
+  /** `Object#toString` result references. */
+  var argsTag = '[object Arguments]',
+      funcTag = '[object Function]',
+      genTag = '[object GeneratorFunction]',
+      symbolTag = '[object Symbol]';
+
+  /** Detect free variable `global` from Node.js. */
+  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+  /** Detect free variable `self`. */
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  /** Used as a reference to the global object. */
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  /**
+   * A faster alternative to `Function#apply`, this function invokes `func`
+   * with the `this` binding of `thisArg` and the arguments of `args`.
+   *
+   * @private
+   * @param {Function} func The function to invoke.
+   * @param {*} thisArg The `this` binding of `func`.
+   * @param {Array} args The arguments to invoke `func` with.
+   * @returns {*} Returns the result of `func`.
+   */
+  function apply(func, thisArg, args) {
+    switch (args.length) {
+      case 0: return func.call(thisArg);
+      case 1: return func.call(thisArg, args[0]);
+      case 2: return func.call(thisArg, args[0], args[1]);
+      case 3: return func.call(thisArg, args[0], args[1], args[2]);
+    }
+    return func.apply(thisArg, args);
+  }
+
+  /**
+   * A specialized version of `_.map` for arrays without support for iteratee
+   * shorthands.
+   *
+   * @private
+   * @param {Array} [array] The array to iterate over.
+   * @param {Function} iteratee The function invoked per iteration.
+   * @returns {Array} Returns the new mapped array.
+   */
+  function arrayMap(array, iteratee) {
+    var index = -1,
+        length = array ? array.length : 0,
+        result = Array(length);
+
+    while (++index < length) {
+      result[index] = iteratee(array[index], index, array);
+    }
+    return result;
+  }
+
+  /**
+   * Appends the elements of `values` to `array`.
+   *
+   * @private
+   * @param {Array} array The array to modify.
+   * @param {Array} values The values to append.
+   * @returns {Array} Returns `array`.
+   */
+  function arrayPush(array, values) {
+    var index = -1,
+        length = values.length,
+        offset = array.length;
+
+    while (++index < length) {
+      array[offset + index] = values[index];
+    }
+    return array;
+  }
+
+  /** Used for built-in method references. */
+  var objectProto = Object.prototype;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty = objectProto.hasOwnProperty;
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var objectToString = objectProto.toString;
+
+  /** Built-in value references. */
+  var Symbol = root.Symbol,
+      propertyIsEnumerable = objectProto.propertyIsEnumerable,
+      spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
+
+  /* Built-in method references for those with the same name as other `lodash` methods. */
+  var nativeMax = Math.max;
+
+  /**
+   * The base implementation of `_.flatten` with support for restricting flattening.
+   *
+   * @private
+   * @param {Array} array The array to flatten.
+   * @param {number} depth The maximum recursion depth.
+   * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
+   * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
+   * @param {Array} [result=[]] The initial result value.
+   * @returns {Array} Returns the new flattened array.
+   */
+  function baseFlatten(array, depth, predicate, isStrict, result) {
+    var index = -1,
+        length = array.length;
+
+    predicate || (predicate = isFlattenable);
+    result || (result = []);
+
+    while (++index < length) {
+      var value = array[index];
+      if (depth > 0 && predicate(value)) {
+        if (depth > 1) {
+          // Recursively flatten arrays (susceptible to call stack limits).
+          baseFlatten(value, depth - 1, predicate, isStrict, result);
+        } else {
+          arrayPush(result, value);
+        }
+      } else if (!isStrict) {
+        result[result.length] = value;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * The base implementation of `_.pick` without support for individual
+   * property identifiers.
+   *
+   * @private
+   * @param {Object} object The source object.
+   * @param {string[]} props The property identifiers to pick.
+   * @returns {Object} Returns the new object.
+   */
+  function basePick(object, props) {
+    object = Object(object);
+    return basePickBy(object, props, function(value, key) {
+      return key in object;
+    });
+  }
+
+  /**
+   * The base implementation of  `_.pickBy` without support for iteratee shorthands.
+   *
+   * @private
+   * @param {Object} object The source object.
+   * @param {string[]} props The property identifiers to pick from.
+   * @param {Function} predicate The function invoked per property.
+   * @returns {Object} Returns the new object.
+   */
+  function basePickBy(object, props, predicate) {
+    var index = -1,
+        length = props.length,
+        result = {};
+
+    while (++index < length) {
+      var key = props[index],
+          value = object[key];
+
+      if (predicate(value, key)) {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * The base implementation of `_.rest` which doesn't validate or coerce arguments.
+   *
+   * @private
+   * @param {Function} func The function to apply a rest parameter to.
+   * @param {number} [start=func.length-1] The start position of the rest parameter.
+   * @returns {Function} Returns the new function.
+   */
+  function baseRest(func, start) {
+    start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
+    return function() {
+      var args = arguments,
+          index = -1,
+          length = nativeMax(args.length - start, 0),
+          array = Array(length);
+
+      while (++index < length) {
+        array[index] = args[start + index];
+      }
+      index = -1;
+      var otherArgs = Array(start + 1);
+      while (++index < start) {
+        otherArgs[index] = args[index];
+      }
+      otherArgs[start] = array;
+      return apply(func, this, otherArgs);
+    };
+  }
+
+  /**
+   * Checks if `value` is a flattenable `arguments` object or array.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
+   */
+  function isFlattenable(value) {
+    return isArray(value) || isArguments(value) ||
+      !!(spreadableSymbol && value && value[spreadableSymbol]);
+  }
+
+  /**
+   * Converts `value` to a string key if it's not a string or symbol.
+   *
+   * @private
+   * @param {*} value The value to inspect.
+   * @returns {string|symbol} Returns the key.
+   */
+  function toKey(value) {
+    if (typeof value == 'string' || isSymbol(value)) {
+      return value;
+    }
+    var result = (value + '');
+    return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+  }
+
+  /**
+   * Checks if `value` is likely an `arguments` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+   *  else `false`.
+   * @example
+   *
+   * _.isArguments(function() { return arguments; }());
+   * // => true
+   *
+   * _.isArguments([1, 2, 3]);
+   * // => false
+   */
+  function isArguments(value) {
+    // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
+    return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
+      (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
+  }
+
+  /**
+   * Checks if `value` is classified as an `Array` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+   * @example
+   *
+   * _.isArray([1, 2, 3]);
+   * // => true
+   *
+   * _.isArray(document.body.children);
+   * // => false
+   *
+   * _.isArray('abc');
+   * // => false
+   *
+   * _.isArray(_.noop);
+   * // => false
+   */
+  var isArray = Array.isArray;
+
+  /**
+   * Checks if `value` is array-like. A value is considered array-like if it's
+   * not a function and has a `value.length` that's an integer greater than or
+   * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+   * @example
+   *
+   * _.isArrayLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isArrayLike(document.body.children);
+   * // => true
+   *
+   * _.isArrayLike('abc');
+   * // => true
+   *
+   * _.isArrayLike(_.noop);
+   * // => false
+   */
+  function isArrayLike(value) {
+    return value != null && isLength(value.length) && !isFunction(value);
+  }
+
+  /**
+   * This method is like `_.isArrayLike` except that it also checks if `value`
+   * is an object.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an array-like object,
+   *  else `false`.
+   * @example
+   *
+   * _.isArrayLikeObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isArrayLikeObject(document.body.children);
+   * // => true
+   *
+   * _.isArrayLikeObject('abc');
+   * // => false
+   *
+   * _.isArrayLikeObject(_.noop);
+   * // => false
+   */
+  function isArrayLikeObject(value) {
+    return isObjectLike(value) && isArrayLike(value);
+  }
+
+  /**
+   * Checks if `value` is classified as a `Function` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+   * @example
+   *
+   * _.isFunction(_);
+   * // => true
+   *
+   * _.isFunction(/abc/);
+   * // => false
+   */
+  function isFunction(value) {
+    // The use of `Object#toString` avoids issues with the `typeof` operator
+    // in Safari 8-9 which returns 'object' for typed array and other constructors.
+    var tag = isObject(value) ? objectToString.call(value) : '';
+    return tag == funcTag || tag == genTag;
+  }
+
+  /**
+   * Checks if `value` is a valid array-like length.
+   *
+   * **Note:** This method is loosely based on
+   * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+   * @example
+   *
+   * _.isLength(3);
+   * // => true
+   *
+   * _.isLength(Number.MIN_VALUE);
+   * // => false
+   *
+   * _.isLength(Infinity);
+   * // => false
+   *
+   * _.isLength('3');
+   * // => false
+   */
+  function isLength(value) {
+    return typeof value == 'number' &&
+      value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+  }
+
+  /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+  function isObject(value) {
+    var type = typeof value;
+    return !!value && (type == 'object' || type == 'function');
+  }
+
+  /**
+   * Checks if `value` is object-like. A value is object-like if it's not `null`
+   * and has a `typeof` result of "object".
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+   * @example
+   *
+   * _.isObjectLike({});
+   * // => true
+   *
+   * _.isObjectLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isObjectLike(_.noop);
+   * // => false
+   *
+   * _.isObjectLike(null);
+   * // => false
+   */
+  function isObjectLike(value) {
+    return !!value && typeof value == 'object';
+  }
+
+  /**
+   * Checks if `value` is classified as a `Symbol` primitive or object.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+   * @example
+   *
+   * _.isSymbol(Symbol.iterator);
+   * // => true
+   *
+   * _.isSymbol('abc');
+   * // => false
+   */
+  function isSymbol(value) {
+    return typeof value == 'symbol' ||
+      (isObjectLike(value) && objectToString.call(value) == symbolTag);
+  }
+
+  /**
+   * Creates an object composed of the picked `object` properties.
+   *
+   * @static
+   * @since 0.1.0
+   * @memberOf _
+   * @category Object
+   * @param {Object} object The source object.
+   * @param {...(string|string[])} [props] The property identifiers to pick.
+   * @returns {Object} Returns the new object.
+   * @example
+   *
+   * var object = { 'a': 1, 'b': '2', 'c': 3 };
+   *
+   * _.pick(object, ['a', 'c']);
+   * // => { 'a': 1, 'c': 3 }
+   */
+  var pick = baseRest(function(object, props) {
+    return object == null ? {} : basePick(object, arrayMap(baseFlatten(props, 1), toKey));
+  });
+
+  var lodash_pick = pick;
+
+  function useFetchZones(params) {
+      const [fetchZones, resource] = adminServices.useResource({
+          fetchResource: getZones,
+          initialValue: [],
+          context: params.context,
+          resourceName: 'Banner zones',
+      });
+      compositionApi.onMounted(() => {
+          fetchZones();
+      });
+      return resource;
+  }
+
+  var Status;
+  (function (Status) {
+      Status["Waiting"] = "WAITING";
+      Status["Archived"] = "ARCHIVED";
+      Status["Active"] = "ACTIVE";
+      Status["Disabled"] = "DISABLED";
+  })(Status || (Status = {}));
+
+  function getStatus(type, t) {
+      switch (type) {
+          case Status.Waiting:
+              return t('banners:statuses.waiting');
+          case Status.Archived:
+              return t('banners:statuses.archived');
+          case Status.Active:
+              return t('banners:statuses.active');
+          case Status.Disabled:
+              return t('banners:statuses.disabled');
+          default:
+              return '';
+      }
+  }
+  function getColumnDefs$1(t) {
+      return [
+          {
+              id: 0,
+              name: '#',
+              field: 'id',
+              style: { width: '50px', textAlign: 'center' },
+              headStyle: { width: '50px', textAlign: 'center' },
           },
-          pageTitle() {
-              return this.bannerArea ? `"${this.bannerArea.label}" banners` : 'Banners';
+          {
+              id: 1,
+              name: t('banners:zone'),
+              field: 'bannerZone',
+              format: ({ row }) => row.bannerZone ? row.bannerZone : t('banners:bannerZoneIsDeleted'),
           },
-      },
-      watch: {
-          areaAlias() {
-              this.refreshBannerItemList();
+          {
+              id: 2,
+              name: t('banners:status'),
+              field: 'status',
+              format: ({ row }) => getStatus(row.status, t),
+              style: { width: '120px' },
+              headStyle: { width: '120px' },
           },
-      },
-      mounted() {
-          this.refreshBannerItemList();
-      },
-      methods: {
-          refreshBannerItemList() {
-              this.isRowDataLoading = true;
-              return getBannerAreaByAlias(this.areaAlias)
-                  .then((response) => {
-                  this.bannerArea = response.data;
-                  return getBannerItemList(this.bannerArea.id);
-              })
-                  .then((response) => {
-                  this.rowData = response.data;
-                  this.errorMessage = null;
-              })
-                  .catch((error) => {
-                  console.error(error);
-                  this.rowData = [];
-                  this.errorMessage = adminServices.getMessageFromError(error);
-              })
-                  .finally(() => {
-                  this.isRowDataLoading = false;
-              });
+          {
+              id: 3,
+              name: t('banners:period'),
+              field: 'dateStart',
+              format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
           },
-          moveBannerItem(bannerItemId, direction) {
-              this.isBannerItemMoving = true;
-              moveBannerItem(bannerItemId, direction)
-                  .then((response) => {
-                  if (response.success) {
-                      return this.refreshBannerItemList();
-                  }
-              })
-                  .catch(console.error)
-                  .finally(() => {
-                  this.isBannerItemMoving = false;
-              });
+          {
+              id: 4,
+              name: t('banners:image'),
+              field: 'image',
+              type: 'image',
           },
-          handleBannerItemDelete(bannerItem) {
-              const shouldDeleteBannerItem = confirm(`Are you sure you want to delete banner item "${bannerItem.title}"`);
-              if (shouldDeleteBannerItem) {
-                  this.deletingBannerItemIdList.push(bannerItem.id);
-                  deleteBannerItem(bannerItem.id)
-                      .then((response) => {
-                      if (response.success) {
-                          this.refreshBannerItemList().then(() => {
-                              this.deletingBannerItemIdList.filter((id) => id !== bannerItem.id);
-                          });
-                          this.$toast({
-                              variant: 'success',
-                              title: 'Success',
-                              body: 'Banner Item was successfully removed',
-                          });
-                      }
-                      else {
-                          this.$toast({
-                              variant: 'danger',
-                              title: 'Error',
-                              body: 'Banner Item deletion was failed',
-                          });
-                      }
-                  })
-                      .catch((error) => {
-                      console.error(error);
-                      this.$toast({
-                          variant: 'danger',
-                          title: 'Error',
-                          body: 'Banner Item deletion was failed',
-                      });
+          {
+              id: 5,
+              name: t('banners:link'),
+              field: 'link',
+              type: 'name',
+              format: ({ row }) => {
+                  var _a, _b;
+                  return ({
+                      adminLink: {
+                          url: (_a = row.link) !== null && _a !== void 0 ? _a : '',
+                          text: (_b = row.link) !== null && _b !== void 0 ? _b : '',
+                      },
+                      paramList: [
+                          {
+                              name: t('banners:newTab'),
+                              value: row.openNewTab ? t('banners:yes') : t('banners:no'),
+                          },
+                      ],
                   });
-              }
+              },
           },
-          getLinkToBannerItemForm(bannerItemId) {
-              var _a, _b;
-              return getBannerItemFormUrl({
-                  areaAlias: (_b = (_a = this.bannerArea) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : 'unknowm',
-                  itemId: bannerItemId,
-              });
+          {
+              id: 6,
+              name: t('banners:comment'),
+              field: 'comment',
+          },
+          {
+              id: 7,
+              name: t('banners:actions'),
+              field: 'actions',
+              style: { whiteSpace: 'nowrap', width: '100px' },
+              headStyle: { whiteSpace: 'nowrap', width: '100px' },
           },
+      ];
+  }
+
+  var FilterTypes;
+  (function (FilterTypes) {
+      FilterTypes["Zone"] = "zone";
+      FilterTypes["Date"] = "date";
+      FilterTypes["Status"] = "status";
+  })(FilterTypes || (FilterTypes = {}));
+  function useAdvancedSearch({ context, t, zoneList }) {
+      /** Zone **/
+      const zonesOptionList = compositionApi.computed(() => zoneList.value.map(({ id, name }) => ({
+          value: id,
+          label: name,
+      })));
+      const initialZoneFilter = compositionApi.computed(() => {
+          const queryValue = adminUi.getFilterParamAsStringArray(context.root.$route.query, FilterTypes.Zone);
+          return zonesOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+      });
+      const zoneFilter = compositionApi.ref(initialZoneFilter.value);
+      compositionApi.watch(initialZoneFilter, () => {
+          zoneFilter.value = initialZoneFilter.value;
+      });
+      /** Date **/
+      const initialDateFilter = compositionApi.computed(() => { var _a; return (_a = adminUi.getFilterParamAsString(context.root.$route.query, FilterTypes.Date)) !== null && _a !== void 0 ? _a : ''; });
+      const dateFilter = compositionApi.ref(initialDateFilter.value);
+      compositionApi.watch(initialDateFilter, () => {
+          dateFilter.value = initialDateFilter.value;
+      });
+      /** Status **/
+      const statusesOptionList = compositionApi.computed(() => Object.entries(Status).map(([_, value]) => ({
+          value: value,
+          label: getStatus(value, t),
+      })));
+      const initialStatusFilter = compositionApi.computed(() => {
+          const queryValue = adminUi.getFilterParamAsStringArray(context.root.$route.query, FilterTypes.Status);
+          return statusesOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+      });
+      const statusFilter = compositionApi.ref(initialStatusFilter.value);
+      compositionApi.watch(initialStatusFilter, () => {
+          statusFilter.value = initialStatusFilter.value;
+      });
+      /** Params **/
+      const filterParams = compositionApi.computed(() => adminUi.getFilterParams({
+          [FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
+          [FilterTypes.Date]: dateFilter.value,
+          [FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
+      }));
+      /** Tag removal handler **/
+      const tagRemovalHandler = (event) => {
+          if (event.name === FilterTypes.Zone) {
+              zoneFilter.value = zoneFilter.value.filter(({ value }) => value !== event.value);
+          }
+          if (event.name === FilterTypes.Date) {
+              dateFilter.value = '';
+          }
+          if (event.name === FilterTypes.Status) {
+              statusFilter.value = statusFilter.value.filter(({ value }) => value !== event.value);
+          }
+      };
+      /** Tags **/
+      const tags = compositionApi.computed(() => []);
+      return {
+          zoneFilter,
+          zonesOptionList,
+          dateFilter,
+          statusFilter,
+          statusesOptionList,
+          filterParams,
+          tags,
+          tagRemovalHandler,
+      };
+  }
+
+  var script$1 = compositionApi.defineComponent({
+      name: 'BannerList',
+      setup(props, context) {
+          const { t } = adminUi.useTranslation(context);
+          const { loading: isZonesLoading, data: zoneList } = useFetchZones({
+              context,
+          });
+          const { zoneFilter, zonesOptionList, dateFilter, statusFilter, statusesOptionList, filterParams, tags, tagRemovalHandler, } = useAdvancedSearch({
+              context,
+              t,
+              zoneList,
+          });
+          const { fetchEntityList: fetchBanners, isLoading: isBannersLoading, rowData, errorMessage, handleChange, searchQuery, pageNumber, pageCount, pageSize, } = adminUi.useDataTable({
+              fetchEntityList: (params) => getBanners(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
+              initialValue: [],
+              context,
+              resourceName: 'Banners',
+          });
+          compositionApi.watch(filterParams, () => {
+              if (isZonesLoading.value) {
+                  return;
+              }
+              const newQuery = Object.assign(Object.assign({}, lodash_pick(context.root.$route.query, ['query', 'pageNumber'])), filterParams.value);
+              if (!lodash_isequal(context.root.$route.query, newQuery)) {
+                  context.root.$router.replace({ query: newQuery });
+                  fetchBanners();
+              }
+          });
+          const { isDeleting, handleResourceDelete } = adminServices.useResourceDelete({
+              deleteResource: deleteBanner,
+              resourceName: 'Banner',
+              onSuccess: fetchBanners,
+              context,
+          });
+          const isBusy = (bannerId) => {
+              return isDeleting(bannerId) || isBannersLoading.value;
+          };
+          const columnDefs = compositionApi.computed(() => getColumnDefs$1(context.root.$t));
+          const isRowDataLoading = compositionApi.computed(() => isBannersLoading.value || isZonesLoading.value);
+          return {
+              columnDefs,
+              isRowDataLoading,
+              rowData,
+              errorMessage,
+              handleChange,
+              getBannersBannerFormUrl,
+              searchQuery,
+              pageNumber,
+              pageCount,
+              pageSize,
+              isBusy,
+              handleResourceDelete,
+              // Advanced search
+              zoneFilter,
+              zonesOptionList,
+              dateFilter,
+              statusFilter,
+              statusesOptionList,
+              tags,
+              tagRemovalHandler,
+          };
       },
   });
 
+  const isOldIE = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector(context) {
+      return (id, style) => addStyle(id, style);
+  }
+  let HEAD;
+  const styles = {};
+  function addStyle(id, css) {
+      const group = isOldIE ? css.media || 'default' : id;
+      const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          let code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  style.element.setAttribute('media', css.media);
+              if (HEAD === undefined) {
+                  HEAD = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              const index = style.ids.size - 1;
+              const textNode = document.createTextNode(code);
+              const nodes = style.element.childNodes;
+              if (nodes[index])
+                  style.element.removeChild(nodes[index]);
+              if (nodes.length)
+                  style.element.insertBefore(textNode, nodes[index]);
+              else
+                  style.element.appendChild(textNode);
+          }
+      }
+  }
+
   /* script */
-  const __vue_script__$2 = script$2;
+  const __vue_script__$1 = script$1;
 
   /* template */
-  var __vue_render__$2 = function () {
+  var __vue_render__$1 = function () {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c("page", {
       attrs: {
-        title: _vm.pageTitle,
+        title: _vm.$t("banners:banners"),
         "header-buttons": [
           {
-            text: "New Banner Item",
-            href: _vm.getLinkToBannerItemForm("create"),
+            text: _vm.$t("banners:createBanner"),
+            href: _vm.getBannersBannerFormUrl({ bannerId: "create" }),
           },
         ],
       },
@@ -804,72 +3028,116 @@
           key: "content",
           fn: function () {
             return [
-              _c("base-table", {
+              _c("data-table", {
                 attrs: {
                   "column-defs": _vm.columnDefs,
                   "row-data": _vm.rowData,
                   loading: _vm.isRowDataLoading,
                   "error-message": _vm.errorMessage,
-                  enumerable: "",
+                  "data-table": "banners",
+                  "use-search": true,
+                  "use-pagination": true,
+                  "search-query": _vm.searchQuery,
+                  pagination: {
+                    pageNumber: _vm.pageNumber,
+                    pageCount: _vm.pageCount,
+                    pageSize: _vm.pageSize,
+                    disabled: _vm.isRowDataLoading,
+                  },
                 },
+                on: { change: _vm.handleChange },
                 scopedSlots: _vm._u([
                   {
-                    key: "cell(actions)",
-                    fn: function (ref) {
-                      var row = ref.row;
-                      var rowIndex = ref.rowIndex;
+                    key: "filters",
+                    fn: function () {
                       return [
                         _c(
-                          "base-button",
-                          {
-                            attrs: {
-                              variant: "icon",
-                              title: "Edit",
-                              disabled: _vm.deletingBannerItemIdList.includes(
-                                row.id
-                              ),
-                              href: _vm.getLinkToBannerItemForm(row.id),
-                            },
-                          },
-                          [_c("svg-icon", { attrs: { name: "edit" } })],
-                          1
-                        ),
-                        _vm._v(" "),
-                        _c(
-                          "base-button",
+                          "advanced-search",
                           {
-                            attrs: {
-                              variant: "icon",
-                              title: "Move up",
-                              disabled: rowIndex === 0 || _vm.isBannerItemMoving,
-                            },
-                            on: {
-                              click: function ($event) {
-                                return _vm.moveBannerItem(row.id, "up")
-                              },
-                            },
+                            attrs: { tags: _vm.tags },
+                            on: { "click:tag": _vm.tagRemovalHandler },
                           },
-                          [_c("svg-icon", { attrs: { name: "north" } })],
-                          1
+                          [
+                            _c(
+                              "div",
+                              { staticClass: "filters" },
+                              [
+                                _c("form-field-multi-select", {
+                                  staticClass: "filter",
+                                  attrs: {
+                                    options: _vm.zonesOptionList,
+                                    name: "zoneFilter",
+                                    searchable: true,
+                                    label: _vm.$t("banners:zone"),
+                                  },
+                                  model: {
+                                    value: _vm.zoneFilter,
+                                    callback: function ($$v) {
+                                      _vm.zoneFilter = $$v;
+                                    },
+                                    expression: "zoneFilter",
+                                  },
+                                }),
+                                _vm._v(" "),
+                                _c("form-field", {
+                                  staticClass: "filter",
+                                  attrs: {
+                                    label: _vm.$t("banners:date"),
+                                    name: "dateFilter",
+                                    type: "date",
+                                  },
+                                  model: {
+                                    value: _vm.dateFilter,
+                                    callback: function ($$v) {
+                                      _vm.dateFilter = $$v;
+                                    },
+                                    expression: "dateFilter",
+                                  },
+                                }),
+                                _vm._v(" "),
+                                _c("form-field-multi-select", {
+                                  staticClass: "filter",
+                                  attrs: {
+                                    options: _vm.statusesOptionList,
+                                    name: "statusFilter",
+                                    searchable: true,
+                                    label: _vm.$t("banners:status"),
+                                  },
+                                  model: {
+                                    value: _vm.statusFilter,
+                                    callback: function ($$v) {
+                                      _vm.statusFilter = $$v;
+                                    },
+                                    expression: "statusFilter",
+                                  },
+                                }),
+                              ],
+                              1
+                            ),
+                          ]
                         ),
-                        _vm._v(" "),
+                      ]
+                    },
+                    proxy: true,
+                  },
+                  {
+                    key: "cell(actions)",
+                    fn: function (ref) {
+                      var row = ref.row;
+                      return [
                         _c(
                           "base-button",
                           {
                             attrs: {
                               variant: "icon",
-                              title: "Move down",
-                              disabled:
-                                rowIndex === _vm.rowData.length - 1 ||
-                                _vm.isBannerItemMoving,
-                            },
-                            on: {
-                              click: function ($event) {
-                                return _vm.moveBannerItem(row.id, "down")
-                              },
+                              title: _vm.$t("banners:edit"),
+                              disabled: _vm.isBusy(row.id),
+                              href: _vm.getBannersBannerFormUrl({
+                                bannerId: row.id,
+                              }),
                             },
                           },
-                          [_c("svg-icon", { attrs: { name: "south" } })],
+                          [_c("svg-icon", { attrs: { name: "edit" } })],
                           1
                         ),
                         _vm._v(" "),
@@ -878,14 +3146,12 @@
                           {
                             attrs: {
                               variant: "icon",
-                              title: "Remove",
-                              disabled: _vm.deletingBannerItemIdList.includes(
-                                row.id
-                              ),
+                              title: _vm.$t("banners:remove"),
+                              disabled: _vm.isBusy(row.id),
                             },
                             on: {
                               click: function ($event) {
-                                return _vm.handleBannerItemDelete(row)
+                                return _vm.handleResourceDelete(row.id)
                               },
                             },
                           },
@@ -904,169 +3170,175 @@
       ]),
     })
   };
-  var __vue_staticRenderFns__$2 = [];
-  __vue_render__$2._withStripped = true;
+  var __vue_staticRenderFns__$1 = [];
+  __vue_render__$1._withStripped = true;
 
     /* style */
-    const __vue_inject_styles__$2 = function (inject) {
+    const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-647d49db_0", { source: "\n\n/*# sourceMappingURL=BannerItemList.vue.map */", map: {"version":3,"sources":["BannerItemList.vue"],"names":[],"mappings":";;AAEA,6CAA6C","file":"BannerItemList.vue"}, media: undefined });
+      inject("data-v-92c7e846_0", { source: ".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n/*# sourceMappingURL=BannerList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerList/BannerList.vue","BannerList.vue"],"names":[],"mappings":"AA0NA;EACA,aAAA;EACA,eAAA;ACzNA;AD2NA;EACA,gBAAA;ACzNA;AD4NA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;AC1NA;;AAEA,yCAAyC","file":"BannerList.vue","sourcesContent":["<template>\n  <page\n    :title=\"$t('banners:banners')\"\n    :header-buttons=\"[\n      {\n        text: $t('banners:createBanner'),\n        href: getBannersBannerFormUrl({ bannerId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs=\"columnDefs\"\n        :row-data=\"rowData\"\n        :loading=\"isRowDataLoading\"\n        :error-message=\"errorMessage\"\n        data-table=\"banners\"\n        :use-search=\"true\"\n        :use-pagination=\"true\"\n        :search-query=\"searchQuery\"\n        :pagination=\"{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }\"\n        @change=\"handleChange\"\n      >\n        <template v-slot:filters>\n          <advanced-search :tags=\"tags\" @click:tag=\"tagRemovalHandler\">\n            <div class=\"filters\">\n              <form-field-multi-select\n                v-model=\"zoneFilter\"\n                :options=\"zonesOptionList\"\n                name=\"zoneFilter\"\n                :searchable=\"true\"\n                :label=\"$t('banners:zone')\"\n                class=\"filter\"\n              />\n\n              <form-field\n                v-model=\"dateFilter\"\n                :label=\"$t('banners:date')\"\n                name=\"dateFilter\"\n                type=\"date\"\n                class=\"filter\"\n              />\n\n              <form-field-multi-select\n                v-model=\"statusFilter\"\n                :options=\"statusesOptionList\"\n                name=\"statusFilter\"\n                :searchable=\"true\"\n                :label=\"$t('banners:status')\"\n                class=\"filter\"\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(actions)=\"{ row }\">\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('banners:edit')\"\n            :disabled=\"isBusy(row.id)\"\n            :href=\"getBannersBannerFormUrl({ bannerId: row.id })\"\n          >\n            <svg-icon name=\"edit\" />\n          </base-button>\n\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('banners:remove')\"\n            :disabled=\"isBusy(row.id)\"\n            @click=\"handleResourceDelete(row.id)\"\n          >\n            <svg-icon name=\"delete\" />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  useDataTable,\n  useTranslation,\n} from '@tager/admin-ui';\nimport { useResourceDelete } from '@tager/admin-services';\n\nimport { deleteBanner, getBanners } from '../../../services/requests';\nimport { Banner } from '../../../typings/banners';\nimport { getBannersBannerFormUrl } from '../../../constants/paths';\nimport { useFetchZones } from '../../../hooks';\n\nimport { getColumnDefs } from './BannerList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'BannerList',\n  setup(props, context: SetupContext) {\n    const { t } = useTranslation(context);\n    const { loading: isZonesLoading, data: zoneList } = useFetchZones({\n      context,\n    });\n\n    const {\n      zoneFilter,\n      zonesOptionList,\n      dateFilter,\n      statusFilter,\n      statusesOptionList,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n    } = useAdvancedSearch({\n      context,\n      t,\n      zoneList,\n    });\n\n    const {\n      fetchEntityList: fetchBanners,\n      isLoading: isBannersLoading,\n      rowData,\n      errorMessage,\n      handleChange,\n      searchQuery,\n      pageNumber,\n      pageCount,\n      pageSize,\n    } = useDataTable<Banner>({\n      fetchEntityList: (params) =>\n        getBanners({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value,\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Banners',\n    });\n\n    watch(filterParams, () => {\n      if (isZonesLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value,\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchBanners();\n      }\n    });\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBanner,\n      resourceName: 'Banner',\n      onSuccess: fetchBanners,\n      context,\n    });\n\n    const isBusy = (bannerId: number): boolean => {\n      return isDeleting(bannerId) || isBannersLoading.value;\n    };\n\n    const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>\n      getColumnDefs(context.root.$t)\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () => isBannersLoading.value || isZonesLoading.value\n    );\n\n    return {\n      columnDefs,\n      isRowDataLoading,\n      rowData,\n      errorMessage,\n      handleChange,\n      getBannersBannerFormUrl,\n      searchQuery,\n      pageNumber,\n      pageCount,\n      pageSize,\n      isBusy,\n      handleResourceDelete,\n\n      // Advanced search\n      zoneFilter,\n      zonesOptionList,\n      dateFilter,\n      statusFilter,\n      statusesOptionList,\n      tags,\n      tagRemovalHandler,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n/*# sourceMappingURL=BannerList.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$2 = "data-v-647d49db";
+    const __vue_scope_id__$1 = undefined;
     /* module identifier */
-    const __vue_module_identifier__$2 = undefined;
+    const __vue_module_identifier__$1 = undefined;
     /* functional template */
-    const __vue_is_functional_template__$2 = false;
+    const __vue_is_functional_template__$1 = false;
     /* style inject SSR */
     
     /* style inject shadow dom */
     
 
     
-    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-      __vue_inject_styles__$2,
-      __vue_script__$2,
-      __vue_scope_id__$2,
-      __vue_is_functional_template__$2,
-      __vue_module_identifier__$2,
+    const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+      __vue_inject_styles__$1,
+      __vue_script__$1,
+      __vue_scope_id__$1,
+      __vue_is_functional_template__$1,
+      __vue_module_identifier__$1,
       false,
       createInjector,
       undefined,
       undefined
     );
 
-  const INITIAL_VALUES = {
-      title: '',
-      text: '',
-      buttonLink: '',
-      buttonLabel: '',
-      buttonIsNewTab: false,
-      image: null,
-  };
-  var script$3 = Vue.extend({
-      name: 'BannerItemForm',
-      data() {
-          return {
-              values: Object.assign({}, INITIAL_VALUES),
-              errors: {},
-              isContentLoading: false,
-              bannerArea: null,
-          };
-      },
-      computed: {
-          itemId() {
-              return this.$route.params.itemId;
-          },
-          areaAlias() {
-              return this.$route.params.areaAlias;
-          },
-          isCreation() {
-              return this.itemId === 'create';
-          },
-          bannerItemListUrl() {
-              var _a, _b;
-              return getBannerItemListUrl({
-                  areaAlias: (_b = (_a = this.bannerArea) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : 'unknown',
-              });
-          },
-      },
-      watch: {
-          itemId() {
-              this.updateValues();
-          },
-          areaAlias() {
-              this.updateValues();
-          },
-      },
-      mounted() {
-          this.updateValues();
-      },
-      methods: {
-          updateValues() {
-              this.isContentLoading = true;
-              Promise.all([
-                  getBannerAreaByAlias(this.areaAlias)
-                      .then((response) => {
-                      this.bannerArea = response.data;
-                  })
-                      .catch(console.error),
-                  this.isCreation
-                      ? new Promise((resolve) => {
-                          this.values = Object.assign({}, INITIAL_VALUES);
-                          resolve();
-                      })
-                      : getBannerItemById(this.itemId)
-                          .then((response) => {
-                          this.values = this.convertReviewToInitialValues(response.data);
-                      })
-                          .catch(console.error),
-              ]).finally(() => {
-                  this.isContentLoading = false;
-              });
-          },
-          convertReviewToInitialValues(bannerItem) {
-              var _a;
-              return {
-                  title: bannerItem.title,
-                  text: bannerItem.text,
-                  buttonLink: (_a = bannerItem.buttonLink) !== null && _a !== void 0 ? _a : '',
-                  buttonLabel: bannerItem.buttonLabel,
-                  buttonIsNewTab: bannerItem.buttonIsNewTab,
-                  image: bannerItem.image,
-              };
-          },
-          submitForm() {
-              var _a, _b, _c, _d;
-              const creationBody = {
-                  title: this.values.title,
-                  text: this.values.text,
-                  buttonLink: this.values.buttonLink.trim() || null,
-                  buttonLabel: this.values.buttonLabel,
-                  buttonIsNewTab: this.values.buttonIsNewTab,
-                  image: (_b = (_a = this.values.image) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null,
-              };
-              const requestPromise = this.isCreation
-                  ? createBannerItem((_d = (_c = this.bannerArea) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : 'unknown', creationBody)
-                  : updateBannerItem(this.itemId, creationBody);
+  function useFetchBanner({ context, bannerId, isCreation, }) {
+      const [fetchBanner, resource] = adminServices.useResource({
+          fetchResource: () => getBanner(bannerId.value),
+          initialValue: null,
+          context,
+          resourceName: 'Banner',
+      });
+      compositionApi.onMounted(() => {
+          if (isCreation.value) {
+              return;
+          }
+          fetchBanner();
+      });
+      compositionApi.watch(bannerId, () => {
+          if (isCreation.value) {
+              return;
+          }
+          fetchBanner();
+      });
+      return resource;
+  }
+
+  function convertBannerToFormValues(banner, zonesOptionList) {
+      var _a, _b, _c, _d, _e, _f;
+      const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
+      return {
+          link: (_a = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _a !== void 0 ? _a : '',
+          image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: adminServices.createId(), file: banner.image } : null,
+          bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
+          openNewTab: (_b = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _b !== void 0 ? _b : false,
+          dateStart: (_c = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _c !== void 0 ? _c : '',
+          dateEnd: (_d = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _d !== void 0 ? _d : '',
+          disabled: (_e = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _e !== void 0 ? _e : false,
+          comment: (_f = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _f !== void 0 ? _f : '',
+      };
+  }
+  function convertBannerFormValuesToPayload(values) {
+      var _a, _b, _c, _d;
+      return Object.assign(Object.assign({}, values), { image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '' });
+  }
+
+  var script$2 = compositionApi.defineComponent({
+      name: 'BannerForm',
+      components: { FormFooter: adminUi.FormFooter },
+      setup(props, context) {
+          const bannerId = compositionApi.computed(() => context.root.$route.params.bannerId);
+          const isCreation = compositionApi.computed(() => bannerId.value === 'create');
+          /** Zones **/
+          const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
+          const zonesOptionList = compositionApi.computed(() => zones.value.map((zone) => ({
+              value: zone.id,
+              label: zone.name,
+          })));
+          /** Banner **/
+          const { data: banner, loading: isBannerLoading } = useFetchBanner({
+              context,
+              bannerId,
+              isCreation,
+          });
+          /** Form State **/
+          const isSubmitting = compositionApi.ref(false);
+          const values = compositionApi.ref(convertBannerToFormValues(banner.value, zonesOptionList.value));
+          const errors = compositionApi.ref({});
+          compositionApi.watch([banner, zones], () => {
+              values.value = convertBannerToFormValues(banner.value, zonesOptionList.value);
+          });
+          const submitForm = (event) => {
+              isSubmitting.value = true;
+              const body = convertBannerFormValuesToPayload(values.value);
+              const requestPromise = isCreation.value
+                  ? createBanner(body)
+                  : updateBanner(bannerId.value, body);
               requestPromise
-                  .then(() => {
-                  this.errors = {};
-                  this.$router.push(this.bannerItemListUrl);
-                  this.$toast({
+                  .then(({ data }) => {
+                  errors.value = {};
+                  if (event.type === 'create') {
+                      context.root.$router.push(getBannersBannerFormUrl({ bannerId: String(data.id) }));
+                  }
+                  if (event.type === 'create_exit' || event.type === 'save_exit') {
+                      context.root.$router.push(getBannersBannerListUrl());
+                  }
+                  if (event.type === 'create_create-another') {
+                      values.value = convertBannerToFormValues(null, zonesOptionList.value);
+                  }
+                  context.root.$toast({
                       variant: 'success',
-                      title: 'Success',
-                      body: `Banner item has been successfully ${this.isCreation ? 'created' : 'updated'}`,
+                      title: context.root.$t('banners:success'),
+                      body: isCreation.value
+                          ? context.root.$t('banners:bannerWasSuccessfullyCreated')
+                          : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
                   });
               })
                   .catch((error) => {
                   console.error(error);
-                  this.errors = adminServices.convertRequestErrorToMap(error);
-                  this.$toast({
+                  errors.value = adminServices.convertRequestErrorToMap(error);
+                  context.root.$toast({
                       variant: 'danger',
-                      title: 'Error',
-                      body: `Banner item ${this.isCreation ? 'creation' : 'update'} has been failed`,
+                      title: context.root.$t('banners:error'),
+                      body: isCreation.value
+                          ? context.root.$t('banners:bannerCreationWasFailed')
+                          : context.root.$t('banners:bannerUpdateWasFailed'),
                   });
+              })
+                  .finally(() => {
+                  isSubmitting.value = false;
               });
-          },
+          };
+          const isContentLoading = compositionApi.computed(() => isBannerLoading.value || isZonesLoading.value);
+          return {
+              isCreation,
+              isContentLoading,
+              isSubmitting,
+              values,
+              errors,
+              submitForm,
+              bannerListUrl: getBannersBannerListUrl(),
+              zonesOptionList,
+          };
       },
   });
 
   /* script */
-  const __vue_script__$3 = script$3;
+  const __vue_script__$2 = script$2;
 
   /* template */
-  var __vue_render__$3 = function () {
+  var __vue_render__$2 = function () {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c("page", {
       attrs: {
-        title: _vm.isCreation ? "Create Banner Item" : "Update Banner Item",
+        title: _vm.isCreation
+          ? _vm.$t("banners:createBanner")
+          : _vm.$t("banners:updateBanner"),
         "is-content-loading": _vm.isContentLoading,
-        footer: { onSubmit: _vm.submitForm, backHref: _vm.bannerItemListUrl },
       },
       scopedSlots: _vm._u([
         {
@@ -1080,45 +3352,33 @@
                   on: {
                     submit: function ($event) {
                       $event.preventDefault();
+                      return _vm.submitForm($event)
                     },
                   },
                 },
                 [
-                  _c("form-field", {
-                    attrs: {
-                      name: "title",
-                      label: "Title",
-                      error: _vm.errors.title,
-                    },
-                    model: {
-                      value: _vm.values.title,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "title", $$v);
-                      },
-                      expression: "values.title",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field-rich-text-input", {
+                  _c("form-field-select", {
                     attrs: {
-                      name: "text",
-                      label: "Text",
-                      error: _vm.errors.text,
+                      name: "bannerZone",
+                      label: _vm.$t("banners:zone"),
+                      options: _vm.zonesOptionList,
+                      error: _vm.errors.bannerZone,
                     },
                     model: {
-                      value: _vm.values.text,
+                      value: _vm.values.bannerZone,
                       callback: function ($$v) {
-                        _vm.$set(_vm.values, "text", $$v);
+                        _vm.$set(_vm.values, "bannerZone", $$v);
                       },
-                      expression: "values.text",
+                      expression: "values.bannerZone",
                     },
                   }),
                   _vm._v(" "),
                   _c("form-field-file-input", {
                     attrs: {
-                      label: "Image",
                       name: "image",
                       "file-type": "image",
+                      label: _vm.$t("banners:image"),
+                      error: _vm.errors.file,
                     },
                     model: {
                       value: _vm.values.image,
@@ -1131,46 +3391,103 @@
                   _vm._v(" "),
                   _c("form-field", {
                     attrs: {
-                      name: "buttonLabel",
-                      label: "Button: Label",
-                      error: _vm.errors.buttonLabel,
+                      name: "link",
+                      label: _vm.$t("banners:link"),
+                      error: _vm.errors.name,
                     },
                     model: {
-                      value: _vm.values.buttonLabel,
+                      value: _vm.values.link,
                       callback: function ($$v) {
-                        _vm.$set(_vm.values, "buttonLabel", $$v);
+                        _vm.$set(_vm.values, "link", $$v);
                       },
-                      expression: "values.buttonLabel",
+                      expression: "values.link",
                     },
                   }),
                   _vm._v(" "),
-                  _c("form-field", {
+                  _c("form-field-checkbox", {
                     attrs: {
-                      name: "buttonLink",
-                      label: "Button: Link",
-                      error: _vm.errors.buttonLink,
+                      name: "openNewTab",
+                      label: _vm.$t("banners:openNewTab"),
+                      error: _vm.errors.openNewTab,
                     },
                     model: {
-                      value: _vm.values.buttonLink,
+                      value: _vm.values.openNewTab,
                       callback: function ($$v) {
-                        _vm.$set(_vm.values, "buttonLink", $$v);
+                        _vm.$set(_vm.values, "openNewTab", $$v);
                       },
-                      expression: "values.buttonLink",
+                      expression: "values.openNewTab",
                     },
                   }),
                   _vm._v(" "),
+                  _c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
+                  _vm._v(" "),
+                  _c(
+                    "div",
+                    { staticClass: "date" },
+                    [
+                      _c("form-field", {
+                        attrs: {
+                          label: _vm.$t("banners:from"),
+                          name: "dateStart",
+                          type: "date",
+                          max: _vm.values.dateEnd,
+                        },
+                        model: {
+                          value: _vm.values.dateStart,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "dateStart", $$v);
+                          },
+                          expression: "values.dateStart",
+                        },
+                      }),
+                      _vm._v(" "),
+                      _c("form-field", {
+                        attrs: {
+                          label: _vm.$t("banners:to"),
+                          name: "dateEnd",
+                          type: "date",
+                          min: _vm.values.dateStart,
+                        },
+                        model: {
+                          value: _vm.values.dateEnd,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "dateEnd", $$v);
+                          },
+                          expression: "values.dateEnd",
+                        },
+                      }),
+                    ],
+                    1
+                  ),
+                  _vm._v(" "),
                   _c("form-field-checkbox", {
                     attrs: {
-                      name: "buttonIsNewTab",
-                      label: "Button: Is new tab?",
-                      error: _vm.errors.buttonIsNewTab,
+                      name: "disabled",
+                      label: _vm.$t("banners:disabled"),
+                      error: _vm.errors.disabled,
+                    },
+                    model: {
+                      value: _vm.values.disabled,
+                      callback: function ($$v) {
+                        _vm.$set(_vm.values, "disabled", $$v);
+                      },
+                      expression: "values.disabled",
+                    },
+                  }),
+                  _vm._v(" "),
+                  _c("form-field", {
+                    attrs: {
+                      name: "comment",
+                      type: "textarea",
+                      label: _vm.$t("banners:comment"),
+                      error: _vm.errors.comment,
                     },
                     model: {
-                      value: _vm.values.buttonIsNewTab,
+                      value: _vm.values.comment,
                       callback: function ($$v) {
-                        _vm.$set(_vm.values, "buttonIsNewTab", $$v);
+                        _vm.$set(_vm.values, "comment", $$v);
                       },
-                      expression: "values.buttonIsNewTab",
+                      expression: "values.comment",
                     },
                   }),
                 ],
@@ -1180,118 +3497,128 @@
           },
           proxy: true,
         },
+        {
+          key: "footer",
+          fn: function () {
+            return [
+              _c("FormFooter", {
+                attrs: {
+                  "back-href": _vm.bannerListUrl,
+                  "on-submit": _vm.submitForm,
+                  "is-submitting": _vm.isSubmitting,
+                  "is-creation": _vm.isCreation,
+                  "can-create-another": _vm.isCreation,
+                },
+              }),
+            ]
+          },
+          proxy: true,
+        },
       ]),
     })
   };
-  var __vue_staticRenderFns__$3 = [];
-  __vue_render__$3._withStripped = true;
+  var __vue_staticRenderFns__$2 = [];
+  __vue_render__$2._withStripped = true;
 
     /* style */
-    const __vue_inject_styles__$3 = function (inject) {
+    const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-05d1470a_0", { source: ".bottom[data-v-05d1470a] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.save-button[data-v-05d1470a] {\n  min-width: 100px;\n}\n.alias-field-inner[data-v-05d1470a] {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span[data-v-05d1470a] {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerItemForm.vue.map */", map: {"version":3,"sources":["C:\\Work\\tager-admin-banners\\src\\views\\BannerItemForm.vue","BannerItemForm.vue"],"names":[],"mappings":"AAkNA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;ACjNA;ADoNA;EACA,gBAAA;ACjNA;ADoNA;EACA,aAAA;EACA,mBAAA;ACjNA;ADmNA;EACA,gBAAA;EACA,kBAAA;ACjNA;;AAEA,6CAA6C","file":"BannerItemForm.vue","sourcesContent":["<template>\r\n  <page\r\n    :title=\"isCreation ? 'Create Banner Item' : 'Update Banner Item'\"\r\n    :is-content-loading=\"isContentLoading\"\r\n    :footer=\"{ onSubmit: submitForm, backHref: bannerItemListUrl }\"\r\n  >\r\n    <template v-slot:content>\r\n      <form novalidate @submit.prevent>\r\n        <form-field\r\n          v-model=\"values.title\"\r\n          name=\"title\"\r\n          label=\"Title\"\r\n          :error=\"errors.title\"\r\n        />\r\n\r\n        <form-field-rich-text-input\r\n          v-model=\"values.text\"\r\n          name=\"text\"\r\n          label=\"Text\"\r\n          :error=\"errors.text\"\r\n        />\r\n\r\n        <form-field-file-input\r\n          v-model=\"values.image\"\r\n          label=\"Image\"\r\n          name=\"image\"\r\n          file-type=\"image\"\r\n        />\r\n\r\n        <form-field\r\n          v-model=\"values.buttonLabel\"\r\n          name=\"buttonLabel\"\r\n          label=\"Button: Label\"\r\n          :error=\"errors.buttonLabel\"\r\n        />\r\n\r\n        <form-field\r\n          v-model=\"values.buttonLink\"\r\n          name=\"buttonLink\"\r\n          label=\"Button: Link\"\r\n          :error=\"errors.buttonLink\"\r\n        />\r\n\r\n        <form-field-checkbox\r\n          v-model=\"values.buttonIsNewTab\"\r\n          name=\"buttonIsNewTab\"\r\n          label=\"Button: Is new tab?\"\r\n          :error=\"errors.buttonIsNewTab\"\r\n        />\r\n      </form>\r\n    </template>\r\n  </page>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport Vue from 'vue';\r\nimport {\r\n  convertRequestErrorToMap,\r\n  FileType,\r\n  Nullable,\r\n} from '@tager/admin-services';\r\n\r\nimport {\r\n  BannerItemCreatePayload,\r\n  createBannerItem,\r\n  getBannerAreaByAlias,\r\n  getBannerItemById,\r\n  updateBannerItem,\r\n} from '../services/requests';\r\nimport { BannerArea, BannerItem } from '../typings/model';\r\nimport { getBannerItemListUrl } from '../constants/paths';\r\n\r\ntype FormValues = {\r\n  title: string;\r\n  text: string;\r\n  buttonLink: string;\r\n  buttonLabel: string;\r\n  buttonIsNewTab: boolean;\r\n  image: Nullable<FileType>;\r\n};\r\n\r\nconst INITIAL_VALUES: FormValues = {\r\n  title: '',\r\n  text: '',\r\n  buttonLink: '',\r\n  buttonLabel: '',\r\n  buttonIsNewTab: false,\r\n  image: null,\r\n};\r\n\r\nexport default Vue.extend({\r\n  name: 'BannerItemForm',\r\n  data(): {\r\n    values: FormValues;\r\n    errors: Record<string, string>;\r\n    isContentLoading: boolean;\r\n    bannerArea: Nullable<BannerArea>;\r\n  } {\r\n    return {\r\n      values: { ...INITIAL_VALUES },\r\n      errors: {},\r\n      isContentLoading: false,\r\n      bannerArea: null,\r\n    };\r\n  },\r\n  computed: {\r\n    itemId(): string {\r\n      return this.$route.params.itemId;\r\n    },\r\n    areaAlias(): string {\r\n      return this.$route.params.areaAlias;\r\n    },\r\n    isCreation(): boolean {\r\n      return this.itemId === 'create';\r\n    },\r\n    bannerItemListUrl(): string {\r\n      return getBannerItemListUrl({\r\n        areaAlias: this.bannerArea?.alias ?? 'unknown',\r\n      });\r\n    },\r\n  },\r\n  watch: {\r\n    itemId() {\r\n      this.updateValues();\r\n    },\r\n    areaAlias() {\r\n      this.updateValues();\r\n    },\r\n  },\r\n  mounted(): void {\r\n    this.updateValues();\r\n  },\r\n  methods: {\r\n    updateValues(): void {\r\n      this.isContentLoading = true;\r\n\r\n      Promise.all([\r\n        getBannerAreaByAlias(this.areaAlias)\r\n          .then((response) => {\r\n            this.bannerArea = response.data;\r\n          })\r\n          .catch(console.error),\r\n        this.isCreation\r\n          ? new Promise((resolve) => {\r\n              this.values = { ...INITIAL_VALUES };\r\n              resolve();\r\n            })\r\n          : getBannerItemById(this.itemId)\r\n              .then((response) => {\r\n                this.values = this.convertReviewToInitialValues(response.data);\r\n              })\r\n              .catch(console.error),\r\n      ]).finally(() => {\r\n        this.isContentLoading = false;\r\n      });\r\n    },\r\n    convertReviewToInitialValues(bannerItem: BannerItem): FormValues {\r\n      return {\r\n        title: bannerItem.title,\r\n        text: bannerItem.text,\r\n        buttonLink: bannerItem.buttonLink ?? '',\r\n        buttonLabel: bannerItem.buttonLabel,\r\n        buttonIsNewTab: bannerItem.buttonIsNewTab,\r\n        image: bannerItem.image,\r\n      };\r\n    },\r\n    submitForm() {\r\n      const creationBody: BannerItemCreatePayload = {\r\n        title: this.values.title,\r\n        text: this.values.text,\r\n        buttonLink: this.values.buttonLink.trim() || null,\r\n        buttonLabel: this.values.buttonLabel,\r\n        buttonIsNewTab: this.values.buttonIsNewTab,\r\n        image: this.values.image?.id ?? null,\r\n      };\r\n\r\n      const requestPromise = this.isCreation\r\n        ? createBannerItem(this.bannerArea?.id ?? 'unknown', creationBody)\r\n        : updateBannerItem(this.itemId, creationBody);\r\n\r\n      requestPromise\r\n        .then(() => {\r\n          this.errors = {};\r\n          this.$router.push(this.bannerItemListUrl);\r\n\r\n          this.$toast({\r\n            variant: 'success',\r\n            title: 'Success',\r\n            body: `Banner item has been successfully ${\r\n              this.isCreation ? 'created' : 'updated'\r\n            }`,\r\n          });\r\n        })\r\n        .catch((error) => {\r\n          console.error(error);\r\n          this.errors = convertRequestErrorToMap(error);\r\n          this.$toast({\r\n            variant: 'danger',\r\n            title: 'Error',\r\n            body: `Banner item ${\r\n              this.isCreation ? 'creation' : 'update'\r\n            } has been failed`,\r\n          });\r\n        });\r\n    },\r\n  },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.bottom {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.save-button {\r\n  min-width: 100px;\r\n}\r\n\r\n.alias-field-inner {\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  span {\r\n    font-size: 0.9em;\r\n    margin-right: 10px;\r\n  }\r\n}\r\n</style>\r\n",".bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerItemForm.vue.map */"]}, media: undefined });
+      inject("data-v-60ad1218_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AAsOA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACrOA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"\n      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n    \"\n    :is-content-loading=\"isContentLoading\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <form-field-select\n          v-model=\"values.bannerZone\"\n          name=\"bannerZone\"\n          :label=\"$t('banners:zone')\"\n          :options=\"zonesOptionList\"\n          :error=\"errors.bannerZone\"\n        />\n\n        <form-field-file-input\n          v-model=\"values.image\"\n          name=\"image\"\n          file-type=\"image\"\n          :label=\"$t('banners:image')\"\n          :error=\"errors.file\"\n        />\n\n        <form-field\n          v-model=\"values.link\"\n          name=\"link\"\n          :label=\"$t('banners:link')\"\n          :error=\"errors.name\"\n        />\n\n        <form-field-checkbox\n          v-model=\"values.openNewTab\"\n          name=\"openNewTab\"\n          :label=\"$t('banners:openNewTab')\"\n          :error=\"errors.openNewTab\"\n        />\n\n        <input-label>{{ $t('banners:period') }}</input-label>\n\n        <div class=\"date\">\n          <form-field\n            v-model=\"values.dateStart\"\n            :label=\"$t('banners:from')\"\n            name=\"dateStart\"\n            type=\"date\"\n            :max=\"values.dateEnd\"\n          />\n\n          <form-field\n            v-model=\"values.dateEnd\"\n            :label=\"$t('banners:to')\"\n            name=\"dateEnd\"\n            type=\"date\"\n            :min=\"values.dateStart\"\n          />\n        </div>\n\n        <form-field-checkbox\n          v-model=\"values.disabled\"\n          name=\"disabled\"\n          :label=\"$t('banners:disabled')\"\n          :error=\"errors.disabled\"\n        />\n\n        <form-field\n          v-model=\"values.comment\"\n          name=\"comment\"\n          type=\"textarea\"\n          :label=\"$t('banners:comment')\"\n          :error=\"errors.comment\"\n        />\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n        :back-href=\"bannerListUrl\"\n        :on-submit=\"submitForm\"\n        :is-submitting=\"isSubmitting\"\n        :is-creation=\"isCreation\"\n        :can-create-another=\"isCreation\"\n      />\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  ref,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\n\nimport { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';\nimport { convertRequestErrorToMap } from '@tager/admin-services';\n\nimport { useFetchZones } from '../../../hooks';\nimport { BannerFormValues } from '../../../typings/banners';\nimport { useFetchBanner } from '../../../hooks/useFetchBanner';\nimport {\n  getBannersBannerFormUrl,\n  getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport { createBanner, updateBanner } from '../../../services/requests';\n\nimport {\n  convertBannerFormValuesToPayload,\n  convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n  name: 'BannerForm',\n  components: { FormFooter },\n  setup(props, context: SetupContext) {\n    const bannerId = computed<string>(\n      () => context.root.$route.params.bannerId\n    );\n    const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n    /** Zones **/\n\n    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });\n\n    const zonesOptionList = computed<OptionType[]>(() =>\n      zones.value.map<OptionType>((zone) => ({\n        value: zone.id,\n        label: zone.name,\n      }))\n    );\n\n    /** Banner **/\n\n    const { data: banner, loading: isBannerLoading } = useFetchBanner({\n      context,\n      bannerId,\n      isCreation,\n    });\n\n    /** Form State **/\n\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<BannerFormValues>(\n      convertBannerToFormValues(banner.value, zonesOptionList.value)\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([banner, zones], () => {\n      values.value = convertBannerToFormValues(\n        banner.value,\n        zonesOptionList.value\n      );\n    });\n\n    const submitForm = (event: TagerFormSubmitEvent) => {\n      isSubmitting.value = true;\n\n      const body = convertBannerFormValuesToPayload(values.value);\n\n      const requestPromise = isCreation.value\n        ? createBanner(body)\n        : updateBanner(bannerId.value, body);\n\n      requestPromise\n        .then(({ data }) => {\n          errors.value = {};\n\n          if (event.type === 'create') {\n            context.root.$router.push(\n              getBannersBannerFormUrl({ bannerId: String(data.id) })\n            );\n          }\n\n          if (event.type === 'create_exit' || event.type === 'save_exit') {\n            context.root.$router.push(getBannersBannerListUrl());\n          }\n\n          if (event.type === 'create_create-another') {\n            values.value = convertBannerToFormValues(\n              null,\n              zonesOptionList.value\n            );\n          }\n\n          context.root.$toast({\n            variant: 'success',\n            title: context.root.$t('banners:success'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          errors.value = convertRequestErrorToMap(error);\n          context.root.$toast({\n            variant: 'danger',\n            title: context.root.$t('banners:error'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerCreationWasFailed')\n              : context.root.$t('banners:bannerUpdateWasFailed'),\n          });\n        })\n        .finally(() => {\n          isSubmitting.value = false;\n        });\n    };\n\n    const isContentLoading = computed<boolean>(\n      () => isBannerLoading.value || isZonesLoading.value\n    );\n\n    return {\n      isCreation,\n      isContentLoading,\n      isSubmitting,\n      values,\n      errors,\n      submitForm,\n      bannerListUrl: getBannersBannerListUrl(),\n      zonesOptionList,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$3 = "data-v-05d1470a";
+    const __vue_scope_id__$2 = undefined;
     /* module identifier */
-    const __vue_module_identifier__$3 = undefined;
+    const __vue_module_identifier__$2 = undefined;
     /* functional template */
-    const __vue_is_functional_template__$3 = false;
+    const __vue_is_functional_template__$2 = false;
     /* style inject SSR */
     
     /* style inject shadow dom */
     
 
     
-    const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
-      { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
-      __vue_inject_styles__$3,
-      __vue_script__$3,
-      __vue_scope_id__$3,
-      __vue_is_functional_template__$3,
-      __vue_module_identifier__$3,
+    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+      __vue_inject_styles__$2,
+      __vue_script__$2,
+      __vue_scope_id__$2,
+      __vue_is_functional_template__$2,
+      __vue_module_identifier__$2,
       false,
       createInjector,
       undefined,
       undefined
     );
 
-  const HOME_BREADCRUMB = { path: '/', label: 'Home' };
-  const BANNER_AREA_LIST_ROUTE = {
-      path: BANNER_ROUTE_PATHS.AREA_LIST,
+  const BANNERS_ZONE_LIST_ROUTE = {
+      path: BANNERS_ROUTE_PATHS.ZONE_LIST,
       component: __vue_component__,
-      name: 'Banner Area List',
+      name: 'Zones',
       meta: {
-          getBreadcrumbs: (route) => [
-              HOME_BREADCRUMB,
-              { path: route.path, label: route.name },
+          getBreadcrumbs: (route, t) => [
+              { url: '/', text: t('banners:home') },
+              { url: BANNERS_ROUTE_PATHS.ZONE_LIST, text: t('banners:zones') },
           ],
       },
   };
-  const BANNER_AREA_FORM_ROUTE = {
-      path: BANNER_ROUTE_PATHS.AREA_FORM,
+  const BANNERS_BANNER_LIST_ROUTE = {
+      path: BANNERS_ROUTE_PATHS.BANNER_LIST,
       component: __vue_component__$1,
-      name: 'Banner Area Form',
+      name: 'Banners',
       meta: {
-          getBreadcrumbs: (route) => [
-              HOME_BREADCRUMB,
-              {
-                  path: BANNER_ROUTE_PATHS.AREA_LIST,
-                  label: BANNER_AREA_LIST_ROUTE.name,
-              },
-              { path: route.path, label: route.name },
+          getBreadcrumbs: (route, t) => [
+              { url: '/', text: t('banners:home') },
+              { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
           ],
       },
   };
-  const BANNER_ITEM_LIST_ROUTE = {
-      path: BANNER_ROUTE_PATHS.ITEM_LIST,
+  const BANNERS_BANNER_FORM_ROUTE = {
+      path: BANNERS_ROUTE_PATHS.BANNER_FORM,
       component: __vue_component__$2,
-      name: 'Banner Item List',
+      name: 'Banner Form',
       meta: {
-          getBreadcrumbs: (route) => [
-              HOME_BREADCRUMB,
-              { path: route.path, label: route.name },
+          getBreadcrumbs: (route, t) => [
+              { url: '/', text: t('banners:home') },
+              { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
+              { url: route.path, text: t('banners:bannerForm') },
           ],
       },
-  };
-  const BANNER_ITEM_FORM_ROUTE = {
-      path: BANNER_ROUTE_PATHS.ITEM_FORM,
-      component: __vue_component__$3,
-      name: 'Banner Item Form',
-      meta: {
-          getBreadcrumbs: (route) => [
-              HOME_BREADCRUMB,
+  };
+
+  function getBannersMenuItem(params) {
+      return {
+          id: 'banners',
+          text: params.t('banners:banners'),
+          icon: 'viewList',
+          children: [
+              { text: params.t('banners:zones'), url: getBannersZoneListUrl() },
+              { text: params.t('banners:banners'), url: getBannersBannerListUrl() },
               {
-                  path: getBannerItemListUrl({ areaAlias: route.params.areaAlias }),
-                  label: BANNER_ITEM_LIST_ROUTE.name,
+                  text: params.t('banners:createBanner'),
+                  url: getBannersBannerFormUrl({ bannerId: 'create' }),
               },
-              { path: route.path, label: route.name },
           ],
-      },
-  };
+      };
+  }
 
-  const BANNER_MENU_ITEM = {
-      id: 'banner',
-      name: 'Banners',
-      path: '',
-      icon: 'viewList',
-      children: [
-          { name: 'Banner areas', path: '/banners' },
-          { name: 'Create banner area', path: '/banners/create' },
-      ],
-  };
+  adminServices.i18n.addTranslations('en', 'blog', EN);
+  adminServices.i18n.addTranslations('ru', 'blog', RU);
 
-  exports.BANNER_AREA_FORM_ROUTE = BANNER_AREA_FORM_ROUTE;
-  exports.BANNER_AREA_LIST_ROUTE = BANNER_AREA_LIST_ROUTE;
-  exports.BANNER_ITEM_FORM_ROUTE = BANNER_ITEM_FORM_ROUTE;
-  exports.BANNER_ITEM_LIST_ROUTE = BANNER_ITEM_LIST_ROUTE;
-  exports.BANNER_MENU_ITEM = BANNER_MENU_ITEM;
-  exports.BANNER_ROUTE_PATHS = BANNER_ROUTE_PATHS;
-  exports.getBannerAreaFormUrl = getBannerAreaFormUrl;
-  exports.getBannerAreaListUrl = getBannerAreaListUrl;
-  exports.getBannerItemFormUrl = getBannerItemFormUrl;
-  exports.getBannerItemListUrl = getBannerItemListUrl;
+  exports.BANNERS_BANNER_FORM_ROUTE = BANNERS_BANNER_FORM_ROUTE;
+  exports.BANNERS_BANNER_LIST_ROUTE = BANNERS_BANNER_LIST_ROUTE;
+  exports.BANNERS_ROUTE_PATHS = BANNERS_ROUTE_PATHS;
+  exports.BANNERS_ZONE_LIST_ROUTE = BANNERS_ZONE_LIST_ROUTE;
+  exports.createBanner = createBanner;
+  exports.deleteBanner = deleteBanner;
+  exports.getBanner = getBanner;
+  exports.getBanners = getBanners;
+  exports.getBannersBannerFormUrl = getBannersBannerFormUrl;
+  exports.getBannersBannerListUrl = getBannersBannerListUrl;
+  exports.getBannersMenuItem = getBannersMenuItem;
+  exports.getBannersZoneListUrl = getBannersZoneListUrl;
+  exports.getZones = getZones;
+  exports.updateBanner = updateBanner;
 
   Object.defineProperty(exports, '__esModule', { value: true });