@wavemaker/app-ng-runtime 11.13.0-rc.222 → 11.14.0-rc.226

package/transpiler/fesm2022/index.mjs

@@ -7,7 +7,7 @@ const NG_REACTIVE_FORM_MODULE = [{ from: '@angular/forms', name: 'ReactiveFormsM
 // NGX Bootstrap Modules
 const NGX_BS_DATE_PICKER = [{ from: 'ngx-bootstrap/datepicker', name: 'BsDatepickerModule', as: 'ngx_BsDatepickerModule' }];
 const NGX_CAROUSEL_MODULE = [{ from: 'ngx-bootstrap/carousel', name: 'CarouselModule', as: 'ngxCarouselModule', forRoot: true }];
-const NGX_COLOR_PICKER_MODULE = [{ from: 'ngx-color-picker', name: 'ColorPickerModule', as: 'ngx_ColorPickerModule' }];
+const NGX_COLOR_PICKER_DIRECTIVE = [{ from: 'ngx-color-picker', name: 'ColorPickerDirective', as: 'ngx_ColorPickerDirective' }];
 const NGX_DROP_DOWN_MODULE = [{ from: 'ngx-bootstrap/dropdown', name: 'BsDropdownModule', as: 'ngxBsDropdownModule', forRoot: true }];
 //const NGX_MODAL_MODULE: ImportDef[] = [{ from: 'ngx-bootstrap/modal', name: 'ModalModule', as: 'ngx_ModalModule' }];
 const NGX_PAGINATION_MODULE = [{ from: 'ngx-bootstrap/pagination', name: 'PaginationModule', as: 'ngxPaginationModule', forRoot: true }];
@@ -16,54 +16,54 @@ const NGX_TIME_PICKER = [{ from: 'ngx-bootstrap/timepicker', name: 'TimepickerMo
 const NGX_TOOL_TIP_MODULE = [{ from: 'ngx-bootstrap/tooltip', name: 'TooltipModule', as: 'ngxTooltipModule', forRoot: true }];
 const NGX_TYPE_HEAD_MODULE = [{ from: 'ngx-bootstrap/typeahead', name: 'TypeaheadModule', as: 'ngxTypeaheadModule', forRoot: true }];
 // Progess Modules
-const PROGRESS_BAR_COMPONENT = [{ from: '@wm/components/basic/progress', name: 'ProgressBarComponent' }];
-const PROGRESS_CIRCLE_COMPONENT = [{ from: '@wm/components/basic/progress', name: 'ProgressCircleComponent' }];
-// Mobile-Specific Modules
-const PAGE_COMPONENT = [
-    { from: '@wm/components/page', name: 'PageDirective' }
-];
-// General Modules (Desktop and Mobile) 
-// const INPUT_MODULE: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputModule' }];
-// const DIALOG_MODULE: ImportDef[] = [...NGX_MODAL_MODULE, { from: '@wm/components/dialogs', name: 'DialogModule' }];
+const PROGRESS_BAR_COMPONENT = [{ from: '@wm/components/basic/progress/progress-bar', name: 'ProgressBarComponent' }];
+const PROGRESS_CIRCLE_COMPONENT = [{ from: '@wm/components/basic/progress/progress-circle', name: 'ProgressCircleComponent' }];
+const PAGE_COMPONENT = [{ from: '@wm/components/page', name: 'PageDirective' }];
 const PAGINATION_COMPONENT = [...NG_FORM_MODULE, ...NGX_PAGINATION_MODULE, { from: '@wm/components/data/pagination', name: 'PaginationComponent' }];
 // Basic Components
-const ANCHOR_COMPONENT = [{ from: '@wm/components/basic', name: 'AnchorComponent' }];
-const AUDIO_COMPONENT = [{ from: '@wm/components/basic', name: 'AudioComponent' }];
-const HTML_COMPONENT = [{ from: '@wm/components/basic', name: 'HtmlDirective' }];
-const ICON_COMPONENT = [{ from: '@wm/components/basic', name: 'IconComponent' }];
-const IFRAME_COMPONENT = [{ from: '@wm/components/basic', name: 'IframeComponent' }];
-const LABEL_COMPONENT = [{ from: '@wm/components/basic', name: 'LabelDirective' }];
-const PICTURE_COMPONENT = [{ from: '@wm/components/basic', name: 'PictureDirective' }];
+const ANCHOR_COMPONENT = [{ from: '@wm/components/basic/anchor', name: 'AnchorComponent' }];
+const AUDIO_COMPONENT = [{ from: '@wm/components/basic/audio', name: 'AudioComponent' }];
+const HTML_COMPONENT = [{ from: '@wm/components/basic/html', name: 'HtmlDirective' }];
+const ICON_COMPONENT = [{ from: '@wm/components/basic/icon', name: 'IconComponent' }];
+const IFRAME_COMPONENT = [{ from: '@wm/components/basic/iframe', name: 'IframeComponent' }];
+const LABEL_COMPONENT = [{ from: '@wm/components/basic/label', name: 'LabelDirective' }];
+const PICTURE_COMPONENT = [{ from: '@wm/components/basic/picture', name: 'PictureDirective' }];
 const SEARCH_COMPONENT = [
     ...NG_FORM_MODULE,
     ...NGX_TYPE_HEAD_MODULE,
     { from: '@wm/components/basic/search', name: 'ScrollableDirective' },
     { from: '@wm/components/basic/search', name: 'SearchComponent' }
 ];
-const SPINNER_COMPONENT = [{ from: '@wm/components/basic', name: 'SpinnerComponent' }];
-const VIDEO_COMPONENT = [{ from: '@wm/components/basic', name: 'VideoComponent' }];
+const SPINNER_COMPONENT = [{ from: '@wm/components/basic/spinner', name: 'SpinnerComponent' }];
+const VIDEO_COMPONENT = [{ from: '@wm/components/basic/video', name: 'VideoComponent' }];
 // Container Components
-const ACCORDION_PANE_COMPONENT = [{ from: '@wm/components/containers/accordion', name: 'AccordionPaneComponent' }];
+const PARTIAL_DIRECTIVE = [{ from: '@wm/components/base', name: 'PartialDirective' }];
+const PARTIAL_CONTAINER = [{ from: '@wm/components/base', name: 'PartialParamHandlerDirective' }, { from: '@wm/components/base', name: 'PartialContainerDirective' }];
+const ACCORDION_PANE_COMPONENT = [...PARTIAL_CONTAINER, { from: '@wm/components/containers/accordion', name: 'AccordionPaneComponent' }];
 const ACCORDION_DIRECTIVE = [{ from: '@wm/components/containers/accordion', name: 'AccordionDirective' }];
+const CONTAINER_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/base', name: 'ContainerDirective' }];
+const PARTIAL_PARAM_DIRECTIVE = [{ from: '@wm/components/base', name: 'PartialParamDirective' }];
 const LINEAR_LAYOUT_ITEM_DIRECTIVE = [{ from: '@wm/components/containers/linear-layout', name: 'LinearLayoutItemDirective' }];
 const LINEAR_LAYOUT_DIRECTIVE = [...LINEAR_LAYOUT_ITEM_DIRECTIVE, { from: '@wm/components/containers/linear-layout', name: 'LinearLayoutDirective' }];
-const TAB_PANE_COMPONENT = [{ from: '@wm/components/containers/tabs', name: 'TabPaneComponent' }];
+const TAB_PANE_COMPONENT = [...PARTIAL_CONTAINER, { from: '@wm/components/containers/tabs', name: 'TabPaneComponent' }];
 const TABS_COMPONENT = [...TAB_PANE_COMPONENT, { from: '@wm/components/containers/tabs', name: 'TabsComponent' }];
 const WIZARD_ACTION_DIRECTIVE = [{ from: '@wm/components/containers/wizard', name: 'WizardActionDirective' }];
-const WIZARD_STEP_DIRECTIVE = [{ from: '@wm/components/containers/wizard', name: 'WizardStepComponent' }];
+const WIZARD_STEP_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/containers/wizard', name: 'WizardStepComponent' }];
 const WIZARD_COMPONENT = [...NG_FORM_MODULE, ...WIZARD_ACTION_DIRECTIVE, ...WIZARD_STEP_DIRECTIVE, { from: '@wm/components/containers/wizard', name: 'WizardComponent' }];
 const LAYOUT_GRID_COLUMN_DIRECTIVE = [{ from: '@wm/components/containers/layout-grid', name: 'LayoutGridColumnDirective' }];
 const LAYOUT_GRID_ROW_DIRECTIVE = [{ from: '@wm/components/containers/layout-grid', name: 'LayoutGridRowDirective' }];
 const LAYOUT_GRID_DIRECTIVE = [...LAYOUT_GRID_ROW_DIRECTIVE, ...LAYOUT_GRID_COLUMN_DIRECTIVE, { from: '@wm/components/containers/layout-grid', name: 'LayoutgridDirective' }];
-const PANEL_COMPONENT = [{ from: '@wm/components/containers/panel', name: 'PanelComponent' }];
+const PANEL_COMPONENT = [...PARTIAL_CONTAINER, { from: '@wm/components/containers/panel', name: 'PanelComponent' }];
 const TILE_DIRECTIVE = [{ from: '@wm/components/containers/tile', name: 'TileDirective' }];
+const REPEAT_TEMPLATE_DIRECTIVE = [{ from: '@wm/components/base', name: 'RepeatTemplateDirective' }];
 // Dialog Modules
 const ALERT_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/alert-dialog', name: 'AlertDialogComponent' }];
 const CONFIRM_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/confirm-dialog', name: 'ConfirmDialogComponent' }];
 const DESIGN_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/design-dialog', name: 'DialogComponent' }];
 const IFRAME_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/iframe-dialog', name: 'IframeDialogComponent' }];
-const LOGIN_DIALOG_DIRECTIVE = [{ from: '@wm/components/dialogs/login-dialog', name: 'LoginDialogDirective' }];
-const PARTIAL_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/partial-dialog', name: 'PartialDialogComponent' }];
+const LOGIN_DIALOG_DIRECTIVE = [{ from: '@wm/components/dialogs/login-dialog', name: 'LoginDialogDirective' }, ...DESIGN_DIALOG_COMPONENT];
+const PARTIAL_DIALOG_COMPONENT = [{ from: '@wm/components/dialogs/partial-dialog', name: 'PartialDialogComponent' }, ...CONTAINER_DIRECTIVE];
+const DIALOGACTIONS_DIRECTIVE = [{ from: '@wm/components/dialogs', name: 'DialogFooterDirective' }];
 // Navigation Modules
 const NAV_ITEM_DIRECTIVE = [{ from: '@wm/components/navigation/menu', name: 'NavItemDirective' }];
 const NAV_COMPONENT = [{ from: '@wm/components/navigation/menu', name: 'NavComponent' }];
@@ -71,49 +71,50 @@ const NAVIGATION_CONTROL_DIRECTIVE = [{ from: '@wm/components/navigation/menu',
 const MENU_DROPDOWN_ITEM_COMPONENT = [{ from: '@wm/components/navigation/menu', name: 'MenuDropdownComponent' }];
 const MENU_DROPDOWN_COMPONENT = [{ from: '@wm/components/navigation/menu', name: 'MenuDropdownComponent' }]; // Duplicate, consider removing one
 const MENU_COMPONENT = [...NGX_DROP_DOWN_MODULE, ...MENU_DROPDOWN_COMPONENT, ...MENU_DROPDOWN_ITEM_COMPONENT, ...NAVIGATION_CONTROL_DIRECTIVE, ...NAV_COMPONENT, ...NAV_ITEM_DIRECTIVE, { from: '@wm/components/navigation/menu', name: 'MenuComponent' }];
+const MESSAGE_COMPONENT = [{ from: '@wm/components/base', name: 'MessageComponent' }];
 const BREAD_CRUMB_COMPONENT = [...MENU_COMPONENT, { from: '@wm/components/navigation/breadcrumb', name: 'BreadcrumbComponent' }];
 const NAVBAR_COMPONENT = [{ from: '@wm/components/navigation/navbar', name: 'NavbarComponent' }];
-const POPOVER_COMPONENT = [...NGX_POPOVER_MODULE, { from: '@wm/components/navigation/popover', name: 'PopoverComponent' }];
-const TOP_NAV_DIRECTIVE = [{ from: '@wm/components/page/top-nav', name: 'TopNavDirective' }];
+const POPOVER_COMPONENT = [...NGX_POPOVER_MODULE, { from: '@wm/components/navigation/popover', name: 'PopoverComponent' }, ...CONTAINER_DIRECTIVE];
+const TOP_NAV_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/page/top-nav', name: 'TopNavDirective' }];
 // Input Components
 const CALENDAR_COMPONENT = [...NG_FORM_MODULE, ...NGX_BS_DATE_PICKER, { from: '@wm/components/input/calendar', name: 'CalendarComponent' }];
 const CHIPS_COMPONENT = [...SEARCH_COMPONENT, { from: '@wm/components/input/chips', name: 'ChipsComponent' }];
-const COLOR_PICKER_COMPONENT = [...NG_FORM_MODULE, ...NGX_COLOR_PICKER_MODULE, { from: '@wm/components/input/color-picker', name: 'ColorPickerComponent' }];
+const COLOR_PICKER_COMPONENT = [...NG_FORM_MODULE, ...NGX_COLOR_PICKER_DIRECTIVE, { from: '@wm/components/input/color-picker', name: 'ColorPickerComponent' }];
 const CURRENCY_COMPONENT = [{ from: '@wm/components/input/currency', name: 'CurrencyComponent' }];
 const DATE_COMPONENT = [
     ...NG_FORM_MODULE, ...NGX_BS_DATE_PICKER, ...NGX_DROP_DOWN_MODULE,
-    { from: '@wm/components/input/epoch', name: 'DateComponent' }
+    { from: '@wm/components/input/epoch/date', name: 'DateComponent' }
 ];
 const DATE_TIME_COMPONENT = [
     ...NG_FORM_MODULE, ...NGX_BS_DATE_PICKER, ...NGX_TIME_PICKER, ...NGX_DROP_DOWN_MODULE,
-    { from: '@wm/components/input/epoch', name: 'DatetimeComponent' }
+    { from: '@wm/components/input/epoch/date-time', name: 'DatetimeComponent' }
 ];
 const TIME_COMPONENT = [
     ...NG_FORM_MODULE, ...NGX_BS_DATE_PICKER, ...NGX_TIME_PICKER, ...NGX_DROP_DOWN_MODULE,
-    { from: '@wm/components/input/epoch', name: 'TimeComponent' }
+    { from: '@wm/components/input/epoch/time', name: 'TimeComponent' }
 ];
 const FILE_UPLOAD_COMPONENT = [{ from: '@wm/components/input/file-upload', name: 'FileUploadComponent' }];
 const RATING_COMPONENT = [{ from: '@wm/components/input/rating', name: 'RatingComponent' }];
 const SLIDER_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/slider', name: 'SliderComponent' }];
-const BUTTON_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'ButtonComponent' }];
-const BUTTON_GROUP_DIRECTIVE = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'ButtonGroupDirective' }];
+const BUTTON_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/button', name: 'ButtonComponent' }];
+const BUTTON_GROUP_DIRECTIVE = [...NG_FORM_MODULE, { from: '@wm/components/input/button-group', name: 'ButtonGroupDirective' }];
 // const CAPTION_POSITION_DIRECTIVE: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'CaptionPositionDirective' }];
-const CHECKBOX_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'CheckboxComponent' }];
-const CHECKBOXSET_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'CheckboxsetComponent' }];
+const CHECKBOX_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/checkbox', name: 'CheckboxComponent' }];
+const CHECKBOXSET_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/checkboxset', name: 'CheckboxsetComponent' }];
 // const COMPOSITE_DIRECTIVE: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'CompositeDirective' }];
