@vitrosoftware/common-ui-ts 1.0.6 → 1.0.7

package/css/white/common.css

@@ -1,3 +1,4 @@
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/kendo.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/treegrid.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/jstree/style.min.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-edit.css');

package/css/white/controls/action-handler/action-handler.css

@@ -0,0 +1,73 @@
+.vitro-action-handler > div {
+    z-index: 10000;
+    font-family: inherit;
+    border-radius: 8px;
+    border: 1px solid #ff5b2d;
+    font-size: inherit;
+    max-width: 278px;
+}
+
+.vitro-icon-before,
+.vitro-icon-progress,
+.vitro-icon-success,
+.vitro-icon-error {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    flex-shrink: 0;
+}
+
+.vitro-icon-before {
+    /* ico-question.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1631 44.1426C35.2088 44.1426 44.1631 35.1883 44.1631 24.1426C44.1631 13.0969 35.2088 4.14258 24.1631 4.14258C13.1174 4.14258 4.16309 13.0969 4.16309 24.1426C4.16309 35.1883 13.1174 44.1426 24.1631 44.1426Z' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M18.3428 18.1426C18.813 16.806 19.7411 15.6788 20.9627 14.9609C22.1843 14.2429 23.6206 13.9805 25.0171 14.22C26.4137 14.4596 27.6804 15.1857 28.5929 16.2697C29.5055 17.3537 30.0049 18.7257 30.0028 20.1426C30.0028 24.1426 24.0028 26.1426 24.0028 26.1426' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M24.1631 34.1426H24.1831' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+.vitro-icon-progress {
+    /* ico-preloader.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;' class='ng-star-inserted'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.875s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(45 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(135 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.375s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(225 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.125s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(315 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+.vitro-icon-error {
+    /* ico-error.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg _ngcontent-ivk-c174='' width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-ivk-c174='' d='M17.1503 6.6L3.03361 30.1667C2.74256 30.6707 2.58856 31.2422 2.58693 31.8242C2.5853 32.4062 2.7361 32.9785 3.02432 33.4842C3.31255 33.9899 3.72815 34.4112 4.22979 34.7064C4.73143 35.0016 5.30161 35.1603 5.88361 35.1667H34.1169C34.6989 35.1603 35.2691 35.0016 35.7708 34.7064C36.2724 34.4112 36.688 33.9899 36.9762 33.4842C37.2645 32.9785 37.4153 32.4062 37.4136 31.8242C37.412 31.2422 37.258 30.6707 36.9669 30.1667L22.8503 6.6C22.5532 6.11017 22.1348 5.70519 21.6356 5.42414C21.1364 5.14308 20.5732 4.99542 20.0003 4.99542C19.4274 4.99542 18.8642 5.14308 18.365 5.42414C17.8657 5.70519 17.4474 6.11017 17.1503 6.6V6.6Z' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-ivk-c174='' d='M20 15.1665V21.8332' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-ivk-c174='' d='M20 28.4998H20.0167' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+.vitro-icon-success {
+    /* ico-success.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-cnj-c174='' d='M36.6664 18.9662V20.4995C36.6643 24.0935 35.5005 27.5906 33.3486 30.4692C31.1966 33.3478 28.1718 35.4536 24.7253 36.4727C21.2787 37.4917 17.5951 37.3693 14.2238 36.1238C10.8525 34.8783 7.9741 32.5763 6.01794 29.5613C4.06179 26.5462 3.13266 22.9796 3.36914 19.3934C3.60561 15.8071 4.99502 12.3934 7.33014 9.6613C9.66526 6.92921 12.821 5.02515 16.3267 4.23309C19.8323 3.44103 23.5001 3.8034 26.783 5.26618' stroke='%2327AE60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-cnj-c174='' d='M36.6667 7.1662L20 23.8495L15 18.8495' stroke='%2327AE60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+.vitro-button-close {
+    background: #fff;
+    color: #0097ff;
+    border: 1px solid #0097ff;
+}
+
+.vitro-button-close:not(:disabled):active, .vitro-button-close:not(:disabled):focus, .vitro-button-close:not(:disabled):hover {
+    background: #fff;
+    border-color: rgba(0, 151, 255, .8);
+    color: rgba(0, 151, 255, .8);
+}
+
+.vitro-button-close :global(.vitro-effect-ripple) {
+    background-color: rgba(0, 151, 255, .4);
+}
+
+.vitro-action-handler :global(.popover-body) {
+    text-align: left;
+    color: inherit;
+    padding: 16px;
+}
+
+.vitro-action-handler .vitro-flex {
+    align-items: center;
+    display: flex;
+}
+
+:global(.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before), :global(.bs-popover-bottom > .popover-arrow::before) {
+    border-bottom-color: red;
+}

package/css/white/controls/table-view/table-view-custom-edit.css

@@ -0,0 +1 @@
+.k-i-close:not(.k-hidden) {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+DQo8cG9seWdvbiBmaWxsPSIjOTk5IiBwb2ludHM9IjQ4LDIxLjcgNDIuMywxNiAzMiwyNi4zIDIxLjcsMTYgMTYsMjEuNyAyNi4zLDMyIDE2LDQyLjMgMjEuNyw0OCAzMiwzNy43IDQyLjMsNDggNDgsNDIuMyAzNy43LDMyIi8+DQo8L3N2Zz4=);
    font-size: 17px !important;
    opacity: .6;
    transition: all .5s;
    cursor: pointer;
    opacity: 1 !important;
    background-color: #E0E0E0;
    color: #222d44;
    border: none;
    box-shadow: none;
    background: #E0E0E0;
    color: #222d44;
    border-radius: 6px;
    box-shadow: inset 0 0 0 .5px rgb(0 0 0 / 13%);
    border-width: 0;
    position: absolute;
    z-index: 10000;
    opacity: 0;
    padding: 0px;
    background: white;
    top: 3px !important;
    display: none;

package/css/white/controls/tree-view/tree-view.css

@@ -55,7 +55,8 @@
 
 .vitro-tree-view :global(.jstree-anchor) {
     line-height: 28px;
-    height: 28px;
+    height: 28px;
+    user-select: none;
 }
 
 .vitro-tree-view :global(.jstree-wholerow) {

package/dist/constants/Factory.d.ts

@@ -0,0 +1,3 @@
+export declare class SERVICE {
+    static readonly LOCALE = "LocaleService";
+}

package/dist/controls/ActionHandler/ActionHandler.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface ActionHandlerProps {
+    actionCode: string;
+    processItem: (item: any) => any;
+    item?: any;
+    itemList: any[];
+    showAfterAction?: boolean;
+    showProgress?: boolean;
+    onAfterAction?: (error: any, successResult: any, failResult: any) => void;
+    onBeforeAction?: () => void;
+    onAfterActionClose?: (error: any, successResult: any, failResult: any) => void;
+    successText?: (itemCount?: number) => string;
+    confirmText?: (itemCount?: number) => string;
+    errorText?: (error: any, itemCount: number) => string;
+    progressText?: (itemCount?: number) => string;
+    isConfirm?: boolean;
+    target?: any;
+    placement?: any;
+    labelYes?: string;
+    labelNo?: string;
+    children?: React.ReactNode;
+    durationMs?: number;
+    show?: boolean;
+}
+export declare let ActionHandler: React.FunctionComponent<ActionHandlerProps>;
+export {};

package/dist/controls/ActionHandler/ActionHandlerConstants.d.ts

@@ -0,0 +1,22 @@
+export declare enum ACTION_HANDLER_LOCALE {
+    CONF_SINGLE = "app.common.msg.action.conf.single",
+    CONF_MULTI = "app.common.msg.action.conf.multi",
+    SUCCESS_SINGLE = "app.common.msg.action.success.single",
+    SUCCESS_MULTI = "app.common.msg.action.success.multi",
+    ERROR_SINGLE = "app.common.msg.action.error.single",
+    ERROR_MULTI = "app.common.msg.action.error.multi",
+    PROGRESS_SINGLE = "app.common.msg.action.progress.single",
+    PROGRESS_MULTI = "app.common.msg.action.progress.multi",
+    YES = "app.common.action.yes",
+    NO = "app.common.action.no"
+}
+export declare enum PLACEMENT {
+    TOP = "top"
+}
+export declare enum SYMBOL {
+    QUESTION_MARK = "?",
+    EMPTY_STRING = ""
+}
+export declare enum TRIGGER {
+    CLICK = "click"
+}

package/dist/controls/ActionHandler/UpdatingPopover.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UpdatingPopover: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLDivElement>>;

package/dist/controls/ComponentLoader/ComponentLoader.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { interfaces } from 'inversify';
+interface ComponentLoaderProps {
+    name: string;
+    container: interfaces.Container;
+}
+export declare const ComponentLoader: FunctionComponent<ComponentLoaderProps>;
+export {};

package/dist/controls/ComponentLoader/ComponentLoaderContext.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent, FunctionComponentElement } from 'react';
+export interface ComponentLoaderContext {
+    setReactComponent(createComponent: (component: FunctionComponent<any>, props: any) => FunctionComponentElement<any>, setComponentList: (componentList: FunctionComponentElement<any>[]) => any): void;
+    add(component: FunctionComponent<any>, props: any): any;
+    remove(component: FunctionComponentElement<any>): void;
+}

package/dist/controls/ComponentLoader/ComponentLoaderContextImpl.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, FunctionComponentElement } from 'react';
+import { ComponentLoaderContext } from './ComponentLoaderContext';
+export declare class ComponentLoaderContextImpl implements ComponentLoaderContext {
+    private componentList;
+    private createComponent;
+    private setComponentList;
+    constructor();
+    setReactComponent(createComponent: (component: FunctionComponent, props: any) => FunctionComponentElement<any>, setComponentList: (componentList: FunctionComponentElement<any>[]) => any): void;
+    add(component: FunctionComponent, props: any): FunctionComponentElement<any>;
+    remove(component: FunctionComponentElement<any>): void;
+}

package/dist/controls/TableView/TableViewContext.d.ts

@@ -49,4 +49,11 @@ export interface TableViewContext {
     getFirst(row?: TableViewRow, type?: number): TableViewRow;
     endEdit(editResult: boolean): any;
     expandRow(row: TableViewRow): void;
+    getCell(row: TableViewRow, col: TableViewCol | string): void;
+    getFRow(): TableViewRow;
+    getFCol(): TableViewCol;
+    startEdit(): void;
+    export(): void;
+    print(): void;
+    isVisibleGantt(): boolean;
 }

package/dist/controls/TableView/TreeGridTableViewContextImpl.d.ts

@@ -57,4 +57,11 @@ export declare class TreeGridTableViewContextImpl implements TableViewContext {
     setEventHandler(eventHandler: TableViewEventHandler): void;
     endEdit(success: boolean): any;
     expandRow(row: TableViewRow): void;
+    getCell(row: TableViewRow, col: TableViewCol | string): any;
+    getFRow(): TableViewRow;
+    getFCol(): TableViewCol;
+    startEdit(): void;
+    export(): void;
+    print(): void;
+    isVisibleGantt(): boolean;
 }

package/dist/controls/TelerikUploader/TelerikUploaderConstants.d.ts

@@ -1,5 +1,5 @@
 export declare enum EVENTS {
     UPLOAD_SUCCESS = "vitro.upload.success",
-    ADD_FILE = "vitro.commandMenu.addFile",
+    ADD_FILE = "vitro.file.add",
     READY_STATE_CHANGE = "readystatechange"
 }

package/dist/index.css

@@ -1,6 +1,7 @@
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/kendo.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/treegrid.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/jstree/style.min.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-edit.css');
 
 ._breadcrumbs_vitro-breadcrumbs_1H9SaWn ::-webkit-scrollbar {
     width: 4px;
@@ -334,7 +335,10 @@
 
 ._tree-view_vitro-tree-view_3R9kjAJ .jstree-anchor {
     line-height: 28px;
-    height: 28px;
+    height: 28px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
 }
 
 ._tree-view_vitro-tree-view_3R9kjAJ .jstree-wholerow {
@@ -443,92 +447,6 @@
     }
 }
 
-._splitters_splitter_3gYPi9v {
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex: 0 0 100%;
-  align-content: flex-start;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text; }
-
-._splitters_pane_27XaztY {
-  flex-grow: 1;
-  height: 100%; }
-
-._splitters_splitter_3gYPi9v._splitters_horizontal_3ITMvsV {
-  flex-wrap: nowrap;
-  flex-direction: column; }
-
-._splitters_splitter_3gYPi9v ._splitters_pane_27XaztY:first-child {
-  width: 100%;
-  height: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto; }
-
-._splitters_splitter_3gYPi9v ._splitters_pane_27XaztY:last-child {
-  flex: 1 1 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
-  overflow: hidden; }
-
-._splitters_bottom-detail-pane_2k_fJRj {
-  padding: 10px;
-  background-color: #e7f5ce;
-  z-index: 10; }
-
-._splitters_splitter_3gYPi9v ._splitters_pane_27XaztY._splitters_bottom-detail-pane_2k_fJRj {
-  overflow: auto; }
-
-/*handle bar*/
-._splitters_handle-bar_1HCCZOB {
-  width: 10px;
-  height: 100%;
-  min-width: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 20;
-  background-color: #eeeff0;
-  cursor: col-resize;
-  font-size: 14px; }
-  ._splitters_handle-bar_1HCCZOB ._splitters_handle-bar_drag_3PpIE58 {
-    width: 4px;
-    height: 20px;
-    border-left: 1px solid rgba(0, 0, 0, 0.0980392);
-    border-right: 1px solid rgba(0, 0, 0, 0.0980392); }
-  ._splitters_handle-bar_1HCCZOB._splitters_horizontal_3ITMvsV {
-    width: 100%;
-    height: 10px;
-    min-height: 10px;
-    cursor: row-resize; }
-    ._splitters_handle-bar_1HCCZOB._splitters_horizontal_3ITMvsV ._splitters_handle-bar_drag_3PpIE58 {
-      width: 20px;
-      height: 4px;
-      border-top: 1px solid rgba(0, 0, 0, 0.0980392);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.0980392);
-      border-right: 0;
-      border-left: 0; }
-  ._splitters_handle-bar_1HCCZOB:active, ._splitters_handle-bar_1HCCZOB:hover, ._splitters_handle-bar_1HCCZOB._splitters_handle-bar_clone_3Qvkc4Y {
-    background-color: #ccc; }
-  ._splitters_handle-bar_1HCCZOB._splitters_handle-bar_clone_3Qvkc4Y {
-    position: absolute;
-    opacity: .9;
-    z-index: 12000; }
-  ._splitters_handle-bar_1HCCZOB._splitters_resize-not-allowed_2ptBJWC {
-    cursor: auto; }
-    ._splitters_handle-bar_1HCCZOB._splitters_resize-not-allowed_2ptBJWC:hover {
-      background-color: #eeeff0; }
-    ._splitters_handle-bar_1HCCZOB._splitters_resize-not-allowed_2ptBJWC ._splitters_handle-bar_drag_3PpIE58 {
-      display: none; }
-
-._splitters_rotate-90_2lbYadK {
-  transform: rotate(90deg); }
-
 #TableView {
     border-radius: 8px;
     padding: 6px;
@@ -665,3 +583,77 @@
 #TableViewContainer .splitter:last-child > .pane.primary:has(._uploader_vitro-uploader_1frFGu3) {
     position: relative;
 }
+
+._action-handler_vitro-action-handler_1_HNxCd > div {
+    z-index: 10000;
+    font-family: inherit;
+    border-radius: 8px;
+    border: 1px solid #ff5b2d;
+    font-size: inherit;
+    max-width: 278px;
+}
+
+._action-handler_vitro-icon-before_3vTdV08,
+._action-handler_vitro-icon-progress_28liEuB,
+._action-handler_vitro-icon-success_1jnQDIv,
+._action-handler_vitro-icon-error_3OPWhCB {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    flex-shrink: 0;
+}
+
+._action-handler_vitro-icon-before_3vTdV08 {
+    /* ico-question.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1631 44.1426C35.2088 44.1426 44.1631 35.1883 44.1631 24.1426C44.1631 13.0969 35.2088 4.14258 24.1631 4.14258C13.1174 4.14258 4.16309 13.0969 4.16309 24.1426C4.16309 35.1883 13.1174 44.1426 24.1631 44.1426Z' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M18.3428 18.1426C18.813 16.806 19.7411 15.6788 20.9627 14.9609C22.1843 14.2429 23.6206 13.9805 25.0171 14.22C26.4137 14.4596 27.6804 15.1857 28.5929 16.2697C29.5055 17.3537 30.0049 18.7257 30.0028 20.1426C30.0028 24.1426 24.0028 26.1426 24.0028 26.1426' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M24.1631 34.1426H24.1831' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+._action-handler_vitro-icon-progress_28liEuB {
+    /* ico-preloader.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;' class='ng-star-inserted'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.875s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(45 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(135 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.375s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(225 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.125s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(315 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+._action-handler_vitro-icon-error_3OPWhCB {
+    /* ico-error.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg _ngcontent-ivk-c174='' width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-ivk-c174='' d='M17.1503 6.6L3.03361 30.1667C2.74256 30.6707 2.58856 31.2422 2.58693 31.8242C2.5853 32.4062 2.7361 32.9785 3.02432 33.4842C3.31255 33.9899 3.72815 34.4112 4.22979 34.7064C4.73143 35.0016 5.30161 35.1603 5.88361 35.1667H34.1169C34.6989 35.1603 35.2691 35.0016 35.7708 34.7064C36.2724 34.4112 36.688 33.9899 36.9762 33.4842C37.2645 32.9785 37.4153 32.4062 37.4136 31.8242C37.412 31.2422 37.258 30.6707 36.9669 30.1667L22.8503 6.6C22.5532 6.11017 22.1348 5.70519 21.6356 5.42414C21.1364 5.14308 20.5732 4.99542 20.0003 4.99542C19.4274 4.99542 18.8642 5.14308 18.365 5.42414C17.8657 5.70519 17.4474 6.11017 17.1503 6.6V6.6Z' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-ivk-c174='' d='M20 15.1665V21.8332' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-ivk-c174='' d='M20 28.4998H20.0167' stroke='%23FF5B2D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+._action-handler_vitro-icon-success_1jnQDIv {
+    /* ico-success.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-cnj-c174='' d='M36.6664 18.9662V20.4995C36.6643 24.0935 35.5005 27.5906 33.3486 30.4692C31.1966 33.3478 28.1718 35.4536 24.7253 36.4727C21.2787 37.4917 17.5951 37.3693 14.2238 36.1238C10.8525 34.8783 7.9741 32.5763 6.01794 29.5613C4.06179 26.5462 3.13266 22.9796 3.36914 19.3934C3.60561 15.8071 4.99502 12.3934 7.33014 9.6613C9.66526 6.92921 12.821 5.02515 16.3267 4.23309C19.8323 3.44103 23.5001 3.8034 26.783 5.26618' stroke='%2327AE60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath _ngcontent-cnj-c174='' d='M36.6667 7.1662L20 23.8495L15 18.8495' stroke='%2327AE60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+}
+
+._action-handler_vitro-button-close_33qzSIU {
+    background: #fff;
+    color: #0097ff;
+    border: 1px solid #0097ff;
+}
+
+._action-handler_vitro-button-close_33qzSIU:not(:disabled):active, ._action-handler_vitro-button-close_33qzSIU:not(:disabled):focus, ._action-handler_vitro-button-close_33qzSIU:not(:disabled):hover {
+    background: #fff;
+    border-color: rgba(0, 151, 255, .8);
+    color: rgba(0, 151, 255, .8);
+}
+
+._action-handler_vitro-button-close_33qzSIU .vitro-effect-ripple {
+    background-color: rgba(0, 151, 255, .4);
+}
+
+._action-handler_vitro-action-handler_1_HNxCd .popover-body {
+    text-align: left;
+    color: inherit;
+    padding: 16px;
+}
+
+._action-handler_vitro-action-handler_1_HNxCd ._action-handler_vitro-flex_3Pyc7fz {
+    align-items: center;
+    display: flex;
+}
+
+.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
+    border-bottom-color: red;
+}

package/dist/index.d.ts

@@ -12,9 +12,15 @@ import { TelerikUploader } from "./controls/TelerikUploader/TelerikUploader";
 import { TelerikUploaderContext } from "./controls/TelerikUploader/TelerikUploaderContext";
 import { TelerikUploaderContextImpl } from "./controls/TelerikUploader/TelerikUploaderContextImpl";
 import { TelerikUploaderSettings } from "./controls/TelerikUploader/TelerikUploaderSettings";
+import { ComponentLoader } from "./controls/ComponentLoader/ComponentLoader";
+import { ComponentLoaderContextImpl } from "./controls/ComponentLoader/ComponentLoaderContextImpl";
+import { ComponentLoaderContext } from "./controls/ComponentLoader/ComponentLoaderContext";
+import { ActionHandler } from "./controls/ActionHandler/ActionHandler";
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext };
 export { TableView, TableViewContext, TableViewRow, TableViewCol };
 export { MicroFrontend };
 export { TelerikUploader, TelerikUploaderContext, TelerikUploaderContextImpl, TelerikUploaderSettings };
+export { ComponentLoader, ComponentLoaderContextImpl, ComponentLoaderContext };
+export { ActionHandler };