@ticatec/uniface-element 0.2.0 → 0.2.2

package/dist/date-picker/ScrollBar.svelte

@@ -71,19 +71,19 @@
     $:resetList();
 
 </script>
-<div class="scroll-bar" tabindex="1" on:wheel={handleMouseWheel}>
+<div class="scroll-bar" tabindex="-1" aria-hidden="true" on:wheel={handleMouseWheel}>
     <div class="action-bar">
         <div class="arrow-up" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_up" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
+            <i class="icon_google_keyboard_arrow_up" aria-hidden="true" on:click={decValue} on:dragstart={(e)=>{e.preventDefault()}}
                  on:mousedown={handleMouseDown(-1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
         </div>
     </div>
     {#each list as v}
-        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" on:click={()=>{handleDigitalClick(v)}} class:inactive={v!=value}><span>{v}</span></div>
+        <div style={!enable && v!= value ? "visibility: hidden; " : ""} class="digital-block" aria-hidden="true" on:click={()=>{handleDigitalClick(v)}} class:inactive={v!=value}><span>{v}</span></div>
     {/each}
     <div class="action-bar">
         <div class="arrow-down" class:disabled={!enable}>
-            <i class="icon_google_keyboard_arrow_downn" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
+            <i class="icon_google_keyboard_arrow_downn" aria-hidden="true" on:click={incValue} on:dragstart={(e)=>{e.preventDefault()}}
                  on:mousedown={handleMouseDown(1)} on:mouseup={handleMouseUp} on:mouseleave={handleMouseUp}></i>
         </div>
     </div>
@@ -94,9 +94,6 @@
         width: 33%;
     }
 
-    .top-bar {
-        text-align: center;
-    }
 
     .digital-block {
         padding: 3px 0;

package/dist/date-range/DateRangeEditor.svelte

@@ -71,7 +71,7 @@
     </CommonRangeEditor>
 
     {#if showPopup}
-        <Popover target={rootElement} on:close={()=>{showPopup=false}} style="width: 452px" autoFit={false}>
+        <Popover target={rootElement} onClose={()=>{showPopup=false}} style="width: 452px" autoFit={false}>
             <div style="white-space: nowrap">
                 <Calendar style="border-right: 1px solid #f0f0f0" value={fromValue} onSelect={handleFormCalendarSelect} {min} max={maxFrom}/>
                 <Calendar value={toValue} onSelect={handleToCalendarSelect} min={minTo} {max}/>

package/dist/dialog/CommonDialog.svelte

@@ -2,8 +2,9 @@
 
     import Dialog from "./Dialog.svelte";
     import type {ButtonAction, ButtonActions} from "../action-bar";
-    import i18n from "@ticatec/i18n";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
+    import {ModalResult, type OnClose} from "./ModalResult";
+    import i18nRes from "../i18nRes";
 
     export let title: string;
     export let width: string = 'unset';
@@ -11,19 +12,21 @@
 
     export let closeConfirm: DialogCloseConfirm | null = null;
     export let content$style: string = '';
-    export let closeHandler: () => void;
     export let enableConfirm: boolean = true;
     export let confirmHandler: (()=>Promise<any>) | null = null;
     export let confirmText: string | null = null;
+    export let onClose: OnClose | null = null;
+
+    let dialog: any;
 
     let confirmAction: ButtonAction = {
-        label: confirmText??i18n.getText('uniface.btnConfirm', 'OK'),
+        label: confirmText??i18nRes.btnConfirm,
         type: "primary",
         disabled: enableConfirm,
         handler: async ()=> {
             let result = await confirmHandler?.();
             if (result && result==true) { //返回true自动关闭
-                closeHandler?.();
+                dialog.close(ModalResult.Ok);
             }
 
         }
@@ -38,6 +41,6 @@
 
 </script>
 
-<Dialog {title} {content$style} {width} {height} {closeHandler} {actions} {closeConfirm}>
+<Dialog bind:this={dialog} {title} {content$style} {width} {height} {actions} {closeConfirm} {onClose}>
     <slot></slot>
 </Dialog>

package/dist/dialog/CommonDialog.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import { type OnClose } from "./ModalResult";
 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;
@@ -23,10 +24,10 @@ declare const CommonDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     height?: string;
     closeConfirm?: DialogCloseConfirm | null;
     content$style?: string;
-    closeHandler: () => void;
     enableConfirm?: boolean;
     confirmHandler?: (() => Promise<any>) | null;
     confirmText?: string | null;
+    onClose?: OnClose | null;
 }, {
     default: {};
 }>, {

package/dist/dialog/Dialog.svelte

@@ -1,27 +1,30 @@
 <script lang="ts">
-
     import {fade} from "svelte/transition";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar, {type ButtonAction, type ButtonActions} from "../action-bar";
-    import i18n from "@ticatec/i18n";
-    import {onMount} from "svelte";
+    import {getContext, onMount} from "svelte";
+    import {ModalResult, type OnClose} from "./ModalResult";
+    import i18nRes from "../i18nRes";
 
     export let title: string;
-
     export let width: string = 'unset';
     export let height: string = 'unset';
     export let actions: ButtonActions | null = null;
     export let closeConfirm: DialogCloseConfirm | null = null;
     export let content$style: string = '';
-    export let closeHandler: () => void;
+
     export let closeAction: ButtonAction | null = null;
+    export let onClose: OnClose | null = null;
 
     export let dialog$style: string = "";
 
-    export const close = async () => {
-        let confirm = closeConfirm ? await closeConfirm() : true;
+    const closeDialog = getContext<() => void>('closeDialog');
+
+    export const close = async (result: ModalResult) => {
+        let confirm = closeConfirm && result == ModalResult.Cancel ? await closeConfirm() : true;
         if (confirm) {
-            closeHandler?.();
+            closeDialog();
+            onClose?.(result);
         }
     }
 
@@ -49,13 +52,35 @@
 
     onMount(async () => {
         closeAction = closeAction ?? {
-            label: i18n.getText('uniface.btnClose', 'Close'),
+            label: i18nRes.common.btnClose,
             type: 'secondary'
         };
-        closeAction.handler = close;
+        closeAction.handler = () => close(ModalResult.Cancel);
     })
 
-    $:  dialogActions = actions ? [...actions, closeAction] : [closeAction];
+    const wrapActions = () => {
+        let wa: ButtonActions = [];
+        if (actions) {
+            actions.forEach(action => {
+                if (action == null) {
+                    wa.push(null)
+                } else {
+                    wa.push({
+                        ...action, handler: async (event: MouseEvent) => {
+                            let result = await action.handler?.(event);
+                            if (result) {
+                                await close(ModalResult.Ok)
+                            }
+                        }
+                    })
+                }
+            })
+        }
+        wa.push(closeAction);
+        return wa;
+    }
+
+    $:  dialogActions = actions ? wrapActions() : [closeAction];
 
 
 </script>
@@ -67,7 +92,7 @@
             <div class="title-bar" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp} aria-hidden="true">
                 <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
                 <div style="flex: 0 0 auto; padding-left: 12px">
-                    <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={close}></i>
+                    <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={()=>close(ModalResult.Cancel)}></i>
                 </div>
             </div>
             <div class="dialog-content" style={content$style}>

package/dist/dialog/Dialog.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { DialogCloseConfirm } from "./DialogCloseConfirm";
 import { type ButtonAction, type ButtonActions } from "../action-bar";
+import { ModalResult, type OnClose } from "./ModalResult";
 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;
@@ -25,10 +26,10 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     actions?: ButtonActions | null;
     closeConfirm?: DialogCloseConfirm | null;
     content$style?: string;
-    closeHandler: () => void;
     closeAction?: ButtonAction | null;
+    onClose?: OnClose | null;
     dialog$style?: string;
-    close?: () => Promise<void>;
+    close?: (result: ModalResult) => Promise<void>;
 }, {
     default: {};
 }>, {
@@ -36,7 +37,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
 }, {
     default: {};
 }, {
-    close: () => Promise<void>;
+    close: (result: ModalResult) => Promise<void>;
 }, string>;
 type Dialog = InstanceType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/DialogBoard.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
 
-
     import {onDestroy, onMount} from "svelte";
     import {initialize} from "./IDialog";
 
     import {dialogs} from "./Dialogs";
+    import DialogWrapper from "./DialogWrapper.svelte";
 
     export const open = (component: any, params: any) => {
-        let dialog = {id: (new Date().getTime()).toString(36), component, params};
-        params.closeHandler = () => {
-            dialogs.removeDialog(dialog.id);
-        }
+        let dialog = {component, params, id: crypto.randomUUID()};
         dialogs.showDialog(dialog);
     }
 
@@ -28,13 +25,19 @@
         board && board.remove();
     });
 
-
 </script>
 
 <div bind:this={board} class="uniface-dialog-board" style="display: {$dialogs.length > 0 ? 'block' : 'none'}">
     <div style="width: 100%; height: 100%; position: relative">
-        {#each $dialogs as dialog}
-            <svelte:component this={dialog.component} {...dialog.params}></svelte:component>
+        <!--{#each $dialogs as dialog (dialog)}-->
+        <!--    <svelte:component bind:this={dialog.instance} this={dialog.component} {...dialog.params}></svelte:component>-->
+        <!--{/each}-->
+        {#each $dialogs as dialog (dialog.id)}
+            <DialogWrapper
+                    component={dialog.component}
+                    params={dialog.params}
+                    closeDialog={() => dialogs.removeDialog(dialog.id)}
+            />
         {/each}
     </div>
 </div>

package/dist/dialog/DialogWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { setContext } from 'svelte';
+    export let component;
+    export let params;
+    export let closeDialog;
+
+    setContext('closeDialog', closeDialog);
+</script>
+
+<svelte:component this={component} {...params} />

package/dist/{common-editor/DateInput.svelte.d.ts → dialog/DialogWrapper.svelte.d.ts}

@@ -1,6 +1,3 @@
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-import type { UniDate } from "../base-calendar/dateUtils";
-import { DateFormats } from "../common/DateFormats";
 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;
@@ -14,16 +11,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DateInput: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    readonly?: boolean;
-    value?: UniDate;
-    style?: string;
-    placeholder?: string;
-    format?: DateFormats;
-    onChange?: OnChangeHandler<Date>;
+declare const DialogWrapper: $$__sveltets_2_IsomorphicComponent<{
+    component: any;
+    params: any;
+    closeDialog: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type DateInput = InstanceType<typeof DateInput>;
-export default DateInput;
+type DialogWrapper = InstanceType<typeof DialogWrapper>;
+export default DialogWrapper;

package/dist/dialog/Dialogs.js

@@ -11,7 +11,7 @@ function createDialogStore() {
             });
         },
         removeDialog(id) {
-            update(dialogs => dialogs.filter(dialog => dialog.id !== id));
+            update(dialogs => dialogs.filter(d => d.id !== id));
         },
         clear() {
             set([]);

package/dist/dialog/ModalResult.d.ts

@@ -0,0 +1,5 @@
+export declare enum ModalResult {
+    Cancel = 0,//放弃操作，关闭窗口
+    Ok = 1
+}
+export type OnClose = (result: ModalResult) => void;

package/dist/dialog/ModalResult.js

@@ -0,0 +1,5 @@
+export var ModalResult;
+(function (ModalResult) {
+    ModalResult[ModalResult["Cancel"] = 0] = "Cancel";
+    ModalResult[ModalResult["Ok"] = 1] = "Ok"; //操作完成，正常关闭
+})(ModalResult || (ModalResult = {}));

package/dist/drawer/Drawer.svelte

@@ -23,7 +23,7 @@
 </script>
 <div class="uniface-drawer" aria-hidden="true" style="display: {hidden ? 'none' : 'block'}" on:click={()=>{visible=false;}}>
     {#if visible}
-        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="false"
+        <div class={position} style="width: {width}px" transition:fly={{ x: xPos, duration: 1000, opacity: 0.5 }} aria-hidden="true"
              on:outroend={()=>{hidden = !visible}} on:click|stopPropagation>
             <div>
             <slot></slot>

package/dist/form-field/FormField.svelte

@@ -11,6 +11,7 @@
     export let labelSuffix: string = ':';
     export let label$alignment: 'center' | 'top' = 'center';
 
+    export let height: string = null as unknown as string;
 
     let className: string = '';
 
@@ -23,7 +24,7 @@
             {/if}
             <span>{label}{labelSuffix}</span>
         </div>
-        <div class="field" style="">
+        <div class="field" style="height: {height??'auto'}">
             <slot/>
         </div>
         {#if !utils.isEmpty(error)}

package/dist/form-field/FormField.svelte.d.ts

@@ -25,6 +25,7 @@ declare const FormField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     error?: string | null;
     labelSuffix?: string;
     label$alignment?: "center" | "top";
+    height?: string;
 }, {
     default: {};
 }>, {

package/dist/form-panel/flex-row-form/FormContainer.svelte

@@ -7,7 +7,7 @@
     let className: string = "";
 
 </script>
-<div class="flex-row-form" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
+<div class="flex-row-form {className}" class:field-layout-horizontal={fieldLayout=='horizontal'} {style}>
     <div>
         <slot/>
     </div>

package/dist/form-panel/grid-form/EmptyCell.svelte

@@ -2,19 +2,20 @@
 
     export let rowSpan: number = 1;
     export let colSpan: number = 1;
-    export let row: number = null;
-    export let col: number = null;
+    export let row: number;
+    export let col: number;
 
     let style: string;
 
     $: {
-        style = rowSpan > 1 ? `grid-row-end: span ${rowSpan};` : '';
-        style += colSpan > 1 ? `grid-column-end: span ${colSpan};` : '';
-        style += row != null ? `grid-row-start: span ${row};` : '';
-        style += col != null ? `grid-column-start: span ${col};` : '';
+        style = '';
+        if (row != null) style += `grid-row-start: ${row};`;
+        if (col != null) style += `grid-column-start: ${col};`;
+        if (rowSpan > 1) style += `grid-row-end: span ${rowSpan};`;
+        if (colSpan > 1) style += `grid-column-end: span ${colSpan};`;
     }
 
 
 </script>
-<div class="cell-field" {style}>
+<div class="cell-field"  {style}>
 </div>

package/dist/form-panel/grid-form/EmptyCell.svelte.d.ts

@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const EmptyCell: $$__sveltets_2_IsomorphicComponent<{
     rowSpan?: number;
     colSpan?: number;
-    row?: number;
-    col?: number;
+    row: number;
+    col: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/form-panel/grid-form/GridField.svelte

@@ -26,6 +26,6 @@
 
 
 </script>
-<FormField class="form-cell" {label$style} {labelSuffix} {style} {label} {required} {error} {arrangement} {height}>
+<FormField class="form-cell {arrangement}" {label$style} {labelSuffix} {style} {label} {required} {error} {height}>
     <slot/>
 </FormField>

package/dist/i18nRes/i18nRes.d.ts

@@ -0,0 +1,2 @@
+declare const i18nRes: any;
+export default i18nRes;

package/dist/i18nRes/i18nRes.js

@@ -0,0 +1,44 @@
+import { i18nUtils } from "@ticatec/i18n";
+const langRes = {
+    common: {
+        btnClose: "Close",
+        btnCancel: 'Cancel',
+        btnConfirm: "OK",
+        textMore: "Load more",
+    },
+    colorPicker: "Pick up color",
+    calendar: {
+        months: [
+            'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
+        ],
+        monthsAbbr: [
+            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+        ],
+        weekTitle: [
+            "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+        ],
+        weekTitleAbbr: [
+            "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
+        ],
+        confirmText: "OK"
+    },
+    upload: {
+        btnRetry: "Retry",
+        btnRemove: "Delete",
+        btnPickup: "Pickup files"
+    },
+    propertyEditor: {
+        colName: "Attribute",
+        colValue: "Value"
+    },
+    dataTable: {
+        rowNo: "#",
+        actions: "Actions",
+        emptyDataSet: 'Empty dataset'
+    },
+    transfer: {
+        selectIndicator: "Selected: {{selected}}/{{total}}"
+    }
+};
+const i18nRes = i18nUtils.createResourceProxy(langRes, 'uniface');
+export default i18nRes;

package/dist/i18nRes/index.d.ts

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

package/dist/i18nRes/index.js

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

package/dist/image-files/ImageFilesField.svelte

@@ -62,7 +62,7 @@
     <div class="uniface-display-field images-field">
         {#each files as file}
             <div>
-                <img width="40" height="40" src={file.thumbnail??file.uri}/>
+                <img width="40" height="40" alt="file" src={file.thumbnail??file.uri}>
                 <div class="img-file-name">
                     <span>{file.name}</span>
                 </div>

package/dist/indicator/IndicatorBoard.svelte

@@ -38,7 +38,7 @@
 
 <div bind:this={board} class="uniface-indicator-board" style="display: {visible ? 'flex' : 'none'}">
     <div style="display: flex; flex-direction: row; justify-items: center">
-        <img src={iconLoading} width="32px" height="32px"/>
+        <img src={iconLoading} alt="loading" width="32px" height="32px"/>
         <span style="padding-left: 12px">{indicator}</span>
     </div>
 </div>

package/dist/inline-cell-editor/InvalidEditor.svelte

@@ -6,6 +6,7 @@
     export let props: any;
     export let active: boolean;
 
+    console.warn("Invalid type", readonly, props, active);
 
 </script>
 <div>

package/dist/input-options-select/InputOptionsSelect.svelte

@@ -4,10 +4,10 @@
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import {tick} from "svelte";
     import type {LazyLoader} from "../list-box/types"
+    import i18nRes from "../i18nRes";
 
     import loading from "../assets/loading.gif"
     import CommonPicker from "../common/CommonPicker.svelte";
-    import i18n from "@ticatec/i18n";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -23,7 +23,7 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let itemRender: any = null;
     export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader = null as unknown as LazyLoader;
 
     let editor: any;
     let inputText: string;
@@ -131,7 +131,7 @@
 
     const loadMore = async () => {
         editor.focus();
-        if (lazyLoader && !isBusy && hasMore) {
+        if (lazyLoader != null && !isBusy && hasMore) {
             pageNo++;
             await lazyLoad(false);
         }
@@ -154,7 +154,7 @@
     {#if isBusy}
         <div style="position: absolute; top: 0px; bottom: 0px; right: 8px">
             <div style="position: relative; top: 50%; transform: translateY(-50%)">
-                <img src={loading} width="16" height="16"/>
+                <img src={loading} alt="loading" width="16" height="16"/>
             </div>
         </div>
     {/if}
@@ -171,8 +171,8 @@
             </div>
         {/each}
         {#if hasMore}
-            <div class="more-indicator-footer" on:click={loadMore}>
-                {i18n.getText('uniface.loadMore', 'Load more')}
+            <div class="more-indicator-footer" aria-hidden="true" on:click={loadMore}>
+                {i18nRes.common.textMore}
             </div>
         {/if}
         {#if isBusy}

package/dist/input-options-select/InputOptionsSelect.svelte.d.ts

@@ -29,7 +29,7 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: DisplayMode;
     itemRender?: any;
     onChange?: OnChangeHandler<any>;
-    lazyLoader: LazyLoader;
+    lazyLoader?: LazyLoader;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/layout/flex/FlexBlock.svelte

@@ -12,6 +12,6 @@
     let className:string = '';
 
 </script>
-<div class:flex class="flex-block {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
+<div class:flex class="flex-block {className} {flex ? direction : ''}" class:fixed class:grow class:shrink class:auto_fit={autoFit} {style}>
     <slot/>
 </div>

package/dist/lookup-editor/LookupEditor.svelte

@@ -32,7 +32,7 @@
         onChange?.(value)
     }
 
-    const handleActionIconClick = () => {
+    const handleActionIconClick = async (event: MouseEvent) => {
         onAction?.();
     }
 

package/dist/memo-editor/MemoEditor.svelte

@@ -53,7 +53,7 @@
         }
     });
 
-    const clean = () => {
+    const clean = async () => {
         value='';
     }
 
@@ -78,7 +78,7 @@
         {/if}
         {#if !disabled && value && value.length > 0}
             <div class="action-button-wrapper" style="position: absolute; top: 0; left: 0; width: {width}px;">
-                <Icon name="icon_google_clear" clickable class="uniface-editor-clean-icon" onClick={clean}/>
+                <Icon name="icon_google_clear" class="uniface-editor-clean-icon" onClick={clean}/>
             </div>
         {/if}
     </div>

package/dist/message-box/IMessageBox.d.ts

@@ -10,14 +10,12 @@ declare enum ModalResult {
     MR_CLOSE = 3
 }
 declare const InfoButtons: {
-    text: string;
-    key: string;
+    text: any;
     type: string;
     result: ModalResult;
 }[];
 declare const ConfirmButtons: {
-    text: string;
-    key: string;
+    text: any;
     type: string;
     result: ModalResult;
 }[];