@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/domain/components/MultiUploadInputComponent.js

@@ -0,0 +1,88 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getComponentMultiPersistAsync } from '../features/persistAsync/getComponentMultiPersistAsync';
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { toBase64 } from './utils/file-utils';
+import { getRandomId } from './utils/getRandomId';
+export const createMultiUploadInputComponent = (uploadInputProps, onComponentUpdate) => {
+    const { uid, id, checks, fileChecks, format, performPersistAsync, onValueChange, summariser } = uploadInputProps, rest = __rest(uploadInputProps, ["uid", "id", "checks", "fileChecks", "format", "performPersistAsync", "onValueChange", "summariser"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const getFileValidationErrors = getLocalValueValidator(fileChecks);
+    const persist = performPersistAsync
+        ? getComponentMultiPersistAsync(update, performPersistAsync)
+        : undefined;
+    const uploadComponent = Object.assign({ type: 'multi-upload', kind: 'input', uid,
+        id,
+        format, files: [], _update(updateFn) {
+            update(this, updateFn);
+        },
+        onBlur() {
+            this.validate();
+        },
+        onFocus() { }, // Noop
+        async onRemoveFile(index) {
+            var _a;
+            this._update((draft) => {
+                draft.value.splice(index, 1);
+                draft.files.splice(index, 1);
+            });
+            if (persist) {
+                (_a = this.persistedState[index]) === null || _a === void 0 ? void 0 : _a.abortController.abort();
+                this._update((draft) => {
+                    draft.persistedState.splice(index, 1);
+                });
+            }
+        },
+        async onInsertFile(index, file) {
+            const fileErrors = getFileValidationErrors(file);
+            const fileId = getRandomId();
+            const base64Value = format === 'base64' ? await toBase64(file) : null;
+            this._update((draft) => {
+                draft.value.splice(index, 0, file);
+                draft.files.splice(index, 0, { file, id: fileId, errors: fileErrors, base64Value });
+                draft.errors = [];
+            });
+            if (persist) {
+                await persist(this, index, format === 'blob' ? file : base64Value);
+            }
+            onValueChange();
+            return fileId;
+        },
+        async getSubmittableValue() {
+            if (persist) {
+                return Promise.all(this.persistedState.map(async ({ submission }) => submission));
+            }
+            return this.files.map(({ base64Value }) => base64Value);
+        },
+        getSubmittableValueSync() {
+            if (persist) {
+                return this.persistedState.map(({ lastResponse }) => lastResponse);
+            }
+            return this.files.map(({ base64Value }) => base64Value);
+        },
+        getSummary() {
+            return summariser(this.getLocalValue().map(({ name }) => name));
+        },
+        getLocalValue() {
+            return this.value;
+        },
+        validate() {
+            const errorMsgs = getValidationErrors(this.getLocalValue());
+            this._update((draft) => {
+                draft.errors = errorMsgs;
+            });
+            return errorMsgs.length === 0 && this.files.every(({ errors }) => errors.length === 0);
+        } }, rest);
+    return uploadComponent;
+};

package/build/domain/components/NumberInputComponent.js

@@ -0,0 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getDebouncedSchemaOnChange } from '../features/schema-on-change/getDebouncedSchemaOnChange';
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getDebouncedComponentValidationAsync } from '../features/validationAsync/getComponentValidationAsync';
+import { getInputUpdateFunction } from './utils/component-utils';
+export const createNumberInputComponent = (numberInputProps, onComponentUpdate) => {
+    const { uid, id, checks, schemaOnChange, performValidationAsync, onValueChange, onPersistAsync, summariser } = numberInputProps, rest = __rest(numberInputProps, ["uid", "id", "checks", "schemaOnChange", "performValidationAsync", "onValueChange", "onPersistAsync", "summariser"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+    const validateAsync = performValidationAsync
+        ? getDebouncedComponentValidationAsync(update, performValidationAsync)
+        : undefined;
+    const numberComponent = Object.assign({ type: 'number', kind: 'input', uid,
+        id,
+        _update(updateFn) {
+            update(this, updateFn);
+        },
+        onBlur() {
+            const isValid = this.validate();
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange.flush();
+            if (isValid) {
+                void (onPersistAsync === null || onPersistAsync === void 0 ? void 0 : onPersistAsync().catch(() => { }));
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync.flush();
+            }
+        },
+        onFocus() { }, // Noop
+        onChange(updatedValue) {
+            const prevValue = this.value;
+            this._update((draft) => {
+                draft.errors = [];
+                draft.validationAsyncState.messages = {};
+                draft.value = updatedValue;
+            });
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange(prevValue, updatedValue);
+            const isValid = getValidationErrors(updatedValue).length === 0;
+            if (isValid) {
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync(this, updatedValue);
+            }
+            onValueChange();
+        },
+        async getSubmittableValue() {
+            return this.getSubmittableValueSync();
+        },
+        getSubmittableValueSync() {
+            var _a;
+            return (_a = this.getLocalValue()) !== null && _a !== void 0 ? _a : null;
+        },
+        getSummary() {
+            return summariser(this.getLocalValue());
+        },
+        getLocalValue() {
+            return this.value;
+        },
+        validate() {
+            const errors = getValidationErrors(this.getLocalValue());
+            this._update((draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0;
+        } }, rest);
+    return numberComponent;
+};

package/build/domain/components/ObjectComponent.js

@@ -0,0 +1,45 @@
+import { mergeSummaries, summariseFromChildren } from '../features/summary/summary-utils';
+import { validateComponents } from '../features/validation/validation-functions';
+export const createObjectComponent = (objectProps) => {
+    const { uid, schemaId, analyticsId, alert, componentMap, control, description, displayOrder, help, hidden, media, summariser, title, tags, } = objectProps;
+    return {
+        type: 'object',
+        kind: 'input',
+        uid,
+        schemaId,
+        analyticsId,
+        alert,
+        componentMap,
+        control,
+        description,
+        help,
+        hidden,
+        media,
+        title,
+        tags,
+        getChildren() {
+            return displayOrder.map((propName) => this.componentMap[propName]);
+        },
+        async getSubmittableValue() {
+            return Promise.all(displayOrder.map(async (propName) => this.componentMap[propName].getSubmittableValue().then((value) => ({ value, propName })))).then((values) => values.reduce((acc, { value, propName }) => (Object.assign(Object.assign({}, acc), (value === null ? {} : { [propName]: value }))), {}));
+        },
+        getSubmittableValueSync() {
+            return mergeChildrenValues(displayOrder, (propName) => this.componentMap[propName].getSubmittableValueSync());
+        },
+        getSummary() {
+            const summary = summariser(this.getLocalValue());
+            const childSummary = summariseFromChildren(this.getChildren());
+            return mergeSummaries(summary, childSummary);
+        },
+        getLocalValue() {
+            return mergeChildrenValues(displayOrder, (propName) => this.componentMap[propName].getLocalValue());
+        },
+        validate() {
+            return hidden ? true : validateComponents(this.getChildren());
+        },
+    };
+};
+const mergeChildrenValues = (displayOrder, getComponentValue) => displayOrder.reduce((acc, propName) => {
+    const componentValue = getComponentValue(propName);
+    return Object.assign(Object.assign({}, acc), (componentValue === null ? {} : { [propName]: componentValue }));
+}, {});

package/build/domain/components/ParagraphComponent.js

@@ -0,0 +1 @@
+export const createParagraphComponent = (paragraphProps) => (Object.assign({ type: 'paragraph', kind: 'layout' }, paragraphProps));

package/build/domain/components/PersistAsyncComponent.js

@@ -0,0 +1,92 @@
+import { abortAndResetController } from '../features/utils/http-utils';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { isExactLocalValueMatch } from './utils/isExactLocalValueMatch';
+export const createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, onComponentUpdate) => {
+    const { uid, analyticsId, schemaId, component, hidden, model, localValue, tags } = props;
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const paComponent = {
+        type: 'persist-async',
+        kind: 'input',
+        uid,
+        analyticsId,
+        schemaId,
+        component,
+        hidden,
+        lastSubmitted: model != null ? (localValue !== null && localValue !== void 0 ? localValue : null) : null,
+        lastResponse: model !== null && model !== void 0 ? model : null,
+        submission: Promise.resolve(model !== null && model !== void 0 ? model : null),
+        abortController: new AbortController(),
+        errors: [],
+        tags,
+        _update(updateFn) {
+            update(this, updateFn);
+        },
+        validate() {
+            return this.component.validate();
+        },
+        getLocalValue() {
+            return this.component.getLocalValue();
+        },
+        async getSubmittableValue() {
+            return this.persist();
+        },
+        getSubmittableValueSync() {
+            return this.lastResponse;
+        },
+        getSummary() {
+            return this.component.getSummary();
+        },
+        async persist() {
+            const childLocalValue = this.component.getLocalValue();
+            if (isExactLocalValueMatch(childLocalValue, this.lastSubmitted)) {
+                return this.submission;
+            }
+            const newAbortController = abortAndResetController(this.abortController);
+            if (childLocalValue == null || childLocalValue === '') {
+                const resolvedNull = Promise.resolve(null);
+                this._update((draft) => {
+                    draft.abortController = newAbortController;
+                    draft.lastResponse = null;
+                    draft.lastSubmitted = childLocalValue;
+                    draft.submission = resolvedNull;
+                    draft.errors = [];
+                });
+                void (schemaOnChange === null || schemaOnChange === void 0 ? void 0 : schemaOnChange());
+                return resolvedNull;
+            }
+            const { signal } = newAbortController;
+            const newSubmission = performPersistAsync({ value: childLocalValue, signal })
+                .then((token) => {
+                this._update((draft) => {
+                    draft.lastResponse = token;
+                    draft.errors = [];
+                });
+                void (schemaOnChange === null || schemaOnChange === void 0 ? void 0 : schemaOnChange());
+                return token;
+            })
+                .catch((error) => {
+                if (error instanceof DOMException && error.name === 'AbortError') {
+                    return null;
+                }
+                this._update((draft) => {
+                    draft.lastResponse = null;
+                    draft.lastSubmitted = null;
+                    draft.submission = Promise.resolve(null);
+                    if (this.component.type !== 'upload') {
+                        draft.errors = error instanceof Error ? [error.message] : [];
+                    }
+                });
+                throw error;
+            });
+            this._update((draft) => {
+                draft.abortController = newAbortController;
+                draft.lastSubmitted = childLocalValue;
+                draft.lastResponse = null;
+                draft.submission = newSubmission;
+                draft.errors = [];
+            });
+            return newSubmission;
+        },
+    };
+    return paComponent;
+};

package/build/domain/components/ProgressComponent.js

@@ -0,0 +1 @@
+export const createProgressComponent = (progressProps) => (Object.assign({ type: 'progress', kind: 'layout' }, progressProps));

package/build/domain/components/RepeatableComponent.js

@@ -0,0 +1,103 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getLocalValueValidator, validateComponents, } from '../features/validation/validation-functions';
+import { getInputUpdateFunction } from './utils/component-utils';
+export const createRepeatableComponent = (repeatableProps, onComponentUpdate) => {
+    const { uid, schemaId, analyticsId, checks, components, summary, onValueChange, createEditableComponent, summariser } = repeatableProps, componentProps = __rest(repeatableProps, ["uid", "schemaId", "analyticsId", "checks", "components", "summary", "onValueChange", "createEditableComponent", "summariser"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const repeatableComponent = Object.assign(Object.assign({ uid,
+        schemaId,
+        analyticsId, type: 'repeatable', kind: 'input', components, editableComponent: null, editableIndex: null, summaryDefaults: {
+            title: summary === null || summary === void 0 ? void 0 : summary.defaultTitle,
+            description: summary === null || summary === void 0 ? void 0 : summary.defaultDescription,
+            media: summary === null || summary === void 0 ? void 0 : summary.defaultMedia,
+        } }, componentProps), { _update(updateFn) {
+            update(this, updateFn);
+        },
+        onEdit(itemIndex) {
+            this._update((draft) => {
+                draft.editableComponent = createEditableComponent(draft.components[itemIndex].getLocalValue());
+                draft.editableIndex = itemIndex;
+            });
+        },
+        onAdd() {
+            this._update((draft) => {
+                draft.editableComponent = createEditableComponent(null);
+                draft.editableIndex = null;
+                draft.errors = [];
+            });
+        },
+        onSave() {
+            var _a;
+            const isValid = (_a = this.editableComponent) === null || _a === void 0 ? void 0 : _a.validate();
+            if (!isValid) {
+                return false;
+            }
+            this._update((draft) => {
+                if (draft.editableComponent === null) {
+                    return;
+                }
+                if (draft.editableIndex === null) {
+                    // Adding a new item
+                    const newComponent = Object.assign({}, draft.editableComponent);
+                    draft.components = [...this.components, newComponent];
+                }
+                else {
+                    // Editing an item
+                    draft.components[draft.editableIndex] = Object.assign(Object.assign({}, draft.editableComponent), { uid: draft.components[draft.editableIndex].uid });
+                }
+                draft.editableComponent = null;
+                draft.editableIndex = null;
+            });
+            onValueChange();
+            return true;
+        },
+        onRemove() {
+            this._update((draft) => {
+                if (draft.editableIndex === null) {
+                    return;
+                }
+                draft.components.splice(draft.editableIndex, 1);
+                draft.editableComponent = null;
+                draft.editableIndex = null;
+            });
+            onValueChange();
+        },
+        getChildren() {
+            return this.editableComponent !== null
+                ? [...this.components, this.editableComponent]
+                : this.components;
+        },
+        async getSubmittableValue() {
+            return Promise.all(this.components.map(async (component) => component.getSubmittableValue()));
+        },
+        getSubmittableValueSync() {
+            return this.components.map((component) => component.getSubmittableValueSync());
+        },
+        getSummary() {
+            // It doesn't make sense to pass a value here
+            return summariser(null);
+        },
+        getLocalValue() {
+            return this.components.map((component) => component.getLocalValue());
+        },
+        validate() {
+            const messages = getValidationErrors(this.getLocalValue());
+            const childComponentsValid = validateComponents(this.getChildren());
+            this._update((draft) => {
+                draft.errors = messages;
+            });
+            return messages.length === 0 && childComponentsValid;
+        } });
+    return repeatableComponent;
+};

package/build/domain/components/ReviewComponent.js

@@ -0,0 +1 @@
+export const createReviewComponent = (reviewProps) => (Object.assign({ type: 'review', kind: 'layout' }, reviewProps));

package/build/domain/components/RootDomainComponent.js

@@ -0,0 +1,173 @@
+import { getInputUpdateFunction } from './utils/component-utils';
+export const createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, requestCache) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const rootComponent = {
+        type: 'root',
+        kind: 'step',
+        uid: 'root',
+        stepComponent: null,
+        subflow: null,
+        stepStack: [],
+        backConfig,
+        requestCache,
+        _update(updateFn) {
+            update(this, updateFn);
+        },
+        dismissAllModals() {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.dismissAllModals();
+        },
+        dismissModal() {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.dismissModal();
+        },
+        showModal(modal) {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.showModal(modal);
+        },
+        getChildren() {
+            const step = this.getStep();
+            return step ? [step, ...step.getModals()] : [];
+        },
+        getLocalValue() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.getLocalValue()) !== null && _b !== void 0 ? _b : null;
+        },
+        async getSubmittableValue() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.getSubmittableValue()) !== null && _b !== void 0 ? _b : null;
+        },
+        getSubmittableValueSync() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.getSubmittableValueSync()) !== null && _b !== void 0 ? _b : null;
+        },
+        validate() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false;
+        },
+        setLoadingState(loadingState) {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.setLoadingState(loadingState);
+        },
+        getLoadingState() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.loadingState) !== null && _b !== void 0 ? _b : 'initial';
+        },
+        getSchemaComponents() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.schemaComponents) !== null && _b !== void 0 ? _b : [];
+        },
+        getTrackEvent() {
+            var _a, _b;
+            return (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.trackEvent) !== null && _b !== void 0 ? _b : null;
+        },
+        isBusy() {
+            const loadingState = this.getLoadingState();
+            return loadingState === 'submitting' || loadingState === 'refreshing';
+        },
+        hasStep() {
+            return Boolean(this.stepStack.length > 0);
+        },
+        getStep() {
+            var _a;
+            return (_a = this.stepStack[this.stepStack.length - 1]) !== null && _a !== void 0 ? _a : null;
+        },
+        addSubflow(subflow) {
+            this._update((draft) => {
+                draft.subflow = subflow;
+            });
+        },
+        closeSubflow() {
+            this._update((draft) => {
+                draft.subflow = null;
+            });
+        },
+        start() {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.start();
+        },
+        stop() {
+            var _a;
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.stop();
+        },
+        updateStep(stepComponent) {
+            var _a;
+            this.closeSubflow();
+            const shouldScroll = shouldScrollOnStepUpdate(stepComponent, this.getStep());
+            this._update((draft) => {
+                draft.stepStack = draft.stepStack.slice(0, -1);
+                draft.stepStack.push(stepComponent);
+            });
+            if (shouldScroll) {
+                scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop('smooth');
+            }
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.start();
+        },
+        pushStep(stepComponent) {
+            var _a;
+            this.closeSubflow();
+            const previousStep = this.getStep();
+            const previousStepHasPolling = previousStep === null || previousStep === void 0 ? void 0 : previousStep.step.polling;
+            this._update((draft) => {
+                switch (stepComponent.stackBehavior) {
+                    case 'remove-previous':
+                    case 'replace-current':
+                        draft.stepStack.splice(draft.stepStack.length - 1, 1, stepComponent);
+                        return;
+                    case 'remove-all':
+                        draft.stepStack = [stepComponent];
+                        return;
+                    case 'default':
+                        // to prevent getting into loops, we remove a step that has polling when we
+                        // push the next step so the user does not go back only to immediately go forward again.
+                        if (previousStepHasPolling) {
+                            draft.stepStack = draft.stepStack.slice(0, -1);
+                        }
+                        draft.stepStack.push(stepComponent);
+                }
+            });
+            if (previousStep != null) {
+                (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.start();
+                scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop('instant');
+            }
+        },
+        clearStack() {
+            const currentStep = this.getStep();
+            if (currentStep) {
+                this._update((draft) => {
+                    draft.stepStack = [currentStep];
+                });
+            }
+        },
+        getRefreshUrl() {
+            var _a, _b, _c, _d;
+            return (_d = (_b = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.step.refreshUrl) !== null && _b !== void 0 ? _b : (_c = this.getStep()) === null || _c === void 0 ? void 0 : _c.step.refreshFormUrl) !== null && _d !== void 0 ? _d : null;
+        },
+        navigateBack() {
+            var _a;
+            this.closeSubflow();
+            if (this.stepStack.length === 1) {
+                return;
+            }
+            this._update((draft) => {
+                draft.stepStack = draft.stepStack.slice(0, -1);
+            });
+            (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.start();
+        },
+        canPerformBack() {
+            var _a, _b;
+            const navigation = (_a = this.getStep()) === null || _a === void 0 ? void 0 : _a.step.navigation;
+            const stepHasBehavior = Boolean((_b = navigation === null || navigation === void 0 ? void 0 : navigation.back) !== null && _b !== void 0 ? _b : navigation === null || navigation === void 0 ? void 0 : navigation.backButton);
+            return (this.backConfig.isFlowCancellable ||
+                (this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled) ||
+                stepHasBehavior);
+        },
+    };
+    return rootComponent;
+};
+const shouldScrollOnStepUpdate = (newStep, currentStep) => {
+    if (!currentStep) {
+        return false; // we never scroll on first step set
+    }
+    return newStep.error != null && newStep.error !== currentStep.error;
+};

package/build/domain/components/SectionComponent.js

@@ -0,0 +1,5 @@
+export const createSectionComponent = (props) => {
+    return Object.assign(Object.assign({}, props), { type: 'section', kind: 'layout', getChildren() {
+            return this.components;
+        } });
+};