diff --git a/vite.config.js b/vite.config.js
index ae4efc02b..0394e891f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -124,6 +124,7 @@ export default ({ mode }) => {
'plugins/plugin.gallery' : 'wdn/templates_6.0/js-src/plugins/multi/gallery.js',
'plugins/plugin.event-list' : 'wdn/templates_6.0/js-src/plugins/multi/event-list.js',
'plugins/plugin.card-as-link' : 'wdn/templates_6.0/js-src/plugins/multi/card-as-link.js',
+ 'plugins/plugin.file-size-validator' : 'wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js',
'plugins/plugin.idm' : 'wdn/templates_6.0/js-src/plugins/single/idm.js',
'plugins/plugin.search' : 'wdn/templates_6.0/js-src/plugins/single/search.js',
@@ -149,12 +150,12 @@ export default ({ mode }) => {
'components/component.gallery' : 'wdn/templates_6.0/js-src/components/unl-gallery.js',
'components/component.banner' : 'wdn/templates_6.0/js-src/components/unl-banner.js',
'components/component.alert' : 'wdn/templates_6.0/js-src/components/unl-alert.js',
-
'components/component.idm' : 'wdn/templates_6.0/js-src/components/unl-idm.js',
'components/component.search' : 'wdn/templates_6.0/js-src/components/unl-search.js',
'components/component.qa' : 'wdn/templates_6.0/js-src/components/unl-qa.js',
'components/component.event-list' : 'wdn/templates_6.0/js-src/components/unl-event-list.js',
'components/component.card-as-link' : 'wdn/templates_6.0/js-src/components/unl-card-as-link.js',
+ 'components/component.file-size-validator' : 'wdn/templates_6.0/js-src/components/unl-file-size-validator.js',
'components/component.analytics' : 'wdn/templates_6.0/js-src/components/unl-analytics.js',
'lib/unl-utility' : 'wdn/templates_6.0/js-src/lib/unl-utility.js',
diff --git a/wdn/templates_6.0/examples/file-size-validator.html b/wdn/templates_6.0/examples/file-size-validator.html
new file mode 100644
index 000000000..1ad745811
--- /dev/null
+++ b/wdn/templates_6.0/examples/file-size-validator.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ File Size Validator
+
+
+
+
+
+ File Size Validator
+
+
+
+
+
+
+
diff --git a/wdn/templates_6.0/js-src/components/unl-file-size-validator.js b/wdn/templates_6.0/js-src/components/unl-file-size-validator.js
new file mode 100644
index 000000000..3906978fa
--- /dev/null
+++ b/wdn/templates_6.0/js-src/components/unl-file-size-validator.js
@@ -0,0 +1,22 @@
+import DCFFileSizeValidator from '@dcf/js/components/dcf-file-size-validator.js';
+export default class UNLFileSizeValidator extends DCFFileSizeValidator {
+ constructor(fileInput, options = {}) {
+
+ if (!('errorElementClassList' in options)) {
+ options.errorElementClassList = [
+ 'dcf-rounded',
+ 'unl-bg-scarlet',
+ 'unl-cream',
+ 'dcf-pt-4',
+ 'dcf-pb-4',
+ 'dcf-pl-2',
+ 'dcf-pr-2',
+ 'dcf-mt-3',
+ 'dcf-txt-center',
+ 'dcf-w-fit-content',
+ ];
+ }
+
+ super(fileInput, options);
+ }
+}
diff --git a/wdn/templates_6.0/js-src/head-2.js b/wdn/templates_6.0/js-src/head-2.js
index 982556fca..3389da118 100644
--- a/wdn/templates_6.0/js-src/head-2.js
+++ b/wdn/templates_6.0/js-src/head-2.js
@@ -17,6 +17,8 @@ import UNLIdmUrl from '@js-src/plugins/single/idm.js?finalUrl';
import UNLSearchUrl from '@js-src/plugins/single/search.js?finalUrl';
import UNLQaUrl from '@js-src/plugins/single/qa.js?finalUrl';
import UNLFontSerifUrl from '@js-src/plugins/single/font-serif.js?finalUrl';
+import UNLFileSizeValidatorUrl from '@js-src/plugins/multi/file-size-validator.js?finalUrl';
+
window.UNL = window.UNL || {};
window.UNL.autoLoader = {
@@ -159,6 +161,13 @@ window.UNL.autoLoader = {
onPluginLoadedElement: null,
url: UNLQaUrl,
},
+ UNLFileSizeValidator: {
+ optOutSelector: null,
+ optInSelector: null,
+ customConfig: {},
+ onPluginLoadedElement: null,
+ url: UNLFileSizeValidatorUrl,
+ },
},
},
loaded: false,
diff --git a/wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js b/wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js
new file mode 100644
index 000000000..49a177929
--- /dev/null
+++ b/wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js
@@ -0,0 +1,107 @@
+/**
+ * This is where the imported class will be stored
+ * @type {?UNLFileSizeValidator}
+ */
+let UNLFileSizeValidator = null;
+
+// Query Selector for the file size validator component class
+const querySelector = '.dcf-file-size-validator:not(.dcf-file-size-validator-initialized)';
+
+// Type of plugin
+const pluginType = 'multi';
+
+// Storing the state whether the plugin is initialized or not
+let isInitialized = false;
+
+/**
+ * Gets the query selector which is used for this plugin's component
+ * @returns { String }
+ */
+export function getQuerySelector() {
+ return querySelector;
+}
+
+/**
+ * Gets the plugin type
+ * @returns { String }
+ */
+export function getPluginType() {
+ return pluginType;
+}
+
+/**
+ * Returns if the plugin has been initialized yet
+ * @returns { Boolean }
+ */
+export function getIsInitialized() {
+ return isInitialized;
+}
+
+/**
+ * Initializes plugin
+ * @returns { Promise }
+ */
+export async function initialize() {
+ if (isInitialized) { return UNLFileSizeValidator; }
+ isInitialized = true;
+
+ const fileSizeValidatorComponent = await import('@js-src/components/unl-file-size-validator.js');
+ UNLFileSizeValidator = fileSizeValidatorComponent.default;
+
+ document.dispatchEvent(new CustomEvent('UNLPluginInitialized', {
+ detail: {
+ pluginType: pluginType,
+ pluginComponent: UNLFileSizeValidator,
+ styleSheetsLoaded: [],
+ },
+ }));
+
+ return UNLFileSizeValidator;
+}
+
+/**
+ * Loads a single instance of the component
+ * @param { HTMLElement } element The element to initialize
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise }
+ */
+export async function loadElement(element, options) {
+ if (!isInitialized) {
+ await initialize();
+ }
+
+ const loadedElement = new UNLFileSizeValidator(element, options);
+ document.dispatchEvent(new CustomEvent('UNLPluginLoadedElement', {
+ detail: {
+ loadedElement: loadedElement,
+ },
+ }));
+
+ return loadedElement;
+}
+
+/**
+ * Loads components from all elements passed in
+ * @async
+ * @param { HTMLCollectionOf | HTMLElement[] } elements
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise }
+ */
+export async function loadElements(elements, options) {
+ const outputElements = [];
+ for (const singleElement of elements) {
+ outputElements.push(await loadElement(singleElement, options));
+ }
+ return outputElements;
+}
+
+/**
+ * Using the `querySelector` we will load all elements on the page
+ * @async
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise }
+ */
+export async function loadElementsOnPage(options) {
+ const allFileInputs = document.querySelectorAll(querySelector);
+ return await loadElements(allFileInputs, options);
+}