npm - @wavemaker/app-ng-runtime - Versions diffs - 12.0.0-next.45191 → 12.0.0-next.45197 - Mend

@wavemaker/app-ng-runtime 12.0.0-next.45191 → 12.0.0-next.45197

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

app-ng-runtime/components/input/file-upload/esm2022/file-upload.props.mjs CHANGED Viewed

@@ -24,7 +24,8 @@ export const registerProps = () => {
         ['filelistheight', PROP_NUMBER],
         ['width', { value: 'auto', ...PROP_STRING }],
         ['showprogressbar', PROP_BOOLEAN],
-        ['showprogressbarpercentage', PROP_BOOLEAN]
+        ['showprogressbarpercentage', PROP_BOOLEAN],
+        ['deleteiconhint', { value: 'Delete', ...PROP_STRING }]
     ]));
     registerFormWidget(FormWidgetType.UPLOAD, new Map([
         ['disabled', PROP_BOOLEAN],
@@ -35,4 +36,4 @@ export const registerProps = () => {
         ['required', PROP_BOOLEAN]
     ]));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWQucHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvaW5wdXQvZmlsZS11cGxvYWQvc3JjL2ZpbGUtdXBsb2FkLnByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN6RyxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBRXhDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLEVBQUU7SUFDOUIsUUFBUSxDQUNKLGVBQWUsRUFDZixJQUFJLEdBQUcsQ0FDSDtRQUNJLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQztRQUN4QixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUM7UUFDckIsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDO1FBQ3JCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQztRQUMxQixDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUM7UUFDekIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsbUJBQW1CLEVBQUcsV0FBVyxDQUFDO1FBQ25DLENBQUMsTUFBTSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLFlBQVksRUFBQyxDQUFDO1FBQ3hDLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUM7UUFDNUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsV0FBVyxFQUFFLEVBQUMsS0FBSyxFQUFFLHlCQUF5QixFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7UUFDakUsQ0FBQyxnQkFBZ0IsRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUMvQyxDQUFDLGVBQWUsRUFBRSxFQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUNuRCxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUM7UUFDdEIsQ0FBQyxZQUFZLEVBQUUsRUFBQyxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQ2hDLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQztRQUMzQixDQUFDLGVBQWUsRUFBRSxXQUFXLENBQUM7UUFDOUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxDQUFDO1FBQy9CLENBQUMsT0FBTyxFQUFFLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQzFDLENBQUMsaUJBQWlCLEVBQUUsWUFBWSxDQUFDO1FBQ2pDLENBQUMsMkJBQTJCLEVBQUUsWUFBWSxDQUFDO0tBQzlDLENBQ0osQ0FDSixDQUFDO0lBQ0Ysa0JBQWtCLENBQ2QsY0FBYyxDQUFDLE1BQU0sRUFDckIsSUFBSSxHQUFHLENBQUM7UUFDSixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO1FBQzNCLENBQUMsVUFBVSxFQUFFLFdBQVcsQ0FBQztRQUN6QixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztLQUM3QixDQUFDLENBQ0wsQ0FBQztBQUNOLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7UFJPUF9CT09MRUFOLCBQUk9QX05VTUJFUiwgUFJPUF9TVFJJTkcsIHJlZ2lzdGVyLCByZWdpc3RlckZvcm1XaWRnZXR9IGZyb20gJ0B3bS9jb21wb25lbnRzL2Jhc2UnO1xuaW1wb3J0IHtGb3JtV2lkZ2V0VHlwZX0gZnJvbSAnQHdtL2NvcmUnO1xuXG5leHBvcnQgY29uc3QgcmVnaXN0ZXJQcm9wcyA9ICgpID0+IHtcbiAgICByZWdpc3RlcihcbiAgICAgICAgJ3dtLWZpbGV1cGxvYWQnLFxuICAgICAgICBuZXcgTWFwKFxuICAgICAgICAgICAgW1xuICAgICAgICAgICAgICAgIFsnY2FwdGlvbicsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ25hbWUnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydoaW50JywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnYXJpYWxhYmVsJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsndGFiaW5kZXgnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWydtdWx0aXBsZScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICAgICAgWydmaWxldXBsb2FkbWVzc2FnZScgLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydzaG93Jywge3ZhbHVlOiB0cnVlLCAuLi5QUk9QX0JPT0xFQU59XSxcbiAgICAgICAgICAgICAgICBbJ2Rpc2FibGVkJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgICAgICBbJ2NvbnRlbnR0eXBlJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnbWF4ZmlsZXNpemUnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWydpY29uY2xhc3MnLCB7dmFsdWU6ICd3bS1zbC1sIHNsLWNsb3VkLXVwbG9hZCcsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydjbGVhcmljb25jbGFzcycsIHt2YWx1ZTogJycsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydjbGVhcmljb25oaW50Jywge3ZhbHVlOiAnQ2xlYXInLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnY2xhc3MnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWyd1cGxvYWRwYXRoJywgey4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydkYXRhc291cmNlJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnc2VsZWN0ZWRGaWxlcycsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ2Rlc3RpbmF0aW9uJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnZmlsZWxpc3RoZWlnaHQnLCBQUk9QX05VTUJFUl0sXG4gICAgICAgICAgICAgICAgWyd3aWR0aCcsIHt2YWx1ZTogJ2F1dG8nLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgICAgIFsnc2hvd3Byb2dyZXNzYmFyJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgICAgICBbJ3Nob3dwcm9ncmVzc2JhcnBlcmNlbnRhZ2UnLCBQUk9QX0JPT0xFQU5dXG4gICAgICAgICAgICBdXG4gICAgICAgIClcbiAgICApO1xuICAgIHJlZ2lzdGVyRm9ybVdpZGdldChcbiAgICAgICAgRm9ybVdpZGdldFR5cGUuVVBMT0FELFxuICAgICAgICBuZXcgTWFwKFtcbiAgICAgICAgICAgIFsnZGlzYWJsZWQnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgWydleHRlbnNpb25zJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydmaWxldHlwZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsnbXVsdGlwbGUnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgWydyZWFkb25seScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICBbJ3JlcXVpcmVkJywgUFJPUF9CT09MRUFOXVxuICAgICAgICBdKVxuICAgICk7XG59O1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWQucHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvaW5wdXQvZmlsZS11cGxvYWQvc3JjL2ZpbGUtdXBsb2FkLnByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN6RyxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBRXhDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFHLEVBQUU7SUFDOUIsUUFBUSxDQUNKLGVBQWUsRUFDZixJQUFJLEdBQUcsQ0FDSDtRQUNJLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQztRQUN4QixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUM7UUFDckIsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDO1FBQ3JCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQztRQUMxQixDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUM7UUFDekIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO1FBQzFCLENBQUMsbUJBQW1CLEVBQUcsV0FBVyxDQUFDO1FBQ25DLENBQUMsTUFBTSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLFlBQVksRUFBQyxDQUFDO1FBQ3hDLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxXQUFXLENBQUM7UUFDNUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsV0FBVyxFQUFFLEVBQUMsS0FBSyxFQUFFLHlCQUF5QixFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7UUFDakUsQ0FBQyxnQkFBZ0IsRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUMvQyxDQUFDLGVBQWUsRUFBRSxFQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUNuRCxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUM7UUFDdEIsQ0FBQyxZQUFZLEVBQUUsRUFBQyxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQ2hDLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQztRQUMzQixDQUFDLGVBQWUsRUFBRSxXQUFXLENBQUM7UUFDOUIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzVCLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxDQUFDO1FBQy9CLENBQUMsT0FBTyxFQUFFLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQzFDLENBQUMsaUJBQWlCLEVBQUUsWUFBWSxDQUFDO1FBQ2pDLENBQUMsMkJBQTJCLEVBQUUsWUFBWSxDQUFDO1FBQzNDLENBQUMsZ0JBQWdCLEVBQUUsRUFBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7S0FDeEQsQ0FDSixDQUNKLENBQUM7SUFDRixrQkFBa0IsQ0FDZCxjQUFjLENBQUMsTUFBTSxFQUNyQixJQUFJLEdBQUcsQ0FBQztRQUNKLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLFlBQVksRUFBRSxXQUFXLENBQUM7UUFDM0IsQ0FBQyxVQUFVLEVBQUUsV0FBVyxDQUFDO1FBQ3pCLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQztRQUMxQixDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUM7UUFDMUIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDO0tBQzdCLENBQUMsQ0FDTCxDQUFDO0FBQ04sQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtQUk9QX0JPT0xFQU4sIFBST1BfTlVNQkVSLCBQUk9QX1NUUklORywgcmVnaXN0ZXIsIHJlZ2lzdGVyRm9ybVdpZGdldH0gZnJvbSAnQHdtL2NvbXBvbmVudHMvYmFzZSc7XG5pbXBvcnQge0Zvcm1XaWRnZXRUeXBlfSBmcm9tICdAd20vY29yZSc7XG5cbmV4cG9ydCBjb25zdCByZWdpc3RlclByb3BzID0gKCkgPT4ge1xuICAgIHJlZ2lzdGVyKFxuICAgICAgICAnd20tZmlsZXVwbG9hZCcsXG4gICAgICAgIG5ldyBNYXAoXG4gICAgICAgICAgICBbXG4gICAgICAgICAgICAgICAgWydjYXB0aW9uJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnbmFtZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ2hpbnQnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydhcmlhbGFiZWwnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWyd0YWJpbmRleCcsIFBST1BfTlVNQkVSXSxcbiAgICAgICAgICAgICAgICBbJ211bHRpcGxlJywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgICAgICBbJ2ZpbGV1cGxvYWRtZXNzYWdlJyAsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ3Nob3cnLCB7dmFsdWU6IHRydWUsIC4uLlBST1BfQk9PTEVBTn1dLFxuICAgICAgICAgICAgICAgIFsnZGlzYWJsZWQnLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgICAgIFsnY29udGVudHR5cGUnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydtYXhmaWxlc2l6ZScsIFBST1BfTlVNQkVSXSxcbiAgICAgICAgICAgICAgICBbJ2ljb25jbGFzcycsIHt2YWx1ZTogJ3dtLXNsLWwgc2wtY2xvdWQtdXBsb2FkJywgLi4uUFJPUF9TVFJJTkd9XSxcbiAgICAgICAgICAgICAgICBbJ2NsZWFyaWNvbmNsYXNzJywge3ZhbHVlOiAnJywgLi4uUFJPUF9TVFJJTkd9XSxcbiAgICAgICAgICAgICAgICBbJ2NsZWFyaWNvbmhpbnQnLCB7dmFsdWU6ICdDbGVhcicsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydjbGFzcycsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgICAgICBbJ3VwbG9hZHBhdGgnLCB7Li4uUFJPUF9TVFJJTkd9XSxcbiAgICAgICAgICAgICAgICBbJ2RhdGFzb3VyY2UnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydzZWxlY3RlZEZpbGVzJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgICAgIFsnZGVzdGluYXRpb24nLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICAgICAgWydmaWxlbGlzdGhlaWdodCcsIFBST1BfTlVNQkVSXSxcbiAgICAgICAgICAgICAgICBbJ3dpZHRoJywge3ZhbHVlOiAnYXV0bycsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICAgICAgWydzaG93cHJvZ3Jlc3NiYXInLCBQUk9QX0JPT0xFQU5dLFxuICAgICAgICAgICAgICAgIFsnc2hvd3Byb2dyZXNzYmFycGVyY2VudGFnZScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICAgICAgWydkZWxldGVpY29uaGludCcsIHt2YWx1ZTogJ0RlbGV0ZScsIC4uLlBST1BfU1RSSU5HfV1cbiAgICAgICAgICAgIF1cbiAgICAgICAgKVxuICAgICk7XG4gICAgcmVnaXN0ZXJGb3JtV2lkZ2V0KFxuICAgICAgICBGb3JtV2lkZ2V0VHlwZS5VUExPQUQsXG4gICAgICAgIG5ldyBNYXAoW1xuICAgICAgICAgICAgWydkaXNhYmxlZCcsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICBbJ2V4dGVuc2lvbnMnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICBbJ2ZpbGV0eXBlJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydtdWx0aXBsZScsIFBST1BfQk9PTEVBTl0sXG4gICAgICAgICAgICBbJ3JlYWRvbmx5JywgUFJPUF9CT09MRUFOXSxcbiAgICAgICAgICAgIFsncmVxdWlyZWQnLCBQUk9QX0JPT0xFQU5dXG4gICAgICAgIF0pXG4gICAgKTtcbn07XG4iXX0=

app-ng-runtime/components/input/file-upload/fesm2022/index.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import * as i3 from '@wm/components/base';
 import { PROP_STRING, PROP_NUMBER, PROP_BOOLEAN, register, registerFormWidget, StylableComponent, styler, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import { Subject } from 'rxjs';
 import * as i1 from '@wm/core';
-import { FormWidgetType, isImageFile, isAudioFile, isVideoFile, DataSource, getWmProjectProperties } from '@wm/core';
+import { FormWidgetType, isImageFile, isAudioFile, isVideoFile, DataSource, getWmProjectProperties, IDGenerator } from '@wm/core';
 import { toLower, includes, forEach, isEmpty } from 'lodash-es';
 const registerProps = () => {
@@ -33,7 +33,8 @@ const registerProps = () => {
         ['filelistheight', PROP_NUMBER],
         ['width', { value: 'auto', ...PROP_STRING }],
         ['showprogressbar', PROP_BOOLEAN],
-        ['showprogressbarpercentage', PROP_BOOLEAN]
+        ['showprogressbarpercentage', PROP_BOOLEAN],
+        ['deleteiconhint', { value: 'Delete', ...PROP_STRING }]
     ]));
     registerFormWidget(FormWidgetType.UPLOAD, new Map([
         ['disabled', PROP_BOOLEAN],
@@ -168,14 +169,14 @@ function FileUploadComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("innerHTML", ctx_r1.caption, i0.ɵɵsanitizeHtml);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_span_8_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
     i0.ɵɵpipe(1, "stateClass");
 } if (rf & 2) {
     const ft_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(1, 3, ft_r7.status), "");
 } }
-function FileUploadComponent_ul_4_div_1_li_1_span_10_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_span_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 47);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "filesize");
@@ -185,7 +186,7 @@ function FileUploadComponent_ul_4_div_1_li_1_span_10_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ft_r7.size, 0));
 } }
