@everymatrix/helper-date-navigator 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const helperDateNavigator = require('./helper-date-navigator-ec7c6e2d.js');
+require('./index-4edbea76.js');
+
+
+
+exports.HelperDateNavigator = helperDateNavigator.HelperDateNavigator;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4edbea76.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["helper-date-navigator.cjs",[[1,"helper-date-navigator",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"date":[1],"defaultHighlightDates":[1,"default-highlight-dates"],"highlightDates":[32],"weeks":[32],"days":[32],"alterDate":[32],"curDate":[32],"recordInfo":[32],"showCalendar":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"defaultHighlightDates":["handleGameIdStringChange"],"date":["handleDateChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/helper-date-navigator/helper-date-navigator.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/helper-date-navigator/helper-date-navigator.css

@@ -0,0 +1,144 @@
+.lottery-tipping-calendar {
+  position: relative;
+  display: inline-block;
+}
+
+.calendar-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.calendar-leave {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.calendar {
+  position: absolute;
+  top: 40px;
+  left: -50%;
+  background: var(--emw--color-background, #fff);
+  color: var(--emw--color-typography-secondary, #6f6f6f);
+  padding: 16px;
+  width: fit-content;
+  border: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  border-radius: var(--emw--border-radius-small, 4px);
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  z-index: 99;
+}
+.calendar-header {
+  display: flex;
+  align-items: center;
+}
+.calendar-header .date-picker {
+  display: flex;
+  margin: 0 18px;
+  align-items: center;
+}
+.calendar-header .date-picker-delimiter {
+  font-size: 16px;
+  margin: auto 4px;
+}
+.calendar-header .month-plus,
+.calendar-header .month-minus,
+.calendar-header .year-plus,
+.calendar-header .year-minus {
+  cursor: pointer;
+  font-size: 14px;
+}
+.calendar-header .month-plus:hover,
+.calendar-header .month-minus:hover,
+.calendar-header .year-plus:hover,
+.calendar-header .year-minus:hover {
+  color: var(--emw-pool-game-acition-active, #005fdb);
+  transition: color 0.2s;
+}
+.calendar-header .year-minus,
+.calendar-header .month-plus {
+  margin-right: 6px;
+}
+.calendar-content {
+  padding: 3px;
+  width: fit-content;
+}
+.calendar-content .day-item {
+  text-align: center;
+  line-height: 40px;
+  cursor: not-allowed;
+  position: relative;
+  pointer-events: none;
+}
+.calendar-content .day-item:hover {
+  background-color: var(--emw--color-background-secondary, #f5f5f5);
+}
+.calendar-content .day-item.isCurDay {
+  border-radius: 4px;
+  background: var(--emw--color-secondary, #fff3b9);
+  background-size: 50%;
+  color: var(--emw--color-typography-secondary, #6f6f6f);
+  font-weight: 600;
+  box-shadow: 2px 2px 2px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));
+  cursor: pointer;
+  pointer-events: all;
+}
+.calendar-content .day-item.isHighLight {
+  cursor: pointer;
+  pointer-events: all;
+}
+.calendar-content .day-item.isHighLight::after {
+  content: "";
+  position: absolute;
+  left: calc(50% - 4px);
+  bottom: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--emw--color-error, red);
+}
+.calendar-content-week {
+  display: grid;
+  grid-template-columns: repeat(7, 40px);
+  grid-template-rows: repeat(1, 36px);
+  justify-items: center;
+  align-items: center;
+  border-bottom: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  color: var(--emw--color-typography-secondary, #6f6f6f);
+}
+.calendar-content-day {
+  margin-top: 4px;
+  display: grid;
+  grid-template-rows: repeat(6, 40px);
+  grid-template-columns: repeat(7, 40px);
+}
+
+.calling-input {
+  height: 36px;
+  width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 4px;
+  background-color: var(--emw--color-background, #f5f5f5);
+  border-radius: var(--emw--border-radius-small, 4px);
+  border: var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));
+  cursor: pointer;
+}
+.calling-input .input {
+  color: var(--emw--color-typography, #000);
+}
+.calling-input-text {
+  color: var(--emw--color-typography, #000);
+}
+
+.date-selection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+.date-selection-leftIcon, .date-selection-rightIcon {
+  cursor: pointer;
+  color: var(--emw--color-typography, #000);
+}

package/dist/collection/components/helper-date-navigator/helper-date-navigator.js

@@ -0,0 +1,454 @@
+import { CalendarOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-svg";
+import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
+import { h } from "@stencil/core";
+import "../../../../../../../libs/vaadin-facade/index";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+const leftArrowIcon = renderIconDefinitionToSVGElement(LeftOutlined, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+});
+const rightArrowIcon = renderIconDefinitionToSVGElement(RightOutlined, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+});
+const calendarIcon = renderIconDefinitionToSVGElement(CalendarOutlined, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: 'var(--emw--color-primary-variant, #1367e7)' }
+});
+export class HelperDateNavigator {
+    constructor() {
+        this.handleOutsideClick = (event) => {
+            if (!this.showCalendar)
+                return;
+            const path = event.composedPath ? event.composedPath() : [];
+            // check if clicked on calendar
+            const isCalendarClick = path.includes(this.calendarRef);
+            // check if click select option
+            const isSelectOption = path.some((el) => {
+                var _a, _b;
+                return el instanceof HTMLElement &&
+                    (((_a = el.getAttribute('part')) === null || _a === void 0 ? void 0 : _a.includes('item')) || ((_b = el.getAttribute('part')) === null || _b === void 0 ? void 0 : _b.includes('overlay')));
+            });
+            if (!isCalendarClick && !isSelectOption) {
+                this.showCalendar = false;
+            }
+        };
+        this.onYearMinus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year - 1 < Math.min(...years))
+                return;
+            this.alterDate.year--;
+            this.loadRecords();
+        };
+        this.onYearPlus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year + 1 > Math.max(...years))
+                return;
+            this.alterDate.year++;
+            this.loadRecords();
+        };
+        this.onMonthMinus = () => {
+            if (this.alterDate.month === 0) {
+                this.onYearMinus();
+                this.alterDate.month = 11;
+            }
+            else {
+                this.alterDate.month--;
+                this.loadRecords();
+            }
+        };
+        this.onMonthPlus = () => {
+            if (this.alterDate.month === 11) {
+                this.onYearPlus();
+                this.alterDate.month = 0;
+            }
+            else {
+                this.alterDate.month++;
+                this.loadRecords();
+            }
+        };
+        this.onYearChange = (e) => {
+            this.alterDate.year = parseInt(e.detail.value);
+            this.loadRecords();
+        };
+        this.onMonthChange = (e) => {
+            this.alterDate.month = parseInt(e.detail.value) - 1;
+            this.loadRecords();
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.date = '';
+        this.defaultHighlightDates = undefined;
+        this.highlightDates = [];
+        this.weeks = undefined;
+        this.days = [];
+        this.alterDate = { year: 0, month: 0, day: 0 };
+        this.curDate = { year: 0, month: 0, day: 0 };
+        this.recordInfo = [];
+        this.showCalendar = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    handleGameIdStringChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            this.setHighlightDates();
+        }
+    }
+    componentWillLoad() {
+        resolveTranslationUrl(this.translationUrl);
+        this.weeks = translate('weeks', this.language);
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    handleDateChange() {
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    setHighlightDates() {
+        if (this.defaultHighlightDates) {
+            try {
+                this.highlightDates = JSON.parse(this.defaultHighlightDates);
+            }
+            catch (_a) {
+                this.highlightDates = [];
+            }
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.setHighlightDates();
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    get yearOptions() {
+        const years = Array.from({ length: 101 }, (_, i) => this.alterDate.year - 50 + i);
+        return years.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    get monthOptions() {
+        const months = Array.from({ length: 12 }, (_, i) => i + 1);
+        return months.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    loadRecords() {
+        const { year, month } = this.alterDate;
+        this.setDays(year, month);
+    }
+    setDays(year, month) {
+        this.days = [];
+        const firstDayOfMonth = new Date(year, month, 1);
+        const firstDayWeek = firstDayOfMonth.getDay();
+        const startDate = new Date(year, month, 1 - firstDayWeek);
+        for (let i = 0; i < 42; i++) {
+            const temp = new Date(startDate);
+            temp.setDate(startDate.getDate() + i);
+            const day = {
+                date: temp.getDate(),
+                month: temp.getMonth(),
+                year: temp.getFullYear()
+            };
+            this.days.push(day);
+        }
+    }
+    getFullDayOfMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    showFormatedDate(date) {
+        return `${date.day}/${date.month + 1}/${date.year}`;
+    }
+    handleSelectDate(curDay, curMonth, curYear) {
+        this.alterDate.day = curDay;
+        this.curDate = Object.assign({}, this.alterDate);
+        this.showCalendar = false;
+        const formattedHighLightArr = this.highlightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        const idx = formattedHighLightArr.findIndex((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+        if (idx > -1) {
+            this.changeDate.emit(idx);
+        }
+    }
+    tellIsCurDay(curDay, curMonth, curYear) {
+        return this.curDate.day === curDay && this.curDate.month === curMonth && this.curDate.year === curYear;
+    }
+    tellIsHighLight(curDay, curMonth, curYear) {
+        if (!this.highlightDates || !this.highlightDates.length)
+            return false;
+        const formattedHighLightArr = this.highlightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        return formattedHighLightArr.some((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+    }
+    renderInner() {
+        const calendarClass = ['calendar', this.showCalendar ? 'calendar-visible' : 'calendar-leave'];
+        return (h("div", { class: "lottery-tipping-calendar", ref: (el) => (this.calendarRef = el) }, h("div", { class: "calling-input", onClick: () => {
+                this.showCalendar = true;
+            } }, h("div", { class: "calling-input-text" }, this.showFormatedDate(this.curDate)), h("div", { class: "calling-input-icon", innerHTML: calendarIcon })), h("div", { class: calendarClass.join(' ') }, h("div", { class: "calendar-header" }, h("div", { class: "date-controller year-minus", onClick: this.onYearMinus }, "<"), h("div", { class: "date-controller month-minus", onClick: this.onMonthMinus }, "<"), h("div", { class: "date-picker" }, h("div", { class: "date-picker-year" }, h("vaadin-select", { items: this.yearOptions, value: this.alterDate.year, style: { '--vaadin-field-default-width': '90px' }, "on-value-changed": this.onYearChange.bind(this) })), h("div", { class: "date-picker-delimiter" }, "-"), h("div", { class: "date-picker-month" }, h("vaadin-select", { items: this.monthOptions, value: this.alterDate.month + 1, style: { '--vaadin-field-default-width': '64px' }, "on-value-changed": this.onMonthChange.bind(this) })), h("div", { class: "date-picker-delimiter" }, "-"), h("div", { class: "date-picker-day" }, this.alterDate.day)), h("div", { class: "date-controller month-plus", onClick: this.onMonthPlus }, ">"), h("div", { class: "date-controller year-plus", onClick: this.onYearPlus }, ">")), h("div", { class: "calendar-content" }, h("div", { class: "calendar-content-week" }, this.weeks.map((week) => (h("div", { class: "week-item" }, week)))), h("div", { class: "calendar-content-day" }, this.days.map((item) => (h("div", { class: {
+                'day-item': true,
+                isCurDay: this.tellIsCurDay(item.date, item.month, item.year),
+                isHighLight: this.tellIsHighLight(item.date, item.month, item.year)
+            }, onClick: () => this.handleSelectDate(item.date, item.month, item.year) }, item.date))))))));
+    }
+    render() {
+        return (h("div", { key: 'da34c4c86cac49411fb15ab8bceda89e379befc6', class: "date-selection" }, h("div", { key: '29f06ef7a5df466018ae6561b54fcbdfbab9f23b', class: "date-selection-leftIcon", innerHTML: leftArrowIcon, onClick: () => this.handlePrev.emit() }), h("div", { key: 'c6d75d873c2683752c37d4083c57761c4f7e523b', class: "date-selection-calendar" }, this.renderInner()), h("div", { key: '8b16b3e0761dd4c877f169aea84d028aaf193b69', class: "date-selection-rightIcon", innerHTML: rightArrowIcon, onClick: () => this.handleNext.emit() })));
+    }
+    static get is() { return "helper-date-navigator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["helper-date-navigator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["helper-date-navigator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom translation via json file url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom language for translation"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "date",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "defaultHighlightDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-highlight-dates",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "highlightDates": {},
+            "weeks": {},
+            "days": {},
+            "alterDate": {},
+            "curDate": {},
+            "recordInfo": {},
+            "showCalendar": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeDate",
+                "name": "changeDate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "handleNext",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "handlePrev",
+                "name": "prev",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "defaultHighlightDates",
+                "methodName": "handleGameIdStringChange"
+            }, {
+                "propName": "date",
+                "methodName": "handleDateChange"
+            }];
+    }
+}

package/dist/collection/components/helper-date-navigator/index.js

@@ -0,0 +1 @@
+export { HelperDateNavigator } from './helper-date-navigator';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/helper-date-navigator';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,39 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    },
+};
+export const translate = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+export const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+export const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}