generator-white-label 3.2.0 → 5.0.0

package/app/assets/script/model/singletons/countries.ts

@@ -0,0 +1,5 @@
+/** @module app/assets/script/model/singletons/countries */
+import WLModel from 'white-label-model';
+import data from '../../../data/coutries.json' with {type: 'json'};
+
+export default new WLModel.Collection(data);

package/app/assets/script/model/singletons/global.ts

@@ -0,0 +1,5 @@
+/** @module app/assets/script/model/singletons/global */
+import WLModel from 'white-label-model';
+const data: Record<string, unknown> = {cdn: '/', www: '/', service: '/service-endpoint'};
+
+export default new WLModel.Model(data);

package/app/assets/script/model/singletons/states.ts

@@ -0,0 +1,5 @@
+/** @module app/assets/script/model/singletons/states */
+import WLModel from 'white-label-model';
+import data from '../../../data/states.json' with {type: 'json'};
+
+export default new WLModel.Collection(data);

package/app/assets/script/model/user.ts

@@ -0,0 +1,4 @@
+/** @module app/assets/script/model/user */
+import WLModel from 'white-label-model';
+
+export default class extends WLModel.Model {};

package/app/assets/script/toolkit.ts

@@ -0,0 +1,11 @@
+/** @module app/assets/script/toolkit */
+import APIYoutube from './api/youtube.js';
+
+
+
+    // Avoid downloading the third-party API on toolkit pages that have no player.
+    if (document.querySelector('.youtube-player-1')) {
+        new APIYoutube().initialize();
+    }
+
+export {};

package/app/assets/script/types.d.ts

@@ -0,0 +1,16 @@
+/** Legacy published packages have no declarations; this describes the subset used by this generator. */
+declare module 'white-label-model' {
+    import {EventEmitter} from 'events';
+    class Model extends EventEmitter {constructor(data?: object); get(): Record<string, unknown>}
+    class Collection extends EventEmitter {constructor(data?: unknown[]); get(): unknown[]}
+    const api: {Model: typeof Model; Collection: typeof Collection};
+    export default api;
+}
+declare module 'white-label-view' {
+    export default class View {parentElement?: Element; initialize(): unknown; addListeners(): unknown}
+}
+    interface Window {
+        onYouTubeIframeAPIReady?: (event?: Event) => void;
+        fbAsyncInit?: (event?: Event) => void;
+        FB: {init(options: {appId: unknown; autoLogAppEvents: boolean; xfbml: boolean; version: string}): void; AppEvents: {logPageView(): void}};
+    }

package/app/assets/script/utility/ajax.ts

@@ -0,0 +1,15 @@
+/** @module app/assets/script/utility/ajax */
+'use strict';
+    export default class {
+        /**
+         * Append an asynchronous script element; callers decide when third-party code is needed.
+         * @param url - URL or optional adapter argument.
+         * @returns No value; the browser loads the appended script asynchronously.
+         */
+        getScript(url: string) {
+            var newScript = document.createElement('script');
+            newScript.src = url;
+            newScript.async = true;
+            document.getElementsByTagName('head')[0].appendChild(newScript);
+        }
+    };

package/app/assets/script/utility/form.ts

