@fleetbase/ember-ui 0.3.4 → 0.3.6

package/addon/components/content-panel.hbs

@@ -1,5 +1,5 @@
-<div class="next-content-panel-wrapper {{@wrapperClass}} {{if @isLoading 'is-loading'}}">
-    <div class="next-content-panel-container {{@containerClass}}">
+<div class="next-content-panel-wrapper {{if this.isOpen 'is-open' 'is-closed'}} {{@wrapperClass}} {{if @isLoading 'is-loading'}}" {{did-update this.handleArgsChange @open}}>
+    <div class="next-content-panel-container {{if this.isOpen 'is-open' 'is-closed'}} {{@containerClass}}">
         <div class="next-content-panel {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelClass}} {{if @isLoading 'is-loading'}}">
             <div
                 class="next-content-panel-header next-content-panel-toggle
@@ -7,15 +7,19 @@
                     {{@panelHeaderClass}}
                     {{if @isLoading 'is-loading'}}"
             >
-                <a href="javascript:;" aria-expanded={{this.isOpen}} class="next-content-panel-header-left {{if this.disabled 'opacity-50'}} {{@panelHeaderLeftClass}}" disabled={{this.disabled}} {{on "click" this.toggle}}>
-                    {{#unless @hideCaret}}
-                        <span class="icon-container" {{did-insert this.trackIconContainer}}>
-                            <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} @prefix="fas" />
+                <a
+                    href="javascript:;"
+                    aria-expanded={{this.isOpen}}
+                    class="next-content-panel-header-left {{if this.disabled 'opacity-50'}} {{@panelHeaderLeftClass}}"
+                    disabled={{this.disabled}}
+                    {{on "click" this.toggle}}
+                >
+                    {{#if (and @caretLeft (not @hideCaret))}}
+                        <span class="icon-container" {{did-insert this.trackIconContainer}} {{on "click" this.toggle}}>
+                            <FaIcon @icon={{if this.isOpen (concat (or @caretIcon "chevron") "-down") (concat (or @caretIcon "chevron") "-up")}} @prefix="fas" />
                         </span>
-                    {{/unless}}
-                    {{#if @isLoading}}
-                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="flex mr-2i" />
                     {{/if}}
+
                     {{#if @titleIcon}}
                         <span class="icon-container {{@titleIconWrapperClass}}" {{did-insert this.trackIconContainer}}>
                             <FaIcon @icon={{@titleIcon}} @prefix={{@titleIconPrefix}} @size={{or @titleIconSize "xs"}} class={{@titleIconClass}} />
@@ -36,7 +40,12 @@
                             </div>
                             <div class="panel-title flex-shrink-0 {{@panelTitleClass}}">
                                 <div class="flex flex-col {{@panelTitleWrapperClass}}">
-                                    <span class={{@panelTitleInlineClass}}>{{@title}}</span>
+                                    <div class="flex flex-row items-center space-x-2">
+                                        <span class={{@panelTitleInlineClass}}>{{@title}}</span>
+                                        {{#if @isLoading}}
+                                            <Spinner />
+                                        {{/if}}
+                                    </div>
                                     {{#if @subtitle}}
                                         <span class={{@panelSubtitleInlineClass}}>{{@subtitle}}</span>
                                     {{/if}}
@@ -47,6 +56,7 @@
                                     </span>
                                 {{/if}}
                             </div>
+                            {{yield to="title"}}
                         {{/if}}
                     </div>
                     {{#if this.doesntHavePermissions}}
@@ -60,6 +70,7 @@
                     {{/if}}
                 </a>
                 <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
+                    {{yield to="actions"}}
                     {{#if @titleRightSideComponent}}
                         {{component @titleRightSideComponent context=@titleRightSideComponentContext}}
                     {{else}}
@@ -89,19 +100,84 @@
                                 {{/if}}
                             </span>
                         {{/if}}
-                        {{#each @actionButtons as |button|}}
-                            <Button
-                                @type={{button.type}}
-                                @text={{button.text}}
-                                @icon={{button.icon}}
-                                @size={{button.size}}
-                                @iconPrefix={{button.iconPrefix}}
-                                @onClick={{button.onClick}}
-                                @wrapperClass={{button.wrapperClass}}
-                                @permission={{button.permission}}
-                                @disabled={{button.disabled}}
-                                class={{button.class}}
-                            />
+                        {{#each @actionButtons as |actionButton|}}
+                            {{#if actionButton.items}}
+                                <DropdownButton
+                                    @icon={{or actionButton.icon "ellipsis"}}
+                                    @size={{or actionButton.size "xs"}}
+                                    @iconPrefix={{actionButton.prefix}}
+                                    @triggerClass={{actionButton.triggerClass}}
+                                    @renderInPlace={{or actionButton.renderInPlace true}}
+                                    as |dd|
+                                >
+                                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                                        {{#each actionButton.items as |item|}}
+                                            {{#if item.separator}}
+                                                <div class="next-dd-menu-seperator"></div>
+                                            {{else}}
+                                                <div class="px-1 {{item.wrapperClass}}">
+                                                    <a
+                                                        href="javascript:;"
+                                                        class="next-dd-item {{item.class}} {{if item.disabled 'disabled'}}"
+                                                        disabled={{item.disabled}}
+                                                        {{on "click" (dropdown-fn dd (or item.fn item.onClick))}}
+                                                    >
+                                                        <div class="w-7 flex-grow-0 flex-shrink-0">
+                                                            <FaIcon @icon={{item.icon}} />
+                                                        </div>
+                                                        <span>{{or item.text item.label}}</span>
+                                                    </a>
+                                                </div>
+                                            {{/if}}
+                                        {{/each}}
+                                    </div>
+                                </DropdownButton>
+                            {{else if actionButton.component}}
+                                {{component
+                                    actionButton.component
+                                    icon=actionButton.icon
+                                    iconPrefix=actionButton.iconPrefix
+                                    iconComponent=actionButton.iconComponent
+                                    size=(or actionButton.size "xs")
+                                    text=actionButton.text
+                                    options=actionButton.options
+                                    items=actionButton.items
+                                    permission=actionButton.permission
+                                    isLoading=actionButton.isLoading
+                                    renderInPlace=actionButton.renderInPlace
+                                    triggerClass=actionButton.triggerClass
+                                    disabled=actionButton.disabled
+                                    onClick=actionButton.onClick
+                                    fn=actionButton.fn
+                                    perform=actionButton.perform
+                                    onSelect=actionButton.onSelect
+                                    onChange=actionButton.onChange
+                                }}
+                            {{else}}
+                                <Button
+                                    @type={{actionButton.type}}
+                                    @text={{actionButton.text}}
+                                    @onClick={{if actionButton.perform (perform actionButton.perform) (or actionButton.onClick actionButton.fn)}}
+                                    @size={{or actionButton.size "xs"}}
+                                    @buttonType={{actionButton.buttonType}}
+                                    @disabled={{actionButton.disabled}}
+                                    @exampleText={{actionButton.exampleText}}
+                                    @helpText={{actionButton.helpText}}
+                                    @icon={{actionButton.icon}}
+                                    @iconClass={{actionButton.iconClass}}
+                                    @iconFlip={{actionButton.iconFlip}}
+                                    @iconPrefix={{actionButton.iconPrefix}}
+                                    @iconRotation={{actionButton.iconRotation}}
+                                    @iconSize={{actionButton.iconSize}}
+                                    @isLoading={{actionButton.isLoading}}
+                                    @outline={{actionButton.outline}}
+                                    @permission={{actionButton.permission}}
+                                    @wrapperClass={{actionButton.wrapperClass}}
+                                    @textClass={{actionButton.textClass}}
+                                    @tooltipPlacement={{actionButton.tooltipPlacement}}
+                                    @visible={{actionButton.visible}}
+                                />
+                            {{/if}}
                         {{/each}}
                         {{#if @dropdownButton}}
                             <DropdownButton
@@ -150,6 +226,11 @@
                             </DropdownButton>
                         {{/if}}
                     {{/if}}
+                    {{#unless (or @caretLeft @hideCaret)}}
+                        <a href="#" class="icon-container" {{did-insert this.trackIconContainer}} {{on "click" this.toggle}}>
+                            <FaIcon @icon={{if this.isOpen (concat (or @caretIcon "chevron") "-down") (concat (or @caretIcon "chevron") "-up")}} @prefix="fas" />
+                        </a>
+                    {{/unless}}
                 </div>
             </div>
             <div class="next-content-panel-body {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelBodyClass}} {{if @isLoading 'is-loading'}}">
@@ -161,14 +242,6 @@
                             {{if @isLoading 'opacity-50'}}
                             {{if @isLoading 'is-loading'}}"
                     >
-                        {{#if @isLoading}}
-                            <div class="absolute w-full h-full inset-0 bg-opacity-50 bg-gray-900 flex items-center justify-center">
-                                <div class="flex flex-row items-center">
-                                    <Spinner @iconClass="text-sky-500 fa-spin-800ms" class="flex mr-2i" />
-                                    <span>Loading...</span>
-                                </div>
-                            </div>
-                        {{/if}}
                         {{yield}}
                     </div>
                 {{/if}}

package/addon/components/content-panel.js

@@ -67,7 +67,7 @@ export default class ContentPanelComponent extends Component {
         if (!disabled) {
             this.disabled = this.doesntHavePermissions = permission && this.abilities.cannot(permission);
         }
-        this.isOpen = open === true;
+        this.isOpen = Boolean(open);
         this.toggleOnCaretOnly = toggleOnCaretOnly === true;
         this.dropdownButtonRenderInPlace = dropdownButtonRenderInPlace === true;
 
@@ -87,6 +87,15 @@ export default class ContentPanelComponent extends Component {
         close: this.close.bind(this),
     };
 
+    /**
+     * Handle arguments changed
+     *
+     * @memberof ContentPanelComponent
+     */
+    @action handleArgsChange(el, [open]) {
+        this.isOpen = Boolean(open);
+    }
+
     /**
      * Toggles the content panel's open/closed state based on click events.
      *

package/addon/components/coordinates-input.hbs

@@ -42,8 +42,23 @@
             </div>
             <div class="flex flex-col">
                 <div class="flex flex-row items-center pb-4">
-                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.reverseLookup.isRunning}} placeholder="Enter address" />
-                    <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{perform this.reverseLookup}} @isLoading={{this.reverseLookup.isRunning}} />
+                    <Input
+                        @type="text"
+                        class="form-input mr-2"
+                        @value={{this.lookupQuery}}
+                        aria-label="Address Search"
+                        disabled={{or this.disabled this.reverseLookup.isRunning}}
+                        placeholder="Enter address"
+                    />
+                    <Button
+                        @wrapperClass="mr-2"
+                        @icon="search-location"
+                        @type="primary"
+                        @size="sm"
+                        @text="Lookup"
+                        @onClick={{perform this.reverseLookup}}
+                        @isLoading={{this.reverseLookup.isRunning}}
+                    />
                     <Button @type="default" @iconPrefix="fas" @icon="times" @size="sm" @text="Done" @onClick={{dd.actions.close}} />
                 </div>
             </div>

package/addon/components/country-select.hbs

@@ -8,7 +8,7 @@
         @onChange={{this.selectCountry}}
         @triggerClass="form-select form-input {{@triggerClass}}"
         @dropdownClass={{or @dropdownClass "ember-model-select__dropdown"}}
-        @placeholder={{or @placeholder "Select country..."}}
+        @placeholder={{or @placeholder (t "common.select-field" field=(t "common.country"))}}
         @disabled={{or this.disabled this.fetchCountries.isRunning}}
         @allowClear={{@allowClear}}
         ...attributes

package/addon/components/country-select.js

@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { task } from 'ember-concurrency';
+import { later } from '@ember/runloop';
 
 export default class CountrySelectComponent extends Component {
     @service fetch;
@@ -40,7 +41,7 @@ export default class CountrySelectComponent extends Component {
     }
 
     @action listenForInputChanges(element) {
-        setInterval(() => {
+        later(() => {
             const { value } = element;
 
             if (this.value !== value) {
@@ -54,7 +55,7 @@ export default class CountrySelectComponent extends Component {
         const { onChange } = this.args;
         this.selected = country;
 
-        if (typeof onChange === 'function') {
+        if (country && typeof onChange === 'function') {
             onChange(country.cca2, country);
         }
     }

package/addon/components/custom-field/form.hbs

@@ -0,0 +1,77 @@
+<div class="form-wrapper with-input-group-padding" ...attributes>
+    <InputGroup @name="Field Label" @value={{@resource.label}} {{on "input" this.setCustomFieldName}} />
+    <InputGroup @name="Field Description" @value={{@resource.description}} />
+    <InputGroup @name="Field Help Text" @value={{@resource.help_text}} />
+    <InputGroup>
+        <Toggle @isToggled={{@resource.required}} @onToggle={{fn (mut @resource.required)}}>
+            <span class="dark:text-gray-100 text-sm ml-2">Field is Required</span>
+        </Toggle>
+    </InputGroup>
+    <InputGroup>
+        <Toggle @isToggled={{@resource.editable}} @onToggle={{fn (mut @resource.editable)}}>
+            <span class="dark:text-gray-100 text-sm ml-2">Field is Editable</span>
+        </Toggle>
+    </InputGroup>
+    <InputGroup @name="Field Type">
+        <select class="form-select w-full has--placeholder" {{on "change" this.onSelectCustomFieldType}}>
+            <option selected disabled>
+                Select field type...
+            </option>
+            {{#each-in this.customFieldTypeMap as |key|}}
+                <option value={{dasherize key}} selected={{eq @resource.type (dasherize key)}}>
+                    {{smart-humanize key}}
+                </option>
+            {{/each-in}}
+        </select>
+    </InputGroup>
+    {{#if this.currentFieldMap.hasOptions}}
+        <CustomField::OptionsInput @customField={{@resource}} @fieldMap={{this.currentFieldMap}} class="mb-4" />
+    {{/if}}
+    {{#if this.currentFieldMap.allowedModels}}
+        <InputGroup @name="Field Model Type">
+            <select class="form-select w-full has--placeholder" {{on "change" this.onSelectModelType}}>
+                <option selected disabled>
+                    Select model type
+                </option>
+                {{#each this.currentFieldMap.allowedModels as |modelName|}}
+                    <option value={{dasherize modelName}} selected={{eq @resource.meta.modelName (dasherize modelName)}}>
+                        {{smart-humanize modelName}}
+                    </option>
+                {{/each}}
+            </select>
+        </InputGroup>
+    {{/if}}
+    <InputGroup @name="Meta: Column-Span">
+        <DropdownButton
+            @text={{concat "Column Span Size :" (n-a @resource.meta.colSpan)}}
+            @textClass="text-sm mr-2"
+            @buttonClass="flex-row-reverse w-64 justify-between"
+            @icon="caret-down"
+            @iconClass="mr-0i"
+            @size="sm"
+            @iconPrefix="fas"
+            @triggerClass="hidden md:flex"
+            as |dd|
+        >
+            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                <div class="p-1">
+                    {{#each this.colSpanSizeOptions as |size|}}
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.setCustomFieldMetaProperty "colSpan" size)}}>
+                            <div class="flex-1 flex flex-row items-center">
+                                <div class="w-6">
+                                    <FaIcon @icon="grip" />
+                                </div>
+                                <span>{{size}}</span>
+                            </div>
+                            <div>
+                                {{#if (eq size @resource.meta.colSpan)}}
+                                    <FaIcon @icon="check" class="text-green-500" />
+                                {{/if}}
+                            </div>
+                        </a>
+                    {{/each}}
+                </div>
+            </div>
+        </DropdownButton>
+    </InputGroup>
+</div>

package/addon/components/custom-field/form.js

@@ -0,0 +1,103 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { dasherize, camelize } from '@ember/string';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+import getCustomFieldTypeMap from '../../utils/get-custom-field-type-map';
+
+export default class CustomFieldFormComponent extends Component {
+    @service notifications;
+    @tracked currentFieldMap;
+    @tracked colSpanSizeOptions = [1, 2, 3];
+    customFieldTypeMap = getCustomFieldTypeMap();
+
+    constructor(owner, { resource }) {
+        super(...arguments);
+        next(() => this.selectFieldMap(resource.type));
+    }
+
+    /**
+     * A task for saving the custom field. It handles the save operation asynchronously,
+     * manages callbacks on success, and shows notifications on error.
+     * @task
+     */
+    @task *save() {
+        try {
+            this.args.resource = yield this.args.resource.save();
+            if (typeof this.onCustomFieldSaved === 'function') {
+                this.onCustomFieldSaved(this.args.resource);
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
+    }
+
+    /**
+     * Action method to set the name of the custom field. Converts the name to a dasherized string.
+     * @param {Event} event - The event object containing the new field name.
+     * @action
+     */
+    @action setCustomFieldName(event) {
+        const value = event.target.value;
+        this.args.resource.name = dasherize(value);
+    }
+
+    /**
+     * Action method for selecting the custom field type. It updates the field type
+     * and selects the corresponding field map.
+     * @param {Event} event - The event object containing the selected field type.
+     * @action
+     */
+    @action onSelectCustomFieldType(event) {
+        const value = event.target.value;
+        const type = dasherize(value);
+        this.args.resource.type = type;
+        this.selectFieldMap(type);
+    }
+
+    /**
+     * Action method for selecting a model type for the custom field.
+     * @param {Event} event - The event object containing the selected model type.
+     * @action
+     */
+    @action onSelectModelType(event) {
+        const value = event.target.value;
+        const modelName = dasherize(value);
+        this.setCustomFieldMetaProperty('modelName', modelName);
+    }
+
+    /**
+     * Action method to set a metadata property for the custom field.
+     * Initializes the metadata object if it doesn't exist.
+     * @param {string} key - The key of the metadata property.
+     * @param {*} value - The value to set for the property.
+     * @action
+     */
+    @action setCustomFieldMetaProperty(key, value) {
+        if (!isObject(this.args.resource.meta)) {
+            this.args.resource.set('meta', {});
+        }
+
+        const currentMeta = this.args.resource.meta ?? {};
+        this.args.resource.set('meta', { ...currentMeta, [key]: value });
+    }
+
+    /**
+     * Selects the field map based on the given field type.
+     * Updates the current field map and the component for the custom field.
+     * @param {string} type - The type of the custom field.
+     */
+    selectFieldMap(type) {
+        if (!type) return;
+        const fieldKey = camelize(type);
+        const fieldMap = this.customFieldTypeMap[fieldKey];
+        if (fieldMap) {
+            this.currentFieldMap = fieldMap;
+            this.args.resource.component = fieldMap.component;
+        }
+    }
+}

package/addon/components/custom-field/input.hbs

@@ -0,0 +1,93 @@
+{{#if this.customFieldComponent}}
+    <div class="{{if this.customField.meta.colSpan (concat 'col-span-' this.customField.meta.colSpan) ''}}">
+        {{#if (eq this.customFieldComponent "input")}}
+            <InputGroup
+                @name={{this.customField.label}}
+                @value={{this.value}}
+                @required={{this.customField.required}}
+                @helpText={{this.customField.help_text}}
+                {{on "input" this.onChangeHandler}}
+            />
+        {{else if (eq this.customFieldComponent "select")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <select class="form-select w-full has--placeholder" {{on "change" this.onChangeHandler}}>
+                    <option selected disabled>
+                        {{this.customField.label}}
+                    </option>
+                    {{#each this.customField.options as |selectOption|}}
+                        <option value={{selectOption}} selected={{eq this.value selectOption}}>
+                            {{selectOption}}
+                        </option>
+                    {{/each}}
+                </select>
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "phone-input")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <PhoneInput @value={{this.value}} @onInput={{this.onChangeHandler}} class="form-input w-full" />
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "money-input")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{true}} @onChange={{this.onChangeHandler}} />
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "date-time-input")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <DateTimeInput
+                    class="form-input w-full"
+                    @value={{this.value}}
+                    @minDate={{format-date-fns (now) "yyyy-MM-d"}}
+                    @minTime={{format-date-fns (now) "HH:mm"}}
+                    @onUpdate={{this.onChangeHandler}}
+                />
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "date-picker")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <DatePicker class="form-input w-full" @placeholder="YYYY-MM-DD" @value={{this.value}} @onDateChanged={{this.onChangeHandler}} />
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "radio-button-select")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <div class="mt-2 flex items-center space-x-2">
+                    {{#each this.customField.options as |radioOption index|}}
+                        <div class="radio-group-item shadow-sm {{if (eq this.value radioOption) 'is-checked'}}">
+                            <div class="flex items-center">
+                                <RadioButton
+                                    @radioClass="focus:ring-blue-500"
+                                    @radioId={{concat this.customField.name "-radio-option-" index}}
+                                    @value={{radioOption}}
+                                    @groupValue={{this.value}}
+                                    @name={{radioOption}}
+                                    @changed={{this.onChangeHandler}}
+                                />
+                                <div class="ml-2 text-sm dark:text-gray-100 text-gray-900 truncate">{{radioOption}}</div>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </InputGroup>
+        {{else if (eq this.customFieldComponent "file-upload")}}
+            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
+                <div class="flex items-center">
+                    <FileUpload
+                        @name={{this.customField.name}}
+                        @for={{this.customField.name}}
+                        @accept={{join "," this.acceptedFileTypes}}
+                        @multiple={{false}}
+                        @onFileAdded={{this.onFileAddedHandler}}
+                    >
+                        <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
+                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-file"}}
+                        </a>
+                    </FileUpload>
+                    {{#if this.file}}
+                        <div class="ml-2 flex items-center text-sm">
+                            <Spinner class="dark:text-blue-400 text-blue-900" />
+                            <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.file.progress}}%</span>
+                        </div>
+                    {{/if}}
+                </div>
+                {{#if this.uploadedFile}}
+                    <File @file={{this.uploadedFile}} @onDelete={{this.removeFile}} class="custom-field-file" />
+                {{/if}}
+            </InputGroup>
+        {{/if}}
+    </div>
+{{/if}}