SharedUI

This library was generated with Angular CLI version 19.2.15.

Code scaffolding

Run ng generate component component-name --project SharedUI to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project SharedUI.

Note: Don't forget to add --project SharedUI or else it will be added to the default project in your angular.json file.

Build

Run ng build SharedUI to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build SharedUI, go to the dist folder cd dist/shared-ui and run npm publish.

Running unit tests

Run ng test SharedUI to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Sky Components UI

This package is generic shared components with default theme used in Sky software company, you can find in first installation the below components:

1. Alert Toast.
2. Card view.
3. Confirmation Popup
4. Errors popup
5. Footer/ Popup action buttons and error label
6. Pager control
7. Tab control
8. Session Expiry popup.
9. Uploader Documents control
10. Wizard
11. Section Divider Component
12. Attachment Popup Component 13.Attachment Hyperlink Component

Installation

Use npm to install this package by command: @skysoftware-co/sky-components-ui

Alert Toast Component

Usage

<sky-alert-toast></sky-alert-toast>

This component is used to show alert toast messages with different alert types:

1. success
2. error
3. warning
4. Unset

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | toastTimer | number | 10000 | Timer duration for toast display | | width | string | '100%' | Width of the toast | | heigth | string | '50px' | Height of the toast | | maxWidth | string | '80%' | Maximum width | | minWidth | string | '39%' | Minimum width |

Output Events

• notifyMessage - Handle notification message events

Card View Component

Usage

<sky-card-view></sky-card-view>

This component displays cards with different content by passing specific templates and can show pager based on input.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | showPager | boolean | true | Show or hide pager | | showOneCardPerRow | boolean | false | Display one card per row | | showTwoCardPerRow | boolean | false | Display two cards per row | | showThreeCardPerRow | boolean | false | Display three cards per row | | showFourCardPerRow | boolean | false | Display four cards per row | | activeMinHeight | boolean | false | Override minimum height of container | | items | any[] | - | Data source for the component | | totalItems | number | - | Total number of items for pager | | cardTemplate | TemplateRef | - | Template for each card | | isDragable | boolean | false | Enable drag and drop for cards | | isDisabled | boolean | false | Disable the card | | emptyStyle | SkyEmptyStyle | { dataText: 'NoDataToDisplay', fontAwesomeIcon: undefined } | Empty state styling | | removeCardYaxisMargin | boolean | false | Remove Y-axis margin | | removeCardXaxisMargin | boolean | false | Remove X-axis margin | | removeContainerPadding | boolean | false | Remove container padding | | removeCardBorder | boolean | false | Remove card border | | removeCardShadow | boolean | false | Remove card shadow | | removeCardHover | boolean | false | Remove card hover | | showTopBorder | boolean | false | Show top border | | useContainer | boolean | true | Use container wrapper | | useCardBody | boolean | true | Use card body wrapper | | itemsPerPageLabel | string | 'Page Size' | Label for page size options | | showExtraEmptyButton | boolean | false | Use to show extra empty button | | extraEmptyButtonIcon | IconDefinition | null | faPlusCircle | Extra empty button icon | | extraEmptyButtonDescription | string | `` | Extra empty button description | | extraEmptyButtonIconClass | string | fs-5 me-1 text-primary | Extra empty button icon class | | extraEmptyButtonDescriptionClass | string | text-primary fs-16 fw-medium | extra empty button description class | | roundedClass | string | rounded rounded-3 | rounded class |

Output Events

• pageChange: EventEmitter<PageEvent> - Page change event
• dragDrop: EventEmitter<any> - Drag and drop event
• onScrollStart: EventEmitter - Scroll start event
• onScrollStop: EventEmitter - Scroll stop event
• onExtraEmptyButtonClickHandlr: EventEmitter - Handles the click event on the extra empty button

Confirmation Popup Component

Usage

<sky-confirmation-popup></sky-confirmation-popup>