@@ -0,0 +1,119 @@
+/** Select option data used by the generated form examples. */
+interface Option {value: string | number; selected?: boolean; name?: string}
+interface Metadata {key: string; keyID?: string; keyTitle?: string; valueID?: string; valueTitle?: string}
+interface OptionInput {id: string | number; first_name?: string; last_name?: string; name?: string}
+'use strict';
+    export default class {
+        /**
+         * Return the values of selected options in document order.
+         * @param element - Select element to inspect.
+         * @returns Selected option values in document order.
+         */
+        multiselectGetSelectedValues(element: HTMLSelectElement) {
+            let values: string[] = [];
+            element.querySelectorAll<HTMLOptionElement>(':checked').forEach((item) => {
+                values.push(item.value);
+            });
+            return values;
+        }
+        /**
+         * Mutate option selection flags so only the matching value remains selected.
+         * @param data - Data supplied by the caller; validation follows the method contract.
+         * @param value - Value to find or format.
+         * @returns The same option array with updated selection flags.
+         */
+        selectMenuSelectOption(data: Option[], value: string | number) {
+            data.forEach ((item) => {
+                if (item.value === value) {
+                    item.selected = true;
+                } else {
+                    item.selected = false;
+                }
+            });
+            return data;
+        }
+        /**
+         * Return the last option matching a value, or false when none matches.
+         * @param data - Data supplied by the caller; validation follows the method contract.
+         * @param value - Value to find or format.
+         * @returns The matching option or false.
+         */
+        selectMenuReturnOption(data: Option[], value: string | number) {
+            let itemMatch: Option | false = false;
+            data.forEach((item) => {
+                if (item.value === value) {
+                    itemMatch = item;
+                }
+            });
+            return itemMatch;
+        }
+        /**
+         * Add stable field IDs and readable labels to metadata entries in place.
+         * @param metaData - Metadata array to decorate or divide.
+         * @returns The same metadata array with IDs and labels.
+         */
+        normalizeMetaData(metaData: Metadata[]) {
+            let i = 0;
+            metaData.forEach((item) => {
+                item.keyID = 'meta-field-key-' + i;
+                item.keyTitle = 'Field Name:';
+                item.valueID = 'meta-field-value-' + i;
+                item.valueTitle =  'Field Value: ' + item.key;
+                i++;
+            });
+
+            return metaData;
+        }
+        /**
+         * Move the latter half of metadata into a second group, mutating the supplied array.
+         * @param metaData - Metadata array to decorate or divide.
+         * @returns Two groups; group-1 retains the mutated input array.
+         */
+        splitMetaData(metaData: Metadata[]) {
+            let secondRowCount = Math.floor(metaData.length / 2);
+            return {
+                'group-1': metaData,
+                'group-2': metaData.splice(metaData.length - secondRowCount, secondRowCount)
+            }
+        }
+        /**
+         * Create display options from named records and mark the requested selections.
+         * @param arr - Records used to build select options.
+         * @param selected - Selected ID or IDs.
+         * @returns New options containing names, values, and selection flags.
+         */
+        buildOptions(arr: OptionInput[], selected: string | number | Array<string | number>) {
+
+            const options: Option[] = [];
+            let option: Option;
+
+            arr.forEach((obj) => {
+
+                let name = 'not specified';
+
+                if (obj.first_name && obj.last_name) {
+                    name = obj.first_name + ' ' + obj.last_name;
+                } else if (obj.name) {
+                    name = obj.name;
+                }
+
+                option = {
+                    name: name,
+                    value: obj.id
+                };
+
+                if (selected === obj.id) {
+                    option.selected = true;
+                } else if (Array.isArray(selected) && selected.indexOf(obj.id) !== -1) {
+                    option.selected = true;
+                } else {
+                    option.selected = false;
+                }
+
+                options.push(option);
+
+            });
+
+            return options;
+        }
+    };

package/app/assets/script/utility/{regex.js → regex.ts}

@@ -1,8 +1,19 @@
-(() => {
-    'use strict';
-    module.exports = class {
+/** @module app/assets/script/utility/regex */
+'use strict';
+    export default class {
+    date: RegExp;
+    password: RegExp;
+    phone: RegExp;
+    phoneEXT: RegExp;
+    zip: RegExp;
+    characters2: RegExp;
+    characters25: RegExp;
+    currency: RegExp;
+
+        /**
+         * Create an instance with its own state and listener references.
+         */
         constructor() {
-            /*eslint-disable*/
             this.date =  /^\$?(20|30)\d\d[- \/.](0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])?$/g;
             this.password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{5,15}$/m;
             this.phone = /^(\+?\d[ -\.])?([\\(]{0,1}([0-9]){3}[\\\.\-)]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-\.]?[ ]?([0-9]){4})|(\d{10})$/m;
@@ -11,7 +22,5 @@
             this.characters2 = /^.{2,500}$/m;
             this.characters25 = /^.{25,500}$/m;
             this.currency = /^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$/m;
-            /*eslint-enable*/
         }
     };
-})();

