@globalpayments/vega 2.40.0 → 2.41.0

package/dist/collection/components/vega-box/slimmers/controllers/vega-box-responsive-style-controller.js

@@ -0,0 +1,89 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
+/**
+ * Generate the responsive style for the component.
+ */
+export class VegaBoxResponsiveStyleController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.paddingStyleRef = null;
+    this.marginStyleRef = null;
+    this.cornersStyleRef = null;
+  }
+  /**
+   * Create all responsive style content.
+   */
+  setDefaultStyle() {
+    this.generatePaddingStyle();
+    this.generateMarginStyle();
+    this.generateCornersStyle();
+  }
+  /**
+   * Update the padding style when the property padding update.
+   */
+  generatePaddingStyle() {
+    const style = formatAndValidResponsiveToken(this.padding, 'paddingStyle');
+    this.attachStyle('padding', style);
+  }
+  /**
+   * Update the margin style when the property margin update.
+   */
+  generateMarginStyle() {
+    const style = formatAndValidResponsiveToken(this.margin, 'marginStyle');
+    this.attachStyle('margin', style);
+  }
+  /**
+   * Update the corners style when the property corners update.
+   */
+  generateCornersStyle() {
+    const style = formatAndValidResponsiveToken(this.corners, 'cornersStyle');
+    this.attachStyle('corners', style);
+  }
+  /**
+   * Create style element or update the style element content.
+   *
+   * @param {StyleType} styleName - The style property name.
+   * @param {string} cssText - The style content.
+   */
+  attachStyle(styleName, cssText) {
+    if (cssText) {
+      const elementKey = `${styleName}StyleRef`;
+      const container = this.host.shadowRoot;
+      if (!this[elementKey]) {
+        this[elementKey] = document.createElement('style');
+        container.appendChild(this[elementKey]);
+      }
+      this[elementKey].innerHTML = cssText;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaBoxResponsiveStyleController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBoxResponsiveStyleController.prototype, "padding", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBoxResponsiveStyleController.prototype, "margin", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBoxResponsiveStyleController.prototype, "corners", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaBoxResponsiveStyleController.prototype, "setDefaultStyle", null);
+__decorate([
+  MapToComponentMethod('watchPaddingChange')
+], VegaBoxResponsiveStyleController.prototype, "generatePaddingStyle", null);
+__decorate([
+  MapToComponentMethod('watchMarginChange')
+], VegaBoxResponsiveStyleController.prototype, "generateMarginStyle", null);
+__decorate([
+  MapToComponentMethod('watchCornersChange')
+], VegaBoxResponsiveStyleController.prototype, "generateCornersStyle", null);