@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/README.md +1 -24
  2. package/assets/styles/_bootstrap-components.scss +55 -0
  3. package/assets/styles/_bootstrap-config.scss +7 -0
  4. package/assets/styles/_bootstrap-override.scss +78 -0
  5. package/assets/styles/_config.scss +9 -0
  6. package/assets/styles/_core.scss +80 -0
  7. package/assets/styles/_debug.scss +49 -0
  8. package/assets/styles/_mixins.scss +2 -0
  9. package/assets/styles/_props.scss +91 -0
  10. package/assets/styles/_seven-columns.scss +73 -0
  11. package/assets/styles/_updevs.scss +25 -0
  12. package/assets/styles/_utilities-marketing.scss +209 -0
  13. package/assets/styles/_utilities.scss +133 -0
  14. package/assets/styles/_variables-dark.scss +19 -0
  15. package/assets/styles/_variables.scss +1003 -0
  16. package/assets/styles/fonts/_webfonts.scss +15 -0
  17. package/assets/styles/helpers/_index.scss +143 -0
  18. package/assets/styles/layout/_animations.scss +62 -0
  19. package/assets/styles/layout/_core.scss +62 -0
  20. package/assets/styles/layout/_dark.scss +77 -0
  21. package/assets/styles/layout/_footer.scss +12 -0
  22. package/assets/styles/layout/_navbar.scss +392 -0
  23. package/assets/styles/layout/_page.scss +170 -0
  24. package/assets/styles/layout/_root.scss +64 -0
  25. package/assets/styles/marketing/_browser.scss +67 -0
  26. package/assets/styles/marketing/_core.scss +8 -0
  27. package/assets/styles/marketing/_filters.scss +0 -0
  28. package/assets/styles/marketing/_hero.scss +70 -0
  29. package/assets/styles/marketing/_pricing.scss +111 -0
  30. package/assets/styles/marketing/_sections.scss +124 -0
  31. package/assets/styles/marketing/_shape.scss +31 -0
  32. package/assets/styles/mixins/_functions.scss +96 -0
  33. package/assets/styles/mixins/_mixins.scss +68 -0
  34. package/assets/styles/ui/_accordion.scss +178 -0
  35. package/assets/styles/ui/_alerts.scss +101 -0
  36. package/assets/styles/ui/_avatars.scss +145 -0
  37. package/assets/styles/ui/_badges.scss +113 -0
  38. package/assets/styles/ui/_breadcrumbs.scss +50 -0
  39. package/assets/styles/ui/_button-group.scss +16 -0
  40. package/assets/styles/ui/_buttons.scss +261 -0
  41. package/assets/styles/ui/_calendars.scss +104 -0
  42. package/assets/styles/ui/_cards.scss +595 -0
  43. package/assets/styles/ui/_carousel.scss +68 -0
  44. package/assets/styles/ui/_charts.scss +61 -0
  45. package/assets/styles/ui/_chat.scss +38 -0
  46. package/assets/styles/ui/_chips.scss +0 -0
  47. package/assets/styles/ui/_close.scss +60 -0
  48. package/assets/styles/ui/_datagrid.scss +17 -0
  49. package/assets/styles/ui/_dropdowns.scss +120 -0
  50. package/assets/styles/ui/_empty.scss +60 -0
  51. package/assets/styles/ui/_flags.scss +31 -0
  52. package/assets/styles/ui/_forms.scss +250 -0
  53. package/assets/styles/ui/_grid.scss +115 -0
  54. package/assets/styles/ui/_icons.scss +72 -0
  55. package/assets/styles/ui/_images.scss +19 -0
  56. package/assets/styles/ui/_legend.scss +12 -0
  57. package/assets/styles/ui/_lists.scss +123 -0
  58. package/assets/styles/ui/_loaders.scss +72 -0
  59. package/assets/styles/ui/_login.scss +3 -0
  60. package/assets/styles/ui/_markdown.scss +53 -0
  61. package/assets/styles/ui/_modals.scss +67 -0
  62. package/assets/styles/ui/_nav.scss +106 -0
  63. package/assets/styles/ui/_offcanvas.scss +17 -0
  64. package/assets/styles/ui/_pagination.scss +58 -0
  65. package/assets/styles/ui/_payments.scss +28 -0
  66. package/assets/styles/ui/_placeholder.scss +9 -0
  67. package/assets/styles/ui/_popovers.scss +2 -0
  68. package/assets/styles/ui/_progress.scss +107 -0
  69. package/assets/styles/ui/_ribbons.scss +157 -0
  70. package/assets/styles/ui/_segmented.scss +101 -0
  71. package/assets/styles/ui/_signature.scss +15 -0
  72. package/assets/styles/ui/_social.scss +52 -0
  73. package/assets/styles/ui/_stars.scss +13 -0
  74. package/assets/styles/ui/_status.scss +163 -0
  75. package/assets/styles/ui/_steps.scss +156 -0
  76. package/assets/styles/ui/_switch-icon.scss +211 -0
  77. package/assets/styles/ui/_tables.scss +176 -0
  78. package/assets/styles/ui/_tags.scss +57 -0
  79. package/assets/styles/ui/_timeline.scss +61 -0
  80. package/assets/styles/ui/_toasts.scss +18 -0
  81. package/assets/styles/ui/_toolbar.scss +10 -0
  82. package/assets/styles/ui/_tracking.scss +29 -0
  83. package/assets/styles/ui/_type.scss +330 -0
  84. package/assets/styles/ui/forms/_form-check.scss +91 -0
  85. package/assets/styles/ui/forms/_form-colorinput.scss +54 -0
  86. package/assets/styles/ui/forms/_form-custom.scss +28 -0
  87. package/assets/styles/ui/forms/_form-icon.scss +35 -0
  88. package/assets/styles/ui/forms/_form-imagecheck.scss +105 -0
  89. package/assets/styles/ui/forms/_form-selectgroup.scss +153 -0
  90. package/assets/styles/ui/forms/_validation.scss +13 -0
  91. package/assets/styles/ui/typo/_hr.scss +76 -0
  92. package/assets/styles/utils/_background.scss +15 -0
  93. package/assets/styles/utils/_colors.scss +101 -0
  94. package/assets/styles/utils/_opacity.scss +7 -0
  95. package/assets/styles/utils/_scroll.scss +45 -0
  96. package/assets/styles/utils/_shadow.scss +17 -0
  97. package/assets/styles/utils/_sizing.scss +10 -0
  98. package/assets/styles/utils/_text.scss +14 -0
  99. package/assets/styles/vendor/_apexcharts.scss +52 -0
  100. package/assets/styles/vendor/_coloris.scss +72 -0
  101. package/assets/styles/vendor/_dropzone.scss +27 -0
  102. package/assets/styles/vendor/_fslightbox.scss +13 -0
  103. package/assets/styles/vendor/_jsvectormap.scss +47 -0
  104. package/assets/styles/vendor/_litepicker.scss +69 -0
  105. package/assets/styles/vendor/_nouislider.scss +49 -0
  106. package/assets/styles/vendor/_plyr.scss +3 -0
  107. package/assets/styles/vendor/_stars-rating.scss +22 -0
  108. package/assets/styles/vendor/_tom-select.scss +81 -0
  109. package/assets/styles/vendor/_turbo.scss +3 -0
  110. package/assets/styles/vendor/_typed.scss +4 -0
  111. package/assets/styles/vendor/_wysiwyg.scss +46 -0
  112. package/fesm2022/updevs-components-badge.mjs +89 -0
  113. package/fesm2022/updevs-components-badge.mjs.map +1 -0
  114. package/fesm2022/updevs-components-button.mjs +193 -0
  115. package/fesm2022/updevs-components-button.mjs.map +1 -0
  116. package/fesm2022/updevs-components-calendar.mjs +582 -0
  117. package/fesm2022/updevs-components-calendar.mjs.map +1 -0
  118. package/fesm2022/updevs-components-card.mjs +242 -0
  119. package/fesm2022/updevs-components-card.mjs.map +1 -0
  120. package/fesm2022/updevs-components-drag-and-drop.mjs +185 -0
  121. package/fesm2022/updevs-components-drag-and-drop.mjs.map +1 -0
  122. package/fesm2022/updevs-components-dropdown.mjs +247 -0
  123. package/fesm2022/updevs-components-dropdown.mjs.map +1 -0
  124. package/fesm2022/updevs-components-form-controls-abstractions.mjs +106 -0
  125. package/fesm2022/updevs-components-form-controls-abstractions.mjs.map +1 -0
  126. package/fesm2022/updevs-components-form-controls-checkbox.mjs +99 -0
  127. package/fesm2022/updevs-components-form-controls-checkbox.mjs.map +1 -0
  128. package/fesm2022/updevs-components-form-controls-date-picker.mjs +175 -0
  129. package/fesm2022/updevs-components-form-controls-date-picker.mjs.map +1 -0
  130. package/fesm2022/updevs-components-form-controls-file-upload.mjs +272 -0
  131. package/fesm2022/updevs-components-form-controls-file-upload.mjs.map +1 -0
  132. package/fesm2022/updevs-components-form-controls-input.mjs +281 -0
  133. package/fesm2022/updevs-components-form-controls-input.mjs.map +1 -0
  134. package/fesm2022/updevs-components-form-controls-radio.mjs +98 -0
  135. package/fesm2022/updevs-components-form-controls-radio.mjs.map +1 -0
  136. package/fesm2022/updevs-components-form-controls-select.mjs +600 -0
  137. package/fesm2022/updevs-components-form-controls-select.mjs.map +1 -0
  138. package/fesm2022/updevs-components-form-controls-textarea.mjs +79 -0
  139. package/fesm2022/updevs-components-form-controls-textarea.mjs.map +1 -0
  140. package/fesm2022/updevs-components-form-controls-time-picker.mjs +345 -0
  141. package/fesm2022/updevs-components-form-controls-time-picker.mjs.map +1 -0
  142. package/fesm2022/updevs-components-form.mjs +562 -0
  143. package/fesm2022/updevs-components-form.mjs.map +1 -0
  144. package/fesm2022/updevs-components-layout.mjs +1054 -0
  145. package/fesm2022/updevs-components-layout.mjs.map +1 -0
  146. package/fesm2022/updevs-components-link.mjs +79 -0
  147. package/fesm2022/updevs-components-link.mjs.map +1 -0
  148. package/fesm2022/updevs-components-list.mjs +215 -0
  149. package/fesm2022/updevs-components-list.mjs.map +1 -0
  150. package/fesm2022/updevs-components-modal.mjs +505 -0
  151. package/fesm2022/updevs-components-modal.mjs.map +1 -0
  152. package/fesm2022/updevs-components-paginator.mjs +160 -0
  153. package/fesm2022/updevs-components-paginator.mjs.map +1 -0
  154. package/fesm2022/updevs-components-popover.mjs +215 -0
  155. package/fesm2022/updevs-components-popover.mjs.map +1 -0
  156. package/fesm2022/updevs-components-pricing.mjs +130 -0
  157. package/fesm2022/updevs-components-pricing.mjs.map +1 -0
  158. package/fesm2022/updevs-components-table.mjs +2060 -0
  159. package/fesm2022/updevs-components-table.mjs.map +1 -0
  160. package/fesm2022/updevs-components.mjs +33 -0
  161. package/fesm2022/updevs-components.mjs.map +1 -0
  162. package/package.json +127 -14
  163. package/types/updevs-components-badge.d.ts +44 -0
  164. package/types/updevs-components-button.d.ts +75 -0
  165. package/types/updevs-components-calendar.d.ts +175 -0
  166. package/types/updevs-components-card.d.ts +92 -0
  167. package/types/updevs-components-drag-and-drop.d.ts +74 -0
  168. package/types/updevs-components-dropdown.d.ts +124 -0
  169. package/types/updevs-components-form-controls-abstractions.d.ts +49 -0
  170. package/types/updevs-components-form-controls-checkbox.d.ts +33 -0
  171. package/types/updevs-components-form-controls-date-picker.d.ts +80 -0
  172. package/types/updevs-components-form-controls-file-upload.d.ts +69 -0
  173. package/types/updevs-components-form-controls-input.d.ts +95 -0
  174. package/types/updevs-components-form-controls-radio.d.ts +32 -0
  175. package/types/updevs-components-form-controls-select.d.ts +200 -0
  176. package/types/updevs-components-form-controls-textarea.d.ts +31 -0
  177. package/types/updevs-components-form-controls-time-picker.d.ts +164 -0
  178. package/types/updevs-components-form.d.ts +356 -0
  179. package/types/updevs-components-layout.d.ts +490 -0
  180. package/types/updevs-components-link.d.ts +34 -0
  181. package/types/updevs-components-list.d.ts +107 -0
  182. package/types/updevs-components-modal.d.ts +155 -0
  183. package/types/updevs-components-paginator.d.ts +58 -0
  184. package/types/updevs-components-popover.d.ts +63 -0
  185. package/types/updevs-components-pricing.d.ts +91 -0
  186. package/types/updevs-components-table.d.ts +619 -0
  187. package/types/updevs-components.d.ts +44 -0
  188. package/CHANGELOG.md +0 -8
  189. package/ng-package.json +0 -7
  190. package/src/lib/components.component.spec.ts +0 -23
  191. package/src/lib/components.component.ts +0 -14
  192. package/src/lib/components.module.ts +0 -17
  193. package/src/lib/components.service.spec.ts +0 -16
  194. package/src/lib/components.service.ts +0 -9
  195. package/src/public-api.ts +0 -7
  196. package/tsconfig.lib.json +0 -14
  197. package/tsconfig.lib.prod.json +0 -10
  198. package/tsconfig.spec.json +0 -14