-function FileUploadComponent_ul_4_div_1_li_1_span_11_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_span_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 34);
     i0.ɵɵpipe(1, "stateClass");
 } if (rf & 2) {
@@ -194,12 +195,12 @@ function FileUploadComponent_ul_4_div_1_li_1_span_11_Template(rf, ctx) { if (rf
     i0.ɵɵclassMapInterpolate1("status-icon ", i0.ɵɵpipeBind1(1, 4, ft_r7.status), "");
     i0.ɵɵpropertyInterpolate("title", ft_r7.errMsg || ctx_r1.appLocale.MESSAGE_FILE_UPLOAD_FAILED);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_span_12_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1, "Upload Failed");
     i0.ɵɵelementEnd();
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 49);
     i0.ɵɵelement(1, "div", 50);
     i0.ɵɵelementEnd();
@@ -208,7 +209,7 @@ function FileUploadComponent_ul_4_div_1_li_1_div_13_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ft_r7.status === "error" ? "progress-bar-danger" : "progress-bar-info")("ngStyle", i0.ɵɵpureFunction1(2, _c3, ft_r7.progress + "%"));
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -217,17 +218,17 @@ function FileUploadComponent_ul_4_div_1_li_1_div_14_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ft_r7.progress + "%", " ");
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_15_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 45)(1, "a", 52);
-    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_15_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r8); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
+    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r8); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.abortFileUpload(ft_r7)); });
     i0.ɵɵelement(2, "i", 53);
     i0.ɵɵelementEnd()();
 } }
