@ticatec/uniface-element 5.0.0 → 5.0.1

package/dist/app_layout/ClassicLayout.svelte

@@ -38,44 +38,12 @@
         bottom
     }: Props = $props();
 
-    let sidebarPanel: HTMLElement;
-    let rightBarPanel: HTMLElement;
-    let maxWidth = '';
-    let minWidth = '';
-    let rightMaxWidth = '';
-    let rightMinWidth = '';
-
-    $effect(() => {
-        if (sidebarResize && sidebarMaxWidth) {
-            maxWidth = `max-width: ${sidebarMaxWidth};`;
-        } else {
-            maxWidth = '';
-        }
-    });
-
-    $effect(() => {
-        if (sidebarResize && sidebarMinWidth) {
-            minWidth = `min-width: ${sidebarMinWidth};`;
-        } else {
-            minWidth = '';
-        }
-    });
-
-    $effect(() => {
-        if (rightBarResize && rightBarMaxWidth) {
-            rightMaxWidth = `max-width: ${rightBarMaxWidth};`;
-        } else {
-            rightMaxWidth = '';
-        }
-    });
-
-    $effect(() => {
-        if (rightBarResize && rightBarMinWidth) {
-            rightMinWidth = `min-width: ${rightBarMinWidth};`;
-        } else {
-            rightMinWidth = '';
-        }
-    });
+    let sidebarPanel = $state<HTMLElement>();
+    let rightBarPanel = $state<HTMLElement>();
+    let maxWidth = $derived(sidebarResize && sidebarMaxWidth ? `max-width: ${sidebarMaxWidth};` : '');
+    let minWidth = $derived(sidebarResize && sidebarMinWidth ? `min-width: ${sidebarMinWidth};` : '');
+    let rightMaxWidth = $derived(rightBarResize && rightBarMaxWidth ? `max-width: ${rightBarMaxWidth};` : '');
+    let rightMinWidth = $derived(rightBarResize && rightBarMinWidth ? `min-width: ${rightBarMinWidth};` : '');
 </script>
 
 <div class="uniface-classic-layout">
@@ -101,7 +69,7 @@
             {/if}
         </div>
         {#if rightSidebar}
-            {#if sidebarResize}
+            {#if rightBarResize}
                 <Split direction="vertical" bindingPanel={rightBarPanel} reverse/>
             {/if}
             <div bind:this={rightBarPanel} class="right-sidebar" style="width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
@@ -169,4 +137,4 @@
         overflow: hidden;
         border-top: 1px solid var(--uniface-color-border-secondary);
     }
-</style>
+</style>

package/dist/app_layout/ColumnsLayout.svelte

@@ -34,8 +34,8 @@
         right
     }: Props = $props();
 
-    let leftPanel: HTMLElement;
-    let rightPanel: HTMLElement;
+    let leftPanel = $state<HTMLElement>();
+    let rightPanel = $state<HTMLElement>();
 
     let colWidth = $derived(right ? '25%' : '50%');
 
@@ -88,4 +88,4 @@
         flex: 1 1 auto;
         overflow: auto;
     }
-</style>
+</style>

package/dist/app_layout/HeaderLayout.svelte

@@ -24,25 +24,9 @@
         children
     }: Props = $props();
 
-    let sidebarPanel: HTMLElement;
-    let maxWidth = '';
-    let minWidth = '';
-
-    $effect(() => {
-        if (sidebarResize && sidebarMaxWidth) {
-            maxWidth = `max-width: ${sidebarMaxWidth};`;
-        } else {
-            maxWidth = '';
-        }
-    });
-
-    $effect(() => {
-        if (sidebarResize && sidebarMinWidth) {
-            minWidth = `min-width: ${sidebarMinWidth};`;
-        } else {
-            minWidth = '';
-        }
-    });
+    let sidebarPanel = $state<HTMLElement>();
+    let maxWidth = $derived(sidebarResize && sidebarMaxWidth ? `max-width: ${sidebarMaxWidth};` : '');
+    let minWidth = $derived(sidebarResize && sidebarMinWidth ? `min-width: ${sidebarMinWidth};` : '');
 </script>
 
 <div class="uniface-header-layout">
@@ -106,4 +90,4 @@
         flex: 1 1 auto;
         overflow: hidden;
     }
-</style>
+</style>

package/dist/app_layout/RowsLayout.svelte

