primevue/carousel/style/carouselstyle.js

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

this.primevue = this.primevue || {};
this.primevue.carousel = this.primevue.carousel || {};
this.primevue.carousel.style = (function (BaseStyle) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);

    var css = "\n@layer primevue {\n    .p-carousel {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .p-carousel-content {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n\n    .p-carousel-prev,\n    .p-carousel-next {\n        align-self: center;\n        flex-grow: 0;\n        flex-shrink: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-carousel-container {\n        display: flex;\n        flex-direction: row;\n    }\n\n    .p-carousel-items-content {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .p-carousel-items-container {\n        display: flex;\n        flex-direction: row;\n    }\n\n    .p-carousel-indicators {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .p-carousel-indicator > button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    /* Vertical */\n    .p-carousel-vertical .p-carousel-container {\n        flex-direction: column;\n    }\n\n    .p-carousel-vertical .p-carousel-items-container {\n        flex-direction: column;\n        height: 100%;\n    }\n\n    /* Keyboard Support */\n    .p-items-hidden .p-carousel-item {\n        visibility: hidden;\n    }\n\n    .p-items-hidden .p-carousel-item.p-carousel-item-active {\n        visibility: visible;\n    }\n}\n";
    var classes = {
      root: function root(_ref) {
        var instance = _ref.instance;
        return ['p-carousel p-component', {
          'p-carousel-vertical': instance.isVertical(),
          'p-carousel-horizontal': !instance.isVertical()
        }];
      },
      header: 'p-carousel-header',
      content: 'p-carousel-content',
      container: 'p-carousel-container',
      previousButton: function previousButton(_ref2) {
        var instance = _ref2.instance;
        return ['p-carousel-prev p-link', {
          'p-disabled': instance.backwardIsDisabled
        }];
      },
      previousButtonIcon: 'p-carousel-next-icon',
      itemsContent: 'p-carousel-items-content',
      itemsContainer: 'p-carousel-items-container',
      itemCloned: function itemCloned(_ref3) {
        var index = _ref3.index,
          value = _ref3.value,
          totalShiftedItems = _ref3.totalShiftedItems,
          d_numVisible = _ref3.d_numVisible;
        return ['p-carousel-item p-carousel-item-cloned', {
          'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
          'p-carousel-item-start': index === 0,
          'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
        }];
      },
      item: function item(_ref4) {
        var instance = _ref4.instance,
          index = _ref4.index;
        return ['p-carousel-item', {
          'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
          'p-carousel-item-start': instance.firstIndex() === index,
          'p-carousel-item-end': instance.lastIndex() === index
        }];
      },
      nextButton: function nextButton(_ref5) {
        var instance = _ref5.instance;
        return ['p-carousel-next p-link', {
          'p-disabled': instance.forwardIsDisabled
        }];
      },
      nextButtonIcon: 'p-carousel-prev-icon',
      indicators: 'p-carousel-indicators p-reset',
      indicator: function indicator(_ref6) {
        var instance = _ref6.instance,
          index = _ref6.index;
        return ['p-carousel-indicator', {
          'p-highlight': instance.d_page === index
        }];
      },
      indicatorButton: 'p-link',
      footer: 'p-carousel-footer'
    };
    var CarouselStyle = BaseStyle__default["default"].extend({
      name: 'carousel',
      css: css,
      classes: classes
    });

    return CarouselStyle;

})(primevue.base.style);