@ticatec/uniface-element 0.1.9

package/dist/card/Card.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+
+    import CardHeader from "./CardHeader.svelte";
+    import type CardAction from "./CardAction";
+    import CommonCardActionBar from "./CommonCardActionBar.svelte";
+
+
+    export let style: string = "";
+    export let title: string = null as unknown as string;
+    export let actions: Array<CardAction> = [];
+    export let variant: 'plain' | '3d' = 'plain';
+
+</script>
+
+<div class="uniface-card" class:shadowBox={variant=='3d'}>
+    <div {style}>
+        {#if title}
+            <CardHeader {title}/>
+        {:else if $$slots['header-bar']}
+            <div class="card-header">
+                <slot name="header-bar"/>
+            </div>
+        {/if}
+        <div class="card-content">
+            <slot/>
+        </div>
+        {#if actions && actions.length > 0}
+            <CommonCardActionBar {actions}/>
+        {:else }
+            {#if $$slots['action-bar']}
+                <div class="card-action-bar">
+                    <slot name="action-bar"/>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</div>

package/dist/card/Card.svelte.d.ts

@@ -0,0 +1,37 @@
+import type CardAction from "./CardAction";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    style?: string;
+    title?: string;
+    actions?: Array<CardAction>;
+    variant?: "plain" | "3d";
+}, {
+    'header-bar': {};
+    default: {};
+    'action-bar': {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'header-bar': {};
+    default: {};
+    'action-bar': {};
+}, {}, string>;
+type Card = InstanceType<typeof Card>;
+export default Card;

package/dist/card/CardAction.d.ts

@@ -0,0 +1,5 @@
+export type ActionCallback = () => void;
+export default interface CardAction {
+    icon?: string;
+    callback: ActionCallback;
+}

package/dist/card/CardAction.js

@@ -0,0 +1 @@
+export {};

package/dist/card/CardHeader.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+
+    export let title: string
+
+</script>
+<div class="card-header simple">
+    <span>{title}</span>
+</div>

package/dist/card/CardHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CardHeader: $$__sveltets_2_IsomorphicComponent<{
+    title: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CardHeader = InstanceType<typeof CardHeader>;
+export default CardHeader;

package/dist/card/CommonCardActionBar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type CardAction from "./CardAction";
+    import utils from "../common/utils";
+
+    export let actions: Array<CardAction>;
+
+
+    let clickEnable = true;
+
+    const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
+        if (clickEnable) {
+            clickEnable = false;
+            action.callback?.();
+            await utils.sleep(0.5);
+            clickEnable = true;
+        }
+    }
+
+</script>
+
+<div class="card-action-bar simple">
+    {#each actions as action}
+        <div class="action-item">
+            <i class={action.icon} on:click={handleActionClick(action)}></i>
+        </div>
+    {/each}
+</div>

package/dist/card/CommonCardActionBar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type CardAction from "./CardAction";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CommonCardActionBar: $$__sveltets_2_IsomorphicComponent<{
+    actions: Array<CardAction>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CommonCardActionBar = InstanceType<typeof CommonCardActionBar>;
+export default CommonCardActionBar;

package/dist/card/index.d.ts

@@ -0,0 +1,4 @@
+import Card from "./Card.svelte";
+import type CardAction from "./CardAction";
+export default Card;
+export type { CardAction };

package/dist/card/index.js

@@ -0,0 +1,2 @@
+import Card from "./Card.svelte";
+export default Card;

package/dist/cascade-options-select/CascadeOptionSelect.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import iconLoading from "../assets/loading.gif";
+    import OptionsBox from "./OptionsBox.svelte";
+    import {tick} from "svelte";
+    import CommonPicker from "../common/CommonPicker.svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+
+    type OnSelectOption = (item: any) => Promise<Array<any>>;
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let mandatory: boolean = false;
+    export let value: any = null;
+    export let keyField: string = "code";
+    export let textField: string = "text";
+    export let abbrField: string = 'abbr';
+    export let style: string = '';
+    export let placeholder: string = "";
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let emptyText: string | null = null;
+    export let text: string = '';
+    export let nodes: Array<Array<any>> = [];
+    export let menu$height: number = 150;
+    export let onSelect: OnSelectOption;
+    export let box$style: string = "";
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+
+    let oldValue = value;
+    let selectedItems: Array<any> = [];
+    let busy: boolean = false;
+
+    const selectOption = (level: number) => async (item: any) => {
+        value = item?.[keyField];
+        let newArr = nodes.slice(0, level + 1)
+        if (level == 0) {
+            selectedItems = [item];
+        } else {
+            selectedItems = [...selectedItems.slice(0, level), item];
+        }
+        busy = true;
+        let list = await (onSelect?.(item));
+        busy = false;
+        if (list && list.length > 0) {
+            nodes = [...newArr, list];
+            await tick();
+            contentPanel.scrollLeft = contentPanel.scrollWidth;
+        } else {
+            showPopup = false;
+        }
+    }
+
+    let showPopup = false;
+    let mh;
+    let contentPanel: any;
+
+    const openPopup = () => {
+        showPopup = true;
+    }
+
+    $: if (oldValue != value) {
+        oldValue = value;
+        onChange?.(value)
+    }
+
+    $: mh = `height: ${menu$height}px`;
+
+    $: text = selectedItems && selectedItems.length > 0 ? selectedItems[selectedItems.length - 1][textField] : emptyText ?? '';
+
+    const cleanData = () => {
+        value = null;
+        text = '';
+        onChange?.(null)
+    }
+
+    let editor: any;
+
+    $: if (showPopup) {
+        editor.focus();
+    }
+</script>
+
+
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-chevron-down"
+              bind:showPopup canClean={!mandatory && text!=null} autoFit clean={cleanData} textValue={text??''} {readonly} {disabled}>
+    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder}
+           class="text-editor" bind:value={text} on:blur on:focus/>
+    <div class="cascade-options-popover" style={mh} slot="popup-panel">
+        <div style="width: 100%; height: 100%; position: relative">
+            <div bind:this={contentPanel} style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
+                {#each nodes as node, idx}
+                    <OptionsBox options={node} {keyField} textField={abbrField} {box$style} onSelect={selectOption(idx)}
+                                selectedItem={selectedItems[idx]}/>
+                {/each}
+            </div>
+            {#if busy}
+                <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #e1e1e110;">
+                    <div style="position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center">
+                        <div style="width: 100px; margin: 0 auto; text-align: center; background-color: #f0f0f0; border-radius: 4px; padding: 8px 12px; box-sizing: border-box;">
+                            <img src={iconLoading} alt="" width="32" height="32"/>
+                        </div>
+                    </div>
+                </div>
+            {/if}
+        </div>
+</CommonPicker>
+
+<!--{/if}-->

package/dist/cascade-options-select/CascadeOptionSelect.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cascade-options-select/CascadePanel.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import iconLoading from "../assets/loading.gif";
+    import OptionsBox from "./OptionsBox.svelte";
+    import type {OnSelectHandler} from "../common/OnSelectHandler";
+
+
+    export let nodes: Array<Array<any>>;
+    export let keyField: string;
+    export let textField: string;
+    export let box$style: string;
+    export let onSelect: OnSelectHandler<any>;
+
+    export let selectedItems:Array<any> = [];
+    let busy: boolean = false;
+
+    const selectOption = (level: number) => (item: any) => {
+        if (level == 0) {
+            selectedItems = [item];
+            nodes = [nodes[0]];
+        } else if (level == selectedItems.length - 1) {
+            selectedItems.pop();
+            selectedItems = [...selectedItems, item];
+        } else if (level < selectedItems.length) {
+            selectedItems.splice(level);
+            nodes.splice(level+1);
+            selectedItems = [...selectedItems, item];
+        } else if (level == selectedItems.length) {
+            selectedItems = [...selectedItems, item];
+        }
+        onSelect?.(item);
+    }
+
+
+</script>
+<div style="width: 100%; height: 100%; position: relative">
+    <div style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
+        {#each nodes as node, idx}
+            <OptionsBox options={node} {keyField} {textField} {box$style} onSelect={selectOption(idx)}
+                        selectedItem={selectedItems[idx]}/>
+        {/each}
+    </div>
+    {#if busy}
+    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #e1e1e110;">
+        <div style="position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center">
+            <div style="width: 100px; margin: 0 auto; text-align: center; background-color: #f0f0f0; border-radius: 4px; padding: 8px 12px; box-sizing: border-box;">
+                <img src={iconLoading} width="32" height="32"/>
+            </div>
+        </div>
+    </div>
+    {/if}
+
+</div>

package/dist/cascade-options-select/CascadePanel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { OnSelectHandler } from "../common/OnSelectHandler";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CascadePanel: $$__sveltets_2_IsomorphicComponent<{
+    nodes: Array<Array<any>>;
+    keyField: string;
+    textField: string;
+    box$style: string;
+    onSelect: OnSelectHandler<any>;
+    selectedItems?: Array<any>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CascadePanel = InstanceType<typeof CascadePanel>;
+export default CascadePanel;

package/dist/cascade-options-select/OptionsBox.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+
+    import type {OnSelectHandler} from "../common/OnSelectHandler";
+
+    export let options: Array<any>;
+    export let onSelect: OnSelectHandler<any>;
+    export let selectedItem: any;
+    export let keyField: string;
+    export let textField: string;
+    export let box$style: string;
+
+    const handleItemClick = (item: any) => (e: MouseEvent) => {
+        selectedItem = item;
+        onSelect(item);
+    }
+</script>
+<div class="cascade-column" style={box$style}>
+    {#each options as op}
+        <div class="option-item" class:selected={op[keyField]===(selectedItem??{})[keyField]}
+             aria-hidden="true" on:click={handleItemClick(op)}>
+            <span>{op[textField]}</span>
+        </div>
+    {/each}
+</div>

package/dist/cascade-options-select/OptionsBox.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { OnSelectHandler } from "../common/OnSelectHandler";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OptionsBox: $$__sveltets_2_IsomorphicComponent<{
+    options: Array<any>;
+    onSelect: OnSelectHandler<any>;
+    selectedItem: any;
+    keyField: string;
+    textField: string;
+    box$style: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OptionsBox = InstanceType<typeof OptionsBox>;
+export default OptionsBox;

package/dist/cascade-options-select/README.md

@@ -0,0 +1,3 @@
+# 级联选择
+
+用于多级选择，通常选择类似于层级结构。

package/dist/cascade-options-select/index.d.ts

@@ -0,0 +1,2 @@
+import CascadeOptionSelect from "./CascadeOptionSelect.svelte";
+export default CascadeOptionSelect;

package/dist/cascade-options-select/index.js

@@ -0,0 +1,2 @@
+import CascadeOptionSelect from "./CascadeOptionSelect.svelte";
+export default CascadeOptionSelect;

package/dist/checkbox/CheckBox.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+
+    export let label: string = "";
+    export let readonly: boolean = false;
+    export let disabled: boolean = false;
+    export let value: boolean = false;
+    export let indeterminate: boolean = false;
+    export let style: string = '';
+    export let compact: boolean = false;
+    export let onClick: ((event: MouseEvent) => void) | null = null;
+    export let onChange: OnChangeHandler<boolean> = null as unknown as OnChangeHandler<boolean>;
+
+    let oldValue = value;
+
+    let checkbox: any;
+
+    const handleClickEvent = (e: MouseEvent) => {
+        if (readonly || disabled) {
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            indeterminate = false;
+            setTimeout(()=>{
+                onClick?.(e);
+            }, 50)
+            e.stopPropagation();
+        }
+    }
+
+    $: if (checkbox) {
+        checkbox.indeterminate = indeterminate;
+    }
+
+    $: if (value != oldValue) {
+        oldValue = value;
+        onChange?.(value)
+    }
+
+
+</script>
+<div class="uniface-checkbox" class:disabled class:compact {style}>
+    <label on:click={handleClickEvent} aria-hidden="true" >
+        <input bind:this={checkbox} type="checkbox" bind:checked={value} {readonly} {disabled}/>
+        <span>{label}</span>
+    </label>
+</div>

package/dist/checkbox/CheckBox.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CheckBox: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    value?: boolean;
+    indeterminate?: boolean;
+    style?: string;
+    compact?: boolean;
+    onClick?: ((event: MouseEvent) => void) | null;
+    onChange?: OnChangeHandler<boolean>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CheckBox = InstanceType<typeof CheckBox>;
+export default CheckBox;

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import CheckBox from "./CheckBox.svelte";
+export default CheckBox;

package/dist/checkbox/index.js

@@ -0,0 +1,2 @@
+import CheckBox from "./CheckBox.svelte";
+export default CheckBox;

package/dist/common/CommonPicker.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import Popover from "../common/Popover.svelte";
+    import Icon from "../icon";
+    import type {MouseClickHandler} from "../common/MouseClickHandler";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled';
+    export let disabled: boolean;
+    export let readonly: boolean;
+    export let compact: boolean;
+    export let style: string = '';
+    export let className: string = '';
+    export let displayMode: DisplayMode;
+    export let autoFit: boolean = true;
+    export let canClean: boolean;
+    export let textValue: string;
+    export let dropDownIcon: string = "";
+    export let clean: () => void;
+    export let iconClickHandler: MouseClickHandler = null as unknown as MouseClickHandler;
+    export let showPopup: boolean = false;
+
+    const openPopup = () => {
+        showPopup = true;
+    }
+
+    let editorElement;
+
+</script>
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-display-field">
+        <span>{textValue}</span>
+    </div>
+{:else}
+    <div bind:this={editorElement} class="uniface-common-editor {variant} uniface-common-picker {className}" tabindex="-1" class:compact
+         {style}>
+        {#if readonly || disabled}
+            <input style="width: 100%" class="readonly" class:disabled readonly {disabled} value={textValue}/>
+        {:else}
+            <slot></slot>
+            {#if canClean && textValue && textValue.length > 0}
+                <div class="uniface-editor-clean-icon">
+                    <i class="uniface-icon-x clickable " aria-hidden="true" on:click={clean}></i>
+                </div>
+            {/if}
+            <slot name="dropdown-icon">
+                <Icon name={dropDownIcon} class="action-icon" onClick={iconClickHandler??openPopup}/>
+            </slot>
+        {/if}
+    </div>
+    {#if showPopup}
+        <Popover target={editorElement} on:close={()=>{showPopup=false}} {autoFit}>
+            <slot name="popup-panel"></slot>
+        </Popover>
+    {/if}
+{/if}

package/dist/common/CommonPicker.svelte.d.ts

@@ -0,0 +1,48 @@
+import { DisplayMode } from "../common/DisplayMode";
+import type { MouseClickHandler } from "../common/MouseClickHandler";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CommonPicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    variant: "" | "plain" | "outlined" | "filled";
+    disabled: boolean;
+    readonly: boolean;
+    compact: boolean;
+    style?: string;
+    className?: string;
+    displayMode: DisplayMode;
+    autoFit?: boolean;
+    canClean: boolean;
+    textValue: string;
+    dropDownIcon?: string;
+    clean: () => void;
+    iconClickHandler?: MouseClickHandler;
+    showPopup?: boolean;
+}, {
+    default: {};
+    'dropdown-icon': {};
+    'popup-panel': {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    'dropdown-icon': {};
+    'popup-panel': {};
+}, {}, string>;
+type CommonPicker = InstanceType<typeof CommonPicker>;
+export default CommonPicker;

package/dist/common/DateFormats.d.ts

@@ -0,0 +1,5 @@
+export declare enum DateFormats {
+    ISO8601 = "YYYY-MM-DD",
+    USA = "MM/DD/YYYY",
+    EUROPE = "DD/MM/YYYY"
+}

package/dist/common/DateFormats.js

@@ -0,0 +1,6 @@
+export var DateFormats;
+(function (DateFormats) {
+    DateFormats["ISO8601"] = "YYYY-MM-DD";
+    DateFormats["USA"] = "MM/DD/YYYY";
+    DateFormats["EUROPE"] = "DD/MM/YYYY";
+})(DateFormats || (DateFormats = {}));

package/dist/common/DisplayMode.d.ts

@@ -0,0 +1,4 @@
+export declare enum DisplayMode {
+    View = 0,
+    Edit = 1
+}

package/dist/common/DisplayMode.js

@@ -0,0 +1,5 @@
+export var DisplayMode;
+(function (DisplayMode) {
+    DisplayMode[DisplayMode["View"] = 0] = "View";
+    DisplayMode[DisplayMode["Edit"] = 1] = "Edit";
+})(DisplayMode || (DisplayMode = {}));