-const NUMBER_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'NumberComponent' }];
-const RADIOSET_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'RadiosetComponent' }];
-const SELECT_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'SelectComponent' }];
-const SWITCH_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'SwitchComponent' }];
-// const INPUT_CALENDER_COMPONENT: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputCalendarComponent' }];
-// const INPUT_COLOR_COMPONENT: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputColorComponent' }];
-// const INPUT_EMAIL_COMPONENT: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputEmailComponent' }];
-// const INPUT_NUMBER_COMPONENT: ImportDef[] = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputNumberComponent' }];
-const INPUT_TEXT_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'InputTextComponent' }];
-const TEXTAREA_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input', name: 'TextareaComponent' }];
+const NUMBER_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/number', name: 'NumberComponent' }];
+const RADIOSET_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/radioset', name: 'RadiosetComponent' }];
+const SELECT_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/select', name: 'SelectComponent' }];
+const SWITCH_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/switch', name: 'SwitchComponent' }];
+const INPUT_CALENDER_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/text', name: 'InputCalendarComponent' }];
+const INPUT_COLOR_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/text', name: 'InputColorComponent' }];
+const INPUT_EMAIL_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/text', name: 'InputEmailComponent' }];
+const INPUT_NUMBER_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/text', name: 'InputNumberComponent' }];
+const INPUT_TEXT_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/text', name: 'InputTextComponent' }];
+const TEXTAREA_COMPONENT = [...NG_FORM_MODULE, { from: '@wm/components/input/textarea', name: 'TextareaComponent' }];
 // Data Components
 const CARD_ACTIONS_DIRECTIVE = [{ from: '@wm/components/data/card', name: 'CardActionsDirective' }];
