@travlrcomlabs/theme-generator/dist/travlr-theme-generator.js

Theme generator for all project Travlr

/**
  ****************************************************
  ***                        *******    ******    ****
  ***                        ******    ******    *****
  ***********       **************    ******    ******
  ***********       *************    ******    *******
  ***********       ************    ******    ********
  ***********       ***********    ******    *********
  ***********       **********    ******    **********
  ***********       *********    ******    ***********
  ***********       ********    ******    ************
  ***********       *******    ******    *************
  ***********       ******    ******    **************
  ****************************************************
  * --------------------------------------------------
  * Travlr Theme Generator (v0.1.16)
  * Copyright 2021
  * By Travlr Team
  * --------------------------------------------------
  */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global['travlr-theme-generator'] = {}));
}(this, (function (exports) { 'use strict';

  const ERROR_MESSAGES = [
    {
      code: 'ERROR_MESSAGES_NOT_FOUND',
      messages: 'Error messages not found'
    }
  ];

  class ErrorHandler {
    constructor (config) {
      this.config = {
        code: config.code || '',
        errorList: config.errorList || []
      };
      this.errorCode = this.config.code;
      this.errorList = this.config.errorList;
      this.errorMessage = '';
      this.errorList = this.errorList.concat(ERROR_MESSAGES);
      this.run();
    }
    run () {
      if (!this.errorCode) {
        this.errorCode = 'ERROR_MESSAGES_NOT_FOUND';
      }
      this.generateError();
    }
    generateError () {
      this.errorMessage = this.getMessage();
      console.error(`${this.errorMessage} // code::${this.errorCode}`);
    }
    getErrorMessages () {
      const result = this.errorList.filter(item => item.code === this.errorCode);
      return result
    }
    getMessage () {
      const result = this.getErrorMessages();
      return result[0].messages || ''
    }
    errorMessagesExists () {
      const result = this.getErrorMessages();
      return result.length > 0
    }
  }

  const ATTRIBUTES_BACKGROUND = 'background';
  const ATTRIBUTES_BACKGROUND_COLOR = 'background-color';
  const ATTRIBUTES_BORDER = 'border';
  const ATTRIBUTES_BORDER_COLOR = 'border-color';
  const ATTRIBUTES_BORDER_TOP = 'border-top';
  const ATTRIBUTES_BORDER_BOTTOM = 'border-bottom';
  const ATTRIBUTES_BORDER_RIGHT = 'border-right';
  const ATTRIBUTES_BORDER_LEFT = 'border-left';
  const ATTRIBUTES_COLOR = 'color';
  const ATTRIBUTES_CURSOR = 'cursor';
  const ATTRIBUTES_FILL = 'fill';
  const ATTRIBUTES_FONT_FAMILY = 'font-family';
  const ATTRIBUTES_OPACITY = 'opacity';

  class CssAttributes {
    constructor (config) {
      this.config = {
        name: config.name || '',
        value: config.value || '',
        important: config.important !== undefined ? config.important : true
      };
      this.isImportant = this.config.important;
      this.attributeName = this.config.name;
      this.attributeValue = this.config.value;
      this.attributeList = [
        ATTRIBUTES_BACKGROUND,
        ATTRIBUTES_BACKGROUND_COLOR,
        ATTRIBUTES_BORDER,
        ATTRIBUTES_BORDER_COLOR,
        ATTRIBUTES_BORDER_TOP,
        ATTRIBUTES_BORDER_BOTTOM,
        ATTRIBUTES_BORDER_RIGHT,
        ATTRIBUTES_BORDER_LEFT,
        ATTRIBUTES_COLOR,
        ATTRIBUTES_CURSOR,
        ATTRIBUTES_FILL,
        ATTRIBUTES_FONT_FAMILY,
        ATTRIBUTES_OPACITY
      ];
    }
    run () {
      this.checkIsImportantValue();
      return this.generateCssAttributes()
    }
    checkIsImportantValue () {
      if (typeof this.isImportant !== 'boolean' || this.isImportant === '' || this.isImportant === undefined) {
        this.isImportant = false;
      }
    }
    getIndexAttributeName () {
      const result = this.attributeList.indexOf(this.attributeName);
      return result
    }
    attributeExists () {
      const result = this.getIndexAttributeName();
      return result !== -1
    }
    generateCssAttributes () {
      if (!this.attributeName) return ''
      if (!this.attributeValue) return ''
      if (!this.attributeExists) return ''
      return `${this.attributeName}: ${this.attributeValue} ${this.isImportant ? '!important' : ''};`
    }
  }

  class CssGenerateSelector {
    constructor (config) {
      this.config = {
        rawSelector: config.rawSelector ? config.rawSelector : '',
        selector: {
          name: config.selector && config.selector.name ? config.selector.name : '',
          type: config.selector && config.selector.name ? config.selector.type : ''
        },
        pseudoClass: {
          name: config.pseudoClass && config.pseudoClass.name ? config.pseudoClass.name : '',
          target: config.pseudoClass && config.pseudoClass.target ? config.pseudoClass.target : ''
        },
        pseudoElements: {
          name: config.pseudoElements && config.pseudoElements.name ? config.pseudoElements.name : '',
          target: config.pseudoElements && config.pseudoElements.target ? config.pseudoElements.target : ''
        }
      };
      this.rawSelector = this.config.rawSelector || '';
      this.selectorName = this.config.selector.name || '';
      this.selectorType = this.config.selector.type || '';
      this.pseudoClass = this.config.pseudoClass.name || '';
      this.pseudoClassTarget = this.config.pseudoClass.target || '';
      this.pseudoElements = this.config.pseudoElements.name || '';
      this.pseudoElementsTarget = this.config.pseudoElements.target || '';
    }
    run () {
      return this.generateSelector()
    }
    generateSelector () {
      if (this.rawSelector) return this.rawSelector
      if (!this.selectorName && !this.selectorType) return ''
      return `${this.selectorType}${this.selectorName}`
    }
  }

  const ERROR_MESSAGES$1 = [
    {
      code: 'CSS_SELECTOR_NOT_FOUND',
      messages: 'Css selector not found'
    },
    {
      code: 'STYLE_CONFIG_NOT_FOUND',
      messages: 'Style config not found'
    }
  ];

  class CssBase {
    constructor (config) {
      this.config = {
        rawSelector: config.rawSelector ? config.rawSelector : '',
        selector: {
          name: config.selector && config.selector.name ? config.selector.name : '',
          type: config.selector && config.selector.name ? config.selector.type : ''
        },
        pseudoClass: {
          name: config.pseudoClass && config.pseudoClass.name ? config.pseudoClass.name : '',
          target: config.pseudoClass && config.pseudoClass.target ? config.pseudoClass.target : ''
        },
        pseudoElements: {
          name: config.pseudoElements && config.pseudoElements.name ? config.pseudoElements.name : '',
          target: config.pseudoElements && config.pseudoElements.target ? config.pseudoElements.target : ''
        },
        style: config.style || []
      };
      this.errorHandler = configError => new ErrorHandler(configError);
      this.cssAttributes = configCssAttributes => new CssAttributes(configCssAttributes);
      this.cssGenerateSelector = configCssGenerateSelector => new CssGenerateSelector(configCssGenerateSelector);
      this.cssSelector = '';
      this.styleConfig = this.config.style;
      this.styleResult = [];
    }
    run () {
      this.cssSelector = this.cssGenerateSelector(this.config).run();
      if (!this.cssSelectorExist()) {
        this.errorHandler({
          code: 'CSS_SELECTOR_NOT_FOUND',
          errorList: ERROR_MESSAGES$1
        });
        return ''
      }
      return this.generateCssStyle()
    }
    generateCssStyle () {
      if (this.styleConfig.length === 0) {
        this.errorHandler({
          code: 'STYLE_CONFIG_NOT_FOUND',
          errorList: ERROR_MESSAGES$1
        });
        return ''
      }
      this.styleConfig.forEach(styleItem => {
        this.isImportant = styleItem.isImportant;
        const result = this.cssAttributes({
          name: styleItem.attributeName,
          value: styleItem.attributeValue,
          important: styleItem.isImportant
        }).run();
        this.styleResult.push(result);
      });
      this.styleResult = this.styleResult.join(' ');
      return `${this.cssSelector} { ${this.styleResult} }`
    }
    cssSelectorExist () {
      return this.cssSelector !== ''
    }
  }

  const THEME_PRIMARY = 'primary';
  const THEME_SECONDARY = 'secondary';
  const THEME_TERTIARY = 'tertiary';

  const ERROR_MESSAGES$2 = [
    {
      code: 'COLORS_NOT_FOUND',
      messages: 'Colors not found'
    }
  ];
  const TRAVLR10PLATFORMNAME = '10Travlr';
  const WEBJETPLATFORMNAME = 'Webjet';

  class GenerateTheme {
    constructor (config) {
      this.config = {
        platformName: config && config.platformName ? config.platformName : '',
        themeDictionary: config && config.themeDictionary ? config.themeDictionary : undefined
      };
      this.prefix = 't';
      this.listTheme = [
        THEME_PRIMARY,
        THEME_SECONDARY,
        THEME_TERTIARY
      ];
      this.opacity = '0.8';
      this.whiteColor = 'white';
      this.greyColor = '#666c6f';
      this.componentName = '';
      this.listStyle = [];
      this.platformName = this.config.platformName;
      this.themeDictionary = this.config.themeDictionary;
      this.themeColor = '';
      this.themeColorType = '';
      this.errorHandler = configError => new ErrorHandler(configError);
    }
    getResult () {
      if (!this.themeDictionary || this.themeDictionary === undefined || this.themeDictionary === null) return ''
      if (this.listStyle.length === 0) return ''
      return this.listStyle.join(' ')
    }
    getColor (color, type) {
      this.themeColor = color;
      this.themeColorType = type;
      if (!this.themeDictionary || this.themeDictionary === undefined || this.themeDictionary === null) return ''
      if (!this.themeColor && !this.themeColorType) return ''
      if (!this.themeDictionary[this.themeColor][this.themeColorType]) {
        this.errorHandler({
          code: 'COLORS_NOT_FOUND',
          errorList: ERROR_MESSAGES$2
        });
        return ''
      }
      return this.themeDictionary[this.themeColor][this.themeColorType]
    }
    getCustomFont () {
      if (!this.themeDictionary || this.themeDictionary === undefined || this.themeDictionary === null) return ''
      if (!this.themeDictionary.customFont || this.themeDictionary.customFont === undefined || this.themeDictionary.customFont === null) return ''
      return this.themeDictionary.customFont
    }
    stateComponent (rawSelector) {
      const result = new CssBase({
        rawSelector: `${rawSelector}:hover, ${rawSelector}:visited, ${rawSelector}:focus`,
        style: [
          {
            attributeName: 'opacity',
            attributeValue: this.opacity
          }
        ]
      }).run();
      const resultDisabled = new CssBase({
        rawSelector: `${rawSelector}:disabled`,
        style: [
          {
            attributeName: 'opacity',
            attributeValue: this.opacity
          },
          {
            attributeName: 'cursor',
            attributeValue: 'not-allowed'
          }
        ]
      }).run();
      if (result && resultDisabled) {
        this.listStyle.push(result);
        this.listStyle.push(resultDisabled);
      }
    }
    generateCustomFontStyle () {
      if (this.getCustomFont()['fontUrl'] === '') return ''
      const fontStyle = `@import url(${this.getCustomFont()['fontUrl']});`;
      const result = new CssBase({
        rawSelector: '*, html, body, h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, a, input, textarea, select, button',
        style: [
          {
            attributeName: 'font-family',
            attributeValue: this.getCustomFont()['fontFamily']
          }
        ]
      }).run();
      if (result) {
        this.listStyle.push(fontStyle + result);
      }
    }
    webjetStyle () {
      const resultFooter = new CssBase({
        rawSelector: '.footer',
        style: [
          {
            attributeName: 'background',
            attributeValue: '#333333'
          }
        ]
      }).run();
      if (resultFooter) {
        this.listStyle.push(resultFooter);
      }
    }
  }

  class MlpTheme extends GenerateTheme {
    run () {
      if (this.platformName === WEBJETPLATFORMNAME) {
        this.webjetStyle();
      }
      if (this.getCustomFont() !== '') {
        this.generateCustomFontStyle();
      }
      this.accentLineComponent();
      this.accommodationPageComponent();
      this.accountComponent();
      this.backgroundComponent();
      this.bookingManagementComponent();
      this.buttonComponent();
      this.buttonOutline();
      this.cartBadgeComponent();
      this.checkboxComponent();
      this.checkboxSliderComponent();
      this.colorComponent();
      this.customRadioMaterialComponent();
      this.datepickerComponent();
      this.iconComponent();
      this.linkComponent();
      this.navbarTopComponent();
      this.paginationComponent();
      this.pillsComponent();
      this.progressbarComponent();
      this.searchFeatureComponent();
      this.vueSliderComponent();
      this.cookieConsentComponent();
      this.secondaryTextComponent();
      this.articlePageComponent();
      this.tripsPageComponent();
      this.claimListingPageComponent();
      this.eventsPageComponent();
      this.destinationsPageComponent();
      this.oppsiePageComponent();
      this.businessPortalPageComponent();
      return this.getResult()
    }
    accentLineComponent () {
      const componentName = 'accent-line';
      this.listTheme.forEach(itemStyle => {
        const result = new CssBase({
          rawSelector: `.${this.prefix}-${componentName}-${itemStyle}`,
          style: [
            {
              attributeName: 'border-top',
              attributeValue: `5px solid ${this.getColor(`${itemStyle}`, 'main')}`
            },
            {
              attributeName: 'border-bottom',
              attributeValue: 'none'
            }
          ]
        }).run();
        if (result) this.listStyle.push(result);
      });
    }
    accommodationPageComponent () {
      const resultSaveUpTo = new CssBase({
        rawSelector: `.l-hotel-booking .content-saveupto`,
        style: [
          {
            attributeName: 'border-top',
            attributeValue: `10px solid ${this.getColor('secondary', 'main')}`
          },
          {
            attributeName: 'border-bottom',
            attributeValue: `1px solid ${this.getColor('secondary', 'main')}`
          },
          {
            attributeName: 'border-right',
            attributeValue: `1px solid ${this.getColor('secondary', 'main')}`
          },
          {
            attributeName: 'border-left',
            attributeValue: `1px solid ${this.getColor('secondary', 'main')}`
          }
        ]
      }).run();
      const resultSaveUpToPriceTag = new CssBase({
        rawSelector: `.l-hotel-booking .content-saveupto .content__saveupto__icon i.icon-price-tag`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'text')
          }
        ]
      }).run();
      const resultSaveUpToText = new CssBase({
        rawSelector: `.l-hotel-booking .content-saveupto .content__saveupto__text`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultSaveUpToA = new CssBase({
        rawSelector: `.l-hotel-booking .content-saveupto a`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultSortFilterActive = new CssBase({
        rawSelector: `.Page-hotel-booking .wrap__content .nav-tabs > li > a:hover,
      .Page-hotel-booking .wrap__content .nav-tabs > li.active > a,
      .Page-hotel-booking .wrap__content .nav-tabs > li.active > a:focus,
      .Page-hotel-booking .wrap__content .nav-tabs > li.active > a:hover`,
        style: [
          {
            attributeName: 'border-bottom',
            attributeValue: `4px solid ${this.getColor('primary', 'main')}`
          }
        ]
      }).run();
      const resultSortFilterReset = new CssBase({
        rawSelector: `.do__reset__reset svg path`,
        style: [
          {
            attributeName: 'fill',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultDatePicker = new CssBase({
        rawSelector: `.vdp-datepicker__calendar .selected, .vdp-datepicker__calendar .cell.highlighted`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      const resultDatePickerCellHover = new CssBase({
        rawSelector: `.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover, .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      const resultDatePickerToday = new CssBase({
        rawSelector: `.vdp-datepicker__calendar .cell.day.today`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultDatePickerTodayHighlightedSelected = new CssBase({
        rawSelector: `.vdp-datepicker__calendar .cell.day.selected.highlighted.today.highlight-start`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      const resultDatePickerTodayHighlightedHighlightStartSelected = new CssBase({
        rawSelector: `.vdp-datepicker__calendar .cell.day.disabled.highlighted.today.highlight-start`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      const resultInputNumber = new CssBase({
        rawSelector: `.Page-hotel-booking .form__enquiry .dropdown-menu .btn__minusRoom, .Page-hotel-booking .form__enquiry .dropdown-menu .btn__plusRoom`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultAddAnotherRoomButton = new CssBase({
        rawSelector: `.l-hotel-booking .TF__col__addRoom .btn-default`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultRemoveRoomButton = new CssBase({
        rawSelector: `.guest-counter .colWrap-list-room .list-room__head__remove .btn-default`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultFrontStars = new CssBase({
        rawSelector: `.front-stars`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultStarRatingText = new CssBase({
        rawSelector: `.star-rating-text`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultMapThumb = new CssBase({
        rawSelector: `.Page-hotel-booking .wrap__content .detail__content .detail__content__rightColumn__information .information__box .mapThumb__link .mapThumb__btn .material-icons,
      .Page-hotel-booking .wrap__content .detail__content .detail__content__rightColumn__information .information__box .mapThumb__link .mapThumb__btn .mapThumb__btn__text`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultContentPromo = new CssBase({
        rawSelector: `.l-hotel-booking .detail__content-promo`,
        style: [
          {
            attributeName: 'border-top',
            attributeValue: `8px solid ${this.getColor('secondary', 'main')}`
          }
        ]
      }).run();
      const resultContentPromoIcon = new CssBase({
        rawSelector: `.l-hotel-booking .content-promo__icon i`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'text')
          }
        ]
      }).run();
      const resultAmenitiesList = new CssBase({
        rawSelector: `.l-hotel-booking .detail__content-reserve .content-reserve__wrapper .amenities-list > li::before`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultWizard = new CssBase({
        rawSelector: `.Page-hotel-booking .checkout__page .nav-pills li.active .number`,
        style: [
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      if (resultSaveUpTo) this.listStyle.push(resultSaveUpTo);
      if (resultSaveUpToPriceTag) this.listStyle.push(resultSaveUpToPriceTag);
      if (resultSaveUpToText) this.listStyle.push(resultSaveUpToText);
      if (resultSaveUpToA) this.listStyle.push(resultSaveUpToA);
      if (resultSortFilterActive) this.listStyle.push(resultSortFilterActive);
      if (resultSortFilterReset) this.listStyle.push(resultSortFilterReset);
      if (resultDatePicker) this.listStyle.push(resultDatePicker);
      if (resultDatePickerCellHover) this.listStyle.push(resultDatePickerCellHover);
      if (resultDatePickerToday) this.listStyle.push(resultDatePickerToday);
      if (resultDatePickerTodayHighlightedSelected) this.listStyle.push(resultDatePickerTodayHighlightedSelected);
      if (resultDatePickerTodayHighlightedHighlightStartSelected) this.listStyle.push(resultDatePickerTodayHighlightedHighlightStartSelected);
      if (resultInputNumber) this.listStyle.push(resultInputNumber);
      if (resultAddAnotherRoomButton) this.listStyle.push(resultAddAnotherRoomButton);
      if (resultRemoveRoomButton) this.listStyle.push(resultRemoveRoomButton);
      if (resultFrontStars) this.listStyle.push(resultFrontStars);
      if (resultStarRatingText) this.listStyle.push(resultStarRatingText);
      if (resultMapThumb) this.listStyle.push(resultMapThumb);
      if (resultContentPromo) this.listStyle.push(resultContentPromo);
      if (resultContentPromoIcon) this.listStyle.push(resultContentPromoIcon);
      if (resultAmenitiesList) this.listStyle.push(resultAmenitiesList);
      if (resultWizard) this.listStyle.push(resultWizard);
    }
    accountComponent () {
      const resultTabNav = new CssBase({
        rawSelector: `.my__profile__tabNav li.active > a,
      .my__profile__tabNav .nav-tabs > li.active > a:focus,
      .my__profile__tabNav .nav-tabs > li > a:hover,
      .my__profile__tabNav .nav-tabs > li > a:visited,
      .my__profile__tabNav li > a:hover`,
        style: [
          {
            attributeName: 'border-bottom',
            attributeValue: `5px solid ${this.getColor('primary', 'main')}`
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultHiddenCheckbox = new CssBase({
        rawSelector: `.hiddenCB label`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultHiddenCheckboxHover = new CssBase({
        rawSelector: `.hiddenCB label:hover`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.whiteColor
          }
        ]
      }).run();
      const resultHiddenCheckboxChecked = new CssBase({
        rawSelector: `.hiddenCB input[type="checkbox"]:checked + label`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.whiteColor
          }
        ]
      }).run();
      const resultBackgroundHeader = new CssBase({
        rawSelector: `.block__my__account__header .top__strip`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      if (resultTabNav) this.listStyle.push(resultTabNav);
      if (resultHiddenCheckbox) this.listStyle.push(resultHiddenCheckbox);
      if (resultHiddenCheckboxHover) this.listStyle.push(resultHiddenCheckboxHover);
      if (resultHiddenCheckboxChecked) this.listStyle.push(resultHiddenCheckboxChecked);
      if (resultBackgroundHeader) this.listStyle.push(resultBackgroundHeader);
    }
    backgroundComponent () {
      const componentName = 'bg';
      this.listTheme.forEach(itemStyle => {
        const result = new CssBase({
          rawSelector: `.${this.prefix}-${componentName}-${itemStyle}`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        if (result) this.listStyle.push(result);
      });
    }
    bookingManagementComponent () {
      const resultTabNav = new CssBase({
        rawSelector: `.tab-nav-medium .nav-li .nav-li-a:hover,
      .tab-nav-medium .nav-li.active .nav-li-a,
      .tab-nav-medium .nav-li.active .nav-li-a:active,
      .tab-nav-medium .nav-li.active .nav-li-a:focus`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultLabelType = new CssBase({
        rawSelector: `.l-booking-management .block__booking__management .box__item .label-type`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('tertiary', 'text')
          }
        ]
      }).run();
      const resultTimelineStart = new CssBase({
        rawSelector: `.l-booking-management .item-flight-timeline-start-disc`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      const resultTimelineEnd = new CssBase({
        rawSelector: `.l-booking-management .item-flight-timeline-end-disc`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      const resultEmptyState = new CssBase({
        rawSelector: `.l-booking-management .block__booking__management .empty__box .link a, .l-booking-management .block__booking__management .empty__box .link button`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          },
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultBookingDetailPrimaryButton = new CssBase({
        rawSelector: `.l-booking-management .download-pdf__button`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          },
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultBookingDetailPrimaryColor = new CssBase({
        rawSelector: `.l-booking-management .have-question-link`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      if (resultTabNav) this.listStyle.push(resultTabNav);
      if (resultLabelType) this.listStyle.push(resultLabelType);
      if (resultTimelineStart) this.listStyle.push(resultTimelineStart);
      if (resultTimelineEnd) this.listStyle.push(resultTimelineEnd);
      if (resultEmptyState) this.listStyle.push(resultEmptyState);
      if (resultBookingDetailPrimaryButton) this.listStyle.push(resultBookingDetailPrimaryButton);
      if (resultBookingDetailPrimaryColor) this.listStyle.push(resultBookingDetailPrimaryColor);
    }
    buttonComponent () {
      const componentButton = 'button';
      const componentBtn = 'btn';
      this.listTheme.forEach(itemStyle => {
        const resultButton = new CssBase({
          rawSelector: `.${this.prefix}-${componentButton}-${itemStyle}`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'border-color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        const resultBtn = new CssBase({
          rawSelector: `.${componentBtn}-${itemStyle}`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'border-color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        const resultBtnAction = new CssBase({
          rawSelector: `.${componentBtn}-${itemStyle}:hover, .${componentBtn}-${itemStyle}:active, .${componentBtn}-${itemStyle}:focus`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'border-color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        if (resultButton) this.listStyle.push(resultButton);
        if (resultBtn) this.listStyle.push(resultBtn);
        if (resultBtnAction) this.listStyle.push(resultBtnAction);
      });
    }
    buttonOutline () {
      const componentName = 'button-outline';
      this.listTheme.forEach(itemStyle => {
        const rawSelector = `.${this.prefix}-${componentName}-${itemStyle}`;
        const result = new CssBase({
          rawSelector: `${rawSelector}`,
          style: [
            {
              attributeName: 'border',
              attributeValue: '1px solid'
            },
            {
              attributeName: 'border-color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        const resultActive = new CssBase({
          rawSelector: `${rawSelector}.active`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        const resultHover = new CssBase({
          rawSelector: `${rawSelector}:hover`,
          style: [
            {
              attributeName: 'background',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            },
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        const resultDisabled = new CssBase({
          rawSelector: `${rawSelector}:disabled`,
          style: [
            {
              attributeName: 'opacity',
              attributeValue: this.opacity
            },
            {
              attributeName: 'cursor',
              attributeValue: this.getColor(`${itemStyle}`, 'text')
            }
          ]
        }).run();
        if (result) this.listStyle.push(result);
        if (resultActive) this.listStyle.push(resultActive);
        if (resultHover) this.listStyle.push(resultHover);
        if (resultDisabled) this.listStyle.push(resultDisabled);
      });
    }
    cartBadgeComponent () {
      const componentName = '.header__common .common__shortcut .common__cart__icon .cart__badge';
      const result = new CssBase({
        rawSelector: `${componentName}`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('tertiary', 'text')
          },
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      if (result) {
        this.listStyle.push(result);
      }
    }
    checkboxComponent () {
      const componentName = '.custom__checkbox input:checked';
      const resultCheckedBefore = new CssBase({
        rawSelector: `${componentName} + label::before,
      .category__wrapDropdown .dropdown input[type="checkbox"]:checked::before`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultCheckedAfter = new CssBase({
        rawSelector: `${componentName} + label::after,
      .category__wrapDropdown .dropdown input[type="checkbox"]:checked::after`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.whiteColor
          }
        ]
      }).run();
      if (resultCheckedBefore) this.listStyle.push(resultCheckedBefore);
      if (resultCheckedAfter) this.listStyle.push(resultCheckedAfter);
    }
    checkboxSliderComponent () {
      const componentName = '.Switch .checkbox-slider--b-flat';
      const resultCheckedBefore = new CssBase({
        rawSelector: `${componentName} input:checked + span::before`,
        style: [
          {
            attributeName: 'opacity',
            attributeValue: this.opacity
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      const resultCheckedAfter = new CssBase({
        rawSelector: `${componentName} input + span::after`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          }
        ]
      }).run();
      if (resultCheckedBefore) this.listStyle.push(resultCheckedBefore);
      if (resultCheckedAfter) this.listStyle.push(resultCheckedAfter);
    }
    colorComponent () {
      const componentName = 'color';
      this.listTheme.forEach(itemStyle => {
        const result = new CssBase({
          rawSelector: `.${this.prefix}-${componentName}-${itemStyle}`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        if (result) {
          this.listStyle.push(result);
        }
      });
    }
    customRadioMaterialComponent () {
      const componentName = '.custom__radio__material .crm-radio';
      const resultInputTypeRadio = new CssBase({
        rawSelector: `${componentName} input[type=radio]:checked + label:before`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultLabelAfter = new CssBase({
        rawSelector: `${componentName} label:after`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      if (resultInputTypeRadio) this.listStyle.push(resultInputTypeRadio);
      if (resultLabelAfter) this.listStyle.push(resultLabelAfter);
    }
    datepickerComponent () {
      const componentName = '.ui-datepicker';
      const resultStateHighlight = new CssBase({
        rawSelector: `${componentName} .ui-state-default.ui-state-highlight`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultStateHighlightHover = new CssBase({
        rawSelector: `${componentName} .ui-state-default.ui-state-highlight:hover`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.whiteColor
          }
        ]
      }).run();
      const resultStateHighlightActive = new CssBase({
        rawSelector: `${componentName} .ui-state-default.ui-state-highlight.ui-state-active,
      ${componentName} .ui-state-default.ui-state-active,
      .ui-state-default.ui-state-hover,
      .daterangepicker td.active,
      .daterangepicker td.active:hover`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.whiteColor
          }
        ]
      }).run();
      if (resultStateHighlight) this.listStyle.push(resultStateHighlight);
      if (resultStateHighlightHover) this.listStyle.push(resultStateHighlightHover);
      if (resultStateHighlightActive) this.listStyle.push(resultStateHighlightActive);
    }
    iconComponent () {
      const componentName = 'icon';
      this.listTheme.forEach(itemStyle => {
        const result = new CssBase({
          rawSelector: `.${this.prefix}-${componentName}-${itemStyle}`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        if (result) {
          this.listStyle.push(result);
        }
      });
    }
    linkComponent () {
      const componentName = 'link';
      this.listTheme.forEach(itemStyle => {
        const rawSelector = `.${this.prefix}-${componentName}-${itemStyle}`;
        const result = new CssBase({
          rawSelector: `${rawSelector}`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        const resultLinkIcon = new CssBase({
          rawSelector: `${rawSelector} i`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        const resultLinkBefore = new CssBase({
          rawSelector: `${rawSelector}:before`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        const resultLinkAfter = new CssBase({
          rawSelector: `${rawSelector}:after`,
          style: [
            {
              attributeName: 'color',
              attributeValue: this.getColor(`${itemStyle}`, 'main')
            }
          ]
        }).run();
        const resultLinkBeforeHover = new CssBase({
          rawSelector: `${rawSelector}:hover:before`,
          style: [
            {
              attributeName: 'opacity',
              attributeValue: this.opacity
            }
          ]
        }).run();
        const resultLinkAfterHover = new CssBase({
          rawSelector: `${rawSelector}:hover:after`,
          style: [
            {
              attributeName: 'opacity',
              attributeValue: this.opacity
            }
          ]
        }).run();
        this.stateComponent(rawSelector);
        if (result) this.listStyle.push(result);
        if (resultLinkIcon) this.listStyle.push(resultLinkIcon);
        if (resultLinkBefore) this.listStyle.push(resultLinkBefore);
        if (resultLinkAfter) this.listStyle.push(resultLinkAfter);
        if (resultLinkBeforeHover) this.listStyle.push(resultLinkBeforeHover);
        if (resultLinkAfterHover) this.listStyle.push(resultLinkAfterHover);
      });
    }
    navbarTopComponent () {
      const componentName = '.header__common';
      const resultTextHover = new CssBase({
        rawSelector: `${componentName} .navbar-with-scroll .list-item-parent:hover .list-item-parent-a, ${componentName} .common__login .common__login__link:hover`,
        style: [
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultTextHoverAfter = new CssBase({
        rawSelector: `${componentName} .navbar-with-scroll>ul>li>a:after`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      if (resultTextHover) this.listStyle.push(resultTextHover);
      if (resultTextHoverAfter) this.listStyle.push(resultTextHoverAfter);
    }
    paginationComponent () {
      const componentName = 'pagination';
      const resultPaginationTagLiA = new CssBase({
        rawSelector: `.block_${componentName} ul.${componentName} li a`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.whiteColor
          },
          {
            attributeName: 'color',
            attributeValue: this.greyColor
          }
        ]
      }).run();
      const resultPaginationTagLiAHover = new CssBase({
        rawSelector: `.block_${componentName} ul.${componentName} li a:hover`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'text')
          }
        ]
      }).run();
      const resultPaginationTagLiActive = new CssBase({
        rawSelector: `.block_${componentName} ul.${componentName} li.active a`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('secondary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('secondary', 'text')
          }
        ]
      }).run();
      const resultPaginationTagLiDisabled = new CssBase({
        rawSelector: `.block_${componentName} ul.${componentName} li.disabled a:hover`,
        style: [
          {
            attributeName: 'cursor',
            attributeValue: 'not-allowed'
          }
        ]
      }).run();
      if (resultPaginationTagLiA) this.listStyle.push(resultPaginationTagLiA);
      if (resultPaginationTagLiAHover) this.listStyle.push(resultPaginationTagLiAHover);
      if (resultPaginationTagLiActive) this.listStyle.push(resultPaginationTagLiActive);
      if (resultPaginationTagLiDisabled) this.listStyle.push(resultPaginationTagLiDisabled);
    }
    pillsComponent () {
      const componentName = '.Page-deals-offers .checkout__page .nav-pills li.active .number';
      const result = new CssBase({
        rawSelector: componentName,
        style: [
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('primary', 'text')
          }
        ]
      }).run();
      if (result) {
        this.listStyle.push(result);
      }
    }
    progressbarComponent () {
      const componentName = '.progressbar';
      const result = new CssBase({
        rawSelector: componentName,
        style: [
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultIndeterminate = new CssBase({
        rawSelector: `${componentName} .indeterminate`,
        style: [
          {
            attributeName: 'background-color',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      if (result) this.listStyle.push(result);
      if (resultIndeterminate) this.listStyle.push(resultIndeterminate);
    }
    searchFeatureComponent () {
      const componentName = '.search__feature .dropdown';
      const result = new CssBase({
        rawSelector: `${componentName} .dropdown-label.label__active`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      const resultChecked = new CssBase({
        rawSelector: `${componentName} input[type="checkbox"]:checked + .dropdown-option-div:before`,
        style: [
          {
            attributeName: 'border-color',
            attributeValue: this.getColor('primary', 'main')
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('primary', 'main')
          }
        ]
      }).run();
      if (result) this.listStyle.push(result);
      if (resultChecked) this.listStyle.push(resultChecked);
    }
    vueSliderComponent () {
      const componentName = 'vue-slider-component';
      const resultSliderTooltip = new CssBase({
        rawSelector: `.${componentName} .vue-slider-tooltip`,
        style: [
          {
            attributeName: 'border',
            attributeValue: `1px solid ${this.getColor('tertiary', 'main')}`
          },
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          },
          {
            attributeName: 'color',
            attributeValue: this.getColor('tertiary', 'text')
          }
        ]
      }).run();
      const resultSliderProcess = new CssBase({
        rawSelector: `.${componentName} .vue-slider-process`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      const resultBar = new CssBase({
        rawSelector: `.bar.foreground`,
        style: [
          {
            attributeName: 'background',
            attributeValue: this.getColor('tertiary', 'main')
          }
        ]
      }).run();
      if (resultSliderTooltip) this.listStyle.push