-function FileUploadComponent_ul_4_div_1_li_1_a_17_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 54);
-    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_a_17_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clear(ft_r7)); });
+    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clear(ft_r7)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -236,31 +237,35 @@ function FileUploadComponent_ul_4_div_1_li_1_a_17_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.cleariconclass);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_div_18_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "a", 55);
-    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_div_1_li_1_div_18_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r10); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileDelete($event, ft_r7)); });
-    i0.ɵɵelement(2, "i", 56);
+    i0.ɵɵelementStart(0, "div", 45)(1, "a", 54);
+    i0.ɵɵlistener("click", function FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r10); const ft_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFileDelete($event, ft_r7)); });
+    i0.ɵɵelement(2, "i", 55);
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵpropertyInterpolate("title", ctx_r1.deleteiconhint);
 } }
-function FileUploadComponent_ul_4_div_1_li_1_Template(rf, ctx) { if (rf & 1) {
+function FileUploadComponent_ul_4_ng_container_1_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 32)(1, "div", 33);
     i0.ɵɵelement(2, "div", 34);
     i0.ɵɵpipe(3, "fileIconClass");
     i0.ɵɵelementStart(4, "div", 35)(5, "p", 36)(6, "span", 37);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, FileUploadComponent_ul_4_div_1_li_1_span_8_Template, 2, 5, "span", 38);
