@globalpayments/vega 2.13.1 → 2.15.0

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -0,0 +1,345 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Element, Host, State, Prop, Watch, Event } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaCalendarRenderer } from './slimmers/common/renderers/vega-calendar-renderer';
+import { VegaCalendarSwitchPanelRenderer } from './slimmers/common/renderers/vega-calendar-switch-panel';
+import { VegaCalendarViewRenderer } from './slimmers/common/renderers/vega-calendar-view-renderer';
+import { VegaCalendarMonthViewRenderer } from './slimmers/month-view/renderers/vega-calendar-month-view-renderer';
+import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/vega-calendar-view-with-time-renderer';
+import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange, VegaEventClick } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
+import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaCalendarMonthEventRenderer } from './slimmers/month-view/renderers/vega-calendar-month-event-renderer';
+import { VegaCalendarEventController } from './slimmers/common/controllers/vega-calendar-event-controller';
+import { VegaCalendarEventResponsiveController } from './slimmers/common/controllers/vega-calendar-event-responsive-controller';
+import { VegaCalendarFullDayEventRenderer } from './slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-renderer';
+import { VegaCalendarEventItemRenderer } from './slimmers/common/renderers/vega-calendar-event-item-renderer';
+import { VegaCalendarDayViewEventLayoutRenderer } from './slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer';
+import { VegaCalendarTimedEventRenderer } from './slimmers/day-view/renderers/timed-event/vega-calendar-timed-event-renderer';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { VegaCalendarFullDayEventLayoutRenderer } from './slimmers/common/renderers/vega-calendar-full-day-event-layout-renderer';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/subStateNotifySlimmer';
+export class VegaCalendar {
+  constructor() {
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaCalendarRenderer();
+    this.switchPanelRenderer = new VegaCalendarSwitchPanelRenderer();
+    this.viewRenderer = new VegaCalendarViewRenderer();
+    this.monthViewRenderer = new VegaCalendarMonthViewRenderer();
+    this.viewWithTimeRenderer = new VegaCalendarViewWithTimeRenderer();
+    this.timeLineRenderer = new VegaCalendarTimeLineRenderer();
+    this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
+    //The  current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
+    this.currentPeriodController = new VegaCalendarCurrentPeriodController();
+    this.calendarViewController = new VegaCalendarViewController();
+    this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
+    this.eventItemRenderer = new VegaCalendarEventItemRenderer();
+    this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
+    this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
+    this.calendarEventController = new VegaCalendarEventController();
+    this.eventResponsiveController = new VegaCalendarEventResponsiveController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
+    this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
+    this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
+    this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.calendarEvents = [];
+    /**
+     * Specifies the current view mode of the calendar.
+     */
+    /* eslint-disable @stencil/strict-mutable */
+    this.viewMode = 'month';
+    /**
+     * Specifies the time format of the calendar.
+     */
+    this.timeFormat = '24-hour';
+  }
+  /**
+   * watch the state calendar current period change
+   */
+  watchCurrentPeriodChange() {
+    methodPlaceholder();
+  }
+  /**
+   * Watch the view mode change
+   *
+   * @param {VegaCalendarViewModeType} newValue the new value of view mode
+   */
+  watchViewModeChange(newValue) {
+    methodPlaceholder(newValue);
+  }
+  /**
+   * Watch the calendar events change
+   *
+   * @param {VegaCalendarRawEvent[]} newValue
+   */
+  watchEventsChange(newValue) {
+    methodPlaceholder(newValue);
+  }
+  /**
+   * Watches changes in the calendar's time format.
+   *
+   * @param {TimeFormat} newValue
+   */
+  watchTimeFormat(newValue) {
+    methodPlaceholder(newValue);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-calendar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-calendar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-calendar.css"]
+  }; }
+  static get properties() { return {
+    "viewMode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaCalendarViewModeType",
+        "resolved": "\"day\" | \"month\" | \"week\"",
+        "references": {
+          "VegaCalendarViewModeType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the current view mode of the calendar."
+      },
+      "attribute": "view-mode",
+      "reflect": false,
+      "defaultValue": "'month'"
+    },
+    "events": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCalendarRawEvent[]",
+        "resolved": "VegaCalendarRawEvent[]",
+        "references": {
+          "VegaCalendarRawEvent": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the events of the calendar."
+      }
+    },
+    "timeFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TimeFormat",
+        "resolved": "\"12-hour\" | \"24-hour\"",
+        "references": {
+          "TimeFormat": {
+            "location": "import",
+            "path": "../../types/general"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the time format of the calendar."
+      },
+      "attribute": "time-format",
+      "reflect": false,
+      "defaultValue": "'24-hour'"
+    }
+  }; }
+  static get states() { return {
+    "calendarView": {},
+    "currentPeriod": {},
+    "calendarEvents": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying the component view content change after a switch panel click."
+      },
+      "complexType": {
+        "original": "VegaCalendarChangeEventType",
+        "resolved": "{ currentPeriod: { year: number; month: number; startDate: VegaCalendarDateType; endDate: VegaCalendarDateType; }; viewMode: VegaCalendarViewModeType; }",
+        "references": {
+          "VegaCalendarChangeEventType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the component view content change after a switch panel click."
+      },
+      "complexType": {
+        "original": "VegaCalendarChangeEventType",
+        "resolved": "{ currentPeriod: { year: number; month: number; startDate: VegaCalendarDateType; endDate: VegaCalendarDateType; }; viewMode: VegaCalendarViewModeType; }",
+        "references": {
+          "VegaCalendarChangeEventType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "vegaEventClick",
+      "name": "vegaEventClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying that a component event item is clicked."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventClickInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; }",
+        "references": {
+          "VegaCalendarEventClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "eventClick",
+      "name": "eventClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying that a component event item is clicked."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventClickInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; }",
+        "references": {
+          "VegaCalendarEventClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "currentPeriod",
+      "methodName": "watchCurrentPeriodChange"
+    }, {
+      "propName": "viewMode",
+      "methodName": "watchViewModeChange"
+    }, {
+      "propName": "events",
+      "methodName": "watchEventsChange"
+    }, {
+      "propName": "timeFormat",
+      "methodName": "watchTimeFormat"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendar.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "switchPanelRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthViewRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "currentPeriodController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarViewController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarEventController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventResponsiveController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-children-controller.js

@@ -4,13 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutationObserverSlimmer';
 /**
  * The controller for the table children components.
  */
 export class VegaDropdownChildrenController extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.renderer.getDropdownContentBoxRef(),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-dropdown-items-dom-change-e2e}
+       */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.syncUpDropdownCurrentData(),
+    });
     this.labelSet = new Set();
     this.keySet = new Set();
     /**
@@ -18,7 +33,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
     this.collectKeyAndLabelFromSlot = () => {
-      const container = this.renderer.getDropdownRef() || this.host;
+      const container = this.renderer.getDropdownContentBoxRef() || this.host;
       Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
         item.label && this.labelSet.add(item.label);
         item.itemKey && this.keySet.add(item.itemKey);
@@ -30,8 +45,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
    */
   /* istanbul ignore next */
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    methodPlaceholder();
   }
   /**
    * Component lifecycle - [componentWillLoad]
@@ -43,7 +57,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
    * Component lifecycle - [componentDidLoad]
    */
   componentDidLoad() {
-    this.initMutationObserver();
+    methodPlaceholder();
   }
   /**
    * The function "watchSource" synchronizes the dropdown current data.
@@ -101,23 +115,6 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
     });
   }
   /* istanbul ignore next */
