@pepperi-addons/ngx-lib 0.4.2-beta.98 → 0.4.2-scroll.1

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 (185) hide show
  1. package/chips/chips.component.d.ts +1 -3
  2. package/core/common/pipes/common-pipes.d.ts +3 -0
  3. package/core/customization/customization.model.d.ts +1 -1
  4. package/esm2020/checkbox/checkbox.component.mjs +3 -3
  5. package/esm2020/chips/chips.component.mjs +8 -11
  6. package/esm2020/color/color.component.mjs +3 -3
  7. package/esm2020/core/common/pipes/common-pipes.mjs +14 -4
  8. package/esm2020/core/customization/customization.model.mjs +7 -1
  9. package/esm2020/core/customization/customization.service.mjs +2 -1
  10. package/esm2020/core/http/services/loader.service.mjs +3 -3
  11. package/esm2020/draggable-items/draggable-items.component.mjs +3 -3
  12. package/esm2020/form/field-generator.component.mjs +3 -3
  13. package/esm2020/form/form.component.mjs +3 -3
  14. package/esm2020/form/internal-carusel.component.mjs +10 -6
  15. package/esm2020/form/internal-field-generator.component.mjs +3 -3
  16. package/esm2020/form/internal-form.component.mjs +3 -3
  17. package/esm2020/form/internal-menu.component.mjs +4 -6
  18. package/esm2020/form/internal-page.component.mjs +3 -4
  19. package/esm2020/image/image.component.mjs +3 -3
  20. package/esm2020/images-filmstrip/images-filmstrip.component.mjs +3 -3
  21. package/esm2020/link/link.component.mjs +9 -3
  22. package/esm2020/list/list-actions.component.mjs +1 -1
  23. package/esm2020/list/list-chooser.component.mjs +1 -1
  24. package/esm2020/list/list-sorting.component.mjs +1 -1
  25. package/esm2020/list/list-views.component.mjs +1 -1
  26. package/esm2020/list/list.component.mjs +22 -10
  27. package/esm2020/list/list.model.mjs +1 -1
  28. package/esm2020/menu/menu-item.component.mjs +3 -3
  29. package/esm2020/menu/menu.component.mjs +6 -3
  30. package/esm2020/menu/menu.model.mjs +2 -1
  31. package/esm2020/profile-data-views-list/profile-data-view/profile-data-view.component.mjs +1 -1
  32. package/esm2020/profile-data-views-list/profile-data-views-card/profile-data-views-card.component.mjs +25 -9
  33. package/esm2020/profile-data-views-list/profile-data-views-list.component.mjs +58 -26
  34. package/esm2020/profile-data-views-list/profile-data-views-list.model.mjs +1 -1
  35. package/esm2020/quantity-selector/quantity-selector.component.mjs +7 -3
  36. package/esm2020/query-builder/common/model/legacy.mjs +1 -1
  37. package/esm2020/query-builder/common/model/operator.mjs +72 -62
  38. package/esm2020/query-builder/common/services/output-query.service.mjs +5 -3
  39. package/esm2020/query-builder/common/services/query-structure.service.mjs +24 -1
  40. package/esm2020/query-builder/query-builder-item/query-builder-item.component.mjs +3 -3
  41. package/esm2020/query-builder/query-builder-section/query-builder-section.component.mjs +3 -3
  42. package/esm2020/query-builder/query-builder.module.mjs +14 -3
  43. package/esm2020/query-builder/query-builder.service.mjs +2 -2
  44. package/esm2020/remote-loader/remote-loader.service.mjs +16 -16
  45. package/esm2020/rich-html-textarea/rich-html-textarea.component.mjs +10 -3
  46. package/esm2020/select/select.component.mjs +3 -3
  47. package/esm2020/select-panel/select-panel.component.mjs +3 -5
  48. package/esm2020/signature/signature-dialog.component.mjs +2 -1
  49. package/esm2020/signature/signature.component.mjs +4 -4
  50. package/esm2020/skeleton-loader/public-api.mjs +2 -2
  51. package/esm2020/skeleton-loader/skeleton-loader.component.mjs +3 -3
  52. package/esm2020/smart-filters/common/model/operator.mjs +11 -4
  53. package/esm2020/smart-filters/common/model/type.mjs +1 -1
  54. package/esm2020/smart-filters/multi-select-filter/multi-select-filter.component.mjs +3 -3
  55. package/esm2020/smart-filters/text-filter/text-filter.component.mjs +3 -3
  56. package/esm2020/textbox/textbox.component.mjs +26 -6
  57. package/fesm2015/pepperi-addons-ngx-lib-checkbox.mjs +2 -2
  58. package/fesm2015/pepperi-addons-ngx-lib-checkbox.mjs.map +1 -1
  59. package/fesm2015/pepperi-addons-ngx-lib-chips.mjs +7 -10
  60. package/fesm2015/pepperi-addons-ngx-lib-chips.mjs.map +1 -1
  61. package/fesm2015/pepperi-addons-ngx-lib-color.mjs +2 -2
  62. package/fesm2015/pepperi-addons-ngx-lib-color.mjs.map +1 -1
  63. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs +2 -2
  64. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  65. package/fesm2015/pepperi-addons-ngx-lib-form.mjs +22 -21
  66. package/fesm2015/pepperi-addons-ngx-lib-form.mjs.map +1 -1
  67. package/fesm2015/pepperi-addons-ngx-lib-image.mjs +2 -2
  68. package/fesm2015/pepperi-addons-ngx-lib-image.mjs.map +1 -1
  69. package/fesm2015/pepperi-addons-ngx-lib-images-filmstrip.mjs +2 -2
  70. package/fesm2015/pepperi-addons-ngx-lib-images-filmstrip.mjs.map +1 -1
  71. package/fesm2015/pepperi-addons-ngx-lib-link.mjs +8 -2
  72. package/fesm2015/pepperi-addons-ngx-lib-link.mjs.map +1 -1
  73. package/fesm2015/pepperi-addons-ngx-lib-list.mjs +25 -13
  74. package/fesm2015/pepperi-addons-ngx-lib-list.mjs.map +1 -1
  75. package/fesm2015/pepperi-addons-ngx-lib-menu.mjs +8 -4
  76. package/fesm2015/pepperi-addons-ngx-lib-menu.mjs.map +1 -1
  77. package/fesm2015/pepperi-addons-ngx-lib-profile-data-views-list.mjs +81 -33
  78. package/fesm2015/pepperi-addons-ngx-lib-profile-data-views-list.mjs.map +1 -1
  79. package/fesm2015/pepperi-addons-ngx-lib-quantity-selector.mjs +7 -2
  80. package/fesm2015/pepperi-addons-ngx-lib-quantity-selector.mjs.map +1 -1
  81. package/fesm2015/pepperi-addons-ngx-lib-query-builder.mjs +119 -70
  82. package/fesm2015/pepperi-addons-ngx-lib-query-builder.mjs.map +1 -1
  83. package/fesm2015/pepperi-addons-ngx-lib-remote-loader.mjs +16 -16
  84. package/fesm2015/pepperi-addons-ngx-lib-remote-loader.mjs.map +1 -1
  85. package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.mjs +9 -2
  86. package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.mjs.map +1 -1
  87. package/fesm2015/pepperi-addons-ngx-lib-select-panel.mjs +2 -4
  88. package/fesm2015/pepperi-addons-ngx-lib-select-panel.mjs.map +1 -1
  89. package/fesm2015/pepperi-addons-ngx-lib-select.mjs +2 -2
  90. package/fesm2015/pepperi-addons-ngx-lib-select.mjs.map +1 -1
  91. package/fesm2015/pepperi-addons-ngx-lib-signature.mjs +5 -3
  92. package/fesm2015/pepperi-addons-ngx-lib-signature.mjs.map +1 -1
  93. package/fesm2015/pepperi-addons-ngx-lib-skeleton-loader.mjs +3 -3
  94. package/fesm2015/pepperi-addons-ngx-lib-skeleton-loader.mjs.map +1 -1
  95. package/fesm2015/pepperi-addons-ngx-lib-smart-filters.mjs +14 -7
  96. package/fesm2015/pepperi-addons-ngx-lib-smart-filters.mjs.map +1 -1
  97. package/fesm2015/pepperi-addons-ngx-lib-textbox.mjs +26 -5
  98. package/fesm2015/pepperi-addons-ngx-lib-textbox.mjs.map +1 -1
  99. package/fesm2015/pepperi-addons-ngx-lib.mjs +547 -532
  100. package/fesm2015/pepperi-addons-ngx-lib.mjs.map +1 -1
  101. package/fesm2020/pepperi-addons-ngx-lib-checkbox.mjs +2 -2
  102. package/fesm2020/pepperi-addons-ngx-lib-checkbox.mjs.map +1 -1
  103. package/fesm2020/pepperi-addons-ngx-lib-chips.mjs +7 -10
  104. package/fesm2020/pepperi-addons-ngx-lib-chips.mjs.map +1 -1
  105. package/fesm2020/pepperi-addons-ngx-lib-color.mjs +2 -2
  106. package/fesm2020/pepperi-addons-ngx-lib-color.mjs.map +1 -1
  107. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs +2 -2
  108. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  109. package/fesm2020/pepperi-addons-ngx-lib-form.mjs +22 -21
  110. package/fesm2020/pepperi-addons-ngx-lib-form.mjs.map +1 -1
  111. package/fesm2020/pepperi-addons-ngx-lib-image.mjs +2 -2
  112. package/fesm2020/pepperi-addons-ngx-lib-image.mjs.map +1 -1
  113. package/fesm2020/pepperi-addons-ngx-lib-images-filmstrip.mjs +2 -2
  114. package/fesm2020/pepperi-addons-ngx-lib-images-filmstrip.mjs.map +1 -1
  115. package/fesm2020/pepperi-addons-ngx-lib-link.mjs +8 -2
  116. package/fesm2020/pepperi-addons-ngx-lib-link.mjs.map +1 -1
  117. package/fesm2020/pepperi-addons-ngx-lib-list.mjs +25 -13
  118. package/fesm2020/pepperi-addons-ngx-lib-list.mjs.map +1 -1
  119. package/fesm2020/pepperi-addons-ngx-lib-menu.mjs +8 -4
  120. package/fesm2020/pepperi-addons-ngx-lib-menu.mjs.map +1 -1
  121. package/fesm2020/pepperi-addons-ngx-lib-profile-data-views-list.mjs +81 -33
  122. package/fesm2020/pepperi-addons-ngx-lib-profile-data-views-list.mjs.map +1 -1
  123. package/fesm2020/pepperi-addons-ngx-lib-quantity-selector.mjs +6 -2
  124. package/fesm2020/pepperi-addons-ngx-lib-quantity-selector.mjs.map +1 -1
  125. package/fesm2020/pepperi-addons-ngx-lib-query-builder.mjs +115 -69
  126. package/fesm2020/pepperi-addons-ngx-lib-query-builder.mjs.map +1 -1
  127. package/fesm2020/pepperi-addons-ngx-lib-remote-loader.mjs +15 -15
  128. package/fesm2020/pepperi-addons-ngx-lib-remote-loader.mjs.map +1 -1
  129. package/fesm2020/pepperi-addons-ngx-lib-rich-html-textarea.mjs +9 -2
  130. package/fesm2020/pepperi-addons-ngx-lib-rich-html-textarea.mjs.map +1 -1
  131. package/fesm2020/pepperi-addons-ngx-lib-select-panel.mjs +2 -4
  132. package/fesm2020/pepperi-addons-ngx-lib-select-panel.mjs.map +1 -1
  133. package/fesm2020/pepperi-addons-ngx-lib-select.mjs +2 -2
  134. package/fesm2020/pepperi-addons-ngx-lib-select.mjs.map +1 -1
  135. package/fesm2020/pepperi-addons-ngx-lib-signature.mjs +4 -3
  136. package/fesm2020/pepperi-addons-ngx-lib-signature.mjs.map +1 -1
  137. package/fesm2020/pepperi-addons-ngx-lib-skeleton-loader.mjs +3 -3
  138. package/fesm2020/pepperi-addons-ngx-lib-skeleton-loader.mjs.map +1 -1
  139. package/fesm2020/pepperi-addons-ngx-lib-smart-filters.mjs +14 -7
  140. package/fesm2020/pepperi-addons-ngx-lib-smart-filters.mjs.map +1 -1
  141. package/fesm2020/pepperi-addons-ngx-lib-textbox.mjs +25 -5
  142. package/fesm2020/pepperi-addons-ngx-lib-textbox.mjs.map +1 -1
  143. package/fesm2020/pepperi-addons-ngx-lib.mjs +544 -529
  144. package/fesm2020/pepperi-addons-ngx-lib.mjs.map +1 -1
  145. package/form/internal-carusel.component.d.ts +1 -0
  146. package/form/internal-menu.component.d.ts +1 -2
  147. package/link/link.component.d.ts +3 -1
  148. package/list/list.component.d.ts +1 -1
  149. package/list/list.model.d.ts +1 -2
  150. package/menu/menu.component.d.ts +2 -1
  151. package/menu/menu.model.d.ts +1 -0
  152. package/package.json +1 -1
  153. package/profile-data-views-list/profile-data-view/profile-data-view.component.d.ts +3 -3
  154. package/profile-data-views-list/profile-data-views-card/profile-data-views-card.component.d.ts +5 -4
  155. package/profile-data-views-list/profile-data-views-list.component.d.ts +13 -10
  156. package/profile-data-views-list/profile-data-views-list.model.d.ts +8 -0
  157. package/query-builder/common/model/legacy.d.ts +2 -0
  158. package/query-builder/common/model/operator.d.ts +11 -1
  159. package/query-builder/common/services/query-structure.service.d.ts +1 -0
  160. package/query-builder/query-builder.module.d.ts +7 -3
  161. package/remote-loader/remote-loader.service.d.ts +1 -1
  162. package/rich-html-textarea/rich-html-textarea.component.d.ts +3 -1
  163. package/rich-html-textarea/rich-html-textarea.component.theme.scss +4 -2
  164. package/select-panel/select-panel.component.d.ts +1 -2
  165. package/signature/signature-dialog.component.d.ts +1 -1
  166. package/skeleton-loader/skeleton-loader.component.d.ts +3 -3
  167. package/smart-filters/boolean-filter/boolean-filter.component.d.ts +1 -0
  168. package/smart-filters/common/model/operator.d.ts +1 -0
  169. package/smart-filters/common/model/type.d.ts +1 -1
  170. package/smart-filters/date-filter/date-filter.component.d.ts +1 -0
  171. package/smart-filters/multi-select-filter/multi-select-filter.component.d.ts +1 -0
  172. package/smart-filters/number-filter/number-filter.component.d.ts +1 -0
  173. package/smart-filters/text-filter/text-filter.component.d.ts +1 -0
  174. package/src/assets/i18n/de.ngx-lib.json +4 -1
  175. package/src/assets/i18n/en.ngx-lib.json +7 -1
  176. package/src/core/style/abstracts/mixins.scss +73 -11
  177. package/src/core/style/abstracts/variables.scss +1 -1
  178. package/src/core/style/base/base.scss +5 -3
  179. package/src/core/style/base/typography.scss +2 -1
  180. package/src/core/style/components/button.scss +11 -0
  181. package/src/core/style/components/general.scss +2 -4
  182. package/textbox/textbox.component.d.ts +2 -0
  183. package/theming.scss +5 -1
  184. package/src/assets/images/sail-away.jpg +0 -0
  185. package/src/core/style/abstracts/AbstractsIntro.stories.mdx +0 -7