+    i0.ɵɵtemplate(8, FileUploadComponent_ul_4_ng_container_1_li_1_span_8_Template, 2, 5, "span", 38);
     i0.ɵɵelement(9, "br");
-    i0.ɵɵtemplate(10, FileUploadComponent_ul_4_div_1_li_1_span_10_Template, 3, 4, "span", 39)(11, FileUploadComponent_ul_4_div_1_li_1_span_11_Template, 2, 6, "span", 40)(12, FileUploadComponent_ul_4_div_1_li_1_span_12_Template, 2, 0, "span", 41);
+    i0.ɵɵtemplate(10, FileUploadComponent_ul_4_ng_container_1_li_1_span_10_Template, 3, 4, "span", 39)(11, FileUploadComponent_ul_4_ng_container_1_li_1_span_11_Template, 2, 6, "span", 40)(12, FileUploadComponent_ul_4_ng_container_1_li_1_span_12_Template, 2, 0, "span", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(13, FileUploadComponent_ul_4_div_1_li_1_div_13_Template, 2, 4, "div", 42)(14, FileUploadComponent_ul_4_div_1_li_1_div_14_Template, 2, 1, "div", 43);
+    i0.ɵɵtemplate(13, FileUploadComponent_ul_4_ng_container_1_li_1_div_13_Template, 2, 4, "div", 42)(14, FileUploadComponent_ul_4_ng_container_1_li_1_div_14_Template, 2, 1, "div", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(15, FileUploadComponent_ul_4_div_1_li_1_div_15_Template, 3, 0, "div", 44);
+    i0.ɵɵtemplate(15, FileUploadComponent_ul_4_ng_container_1_li_1_div_15_Template, 3, 0, "div", 44);
     i0.ɵɵelementStart(16, "div", 45);
-    i0.ɵɵtemplate(17, FileUploadComponent_ul_4_div_1_li_1_a_17_Template, 2, 4, "a", 46);
+    i0.ɵɵtemplate(17, FileUploadComponent_ul_4_ng_container_1_li_1_a_17_Template, 2, 4, "a", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(18, FileUploadComponent_ul_4_div_1_li_1_div_18_Template, 3, 0, "div", 44);
+    i0.ɵɵtemplate(18, FileUploadComponent_ul_4_ng_container_1_li_1_div_18_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ft_r7 = i0.ɵɵnextContext().$implicit;
@@ -271,7 +276,7 @@ function FileUploadComponent_ul_4_div_1_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ft_r7.storageName || ft_r7.name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "success");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ft_r7.fileLength !== 0);
     i0.ɵɵadvance();
@@ -287,12 +292,12 @@ function FileUploadComponent_ul_4_div_1_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.cleariconclass !== "" && ft_r7.status !== "onProgress");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ft_r7.status === "success");
+    i0.ɵɵproperty("ngIf", ft_r7.status === "success" && (!ctx_r1.datasource || ctx_r1.datasource && (ft_r7._response == null ? null : ft_r7._response.success)));
 } }
