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

Theme generator for all project Travlr

/**
  ****************************************************
  ***                        *******    ******    ****
  ***                        ******    ******    *****
  ***********       **************    ******    ******
  ***********       *************    ******    *******
  ***********       ************    ******    ********
  ***********       ***********    ******    *********
  ***********       **********    ******    **********
  ***********       *********    ******    ***********
  ***********       ********    ******    ************
  ***********       *******    ******    *************
  ***********       ******    ******    **************
  ****************************************************
  * --------------------------------------------------
  * Travlr Theme Generator (v0.1.16)
  * Copyright 2021
  * By Travlr Team
  * --------------------------------------------------
  */
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(resultSliderTooltip);
    if (resultSliderProcess) this.listStyle.push(resultSliderProcess);
    if (resultBar) this.listStyle.push(resultBar);
  }
  cookieConsentComponent () {
    const resultCtaButton = new CssBase({
      rawSelector: `#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll`,
      style: [
        {
          attributeName: 'background-color',
          attributeValue: this.getColor('secondary', 'main')
        },
        {
          attributeName: 'color',
          attributeValue: this.getColor('secondary', 'text')
        }
      ]
    }).run();
    const resultCheckboxContainer = new CssBase({
      rawSelector: `input[type="checkbox"].CybotCookiebotDialogBodyLevelButton:checked ~ label:before`,
      style: [
        {
          attributeName: 'background-color',
          attributeValue: this.getColor('secondary', 'main')
        },
        {
          attributeName: 'border-color',
          attributeValue: this.getColor('secondary', 'main')
        }
      ]
    }).run();
    const resultCheckboxTick = new CssBase({
      rawSelector: `input[type="checkbox"].CybotCookiebotDialogBodyLevelButton + label:after`,
      style: [
        {
          attributeName: 'border-color',
          attributeValue: this.getColor('secondary', 'text')
        }
      ]
    }).run();
    if (resultCtaButton) this.listStyle.push(resultCtaButton);
    if (resultCheckboxContainer) this.listStyle.push(resultCheckboxContainer);
    if (resultCheckboxTick) this.listStyle.push(resultCheckboxTick);
  }
  secondaryTextComponent () {
    const resultText = new CssBase({
      rawSelector: '.block-carousel-popular-see-more-link, .l-booking-management .see-link-a, .t-color-primary, .t-link-primary, .t-link-primary i, .trv__readmore, .trv__readmore > i, .collapseRoomChoices_link, .collapseRoomChoices_link > i, .action__more-details, .action__more-details > i, .content-reserve__show-more > a, .block-carousel-popular .arrow-icon::before',
      style: [
        {
          attributeName: 'color',
          attributeValue: this.getColor('secondary', 'main')
        }
      ]
    }).run();
    if (resultText) this.listStyle.push(resultText);
  }
  articlePageComponent () {
    const resultButton = new CssBase({
      rawSelector: '.form-comment__send-button > .btn-send',
      style: [
        {
          attributeName: 'color',
          attributeValue: this.getColor('primary', 'text')
        },
        {
          attributeName: 'background',
          attributeValue: this.getColor('primary', 'main')
        }
      ]
    }).run();
    if (resultButton) this.listStyle.push(resultButton);
  }
  tripsPageComponent () {
    const resultSecondaryButtons = new CssBase({
      rawSelector: `.l-list-trip .section-filter .wrapper-filter__btn .btn.active, .l-list-trip .section-filter .wrapper-filter__btn .btn:hover, .l-list-trip .se