@@ -0,0 +1 @@
1
+ {"version":3,"file":"updevs-components-list.mjs","sources":["../../../../libs/components/list/src/models/list-item.model.ts","../../../../libs/components/list/src/list.component.ts","../../../../libs/components/list/src/list.component.html","../../../../libs/components/list/src/upd-list.module.ts","../../../../libs/components/list/src/updevs-components-list.ts"],"sourcesContent":["import { IconModel } from '@updevs/icons';\nimport { BgColorStyleType } from '@updevs/sdk/types';\n\nimport { ListItem } from './list-item';\nimport { BadgePositionType } from './badge-position.type';\n\nexport class ListItemModel implements ListItem {\n id?: any;\n text?: string;\n description?: string;\n icon?: IconModel;\n isChecked?: boolean;\n isSwitch?: boolean;\n hasCheckbox?: boolean;\n isDisabled?: boolean;\n isActive?: boolean;\n leftBoxText?: string;\n leftBoxImage?: string;\n leftBoxHtml?: string;\n badgeColor?: BgColorStyleType;\n badgeText?: string;\n badgePosition?: BadgePositionType;\n children?: ListItemModel[];\n get hasLeftBox(): boolean {\n return !!this.leftBoxImage\n || !!this.leftBoxText\n || !!this.badgeColor\n || this.hasCheckbox === true\n || !!this.icon\n || !!this.leftBoxHtml;\n }\n get hasLeftBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left';\n }\n get hasBottomRightBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';\n }\n\n constructor(init?: ListItem) {\n Object.assign(this, init);\n }\n}\n","import {\n Component,\n HostBinding,\n Input,\n Renderer2,\n ElementRef,\n OnInit,\n RendererStyleFlags2,\n ViewEncapsulation,\n Output,\n EventEmitter,\n OnChanges,\n SimpleChanges, inject\n} from '@angular/core';\n\nimport { ListItem } from './models/list-item';\nimport { ListItemModel } from './models/list-item.model';\n\n@Component({\n standalone: false,\n selector: 'upd-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class ListComponent implements OnInit, OnChanges {\n @HostBinding('class') localWrapperClasses = '';\n\n /**\n * List items.\n * If provided, the single will be considered static.\n */\n @Input() items?: ListItem[];\n /**\n * Whether the content should overflow or not.\n */\n @Input() shouldOverflow = false;\n /**\n * Whether the list will fit the layout of the container.\n * If set to false, the list's round borders will be visible. It'll have a detached behavior.\n */\n @Input() isFlush = true;\n @Input() isVisible = true;\n @Input() isHoverable = false;\n @Input() shouldDisplayItemsCounter = false;\n @Input() wrapperClasses = '';\n /**\n * Maximum height of the component.\n * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.\n */\n @Input() maxHeight?: string;\n\n @Output() readonly checkboxChanged = new EventEmitter<ListItem>();\n @Output() readonly selectedItem = new EventEmitter<ListItem>();\n\n listItems: ListItemModel[] = [];\n currentSelection: ListItem[] = [];\n\n private localBackupItems: ListItem[] = [];\n\n private readonly renderer = inject(Renderer2);\n private readonly elementRef = inject(ElementRef);\n\n ngOnInit(): void {\n this.setupStyle();\n this.updateWrapperClasses();\n this.setupItems();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.setupStyle();\n this.updateWrapperClasses();\n\n if (!!changes['items']) {\n this.setupItems();\n }\n }\n\n onCheckboxChange(item: ListItem, isChecked: boolean): void {\n item.isChecked = isChecked;\n this.checkboxChanged.emit(item);\n }\n\n onSelectItem(evt: any, item: ListItem): void {\n evt.stopPropagation();\n this.selectedItem.emit(item);\n }\n\n trackByItemId(index: number, item: ListItem): any {\n return item.id ?? index;\n }\n\n private setupItems(): void {\n const tempItems: ListItemModel[] = [];\n\n this.items?.forEach(it => {\n const parent = new ListItemModel(it);\n\n if ((it.children?.length || 0) > 0) {\n parent.children = [];\n it.children?.forEach(child => parent.children!.push(new ListItemModel(child)));\n }\n\n tempItems.push(parent);\n });\n\n this.listItems = [...tempItems];\n }\n\n private setupStyle(): void {\n if (!!this.maxHeight) {\n this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.maxHeight, RendererStyleFlags2.Important);\n }\n }\n\n private updateWrapperClasses(): void {\n this.localWrapperClasses = 'list-group' + ` ${this.wrapperClasses}`;\n\n if (this.isFlush) {\n this.localWrapperClasses += ' list-group-flush';\n }\n\n if (this.isHoverable) {\n this.localWrapperClasses += ' list-group-hoverable';\n }\n\n if (this.shouldOverflow) {\n this.localWrapperClasses += ' overflow-auto';\n }\n\n if (!this.isVisible) {\n this.localWrapperClasses += ' list-hidden';\n }\n }\n}\n","<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n @for (item of listItems; track trackByItemId($index, item)) {\n @if ((item.children?.length || 0) > 0) {\n <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n @for (child of item.children; track child) {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n }\n } @empty {\n <div class=\"list-group-item\">\n <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n {{ t('NoRecordsFound') }}\n </div>\n }\n\n @if (shouldDisplayItemsCounter && listItems.length > 0) {\n <div class=\"list-items-counter bg-muted text-muted-fg\">\n {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n </div>\n }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n @if (!item.hasLeftBox) {\n <span>{{ item.text }}</span>\n } @else {\n <div class=\"row\">\n <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n <div class=\"col text-truncate align-content-center\">\n @if (!!item.text) {\n <div class=\"text-body d-block\">{{ item.text }}</div>\n }\n @if (!!item.description) {\n <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n <div class=\"col-auto\">\n @if (!!item.icon) {\n <upd-icon [model]=\"item.icon\"></upd-icon>\n } @else if (item.hasCheckbox) {\n <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked || false\"\n [isSwitch]=\"item.isSwitch || false\"></upd-checkbox>\n <!-- [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n } @else if (item.hasLeftBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n } @else if (!!item.leftBoxImage || !!item.leftBoxText) {\n <a href=\"#\"> <!-- TODO: change. -->\n <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n @if (item.hasBottomRightBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n }\n </span>\n </a>\n } @else if (!!item.leftBoxHtml) {\n <div [innerHTML]=\"item.leftBoxHtml\"></div>\n }\n </div>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@jsverse/transloco';\nimport { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { ListComponent } from './list.component';\n\n@NgModule({\n imports: [\n CommonModule,\n TranslocoModule,\n UpdCheckboxModule,\n UpdIconsModule\n ],\n declarations: [\n ListComponent\n ],\n exports: [\n ListComponent\n ]\n})\nexport class UpdListModule {\n constructor(translocoService: TranslocoService) {\n translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n translocoService.setTranslation(en, 'en');\n translocoService.setTranslation(pt, 'pt');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","en","pt","i1"],"mappings":"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"}
@@ -0,0 +1,505 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, Directive, viewChild, ElementRef, inject, Renderer2, HostBinding, Component, ApplicationRef, ViewContainerRef, Injectable, signal, NgModule } from '@angular/core';
3
+ import { BaseComponent, LayoutService, ScrollbarService, Utils, DynamicComponentLoaderService, OverlayService, ButtonModel, UpdCoreLayoutModule } from '@updevs/sdk/layout';
4
+ import * as i1 from '@angular/common';
5
+ import { NgComponentOutlet, DOCUMENT, CommonModule } from '@angular/common';
6
+ import { TextService } from '@updevs/sdk';
7
+ import * as i2 from '@updevs/components/button';
8
+ import { UpdButtonModule } from '@updevs/components/button';
9
+ import * as i3 from '@updevs/icons';
10
+ import { UpdIconsModule } from '@updevs/icons';
11
+ import * as i1$1 from '@jsverse/transloco';
12
+ import { TranslocoDirective } from '@jsverse/transloco';
13
+ import { Subject } from 'rxjs';
14
+ import * as i3$1 from '@updevs/sdk/messages';
15
+ import { MessageTypeEnum, UpdMessagesModule } from '@updevs/sdk/messages';
16
+
17
+ class BaseModal {
18
+ constructor() {
19
+ this.modalRef = input.required(...(ngDevMode ? [{ debugName: "modalRef" }] : []));
20
+ this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
21
+ }
22
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
23
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: BaseModal, isStandalone: false, inputs: { modalRef: { classPropertyName: "modalRef", publicName: "modalRef", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
24
+ }
25
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseModal, decorators: [{
26
+ type: Directive,
27
+ args: [{ standalone: false }]
28
+ }], propDecorators: { modalRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalRef", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
29
+
30
+ class ModalConfigModel {
31
+ constructor(init) {
32
+ this.size = 'regular';
33
+ this.isVerticallyCentered = true;
34
+ this.isScrollable = false;
35
+ this.showCancelButton = false;
36
+ this.showCloseButton = true;
37
+ this.isTextCentered = true;
38
+ this.shouldDismissOnEsc = false;
39
+ this.shouldDismissOnOutsideClick = false;
40
+ this.isAlert = false;
41
+ this.titleIconPosition = 'top';
42
+ this.footerLayout = 'default';
43
+ this.actionButtons = [];
44
+ if (!!init) {
45
+ Object.assign(this, init);
46
+ }
47
+ }
48
+ }
49
+
50
+ let containerId = 1;
51
+ class ModalContainerComponent extends BaseComponent {
52
+ constructor() {
53
+ super(...arguments);
54
+ this.id = `modal-${containerId++}`;
55
+ this.hostClass = ['modal', 'modal-blur', 'fade'];
56
+ this.role = 'dialog';
57
+ this.ariaHidden = true;
58
+ this.ariaModal = false;
59
+ this.tabIndex = -1;
60
+ this.dialog = viewChild.required('dialog', { read: ElementRef });
61
+ this.content = viewChild.required('content', { read: ElementRef });
62
+ this.bodyContentOutlet = viewChild(NgComponentOutlet, ...(ngDevMode ? [{ debugName: "bodyContentOutlet" }] : []));
63
+ this.size = 'regular';
64
+ this.isVerticallyCentered = true;
65
+ this.isScrollable = false;
66
+ this.showCloseButton = true;
67
+ this.showCancelButton = false;
68
+ this.isTextCentered = true;
69
+ this.shouldDismissOnEsc = false;
70
+ this.shouldDismissOnOutsideClick = false;
71
+ this.isAlert = false;
72
+ this.titleIconPosition = 'top';
73
+ this.footerLayout = 'default';
74
+ this.actionButtons = [];
75
+ this.openClass = 'modal-open';
76
+ this.textService = inject(TextService);
77
+ this.elementRef = inject(ElementRef);
78
+ this.layoutService = inject(LayoutService);
79
+ this.scrollbarService = inject(ScrollbarService);
80
+ this.renderer = inject(Renderer2);
81
+ this.document = inject(DOCUMENT);
82
+ this.clickCallback = (evt) => {
83
+ if (evt.target === this.element) {
84
+ this.close();
85
+ }
86
+ };
87
+ this.escCallback = (evt) => {
88
+ if (evt.key === 'Escape') {
89
+ this.close();
90
+ }
91
+ };
92
+ }
93
+ get classes() {
94
+ return [
95
+ 'modal-dialog',
96
+ this.isVerticallyCentered ? 'modal-dialog-centered' : '',
97
+ this.isScrollable ? 'modal-dialog-scrollable' : '',
98
+ this.sizeClass
99
+ ];
100
+ }
101
+ get titleText() {
102
+ return this.textService.getText(this.title);
103
+ }
104
+ get bodyText() {
105
+ return this.textService.getText(this.body);
106
+ }
107
+ get statusColorClass() {
108
+ return `bg-${this.statusColor}`;
109
+ }
110
+ get sizeClass() {
111
+ let cls = '';
112
+ switch (this.size) {
113
+ case 'small':
114
+ cls = 'modal-sm';
115
+ break;
116
+ case 'large':
117
+ cls = 'modal-lg';
118
+ break;
119
+ case 'extra-large':
120
+ cls = 'modal-xl';
121
+ break;
122
+ }
123
+ return cls;
124
+ }
125
+ get element() {
126
+ return this.elementRef.nativeElement;
127
+ }
128
+ prepareToShow(config) {
129
+ this.setupConfig(config);
130
+ this.scrollbarService.hide();
131
+ this.layoutService.addBodyClasses(this.openClass);
132
+ this.adjustDialog();
133
+ this.setupActionButtons();
134
+ }
135
+ show() {
136
+ this.setupListeners();
137
+ this.styleDisplay = 'block';
138
+ this.ariaHidden = false;
139
+ this.ariaModal = true;
140
+ this.element.scrollTop = 0;
141
+ this.dialog().nativeElement.scrollTop = 0;
142
+ Utils.reflow(this.element);
143
+ const transitionSub = Utils.executeAfterTransition(this.element).subscribe(() => {
144
+ this.element.classList.add('show');
145
+ this.content().nativeElement.focus();
146
+ });
147
+ this.addSubscriptions(transitionSub);
148
+ }
149
+ close(result) {
150
+ const transitionSub = Utils.executeAfterTransition(this.element).subscribe(() => {
151
+ this.styleDisplay = undefined;
152
+ this.ariaHidden = true;
153
+ this.ariaModal = false;
154
+ if (!!this.afterClose) {
155
+ this.afterClose(result);
156
+ }
157
+ this.overlay.hide();
158
+ this.layoutService.removeBodyClasses(this.openClass);
159
+ this.modalContainerRef.destroy();
160
+ });
161
+ this.element.classList.remove('show');
162
+ this.addSubscriptions(transitionSub);
163
+ }
164
+ buttonClick(event, btn) {
165
+ if (!!btn.clickFunction) {
166
+ btn.clickFunction({ event, data: btn });
167
+ }
168
+ }
169
+ getBodyInstance() {
170
+ return this.bodyContentOutlet()?.['_componentRef'].instance;
171
+ }
172
+ adjustDialog() {
173
+ const isModalOverflowing = this.element.scrollHeight > this.document.documentElement.clientHeight;
174
+ const scrollbarWidth = this.scrollbarService.getWidth();
175
+ const isBodyOverflowing = scrollbarWidth > 0;
176
+ if (isBodyOverflowing && !isModalOverflowing) {
177
+ this.renderer.setStyle(this.element, 'paddingRight', `${scrollbarWidth}px`);
178
+ }
179
+ if (!isBodyOverflowing && isModalOverflowing) {
180
+ this.renderer.setStyle(this.element, 'paddingLeft', `${scrollbarWidth}px`);
181
+ }
182
+ }
183
+ setupConfig(config) {
184
+ if (!config) {
185
+ return;
186
+ }
187
+ const configModel = new ModalConfigModel(config);
188
+ this.size = configModel.size;
189
+ this.isVerticallyCentered = configModel.isVerticallyCentered;
190
+ this.isScrollable = configModel.isScrollable;
191
+ this.showCancelButton = configModel.showCancelButton;
192
+ this.showCloseButton = configModel.showCloseButton;
193
+ this.shouldDismissOnEsc = configModel.shouldDismissOnEsc;
194
+ this.shouldDismissOnOutsideClick = configModel.shouldDismissOnOutsideClick;
195
+ this.isAlert = configModel.isAlert;
196
+ this.isTextCentered = configModel.isTextCentered;
197
+ this.statusColor = configModel.statusColor;
198
+ this.headerTemplateRef = configModel.headerTemplateRef;
199
+ this.footerTemplateRef = configModel.footerTemplateRef;
200
+ this.bodyTemplateRef = configModel.bodyTemplateRef;
201
+ this.bodyContentType = configModel.bodyContentType;
202
+ this.body = configModel.body;
203
+ this.title = configModel.title;
204
+ this.titleIcon = configModel.titleIcon;
205
+ this.titleIconPosition = configModel.titleIconPosition;
206
+ this.footerLayout = configModel.footerLayout;
207
+ this.actionButtons = configModel.actionButtons;
208
+ this.data = configModel.data;
209
+ }
210
+ setupActionButtons() {
211
+ this.actionButtons.forEach(btn => {
212
+ const fnBackup = btn.clickFunction;
213
+ btn.clickFunction = event => {
214
+ event.data = this;
215
+ fnBackup(event);
216
+ };
217
+ });
218
+ }
219
+ setupListeners() {
220
+ if (this.shouldDismissOnOutsideClick) {
221
+ this.element.addEventListener('click', this.clickCallback);
222
+ }
223
+ if (this.shouldDismissOnEsc) {
224
+ this.element.addEventListener('keydown', this.escCallback);
225
+ }
226
+ }
227
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
228
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalContainerComponent, isStandalone: false, selector: "upd-modal-container", host: { properties: { "id": "this.id", "class": "this.hostClass", "attr.role": "this.role", "aria-hidden": "this.ariaHidden", "aria-modal": "this.ariaModal", "tabindex": "this.tabIndex", "style.display": "this.styleDisplay" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "bodyContentOutlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n <div [ngClass]=\"classes\" #dialog>\n <div class=\"modal-content\" tabindex=\"-1\" #content>\n @if (!!contentType) {\n <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n } @else {\n @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n <div class=\"modal-header\">\n @if (!!headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n <h5 class=\"modal-title\">{{ titleText }}</h5>\n @if (showCloseButton) {\n <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n }\n }\n </div>\n } @else if (showCloseButton) {\n <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n }\n\n <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n @if (isAlert && !!titleText) {\n <div class=\"d-flex justify-content-center align-content-start\"\n [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n }\n\n <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n {{ titleText }}\n </span>\n\n @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n }\n </div>\n }\n\n @if (!!bodyTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else if (!!bodyContentType) {\n <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n }\n </div>\n\n @if (!!statusColor) {\n <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n }\n\n @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n <div class=\"modal-footer\">\n @if (!!footerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n @switch (footerLayout) {\n @case ('full-width') {\n <div class=\"w-100\">\n <div class=\"row\">\n @if (showCancelButton) {\n <div class=\"col\">\n <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n {{ t('Cancel') }}\n </upd-button>\n </div>\n }\n\n @for (btn of actionButtons; track btn) {\n <div class=\"col\">\n <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n </div>\n }\n </div>\n </div>\n }\n @case ('centered') {\n <div class=\"d-flex justify-content-center w-100\">\n <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n </div>\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n }\n }\n }\n </div>\n }\n }\n </div>\n </div>\n\n <ng-template #closeBtnTpl>\n <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n </ng-template>\n\n <ng-template #buttonsTpl>\n @if (showCancelButton) {\n <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n {{ t('Cancel') }}\n </upd-button>\n }\n\n @for (btn of actionButtons; track btn) {\n <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n }\n </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
229
+ }
230
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, decorators: [{
231
+ type: Component,
232
+ args: [{ standalone: false, selector: 'upd-modal-container', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n <div [ngClass]=\"classes\" #dialog>\n <div class=\"modal-content\" tabindex=\"-1\" #content>\n @if (!!contentType) {\n <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n } @else {\n @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n <div class=\"modal-header\">\n @if (!!headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n <h5 class=\"modal-title\">{{ titleText }}</h5>\n @if (showCloseButton) {\n <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n }\n }\n </div>\n } @else if (showCloseButton) {\n <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n }\n\n <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n @if (isAlert && !!titleText) {\n <div class=\"d-flex justify-content-center align-content-start\"\n [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n }\n\n <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n {{ titleText }}\n </span>\n\n @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n }\n </div>\n }\n\n @if (!!bodyTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else if (!!bodyContentType) {\n <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n }\n </div>\n\n @if (!!statusColor) {\n <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n }\n\n @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n <div class=\"modal-footer\">\n @if (!!footerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n </ng-container>\n } @else {\n @switch (footerLayout) {\n @case ('full-width') {\n <div class=\"w-100\">\n <div class=\"row\">\n @if (showCancelButton) {\n <div class=\"col\">\n <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n {{ t('Cancel') }}\n </upd-button>\n </div>\n }\n\n @for (btn of actionButtons; track btn) {\n <div class=\"col\">\n <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n </div>\n }\n </div>\n </div>\n }\n @case ('centered') {\n <div class=\"d-flex justify-content-center w-100\">\n <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n </div>\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n }\n }\n }\n </div>\n }\n }\n </div>\n </div>\n\n <ng-template #closeBtnTpl>\n <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n </ng-template>\n\n <ng-template #buttonsTpl>\n @if (showCancelButton) {\n <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n {{ t('Cancel') }}\n </upd-button>\n }\n\n @for (btn of actionButtons; track btn) {\n <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n }\n </ng-template>\n</ng-container>\n" }]
233
+ }], propDecorators: { id: [{
234
+ type: HostBinding,
235
+ args: ['id']
236
+ }], hostClass: [{
237
+ type: HostBinding,
238
+ args: ['class']
239
+ }], role: [{
240
+ type: HostBinding,
241
+ args: ['attr.role']
242
+ }], ariaHidden: [{
243
+ type: HostBinding,
244
+ args: ['aria-hidden']
245
+ }], ariaModal: [{
246
+ type: HostBinding,
247
+ args: ['aria-modal']
248
+ }], tabIndex: [{
249
+ type: HostBinding,
250
+ args: ['tabindex']
251
+ }], styleDisplay: [{
252
+ type: HostBinding,
253
+ args: ['style.display']
254
+ }], dialog: [{ type: i0.ViewChild, args: ['dialog', { ...{ read: ElementRef }, isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }], bodyContentOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgComponentOutlet), { isSignal: true }] }] } });
255
+
256
+ class ModalService {
257
+ constructor() {
258
+ this.dynamicComponentLoaderService = inject(DynamicComponentLoaderService);
259
+ this.overlayService = inject(OverlayService);
260
+ this.applicationRef = inject(ApplicationRef);
261
+ }
262
+ open(contentType, config, rootElement, shouldDisposeOnClick = false, shouldDisposeOnEsc = false) {
263
+ const viewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);
264
+ const modalContainerRef = this.dynamicComponentLoaderService.load(ModalContainerComponent, viewContainerRef);
265
+ const overlay = this.overlayService.create({ rootElement, customClasses: ['modal-backdrop'] });
266
+ modalContainerRef.instance.prepareToShow(config);
267
+ modalContainerRef.instance.modalContainerRef = modalContainerRef;
268
+ modalContainerRef.instance.overlay = overlay;
269
+ modalContainerRef.instance.contentType = contentType;
270
+ modalContainerRef.instance.shouldDismissOnOutsideClick = config?.shouldDismissOnOutsideClick || shouldDisposeOnClick;
271
+ modalContainerRef.instance.shouldDismissOnEsc = config?.shouldDismissOnEsc || shouldDisposeOnEsc;
272
+ overlay.show().subscribe(() => modalContainerRef.instance.show());
273
+ return modalContainerRef.instance;
274
+ }
275
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
276
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService }); }
277
+ }
278
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, decorators: [{
279
+ type: Injectable
280
+ }] });
281
+
282
+ class ModalAlertService {
283
+ constructor() {
284
+ this.modalService = inject(ModalService);
285
+ this.defaultIconModel = { tablerIconWeight: 'medium-light', tablerIconSize: 48 };
286
+ }
287
+ showWarning(message, title, actionButtons = []) {
288
+ return this.open(message, title || { text: 'UpDevs.ModalAlert.WarningTitle', isTranslated: false }, 'alert-triangle', 'text-warning', 'warning', actionButtons);
289
+ }
290
+ showError(message, title, actionButtons = []) {
291
+ return this.open(message, title || { text: 'UpDevs.ModalAlert.ErrorTitle', isTranslated: false }, 'exclamation-circle', 'text-danger', 'danger', actionButtons);
292
+ }
293
+ showInfo(message, title, actionButtons = []) {
294
+ return this.open(message, title || { text: 'UpDevs.ModalAlert.InfoTitle', isTranslated: false }, 'info-circle', 'text-info', 'info', actionButtons);
295
+ }
296
+ showSuccess(message, title, actionButtons = []) {
297
+ return this.open(message, title || { text: 'UpDevs.ModalAlert.SuccessTitle', isTranslated: false }, 'circle-check', 'text-success', 'success', actionButtons);
298
+ }
299
+ showConfirm(message, title, actionButtons = []) {
300
+ // eslint-disable-next-line prefer-const
301
+ let modalRef;
302
+ const statusColor = 'indigo';
303
+ const result = new Subject();
304
+ if (actionButtons.length < 1) {
305
+ actionButtons = [
306
+ new ButtonModel({
307
+ text: signal({ text: 'UpDevs.ModalAlert.ConfirmNo', isTranslated: false }),
308
+ isOutline: signal(true),
309
+ clickFunction: () => {
310
+ result.next(false);
311
+ modalRef.close();
312
+ }
313
+ }),
314
+ new ButtonModel({
315
+ text: signal({ text: 'UpDevs.ModalAlert.ConfirmYes', isTranslated: false }),
316
+ colorStyle: signal(statusColor),
317
+ clickFunction: () => {
318
+ result.next(true);
319
+ modalRef.close();
320
+ }
321
+ })
322
+ ];
323
+ }
324
+ modalRef = this.open(message, title || { text: 'UpDevs.ModalAlert.ConfirmationTitle', isTranslated: false }, 'checklist', 'text-indigo', statusColor, actionButtons, 'full-width');
325
+ return result;
326
+ }
327
+ showCustom(message, title, titleIcon, titleIconPosition, statusColor, actionButtons = [], size = 'small', footerLayout = 'default') {
328
+ return this.modalService.open(undefined, {
329
+ isAlert: true,
330
+ title,
331
+ titleIcon,
332
+ titleIconPosition,
333
+ size,
334
+ body: message,
335
+ statusColor,
336
+ footerLayout,
337
+ actionButtons
338
+ });
339
+ }
340
+ open(message, title, titleIconType, titleIconColorClass, statusColor, actionButtons, footerLayout = 'default') {
341
+ // eslint-disable-next-line prefer-const
342
+ let modalRef;
343
+ const titleIcon = {
344
+ ...this.defaultIconModel,
345
+ tablerIcon: titleIconType,
346
+ colorClass: titleIconColorClass
347
+ };
348
+ if (actionButtons.length < 1) {
349
+ actionButtons.push(new ButtonModel({
350
+ text: signal({ text: 'UpDevs.ModalAlert.OkButtonTitle', isTranslated: false }),
351
+ colorStyle: signal(statusColor),
352
+ clickFunction: () => modalRef.close()
353
+ }));
354
+ }
355
+ modalRef = this.modalService.open(undefined, {
356
+ isAlert: true,
357
+ title,
358
+ titleIcon,
359
+ titleIconPosition: 'top',
360
+ size: 'small',
361
+ body: message,
362
+ statusColor,
363
+ footerLayout,
364
+ actionButtons,
365
+ showCloseButton: false
366
+ });
367
+ return modalRef;
368
+ }
369
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
370
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService }); }
371
+ }
372
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService, decorators: [{
373
+ type: Injectable
374
+ }] });
375
+
376
+ var UpDevs$1 = {
377
+ Modal: {
378
+ Cancel: "Cancel"
379
+ },
380
+ ModalAlert: {
381
+ OkButtonTitle: "Ok",
382
+ ConfirmYes: "Yes",
383
+ ConfirmNo: "No",
384
+ WarningTitle: "Warning",
385
+ ErrorTitle: "Error",
386
+ InfoTitle: "Information",
387
+ SuccessTitle: "Success",
388
+ ConfirmationTitle: "Confirm"
389
+ }
390
+ };
391
+ var en = {
392
+ UpDevs: UpDevs$1
393
+ };
394
+
395
+ var en$1 = /*#__PURE__*/Object.freeze({
396
+ __proto__: null,
397
+ UpDevs: UpDevs$1,
398
+ default: en
399
+ });
400
+
401
+ var UpDevs = {
402
+ Modal: {
403
+ Cancel: "Cancelar"
404
+ },
405
+ ModalAlert: {
406
+ OkButtonTitle: "Ok",
407
+ ConfirmYes: "Sim",
408
+ ConfirmNo: "Não",
409
+ WarningTitle: "Alerta",
410
+ ErrorTitle: "Erro",
411
+ InfoTitle: "Informação",
412
+ SuccessTitle: "Sucesso",
413
+ ConfirmationTitle: "Confirme"
414
+ }
415
+ };
416
+ var pt = {
417
+ UpDevs: UpDevs
418
+ };
419
+
420
+ var pt$1 = /*#__PURE__*/Object.freeze({
421
+ __proto__: null,
422
+ UpDevs: UpDevs,
423
+ default: pt
424
+ });
425
+
426
+ class UpdModalModule {
427
+ constructor(translocoService, modalAlertService, messagesService) {
428
+ translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
429
+ translocoService.setTranslation(en$1, 'en');
430
+ translocoService.setTranslation(pt$1, 'pt');
431
+ this.setupMessagesService(modalAlertService, messagesService);
432
+ }
433
+ setupMessagesService(modalAlertService, messagesService) {
434
+ messagesService.onNewMessage.subscribe(msg => {
435
+ if (msg.isModal) {
436
+ if (!!msg.onShown) {
437
+ msg.onShown();
438
+ }
439
+ let modalRef;
440
+ switch (msg.type) {
441
+ case MessageTypeEnum.Warning:
442
+ modalRef = modalAlertService.showWarning(msg.message, msg.title);
443
+ break;
444
+ case MessageTypeEnum.Info:
445
+ modalRef = modalAlertService.showInfo(msg.message, msg.title);
446
+ break;
447
+ case MessageTypeEnum.Error:
448
+ modalRef = modalAlertService.showError(msg.message, msg.title);
449
+ break;
450
+ case MessageTypeEnum.Success:
451
+ modalRef = modalAlertService.showSuccess(msg.message, msg.title);
452
+ break;
453
+ case MessageTypeEnum.Confirm:
454
+ modalAlertService.showConfirm(msg.message, msg.title);
455
+ break;
456
+ }
457
+ if (!!modalRef && !!msg.onHidden) {
458
+ modalRef.afterClose = msg.onHidden;
459
+ }
460
+ }
461
+ });
462
+ }
463
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, deps: [{ token: i1$1.TranslocoService }, { token: ModalAlertService }, { token: i3$1.MessagesService }], target: i0.ɵɵFactoryTarget.NgModule }); }
464
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, declarations: [ModalContainerComponent], imports: [CommonModule,
465
+ UpdCoreLayoutModule,
466
+ UpdButtonModule,
467
+ UpdIconsModule,
468
+ UpdMessagesModule,
469
+ TranslocoDirective] }); }
470
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, providers: [
471
+ ModalService,
472
+ ModalAlertService
473
+ ], imports: [CommonModule,
474
+ UpdCoreLayoutModule,
475
+ UpdButtonModule,
476
+ UpdIconsModule,
477
+ UpdMessagesModule] }); }
478
+ }
479
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, decorators: [{
480
+ type: NgModule,
481
+ args: [{
482
+ imports: [
483
+ CommonModule,
484
+ UpdCoreLayoutModule,
485
+ UpdButtonModule,
486
+ UpdIconsModule,
487
+ UpdMessagesModule,
488
+ TranslocoDirective
489
+ ],
490
+ declarations: [
491
+ ModalContainerComponent
492
+ ],
493
+ providers: [
494
+ ModalService,
495
+ ModalAlertService
496
+ ]
497
+ }]
498
+ }], ctorParameters: () => [{ type: i1$1.TranslocoService }, { type: ModalAlertService }, { type: i3$1.MessagesService }] });
499
+
500
+ /**
501
+ * Generated bundle index. Do not edit.
502
+ */
503
+
504
+ export { BaseModal, ModalAlertService, ModalService, UpdModalModule };
505
+ //# sourceMappingURL=updevs-components-modal.mjs.map