fix: Removed hardcoded library name from module component (#1575)

* Remove hardcoded library name from module component

* Change creation of component documents

NEW_COMPONENT.md

@@ -90,7 +90,7 @@ In poster-header.component.html Copy/paste the code here:
 <description>
     <p>The poster shows an image</p>
 </description>
-<import module="PosterModule" path="fundamental-ngx"></import>
+<import module="PosterModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

NEW_PLATFORM_COMPONENT.md

@@ -113,7 +113,7 @@ In poster-header.component.html Copy/paste the code here:
 <description>
     <p>The poster shows an image</p>
 </description>
-<import module="PosterModule" path="fundamental-ngx/platform"></import>
+<import module="PosterModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/action-bar/action-bar-header/action-bar-header.component.html

@@ -1,8 +1,7 @@
 <header>Action Bar</header>
 <description>The Action Bar is located at the top of the page and is used for Page title and Main Actions for the page.
 </description>
-<import module="ActionBarModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ActionBarModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/alert/alert-header/alert-header.component.html

@@ -1,7 +1,6 @@
 <header>Alert</header>
 <description>Alerts are used to display short messages that require user attention.</description>
-<import module="AlertModule"
-        path="@fundamental-ngx/core"></import>
+<import module="AlertModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/badge-label/badge-label-header/badge-label-header.component.html

@@ -8,8 +8,7 @@
     <p> - Orange can be used for a warning status or to indicate that an action can be taken</p>
     <p> - Red indicates error status</p>
 </description>
-<import module="BadgeLabelModule"
-        path="@fundamental-ngx/core"></import>
+<import module="BadgeLabelModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/breadcrumb/breadcrumb-header/breadcrumb-header.component.html

@@ -10,8 +10,7 @@
     <code>[attr.href]</code> attribute.
 
 </description>
-<import module="BreadcrumbModule"
-        path="@fundamental-ngx/core"></import>
+<import module="BreadcrumbModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/button-group/button-group-header/button-group-header.component.html

@@ -4,8 +4,7 @@
     <br /><br />
     Buttons in a button group can be navigated to via the tab key and pressed with the space bar or enter key.
 </description>
-<import module="ButtonGroupModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ButtonGroupModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/button/button-header/button-header.component.html

@@ -4,8 +4,7 @@
     <br /><br />
     Buttons can be navigated to via the tab key and pressed with the space bar or enter key.
 </description>
-<import module="ButtonModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ButtonModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/calendar/calendar-header/calendar-header.component.html

@@ -9,8 +9,7 @@
     into the day/month/year selection grid and use the arrow keys to navigate around the grid and make a selection with
     the space bar or enter key.
 </description>
-<import module="CalendarModule"
-        path="@fundamental-ngx/core"></import>
+<import module="CalendarModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/checkbox/checkbox-header/checkbox-header.component.html

@@ -4,8 +4,7 @@
     disabled and also displayed in a row. <br />Checkboxes are keyboard navigable via the tab key and selected with
     the space bar.
 </description>
-<import module="FormModule"
-        path="@fundamental-ngx/core"></import>
+<import module="FormModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/combobox/combobox-header/combobox-header.component.html

@@ -3,8 +3,7 @@
     The combobox component is an opinionated composition of the input-group and popover components to
     accomplish the UI pattern of an autocomplete-like experience, also known as combobox input.
 </description>
-<import module="ComboboxModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ComboboxModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/date-picker/date-picker-header/date-picker-header.component.html

@@ -6,8 +6,7 @@
     The date picker supports the same keyboard navigability as the calendar. The calendar can be opened by focusing the
     date picker input field and closed by focusing the calendar icon button and pressing enter or space.
 </description>
-<import module="DatePickerModule"
-        path="@fundamental-ngx/core"></import>
+<import module="DatePickerModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/datetime-picker/datetime-picker-header/datetime-picker-header.component.html

@@ -9,8 +9,7 @@
     <br /><br />
     Fully compatible with Angular forms.
 </description>
-<import module="DatetimePickerModule"
-        path="@fundamental-ngx/core"></import>
+<import module="DatetimePickerModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/file-input/file-input-header/file-input-header.component.html

@@ -5,8 +5,7 @@
     The aim is to facilitate the use and styling of the native file input. The projected content can have a file dragged
     and dropped over.
 </description>
-<import module="FileInputModule"
-        path="@fundamental-ngx/core"></import>
+<import module="FileInputModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/icon/icon-header/icon-header.component.html

@@ -2,8 +2,7 @@
 <description>Icons are used throughout the UI to save space, allow for visual clarity and focus, and for fun. Icons can
     be used adaptively
     if desired, but at this point they are used more as visual elements within other components.</description>
-<import module="IconModule"
-        path="@fundamental-ngx/core"></import>
+<import module="IconModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/identifier/identifier-header/identifier-header.component.html

@@ -1,7 +1,6 @@
 <header>Identifier</header>
 <description>Identifier is a way to visually present something using an icon or user initials.</description>
-<import module="IdentifierModule"
-        path="@fundamental-ngx/core"></import>
+<import module="IdentifierModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/image/image-header/image-header.component.html

@@ -1,7 +1,6 @@
 <header>Image</header>
 <description>When using images you can use our helpers classes to adjust the size and the shape.</description>
-<import module="ImageModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ImageModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/infinite-scroll/infinite-scroll-header/infinite-scroll-header.component.html

@@ -8,9 +8,8 @@
     directive is attached to. It then monitors the scrolling and emits an event when the inputted percentage value is
     reached.
 </description>
-<import module="InfiniteScrollModule"
-        path="@fundamental-ngx/core"></import>
+<import module="InfiniteScrollModule"></import>
 
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/inline-help/inline-help-header/inline-help-header.component.html

@@ -1,8 +1,7 @@
 <header>Inline Help</header>
 <description>Inline help is used to display help text in a popover, often inline with headers, body text and form
     labels. It also uses the fd-popover component and supports much of its functionality.</description>
-<import module="InlineHelpModule"
-        path="@fundamental-ngx/core"></import>
+<import module="InlineHelpModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/input-group/input-group-header/input-group-header.component.html

@@ -1,8 +1,7 @@
 <header>Input Group</header>
 <description>The Input groups component are form inputs with add-ons that allows the user to better understand the
     information been entered.</description>
-<import module="InputGroupModule"
-        path="@fundamental-ngx/core"></import>
+<import module="InputGroupModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/input/input-header/input-header.component.html

@@ -1,6 +1,5 @@
 <header>Input</header>
-<import module="FormModule"
-        path="@fundamental-ngx/core"></import>
+<import module="FormModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/layout-grid/layout-grid-docs-header/layout-grid-docs-header.component.html

@@ -1,7 +1,6 @@
 <header>Layout Grid</header>
 <description>Use a layout grid to arrange components evenly in a grid layout.</description>
-<import module="LayoutGridModule"
-        path="@fundamental-ngx/core"></import>
+<import module="LayoutGridModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/list/list-header/list-header.component.html

@@ -6,8 +6,7 @@
     <code>[attr.href]</code> attributes. List action buttons and checkboxes can be navigated via the tab key. List
     checkboxes can be selected with the space bar.
 </description>
-<import module="ListModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ListModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/loading-spinner-docs/loading-spinner-header/loading-spinner-header.component.html

@@ -3,8 +3,7 @@
     A loading spinner informs the user of an ongoing operation. Only one busy indicator should be shown at a time. The
     <code>loading</code> input on the component is used to hide and show the element.
 </description>
-<import module="LoadingSpinnerModule"
-        path="@fundamental-ngx/core"></import>
+<import module="LoadingSpinnerModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/localization-editor/localization-editor-header/localization-editor-header.component.html

@@ -3,8 +3,7 @@
     The localization editor is used to translate text into a number of languages.
     It promotes spatial efficiency through the use of the popover component under the hood.
 </description>
-<import module="LocalizationEditorModule"
-        path="@fundamental-ngx/core"></import>
+<import module="LocalizationEditorModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/mega-menu/mega-menu-header/mega-menu-header.component.html

@@ -3,8 +3,7 @@
     Mega Menu is extended menu component, which contains sub lists. The Mega Menu component provides fully keyboard
     support. Arrow Left and Arrow Right opens/closes sublist.
 </description>
-<import module="MegaMenuModule"
-        path="@fundamental-ngx/core"></import>
+<import module="MegaMenuModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/menu/menu-header/menu-header.component.html

@@ -3,8 +3,7 @@
     Menu item anchors will be keyboard navigable via the tab key provided they have <code>[routerLink]</code> or
     <code>[attr.href]</code> attributes.
 </description>
-<import module="MenuModule"
-        path="@fundamental-ngx/core"></import>
+<import module="MenuModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/modal/modal-docs-header/modal-docs-header.component.html

@@ -4,8 +4,7 @@
     simple information with a short form, to get confirmation or display contextual information
     that does not require a page.
 </description>
-<import module="ModalModule"
-        path="@fundamental-ngx/core"></import>
+<import module="ModalModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/multi-input/multi-input-header/multi-input-header.component.html

@@ -3,8 +3,7 @@
     Input field with multiple selection enabled. Should be used when a user can select between a limited number of
     pre-defined options with a filter-enabled context.
 </description>
-<import module="MultiInputModule"
-        path="@fundamental-ngx/core"></import>
+<import module="MultiInputModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/notification/notification-docs-header/notification-docs-header.component.html

@@ -4,8 +4,7 @@
     information,
     gives possibility to somehow answer to this information or gather more information, by redirecting to the action.
 </description>
-<import module="NotificationModule"
-        path="@fundamental-ngx/core"></import>
+<import module="NotificationModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/pagination/pagination-header/pagination-header.component.html

@@ -7,8 +7,7 @@
     Pages can be selected programmatically by calling the <code>goToPage(pageNumber)</code> function on the pagination
     component.
 </description>
-<import module="PaginationModule"
-        path="@fundamental-ngx/core"></import>
+<import module="PaginationModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/panel/panel-docs-header/panel-docs-header.component.html

@@ -1,7 +1,6 @@
 <header>Panel</header>
 <description>The Panel is a layout component that serves many formatting purposes.</description>
-<import module="PanelModule"
-        path="@fundamental-ngx/core"></import>
+<import module="PanelModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/popover-directive/popover-directive-header/popover-directive-header.component.html

@@ -9,8 +9,7 @@
         alternative.
     </p>
 </description>
-<import module="PopoverModule"
-        path="@fundamental-ngx/core"></import>
+<import module="PopoverModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/popover/popover-header/popover-header.component.html

@@ -16,8 +16,7 @@
         Fundamental-ngx popovers use <a href="https://popper.js.org/index.html">Popper.js.</a>
     </p>
 </description>
-<import module="PopoverModule"
-        path="@fundamental-ngx/core"></import>
+<import module="PopoverModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>