-  /**
-   * The below method is e2e-test covered in@see{module:vega-dropdown-items-dom-change-e2e}
-   */
-  initMutationObserver() {
-    if (this.renderModeController.isSourceRenderMode())
-      return;
-    this.mutationObserver = new MutationObserver(async (mutations) => {
-      if (mutations.filter((mutation) => mutation.target.slot === 'items').length > 0) {
-        this.selectedController.watchSource();
-      }
-    });
-    this.mutationObserver.observe(this.listRenderer.getTemplateItemsRef(), {
-      childList: true,
-      subtree: true,
-    });
-  }
-  /* istanbul ignore next */
   /**
    * The below method is e2e-test covered in @see{module:vega-dropdown-items-dom-change-e2e}
    */
@@ -147,6 +144,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-selected-controller.js

@@ -133,7 +133,6 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
   checkSelectedSourceKey(key) {
     if (this.renderModeController.isSourceRenderMode()) {
       let result;
-      this.childrenController.syncUpDropdownCurrentData();
       if (typeof key === 'string' &&
         this.selectType === 'single' &&
         this.childrenController.isKeyExist(key)) {

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-list-renderer.js

@@ -23,9 +23,6 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
   getVirtualScrollRef() {
     return this.virtualScrollRef;
   }
-  getTemplateItemsRef() {
-    return this.templateItemsRef;
-  }
   renderBySource() {
     return (h(Fragment, null,
       this.renderLoading(),
@@ -68,7 +65,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
         ['v-hidden']: this.isLoading,
       }, style: {
         maxHeight: `${this.maxHeightOfItemsContainer}px`,
-      }, ref: (e) => (this.templateItemsRef = e) },
+      } },
       h("slot", { name: "items" })));
   }
   /**

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -40,9 +40,13 @@ export class VegaDropdown {
     this.keyboardController = new VegaDropdownKeyboardController();
     this.appenderController = new VegaDropdownAppenderController();
     this.searchController = new VegaDropdownSearchController();
+    /**
+     * childrenController should be defined before selectedController,
+     *     which can ensure collecting information before verifying it.
+     */
+    this.childrenController = new VegaDropdownChildrenController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
-    this.childrenController = new VegaDropdownChildrenController();
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
@@ -1025,13 +1029,13 @@ __decorate([
 ], VegaDropdown.prototype, "searchController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDropdown.prototype, "selectedController", void 0);
+], VegaDropdown.prototype, "childrenController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDropdown.prototype, "renderModeController", void 0);
+], VegaDropdown.prototype, "selectedController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaDropdown.prototype, "childrenController", void 0);
+], VegaDropdown.prototype, "renderModeController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-ellipse-renderer.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Ellipse Skeleton renderer
+ */
+export class VegaSkeletonEllipseRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '120px', height = '120px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    const heightWithUnit = parseToPixelString(height);
+    return {
+      width: widthWithUnit,
+      height: heightWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-ellipse" });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonEllipseRenderer.prototype, "width", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonEllipseRenderer.prototype, "height", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-full-width-paragraph-renderer.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Full width paragraph Skeleton renderer
+ */
+export class VegaSkeletonFullWidthParagraphRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '100%' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return { width: widthWithUnit };
+  }
+  renderChildren() {
+    return (h("vega-flex", { gap: "size-16", direction: "col" },
+      h("div", { class: "vega-skeleton-text full-width" }),
+      h("div", { class: "vega-skeleton-text full-width" }),
+      h("div", { class: "vega-skeleton-text full-width" })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonFullWidthParagraphRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-image-renderer.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Image Skeleton renderer
+ */
+export class VegaSkeletonImageRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '180px', height = '120px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    const heightWithUnit = parseToPixelString(height);
+    return {
+      width: widthWithUnit,
+      height: heightWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-image" });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "height", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-paragraph-renderer.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Paragraph Skeleton renderer
+ */
+export class VegaSkeletonParagraphRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    return { width: this.getWidthWithUnit() };
+  }
+  renderChildren() {
+    return (h("vega-flex", { gap: "size-16", direction: "col" },
+      h("div", { class: "vega-skeleton-text" }),
+      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.8)` } }),
+      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.6)` } })));
+  }
+  getWidthWithUnit() {
+    const { width = '320px' } = this;
+    return parseToPixelString(width);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonParagraphRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-renderer-base.abstract.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { sanitizeVegaComponent } from '../../../../utils/component';
+/**
+ * Skeleton host renderer
+ */
+export class VegaSkeletonRendererBase extends VegaSlimmer {
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { animated: this.animated }, style: this.assignHostStyle() }, this.renderChildren()), this.host);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "animated", void 0);