@@ -34,8 +34,8 @@
         bottom
     }: Props = $props();
 
-    let topPanel: HTMLElement;
-    let bottomPanel: HTMLElement;
+    let topPanel = $state<HTMLElement>();
+    let bottomPanel = $state<HTMLElement>();
 
     let rowHeight = $derived(bottom ? '25%' : '50%');
 
@@ -88,4 +88,4 @@
         flex: 1 1 auto;
         overflow: auto;
     }
-</style>
+</style>

package/dist/app_layout/SidebarLayout.svelte

@@ -24,25 +24,9 @@
         children
     }: Props = $props();
 
-    let sidebarPanel: HTMLElement;
-    let maxWidth = '';
-    let minWidth = '';
-
-    $effect(() => {
-        if (sidebarResize && sidebarMaxWidth) {
-            maxWidth = `max-width: ${sidebarMaxWidth};`;
-        } else {
-            maxWidth = '';
-        }
-    });
-
-    $effect(() => {
-        if (sidebarResize && sidebarMinWidth) {
-            minWidth = `min-width: ${sidebarMinWidth};`;
-        } else {
-            minWidth = '';
-        }
-    });
+    let sidebarPanel = $state<HTMLElement>();
+    let maxWidth = $derived(sidebarResize && sidebarMaxWidth ? `max-width: ${sidebarMaxWidth};` : '');
+    let minWidth = $derived(sidebarResize && sidebarMinWidth ? `min-width: ${sidebarMinWidth};` : '');
 </script>
 
 <div class="uniface-sidebar-layout">
@@ -106,4 +90,4 @@
         flex: 1 1 auto;
         overflow: auto;
     }
-</style>
+</style>

package/dist/composite/transfer/Transfer.svelte

@@ -38,6 +38,15 @@
 
     let sourceSelectedList: Array<any> = $state([]);
     let targetSelectedList: Array<any> = $state([]);
+    let transferContainer = $state<HTMLDivElement>();
+
+    const handleFocusIn = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onfocus?.(event);
+    };
+
+    const handleFocusOut = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onblur?.(event);
+    };
 
     const moveToTarget = async () => {
         if (sourceSelectedList.length > 0 && await onchange?.(sourceSelectedList, "right")) {
@@ -56,7 +65,7 @@
     }
 </script>
 
-<div class="uniface-transfer-container" {onfocus} {onblur} tabindex="0">
+<div bind:this={transferContainer} class="uniface-transfer-container" onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
     <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
              bind:selectedList={sourceSelectedList} {itemRender}>
         {#snippet footer()}
@@ -96,10 +105,7 @@
   grid-auto-columns: 1fr 60px 1fr;
   column-gap: 16px;
 }
-.uniface-transfer-container .header-container {
-  margin: 10px auto 10px 10px;
-}
-.uniface-transfer-container .list-container {
+.uniface-transfer-container :global(.list-container) {
   height: 100%;
   flex: 1 1 auto;
   overflow: hidden;
@@ -113,4 +119,4 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}</style>
+}</style>

package/dist/data_display/accordion/Accordion.svelte

@@ -72,7 +72,4 @@
         overflow-y: auto;
     }
 
-    .uniface-accordion-panel.compact {
-        /* Compact mode handled by passing prop to AccordionItemView */
-    }
-</style>
+</style>

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -95,9 +95,6 @@
         cursor: pointer;
     }
 
-    .card-action-img:hover {
-    }
-
     .card-action-img:active {
         position: relative;
         top: 1px;
@@ -108,27 +105,4 @@
         filter: grayscale(100%);
     }
 