@@ -27,6 +27,7 @@ class PepMenuItem {
27
27
  this.disabled = false;
28
28
  this.hidden = false;
29
29
  this.iconName = null;
30
+ this.iconPosition = 'before';
30
31
  this.type = 'regular';
31
32
  this.children = null;
32
33
  this.parent = null;
@@ -117,10 +118,10 @@ class PepMenuItemComponent {
117
118
  }
118
119
  }
119
120
  PepMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
120
- PepMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: { type: "type", parent: "parent", items: "items", selectedItem: "selectedItem", xPosition: "xPosition", subMenuIconName: "subMenuIconName" }, outputs: { menuItemClick: "menuItemClick" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>", styles: [".mat-menu-item-submenu-trigger:after{display:none}.mat-menu-item .title{margin:0 var(--pep-spacing-xs, .25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 var(--pep-spacing-sm, .5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{padding-inline-end:var(--pep-spacing-lg, 1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:var(--pep-spacing-sm, .5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:var(--pep-spacing-sm, .5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:var(--pep-spacing-sm, .5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0)}.mat-menu-item-submenu-trigger:after{width:unset;height:unset;transform:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }] });
121
+ PepMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: { type: "type", parent: "parent", items: "items", selectedItem: "selectedItem", xPosition: "xPosition", subMenuIconName: "subMenuIconName" }, outputs: { menuItemClick: "menuItemClick" }, viewQueries: [{ propertyName: "childMenu", first: true, predicate: ["childMenu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemIconPosition=\"itemIconPosition\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'before'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'after'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>", styles: [".mat-menu-item .title{margin:0 var(--pep-spacing-xs, .25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 var(--pep-spacing-sm, .5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{padding-inline-end:var(--pep-spacing-lg, 1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:var(--pep-spacing-sm, .5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:var(--pep-spacing-sm, .5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:var(--pep-spacing-sm, .5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0)}.mat-menu-item ::ng-deep .mat-menu-submenu-icon{display:none}.mat-menu-item-submenu-trigger:after{display:none;width:unset;height:unset;transform:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }] });
121
122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepMenuItemComponent, decorators: [{
122
123
  type: Component,
123
- args: [{ selector: 'pep-menu-item', template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>", styles: [".mat-menu-item-submenu-trigger:after{display:none}.mat-menu-item .title{margin:0 var(--pep-spacing-xs, .25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 var(--pep-spacing-sm, .5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{padding-inline-end:var(--pep-spacing-lg, 1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:var(--pep-spacing-sm, .5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:var(--pep-spacing-sm, .5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:var(--pep-spacing-sm, .5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0)}.mat-menu-item-submenu-trigger:after{width:unset;height:unset;transform:unset}\n"] }]
124
+ args: [{ selector: 'pep-menu-item', template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemIconPosition=\"itemIconPosition\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'before'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'after'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>", styles: [".mat-menu-item .title{margin:0 var(--pep-spacing-xs, .25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 var(--pep-spacing-sm, .5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{padding-inline-end:var(--pep-spacing-lg, 1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:var(--pep-spacing-sm, .5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:var(--pep-spacing-sm, .5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:var(--pep-spacing-sm, .5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0)}.mat-menu-item ::ng-deep .mat-menu-submenu-icon{display:none}.mat-menu-item-submenu-trigger:after{display:none;width:unset;height:unset;transform:unset}\n"] }]
124
125
  }], propDecorators: { type: [{
125
126
  type: Input
126
127
  }], parent: [{
@@ -151,6 +152,7 @@ class PepMenuComponent {
151
152
  * @memberof PepMenuComponent
152
153
  */
153
154
  this.iconName = pepIconSystemMenu.name || 'system_menu';
155
+ this.iconPosition = 'after';
154
156
  this.type = 'action';
155
157
  this.styleType = 'weak';
156
158
  this.sizeType = 'md';
@@ -274,7 +276,7 @@ class PepMenuComponent {
274
276
  }
275
277
  }
276
278
  PepMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepMenuComponent, deps: [{ token: i1$1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
277
- PepMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepMenuComponent, selector: "pep-menu", inputs: { text: "text", iconName: "iconName", type: "type", styleType: "styleType", sizeType: "sizeType", classNames: "classNames", xPosition: "xPosition", hideOnEmptyItems: "hideOnEmptyItems", items: "items", selectedItem: "selectedItem", disabled: "disabled" }, outputs: { stateChange: "stateChange", menuItemClick: "menuItemClick", menuClick: "menuClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }], animations: [
279
+ PepMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepMenuComponent, selector: "pep-menu", inputs: { text: "text", iconName: "iconName", iconPosition: "iconPosition", type: "type", styleType: "styleType", sizeType: "sizeType", classNames: "classNames", xPosition: "xPosition", hideOnEmptyItems: "hideOnEmptyItems", items: "items", selectedItem: "selectedItem", disabled: "disabled" }, outputs: { stateChange: "stateChange", menuItemClick: "menuItemClick", menuClick: "menuClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'before'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'before' }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'after'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepMenuBlurDirective, selector: "[pepMenuBlur]" }, { kind: "directive", type: i1$1.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i1$2.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepMenuItemComponent, selector: "pep-menu-item", inputs: ["type", "parent", "items", "selectedItem", "xPosition", "subMenuIconName"], outputs: ["menuItemClick"] }], animations: [
278
280
  trigger('slideInOut', [
279
281
  state('hidden', style({
280
282
  width: '0px',
@@ -309,11 +311,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
309
311
  transition('close => open', animate('500ms ease-in')),
310
312
  transition('open => close', animate('500ms ease-out')),
311
313
  ]),
312
- ], template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"] }]
314
+ ], template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'before'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'before' }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'after'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}\n"] }]
313
315
  }], ctorParameters: function () { return [{ type: i1$1.PepLayoutService }]; }, propDecorators: { text: [{
314
316
  type: Input
315
317
  }], iconName: [{
316
318
  type: Input
319
+ }], iconPosition: [{
320
+ type: Input
317
321
  }], type: [{
318
322
  type: Input
319
323
  }], styleType: [{
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-menu.mjs","sources":["../../../projects/ngx-lib/menu/menu.model.ts","../../../projects/ngx-lib/menu/menu-item.component.ts","../../../projects/ngx-lib/menu/menu-item.component.html","../../../projects/ngx-lib/menu/menu.component.ts","../../../projects/ngx-lib/menu/menu.component.html","../../../projects/ngx-lib/menu/menu.module.ts","../../../projects/ngx-lib/menu/public-api.ts","../../../projects/ngx-lib/menu/pepperi-addons-ngx-lib-menu.ts"],"sourcesContent":["export type PepMenuType = 'action' | 'action-select' | 'select';\n\nexport type PepMenuItemType = 'regular' | 'splitter';\n\nexport type PepMenuStateType = 'visible' | 'hidden';\n\nexport class PepMenuItemParent {\n key: string;\n parent?: PepMenuItemParent = null;\n\n constructor(data: PepMenuItem) {\n this.key = data.key;\n this.parent = data.parent;\n }\n}\nexport class PepMenuItem {\n key: string;\n text?: string;\n disabled?: boolean = false;\n hidden?: boolean = false;\n iconName?: string = null;\n type?: PepMenuItemType = 'regular';\n children?: Array<PepMenuItem> = null;\n parent?: PepMenuItemParent = null;\n\n constructor(data: Partial<PepMenuItem>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepMenuItemClickEvent {\n source: PepMenuItem;\n}\n\nexport interface IPepMenuStateChangeEvent {\n state: PepMenuStateType;\n}\n","import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { pepIconArrowRight } from '@pepperi-addons/ngx-lib/icon';\nimport {\n PepMenuItem,\n IPepMenuItemClickEvent,\n PepMenuType,\n PepMenuItemParent,\n} from './menu.model';\n\nexport class PepInternalMenuItem extends PepMenuItem {\n selected?: boolean = false;\n}\n\n@Component({\n selector: 'pep-menu-item',\n templateUrl: './menu-item.component.html',\n styleUrls: ['./menu-item.component.scss'],\n})\nexport class PepMenuItemComponent implements OnDestroy {\n @Input() type: PepMenuType = 'action';\n\n @Input() parent: PepMenuItemParent = null;\n @Input() items: Array<PepInternalMenuItem> = [];\n\n private _selectedItem: PepInternalMenuItem = null;\n @Input()\n set selectedItem(selectedItem: PepInternalMenuItem) {\n this.updateSelectedItem(selectedItem);\n }\n get selectedItem(): PepInternalMenuItem {\n return this._selectedItem;\n }\n\n @Input() xPosition: 'before' | 'after' = 'after';\n @Input() subMenuIconName: string = pepIconArrowRight.name;\n\n @ViewChild('childMenu', { static: true }) public childMenu: any;\n\n @Output()\n menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n ngOnDestroy(): void {\n // if (this.menuItemClick) {\n // this.menuItemClick.unsubscribe();\n // }\n }\n\n private clearSelectedItem(selectedItem: PepInternalMenuItem): void {\n if (this.items) {\n this.items.forEach((item) => {\n item.selected = selectedItem?.key === item.key;\n\n if (item.children) {\n item.children.forEach((child) => {\n this.clearSelectedChildren(child, selectedItem);\n });\n }\n });\n }\n }\n\n private clearSelectedChildren(\n item: PepInternalMenuItem,\n selectedItem: PepInternalMenuItem\n ): void {\n item.selected = selectedItem?.key === item.key;\n\n if (item.children) {\n item.children.forEach((child) => {\n this.clearSelectedChildren(child, selectedItem);\n });\n }\n }\n\n private selectParentAndChildren(\n items: Array<PepInternalMenuItem>,\n parentsKeys: Array<string>\n ) {\n if (parentsKeys.length > 0) {\n const key = parentsKeys.pop();\n const selectedParent = items.find((item) => item.key === key);\n\n if (selectedParent) {\n selectedParent.selected = true;\n this.selectParentAndChildren(\n selectedParent.children,\n parentsKeys\n );\n }\n }\n }\n\n private updateSelectedParent(\n parentItem: PepMenuItemParent,\n parentsKeys: Array<string>\n ) {\n parentsKeys.push(parentItem.key);\n\n if (parentItem.parent) {\n this.updateSelectedParent(parentItem.parent, parentsKeys);\n } else {\n this.selectParentAndChildren(this.items, parentsKeys);\n }\n }\n\n private updateSelectedItem(selectedItem: PepInternalMenuItem) {\n this.clearSelectedItem(selectedItem);\n this._selectedItem = selectedItem;\n\n if (selectedItem && selectedItem.parent) {\n this.updateSelectedParent(selectedItem.parent, []);\n }\n }\n\n onChildClicked(click: IPepMenuItemClickEvent): void {\n // click.source.selected = true;\n this.menuItemClick.emit(click);\n }\n\n onMenuItemClicked(item: PepMenuItem): void {\n // item.selected = true;\n this.menuItemClick.emit({ source: item });\n }\n}\n","<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>","import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnChanges,\n OnDestroy,\n} from '@angular/core';\nimport {\n trigger,\n state,\n style,\n transition,\n animate,\n} from '@angular/animations';\nimport {\n PepLayoutService,\n PepStyleType,\n PepSizeType,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { pepIconSystemMenu, PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport {\n PepMenuItem,\n IPepMenuItemClickEvent,\n IPepMenuStateChangeEvent,\n PepMenuStateType,\n PepMenuType,\n PepMenuItemParent,\n} from './menu.model';\n\n@Component({\n selector: 'pep-menu',\n templateUrl: './menu.component.html',\n styleUrls: ['./menu.component.scss'],\n animations: [\n trigger('slideInOut', [\n state(\n 'hidden',\n style({\n width: '0px',\n padding: '0',\n margin: '0',\n minWidth: '0px',\n opacity: 0,\n })\n ),\n state(\n 'visible',\n style({\n width: 'inherit',\n opacity: 1,\n })\n ),\n transition('close => open', animate('500ms ease-in')),\n transition('open => close', animate('500ms ease-out')),\n ]),\n ],\n})\nexport class PepMenuComponent implements OnChanges, OnDestroy {\n @Input() text = '';\n /**\n * The icon name to show on the menu, look in (@link icon -> All icons), default icon `system_menu`\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepMenuComponent\n */\n @Input() iconName: PepIconType = pepIconSystemMenu.name || 'system_menu';\n @Input() type: PepMenuType = 'action';\n @Input() styleType: PepStyleType = 'weak';\n @Input() sizeType: PepSizeType = 'md';\n @Input() classNames = '';\n @Input() xPosition: 'before' | 'after' = 'after';\n @Input() hideOnEmptyItems = false;\n\n private _items: Array<PepMenuItem> = null;\n @Input()\n set items(items: Array<PepMenuItem>) {\n this.setItemsParent(items);\n this._items = items;\n }\n get items(): Array<PepMenuItem> {\n return this._items;\n }\n\n @Input() selectedItem: PepMenuItem = null;\n @Input() disabled = false;\n\n @Output()\n stateChange: EventEmitter<IPepMenuStateChangeEvent> = new EventEmitter<IPepMenuStateChangeEvent>();\n @Output()\n menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n @Output() menuClick: EventEmitter<void> = new EventEmitter<void>();\n\n state: PepMenuStateType = 'hidden';\n\n PepScreenSizeType = PepScreenSizeType;\n screenSize: PepScreenSizeType;\n\n displayText: string = null;\n\n constructor(public layoutService: PepLayoutService) {\n this.layoutService.onResize$.subscribe((size) => {\n this.screenSize = size;\n });\n }\n\n private setChildrenParent(\n item: PepMenuItem,\n parent: PepMenuItemParent\n ): void {\n item.parent = parent;\n\n if (item.children && item.children.length > 0) {\n item.children.forEach((child) => {\n this.setChildrenParent(child, new PepMenuItemParent(item));\n });\n }\n }\n\n private setItemsParent(items: Array<PepMenuItem>): void {\n if (items) {\n items.forEach((item) => {\n item.parent = null;\n\n if (item.children && item.children.length > 0) {\n item.children.forEach((child) => {\n this.setChildrenParent(\n child,\n new PepMenuItemParent(item)\n );\n });\n }\n });\n }\n }\n\n private updateText(): void {\n if (this.type === 'select' || this.type === 'action-select') {\n this.displayText = this.selectedItem\n ? this.selectedItem.text\n : this.text;\n } else {\n this.displayText = this.text;\n }\n }\n\n ngOnChanges(changes): void {\n if (this.hideOnEmptyItems) {\n this.state =\n !this.disabled &&\n this.items &&\n this.items.filter((item) => !item.disabled).length > 0\n ? 'visible'\n : 'hidden';\n } else {\n this.state = 'visible';\n }\n\n if (this.type === 'select') {\n if (\n this.selectedItem === null &&\n this.items &&\n this.items.length > 0\n ) {\n this.selectedItem = this.items[0];\n }\n }\n\n this.updateText();\n }\n\n ngOnDestroy(): void {\n // if (this.menuItemClick) {\n // this.menuItemClick.unsubscribe();\n // }\n }\n\n onMenuClicked(event): void {\n this.menuClick.emit();\n }\n\n // private manipulateData(menuItem: PepMenuItem) {\n // menuItem.children = null;\n\n // if (menuItem.parent) {\n // menuItem.parent = new PepMenuItem(menuItem.parent);\n // this.manipulateData(menuItem.parent);\n // }\n // }\n\n onMenuItemClicked(click: IPepMenuItemClickEvent): void {\n this.selectedItem = click.source;\n this.updateText();\n\n // Manipulate click data because the data is dupplicate in parent.children\n // const tmp = new PepMenuItem(click.source);\n // this.manipulateData(tmp);\n // click.source = tmp;\n\n this.menuItemClick.emit(click);\n }\n\n animationDone(): void {\n if (this.state === 'hidden') {\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, 500);\n }\n }\n\n animationStart(): void {\n if (this.state === 'visible') {\n this.stateChange.emit({ state: this.state });\n }\n }\n\n onMenuOpened() {\n this.state = 'visible';\n this.stateChange.emit({ state: this.state });\n }\n\n onMenuClosed() {\n this.state = 'hidden';\n this.stateChange.emit({ state: this.state });\n }\n}\n","<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMenu,\n pepIconArrowRight,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepMenuComponent } from './menu.component';\nimport { PepMenuItemComponent } from './menu-item.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatMenuModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepMenuComponent],\n declarations: [PepMenuComponent, PepMenuItemComponent],\n})\nexport class PepMenuModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMenu,\n pepIconArrowRight,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/menu\n */\nexport * from './menu.module';\nexport * from './menu.model';\nexport * from './menu.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i4","i5","i1","i2","i3","i6","i7.PepMenuItemComponent"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-menu.mjs","sources":["../../../projects/ngx-lib/menu/menu.model.ts","../../../projects/ngx-lib/menu/menu-item.component.ts","../../../projects/ngx-lib/menu/menu-item.component.html","../../../projects/ngx-lib/menu/menu.component.ts","../../../projects/ngx-lib/menu/menu.component.html","../../../projects/ngx-lib/menu/menu.module.ts","../../../projects/ngx-lib/menu/public-api.ts","../../../projects/ngx-lib/menu/pepperi-addons-ngx-lib-menu.ts"],"sourcesContent":["export type PepMenuType = 'action' | 'action-select' | 'select';\n\nexport type PepMenuItemType = 'regular' | 'splitter';\n\nexport type PepMenuStateType = 'visible' | 'hidden';\n\nexport class PepMenuItemParent {\n key: string;\n parent?: PepMenuItemParent = null;\n\n constructor(data: PepMenuItem) {\n this.key = data.key;\n this.parent = data.parent;\n }\n}\nexport class PepMenuItem {\n key: string;\n text?: string;\n disabled?: boolean = false;\n hidden?: boolean = false;\n iconName?: string = null;\n iconPosition?: 'before' | 'after' = 'before';\n type?: PepMenuItemType = 'regular';\n children?: Array<PepMenuItem> = null;\n parent?: PepMenuItemParent = null;\n\n constructor(data: Partial<PepMenuItem>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepMenuItemClickEvent {\n source: PepMenuItem;\n}\n\nexport interface IPepMenuStateChangeEvent {\n state: PepMenuStateType;\n}\n","import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { pepIconArrowRight } from '@pepperi-addons/ngx-lib/icon';\nimport {\n PepMenuItem,\n IPepMenuItemClickEvent,\n PepMenuType,\n PepMenuItemParent,\n} from './menu.model';\n\nexport class PepInternalMenuItem extends PepMenuItem {\n selected?: boolean = false;\n}\n\n@Component({\n selector: 'pep-menu-item',\n templateUrl: './menu-item.component.html',\n styleUrls: ['./menu-item.component.scss'],\n})\nexport class PepMenuItemComponent implements OnDestroy {\n @Input() type: PepMenuType = 'action';\n\n @Input() parent: PepMenuItemParent = null;\n @Input() items: Array<PepInternalMenuItem> = [];\n\n private _selectedItem: PepInternalMenuItem = null;\n @Input()\n set selectedItem(selectedItem: PepInternalMenuItem) {\n this.updateSelectedItem(selectedItem);\n }\n get selectedItem(): PepInternalMenuItem {\n return this._selectedItem;\n }\n\n @Input() xPosition: 'before' | 'after' = 'after';\n @Input() subMenuIconName: string = pepIconArrowRight.name;\n\n @ViewChild('childMenu', { static: true }) public childMenu: any;\n\n @Output()\n menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n ngOnDestroy(): void {\n // if (this.menuItemClick) {\n // this.menuItemClick.unsubscribe();\n // }\n }\n\n private clearSelectedItem(selectedItem: PepInternalMenuItem): void {\n if (this.items) {\n this.items.forEach((item) => {\n item.selected = selectedItem?.key === item.key;\n\n if (item.children) {\n item.children.forEach((child) => {\n this.clearSelectedChildren(child, selectedItem);\n });\n }\n });\n }\n }\n\n private clearSelectedChildren(\n item: PepInternalMenuItem,\n selectedItem: PepInternalMenuItem\n ): void {\n item.selected = selectedItem?.key === item.key;\n\n if (item.children) {\n item.children.forEach((child) => {\n this.clearSelectedChildren(child, selectedItem);\n });\n }\n }\n\n private selectParentAndChildren(\n items: Array<PepInternalMenuItem>,\n parentsKeys: Array<string>\n ) {\n if (parentsKeys.length > 0) {\n const key = parentsKeys.pop();\n const selectedParent = items.find((item) => item.key === key);\n\n if (selectedParent) {\n selectedParent.selected = true;\n this.selectParentAndChildren(\n selectedParent.children,\n parentsKeys\n );\n }\n }\n }\n\n private updateSelectedParent(\n parentItem: PepMenuItemParent,\n parentsKeys: Array<string>\n ) {\n parentsKeys.push(parentItem.key);\n\n if (parentItem.parent) {\n this.updateSelectedParent(parentItem.parent, parentsKeys);\n } else {\n this.selectParentAndChildren(this.items, parentsKeys);\n }\n }\n\n private updateSelectedItem(selectedItem: PepInternalMenuItem) {\n this.clearSelectedItem(selectedItem);\n this._selectedItem = selectedItem;\n\n if (selectedItem && selectedItem.parent) {\n this.updateSelectedParent(selectedItem.parent, []);\n }\n }\n\n onChildClicked(click: IPepMenuItemClickEvent): void {\n // click.source.selected = true;\n this.menuItemClick.emit(click);\n }\n\n onMenuItemClicked(item: PepMenuItem): void {\n // item.selected = true;\n this.menuItemClick.emit({ source: item });\n }\n}\n","<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n <ng-container *ngFor=\"let menuItem of items\">\n <ng-container *ngIf=\"!menuItem.hidden\">\n <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n <ng-template #splitterBlock>\n <div mat-menu-item class=\"splitter\"></div>\n </ng-template>\n\n <ng-template #buttonBlock>\n <ng-container\n *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n </ng-container>\n <ng-template #childrenBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: true\n }\"></ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n (menuItemClick)=\"onChildClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularBlock>\n <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n pepRtlDirection [disabled]=\"menuItem.disabled\"\n [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n itemIconName: menuItem.iconName,\n itemIconPosition: menuItem.iconPosition,\n itemText: menuItem.text,\n itemType: menuItem.type,\n hasChildren: false\n }\"></ng-container>\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemIconPosition=\"itemIconPosition\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n let-hasChildren=\"hasChildren\">\n <ng-container>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'before'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n [title]=\"itemText\">\n {{ itemText }}\n </span>\n <mat-icon *ngIf=\"itemIconName && itemIconPosition === 'after'\" class=\"pull-left flip\">\n <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n </mat-icon>\n <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n </mat-icon>\n </ng-container>\n</ng-template>","import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnChanges,\n OnDestroy,\n} from '@angular/core';\nimport {\n trigger,\n state,\n style,\n transition,\n animate,\n} from '@angular/animations';\nimport {\n PepLayoutService,\n PepStyleType,\n PepSizeType,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { pepIconSystemMenu, PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport {\n PepMenuItem,\n IPepMenuItemClickEvent,\n IPepMenuStateChangeEvent,\n PepMenuStateType,\n PepMenuType,\n PepMenuItemParent,\n} from './menu.model';\n\n@Component({\n selector: 'pep-menu',\n templateUrl: './menu.component.html',\n styleUrls: ['./menu.component.scss'],\n animations: [\n trigger('slideInOut', [\n state(\n 'hidden',\n style({\n width: '0px',\n padding: '0',\n margin: '0',\n minWidth: '0px',\n opacity: 0,\n })\n ),\n state(\n 'visible',\n style({\n width: 'inherit',\n opacity: 1,\n })\n ),\n transition('close => open', animate('500ms ease-in')),\n transition('open => close', animate('500ms ease-out')),\n ]),\n ],\n})\nexport class PepMenuComponent implements OnChanges, OnDestroy {\n @Input() text = '';\n /**\n * The icon name to show on the menu, look in (@link icon -> All icons), default icon `system_menu`\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepMenuComponent\n */\n @Input() iconName: PepIconType = pepIconSystemMenu.name || 'system_menu';\n @Input() iconPosition: 'before' | 'after' = 'after';\n @Input() type: PepMenuType = 'action';\n @Input() styleType: PepStyleType = 'weak';\n @Input() sizeType: PepSizeType = 'md';\n @Input() classNames = '';\n @Input() xPosition: 'before' | 'after' = 'after';\n @Input() hideOnEmptyItems = false;\n\n private _items: Array<PepMenuItem> = null;\n @Input()\n set items(items: Array<PepMenuItem>) {\n this.setItemsParent(items);\n this._items = items;\n }\n get items(): Array<PepMenuItem> {\n return this._items;\n }\n\n @Input() selectedItem: PepMenuItem = null;\n @Input() disabled = false;\n\n @Output()\n stateChange: EventEmitter<IPepMenuStateChangeEvent> = new EventEmitter<IPepMenuStateChangeEvent>();\n @Output()\n menuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n @Output() menuClick: EventEmitter<void> = new EventEmitter<void>();\n\n state: PepMenuStateType = 'hidden';\n\n PepScreenSizeType = PepScreenSizeType;\n screenSize: PepScreenSizeType;\n\n displayText: string = null;\n\n constructor(public layoutService: PepLayoutService) {\n this.layoutService.onResize$.subscribe((size) => {\n this.screenSize = size;\n });\n }\n\n private setChildrenParent(\n item: PepMenuItem,\n parent: PepMenuItemParent\n ): void {\n item.parent = parent;\n\n if (item.children && item.children.length > 0) {\n item.children.forEach((child) => {\n this.setChildrenParent(child, new PepMenuItemParent(item));\n });\n }\n }\n\n private setItemsParent(items: Array<PepMenuItem>): void {\n if (items) {\n items.forEach((item) => {\n item.parent = null;\n\n if (item.children && item.children.length > 0) {\n item.children.forEach((child) => {\n this.setChildrenParent(\n child,\n new PepMenuItemParent(item)\n );\n });\n }\n });\n }\n }\n\n private updateText(): void {\n if (this.type === 'select' || this.type === 'action-select') {\n this.displayText = this.selectedItem\n ? this.selectedItem.text\n : this.text;\n } else {\n this.displayText = this.text;\n }\n }\n\n ngOnChanges(changes): void {\n if (this.hideOnEmptyItems) {\n this.state =\n !this.disabled &&\n this.items &&\n this.items.filter((item) => !item.disabled).length > 0\n ? 'visible'\n : 'hidden';\n } else {\n this.state = 'visible';\n }\n\n if (this.type === 'select') {\n if (\n this.selectedItem === null &&\n this.items &&\n this.items.length > 0\n ) {\n this.selectedItem = this.items[0];\n }\n }\n\n this.updateText();\n }\n\n ngOnDestroy(): void {\n // if (this.menuItemClick) {\n // this.menuItemClick.unsubscribe();\n // }\n }\n\n onMenuClicked(event): void {\n this.menuClick.emit();\n }\n\n // private manipulateData(menuItem: PepMenuItem) {\n // menuItem.children = null;\n\n // if (menuItem.parent) {\n // menuItem.parent = new PepMenuItem(menuItem.parent);\n // this.manipulateData(menuItem.parent);\n // }\n // }\n\n onMenuItemClicked(click: IPepMenuItemClickEvent): void {\n this.selectedItem = click.source;\n this.updateText();\n\n // Manipulate click data because the data is dupplicate in parent.children\n // const tmp = new PepMenuItem(click.source);\n // this.manipulateData(tmp);\n // click.source = tmp;\n\n this.menuItemClick.emit(click);\n }\n\n animationDone(): void {\n if (this.state === 'hidden') {\n setTimeout(() => {\n this.stateChange.emit({ state: this.state });\n }, 500);\n }\n }\n\n animationStart(): void {\n if (this.state === 'visible') {\n this.stateChange.emit({ state: this.state });\n }\n }\n\n onMenuOpened() {\n this.state = 'visible';\n this.stateChange.emit({ state: this.state });\n }\n\n onMenuClosed() {\n this.state = 'hidden';\n this.stateChange.emit({ state: this.state });\n }\n}\n","<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n </ng-container>\n <ng-template #animationTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS }\"\n pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n [matMenuTriggerFor]=\"menu.childMenu\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu-item>\n </ng-template>\n <ng-template #regularTemplate>\n <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n <ng-template #menuTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur [matMenuTriggerFor]=\"menu.childMenu\" [disabled]=\"disabled\"\n (menuClick)=\"onMenuClicked($event)\" (menuOpened)=\"onMenuOpened()\" (menuClosed)=\"onMenuClosed()\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n (menuItemClick)=\"onMenuItemClicked($event)\" ></pep-menu-item>\n </ng-template>\n <ng-template #buttonTemplate>\n <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n </ng-container>\n </button>\n </ng-template>\n </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'before'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'before' }\" [title]=\"displayText\">\n {{ displayText }}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'after'\">\n <pep-icon name=\"{{ iconName }}\"></pep-icon>\n </mat-icon>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMenu,\n pepIconArrowRight,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepMenuComponent } from './menu.component';\nimport { PepMenuItemComponent } from './menu-item.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatFormFieldModule,\n MatMenuModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepMenuComponent],\n declarations: [PepMenuComponent, PepMenuItemComponent],\n})\nexport class PepMenuModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMenu,\n pepIconArrowRight,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/menu\n */\nexport * from './menu.module';\nexport * from './menu.model';\nexport * from './menu.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i4","i5","i1","i2","i3","i6","i7.PepMenuItemComponent"],"mappings":";;;;;;;;;;;;;;;;;MAMa,iBAAiB,CAAA;AAI1B,IAAA,WAAA,CAAY,IAAiB,EAAA;QAF7B,IAAM,CAAA,MAAA,GAAuB,IAAI,CAAC;AAG9B,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;KAC7B;AACJ,CAAA;MACY,WAAW,CAAA;AAWpB,IAAA,WAAA,CAAY,IAA0B,EAAA;QARtC,IAAQ,CAAA,QAAA,GAAa,KAAK,CAAC;QAC3B,IAAM,CAAA,MAAA,GAAa,KAAK,CAAC;QACzB,IAAQ,CAAA,QAAA,GAAY,IAAI,CAAC;QACzB,IAAY,CAAA,YAAA,GAAwB,QAAQ,CAAC;QAC7C,IAAI,CAAA,IAAA,GAAqB,SAAS,CAAC;QACnC,IAAQ,CAAA,QAAA,GAAwB,IAAI,CAAC;QACrC,IAAM,CAAA,MAAA,GAAuB,IAAI,CAAC;AAG9B,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC7B;AACJ;;ACbK,MAAO,mBAAoB,SAAQ,WAAW,CAAA;AAApD,IAAA,WAAA,GAAA;;QACI,IAAQ,CAAA,QAAA,GAAa,KAAK,CAAC;KAC9B;AAAA,CAAA;MAOY,oBAAoB,CAAA;AALjC,IAAA,WAAA,GAAA;QAMa,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;QAE7B,IAAM,CAAA,MAAA,GAAsB,IAAI,CAAC;QACjC,IAAK,CAAA,KAAA,GAA+B,EAAE,CAAC;QAExC,IAAa,CAAA,aAAA,GAAwB,IAAI,CAAC;QASzC,IAAS,CAAA,SAAA,GAAuB,OAAO,CAAC;AACxC,QAAA,IAAA,CAAA,eAAe,GAAW,iBAAiB,CAAC,IAAI,CAAC;AAK1D,QAAA,IAAA,CAAA,aAAa,GAAyC,IAAI,YAAY,EAA0B,CAAC;AAoFpG,KAAA;IAlGG,IACI,YAAY,CAAC,YAAiC,EAAA;AAC9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;KACzC;AACD,IAAA,IAAI,YAAY,GAAA;QACZ,OAAO,IAAI,CAAC,aAAa,CAAC;KAC7B;IAUD,WAAW,GAAA;;;;KAIV;AAEO,IAAA,iBAAiB,CAAC,YAAiC,EAAA;QACvD,IAAI,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;gBACxB,IAAI,CAAC,QAAQ,GAAG,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC;gBAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC5B,wBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AACpD,qBAAC,CAAC,CAAC;AACN,iBAAA;AACL,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;IAEO,qBAAqB,CACzB,IAAyB,EACzB,YAAiC,EAAA;QAEjC,IAAI,CAAC,QAAQ,GAAG,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC5B,gBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AACpD,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;IAEO,uBAAuB,CAC3B,KAAiC,EACjC,WAA0B,EAAA;AAE1B,QAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AACxB,YAAA,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;AAC9B,YAAA,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AAE9D,YAAA,IAAI,cAAc,EAAE;AAChB,gBAAA,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;gBAC/B,IAAI,CAAC,uBAAuB,CACxB,cAAc,CAAC,QAAQ,EACvB,WAAW,CACd,CAAC;AACL,aAAA;AACJ,SAAA;KACJ;IAEO,oBAAoB,CACxB,UAA6B,EAC7B,WAA0B,EAAA;AAE1B,QAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,UAAU,CAAC,MAAM,EAAE;YACnB,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAC7D,SAAA;AAAM,aAAA;YACH,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACzD,SAAA;KACJ;AAEO,IAAA,kBAAkB,CAAC,YAAiC,EAAA;AACxD,QAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AACrC,QAAA,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;AAElC,QAAA,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,EAAE;YACrC,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AACtD,SAAA;KACJ;AAED,IAAA,cAAc,CAAC,KAA6B,EAAA;;AAExC,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;AAED,IAAA,iBAAiB,CAAC,IAAiB,EAAA;;QAE/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;KAC7C;;iHAxGQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qGAApB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzBjC,iwHAiEc,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDxCD,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,cAAA,EAAA,WAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;+BACI,eAAe,EAAA,QAAA,EAAA,iwHAAA,EAAA,MAAA,EAAA,CAAA,k1BAAA,CAAA,EAAA,CAAA;8BAKhB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAIF,YAAY,EAAA,CAAA;sBADf,KAAK;gBAQG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAE2C,SAAS,EAAA,CAAA;sBAAzD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBAGxC,aAAa,EAAA,CAAA;sBADZ,MAAM;;;MEcE,gBAAgB,CAAA;AA2CzB,IAAA,WAAA,CAAmB,aAA+B,EAAA;QAA/B,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;QA1CzC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;AACnB;;;;;AAKG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAgB,iBAAiB,CAAC,IAAI,IAAI,aAAa,CAAC;QAChE,IAAY,CAAA,YAAA,GAAuB,OAAO,CAAC;QAC3C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;QAC7B,IAAS,CAAA,SAAA,GAAiB,MAAM,CAAC;QACjC,IAAQ,CAAA,QAAA,GAAgB,IAAI,CAAC;QAC7B,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;QAChB,IAAS,CAAA,SAAA,GAAuB,OAAO,CAAC;QACxC,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;QAE1B,IAAM,CAAA,MAAA,GAAuB,IAAI,CAAC;QAUjC,IAAY,CAAA,YAAA,GAAgB,IAAI,CAAC;QACjC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAG1B,QAAA,IAAA,CAAA,WAAW,GAA2C,IAAI,YAAY,EAA4B,CAAC;AAEnG,QAAA,IAAA,CAAA,aAAa,GAAyC,IAAI,YAAY,EAA0B,CAAC;AACvF,QAAA,IAAA,CAAA,SAAS,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAEnE,IAAK,CAAA,KAAA,GAAqB,QAAQ,CAAC;QAEnC,IAAiB,CAAA,iBAAA,GAAG,iBAAiB,CAAC;QAGtC,IAAW,CAAA,WAAA,GAAW,IAAI,CAAC;QAGvB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,KAAI;AAC5C,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AAC3B,SAAC,CAAC,CAAC;KACN;IA7BD,IACI,KAAK,CAAC,KAAyB,EAAA;AAC/B,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;IAwBO,iBAAiB,CACrB,IAAiB,EACjB,MAAyB,EAAA;AAEzB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;gBAC5B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;AAEO,IAAA,cAAc,CAAC,KAAyB,EAAA;AAC5C,QAAA,IAAI,KAAK,EAAE;AACP,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACnB,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBAEnB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;wBAC5B,IAAI,CAAC,iBAAiB,CAClB,KAAK,EACL,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAC9B,CAAC;AACN,qBAAC,CAAC,CAAC;AACN,iBAAA;AACL,aAAC,CAAC,CAAC;AACN,SAAA;KACJ;IAEO,UAAU,GAAA;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,EAAE;AACzD,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY;AAChC,kBAAE,IAAI,CAAC,YAAY,CAAC,IAAI;AACxB,kBAAE,IAAI,CAAC,IAAI,CAAC;AACnB,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;AAChC,SAAA;KACJ;AAED,IAAA,WAAW,CAAC,OAAO,EAAA;QACf,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK;gBACN,CAAC,IAAI,CAAC,QAAQ;AACV,oBAAA,IAAI,CAAC,KAAK;AACV,oBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC;AACtD,sBAAE,SAAS;sBACT,QAAQ,CAAC;AACtB,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AAC1B,SAAA;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACxB,YAAA,IACI,IAAI,CAAC,YAAY,KAAK,IAAI;AAC1B,gBAAA,IAAI,CAAC,KAAK;AACV,gBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EACvB;gBACE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACrC,aAAA;AACJ,SAAA;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAED,WAAW,GAAA;;;;KAIV;AAED,IAAA,aAAa,CAAC,KAAK,EAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;;;;;;;;AAWD,IAAA,iBAAiB,CAAC,KAA6B,EAAA;AAC3C,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,UAAU,EAAE,CAAC;;;;;AAOlB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;IAED,aAAa,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACzB,UAAU,CAAC,MAAK;AACZ,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aAChD,EAAE,GAAG,CAAC,CAAC;AACX,SAAA;KACJ;IAED,cAAc,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAChD,SAAA;KACJ;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAChD;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;AACtB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAChD;;6GAvKQ,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;iGAAhB,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3D7B,yuGAoDc,EDjBE,MAAA,EAAA,CAAA,uFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAJ,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAG,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,cAAA,EAAA,WAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA;QACR,OAAO,CAAC,YAAY,EAAE;AAClB,YAAA,KAAK,CACD,QAAQ,EACR,KAAK,CAAC;AACF,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,MAAM,EAAE,GAAG;AACX,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,OAAO,EAAE,CAAC;AACb,aAAA,CAAC,CACL;AACD,YAAA,KAAK,CACD,SAAS,EACT,KAAK,CAAC;AACF,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,OAAO,EAAE,CAAC;AACb,aAAA,CAAC,CACL;AACD,YAAA,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;AACrD,YAAA,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;SACzD,CAAC;AACL,KAAA,EAAA,CAAA,CAAA;2FAEQ,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA5B5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAGR,UAAA,EAAA;wBACR,OAAO,CAAC,YAAY,EAAE;AAClB,4BAAA,KAAK,CACD,QAAQ,EACR,KAAK,CAAC;AACF,gCAAA,KAAK,EAAE,KAAK;AACZ,gCAAA,OAAO,EAAE,GAAG;AACZ,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,QAAQ,EAAE,KAAK;AACf,gCAAA,OAAO,EAAE,CAAC;AACb,6BAAA,CAAC,CACL;AACD,4BAAA,KAAK,CACD,SAAS,EACT,KAAK,CAAC;AACF,gCAAA,KAAK,EAAE,SAAS;AAChB,gCAAA,OAAO,EAAE,CAAC;AACb,6BAAA,CAAC,CACL;AACD,4BAAA,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;AACrD,4BAAA,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;yBACzD,CAAC;AACL,qBAAA,EAAA,QAAA,EAAA,yuGAAA,EAAA,MAAA,EAAA,CAAA,uFAAA,CAAA,EAAA,CAAA;yGAGQ,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAOG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBAIF,KAAK,EAAA,CAAA;sBADR,KAAK;gBASG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAGN,WAAW,EAAA,CAAA;sBADV,MAAM;gBAGP,aAAa,EAAA,CAAA;sBADZ,MAAM;gBAEG,SAAS,EAAA,CAAA;sBAAlB,MAAM;;;ME3DE,aAAa,CAAA;AACtB,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;AAChD,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,iBAAiB;YACjB,iBAAiB;AACpB,SAAA,CAAC,CAAC;KACN;;0GANQ,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAJ,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAb,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EAFP,YAAA,EAAA,CAAA,gBAAgB,EAAE,oBAAoB,aAXjD,YAAY;;QAEZ,eAAe;QACf,kBAAkB;QAClB,aAAa;QACb,aAAa;;QAEb,eAAe;AACf,QAAA,aAAa,aAEP,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAGjB,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAblB,YAAY;;QAEZ,eAAe;QACf,kBAAkB;QAClB,aAAa;QACb,aAAa;;QAEb,eAAe;QACf,aAAa,CAAA,EAAA,CAAA,CAAA;2FAKR,aAAa,EAAA,UAAA,EAAA,CAAA;kBAfzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,kBAAkB;wBAClB,aAAa;wBACb,aAAa;;wBAEb,eAAe;wBACf,aAAa;AAChB,qBAAA;oBACD,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,YAAY,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,CAAC;AACzD,iBAAA,CAAA;;;ACjCD;;AAEG;;ACFH;;AAEG;;;;"}
@@ -69,15 +69,18 @@ class ProfileDataViewsCardComponent {
69
69
  this.isDefault = false;
70
70
  this.dataViewEditClick = new EventEmitter();
71
71
  this.dataViewDeleteClick = new EventEmitter();
72
+ this.dataViewImportClick = new EventEmitter();
72
73
  this.menuItems = [];
73
74
  }
74
75
  loadMenuItems() {
75
76
  const removeKey = 'ACTIONS.REMOVE';
77
+ const importKey = 'ACTIONS.IMPORT';
76
78
  // Load translation before get the options in the children.
77
- this.translate.get([removeKey]).subscribe((res) => {
78
- this.menuItems = [
79
- { key: 'delete', text: this.translate.instant(res[removeKey]) }
80
- ];
79
+ this.translate.get([removeKey, importKey]).subscribe((res) => {
80
+ if (!this.isDefault) {
81
+ this.menuItems.push({ key: 'delete', text: this.translate.instant(res[removeKey]) });
82
+ }
83
+ this.menuItems.push({ key: 'import', text: this.translate.instant(res[importKey]) });
81
84
  });
82
85
  }
83
86
  ngOnInit() {
@@ -88,20 +91,31 @@ class ProfileDataViewsCardComponent {
88
91
  if (action.source.key === 'delete') {
89
92
  this.onDataViewDeleteClicked({ dataViewId: this.dataViews[0].dataViewId });
90
93
  }
94
+ else if (action.source.key === 'import') {
95
+ this.dataViewImportClick.emit({ profileId: this.profileId, dataViewId: this.dataViews[0].dataViewId });
96
+ }
91
97
  }
92
98
  }
93
99
  onDataViewEditClicked(event) {
94
- this.dataViewEditClick.emit(event);
100
+ const newEvent = {
101
+ profileId: this.profileId,
102
+ dataViewId: event.dataViewId
103
+ };
104
+ this.dataViewEditClick.emit(newEvent);
95
105
  }
96
106
  onDataViewDeleteClicked(event) {
97
- this.dataViewDeleteClick.emit(event);
107
+ const newEvent = {
108
+ profileId: this.profileId,
109
+ dataViewId: event.dataViewId
110
+ };
111
+ this.dataViewDeleteClick.emit(newEvent);
98
112
  }
99
113
  }
100
114
  ProfileDataViewsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ProfileDataViewsCardComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
101
- ProfileDataViewsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ProfileDataViewsCardComponent, selector: "pep-profile-data-views-card", inputs: { profileId: "profileId", title: "title", dataViews: "dataViews", configurationPerScreenSize: "configurationPerScreenSize", isDefault: "isDefault" }, outputs: { dataViewEditClick: "dataViewEditClick", dataViewDeleteClick: "dataViewDeleteClick" }, ngImport: i0, template: "<div class=\"profile-data-views-card-container\">\n <div class=\"card-top-bar pep-border-bottom\">\n <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n <span class=\"title-md\">{{title}}&nbsp;</span>\n <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n translate)}}&nbsp;\n </span>\n </div>\n <pep-menu *ngIf=\"!configurationPerScreenSize && !isDefault\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu>\n </div>\n\n <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-view>\n</div>", styles: [".profile-data-views-card-container{padding:var(--pep-spacing-lg, 1rem);border-radius:var(--pep-border-radius-md, .25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:var(--pep-top-bar-field-height, 2.5rem);margin-bottom:var(--pep-spacing-md, .75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}\n", ".profile-data-views-card-container{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "component", type: ProfileDataViewComponent, selector: "pep-profile-data-view", inputs: ["dataViewId", "title", "fields", "canDelete"], outputs: ["editClick", "deleteClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
115
+ ProfileDataViewsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ProfileDataViewsCardComponent, selector: "pep-profile-data-views-card", inputs: { profileId: "profileId", title: "title", dataViews: "dataViews", configurationPerScreenSize: "configurationPerScreenSize", isDefault: "isDefault" }, outputs: { dataViewEditClick: "dataViewEditClick", dataViewDeleteClick: "dataViewDeleteClick", dataViewImportClick: "dataViewImportClick" }, ngImport: i0, template: "<div class=\"profile-data-views-card-container\">\n <div class=\"card-top-bar pep-border-bottom\">\n <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n <span class=\"title-md\">{{title}}&nbsp;</span>\n <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n translate)}}&nbsp;\n </span>\n </div>\n <pep-menu *ngIf=\"!configurationPerScreenSize\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu>\n </div>\n\n <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-view>\n</div>", styles: [".profile-data-views-card-container{padding:var(--pep-spacing-lg, 1rem);border-radius:var(--pep-border-radius-md, .25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:var(--pep-top-bar-field-height, 2.5rem);margin-bottom:var(--pep-spacing-md, .75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}\n", ".profile-data-views-card-container{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }, { kind: "component", type: ProfileDataViewComponent, selector: "pep-profile-data-view", inputs: ["dataViewId", "title", "fields", "canDelete"], outputs: ["editClick", "deleteClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
102
116
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ProfileDataViewsCardComponent, decorators: [{
103
117
  type: Component,
104
- args: [{ selector: 'pep-profile-data-views-card', template: "<div class=\"profile-data-views-card-container\">\n <div class=\"card-top-bar pep-border-bottom\">\n <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n <span class=\"title-md\">{{title}}&nbsp;</span>\n <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n translate)}}&nbsp;\n </span>\n </div>\n <pep-menu *ngIf=\"!configurationPerScreenSize && !isDefault\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu>\n </div>\n\n <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-view>\n</div>", styles: [".profile-data-views-card-container{padding:var(--pep-spacing-lg, 1rem);border-radius:var(--pep-border-radius-md, .25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:var(--pep-top-bar-field-height, 2.5rem);margin-bottom:var(--pep-spacing-md, .75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}\n", ".profile-data-views-card-container{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}\n"] }]
118
+ args: [{ selector: 'pep-profile-data-views-card', template: "<div class=\"profile-data-views-card-container\">\n <div class=\"card-top-bar pep-border-bottom\">\n <div *ngIf=\"title?.length > 0\" class=\"title ellipsis\"\n [title]=\"title + ' ' + (isDefault ? ('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' | translate) : '')\">\n <span class=\"title-md\">{{title}}&nbsp;</span>\n <span *ngIf=\"isDefault\" class=\"color-dimmed\">{{('PROFILE_DATA_VIEWS_LIST.DEFAULT_PROFILE' |\n translate)}}&nbsp;\n </span>\n </div>\n <pep-menu *ngIf=\"!configurationPerScreenSize\" sizeType=\"sm\" [items]=\"menuItems\" (menuItemClick)=\"onMenuItemClicked($event)\">\n </pep-menu>\n </div>\n\n <pep-profile-data-view *ngFor=\"let dataView of dataViews\" [dataViewId]=\"dataView.dataViewId\"\n [title]=\"configurationPerScreenSize ? dataView.viewType : ''\" [fields]=\"dataView.fields\" [canDelete]=\"!(isDefault && dataView.viewType === 'Tablet')\"\n (editClick)=\"onDataViewEditClicked($event)\" (deleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-view>\n</div>", styles: [".profile-data-views-card-container{padding:var(--pep-spacing-lg, 1rem);border-radius:var(--pep-border-radius-md, .25rem);width:320px;max-width:320px}.profile-data-views-card-container .card-top-bar{height:var(--pep-top-bar-field-height, 2.5rem);margin-bottom:var(--pep-spacing-md, .75rem);display:flex;justify-content:space-between}.profile-data-views-card-container .card-top-bar .title{display:block;height:calc(var(--pep-top-bar-field-height, 2.5rem) - var(--pep-spacing-sm, .5rem));align-self:center}\n", ".profile-data-views-card-container{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}\n"] }]
105
119
  }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { profileId: [{
106
120
  type: Input
107
121
  }], title: [{
@@ -116,6 +130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
116
130
  type: Output
117
131
  }], dataViewDeleteClick: [{
118
132
  type: Output
133
+ }], dataViewImportClick: [{
134
+ type: Output
119
135
  }] } });
120
136
 
121
137
  class ProfileDataViewsListComponent {
@@ -125,54 +141,68 @@ class ProfileDataViewsListComponent {
125
141
  this._availableProfiles = [];
126
142
  this._profileDataViewsList = [];
127
143
  this.configurationPerScreenSize = false;
128
- this.saveNewProfileClick = new EventEmitter();
144
+ this.saveProfileClick = new EventEmitter();
129
145
  this.dataViewEditClick = new EventEmitter();
130
146
  this.dataViewDeleteClick = new EventEmitter();
131
- this.selectedNewProfileId = '';
147
+ this.selectedProfileId = '';
132
148
  this.nonExistingProfiles = [];
149
+ this.selectedCopyFromProfileId = '';
133
150
  }
134
151
  set availableProfiles(value) {
135
152
  this._availableProfiles = value;
136
- this.setNonExistingProfiles();
153
+ this.setProfilesOptions();
137
154
  }
138
155
  get availableProfiles() {
139
156
  return this._availableProfiles;
140
157
  }
141
158
  set profileDataViewsList(value) {
142
159
  this._profileDataViewsList = value;
143
- this.setNonExistingProfiles();
160
+ this.setProfilesOptions();
144
161
  }
145
162
  get profileDataViewsList() {
146
163
  return this._profileDataViewsList;
147
164
  }
148
- // Set the profiles that not exist already in profileDataViewsList.
149
- setNonExistingProfiles() {
165
+ // existingProfiles: Array<IPepProfile> = [];
166
+ setProfilesOptions() {
167
+ // Set the profiles that not exist already in profileDataViewsList.
150
168
  this.nonExistingProfiles = this.availableProfiles.filter(ap => this.profileDataViewsList.findIndex(pdv => pdv.profileId === ap.id) === -1);
169
+ // // Set the existing profiles.
170
+ // this.existingProfiles = this.availableProfiles.filter(ap => this.profileDataViewsList.findIndex(pdv => pdv.profileId === ap.id) > -1);
151
171
  }
152
172
  ngOnInit() {
153
173
  //
154
174
  }
155
- setSelectedNewProfileId(value) {
156
- this.selectedNewProfileId = value;
175
+ setSelectedProfileId(value) {
176
+ this.selectedProfileId = value;
177
+ }
178
+ setCopyFromProfileId(value) {
179
+ this.selectedCopyFromProfileId = value;
157
180
  }
158
181
  closeDialog() {
159
182
  this.dialogRef?.close();
160
183
  }
161
- saveNewProfile() {
162
- // Add the new profile
163
- this.saveNewProfileClick.emit(this.selectedNewProfileId);
184
+ saveProfile() {
185
+ // Save the profile (can be new or import to existing).
186
+ this.saveProfileClick.emit({
187
+ profileId: this.selectedProfileId,
188
+ copyFromProfileId: this.selectedCopyFromProfileId
189
+ });
164
190
  this.closeDialog();
165
191
  }
166
- onAddProfileClicked(event) {
192
+ onAddProfileClicked() {
167
193
  // Raise select profile dialog
168
- this.selectedNewProfileId = '';
169
- const options = [];
170
- options.push(...(this.nonExistingProfiles.map((opt) => {
171
- return {
172
- key: opt.id, value: opt.name
173
- };
174
- })));
175
- this.dialogRef = this.dialogService.openDialog(this.selectProfileTemplate, { options });
194
+ this.selectedProfileId = '';
195
+ this.selectedCopyFromProfileId = '';
196
+ const options = this.nonExistingProfiles.map((opt) => {
197
+ return { key: opt.id, value: opt.name };
198
+ });
199
+ const copyFromOptions = this.profileDataViewsList.map((opt) => {
200
+ return { key: opt.profileId, value: opt.title };
201
+ });
202
+ this.dialogRef = this.dialogService.openDialog(this.addNewProfileTemplate, {
203
+ options,
204
+ copyFromOptions
205
+ });
176
206
  }
177
207
  onDataViewEditClicked(event) {
178
208
  this.dataViewEditClick.emit(event);
@@ -180,12 +210,27 @@ class ProfileDataViewsListComponent {
180
210
  onDataViewDeleteClicked(event) {
181
211
  this.dataViewDeleteClick.emit(event);
182
212
  }
213
+ onDataViewImportClicked(event) {
214
+ // Raise import profile dialog
215
+ const profile = this.profileDataViewsList.find(p => p.profileId === event.profileId);
216
+ const profileTitle = profile.title;
217
+ this.selectedProfileId = event.profileId;
218
+ this.selectedCopyFromProfileId = '';
219
+ // Add to the copyFromOptions all the existing except the clicked profile.
220
+ const copyFromOptions = this.profileDataViewsList.filter(p => p.profileId !== event.profileId).map((opt) => {
221
+ return { key: opt.profileId, value: opt.title };
222
+ });
223
+ this.dialogRef = this.dialogService.openDialog(this.importProfileTemplate, {
224
+ profileTitle,
225
+ copyFromOptions,
226
+ });
227
+ }
183
228
  }
184
229
  ProfileDataViewsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ProfileDataViewsListComponent, deps: [{ token: i1$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Component });
185
- ProfileDataViewsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ProfileDataViewsListComponent, selector: "pep-profile-data-views-list", inputs: { defaultProfileId: "defaultProfileId", availableProfiles: "availableProfiles", profileDataViewsList: "profileDataViewsList", configurationPerScreenSize: "configurationPerScreenSize" }, outputs: { saveNewProfileClick: "saveNewProfileClick", dataViewEditClick: "dataViewEditClick", dataViewDeleteClick: "dataViewDeleteClick" }, viewQueries: [{ propertyName: "selectProfileTemplate", first: true, predicate: ["selectProfileTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"profile-data-views-list-container\">\n <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-views-card>\n\n <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked($event)\"></pep-button>\n</div>\n\n<ng-template #selectProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n [emptyOption]=\"false\" (valueChange)=\"setSelectedNewProfileId($event)\">\n </pep-select>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveNewProfile()\"\n [disabled]=\"selectedNewProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>", styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: ProfileDataViewsCardComponent, selector: "pep-profile-data-views-card", inputs: ["profileId", "title", "dataViews", "configurationPerScreenSize", "isDefault"], outputs: ["dataViewEditClick", "dataViewDeleteClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
230
+ ProfileDataViewsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ProfileDataViewsListComponent, selector: "pep-profile-data-views-list", inputs: { defaultProfileId: "defaultProfileId", availableProfiles: "availableProfiles", profileDataViewsList: "profileDataViewsList", configurationPerScreenSize: "configurationPerScreenSize" }, outputs: { saveProfileClick: "saveProfileClick", dataViewEditClick: "dataViewEditClick", dataViewDeleteClick: "dataViewDeleteClick" }, viewQueries: [{ propertyName: "addNewProfileTemplate", first: true, predicate: ["addNewProfileTemplate"], descendants: true, read: TemplateRef }, { propertyName: "importProfileTemplate", first: true, predicate: ["importProfileTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"profile-data-views-list-container\">\n <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\"\n (dataViewImportClick)=\"onDataViewImportClicked($event)\">\n </pep-profile-data-views-card>\n\n <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked()\"></pep-button>\n</div>\n\n<ng-template #addNewProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n [emptyOption]=\"false\" (valueChange)=\"setSelectedProfileId($event)\">\n </pep-select>\n\n <div *ngIf=\"data.copyFromOptions?.length\">\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_FROM_PROFILE' | translate\" [options]=\"data.copyFromOptions\"\n [emptyOption]=\"true\" (valueChange)=\"setCopyFromProfileId($event)\">\n </pep-select>\n </div>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveProfile()\"\n [disabled]=\"selectedProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>\n\n<ng-template #importProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_PROFILE_DIALOG_TITLE' | translate: { profileTitle: data.profileTitle }\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_FROM_PROFILE' | translate\" [options]=\"data.copyFromOptions\"\n [emptyOption]=\"false\" (valueChange)=\"setCopyFromProfileId($event)\">\n </pep-select>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveProfile()\"\n [disabled]=\"selectedProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>", styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { kind: "component", type: ProfileDataViewsCardComponent, selector: "pep-profile-data-views-card", inputs: ["profileId", "title", "dataViews", "configurationPerScreenSize", "isDefault"], outputs: ["dataViewEditClick", "dataViewDeleteClick", "dataViewImportClick"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
186
231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ProfileDataViewsListComponent, decorators: [{
187
232
  type: Component,
188
- args: [{ selector: 'pep-profile-data-views-list', template: "<div class=\"profile-data-views-list-container\">\n <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\">\n </pep-profile-data-views-card>\n\n <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked($event)\"></pep-button>\n</div>\n\n<ng-template #selectProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n [emptyOption]=\"false\" (valueChange)=\"setSelectedNewProfileId($event)\">\n </pep-select>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveNewProfile()\"\n [disabled]=\"selectedNewProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>", styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;gap:1rem}\n"] }]
233
+ args: [{ selector: 'pep-profile-data-views-list', template: "<div class=\"profile-data-views-list-container\">\n <pep-profile-data-views-card *ngFor=\"let profileDataViews of profileDataViewsList\"\n [configurationPerScreenSize]=\"configurationPerScreenSize\" [title]=\"profileDataViews.title\"\n [profileId]=\"profileDataViews.profileId\" [dataViews]=\"profileDataViews.dataViews\"\n [isDefault]=\"profileDataViews.profileId === defaultProfileId\"\n (dataViewEditClick)=\"onDataViewEditClicked($event)\" (dataViewDeleteClick)=\"onDataViewDeleteClicked($event)\"\n (dataViewImportClick)=\"onDataViewImportClicked($event)\">\n </pep-profile-data-views-card>\n\n <pep-button *ngIf=\"nonExistingProfiles?.length > 0\" [value]=\"'PROFILE_DATA_VIEWS_LIST.ADD_PROFILE' | translate\"\n iconName=\"number_plus\" sizeType=\"lg\" (buttonClick)=\"onAddProfileClicked()\"></pep-button>\n</div>\n\n<ng-template #addNewProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE_DIALOG_TITLE' | translate\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.SELECT_PROFILE' | translate\" [options]=\"data.options\"\n [emptyOption]=\"false\" (valueChange)=\"setSelectedProfileId($event)\">\n </pep-select>\n\n <div *ngIf=\"data.copyFromOptions?.length\">\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_FROM_PROFILE' | translate\" [options]=\"data.copyFromOptions\"\n [emptyOption]=\"true\" (valueChange)=\"setCopyFromProfileId($event)\">\n </pep-select>\n </div>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveProfile()\"\n [disabled]=\"selectedProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>\n\n<ng-template #importProfileTemplate let-data>\n <pep-dialog [title]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_PROFILE_DIALOG_TITLE' | translate: { profileTitle: data.profileTitle }\" (close)=\"closeDialog()\">\n <ng-container pep-dialog-content>\n <pep-select [label]=\"'PROFILE_DATA_VIEWS_LIST.IMPORT_FROM_PROFILE' | translate\" [options]=\"data.copyFromOptions\"\n [emptyOption]=\"false\" (valueChange)=\"setCopyFromProfileId($event)\">\n </pep-select>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" (click)=\"closeDialog()\">\n {{ 'Cancel' | translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"saveProfile()\"\n [disabled]=\"selectedProfileId === ''\">\n {{ 'Save' | translate}}\n </button>\n </div>\n </ng-container>\n </pep-dialog>\n</ng-template>", styles: [".profile-data-views-list-container{display:flex;align-items:flex-start;gap:1rem}\n"] }]
189
234
  }], ctorParameters: function () { return [{ type: i1$1.PepDialogService }]; }, propDecorators: { defaultProfileId: [{
190
235
  type: Input
191
236
  }], availableProfiles: [{
@@ -194,15 +239,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
194
239
  type: Input
195
240
  }], configurationPerScreenSize: [{
196
241
  type: Input
197
- }], saveNewProfileClick: [{
242
+ }], saveProfileClick: [{
198
243
  type: Output
199
244
  }], dataViewEditClick: [{
200
245
  type: Output
201
246
  }], dataViewDeleteClick: [{
202
247
  type: Output
203
- }], selectProfileTemplate: [{
248
+ }], addNewProfileTemplate: [{
249
+ type: ViewChild,
250
+ args: ['addNewProfileTemplate', { read: TemplateRef }]
251
+ }], importProfileTemplate: [{
204
252
  type: ViewChild,
205
- args: ['selectProfileTemplate', { read: TemplateRef }]
253
+ args: ['importProfileTemplate', { read: TemplateRef }]
206
254
  }] } });
207
255
 
208
256
  class PepProfileDataViewsListModule {