generator-white-label 3.0.0 → 5.0.0

package/app/assets/markup/element/textarea.hbs

@@ -0,0 +1,24 @@
+<textarea
+    {{#if this.id}}
+    id="{{this.id}}"
+    {{/if}}
+    {{#if this.class}}
+    class="{{this.class}}"
+    {{/if}}
+    {{#if this.placeholder}}
+    placeholder="{{this.placeholder}}"{{/if}}
+    {{#if this.name}}
+    name="{{this.name}}"
+    {{/if}}
+    {{#if this.required}}
+    required
+    aria-required="true"
+    {{/if}}
+    {{#if this.disabled}}
+    disabled
+    aria-disabled="true"
+    {{/if}}
+    {{#if this.aria-label}}
+    aria-label="{{this.aria-label}}"
+    {{/if}}
+>{{#if this.value}}{{this.value}}{{/if}}</textarea>

package/app/assets/markup/element/ul.hbs

@@ -0,0 +1,13 @@
+<ul
+    {{#if this.class}}
+    class="{{this.class}}"
+    {{/if}}
+>
+{{#each this.items}}
+    <li>{{#if this.url}}{{>elements/a}}{{else}}{{this.text}}{{/if}}
+        {{#if this.list}}
+        {{> elements/ul this.list}}
+        {{/if}}
+    </li>
+{{/each}}
+</ul>

package/app/assets/markup/modal/modal-example-1.handlebars

@@ -0,0 +1,8 @@
+<div class="row">
+    <div class="col-12">
+        <h1 id="modal-title">disclosures</h1>
+        <h2 id="modal-description">Legal disclosures you accept to continue</h2>
+        <p>disclosures content</p>
+        <button class="button-1" data-modal-close>return to sign up page</button>
+    </div>
+</div>

package/app/assets/markup/toolkit/accessibility-skip-to-element-1.handlebars

@@ -0,0 +1 @@
+{{>element/a class='accessibility-skip-to-element-1'}}

package/app/assets/markup/toolkit/accessibility-speaker-1.handlebars

@@ -0,0 +1 @@
+<div class="accessibility-hidden-element-1" aria-live="polite" aria-relevant="additions" aria-atomic="true"></div>

package/app/assets/markup/toolkit/anchor-1.handlebars

@@ -0,0 +1 @@
+{{> element/a class='anchor-1'}}

package/app/assets/markup/toolkit/button-1.handlebars

@@ -0,0 +1 @@
+{{> element/button class='button-1'}}

package/app/assets/markup/toolkit/footer-1.handlebars

@@ -0,0 +1,3 @@
+<footer class="footer-1">
+    <p>&copy;</p>
+</footer>

package/app/assets/markup/toolkit/header-1.handlebars

@@ -0,0 +1 @@
+<header class="header-1"></header>

package/app/assets/markup/toolkit/heading-1.handlebars

@@ -0,0 +1 @@
+<{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}} class="heading-1 {{#if this.class}}{{this.class}}{{/if}}{{#if this.accessible-title}} aria-label="{{this.accessible-title}}"{{/if}}{{#if this.role}} role="{{this.role}}"{{/if}}"{{#if this.tabindex}} tabindex="{{this.tabindex}}"{{/if}}>{{this.title}}</{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}>

package/app/assets/markup/toolkit/heading-2.handlebars

@@ -0,0 +1 @@
+<{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}} class="heading-2 {{#if this.class}}{{this.class}}{{/if}}{{#if this.accessible-title}} aria-label="{{this.accessible-title}}"{{/if}}{{#if this.role}} role="{{this.role}}"{{/if}}"{{#if this.tabindex}} tabindex="{{this.tabindex}}"{{/if}}>{{this.title}}</{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}>

package/app/assets/markup/toolkit/heading-3.handlebars

@@ -0,0 +1 @@
+<{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}} class="heading-3 {{#if this.class}}{{this.class}}{{/if}}{{#if this.accessible-title}} aria-label="{{this.accessible-title}}"{{/if}}{{#if this.role}} role="{{this.role}}"{{/if}}"{{#if this.tabindex}} tabindex="{{this.tabindex}}"{{/if}}>{{this.title}}</{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}>

package/app/assets/markup/toolkit/heading-4.handlebars

@@ -0,0 +1 @@
+<{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}} class="heading-4 {{#if this.class}}{{this.class}}{{/if}}{{#if this.accessible-title}} aria-label="{{this.accessible-title}}"{{/if}}{{#if this.role}} role="{{this.role}}"{{/if}}"{{#if this.tabindex}} tabindex="{{this.tabindex}}"{{/if}}>{{this.title}}</{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}>

package/app/assets/markup/toolkit/image-1.handlebars

@@ -0,0 +1 @@
+{{> element/img class='image-1'}}

package/app/assets/markup/toolkit/input-checkbox-1.handlebars

@@ -0,0 +1 @@
+{{> element/input class='input-checkbox-1' type='checkbox'}}

package/app/assets/markup/toolkit/input-error-1.handlebars

@@ -0,0 +1,8 @@
+<div id="{{id}}" class="input-error-1" data-for="{{for}}">
+    {{#if this.title}}
+    <strong>{{this.title}}</strong>
+    {{/if}}
+    {{#if this.body}}
+    <p>{{this.body}}</p>
+    {{/if}}
+</div>

package/app/assets/markup/toolkit/input-radio-1.handlebars

@@ -0,0 +1 @@
+{{> element/input class='input-radio-1' type='radio'}}

package/app/assets/markup/toolkit/input-text-1.handlebars

@@ -0,0 +1 @@
+{{> element/input class='input-text-1'}}

package/app/assets/markup/toolkit/label-1.handlebars

@@ -0,0 +1 @@
+{{> element/label class='label-1'}}

package/app/assets/markup/toolkit/legend-1.handlebars

@@ -0,0 +1 @@
+{{> element/legend class='legend-1'}}

package/app/assets/markup/toolkit/list-1.handlebars

@@ -0,0 +1 @@
+{{> element/ul class='list-1'}}

package/app/assets/markup/toolkit/modal-1.handlebars

@@ -0,0 +1,4 @@
+<section data-modal class="modal-1">
+    <div class="modal-1-content" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description"></div>
+    <button data-modal-close aria-label="close modal"></button>
+</section>

package/app/assets/markup/toolkit/nav-1.handlebars

@@ -0,0 +1 @@
+<nav class="nav-1"></nav>

package/app/assets/markup/toolkit/picture-1.handlebars

@@ -0,0 +1 @@
+{{> element/picture class='picture-1'}}

package/app/assets/markup/toolkit/select-1.handlebars

@@ -0,0 +1 @@
+{{> element/select class='select-1'}}

package/app/assets/markup/toolkit/table-1.handlebars

@@ -0,0 +1 @@
+{{> element/table class='table-1'}}

package/app/assets/markup/toolkit/text-1.handlebars

@@ -0,0 +1 @@
+<{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}{{#if this.id}} id="{{this.id}}"{{/if}} class="text-1 {{#if this.class}}{{this.class}}{{/if}}{{#if this.accessible-title}} aria-label="{{this.accessible-title}}"{{/if}}{{#if this.role}} role="{{this.role}}"{{/if}}"{{#if this.tabindex}} tabindex="{{this.tabindex}}"{{/if}}>{{this.title}}</{{#if this.tag}}{{this.tag}}{{else}}span{{/if}}>

package/app/assets/markup/toolkit/textarea-1.handlebars

@@ -0,0 +1 @@
+{{> element/textarea class='textarea-1'}}

package/app/assets/markup/toolkit/youtube-player-1.handlebars

@@ -0,0 +1 @@
+<div class="youtube-player-1 {{#if this.widescreen}} widescreen{{/if}}"></div>

package/app/assets/script/api/facebook.ts

@@ -0,0 +1,41 @@
+/** @module app/assets/script/api/facebook */
+import mediator from '../mediator/global.js';
+import modelGlobal from '../model/singletons/global.js';
+
+'use strict';
+    export default class {
+        /**
+         * Load the optional SDK and emit a mediator notification from its readiness callback.
+         * @param url - URL or optional adapter argument.
+         * @returns No value.
+         */
+        initialize(url?: string) {
+            window.fbAsyncInit = function(e?: Event) {
+                window.FB.init({
+                    appId: modelGlobal.get().appId || null,
+                    autoLogAppEvents: true,
+                    xfbml: true,
+                    version: 'v2.9'
+                });
+                window.FB.AppEvents.logPageView();
+                mediator.emit('facebook-api-1:state:ready', {
+                    event: e
+                });
+            };
+            (function(d, s, id) {
+                var js,
+                    fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) {
+                    return;
+                }
+                js = d.createElement('script');
+                js.id = id;
+                js.src = '//connect.facebook.net/en_US/sdk.js';
+                if (fjs?.parentNode) {
+                    fjs.parentNode.insertBefore(js, fjs);
+                } else {
+                    d.head.appendChild(js);
+                }
+            }(document, 'script', 'facebook-jssdk'));
+        }
+    };

package/app/assets/script/api/youtube.ts

@@ -0,0 +1,22 @@
+/** @module app/assets/script/api/youtube */
+import mediator from '../mediator/global.js';
+import UtilityAjax from '../utility/ajax.js';
+
+const utilityAjax = new UtilityAjax();
+
+'use strict';
+    export default class {
+        /**
+         * Load the optional SDK and emit a mediator notification from its readiness callback.
+         * @param url - URL or optional adapter argument.
+         * @returns No value.
+         */
+        initialize(url?: string) {
+            utilityAjax.getScript('//www.youtube.com/iframe_api');
+            window.onYouTubeIframeAPIReady = (e?: Event) => {
+                mediator.emit('youtube-api-1:state:ready', {
+                    event: e
+                });
+            }
+        }
+    };

package/app/assets/script/index.ts

@@ -0,0 +1,2 @@
+/** @module app/assets/script/index */
+export {};

package/app/assets/script/mediator/global.ts

@@ -0,0 +1,4 @@
+/** @module app/assets/script/mediator/global */
+import Events from 'events';
+
+export default new Events();

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);
+        }
+    };