package/app/assets/script/utility/share.ts

@@ -0,0 +1,77 @@
+/** @module app/assets/script/utility/share */
+'use strict';
+    export default class {
+        /**
+         * Build an encoded Facebook share URL.
+         * @param params - Request parameters required by this operation.
+         * @returns An encoded Facebook share URL.
+         */
+        shareFacebookUrl(params: {url?: string; text?: string; title?: string; summary?: string; subject?: string; body?: string}) {
+            return 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(params.url || '');
+        }
+        /**
+         * Build the legacy Twitter intent URL for messages of at most 140 characters.
+         * @param params - Request parameters required by this operation.
+         * @returns An encoded intent URL, or false for missing or overlong text.
+         */
+        shareTwitterUrl(params: {url?: string; text?: string; title?: string; summary?: string; subject?: string; body?: string}) {
+            //check if the message is the right size and that a message is definded
+            if (params.text && params.text.length <= 140) {
+                var url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(params.text);
+                // check if they passed in an url along with the message
+                if (params.url) {
+                    url = url + '&url=' + encodeURIComponent(params.url)
+                }
+                // return back the full share url
+                return url;
+            } else {
+                return false;
+            }
+        }
+        /**
+         * Build a legacy Google Plus URL for compatibility; the external service is discontinued.
+         * @param params - Request parameters required by this operation.
+         * @returns The legacy share URL, or false when no URL is supplied.
+         * @deprecated Retained only to avoid silently changing older callers.
+         */
+        shareGooglePlusUrl(params: {url?: string; text?: string; title?: string; summary?: string; subject?: string; body?: string}) {
+            if (!params.url) {
+                return false;
+            }
+            return 'https://plus.google.com/share?url=' + encodeURIComponent(params.url);
+        }
+        /**
+         * Build an encoded LinkedIn share URL with optional title and summary.
+         * @param params - Request parameters required by this operation.
+         * @returns An encoded share URL, or false when no URL is supplied.
+         */
+        shareLinkedInUrl(params: {url?: string; text?: string; title?: string; summary?: string; subject?: string; body?: string}) {
+            // check it an url is defined
+            if (params.url) {
+                var url = 'https://www.linkedin.com/shareArticle?url=' + encodeURIComponent(params.url);
+                // if a title is passed add it to the share url
+                if (params.title) {
+                    url = url + '&title=' + encodeURIComponent(params.title);
+                }
+                if (params.summary) {
+                    // if a summary is passed add it to the share url
+                    url = url + '&summary=' + encodeURIComponent(params.summary);
+                }
+                // return back the full share url
+                return url;
+            } else {
+                return false;
+            }
+        }
+        /**
+         * Build a mailto link only when both subject and body are supplied.
+         * @param params - Request parameters required by this operation.
+         * @returns An encoded mailto link, or false when subject or body is missing.
+         */
+        shareEmailUrl(params: {url?: string; text?: string; title?: string; summary?: string; subject?: string; body?: string}) {
+            if (!params.subject || !params.body) {
+                return false;
+            }
+            return 'mailto:?subject=' + encodeURIComponent(params.subject) + '&body=' + encodeURIComponent(params.body);
+        }
+    };

package/app/assets/script/utility/string.ts

