@globalpayments/vega 2.39.0 → 2.41.0

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-border-radius-style-formatter.js

@@ -0,0 +1,63 @@
+import { isBorderRadiusTokenType, isDirectionalBorderRadiusType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { BorderRadius } from '../../../constants/public-api';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+import { sortAsExistArray } from '../../../utils/array';
+import { FeatureFlag } from '../../public-api';
+const BORDER_RADIUS_DIRECTION_STYLE_MAP = {
+  'top': ['border-top-left-radius', 'border-top-right-radius'],
+  'right': ['border-top-right-radius', 'border-bottom-right-radius'],
+  'bottom': ['border-bottom-left-radius', 'border-bottom-right-radius'],
+  'left': ['border-top-left-radius', 'border-bottom-left-radius'],
+  'top-left': ['border-top-left-radius'],
+  'top-right': ['border-top-right-radius'],
+  'bottom-left': ['border-bottom-left-radius'],
+  'bottom-right': ['border-bottom-right-radius'],
+};
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS text string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBorderRadiusStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
+   *
+   * @param {CornersType} input - CornersType
+   * @returns {string} - A string of CSS text.
+   */
+  formatToken(input) {
+    if (isBorderRadiusTokenType(input)) {
+      return `border-radius:${BorderRadius[input]}px`;
+    }
+    else if (isDirectionalBorderRadiusType(input)) {
+      return this.getDirectionKeys(input)
+        .map((direction) => {
+        return BORDER_RADIUS_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${BorderRadius[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, BorderRadius);
+      return '';
+    }
+  }
+  /**
+   * Get the corners object keys. Order the keys as exist array if the feature flag enabled.
+   * The order affects the weight of the styles.
+   *
+   * @param {DirectionalBorderRadiusType} map - The corners input object.
+   * @returns {string[]} - The input object keys.
+   */
+  getDirectionKeys(map) {
+    const directionKeys = Object.keys(map);
+    return FeatureFlag.isEnabled('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR')
+      ? sortAsExistArray(directionKeys, (direction) => map[direction], undefined, Object.keys(BorderRadius))
+      : directionKeys;
+  }
+}
+export default new ResponsiveBorderRadiusStyleFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-css-text-formatter.js

@@ -0,0 +1,45 @@
+import { isResponsiveType } from '../../../types/type-guard';
+import { Breakpoints } from '../../../constants/public-api';
+/**
+ * Get the style text from the responsive property.
+ */
+export class ResponsiveCSSTextFormatter {
+  /**
+   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
+   *
+   * @typedef Flag key of ManagedResponsiveScopeInput
+   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
+   * @returns {string} - CSS text string.
+   */
+  format(input) {
+    if (isResponsiveType(input)) {
+      return Object.keys(input)
+        .map((breakpoint) => {
+        const breakpointValue = input[breakpoint];
+        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
+        return this.generateCssText(this.formatToken(breakpointValue, breakPointFormatted), breakpoint);
+      })
+        .join(' ');
+    }
+    else {
+      return this.generateCssText(this.formatToken(input));
+    }
+  }
+  /**
+   * Create the complete style text with media query selector.
+   *
+   * @param {string} cssText - The style snippet.
+   * @param {BreakpointsTokenType} breakpoint - The screen breakpoint.
+   * @returns {string} - Style content with css selector.
+   */
+  generateCssText(cssText, breakpoint) {
+    let result = '';
+    if (cssText) {
+      result =
+        breakpoint && breakpoint !== 'default'
+          ? `@media (min-width:${Breakpoints[breakpoint]}px){:host{${cssText}}}`
+          : `:host{${cssText}}`;
+    }
+    return result;
+  }
+}

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

@@ -15,6 +15,9 @@ import ResponsiveBoxDisplayFormatter from './responsive-box-display-formatter';
 import ResponsiveWidthAndHeightFormatter from './responsive-width-and-height-formatter';
 import ResponsiveBorderRadiusFormatter from './responsiv-border-radius-formatter';
 import ResponsiveTextAlignFormatter from './responsive-text-align-formatter';
+import responsivePaddingStyleFormatter from './responsive-padding-style-formatter';
+import responsiveMarginStyleFormatter from './responsive-margin-style-formatter';
+import responsiveBorderRadiusStyleFormatter from './responsive-border-radius-style-formatter';
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -67,6 +70,12 @@ class ResponsiveFormatFacade {
         return ResponsiveBorderRadiusFormatter.format(input);
       case 'textAlign':
         return ResponsiveTextAlignFormatter.format(input);
+      case 'paddingStyle':
+        return responsivePaddingStyleFormatter.format(input);
+      case 'marginStyle':
+        return responsiveMarginStyleFormatter.format(input);
+      case 'cornersStyle':
+        return responsiveBorderRadiusStyleFormatter.format(input);
       default:
         throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
     }

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-margin-formatter.js

@@ -13,6 +13,7 @@ const MARGIN_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format MarginType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsiveMarginStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-margin-style-formatter.js

@@ -0,0 +1,44 @@
+import { isSpacingTokenType, isDirectionalSpacingType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { Spacing } from '../../../constants/tokens/spacing';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+const MARGIN_DIRECTION_STYLE_MAP = {
+  top: ['margin-top'],
+  bottom: ['margin-bottom'],
+  left: ['margin-left'],
+  right: ['margin-right'],
+  x: ['margin-left', 'margin-right'],
+  y: ['margin-top', 'margin-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsiveMarginStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a margin type, return a string of style content that can be used to apply the margin to an element
+   *
+   * @param {MarginType} input - MarginType
+   * @returns {string} - A string of style content.
+   */
+  formatToken(input) {
+    if (isSpacingTokenType(input)) {
+      return `margin:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return MARGIN_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+export default new ResponsiveMarginStyleFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-padding-formatter.js

@@ -13,6 +13,7 @@ const PADDING_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsivePaddingStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-padding-style-formatter.js

@@ -0,0 +1,44 @@
+import { isSpacingTokenType, isDirectionalSpacingType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { Spacing } from '../../../constants/tokens/spacing';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+const PADDING_DIRECTION_STYLE_MAP = {
+  top: ['padding-top'],
+  bottom: ['padding-bottom'],
+  left: ['padding-left'],
+  right: ['padding-right'],
+  x: ['padding-left', 'padding-right'],
+  y: ['padding-top', 'padding-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsivePaddingStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a padding type, return the corresponding string of CSS text.
+   *
+   * @param {PaddingType} input - PaddingType
+   * @returns {string} - CSS text.
+   */
+  formatToken(input) {
+    if (isSpacingTokenType(input)) {
+      return `padding:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return PADDING_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+export default new ResponsivePaddingStyleFormatter();

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-border-radius-style-formatter.test.js

@@ -0,0 +1,32 @@
+import { LogUtility } from '../../../../utils/log';
+import { FeatureFlag } from '../../../public-api';
+import ResponsiveCornersStyleFormatter from '../../responsive-map-formatter/responsive-border-radius-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveCornersStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsiveCornersStyleFormatter.formatToken('rounded-24');
+  expect(result).toEqual('border-radius:24px');
+});
+test('should return format when input in directional type', () => {
+  const result = ResponsiveCornersStyleFormatter.formatToken({
+    top: 'rounded-12',
+    bottom: 'rounded-16',
+    left: 'rounded-full',
+    right: 'rounded-none',
+  });
+  expect(result).toEqual('border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:0px;border-bottom-right-radius:0px');
+});
+test('should return format when input in directional type and enable feature flag', () => {
+  FeatureFlag.enable('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR');
+  const result = ResponsiveCornersStyleFormatter.formatToken({
+    top: 'rounded-12',
+    bottom: 'rounded-16',
+    left: 'rounded-full',
+    right: 'rounded-none',
+  });
+  expect(result).toEqual('border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:16px;border-bottom-right-radius:16px');
+  FeatureFlag.disable('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-margin-style-formatter.test.js

@@ -0,0 +1,28 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsiveMarginStyleFormatter from '../../responsive-map-formatter/responsive-margin-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveMarginStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsiveMarginStyleFormatter.formatToken('size-24');
+  expect(result).toEqual('margin:24px');
+});
+test('should return format when input is directional type', () => {
+  const result = ResponsiveMarginStyleFormatter.formatToken({
+    top: 'size-12',
+    x: 'size-24',
+    bottom: 'size-8',
+  });
+  expect(result).toEqual('margin-top:12px;margin-left:24px;margin-right:24px;margin-bottom:8px');
+});
+test('should return format when input is responsive type', () => {
+  expect(ResponsiveMarginStyleFormatter.format('0')).toEqual(':host{margin:0px}');
+  const result = ResponsiveMarginStyleFormatter.format({
+    default: 'size-8',
+    S: 'size-12',
+    M: { top: 'size-12', x: 'size-24', bottom: 'size-8' },
+  });
+  expect(result).toEqual(':host{margin:8px} @media (min-width:320px){:host{margin:12px}} @media (min-width:768px){:host{margin-top:12px;margin-left:24px;margin-right:24px;margin-bottom:8px}}');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-padding-style-formatter.test.js

@@ -0,0 +1,28 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsivePaddingStyleFormatter from '../../responsive-map-formatter/responsive-padding-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsivePaddingStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsivePaddingStyleFormatter.formatToken('size-24');
+  expect(result).toEqual('padding:24px');
+});
+test('should return format when input is directional type', () => {
+  const result = ResponsivePaddingStyleFormatter.formatToken({
+    top: 'size-12',
+    x: 'size-24',
+    bottom: 'size-8',
+  });
+  expect(result).toEqual('padding-top:12px;padding-left:24px;padding-right:24px;padding-bottom:8px');
+});
+test('should return format when input is responsive type', () => {
+  expect(ResponsivePaddingStyleFormatter.format('0')).toEqual(':host{padding:0px}');
+  const result = ResponsivePaddingStyleFormatter.format({
+    default: 'size-8',
+    S: 'size-12',
+    M: { top: 'size-12', x: 'size-24', bottom: 'size-8' },
+  });
+  expect(result).toEqual(':host{padding:8px} @media (min-width:320px){:host{padding:12px}} @media (min-width:768px){:host{padding-top:12px;padding-left:24px;padding-right:24px;padding-bottom:8px}}');
+});

package/dist/collection/helpers/slimmers/element-appender-slimmer.js

@@ -85,7 +85,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       if (this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !findParent(currentTarget, '.vega-element-appender-appendable') &&
         !isParent(currentTarget, this.showConfig.target) &&
         findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();
@@ -137,10 +137,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
   }
   disconnectedCallback() {
     this.unRegisterElementAppenderListener();
-    if (this.elementAppender) {
-      this.elementAppender.destroy();
-      this.elementAppender = null;
-    }
+    this.destroyElementAppender();
   }
   componentDidLoad() {
     this.initElementAppender();
@@ -157,13 +154,19 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     this[this.isDropdownShowName] = false;
   }
   destroy() {
-    this.elementAppender = null;
+    this.destroyElementAppender();
     this[this.isDropdownShowName] = false;
   }
   updateShowConfigFactory(showConfigFactory) {
     this.showConfigFactory = showConfigFactory;
     this.initElementAppender();
   }
+  destroyElementAppender() {
+    if (this.elementAppender) {
+      this.elementAppender.destroy();
+      this.elementAppender = null;
+    }
+  }
   initElementAppender() {
     this.setShowConfig();
     this.setElementAppender();

package/dist/collection/helpers/slimmers/test/element-appender-slimmer.test.js

@@ -107,9 +107,11 @@ describe('ElementAppender slimmer test suite', () => {
       expect(mockedComponent.isDropdownShow).toBeFalsy();
       expect(mockedComponent.getElementAppender()['undefinedAttribute']).toEqual(undefined);
       expect(mockedComponent.appendableElement).toHaveClass('vega-force-hidden');
+      spyOn(element, 'remove').and.callThrough();
       mockedComponent.destroy();
       expect(mockedComponent.getElementAppender()).toBeNull();
       expect(mockedComponent.isDropdownShow).toBeFalsy();
+      expect(element.remove).toBeCalledTimes(1);
     });
     test('should listen event proper while trigger is click', () => {
       const mockedComponent = new MockedComponent();

package/dist/collection/helpers/ui/element-appender.js

@@ -118,6 +118,7 @@ export class ElementAppender {
     if (!this.showConfig)
       return;
     this.removeVisibleAppendElement(this.showConfig.appendableElement);
+    this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
     this.showConfig.appendableElement.remove();
     this.disconnectResizeObserver();
@@ -211,6 +212,7 @@ export class ElementAppender {
     if (!this.showConfig.isScreenPosition) {
       this.initVisibleAppendElement();
     }
+    this.showConfig.appendableElement.classList.add('vega-element-appender-appendable');
     this.showConfig.appendableElement.style.boxSizing = 'border-box';
     this.positionCalculationController.setCalculationStrategy();
   }

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -23,7 +23,7 @@ test('return result as expect when call show', () => {
   drop1.show();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-bottom vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-bottom vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div>
 	`);
   drop1.hide();
   spyOn(target, 'getBoundingClientRect').and.returnValue({
@@ -42,7 +42,7 @@ test('return result as expect when call show', () => {
   drop2.show();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-top vega-alignment-start" style=" box-sizing: border-box; left: 20px; top: 100px; width: 200px; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style=" box-sizing: border-box; left: 20px; top: 100px; width: 200px; z-index: 10001;"></div>
 	`);
   drop2.hide();
   const drop3 = new ElementAppender({
@@ -105,7 +105,7 @@ test('return result as expect when call hide', () => {
   drop.hide();
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-bottom vega-alignment-start vega-force-hidden" style="box-sizing: border-box; left: 0px; top: 0px;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-bottom vega-alignment-start vega-force-hidden" style="box-sizing: border-box; left: 0px; top: 0px;"></div>
 	`);
 });
 test('should not change css position in body when is not static', () => {
@@ -151,6 +151,7 @@ test('return result as expect when call destroy', () => {
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
 	`);
+  expect(document.body.style.position).toEqual('static');
 });
 test('content should append to body while not in modal', () => {
   const target = document.createElement('vega-input-select');
@@ -164,7 +165,7 @@ test('content should append to body while not in modal', () => {
   drop.show();
   expect(document.body).toEqualHtml(`
 	<vega-input-select></vega-input-select>
-	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: 0px; top: 0px; z-index: 10001;"></div
 	`);
   drop.hide();
 });
@@ -190,7 +191,7 @@ test('content should append to modal while in modal', () => {
 	  <div class="modal-dialog"></div>
 	</mock:shadow-root>
 	<vega-input-select slot="content"></vega-input-select>
-	<div class="dropdown vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" slot="content" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -211,7 +212,7 @@ test('content append proper while positionRelativeTo set', () => {
   expect(document.body).toEqualHtml(`
 	<div id="container">
 		<vega-input-select></vega-input-select>
-		<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+		<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 	</div>
 	`);
   drop.hide();
@@ -242,7 +243,7 @@ test('content should append to modal content while in scroll modal content', ()
 	  </div>
 	</mock:shadow-root>
 	<vega-input-select></vega-input-select>
-	<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
   </vega-modal>`);
   drop.hide();
 });
@@ -265,7 +266,7 @@ test('content should append to popover content while in scroll modal content', (
 	<vega-modal>
 		<vega-popover class="vega-popover">
 			<vega-input-select></vega-input-select>
-			<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; left: NaNpx; top: NaNpx; z-index: 10001;"></div>
 		</vega-popover>
 	</vega-modal>
 	`);
@@ -354,7 +355,7 @@ test('return result as expect when max/min width set', () => {
   element.style.removeProperty('z-index');
   expect(document.body).toEqualHtml(`
 	<div class="test-parent-host"><div class="test-host"></div></div>
-	<div class="dropdown vega-placement-top vega-alignment-start" style="box-sizing: border-box; min-width: 100px; max-width: 300px; left: 0px; top: 0px;"></div>
+	<div class="dropdown vega-element-appender-appendable vega-placement-top vega-alignment-start" style="box-sizing: border-box; min-width: 100px; max-width: 300px; left: 0px; top: 0px;"></div>
 	`);
   drop.hide();
 });
@@ -448,7 +449,7 @@ describe('screen position', () => {
     });
     drop1.show();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
 		`);
     drop1['previousTargetRect'] = {
       left: 10,
@@ -456,7 +457,7 @@ describe('screen position', () => {
     };
     drop1.onScroll();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
 		`);
     drop1['previousTargetRect'] = {
       left: 100,
@@ -472,7 +473,7 @@ describe('screen position', () => {
     drop1['previousTargetRect'] = undefined;
     drop1.onScroll();
     expect(element).toEqualHtml(`
-			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
+			<div class="dropdown vega-element-appender-appendable vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
 		`);
   });
 });

package/dist/collection/helpers/validator/form-field-controller.js

@@ -13,6 +13,7 @@ import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega
 import { FieldErrorUIControllerSlimmer } from '../slimmers/field-error-ui-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
 import { FormFieldMessageTranslatorSlimmer } from '../slimmers/form-field-message-translator';
+import { InternalFormFieldValidationRule } from './rules/internal-form-field-validation-rule.abstract';
 /**
  * The FormFieldController class is a class that validates the value of an input elements
  *
@@ -152,7 +153,11 @@ export class FormFieldController {
    * @returns {FormFieldValidationRule<number | string | boolean>[]} An array of FormFieldValidationRule<T>
    */
   getRules() {
-    return [...this.defaultRules, ...this.additionalRules];
+    const additionalRules = [...this.additionalRules];
+    const overriddenDefaultRules = this.defaultRules.map((rule) => {
+      return this.overrideDefaultRuleByAdditionalRule(rule, additionalRules);
+    });
+    return [...overriddenDefaultRules, ...additionalRules];
   }
   /**
    * Set the default rules for the form field.
@@ -441,6 +446,28 @@ export class FormFieldController {
         return isEnterKey;
     }
   }
+  /**
+   * It overrides the default rule by checking if the additional rules contain a custom rule that overrides.
+   * If it does, it returns that additional rule, and the rule will be removed from the additional rules array.
+   * otherwise, it returns the default rule.
+   *
+   * @param {InternalFormFieldValidationRule} defaultRule - The rule to be overridden.
+   * @param {FormFieldValidationRule[]} additionalRules - The additional rules to be applied.
+   * @returns {FormFieldValidationRule} The overridden rule.
+   */
+  overrideDefaultRuleByAdditionalRule(defaultRule, additionalRules) {
+    if (defaultRule && additionalRules) {
+      const customRuleIndex = additionalRules.findIndex((customRule) => {
+        return (customRule instanceof InternalFormFieldValidationRule &&
+          customRule instanceof defaultRule.constructor &&
+          customRule.overrideDefault);
+      });
+      if (customRuleIndex > -1) {
+        return additionalRules.splice(customRuleIndex, 1)[0];
+      }
+    }
+    return defaultRule;
+  }
 }
 __decorate([
   InjectVegaSlimmer()

package/dist/collection/helpers/validator/public-rules.js

@@ -0,0 +1,10 @@
+export { CheckBoxRequiredRule } from './rules/check-box-required-rule';
+export { DateRequiredRule } from './rules/date-required-rule';
+export { InputPhoneNumberRequiredRule } from './rules/input-phone-number-required-rule';
+export { InputRangeRequiredRule } from './rules/input-range-required-rule';
+export { RequiredFieldRule } from './rules/required-field-rule';
+export { RichTextEditorRequiredRule } from './rules/rich-text-editor-required-rule';
+export { TimeRangeRequiredRule } from './rules/time-range-required-rule';
+export { TimeRequiredRule } from './rules/time-required-rule';
+export { ToggleSwitchRequiredRule } from './rules/toggle-switch-required-rule';
+export { FileUploaderRequiredRule } from './rules/file-uploader-required-rule';

package/dist/collection/helpers/validator/rules/check-box-required-rule.js

@@ -1,15 +1,16 @@
+import { InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract';
 /**
  * A rule that checks if a string is empty or not
  *
- * @implements {FormFieldValidationRule<string>}
+ * @augments {InternalFormFieldValidationRule<string>}
  */
-export class CheckBoxRequiredRule {
+export class CheckBoxRequiredRule extends InternalFormFieldValidationRule {
   /**
    * If the input is a boolean, return a boolean. If the input is a string, return a boolean. If the
    * input is anything else, return false
    *
    * @param {string | boolean} input - The input to be evaluated.
-   * @returns {EvaluateResultTranslation} - An object with two properties: isValid and message.
+   * @returns {EvaluateResult} - An object with two properties: isValid and message.
    */
   evaluate(input) {
     if (typeof input === 'boolean') {

package/dist/collection/helpers/validator/rules/date-range-rule.js

@@ -1,8 +1,9 @@
 import { isDateStr, compareIsSameOrBefore } from '../../../utils/date';
+import { InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract';
 /**
  * A rule that checks if start date is before than end date
  */
-export class DateRangeRule {
+export class DateRangeRule extends InternalFormFieldValidationRule {
   /**
    * If the input is accepted and the status is not disabled and visible, then return true
    *

package/dist/collection/helpers/validator/rules/date-required-rule.js

@@ -1,10 +1,11 @@
 import { isDateStr } from '../../../utils/date';
+import { InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract';
 /**
  * A rule that checks if date is empty or not
  *
- * @implements {FormFieldValidationRule<string | string[]>}
+ * @augments {InternalFormFieldValidationRule<string | string[]>}
  */
-export class DateRequiredRule {
+export class DateRequiredRule extends InternalFormFieldValidationRule {
   /**
    * It creates a new instance of the class with the given config.
    *
@@ -12,6 +13,7 @@ export class DateRequiredRule {
    * @param {'single' | 'range'} config.mode - The mode for date value
    */
   constructor(config) {
+    super();
     this.config = config;
   }
   /**
@@ -19,7 +21,7 @@ export class DateRequiredRule {
    * Otherwise, return an object with a boolean indicating whether the input is valid and a message to display to the user
    *
    * @param {string | string[]} input - The value of the input field.
-   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
+   * @returns {EvaluateResult} An object with two properties: isValid and message.
    */
   evaluate(input) {
     if (!this.isAcceptedInputType(input)) {