-    .action-item.disabled .action-icon:hover {
-        color: var(--disabled-button-text-color, var(--uniface-disabled-button-text-color, #B3BCCA));
-    }
-
-    .action-item.disabled .action-icon:active {
-        position: relative;
-        top: 0;
-    }
-
-    .action-item.disabled .card-action-img {
-        filter: grayscale(100%);
-        cursor: default;
-    }
-
-    .action-item.disabled .card-action-img:hover {
-        width: var(--action-image-size, var(--uniface-action-image-size, 15px));
-        height: var(--action-image-size, var(--uniface-action-image-size, 15px));
-    }
-
-    .action-item.disabled .card-action-img:active {
-        position: relative;
-        top: 0;
-    }
-</style>
+</style>

package/dist/data_display/list_box/ListBox.svelte

@@ -56,9 +56,11 @@
         loadMoreIndicator
     }: Props = $props();
 
-    let localSelectedItem = $state(selectedItem ?? null);
+    // External values are synchronized by the effects below. Neutral initial values
+    // avoid implying that these props are intentionally captured only once.
+    let localSelectedItem = $state<any>(null);
     let localSelectedList = $state(selectedList ?? []);
-    let localFilterText = $state(filterText ?? '');
+    let localFilterText = $state('');
 
     let hasMore = $state(false);
     let isBusy = $state(false);
@@ -66,7 +68,7 @@
     let filteredList = $state<Array<any>>([]);
 
     let scrollElement: HTMLElement;
-    let searchBox: any;
+    let searchBox = $state<any>();
 
     // Sync external props to local state
     $effect(() => {
@@ -337,10 +339,6 @@
         border-bottom: 1px solid var(--uniface-listbox-separator-color);
     }
 
-    .listbox-content .listview-item.no-border {
-        border-bottom: unset;
-    }
-
     .listbox-content.selectable .listview-item {
         cursor: pointer;
     }
@@ -352,4 +350,4 @@
     .listbox-content.selectable .listview-item.selected {
         background-color: var(--uniface-list-box-selected-surface);
     }
-</style>
+</style>

package/dist/data_table/lib/clickOutSide.js

@@ -1,10 +1,11 @@
 export function clickOutside(node) {
     const handleClick = (event) => {
-        // @ts-ignore
-        if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(
-            // @ts-ignore
-            new CustomEvent('outerClick', node));
+        const target = event.target;
+        if (target instanceof Node && !node.contains(target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('outerClick', {
+                bubbles: true,
+                detail: { originalEvent: event }
+            }));
         }
     };
     document.addEventListener('click', handleClick, true);

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -48,6 +48,7 @@
     let showUpload = $state(false);
 
     const handleFocus = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
         if (!hasFocus) {
             hasFocus = true;
             onfocus?.(event);
@@ -55,6 +56,7 @@
     };
 
     const handleBlur = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
         if (hasFocus && !showUpload) {
             hasFocus = false;
             onblur?.(event);
@@ -101,7 +103,9 @@
     });
 
     export function focus() {
-        containerElement?.focus();
+        containerElement
+            ?.querySelector<HTMLElement>('button, a[href], input:not([tabindex="-1"])')
+            ?.focus();
     }
 
     const canUpload = $derived(!disabled && !readonly && (onUpload != null || uploadFile != null));
@@ -111,20 +115,18 @@
     <div
         bind:this={containerElement}
         class="uniface-attachment-editor"
-        tabindex={disabled || readonly ? -1 : 0}
-        onfocus={handleFocus}
-        onblur={handleBlur}
+        onfocusin={handleFocus}
+        onfocusout={handleBlur}
     >
-        <input tabindex="-1" style="position: relative; left: -1px; width: 1px;"/>
         <div class="files-field">
             {#each files as file (file)}
                 <FileRender {file} {readonly} onRemove={removeFile}/>
             {/each}
         </div>
         {#if canUpload}
-            <div class="editor-action-icon" onclick={triggerUpload}>
+            <button type="button" class="editor-action-icon" aria-label="Upload file" onclick={triggerUpload}>
                 <i class="icon_google_file_upload" aria-hidden="true"></i>
-            </div>
+            </button>
         {/if}
     </div>
 </FormEditor>
@@ -166,9 +168,12 @@
         border-radius: 4px;
         display: flex;
         align-items: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
     }
 
     .editor-action-icon:hover {
         background-color: rgba(0, 0, 0, 0.05);
     }
-</style>
+</style>

package/dist/form/attachment_files/FileUploadBar.svelte

@@ -12,7 +12,10 @@
         removeFile: (file: any) => void;
     } = $props();
 
-    let status: ProgressStatus = $state(file?.status ?? ProgressStatus.progressing);
+    // The upload object owns subsequent status updates. This value is only the
+    // initial snapshot before the effect installs its update callback.
+    const getInitialStatus = () => file?.status ?? ProgressStatus.progressing;
+    let status: ProgressStatus = $state(getInitialStatus());
     let progress: number = $state(0);
 
     let cancelLabel: string = i18nRes.common.btnCancel.toString();
@@ -60,4 +63,4 @@
             <TextButton size="small" label={removeLabel} onclick={removeUploadFile}/>
         {/if}
     </div>
-</div>
+</div>

package/dist/form/attachment_files/FileUploadPanel.svelte

@@ -29,10 +29,10 @@
     let btnPickup = i18nRes.upload.btnPickup.toString();
 
     let files: Array<UploadFile> = $state([]);
-    let dropZone: any;
     let fileInput: any;
     let interval: any;
     let busy: boolean = $state(false);
+    let dragActive = $state(false);
     let canClose: boolean = $state(false);
 
     $effect(() => {
@@ -60,18 +60,18 @@
     const handleDragOver = (e: DragEvent) => {
         e.preventDefault();
         busy = true;
-        dropZone.classList.add("highlight");
+        dragActive = true;
     }
 
     const handleDragLeave = (e: DragEvent) => {
         e.preventDefault();
         busy = false;
-        dropZone.classList.remove("highlight");
+        dragActive = false;
     }
 
     const handleDrop = (e: DragEvent) => {
         e.preventDefault();
-        dropZone.classList.remove("highlight");
+        dragActive = false;
         handleFiles(e.dataTransfer?.files);
     }
 
@@ -117,7 +117,7 @@
     });
 </script>
 <ModalPopover {canClose} {theme} bind:visible>
-    <div class="uniface-file-upload-panel" bind:this={dropZone} ondragover={handleDragOver} ondragleave={handleDragLeave}
+    <div class="uniface-file-upload-panel" class:highlight={dragActive} ondragover={handleDragOver} ondragleave={handleDragLeave}
          ondrop={handleDrop} onclick={handleMouseClick} aria-hidden="true">
         <div class="file-upload-contents">
             <div style="position: absolute; top: 0; width: 0; overflow: hidden">
@@ -154,70 +154,4 @@
 }
 .uniface-file-upload-panel.highlight {
   background-color: var(--uniface-upload-panel-highlight-bg, #b3d8ff);
-}
-
-.uniface-attachment-display > div {
-  width: 100%;
-  box-sizing: border-box;
-  line-height: 1.1em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.uniface-attachment-field {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-.uniface-attachment-field .uniface-common-editor {
-  height: 120px;
-}
-.uniface-attachment-field > div {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-}
-.uniface-attachment-field .files-field {
-  flex: 1 1 auto;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  flex-direction: row;
-  justify-items: flex-start;
-  overflow-x: auto;
-}
-.uniface-attachment-field .files-field .file-icon {
-  position: relative;
-}
-.uniface-attachment-field .files-field .file-icon img {
-  width: 64px;
-  height: 64px;
-}
-.uniface-attachment-field .files-field .file-icon .action-icon {
-  position: absolute;
-  display: none;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: pointer;
-}
-.uniface-attachment-field .files-field .file-icon .action-icon i:active {
-  position: relative;
-  top: 1px;
-}
-.uniface-attachment-field .files-field .file-icon:hover .action-icon {
-  display: inline-block;
-}
-.uniface-attachment-field .action-dropdown {
-  box-sizing: border-box;
-  margin-top: 4px;
-  margin-right: 4px;
-  line-height: 22px;
-  margin-left: 8px;
-  color: var(--uniface-dropdown-color, #e1e1e1);
-  align-self: flex-start;
-  cursor: pointer;
-}
-.uniface-attachment-field .filled .action-dropdown {
-  color: var(--uniface-secondary-dropdown-color, #b9b9b9);
-}</style>
+}</style>

package/dist/form/checkbox/CheckBox.svelte

@@ -123,6 +123,7 @@
   --disabled-inner: var(--uniface-checkbox-checkmark-color-disabled);
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   height: var(--uniface-checkbox-size);
   outline: none;
   display: inline-block;
@@ -191,12 +192,6 @@
   --o: 1;
   --r: var(--uniface-checkbox-check-rotation);
 }
-.uniface-checkbox input[type=checkbox] + label {
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  margin-left: 4px;
-}
 .uniface-checkbox.compact {
   padding: 0;
   color: var(--uniface-checkbox-text-color);
@@ -224,4 +219,4 @@
 .uniface-checkbox *::before,
 .uniface-checkbox *::after {
   box-sizing: inherit;
-}</style>
+}</style>