-const CARD_CONTENT_COMPONENT = [{ from: '@wm/components/data/card', name: 'CardContentComponent' }];
+const CARD_CONTENT_COMPONENT = [...PARTIAL_CONTAINER, { from: '@wm/components/data/card', name: 'CardContentComponent' }];
 const CARD_FOOTER_DIRECTIVE = [{ from: '@wm/components/data/card', name: 'CardFooterDirective' }];
 const CARD_COMPONENT = [
     ...NGX_DROP_DOWN_MODULE,
@@ -130,8 +131,8 @@ const TABLE_FILTER_SORT_DIRECTIVE = [{ from: '@wm/components/data/table', name:
 const TABLE_ACTION_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableActionDirective' }];
 const TABLE_COLUMN_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableColumnDirective' }];
 const TABLE_COLUMN_GROUP_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableColumnGroupDirective' }];
-const TABLE_ROW_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableRowDirective' }];
-const TABLE_ROW_ACTION_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableRowActionDirective' }];
+const TABLE_ROW_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableRowDirective' }, ...CONTAINER_DIRECTIVE, ...PARTIAL_CONTAINER];
+const TABLE_ROW_ACTION_DIRECTIVE = [{ from: '@wm/components/data/table', name: 'TableRowActionDirective' }, ...BUTTON_COMPONENT];
 const TABLE_COMPONENT = [
     ...NG_FORM_MODULE,
     ...NG_REACTIVE_FORM_MODULE,
@@ -169,18 +170,20 @@ const FORM_COMPONENT = [
     ...LIVE_FORM_DIRECTIVE,
     { from: '@wm/components/data/form', name: 'FormComponent' }
 ];
-// Page Structure Components
-const FOOTER_DIRECTIVE = [{ from: '@wm/components/page/footer', name: 'FooterDirective' }];
-const HEADER_COMPONENT = [{ from: '@wm/components/page/header', name: 'HeaderComponent' }];
-const LEFT_PANEL_DIRECTIVE = [{ from: '@wm/components/page/left-panel', name: 'LeftPanelDirective' }];
-const RIGHT_PANEL_DIRECTIVE = [{ from: '@wm/components/page/right-panel', name: 'RightPanelDirective' }];
+const COMPOSITE_DIRECTIVE = [{ from: '@wm/components/input/composite', name: 'CompositeDirective' }, { from: '@wm/components/input/caption-position', name: 'CaptionPositionDirective' }];
+// Page Structure Components // TODO: PARTIAL_CONTAINER these needed ? appComponent has imports at root
+const FOOTER_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/page/footer', name: 'FooterDirective' }];
+const HEADER_COMPONENT = [...PARTIAL_CONTAINER, { from: '@wm/components/page/header', name: 'HeaderComponent' }];
+const LEFT_PANEL_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/page/left-panel', name: 'LeftPanelDirective' }];
+const RIGHT_PANEL_DIRECTIVE = [...PARTIAL_CONTAINER, { from: '@wm/components/page/right-panel', name: 'RightPanelDirective' }];
 const PAGE_CONTENT_COMPONENT = [{ from: '@wm/components/page', name: 'PageContentComponent' }];
+const SPA_PAGE_DIRECTIVE = [{ from: '@wm/components/page', name: 'SpaPageDirective' }];
 const LAYOUT_DIRECTIVE = [{ from: '@wm/components/page', name: 'LayoutDirective' }];
 const CONTENT_COMPONENT = [{ from: '@wm/components/page', name: 'ContentComponent' }];
 // Advanced Components
 const CAROUSEL_TEMPLATE_DIRECTIVE = [...NGX_CAROUSEL_MODULE, { from: '@wm/components/advanced/carousel', name: 'CarouselTemplateDirective' }];
 const CAROUSEL_COMPONENT = [...NGX_CAROUSEL_MODULE, ...CAROUSEL_TEMPLATE_DIRECTIVE, { from: '@wm/components/advanced/carousel', name: 'CarouselDirective' }];
-const CHART_COMPONENT = [{ from: '@wm/components/chart', name: 'ChartComponent' }];
+const CHART_COMPONENT = [{ from: '@wm/components/chart', name: 'ChartComponent' }, { from: '@wm/components/base', name: 'RedrawableDirective' }];
 const CUSTOM_WIDGET_CONTAINER_DIRECTIVE = [{ from: '@wm/components/advanced/custom', name: 'CustomWidgetContainerDirective' }];
 const CUSTOM_WIDGET_DIRECTIVE = [...CUSTOM_WIDGET_CONTAINER_DIRECTIVE, { from: '@wm/components/advanced/custom', name: 'CustomWidgetDirective' }];
 const LOGIN_COMPONENT = [{ from: '@wm/components/advanced/login', name: 'LoginComponent' }];
@@ -189,6 +192,18 @@ const PREFAB_CONTAINER_DIRECTIVE = [{ from: '@wm/components/prefab', name: 'Pref
 const PREFAB_DIRECTIVE = [{ from: '@wm/components/prefab', name: 'PrefabDirective' }];
 const RICH_TEXT_EDITOR_COMPONENT = [{ from: '@wm/components/basic/rich-text-editor', name: 'RichTextEditorComponent' }];
 const TREE_COMPONENT = [{ from: '@wm/components/basic/tree', name: 'TreeComponent' }];
+const ACCESSROLES_DIRECTIVE = [{ from: '@wm/runtime/base', name: 'AccessrolesDirective' }];
+const SHOW_IN_DEVICE_DIRECTIVE = [{ from: '@wm/components/base', name: 'ShowInDeviceDirective' }];
+const LAZY_LOAD_DIRECTIVE = [{ from: '@wm/components/base', name: 'LazyLoadDirective' }];
+// Pipes
+const TO_DATE_PIPE = [{ from: '@wm/components/base', name: 'ToDatePipe' }];
+const TO_CURRENCY_PIPE = [{ from: '@wm/components/base', name: 'ToCurrencyPipe' }];
+const NUMBER_TO_STRING_PIPE = [{ from: '@wm/components/base', name: 'NumberToStringPipe' }];
+const STRING_TO_NUMBER_PIPE = [{ from: '@wm/components/base', name: 'StringToNumberPipe' }];
+const TIME_FROM_NOW_PIPE = [{ from: '@wm/components/base', name: 'TimeFromNowPipe' }];
+const PREFIX_PIPE = [{ from: '@wm/components/base', name: 'PrefixPipe' }];
+const SUFFIX_PIPE = [{ from: '@wm/components/base', name: 'SuffixPipe' }];
+const CUSTOM_PIPE = [{ from: '@wm/components/base', name: 'CustomPipe' }];
 const WIDGET_IMPORTS = new Map([
     ['wm-accordion', ACCORDION_DIRECTIVE],
     ['wm-accordionpane', ACCORDION_PANE_COMPONENT],
@@ -212,11 +227,14 @@ const WIDGET_IMPORTS = new Map([
     ['wm-chips', CHIPS_COMPONENT],
     ['wm-colorpicker', COLOR_PICKER_COMPONENT],
     ['wm-confirmdialog', CONFIRM_DIALOG_COMPONENT],
+    ['wm-container', CONTAINER_DIRECTIVE],
+    ['wm-param', PARTIAL_PARAM_DIRECTIVE],
     ['wm-content', CONTENT_COMPONENT],
     ['wm-currency', CURRENCY_COMPONENT],
     ['wm-date', DATE_COMPONENT],
     ['wm-datetime', DATE_TIME_COMPONENT],
     ['wm-dialog', DESIGN_DIALOG_COMPONENT],
+    ['wm-dialogactions', DIALOGACTIONS_DIRECTIVE],
     ['wm-footer', FOOTER_DIRECTIVE],
     ['wm-form', FORM_COMPONENT],
     ['wm-form-action', FORM_ACTION_DIRECTIVE],
@@ -231,6 +249,7 @@ const WIDGET_IMPORTS = new Map([
     ['wm-iframe', IFRAME_COMPONENT],
     ['wm-iframedialog', IFRAME_DIALOG_COMPONENT],
     ['wm-label', LABEL_COMPONENT],
+    ['wm-layout', LAYOUT_DIRECTIVE],
     ['wm-layoutgrid', LAYOUT_GRID_DIRECTIVE],
     ['wm-left-panel', LEFT_PANEL_DIRECTIVE],
     ['wm-linearlayout', LINEAR_LAYOUT_DIRECTIVE],
@@ -239,16 +258,19 @@ const WIDGET_IMPORTS = new Map([
     ['wm-livetable', LIVE_TABLE_COMPONENT],
     ['wm-login', LOGIN_COMPONENT],
     ['wm-custom', CUSTOM_WIDGET_DIRECTIVE],
+    ['wm-custom-widget', CUSTOM_WIDGET_DIRECTIVE],
     ['wm-logindialog', LOGIN_DIALOG_DIRECTIVE],
     ['wm-marquee', MARQUEE_DIRECTIVE],
     ['wm-menu', MENU_COMPONENT],
+    ['wm-message', MESSAGE_COMPONENT],
     ['wm-nav', NAV_COMPONENT],
     ['wm-navbar', NAVBAR_COMPONENT],
     ['wm-nav-item', NAV_ITEM_DIRECTIVE],
     ['wm-number', NUMBER_COMPONENT],
+    ['wm-partial', PARTIAL_DIRECTIVE],
     ['wm-page', PAGE_COMPONENT],
-    ['wm-layout', LAYOUT_DIRECTIVE],
     ['wm-page-content', PAGE_CONTENT_COMPONENT],
+    ['spa-page-content', SPA_PAGE_DIRECTIVE],
     ['wm-pagedialog', PARTIAL_DIALOG_COMPONENT],
     ['wm-pagination', PAGINATION_COMPONENT],
     ['wm-panel', PANEL_COMPONENT],
@@ -271,7 +293,7 @@ const WIDGET_IMPORTS = new Map([
     ['wm-table', TABLE_COMPONENT],
     ['wm-tabs', TABS_COMPONENT],
     ['wm-tabpane', TAB_PANE_COMPONENT],
-    ['wm-text', INPUT_TEXT_COMPONENT],
+    ['wm-text', [...INPUT_TEXT_COMPONENT, ...INPUT_CALENDER_COMPONENT, ...INPUT_COLOR_COMPONENT, ...INPUT_EMAIL_COMPONENT, ...INPUT_NUMBER_COMPONENT]],
     ['wm-textarea', TEXTAREA_COMPONENT],
     ['wm-time', TIME_COMPONENT],
     ['wm-tile', TILE_DIRECTIVE],
@@ -280,6 +302,19 @@ const WIDGET_IMPORTS = new Map([
     ['wm-video', VIDEO_COMPONENT],
     ['wm-wizard', WIZARD_COMPONENT],
     ['wm-wizardstep', WIZARD_COMPONENT],
+    ['wm-repeat-template', REPEAT_TEMPLATE_DIRECTIVE],
+    ['wm-composite', COMPOSITE_DIRECTIVE],
+    ['accessroles', ACCESSROLES_DIRECTIVE],
+    ['showindevice', SHOW_IN_DEVICE_DIRECTIVE],
+    ['lazyload', LAZY_LOAD_DIRECTIVE],
+    ['toDate', TO_DATE_PIPE],
+    ['toCurrency', TO_CURRENCY_PIPE],
+    ['numberToString', NUMBER_TO_STRING_PIPE],
+    ['stringToNumber', STRING_TO_NUMBER_PIPE],
+    ['timeFromNow', TIME_FROM_NOW_PIPE],
+    ['prefix', PREFIX_PIPE],
+    ['suffix', SUFFIX_PIPE],
+    ['custom', CUSTOM_PIPE],
 ]);
 
 const CSS_REGEX = {
@@ -567,12 +602,15 @@ const processNode = (node, importCollector, providers) => {
                 child.attrs.forEach(function (attr) {
                     if (attr.name === 'showindevice') {
                         showInDeviceAttr = attr;
+                        importCollector(WIDGET_IMPORTS.get("showindevice"));
                     }
                     else if (attr.name === 'accessroles') {
                         accessRolesAttr = attr;
+                        importCollector(WIDGET_IMPORTS.get('accessroles'));
                     }
                     else if (attr.name === 'deferload') {
                         deferLoadAttr = attr;
+                        importCollector(WIDGET_IMPORTS.get('lazyload'));
                     }
                     else if (attr.name === 'show') {
                         showAttr = attr;