@heartlandone/vega 2.78.0 → 2.79.0

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-test-utils.js

@@ -0,0 +1,172 @@
+import { generateUUID } from '../../../../../utils/misc';
+/**
+ * Generate mock table data for testing purposes.
+ *
+ * @param {{ withHeader?: boolean }} options - Options for generating the table data.
+ * @param {boolean} options.withHeader - Whether to include a table header.
+ * @returns {VegaRTETableBlock} The generated mock table block data.
+ */
+export const mockRTETableData = ({ withHeader } = {}) => {
+  const tableHead = {
+    id: generateUUID(),
+    type: 'table-head',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const tableBody = {
+    id: generateUUID(),
+    type: 'table-body',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'C',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'D',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const children = [];
+  if (withHeader) {
+    children.push(tableHead, tableBody);
+  }
+  else {
+    children.push(tableBody);
+  }
+  return {
+    id: generateUUID(),
+    type: 'table-block',
+    children: children,
+  };
+};

package/dist/collection/components/vega-rich-text-editor/test/filter-styles-strategies/filter-styles-strategy.test.js

@@ -0,0 +1,129 @@
+import { RTEFilterStylesStrategy, } from '../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { RTEFilterStylesStrategyRegistry } from '../../dto/filter-styles-strategies/filter-styles-strategy-registry';
+// ---------------------------------------------------------------------------
+// Concrete stub for testing the abstract class
+// ---------------------------------------------------------------------------
+class StubFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor(styles) {
+    super();
+    this.stylesToBeFiltered = styles;
+  }
+  /** Expose the protected method for testing */
+  testExtract(styles) {
+    return this.extractAndDeleteMatchedStyles(styles);
+  }
+}
+// ---------------------------------------------------------------------------
+// RTEFilterStylesStrategy – extractAndDeleteMatchedStyles
+// ---------------------------------------------------------------------------
+describe('RTEFilterStylesStrategy.extractAndDeleteMatchedStyles', () => {
+  it('should remove properties whose value matches the configured default', () => {
+    const strategy = new StubFilterStylesStrategy({
+      fontFamily: 'Inter',
+      fontSize: '16px',
+    });
+    const styles = { fontFamily: 'Inter', fontSize: '16px', color: 'red' };
+    const result = strategy.testExtract(styles);
+    expect(result).toBe(true);
+    expect(styles).toEqual({ color: 'red' });
+  });
+  it('should return true even when only a subset of defaults are present', () => {
+    const strategy = new StubFilterStylesStrategy({
+      fontFamily: 'Inter',
+      fontSize: '16px',
+    });
+    const styles = { fontFamily: 'Inter' };
+    const result = strategy.testExtract(styles);
+    expect(result).toBe(true);
+    expect(styles).toEqual({});
+  });
+  it('should return false when no property matches', () => {
+    const strategy = new StubFilterStylesStrategy({
+      fontFamily: 'Inter',
+    });
+    const styles = { fontFamily: 'Roboto' };
+    const result = strategy.testExtract(styles);
+    expect(result).toBe(false);
+    expect(styles).toEqual({ fontFamily: 'Roboto' });
+  });
+  it('should not remove a property whose value differs from the default', () => {
+    const strategy = new StubFilterStylesStrategy({
+      marginTop: '0px',
+    });
+    const styles = { marginTop: '10px' };
+    strategy.testExtract(styles);
+    expect(styles).toEqual({ marginTop: '10px' });
+  });
+  it('should return false and not throw when styles is null', () => {
+    const strategy = new StubFilterStylesStrategy({ fontSize: '16px' });
+    expect(strategy.testExtract(null)).toBe(false);
+  });
+  it('should return false and leave styles unchanged when stylesToBeFiltered is empty', () => {
+    const strategy = new StubFilterStylesStrategy({});
+    const styles = { color: 'blue' };
+    const result = strategy.testExtract(styles);
+    expect(result).toBe(false);
+    expect(styles).toEqual({ color: 'blue' });
+  });
+  it('should remove all properties when styles exactly matches defaults', () => {
+    const defaults = { fontFamily: 'Inter', fontWeight: '500', fontSize: '16px' };
+    const strategy = new StubFilterStylesStrategy(defaults);
+    const styles = Object.assign({}, defaults);
+    strategy.testExtract(styles);
+    expect(styles).toEqual({});
+  });
+});
+// ---------------------------------------------------------------------------
+// RTEFilterStylesStrategyRegistry – register / getStrategies
+// ---------------------------------------------------------------------------
+describe('RTEFilterStylesStrategyRegistry', () => {
+  // Use a unique class name per describe to avoid state leakage between tests.
+  const DTO_CLASS_A = '__TestDtoClassA__';
+  const DTO_CLASS_B = '__TestDtoClassB__';
+  it('should return an empty array for an unregistered DTO class name', () => {
+    expect(RTEFilterStylesStrategyRegistry.getStrategies('__NotRegistered__')).toEqual([]);
+  });
+  it('should register a strategy and return it via getStrategies', () => {
+    const strategy = new StubFilterStylesStrategy({ color: 'red' });
+    RTEFilterStylesStrategyRegistry.register(DTO_CLASS_A, strategy);
+    const result = RTEFilterStylesStrategyRegistry.getStrategies(DTO_CLASS_A);
+    expect(result).toContain(strategy);
+  });
+  it('should ignore duplicate registrations of the same instance', () => {
+    const strategy = new StubFilterStylesStrategy({ color: 'blue' });
+    RTEFilterStylesStrategyRegistry.register(DTO_CLASS_B, strategy);
+    RTEFilterStylesStrategyRegistry.register(DTO_CLASS_B, strategy);
+    RTEFilterStylesStrategyRegistry.register(DTO_CLASS_B, strategy);
+    const result = RTEFilterStylesStrategyRegistry.getStrategies(DTO_CLASS_B);
+    expect(result.filter((s) => s === strategy).length).toBe(1);
+  });
+  it('should allow multiple distinct strategy instances for the same DTO class', () => {
+    const dtoClass = '__TestDtoClassMulti__';
+    const s1 = new StubFilterStylesStrategy({ fontSize: '16px' });
+    const s2 = new StubFilterStylesStrategy({ fontWeight: '500' });
+    RTEFilterStylesStrategyRegistry.register(dtoClass, s1);
+    RTEFilterStylesStrategyRegistry.register(dtoClass, s2);
+    const result = RTEFilterStylesStrategyRegistry.getStrategies(dtoClass);
+    expect(result).toContain(s1);
+    expect(result).toContain(s2);
+  });
+  it('should keep strategies for different DTO class names independent', () => {
+    const classX = '__TestDtoClassX__';
+    const classY = '__TestDtoClassY__';
+    const strategyX = new StubFilterStylesStrategy({ color: 'green' });
+    const strategyY = new StubFilterStylesStrategy({ color: 'yellow' });
+    RTEFilterStylesStrategyRegistry.register(classX, strategyX);
+    RTEFilterStylesStrategyRegistry.register(classY, strategyY);
+    expect(RTEFilterStylesStrategyRegistry.getStrategies(classX)).not.toContain(strategyY);
+    expect(RTEFilterStylesStrategyRegistry.getStrategies(classY)).not.toContain(strategyX);
+  });
+  it('getStrategies should return a new array snapshot each call', () => {
+    const dtoClass = '__TestDtoClassSnapshot__';
+    const strategy = new StubFilterStylesStrategy({ opacity: '1' });
+    RTEFilterStylesStrategyRegistry.register(dtoClass, strategy);
+    const first = RTEFilterStylesStrategyRegistry.getStrategies(dtoClass);
+    const second = RTEFilterStylesStrategyRegistry.getStrategies(dtoClass);
+    expect(first).not.toBe(second);
+    expect(first).toEqual(second);
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/spec-utils.js

@@ -6,19 +6,22 @@ import { tryGetDocument } from '../../../utils/try-get-document';
  * @param {SpecPage} page - The SpecPage instance.
  * @param {{ textEl: HTMLElement; startOffset: number; endOffset: number }} options - Options for text selection.
  * @param {HTMLElement} options.textEl - The text element to select within.
+ * @param {HTMLElement} [options.endContainer] - The end container element of the selection.
+ * @param {HTMLElement} [options.commonAncestorContainer] - The common ancestor container of the selection.
  * @param {number} options.startOffset - The start offset of the selection.
  * @param {number} options.endOffset - The end offset of the selection.
  */
 export const mockTextSelection = async (page, options) => {
   const richTextEditorContent = find(page.body, 'vega-rich-text-editor >>> vega-rich-text-content');
   richTextEditorContent.shadowRoot['getSelection'] = jest.fn(() => {
+    var _a;
     return {
       rangeCount: 1,
       removeAllRanges: jest.fn(),
       getRangeAt: jest.fn().mockReturnValue({
         startContainer: options.textEl.firstChild,
-        endContainer: options.textEl.firstChild,
-        commonAncestorContainer: options.textEl,
+        endContainer: ((_a = options.endContainer) === null || _a === void 0 ? void 0 : _a.firstChild) || options.textEl.firstChild,
+        commonAncestorContainer: options.commonAncestorContainer || options.textEl,
         startOffset: options.startOffset,
         endOffset: options.endOffset,
         intersectsNode: jest.fn().mockReturnValue(true),

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -78,6 +78,10 @@
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
   cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 :host .rich-text-editor-container.disabled:hover, :host .rich-text-editor-container.disabled:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -38,7 +38,6 @@ import { RichTextEditorRequiredRule } from '../../helpers/validator/rules/rich-t
 import { InsertImageController } from './slimmers/controllers/insert-image-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { FocusController } from './slimmers/controllers/focus-controller';
-import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
@@ -102,7 +101,6 @@ export class VegaRichTextEditor {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
-    this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
@@ -829,9 +827,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-range-input-renderer.js

@@ -89,13 +89,13 @@ export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
     return (h(Fragment, null,
       h("vega-flex", { class: "v-w-full", gap: "0", "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
         h("div", { class: "time-picker-input time-picker-input-start vega-flex-basis-0 vega-flex-grow" },
-          h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholderBySourceType('start'), disabled: this.disabled, size: this.size, value: startValue, ref: (ref) => {
+          h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholderBySourceType('start'), disabled: this.disabled, readOnly: this.readOnly, size: this.size, value: startValue, ref: (ref) => {
               this.handlerEvent(ref);
               return (this.startTimeInputRef = ref);
             }, "show-clear-icon": "false" })),
         h("span", { class: "range-input-divider v-min-w-min vega-flex-shrink-0" }),
         h("div", { class: "time-picker-input time-picker-input-end vega-flex-basis-0 vega-flex-grow" },
-          h("vega-input", { placeholder: this.getPlaceholderBySourceType('end'), disabled: this.disabled, size: this.size, value: endValue, ref: (ref) => {
+          h("vega-input", { placeholder: this.getPlaceholderBySourceType('end'), disabled: this.disabled, readOnly: this.readOnly, size: this.size, value: endValue, ref: (ref) => {
               this.handlerEvent(ref);
               return (this.endTimeInputRef = ref);
             }, "show-clear-icon": "false" }))),
@@ -176,3 +176,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "readOnly", void 0);

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-single-input-renderer.js

@@ -41,7 +41,7 @@ export class VegaTimePickerSingleInputRenderer extends VegaSlimmer {
   /* istanbul ignore next */
   render() {
     return (h("div", { class: "time-picker-input" },
-      h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholder(), disabled: this.disabled, size: this.size, value: typeof this.value === 'string' ? this.value : '', ref: (ref) => {
+      h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholder(), disabled: this.disabled, readOnly: this.readOnly, size: this.size, value: typeof this.value === 'string' ? this.value : '', ref: (ref) => {
           this.timeInputRef = ref;
           this.handleVegaInputEvent(ref);
         } })));
@@ -101,3 +101,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerSingleInputRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "readOnly", void 0);

package/dist/collection/components/vega-time-picker/vega-time-picker.js

@@ -157,6 +157,18 @@ export class VegaTimePicker {
      * @vegaVersion 1.12.0
      */
     this.disabled = false;
+    /**
+     * Specifies whether the time picker field is set to read-only.
+     *
+     * When set to `true`, prevents manual keyboard text entry in the input field on
+     *    all platforms. On touch devices, this typically suppresses the virtual keyboard.
+     *    This does not lock the component value; users can still select/update time via
+     *    the dropdown UI (and programmatic updates still work).
+     *
+     * @default false
+     * @vegaVersion 2.79.0
+     */
+    this.readOnly = false;
     /**
      * Specifies the validation status of the time picker component.
      *
@@ -455,6 +467,30 @@ export class VegaTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.79.0"
+          }],
+        "text": "Specifies whether the time picker field is set to read-only.\n\nWhen set to `true`, prevents manual keyboard text entry in the input field on\n   all platforms. On touch devices, this typically suppresses the virtual keyboard.\n   This does not lock the component value; users can still select/update time via\n   the dropdown UI (and programmatic updates still work)."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

package/dist/collection/constants/runtime-metrics-payload-definition/vega-time-picker/runtime-metrics-payload-definition.js

@@ -47,4 +47,28 @@ export const VegaTimePickerRuntimeMetricsPayloadDefinition = [
      */
     payloadValue: (host) => host.mode === 'range',
   },
+  {
+    payloadKey: 'READ_ONLY_IS_TRUE',
+    payloadDescription: 'Specifies whether the time picker field is set to read-only',
+    /**
+     * The function checks if the `readOnly` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.readOnly === true,
+  },
+  {
+    payloadKey: 'READ_ONLY_IS_FALSE',
+    payloadDescription: 'Specifies whether the time picker field is set to read-only',
+    /**
+     * The function checks if the `readOnly` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.readOnly === false,
+  },
 ];

package/dist/collection/constants/ui.js

@@ -32,6 +32,8 @@ export const FlexJustifyContent = [
   'space-evenly',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
+export const GridJustifyItems = ['start', 'center', 'end', 'stretch'];
+// eslint-disable-next-line @typescript-eslint/typedef
 export const FlexWrap = ['nowrap', 'wrap', 'wrap-reverse'];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const BoxDisplay = ['block', 'inline-block', 'none'];

package/dist/collection/global/scripts/before-vega-load.js

@@ -24,6 +24,7 @@ import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/ex
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
 import { VegaRTEFunctionExtension } from '../../components/vega-rich-text-editor/extensions/functions/function-extension';
+import { VegaRTETableExtension } from '../../components/vega-rich-text-editor/extensions/table/table-extension';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -196,6 +197,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELanguageExtension = VegaRTELanguageExtension;
   globalThis.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
   globalThis.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+  globalThis.VegaRTETableExtension = VegaRTETableExtension;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -68,3 +68,5 @@ export const VegaInternalUpdateVegaInputValue = new VegaInternalEventID('updateV
 export const VegaInternalFocusVegaInput = new VegaInternalEventID('focusVegaInput');
 export const VegaInternalSetupVegaInputMaskConfig = new VegaInternalEventID('setupVegaInputMaskConfig');
 export const VegaInternalCodeBlockBlur = new VegaInternalEventID('codeBlockBlur');
+export const VegaInternalRTEExtensionTableCellsSelectionAnchor = new VegaInternalEventID('rteExtensionTableCellsSelectionAnchor');
+export const VegaInternalRTEExtensionTableCellSelectionChange = new VegaInternalEventID('rteExtensionTableCellSelectionChange');

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-format-facade.js

@@ -3,6 +3,7 @@ import ResponsiveMarginFormatter from './responsive-margin-formatter';
 import ResponsiveGapFormatter from './responsive-gap-formatter';
 import ResponsiveColumnsFormatter from './responsive-grid-columns-formatter';
 import ResponsiveRowsFormatter from './responsive-grid-rows-formatter';
+import ResponsiveGridJustifyItemsFormatter from './responsive-grid-justify-items-formatter';
 import ResponsiveSizeFormatter from './responsive-size-formatter';
 import ResponsiveTranslocationFormatter from './responsive-translocation-formatter';
 import ResponsiveDisplayFormatter from './responsive-display-formatter';
@@ -48,6 +49,8 @@ class ResponsiveFormatFacade {
         return ResponsiveColumnsFormatter.format(input);
       case 'gridRow':
         return ResponsiveRowsFormatter.format(input);
+      case 'gridJustifyItems':
+        return ResponsiveGridJustifyItemsFormatter.format(input);
       case 'size':
         return ResponsiveSizeFormatter.format(input);
       case 'translocation':

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-grid-justify-items-formatter.js

@@ -0,0 +1,29 @@
+import { isBreakpointsForPrefixType, isGridJustifyItemsType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { GridJustifyItems } from '../../../constants/ui';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for formatting GridJustifyItemsType with BreakpointsForPrefixType to CSS class string.
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveGridJustifyItemsFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a GridJustifyItemsType and a breakpoint and returns CSS class string.
+   *
+   * @param {GridJustifyItemsType} input - GridJustifyItemsType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isGridJustifyItemsType(input)) {
+      return `${prefix}v-justify-items-${input}`;
+    }
+    else {
+      LogUtility.warn(`The grid justifyItems value ${input} is invalid, it must be a value of: `, GridJustifyItems);
+      return '';
+    }
+  }
+}
+export default new ResponsiveGridJustifyItemsFormatter();

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-grid-justify-items-formatter.test.js

@@ -0,0 +1,19 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsiveGridJustifyItemsFormatter from '../../responsive-map-formatter/responsive-grid-justify-items-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveGridJustifyItemsFormatter.formatToken('left');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('start');
+  expect(result).toEqual('v-justify-items-start');
+});
+test('should return format when input in scope and with prefix', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('center', 'M');
+  expect(result).toEqual('M:v-justify-items-center');
+});
+test('should return format when input in scope and with prefix not in scope', () => {
+  const result = ResponsiveGridJustifyItemsFormatter.formatToken('end', 'test');
+  expect(result).toEqual('v-justify-items-end');
+});