Common component for delete popups, warning popups, or action popups with message and footer actions.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | popupVisible | boolean | false | Show/hide confirmation popup | | shadingColor | string | 'rgba(0,0,0,0.4)' | Popup shadow color | | popupTitle | string | '' | Popup header title | | showCloseButton | boolean | false | Show/hide close button in header | | isPageLoading | boolean | false | Loading state | | confirmationMessage | string | '' | Confirmation body message | | confirmationButtonText | string | 'Continue' | Main action button text | | cancelButtonText | string | 'Discard' | Secondary action button text | | errorLabel | string | 'Error' | Error label text | | errorMessage | signal | signal('') | Error message content | | confirmationMessageClass | string | object | 'text-wrap sky-text-dark-gray sky-card-text-sm' | Confirmation message CSS classes | | confirmationButtonClass | string | object | 'sky-btn-width fw-medium sky-fs-14' | Confirm button CSS classes | | closeButtonClass | string | object | 'sky-btn-width fw-medium sky-fs-14' | Close button CSS classes | | errorMessageContainerClass | string | object | 'flex-grow-1 mt-2 text-white bg-danger p-2 rounded text-wrap w-100' | Error container CSS classes | | marginClass | string | 'mt-3' | Margin container CSS classes | | confirmationButtonHeight | string | object | '30' | Confirmation button height | | closeButtonHeight | string | object | '30' | Close button height | | height | string | number | 'auto' | Popup height | | minWidth | string | number | '200' | Minimum popup width | | maxWidth | string | number | '700' | Maximum popup width | | width | string | number | 'auto' | Popup width | | confirmationButtonType | ButtonType | 'default' | Confirmation button type | | cancelButtonType | ButtonType | 'normal' | Cancel button type | | confirmationTemplate | TemplateRef | - | Confirmation template | | confirmationContentTemplate | TemplateRef | - | Confirmation content template |

Output Events

• onConfirmed: EventEmitter<any> - Confirm button click event
• onClosed: EventEmitter<any> - Close button click event
• onShowing: EventEmitter<any> - Popup showing event

Errors Popup Component

Usage

<sky-errors-popup></sky-errors-popup>

Component to show error popup with error message and danger icon in header.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | popupVisable | boolean | false | Show/hide popup | | popupHeight | string | 'auto' | Popup height | | popupWidth | string | '600' | Popup width | | showTitle | boolean | false | Show/hide title | | shadingColor | string | 'rgba(0,0,0,0.4)' | Shadow color | | errorsList | string[] | [] | List of errors to display | | errorLabel | string | 'Errors' | Error label text | | showCloseButton | boolean | true | Show/hide close button | | secondaryButtonText | string | 'Dismiss' | Secondary button text |

Output Events

• onClosePopupClick: EventEmitter - Close popup click event

Pager Control Component

Usage

<sky-pager-control></sky-pager-control>

Common pager control component with Angular Material built-in component and default theme color.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | showPager | boolean | true | Show/hide pager | | totalItems | number | - | Total items count | | showFirstLastButtons | boolean | false | Show first/last page buttons | | hidePageSize | boolean | false | Hide page size dropdown | | useContainer | boolean | true | Use container wrapper | | itemsPerPageLabel | string | 'Page Size' | Items per page label | | defaultPageSize | number | 20 | Default page size | | pageSizeOptions | number[] | [10, 20, 50, 100, 200, 500] | Page size options |

Output Events

• pageChange: EventEmitter<PageEvent> - Page change event

Tab Control Component

Usage

<sky-tab-control></sky-tab-control>

Common tab control component with tab text, icon, and count display.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | tabItems | SkyTabItem[] | [] | Tab items data source | | hideTab | boolean | false | Hide specific tab based on condition | | backgroundUnSelectdButtonClass | string | 'sky-bg-gray' | Unselected tab background class | | backgroundSelectedButtonClass | string | 'sky-btn-light' | Selected tab background class |

Output Events

