npm package: @osama_amireh/sky-components-ui
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15.
Latest version: 1.0.25

# SharedUI

This library was generated with [Angular CLI](https://github.com/angular/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](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) 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

## Installation
Use npm to install this package by command: `@skysoftware-co/sky-components-ui`

## Alert Toast Component

### Usage
```html
<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
```html
<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 |
| `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<any> | - | 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 |
| `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 |

### 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

## Confirmation Popup Component

### Usage
```html
<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 |
| `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<any> | - | Confirmation template |
| `confirmationContentTemplate` | TemplateRef<any> | - | 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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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 | `'text-white'` | CSS classes for text in completed step circles |
| `circleTextActiveStepClass` | string | `'text-primary'` | CSS classes for text in active step circle |
| `circleTextInCompeleteStepClass` | string | `'text-light-gray'` | CSS classes for text in incomplete step circles |
| `activeStepTextClass` | string | `'text-primary'` | CSS classes for active step label text |
| `inActiveStepTextClass` | string | `'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:

```typescript
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
```html
<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:**
```html
<sky-section-divider [text]="'Contact Information'"></sky-section-divider>
```

**Divider with icon and text:**
```html
<sky-section-divider 
  [text]="'Personal Details'" 
  [fontAwesomeIcon]="faUser">
</sky-section-divider>
```

**Divider with custom styling:**
```html
<sky-section-divider 
  [text]="'Important Section'" 
  [textClass]="'fs-16 fw-bold text-primary'"
  [dividerClass]="'border-primary'">
</sky-section-divider>
```

**Divider with icon only:**
```html
<sky-section-divider [fontAwesomeIcon]="faInfoCircle"></sky-section-divider>
```


## Attachment Popup Component

### Usage
```html
<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 |

### Output Events
- `openAttachmentPopupChange: EventEmitter<boolean>` - Popup visibility change event

## Attachment Hyperlink Component

### Usage
```html
<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 |
| `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 |
| `rightPosition` | string | `'8%'` | Right position of button |

### Output Events
None - Component manages popup visibility internally