@@ -0,0 +1,148 @@
+/** @module app/assets/script/utility/string */
+const parser = new DOMParser();
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+});
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    style: 'currency'
+});
+
+/**
+ * Format a numeric date component with at least two digits.
+ * @param number - Numeric value to inspect or format.
+ * @returns A string containing at least two digits.
+ */
+function pad(number: number) {
+    return String(number).padStart(2, '0');
+}
+
+/**
+ * Format a valid date using local calendar components, or return null for invalid input.
+ * @param value - Value to find or format.
+ * @returns YYYY-MM-DD in local time, or null for invalid input.
+ */
+function dateParts(value: string | number | Date) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return null;
+    }
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+'use strict';
+
+    export default class {
+
+        //turn a string of html tags into a dom object
+        /**
+         * Parse trusted HTML and clone its first root node; reject empty markup.
+         * @param string - Trusted HTML containing at least one root node.
+         * @returns A clone of the first parsed root node.
+         * @throws When input does not satisfy the documented contract.
+         */
+        toElement(string: string) {
+            const element = parser.parseFromString(string, 'text/html').body.firstChild;
+            if (!element) throw new TypeError('HTML must contain a root node');
+            return element.cloneNode(true);
+        }
+
+        //qet data from url query string
+        /**
+         * Read and decode a query value, returning null when absent and an empty string when valueless.
+         * @param name - Resource, field, or parameter name.
+         * @param url - URL or optional adapter argument.
+         * @returns The decoded value, an empty string, or null when absent.
+         */
+        getQueryStringParamater(name: string, url: string) {
+            name = name.replace(/[[\]]/g, '\\$&');
+            let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+            let results = regex.exec(url);
+            if (!results) {
+                return null;
+            }
+            if (!results[2]) {
+                return '';
+            }
+            return decodeURIComponent(results[2].replace(/\+/g, ' '));
+        }
+
+        // 2014-11-10
+        /**
+         * Format a local calendar date as YYYY-MM-DD or return Invalid date.
+         * @param unformattedDate - Date input to format.
+         * @returns A local YYYY-MM-DD string or Invalid date.
+         */
+        formatDate(unformattedDate: string | number | Date) {
+            return dateParts(unformattedDate) || 'Invalid date';
+        }
+
+        //format the api accepts back
+        /**
+         * Format a calendar date using the legacy API noon timestamp convention.
+         * @param unformattedDate - Date input to format.
+         * @returns A YYYY-MM-DDT12:00 string or Invalid date.
+         */
+        formatDateAPI(unformattedDate: string) {
+            const formattedDate = dateParts(`${unformattedDate}T00:00:00`);
+            return formattedDate ? `${formattedDate}T12:00` : 'Invalid date';
+        }
+
+        /**
+         * Format a rounded number using en-US grouping.
+         * @param unformattedNumber - Numeric input to format.
+         * @returns The grouped and rounded number string.
+         */
+        formatNumber(unformattedNumber: number | string) {
+            return integerFormatter.format(Number(unformattedNumber));
+        }
+
+        /**
+         * Parse a base-ten integer using the existing parseInt behavior.
+         * @param formattedNumber - Integer text to parse.
+         * @returns The parsed integer, or NaN when no integer can be read.
+         */
+        unformatNumber(formattedNumber: string) {
+            return parseInt(formattedNumber, 10);
+        }
+
+        /**
+         * Format a numeric value as US dollars with two decimal places.
+         * @param unformattedCurrency - Numeric currency input.
+         * @returns The value formatted as US dollars.
+         */
+        formatCurrency(unformattedCurrency: number | string) {
+            return currencyFormatter.format(Number(unformattedCurrency));
+        }
+
+        /**
+         * Remove currency decoration and return two decimal places, falling back to 0.00 for invalid input.
+         * @param formattedCurrency - Decorated currency text or number.
+         * @returns An undecorated decimal string with two places.
+         */
+        unformatCurrency(formattedCurrency: number | string) {
+            const number = Number(String(formattedCurrency).replace(/[^0-9.-]/g, ''));
+            return Number.isFinite(number) ? number.toFixed(2) : '0.00';
+        }
+
+        /**
+         * Create a telephone link using only the supplied digits.
+         * @param unformattedPhoneNumber - Phone number containing optional formatting.
+         * @returns A tel link containing only digits.
+         */
+        formatPhoneLink(unformattedPhoneNumber: string) {
+            return 'tel:' + unformattedPhoneNumber.replace(/\D/g,'');
+        }
+
+        /**
+         * Create a mailto link from the supplied email address.
+         * @param unformattedEmailAddress - Email address to place in the link.
+         * @returns A mailto link.
+         */
+        formatEmailLink(unformattedEmailAddress: string) {
+            return 'mailto:' + unformattedEmailAddress;
+        }
+
+    };

package/app/assets/script/view/default.tsx