• onTabClicked: EventEmitter<number> - Tab click event

Upload Document Component

Usage

<sky-upload-document></sky-upload-document>

Component for uploading documents or viewing existing documents with view/download functionality.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | labelText | string | '' | Document label caption | | readOnly | boolean | false | View files without upload capability | | showMediumSize | boolean | false | Show medium size display | | hideUploader | boolean | false | Show/hide uploader control | | handleFailedUploadedMessage | boolean | false | Override failed upload message | | progressVisible | boolean | false | Show progress bar during upload | | uploaderVisible | boolean | false | Show/hide uploader area | | multipleDocument | boolean | false | Allow multiple file upload | | AttachmentsSources | string[] | [] | List of attachment base64 strings | | Attachments | SkyAttachments[] | [] | List of attachment contracts | | labelTextClass | string | object | 'sky-fs-14 fw-medium sky-text-dark-gray' | Label text CSS classes | | labelTextContainerClass | string | object | 'd-flex align-items-center mt-4' | Label container CSS classes | | imageContainerClass | string | object | Dynamic based on size | Image container CSS classes | | dropzoneClass | object | Dynamic based on size | Dropzone CSS classes | | imagWidth | string | object | '230px' | Image width | | imagHeight | string | object | '171px' | Image height | | progressBarWidth | string | '30%' | Progress bar width | | mainText | string | 'Upload a file' | Main upload text | | extraText | string | 'or drag and drop' | Additional upload text | | duplicateUploadErrorMessage | string | 'Document file already uploaded' | Duplicate file error message | | supportTypeErrprMessage | string | 'The selected file type is not allowed please choose a file with supported type' | Unsupported type error | | sizeErrorMessage | string | 'The selected file exceeds the maximum size limit of 4MB please choose A smaller file' | Size limit error message | | maxFileSizeText | string | 'up to 4MB' | Max file size text | | emptyText | string | 'No data to display' | Empty state text | | allowedFileTypes | string[] | ['application/pdf', 'image/jpeg', 'image/png', 'image/gif', 'image/jpg'] | Allowed file types | | maxFileSize | number | 4 * 1024 * 1024 | Maximum file size in bytes | | minProgressBar | number | 0 | Minimum progress bar percentage | | maxProgressBar | number | 100 | Maximum progress bar percentage |

Output Events

• onUploadFailed: EventEmitter<string> - Upload failed event
• onClearUploadMessage: EventEmitter<string> - Clear upload message event
• onFileUploaded: EventEmitter<any> - File uploaded event
• onDeleteAttachment: EventEmitter<any> - Delete attachment event
• onViewAttachment: EventEmitter<any> - View attachment event
• onDownloadAttachment: EventEmitter<any> - Download attachment event

Footer/Popup Action Component

Usage

<sky-footer-actions></sky-footer-actions>

Common component for popup footer or screen footer with three button actions:

1. Primary button (Save, Continue)
2. Secondary button (Don't save, Discard)
3. Extra primary button (Save and new)

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | primaryButtonText | string | 'Save' | Primary button text | | extraButtonText | string | 'Save and new' | Extra button text | | secondaryButtonText | string | 'Cancel' | Secondary button text | | primaryButtonWidth | string | 'auto' | Primary button width | | secondaryButtonWidth | string | 'auto' | Secondary button width | | extraButtonWidth | string | 'auto' | Extra button width | | isFillRowWidth | boolean | false | Fill row width | | primaryButtonHeight | string | '30' | Primary button height | | secondaryButtonHeight | string | '30' | Secondary button height | | extraButtonHeight | string | '30' | Extra button height | | showPrimaryButton | boolean | true | Show primary button | | showSecondaryButton | boolean | true | Show secondary button | | showExtraButton | boolean | false | Show extra button | | primaryButtonType | ButtonType | 'default' | Primary button type | | secondaryButtonType | ButtonType | 'normal' | Secondary button type | | extraButtonType | ButtonType | 'normal' | Extra button type | | disabledPrimaryButton | boolean | false | Disable primary button | | disabledSecondaryButton | boolean | false | Disable secondary button | | disabledExtraButton | boolean | false | Disable extra button | | primarySubmitBehavior | boolean | true | Primary button submit behavior | | secondarySubmitBehavior | boolean | false | Secondary button submit behavior | | extraSubmitBehavior | boolean | false | Extra button submit behavior | | primaryButtonClass | string | object | '' | Primary button CSS classes | | secondaryButtonClass | string | object | '' | Secondary button CSS classes | | extraButtonClass | string | object | '' | Extra button CSS classes | | formValidationGroup | any | - | Form validation group | | validatePrimaryAction | boolean | true | Validate primary action | | validateExtraAction | boolean | true | Validate extra action | | isLoading | boolean | false | Loading state | | loadingText | string | 'Saving' | Loading text | | disabled | boolean | false | Disabled state | | EditMode | SkyActionMode | SkyActionMode.None | Edit mode type | | showErrorLabel | boolean | true | Show error label | | errorMessage | signal | signal('') | Error message | | errorLabel | string | 'Error' | Error label text | | successMessage | signal | signal('') | Success message | | closeButtonClass | string | object | 'sky-text-2xs text-white mx-2 sky-btn-close btn-close-white' | Close button CSS classes |

Output Events

• PrimaryButtonClick: EventEmitter<any> - Primary button click event
• SecondaryButtonClick: EventEmitter<any> - Secondary button click event
• ExtraButtonClick: EventEmitter<any> - Extra button click event

Session Expiry Popup Component

Usage

<sky-session-expiry-popup></sky-session-expiry-popup>

This component shows a session expiry warning popup when the session is about to end or has expired. By default, it appears 5 minutes before expiration. You can customize the timing and functionality using the inputs below.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | modalIcon | any | faTriangleExclamation | Icon for the popup header | | showModal | boolean | false | Show popup as modal with background shadow | | isExpired | boolean | false | Override if session is expired to control warning message | | timeLeft | string | '00:00' | Override time remaining until session expires | | timeLabel | string | 'Minutes' | Override time unit label (Minutes, Seconds, etc.) | | logoutLabel | string | 'Logout' | Text for logout button | | extendLabel | string | 'Extend' | Text for extend session button | | backToLoginLabel | string | 'Back to Login' | Text for back to login button | | mainHeaderText | string | 'Your session is about to expire within' | Header text when session is expiring | | expiredHeaderText | string | 'Your session Has been expired' | Header text when session has expired | | loginMessage | string | 'You need to login again' | Message for expired sessions | | backToLoginButtonClass | string | object | 'btn sky-btn-primary me-3 text-white' | CSS classes for back to login button | | extendButtonClass | string | object | 'btn sky-btn-primary me-3 text-white' | CSS classes for extend button | | logoutButtonClass | string | object | 'btn sky-btn-light text-dark' | CSS classes for logout button |

Wizard Component

Usage

<sky-wizard></sky-wizard>

A responsive wizard component that displays a multi-step process with visual indicators. The component shows progress through numbered steps with labels, includes scroll functionality for long step lists, and supports both LTR and RTL layouts.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | activeTab | number | 1 | Current active step number (1-based index) | | isRtl | boolean | false | Enable right-to-left layout support | | isTabClickEnabled | boolean | false | Enable circle step click | | steps | SkyWisard[] | [] | Array of wizard step configurations | | scrollLeftBtnClass | string | object | 'btn btn-sm btn-white position-absolute start-0 z-3' | CSS classes for left scroll button | | scrollRightBtnClass | string | object | 'btn btn-sm btn-white border-0 position-absolute end-0 z-3' | CSS classes for right scroll button | | scrollIconClass | string | object | 'fs-16 text-dark' | CSS classes for scroll button icons | | wizardStepLineClass | string | 'sky-wizard-step' | CSS class for the connecting line between steps | | activeStepClass | string | 'bg-gray border-white' | CSS classes for the active step circle | | compeleteStepClass | string | 'bg-primary border-white' | CSS classes for completed step circles | | inCompeleteStepClass | string | 'bg-white border-light' | CSS classes for incomplete step circles | | circleTextCompeleteStepClass | string | 'fs-18 text-white' | CSS classes for text in completed step circles | | circleTextActiveStepClass | string | 'fs-18 text-primary' | CSS classes for text in active step circle | | circleTextInCompeleteStepClass | string | 'fs-18 text-light-gray' | CSS classes for text in incomplete step circles | | activeStepTextClass | string | 'fs-14 text-primary' | CSS classes for active step label text | | inActiveStepTextClass | string | 'fs-14 text-black' | CSS classes for inactive step label text |

Output Events

• onWizardTabClicked: EventEmitter<number> - Wizard tab click event

When isTabClickEnabled is set to true, users can click on any wizard tab (step) directly. When a tab is clicked, the component emits this event with the index of the clicked tab to the parent component. The parent component can then handle this event to determine whether the tab can be opened (for example, by validating form data or checking completion state).

Navigation

The wizard component provides flexible navigation options:

Tab Click Navigation

• Set isTabClickEnabled to true to allow users to click directly on wizard steps
• Handle the onWizardTabClicked event in your parent component to validate and control navigation
• You can check form validity, completion status, or any custom logic before allowing navigation

Programmatic Navigation

• Manage the steps array in your parent component to control which step is active
• Set isActive, isCompleted properties on step objects to update the wizard state
• Implement Next/Previous button handlers in your parent component that update step states based on your business logic

Example Navigation Handlers (Parent Component)

The parent component can implement navigation methods to move between wizard steps:

onNextButtonClick() {
  const activeIndex = this.steps.findIndex(s => s.isActive);
  if (activeIndex < this.steps.length - 1) {
    this.steps[activeIndex].isActive = false;
    this.steps[activeIndex].isCompleted = true;
    this.steps[activeIndex + 1].isActive = true;
  }
}

onPrevButtonClick() {
  const activeIndex = this.steps.findIndex(s => s.isActive);
  if (activeIndex > 0) {
    this.steps[activeIndex].isActive = false;
    this.steps[activeIndex - 1].isActive = true;
    this.steps[activeIndex - 1].isCompleted = false;
  }
}

Section Divider Component

Usage

<sky-section-divider></sky-section-divider>

A horizontal divider component with optional text label and icon. Useful for visually separating sections of content with descriptive headers. The divider line extends horizontally with the text/icon positioned below it on the left side.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | text | string | '' | Text label displayed below the divider line | | fontAwesomeIcon | any | undefined | FontAwesome icon displayed before the text | | textClass | string | object | 'fs-14 fw-normal sky-text-light-gray text-uppercase' | CSS classes for the text label | | dividerClass | string | object | 'hr sky-text-light-gray' | CSS classes for the horizontal divider line | | iconClass | string | object | '' | CSS classes for the FontAwesome icon |

Output Events

None

Examples

Basic divider with text only:

<sky-section-divider [text]="'Contact Information'"></sky-section-divider>

Divider with icon and text:

<sky-section-divider 
  [text]="'Personal Details'" 
  [fontAwesomeIcon]="faUser">
</sky-section-divider>

Divider with custom styling:

<sky-section-divider 
  [text]="'Important Section'" 
  [textClass]="'fs-16 fw-bold text-primary'"
  [dividerClass]="'border-primary'">
</sky-section-divider>

Divider with icon only:

<sky-section-divider [fontAwesomeIcon]="faInfoCircle"></sky-section-divider>

Attachment Popup Component

Usage

<sky-attachment-popup></sky-attachment-popup>

A popup component for displaying and managing document attachments. Works with the Upload Document component to show attachments in a modal dialog with customizable dimensions and messages.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | attachmentsSources | string[] | [] | Array of attachment base64 strings | | title | string | '' | Popup title | | heghit | string | number | 'auto' | Popup height | | maxWidth | string | number | '800' | Maximum popup width | | minWidth | string | number | '600' | Minimum popup width | | openAttachmentPopup | boolean | false | Show/hide the popup | | readOnly | boolean | true | Display attachments in read-only mode | | Attachments | SkyAttachments[] | [] | Array of attachment objects | | emptyTextUploder | string | 'No data to display' | Text shown when no attachments | | mainTextUploder | string | 'Upload a file' | Main upload text | | extraTextUploder | string | 'or drag and drop' | Additional upload text | | duplicateUploadErrorMessage | string | 'Document file already uploaded' | Duplicate file error message | | supportTypeErrprMessage | string | 'The selected file type is not allowed please choose a file with supported type' | Unsupported file type error message | | sizeErrorMessage | string | 'The selected file exceeds the maximum size limit of 4MB please choose a smaller file' | File size error message | | maxFileSizeText | string | 'Up to 4MB' | Maximum file size text | | allowedFileTypes | string[] | ['application/pdf', 'image/jpeg', 'image/png', 'image/gif', 'image/jpg', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx 'application/vnd.ms-excel'] | Allowed file types |

Output Events

• openAttachmentPopupChange: EventEmitter<boolean> - Popup visibility change event

Attachment Hyperlink Component

Usage

<sky-attachment-hyperlink></sky-attachment-hyperlink>

A clickable hyperlink component that displays an attachment count and opens the Attachment Popup when clicked. Features a paperclip icon and customizable styling for displaying attachment information inline.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | buttonContainerClass | string | object | 'border-0 border-light text-primary d-flex justify-content-center align-items-center rounded rounded-2 px-1 py-2 me-2 position-absolute z-3' | CSS classes for button container | | buttonContainerWidth | string | '135px' | Width of button container | | IconClass | string | object | 'fs-7 me-1 text-primary' | CSS classes for paperclip icon | | buttonTitle | string | 'Attachments' | Tooltip title for button | | buttonText | string | 'Attachments' | Text displayed next to attachment count | | buttonClass | string | 'fs-13 fw-normal me-1 sky-text-ellipsis-one-line' | CSS classes for button text | | rightPosition | string | '8%' | Right position of button | | attachmentsSources | string[] | [] | Array of attachment base64 strings | | attachmentPopupTitle | string | '' | Title for the attachment popup | | requestAttachments | SkyAttachments[] | [] | Array of attachment objects | | popupAttachmentMaxWidth | string | '800' | Maximum width of attachment popup | | popupAttachmentMinWidth | string | '600' | Minimum width of attachment popup | | popupAttachmentHeghit | string | '300' | Height of attachment popup | | allowedFileTypes | string[] | ['application/pdf', 'image/jpeg', 'image/png', 'image/gif', 'image/jpg', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx 'application/vnd.ms-excel'] | Allowed file types |

Output Events

None - Component manages popup visibility internally

Quick Action Component

Usage

<sky-quick-action></sky-quick-action>

A clickable action button component that displays an icon with a title label. Perfect for creating action menus, quick access buttons, or interactive UI elements with consistent styling.

Input Properties

| Input | Type | Default Value | Description | |-------|------|---------------|-------------| | title | string | - | Required. Text label displayed next to the icon | | actionClass | string | 'my-4' | Required. CSS classes for applied to the quick action container element | | actionIcon | IconDefinition | - | Required. FontAwesome icon to display | | iconClass | string | object | 'fa-lg text-primary' | CSS classes for the icon styling | | titleClass | string | object | 'text-primary sky-fs-14 fw-medium ms-2 text-uppercase' | CSS classes for the title text |

Output Events

• ActionButtonClicked: EventEmitter<void> - Emitted when the action button is clicked