-function FileUploadComponent_ul_4_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_li_1_Template, 19, 16, "li", 31);
-    i0.ɵɵelementEnd();
+function FileUploadComponent_ul_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_ng_container_1_li_1_Template, 19, 16, "li", 31);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ft_r7 = ctx.$implicit;
     i0.ɵɵadvance();
@@ -300,7 +305,7 @@ function FileUploadComponent_ul_4_div_1_Template(rf, ctx) { if (rf & 1) {
 } }
 function FileUploadComponent_ul_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ul", 29);
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_div_1_Template, 2, 1, "div", 30);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_4_ng_container_1_Template, 2, 1, "ng-container", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -309,7 +314,7 @@ function FileUploadComponent_ul_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r1.uploadedFiles);
 } }
 function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 32)(1, "div", 33);
+    i0.ɵɵelementStart(0, "li", 58)(1, "div", 33);
     i0.ɵɵelement(2, "div", 59);
     i0.ɵɵelementStart(3, "div", 35)(4, "p", 60)(5, "label", 37);
     i0.ɵɵtext(6);
@@ -325,8 +330,8 @@ function FileUploadComponent_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ft_r11.name);
 } }
 function FileUploadComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 57);
-    i0.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 58);
+    i0.ɵɵelementStart(0, "ul", 56);
+    i0.ɵɵtemplate(1, FileUploadComponent_ul_5_li_1_Template, 10, 1, "li", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -443,6 +448,9 @@ class FileUploadComponent extends StylableComponent {
      * @param $files
      */
     onSelectEventCall($event, $files) {
+        $files.forEach(file => {
+            file.uniqueId = this.idGenerator.nextUid();
+        });
         this.selectedFiles = $files;
         this.uploadedFiles = this.multiple ? [...this.uploadedFiles, ...$files] : $files;
         setTimeout(() => {
@@ -498,34 +506,36 @@ class FileUploadComponent extends StylableComponent {
         }
         // Make call if there are valid files else no call is made
         if ($files.length) {
-            this.progressObservable = new Subject();
             // EVENT: ON_BEFORE_SELECT
             beforeSelectVal = this.invokeEventCallback('beforeselect', {
                 $event: $.extend($event.$files || {}, $files),
                 files: $files
             });
             if (this.datasource) {
-                this.datasource._progressObservable = this.progressObservable;
-                this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
-                    forEach(this.selectedFiles, (file) => {
-                        if (file.name === progressObj.fileName) {
-                            file.progress = progressObj.progress;
-                            if (file.progress === 100) {
-                                file.status = 'success';
-                            }
-                            else {
-                                file.status = progressObj.status;
-                                if (progressObj.errMsg) {
-                                    file.errMsg = progressObj.errMsg;
-                                    this.invokeEventCallback('error', {
-                                        $event,
-                                        files: file
-                                    });
+                if (!this.uploadProgressSubscription) {
+                    this.progressObservable = new Subject();
+                    this.datasource._progressObservable = this.progressObservable;
+                    this.uploadProgressSubscription = this.datasource._progressObservable.asObservable().subscribe((progressObj) => {
+                        forEach(this.uploadedFiles, (file) => {
+                            if (file.name === progressObj.fileName && file.uniqueId === progressObj.uniqueId) {
+                                file.progress = progressObj.progress;
+                                if (file.progress === 100) {
+                                    file.status = 'success';
+                                }
+                                else {
+                                    file.status = progressObj.status;
+                                    if (progressObj.errMsg) {
+                                        file.errMsg = progressObj.errMsg;
+                                        this.invokeEventCallback('error', {
+                                            $event,
+                                            files: file
+                                        });
+                                    }
                                 }
                             }
-                        }
+                        });
                     });
-                });
+                }
             }
             else {
                 this.selectedFiles = $files;
@@ -550,17 +560,16 @@ class FileUploadComponent extends StylableComponent {
                 onOk: () => {
                     if (this.deletedatasource) {
                         this.deletedatasource.setInput('file', file._response.fileName || file.name);
-                        this.deleteFileObservable = new Subject();
-                        this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
-                        this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
-                            if (response.status === "success") {
-                                this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
-                                this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
-                                this.deletedatasource._deleteFileObservable.unsubscribe();
-                            }
-                        }, (error) => {
-                            this.deletedatasource._deleteFileObservable.unsubscribe();
-                        });
+                        if (!this.deleteProgressSubscription) {
+                            this.deleteFileObservable = new Subject();
+                            this.deletedatasource._deleteFileObservable = this.deleteFileObservable;
+                            this.deletedatasource._deleteFileObservable.asObservable().subscribe((response) => {
+                                if (response.status === "success") {
+                                    this.selectedFiles = this.selectedFiles.filter((fileObj) => file !== fileObj) || [];
+                                    this.uploadedFiles = this.uploadedFiles.filter((fileObj) => file !== fileObj) || [];
+                                }
+                            });
+                        }
                     }
                     this.invokeEventCallback('delete', { $event: file });
                     this.dialogService.closeAppConfirmDialog();
@@ -683,6 +692,7 @@ class FileUploadComponent extends StylableComponent {
         this.defaultAllowedExtensions = this.allowedFileUploadExtensions.split(',').map(item => item.trim()).map(item => item.endsWith('/*') ? item : `.${item}`);
         this.chooseFilter = this.defaultAllowedExtensions.includes('*/*') ? '' : this.defaultAllowedExtensions;
         this.fileUploadMessage = 'Drop your files here or click here to browse';
+        this.idGenerator = new IDGenerator('file-');
         this.uploadUrl = 'services';
         // styler(this.nativeElement, this);
     }
@@ -702,11 +712,17 @@ class FileUploadComponent extends StylableComponent {
         document.removeEventListener('drop', this.dropCb);
         document.removeEventListener('mouseleave', this.dropCb);
         super.ngOnDestroy();
+        const subscriptions = [this.uploadProgressSubscription, this.deleteProgressSubscription];
+        subscriptions.forEach(subscription => {
+            if (subscription) {
+                subscription.unsubscribe();
+            }
+        });
     }
     static { this.ɵfac = function FileUploadComponent_Factory(t) { return new (t || FileUploadComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵinjectAttribute('select.event'), i0.ɵɵdirectiveInject(i1.AbstractDialogService), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUploadComponent, selectors: [["", "wmFileUpload", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(FileUploadComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "type", "file", "name", "files", "multiple", "", 3, "disabled", "accept", "click", "change", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], ["class", "upload-extensions", 3, "innerHtml", 4, "ngIf"], ["class", "upload-extensions", 4, "ngIf"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], [1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", 4, "ngIf"], [1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails", "col-md-3"], [1, "upload-title"], [3, "class", 4, "ngIf"], ["class", "filesize", 4, "ngIf"], [3, "class", "title", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "progress col-md-7 upload-progress", 4, "ngIf"], ["class", "col-md-1 upload-progress-percentage", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], [1, "media-right", "media-middle"], ["class", "btn btn-transparent btn-default status-icon", "type", "button", 3, "title", "click", 4, "ngIf"], [1, "filesize"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], [1, "col-md-1", "upload-progress-percentage"], ["type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], ["title", "delete", "type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click"], [1, "wi", "wi-delete"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "uploaddetails"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 6, vars: 5, consts: [["init-widget", "", 1, "app-fileupload"], ["class", "app-multi-file-upload", 4, "ngIf"], ["class", "app-single-file-upload", 4, "ngIf"], ["focus-target", "", "class", "app-button btn btn-default", 3, "disabled", "click", 4, "ngIf"], ["class", "list-group file-upload", "tabindex", "0", 3, "ngStyle", 4, "ngIf"], ["class", "list-group file-upload", 3, "ngStyle", "title", 4, "ngIf"], [1, "app-multi-file-upload"], ["id", "dropzone", 1, "drop-box", 3, "click", "dragover", "drop", "ngClass"], [1, "message"], [1, "upload-label", 3, "innerHtml"], [1, "form-horizontal", 3, "name"], ["class", "file-input", "type", "file", "name", "files", "multiple", "", 3, "disabled", "accept", "click", "change", 4, "ngIf"], ["href", "javascript:void(0);", 1, "app-anchor", "upload-label"], ["class", "upload-extensions", 3, "innerHtml", 4, "ngIf"], ["class", "upload-extensions", 4, "ngIf"], ["type", "file", "name", "files", "multiple", "", 1, "file-input", 3, "click", "change", "disabled", "accept"], [1, "upload-extensions", 3, "innerHtml"], [1, "upload-extensions"], [1, "app-single-file-upload"], [1, "app-button-wrapper"], ["class", "file-input", "multiple", "", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["class", "file-input", "name", "files", "type", "file", 3, "accept", "disabled", "change", "click", 4, "ngIf"], ["id", "dropzone", "focus-target", "", 1, "app-button", "btn", "btn-default", 3, "ngClass"], ["aria-hidden", "true"], [1, "caption", 3, "innerHTML"], [1, "app-files-upload-status", "single"], ["multiple", "", "name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["name", "files", "type", "file", 1, "file-input", 3, "change", "click", "accept", "disabled"], ["focus-target", "", 1, "app-button", "btn", "btn-default", 3, "click", "disabled"], ["tabindex", "0", 1, "list-group", "file-upload", 3, "ngStyle"], [4, "ngFor", "ngForOf"], ["class", "list-group-item file-upload-status", "tabindex", "0", 4, "ngIf"], ["tabindex", "0", 1, "list-group-item", "file-upload-status"], [1, "media", "upload-file-list"], [3, "title"], [1, "media-body", "media-middle", "file-details"], [1, "uploaddetails", "col-md-3"], [1, "upload-title"], [3, "class", 4, "ngIf"], ["class", "filesize", 4, "ngIf"], [3, "class", "title", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "progress col-md-7 upload-progress", 4, "ngIf"], ["class", "col-md-1 upload-progress-percentage", 4, "ngIf"], ["class", "media-right media-middle", 4, "ngIf"], [1, "media-right", "media-middle"], ["href", "javascript:void(0)", "class", "btn btn-transparent btn-default status-icon", "type", "button", 3, "title", "click", 4, "ngIf"], [1, "filesize"], [1, "error-message"], [1, "progress", "col-md-7", "upload-progress"], [1, "progress-bar", "progress-bar-striped", 3, "ngClass", "ngStyle"], [1, "col-md-1", "upload-progress-percentage"], ["href", "javascript:void(0)", "type", "button", 1, "btn", "btn-transparent", "file-upload-stop", 3, "click"], [1, "wi", "wi-close"], ["href", "javascript:void(0)", "type", "button", 1, "btn", "btn-transparent", "btn-default", "status-icon", 3, "click", "title"], [1, "wi", "wi-delete"], [1, "list-group", "file-upload", 3, "ngStyle", "title"], ["class", "list-group-item file-upload-status", 4, "ngFor", "ngForOf"], [1, "list-group-item", "file-upload-status"], [1, "media-left", "media-middle", "file-icon", "fa", "fa-folder-o"], [1, "uploaddetails"], [1, "status-icon", "wi", "wi-cancel", "text-danger"]], template: function FileUploadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, FileUploadComponent_div_1_Template, 12, 13, "div", 1)(2, FileUploadComponent_div_2_Template, 9, 10, "div", 2)(3, FileUploadComponent_button_3_Template, 3, 5, "button", 3)(4, FileUploadComponent_ul_4_Template, 2, 5, "ul", 4)(5, FileUploadComponent_ul_5_Template, 2, 6, "ul", 5);
             i0.ɵɵelementEnd();
@@ -727,7 +743,7 @@ class FileUploadComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmFileUpload]', providers: [
                     provideAsWidgetRef(FileUploadComponent)
-                ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n                    <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n                </form>\n                <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n                <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n                <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" *ngIf=\"uploadedFiles.length > 0\" >\n        <div *ngFor=\"let ft of uploadedFiles\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails col-md-3\">\n                            <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n                            <span *ngIf=\"ft.status === 'success'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"></span>\n                            <br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                            <span *ngIf=\"ft.status === 'error'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"\n                                  title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                            <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n                        </p>\n                        <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n                             class=\"progress col-md-7 upload-progress\">\n                            <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n                                 [ngStyle]=\"{width: (ft.progress +'%')}\"\n                                 class=\"progress-bar progress-bar-striped\"></div>\n                        </div>\n                        <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n                             class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a class=\"btn btn-transparent file-upload-stop\" type=\"button\" (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\">\n                        <a (click)=\"clear(ft)\" *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success'\">\n                        <a (click)=\"onFileDelete($event, ft)\" class=\"btn btn-transparent btn-default status-icon\" title=\"delete\" type=\"button\">\n                            <i class=\"wi wi-delete\"></i>\n                        </a>\n                    </div>\n                </div>\n            </li>\n        </div>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
+                ], template: "<div class=\"app-fileupload\" init-widget>\n    <!-- drag and drop files UI in web -->\n    <div class=\"app-multi-file-upload\" *ngIf=\"!_isMobileType && multiple\">\n        <div id=\"dropzone\" class=\"drop-box\" (click)=\"triggerFileSelect()\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\" (dragover)=\"dragOverHandler($event);\" (drop)=\"onFileDrop($event);\">\n            <i class=\"{{iconclass}}\"></i>\n            <div class=\"message\">\n                <label [innerHtml]=\"caption\" class=\"upload-label\"></label>\n                <form class=\"form-horizontal\" name=\"{{formName}}\">\n                    <input class=\"file-input\" [attr.aria-label]=\"hint || 'File selection field'\" type=\"file\" name=\"files\" *ngIf=\"multiple\" [disabled]=\"disabled\" [accept]=\"chooseFilter\" (click)=\"onFileElemClick($event)\" (change)=\"onFileSelect($event, $event.target.files)\" multiple >\n                    <a class=\"app-anchor upload-label\" href=\"javascript:void(0);\">{{ fileUploadMessage }}</a>\n                </form>\n                <label *ngIf=\"chooseFilter\" [innerHtml]=\"chooseFilter + ' only '\" class=\"upload-extensions\"></label>\n                <span *ngIf=\"chooseFilter && maxfilesize\" class=\"upload-extensions\"> . </span>\n                <label *ngIf=\"maxfilesize\" [innerHtml]=\"maxfilesize + 'MB max'\" class=\"upload-extensions\"></label>\n            </div>\n        </div>\n    </div>\n    <!-- single file upload in web and single , multiple file upload UI in mobile runmode -->\n    <div class=\"app-single-file-upload\" *ngIf=\"!_isCordova && (!multiple || _isMobileType)\">\n        <div class=\"app-button-wrapper\">\n            <form class=\"form-horizontal\" name=\"{{formName}}\">\n                <!-- support for file upload in Mobileapp in its runmode (Web) -->\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       multiple name=\"files\" type=\"file\">\n                <input (change)=\"onFileSelect($event, $event.target.files)\" (click)=\"onFileElemClick($event)\" *ngIf=\"!multiple\"\n                       [accept]=\"chooseFilter\" [attr.aria-label]=\"arialabel || 'File selection field'\" [disabled]=\"disabled\" class=\"file-input\"\n                       name=\"files\" type=\"file\">\n                <button id=\"dropzone\" focus-target class=\"app-button btn btn-default\" [ngClass]=\"{'highlight-drop-box' : highlightDropArea}\">\n                    <i class=\"{{iconclass}}\" aria-hidden=\"true\"></i>\n                    <span class=\"caption\" [innerHTML]=\"caption\"></span>\n                </button>\n            </form>\n        </div>\n        <div class=\"app-files-upload-status single\"></div>\n    </div>\n    <!-- support for file upload in Mobile Application (device) -->\n    <button *ngIf=\"_isCordova\" focus-target class=\"app-button btn btn-default\" (click)=\"openFileSelector()\" [disabled]=\"disabled\">\n        <i class=\"{{iconclass}}\"></i>\n        <span class=\"caption\" [innerHTML]=\"caption\"></span>\n    </button>\n    <!-- list of selectedfiles UI -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\"\n        *ngIf=\"uploadedFiles.length > 0\" tabindex=\"0\">\n        <ng-container *ngFor=\"let ft of uploadedFiles\">\n            <li class=\"list-group-item file-upload-status\" *ngIf=\"ft.status !== 'abort'\" tabindex=\"0\">\n                <div class=\"media upload-file-list\">\n                    <div class=\"media-left media-middle file-icon {{getFileExtension(ft.name) | fileIconClass}}\" title=\"{{getFileExtension(ft.name)}}\"></div>\n                    <div class=\"media-body media-middle file-details\">\n                        <p class=\"uploaddetails col-md-3\">\n                            <span class=\"upload-title\">{{ ft.storageName || ft.name }}</span>\n                            <span *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"></span>\n                            <br/>\n                            <span class=\"filesize\" *ngIf=\"ft.fileLength  !== 0\">{{ft.size | filesize:0}}</span>\n                            <span *ngIf=\"ft.status === 'error'\"\n                                  class=\"status-icon {{ft.status | stateClass }}\"\n                                  title=\"{{ft.errMsg || this.appLocale.MESSAGE_FILE_UPLOAD_FAILED}}\"></span>\n                            <span *ngIf=\"ft.status === 'error'\" class=\"error-message\">Upload Failed</span>\n                        </p>\n                        <div *ngIf=\"ft.status === 'onProgress' || showprogressbar\"\n                             class=\"progress col-md-7 upload-progress\">\n                            <div [ngClass]=\"ft.status === 'error' ? 'progress-bar-danger' : 'progress-bar-info'\"\n                                 [ngStyle]=\"{width: (ft.progress +'%')}\"\n                                 class=\"progress-bar progress-bar-striped\"></div>\n                        </div>\n                        <div *ngIf=\"(ft.status === 'onProgress' || showprogressbar && showprogressbarpercentage) && ft.progress \"\n                             class=\"col-md-1 upload-progress-percentage\">{{ ft.progress + '%' }}\n                        </div>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'onProgress' || ft.status === 'queued'\">\n                        <a href=\"javascript:void(0)\" class=\"btn btn-transparent file-upload-stop\" type=\"button\"\n                           (click)=\"abortFileUpload(ft)\">\n                            <i class=\"wi wi-close\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\">\n                        <a href=\"javascript:void(0)\" (click)=\"clear(ft)\"\n                           *ngIf=\"cleariconclass !== '' && ft.status !== 'onProgress'\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{cleariconhint}}\" type=\"button\">\n                            <i class=\"{{cleariconclass}}\"></i>\n                        </a>\n                    </div>\n                    <div class=\"media-right media-middle\" *ngIf=\"ft.status === 'success' && (!datasource || (datasource && ft._response?.success))\">\n                        <a href=\"javascript:void(0)\" (click)=\"onFileDelete($event, ft)\"\n                           class=\"btn btn-transparent btn-default status-icon\" title=\"{{deleteiconhint}}\" type=\"button\">\n                            <i class=\"wi wi-delete\"></i>\n                        </a>\n                    </div>\n                </div>\n            </li>\n        </ng-container>\n    </ul>\n    <!-- list of selectedfolders UI to show the error in title -->\n    <ul class=\"list-group file-upload\" [ngStyle]=\"{height: filelistheight, overflow: overflow}\" title=\"{{this.appLocale.MESSAGE_FOLDER_UPLOADS_NOT_ALLOWED}}\" *ngIf=\"selectedFolders.length > 0\" >\n        <li *ngFor=\"let ft of selectedFolders\" class=\"list-group-item file-upload-status\">\n            <div class=\"media upload-file-list\">\n                <div class=\"media-left media-middle file-icon fa fa-folder-o\"></div>\n                <div class=\"media-body media-middle file-details\">\n                    <p class=\"uploaddetails\">\n                        <label class=\"upload-title\">{{ft.name}}</label><br/>\n                    </p>\n                </div>\n                <div class=\"media-right media-middle\" >\n                    <span class=\"status-icon  wi wi-cancel text-danger\"></span>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['select.event']