@@ -0,0 +1,14 @@
+/** @module app/assets/script/view/default */
+import React from 'react';
+
+
+'use strict';
+    export default class HelloMessage extends React.Component<{name: string}> {
+        /**
+         * Render the greeting from the component name prop.
+         * @returns The greeting React element.
+         */
+        render() {
+            return <div>Hello {this.props.name}</div>;
+        }
+    };

package/app/assets/script/view/toolkit/youtube-player-1.ts

@@ -0,0 +1,31 @@
+/** @module app/assets/script/view/toolkit/youtube-player-1 */
+import View from 'white-label-view';
+
+'use strict';
+    export default class extends View {
+        /**
+         * Create an instance with its own state and listener references.
+         */
+        constructor() {
+            super();
+            this.parentElement = document.querySelector('body') || undefined;
+        }
+        /**
+         * Extension hook for initializing a concrete YouTube player implementation.
+         * @returns No value.
+         */
+        initialize() {
+        }
+        /**
+         * Lifecycle hook for attaching listeners owned by a subclass.
+         * @returns No value.
+         */
+        addListeners() {
+        }
+        /**
+         * Legacy misspelled extension hook retained for compatibility with existing sample subclasses.
+         * @returns No value.
+         */
+        removeListners() {
+        }
+    };

package/app/assets/style/base/_toolkit.scss

@@ -1,39 +1,39 @@
 // ## colors
-@import 'colors/colors';
+@forward 'colors/colors';
 
 // ## fonts
-@import 'type/fonts';
-@import 'type/text';
-@import 'type/headings';
+@forward 'type/fonts';
+@forward 'type/text';
+@forward 'type/headings';
 
 
 // ## utilities
-@import 'utilities/accessibility';
-@import 'utilities/scroll';
-@import 'utilities/type';
+@forward 'utilities/accessibility';
+@forward 'utilities/scroll';
+@forward 'utilities/type';
 
 // ## elements
-@import 'elements/anchors';
-@import 'elements/buttons';
-@import 'elements/fieldsets';
-@import 'elements/inputs';
-@import 'elements/labels';
-@import 'elements/landmarks';
-@import 'elements/legends';
-@import 'elements/lists';
-@import 'elements/pictures';
-@import 'elements/images';
-@import 'elements/tables';
+@forward 'elements/anchors';
+@forward 'elements/buttons';
+@forward 'elements/fieldsets';
+@forward 'elements/inputs';
+@forward 'elements/labels';
+@forward 'elements/landmarks';
+@forward 'elements/legends';
+@forward 'elements/lists';
+@forward 'elements/pictures';
+@forward 'elements/images';
+@forward 'elements/tables';
 
 // ## components
 
-@import 'components/modal-1';
-@import 'components/sticky-1';
-@import 'components/tabpanel-base-1';
-@import 'components/tabpanel-1';
-@import 'components/tabpanel-2';
-@import 'components/youtube-player-1';
+@forward 'components/modal-1';
+@forward 'components/sticky-1';
+@forward 'components/tabpanel-base-1';
+@forward 'components/tabpanel-1';
+@forward 'components/tabpanel-2';
+@forward 'components/youtube-player-1';
 
 // ## layouts
 
-@import 'layouts/staggered-1';
+@forward 'layouts/staggered-1';

package/app/assets/style/base/components/_modal-1.scss

@@ -1,3 +1,8 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+@use '../utilities/accessibility' as *;
+
 // ## modals
 
 %modal-1 {
@@ -17,7 +22,7 @@
 
     > .modal-1-content {
 
-        background-color: $white-1;
+        background-color: colors.$white-1;
         height: 100%;
         margin: 0 auto;
         position: absolute;
@@ -30,7 +35,7 @@
         }
 
         > * {
-            background-color: $white-1;
+            background-color: colors.$white-1;
         }
 
     }
@@ -39,7 +44,7 @@
 
         @extend %accessibility-hidden-text-1;
 
-        background-color: $grey-1;
+        background-color: colors.$grey-1;
         display: block;
         height: 100%;
         left: 0;