@acorex/components 21.0.0-next.50 → 21.0.0-next.51

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 (108) hide show
  1. package/code-editor/index.d.ts +3 -9
  2. package/collapse/index.d.ts +4 -6
  3. package/fesm2022/acorex-components-accordion.mjs +4 -4
  4. package/fesm2022/acorex-components-action-sheet.mjs +2 -2
  5. package/fesm2022/acorex-components-alert.mjs +2 -2
  6. package/fesm2022/acorex-components-audio-wave.mjs +2 -2
  7. package/fesm2022/acorex-components-avatar.mjs +2 -2
  8. package/fesm2022/acorex-components-badge.mjs +2 -2
  9. package/fesm2022/acorex-components-bottom-navigation.mjs +2 -2
  10. package/fesm2022/acorex-components-breadcrumbs.mjs +2 -2
  11. package/fesm2022/acorex-components-button-group.mjs +2 -2
  12. package/fesm2022/acorex-components-button.mjs +4 -4
  13. package/fesm2022/acorex-components-calendar.mjs +4 -4
  14. package/fesm2022/acorex-components-check-box.mjs +2 -2
  15. package/fesm2022/acorex-components-chips.mjs +2 -2
  16. package/fesm2022/acorex-components-circular-progress.mjs +2 -2
  17. package/fesm2022/acorex-components-code-editor.mjs +47 -47
  18. package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
  19. package/fesm2022/acorex-components-collapse.mjs +9 -6
  20. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  21. package/fesm2022/acorex-components-color-box.mjs +2 -2
  22. package/fesm2022/acorex-components-color-palette.mjs +2 -2
  23. package/fesm2022/acorex-components-command.mjs +2 -2
  24. package/fesm2022/acorex-components-comment.mjs +8 -8
  25. package/fesm2022/acorex-components-data-pager.mjs +2 -2
  26. package/fesm2022/acorex-components-data-table.mjs +2 -2
  27. package/fesm2022/acorex-components-datetime-box.mjs +2 -2
  28. package/fesm2022/acorex-components-datetime-input.mjs +2 -2
  29. package/fesm2022/acorex-components-datetime-picker.mjs +2 -2
  30. package/fesm2022/acorex-components-decorators.mjs +8 -8
  31. package/fesm2022/acorex-components-dialog.mjs +2 -2
  32. package/fesm2022/acorex-components-drawer.mjs +4 -4
  33. package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
  34. package/fesm2022/acorex-components-dropdown.mjs +2 -2
  35. package/fesm2022/acorex-components-editor.mjs +2 -2
  36. package/fesm2022/acorex-components-form.mjs +2 -2
  37. package/fesm2022/acorex-components-image-editor.mjs +14 -14
  38. package/fesm2022/acorex-components-image.mjs +2 -2
  39. package/fesm2022/acorex-components-json-viewer.mjs +2 -2
  40. package/fesm2022/acorex-components-kanban.mjs +2 -2
  41. package/fesm2022/acorex-components-kbd.mjs +2 -2
  42. package/fesm2022/acorex-components-label.mjs +2 -2
  43. package/fesm2022/acorex-components-list.mjs +2 -2
  44. package/fesm2022/acorex-components-loading-dialog.mjs +2 -2
  45. package/fesm2022/acorex-components-loading.mjs +4 -4
  46. package/fesm2022/acorex-components-map.mjs +2 -2
  47. package/fesm2022/acorex-components-media-viewer.mjs +10 -10
  48. package/fesm2022/acorex-components-menu.mjs +2 -2
  49. package/fesm2022/{acorex-components-modal-acorex-components-modal-WaTo81yi.mjs → acorex-components-modal-acorex-components-modal-BnUdtPke.mjs} +4 -4
  50. package/fesm2022/{acorex-components-modal-acorex-components-modal-WaTo81yi.mjs.map → acorex-components-modal-acorex-components-modal-BnUdtPke.mjs.map} +1 -1
  51. package/fesm2022/{acorex-components-modal-modal-content.component-D61_wSet.mjs → acorex-components-modal-modal-content.component-Cgq-wx_m.mjs} +4 -4
  52. package/fesm2022/{acorex-components-modal-modal-content.component-D61_wSet.mjs.map → acorex-components-modal-modal-content.component-Cgq-wx_m.mjs.map} +1 -1
  53. package/fesm2022/acorex-components-modal.mjs +1 -1
  54. package/fesm2022/acorex-components-navbar.mjs +2 -2
  55. package/fesm2022/acorex-components-notification.mjs +2 -2
  56. package/fesm2022/acorex-components-number-box.mjs +2 -2
  57. package/fesm2022/acorex-components-number-box.mjs.map +1 -1
  58. package/fesm2022/acorex-components-otp.mjs +2 -2
  59. package/fesm2022/acorex-components-paint.mjs +4 -4
  60. package/fesm2022/acorex-components-password-box.mjs +2 -2
  61. package/fesm2022/acorex-components-pdf-reader.mjs +2 -2
  62. package/fesm2022/acorex-components-phone-box.mjs +2 -2
  63. package/fesm2022/acorex-components-picker.mjs +6 -6
  64. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  65. package/fesm2022/acorex-components-popup.mjs +2 -2
  66. package/fesm2022/acorex-components-popup.mjs.map +1 -1
  67. package/fesm2022/acorex-components-progress-bar.mjs +2 -2
  68. package/fesm2022/acorex-components-qrcode.mjs +2 -2
  69. package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
  70. package/fesm2022/acorex-components-query-builder.mjs +2 -2
  71. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  72. package/fesm2022/acorex-components-radio.mjs +2 -2
  73. package/fesm2022/acorex-components-radio.mjs.map +1 -1
  74. package/fesm2022/acorex-components-rail-navigation.mjs +2 -2
  75. package/fesm2022/acorex-components-range-slider.mjs +2 -2
  76. package/fesm2022/acorex-components-rate-picker.mjs +2 -2
  77. package/fesm2022/acorex-components-result.mjs +2 -2
  78. package/fesm2022/acorex-components-routing-progress.mjs +2 -2
  79. package/fesm2022/acorex-components-scheduler.mjs +18 -18
  80. package/fesm2022/acorex-components-select-box.mjs +2 -2
  81. package/fesm2022/acorex-components-selection-list-2.mjs +2 -2
  82. package/fesm2022/acorex-components-selection-list.mjs +2 -2
  83. package/fesm2022/acorex-components-side-menu.mjs +2 -2
  84. package/fesm2022/acorex-components-skeleton.mjs +2 -2
  85. package/fesm2022/acorex-components-slider.mjs +2 -2
  86. package/fesm2022/acorex-components-slider.mjs.map +1 -1
  87. package/fesm2022/acorex-components-sliding-item.mjs +2 -2
  88. package/fesm2022/acorex-components-step-wizard.mjs +2 -2
  89. package/fesm2022/acorex-components-switch.mjs +2 -2
  90. package/fesm2022/acorex-components-tabs.mjs +2 -2
  91. package/fesm2022/acorex-components-tag-box.mjs +2 -2
  92. package/fesm2022/acorex-components-tag.mjs +2 -2
  93. package/fesm2022/acorex-components-text-area.mjs +2 -2
  94. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  95. package/fesm2022/acorex-components-text-box.mjs +2 -2
  96. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  97. package/fesm2022/acorex-components-time-line.mjs +4 -4
  98. package/fesm2022/acorex-components-toast.mjs +2 -2
  99. package/fesm2022/acorex-components-toolbar.mjs +2 -2
  100. package/fesm2022/acorex-components-tooltip.mjs +5 -10
  101. package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
  102. package/fesm2022/acorex-components-tree-view.mjs +4 -4
  103. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  104. package/fesm2022/acorex-components-uploader.mjs +6 -6
  105. package/fesm2022/acorex-components-wysiwyg.mjs +6 -6
  106. package/package.json +8 -7
  107. package/slider/index.d.ts +2 -2
  108. package/tooltip/index.d.ts +0 -1
package/fesm2022/acorex-components-toast.mjs CHANGED
@@ -421,14 +421,14 @@ class AXToastComponent extends MXBaseComponent {
421
421
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToastComponent, isStandalone: true, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [
422
422
  { provide: AXClosableComponent, useExisting: AXToastComponent },
423
423
  { provide: AXComponent, useExisting: AXToastComponent },
424
- ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
424
+ ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
425
425
  }
426
426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastComponent, decorators: [{
427
427
  type: Component,
428
428
  args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
429
429
  { provide: AXClosableComponent, useExisting: AXToastComponent },
430
430
  { provide: AXComponent, useExisting: AXToastComponent },
431
- ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
431
+ ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div class=\"ax-toast-content\" [innerHTML]=\"config.content\"></div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
432
432
  }], propDecorators: { __hostClass: [{
433
433
  type: HostBinding,
434
434
  args: ['class']
package/fesm2022/acorex-components-toolbar.mjs CHANGED
@@ -36,11 +36,11 @@ class AXToolBarComponent {
36
36
  return `ax-sm`;
37
37
  }
38
38
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
39
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToolBarComponent, isStandalone: true, selector: "ax-toolbar", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXToolBarComponent }], queries: [{ propertyName: "buttons", predicate: AXButtonComponent, descendants: true, isSignal: true }, { propertyName: "decorators", predicate: AXDecoratorGenericComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n@if (prefixState() && (contentState() || suffixState())) {\n <ax-divider class=\"ax-start-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-content\"></ng-content>\n\n@if (contentState() && suffixState()) {\n <ax-divider class=\"ax-end-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["@layer components{ax-toolbar{width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);flex-wrap:wrap;align-items:center;display:flex}ax-toolbar>ax-divider{margin-inline:calc(var(--spacing,.25rem)*2);min-height:calc(var(--spacing,.25rem)*6);background-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:1px;display:block}ax-toolbar>ax-suffix,ax-toolbar>ax-prefix,ax-toolbar>ax-content{flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:100%;display:flex}ax-toolbar>ax-button,ax-toolbar>ax-select-box,ax-toolbar>ax-text-box,ax-toolbar>ax-number-box{margin-inline:calc(var(--spacing,.25rem)*.5)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
39
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToolBarComponent, isStandalone: true, selector: "ax-toolbar", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXToolBarComponent }], queries: [{ propertyName: "buttons", predicate: AXButtonComponent, descendants: true, isSignal: true }, { propertyName: "decorators", predicate: AXDecoratorGenericComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n@if (prefixState() && (contentState() || suffixState())) {\n <ax-divider class=\"ax-start-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-content\"></ng-content>\n\n@if (contentState() && suffixState()) {\n <ax-divider class=\"ax-end-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["@layer components{ax-toolbar{width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);flex-wrap:wrap;align-items:center;display:flex}ax-toolbar>ax-divider{margin-inline:calc(var(--spacing,.25rem)*2);min-height:calc(var(--spacing,.25rem)*6);background-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:1px;display:block}ax-toolbar>ax-suffix,ax-toolbar>ax-prefix,ax-toolbar>ax-content{flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:100%;display:flex}ax-toolbar>ax-button,ax-toolbar>ax-select-box,ax-toolbar>ax-text-box,ax-toolbar>ax-number-box{margin-inline:calc(var(--spacing,.25rem)*.5)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
40
40
  }
41
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToolBarComponent, decorators: [{
42
42
  type: Component,
43
- args: [{ selector: 'ax-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXToolBarComponent }], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n@if (prefixState() && (contentState() || suffixState())) {\n <ax-divider class=\"ax-start-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-content\"></ng-content>\n\n@if (contentState() && suffixState()) {\n <ax-divider class=\"ax-end-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["@layer components{ax-toolbar{width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);flex-wrap:wrap;align-items:center;display:flex}ax-toolbar>ax-divider{margin-inline:calc(var(--spacing,.25rem)*2);min-height:calc(var(--spacing,.25rem)*6);background-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:1px;display:block}ax-toolbar>ax-suffix,ax-toolbar>ax-prefix,ax-toolbar>ax-content{flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:100%;display:flex}ax-toolbar>ax-button,ax-toolbar>ax-select-box,ax-toolbar>ax-text-box,ax-toolbar>ax-number-box{margin-inline:calc(var(--spacing,.25rem)*.5)}}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
43
+ args: [{ selector: 'ax-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXToolBarComponent }], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n@if (prefixState() && (contentState() || suffixState())) {\n <ax-divider class=\"ax-start-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-content\"></ng-content>\n\n@if (contentState() && suffixState()) {\n <ax-divider class=\"ax-end-toolbar-divider\"></ax-divider>\n}\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["@layer components{ax-toolbar{width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);flex-wrap:wrap;align-items:center;display:flex}ax-toolbar>ax-divider{margin-inline:calc(var(--spacing,.25rem)*2);min-height:calc(var(--spacing,.25rem)*6);background-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:1px;display:block}ax-toolbar>ax-suffix,ax-toolbar>ax-prefix,ax-toolbar>ax-content{flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:100%;display:flex}ax-toolbar>ax-button,ax-toolbar>ax-select-box,ax-toolbar>ax-text-box,ax-toolbar>ax-number-box{margin-inline:calc(var(--spacing,.25rem)*.5)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
44
44
  }], propDecorators: { buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXButtonComponent), { ...{ descendants: true }, isSignal: true }] }], decorators: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDecoratorGenericComponent), { isSignal: true }] }], __hostClass: [{
45
45
  type: HostBinding,
46
46
  args: ['class']
package/fesm2022/acorex-components-tooltip.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  import { MXBaseComponent, AXComponent, convertToPlacement } from '@acorex/cdk/common';
2
2
  import * as i0 from '@angular/core';
3
3
  import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ViewContainerRef, ElementRef, input, effect, TemplateRef, Directive, NgModule } from '@angular/core';
4
- import { AXDragDirective } from '@acorex/cdk/drag-drop';
5
4
  import { AXPopoverComponent } from '@acorex/components/popover';
6
5
  import { OverlayModule } from '@angular/cdk/overlay';
7
6
  import { CommonModule } from '@angular/common';
@@ -12,17 +11,19 @@ import { CommonModule } from '@angular/common';
12
11
  */
13
12
  class AXTooltipComponent extends MXBaseComponent {
14
13
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
15
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXTooltipComponent, isStandalone: true, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-tooltip .ax-tooltip-container{position:relative}ax-tooltip .ax-tooltip-container .ax-tooltip{border-radius:var(--radius-sm,.25rem);background-color:var(--color-black,#000);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-white,#fff);display:block}ax-tooltip .ax-tooltip-container .ax-tooltip:where(.dark,.dark *){background-color:var(--color-white,#fff);color:var(--color-black,#000)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
14
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXTooltipComponent, isStandalone: true, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-tooltip .ax-tooltip-container{position:relative}ax-tooltip .ax-tooltip-container .ax-tooltip{border-radius:var(--radius-sm,.25rem);background-color:var(--color-black,#000);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-white,#fff);display:block}ax-tooltip .ax-tooltip-container .ax-tooltip:where(.dark,.dark *){background-color:var(--color-white,#fff);color:var(--color-black,#000)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
16
15
  }
17
16
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTooltipComponent, decorators: [{
18
17
  type: Component,
19
- args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-tooltip .ax-tooltip-container{position:relative}ax-tooltip .ax-tooltip-container .ax-tooltip{border-radius:var(--radius-sm,.25rem);background-color:var(--color-black,#000);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-white,#fff);display:block}ax-tooltip .ax-tooltip-container .ax-tooltip:where(.dark,.dark *){background-color:var(--color-white,#fff);color:var(--color-black,#000)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
18
+ args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], template: "<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial}}}@layer components{ax-tooltip .ax-tooltip-container{position:relative}ax-tooltip .ax-tooltip-container .ax-tooltip{border-radius:var(--radius-sm,.25rem);background-color:var(--color-black,#000);padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-white,#fff);display:block}ax-tooltip .ax-tooltip-container .ax-tooltip:where(.dark,.dark *){background-color:var(--color-white,#fff);color:var(--color-black,#000)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
20
19
  }], propDecorators: { text: [{
21
20
  type: Input
22
21
  }], position: [{
23
22
  type: Input
24
23
  }] } });
25
24
 
25
+ //prettier-ignore
26
+ // import { AXDragDirective } from '@acorex/cdk/drag-drop';
26
27
  class AXTooltipDirective {
27
28
  get placement() {
28
29
  return this._placement;
@@ -72,7 +73,7 @@ class AXTooltipDirective {
72
73
  constructor() {
73
74
  this.vc = inject(ViewContainerRef);
74
75
  this.elementRef = inject(ElementRef);
75
- this.dragRef = inject(AXDragDirective, { optional: true });
76
+ // private dragRef = inject(AXDragDirective, { optional: true });
76
77
  this.axTooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "axTooltipDisabled" }] : []));
77
78
  this.content = input('', ...(ngDevMode ? [{ debugName: "content", alias: 'axTooltip' }] : [{ alias: 'axTooltip' }]));
78
79
  this.context = input({}, ...(ngDevMode ? [{ debugName: "context", alias: 'axTooltipContext' }] : [{ alias: 'axTooltipContext' }]));
@@ -94,11 +95,6 @@ class AXTooltipDirective {
94
95
  this.#disabledEff = effect(() => {
95
96
  this.popupRef.disabled = this.axTooltipDisabled();
96
97
  }, ...(ngDevMode ? [{ debugName: "#disabledEff" }] : []));
97
- this.#dragWatchEff = effect(() => {
98
- if (this.dragRef?.isMoving()) {
99
- this.popupRef.close();
100
- }
101
- }, ...(ngDevMode ? [{ debugName: "#dragWatchEff" }] : []));
102
98
  this.popupRef = this.vc.createComponent(AXPopoverComponent).instance;
103
99
  this.popupRef.target = this.elementRef.nativeElement;
104
100
  }
@@ -112,7 +108,6 @@ class AXTooltipDirective {
112
108
  }
113
109
  #contentEff;
114
110
  #disabledEff;
115
- #dragWatchEff;
116
111
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
117
112
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: AXTooltipDirective, isStandalone: true, selector: "[axTooltip]", inputs: { axTooltipDisabled: { classPropertyName: "axTooltipDisabled", publicName: "axTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "axTooltip", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "axTooltipContext", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "axTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "axTooltipOffsetX", isSignal: false, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "axTooltipOffsetY", isSignal: false, isRequired: false, transformFunction: null }, openAfter: { classPropertyName: "openAfter", publicName: "axTooltipOpenAfter", isSignal: false, isRequired: false, transformFunction: null }, closeAfter: { classPropertyName: "closeAfter", publicName: "axTooltipCloseAfter", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
118
113
  }
package/fesm2022/acorex-components-tooltip.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../packages/components/tooltip/src/lib/tooltip.component.ts","../../../../packages/components/tooltip/src/lib/tooltip.component.html","../../../../packages/components/tooltip/src/lib/tooltip.directive.ts","../../../../packages/components/tooltip/src/lib/tooltip.module.ts","../../../../packages/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXComponent, AXPlacement, MXBaseComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A component for displaying tooltips with additional information or context when hovering over elements.\n * @category Components\n */\n@Component({\n selector: 'ax-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.compiled.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }],\n})\nexport class AXTooltipComponent extends MXBaseComponent {\n /**\n * The text content displayed in the tooltip.\n * @defaultValue 'string'\n */\n @Input()\n text: string;\n\n /**\n * Specifies the position of the tooltip relative to the target element.\n *\n * @type {AXPlacement}\n */\n @Input()\n position: AXPlacement;\n}\n","<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n","import { AXPlacementType, convertToPlacement } from '@acorex/cdk/common';\nimport { AXDragDirective } from '@acorex/cdk/drag-drop';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n Input,\n OnInit,\n TemplateRef,\n ViewContainerRef,\n} from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\n\n@Directive({ selector: '[axTooltip]' })\nexport class AXTooltipDirective implements OnInit {\n private vc = inject(ViewContainerRef);\n private elementRef = inject(ElementRef);\n private dragRef = inject(AXDragDirective, { optional: true });\n\n axTooltipDisabled = input(false);\n content = input<string | TemplateRef<unknown>>('', { alias: 'axTooltip' });\n context = input<unknown>({}, { alias: 'axTooltipContext' });\n\n private _placement: AXPlacementType = convertToPlacement('top');\n @Input('axTooltipPlacement')\n public get placement(): AXPlacementType {\n return this._placement;\n }\n public set placement(v: AXPlacementType) {\n this._placement = v;\n if (this.popupRef) {\n this.popupRef.placement = v;\n }\n }\n\n private _offsetX = 0;\n @Input('axTooltipOffsetX')\n public get offsetX(): number {\n return this._offsetX;\n }\n public set offsetX(v: number) {\n this._offsetX = v;\n if (this.popupRef) {\n this.popupRef.offsetX = v;\n }\n }\n\n private _offsetY = 0;\n @Input('axTooltipOffsetY')\n public get offsetY(): number {\n return this._offsetY;\n }\n public set offsetY(v: number) {\n this._offsetY = v;\n if (this.popupRef) {\n this.popupRef.offsetY = v;\n }\n }\n\n private _openAfter = 100;\n @Input('axTooltipOpenAfter')\n public get openAfter(): number {\n return this._openAfter;\n }\n public set openAfter(v: number) {\n this._openAfter = v;\n if (this.popupRef) {\n this.popupRef.openAfter = v;\n }\n }\n\n private _closeAfter = 100;\n @Input('axTooltipCloseAfter')\n public get closeAfter(): number {\n return this._closeAfter;\n }\n public set closeAfter(v: number) {\n this._closeAfter = v;\n if (this.popupRef) {\n this.popupRef.closeAfter = v;\n }\n }\n\n public readonly popupRef: AXPopoverComponent;\n\n constructor() {\n this.popupRef = this.vc.createComponent(AXPopoverComponent).instance;\n this.popupRef.target = this.elementRef.nativeElement;\n }\n\n ngOnInit(): void {\n this.popupRef.target = this.elementRef.nativeElement;\n this.popupRef.openOn = 'hover';\n this.popupRef.closeOn = 'leave';\n this.popupRef.placement = this.placement;\n this.popupRef.openAfter = this.openAfter;\n this.popupRef.closeAfter = this.closeAfter;\n }\n\n #contentEff = effect(() => {\n if (typeof this.content() === 'string' && this.content()) {\n this.popupRef.content = AXTooltipComponent;\n this.popupRef.context = { text: this.content() };\n } else if (this.content() instanceof TemplateRef) {\n this.popupRef.content = this.content() as TemplateRef<unknown>;\n this.popupRef.context = this.context();\n }\n });\n\n #disabledEff = effect(() => {\n this.popupRef.disabled = this.axTooltipDisabled();\n });\n\n #dragWatchEff = effect(() => {\n if (this.dragRef?.isMoving()) {\n this.popupRef.close();\n }\n });\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXTooltipDirective } from './tooltip.directive';\n\nconst COMPONENT = [AXTooltipComponent, AXTooltipDirective];\nconst MODULES = [CommonModule, OverlayModule];\n\n@NgModule({\n imports: [...MODULES, ...COMPONENT],\n exports: [...COMPONENT],\n})\nexport class AXTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"acorex-components-tooltip.mjs","sources":["../../../../packages/components/tooltip/src/lib/tooltip.component.ts","../../../../packages/components/tooltip/src/lib/tooltip.component.html","../../../../packages/components/tooltip/src/lib/tooltip.directive.ts","../../../../packages/components/tooltip/src/lib/tooltip.module.ts","../../../../packages/components/tooltip/src/acorex-components-tooltip.ts"],"sourcesContent":["import { AXComponent, AXPlacement, MXBaseComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A component for displaying tooltips with additional information or context when hovering over elements.\n * @category Components\n */\n@Component({\n selector: 'ax-tooltip',\n templateUrl: './tooltip.component.html',\n styleUrls: ['./tooltip.component.compiled.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }],\n})\nexport class AXTooltipComponent extends MXBaseComponent {\n /**\n * The text content displayed in the tooltip.\n * @defaultValue 'string'\n */\n @Input()\n text: string;\n\n /**\n * Specifies the position of the tooltip relative to the target element.\n *\n * @type {AXPlacement}\n */\n @Input()\n position: AXPlacement;\n}\n","<div class=\"ax-tooltip-container\">\n <div class=\"ax-tooltip\">\n {{ text }}\n </div>\n <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n","import { AXPlacementType, convertToPlacement } from '@acorex/cdk/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n Input,\n OnInit,\n TemplateRef,\n ViewContainerRef,\n} from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\n//prettier-ignore\n// import { AXDragDirective } from '@acorex/cdk/drag-drop';\n\n@Directive({ selector: '[axTooltip]' })\nexport class AXTooltipDirective implements OnInit {\n private vc = inject(ViewContainerRef);\n private elementRef = inject(ElementRef);\n // private dragRef = inject(AXDragDirective, { optional: true });\n\n axTooltipDisabled = input(false);\n content = input<string | TemplateRef<unknown>>('', { alias: 'axTooltip' });\n context = input<unknown>({}, { alias: 'axTooltipContext' });\n\n private _placement: AXPlacementType = convertToPlacement('top');\n @Input('axTooltipPlacement')\n public get placement(): AXPlacementType {\n return this._placement;\n }\n public set placement(v: AXPlacementType) {\n this._placement = v;\n if (this.popupRef) {\n this.popupRef.placement = v;\n }\n }\n\n private _offsetX = 0;\n @Input('axTooltipOffsetX')\n public get offsetX(): number {\n return this._offsetX;\n }\n public set offsetX(v: number) {\n this._offsetX = v;\n if (this.popupRef) {\n this.popupRef.offsetX = v;\n }\n }\n\n private _offsetY = 0;\n @Input('axTooltipOffsetY')\n public get offsetY(): number {\n return this._offsetY;\n }\n public set offsetY(v: number) {\n this._offsetY = v;\n if (this.popupRef) {\n this.popupRef.offsetY = v;\n }\n }\n\n private _openAfter = 100;\n @Input('axTooltipOpenAfter')\n public get openAfter(): number {\n return this._openAfter;\n }\n public set openAfter(v: number) {\n this._openAfter = v;\n if (this.popupRef) {\n this.popupRef.openAfter = v;\n }\n }\n\n private _closeAfter = 100;\n @Input('axTooltipCloseAfter')\n public get closeAfter(): number {\n return this._closeAfter;\n }\n public set closeAfter(v: number) {\n this._closeAfter = v;\n if (this.popupRef) {\n this.popupRef.closeAfter = v;\n }\n }\n\n public readonly popupRef: AXPopoverComponent;\n\n constructor() {\n this.popupRef = this.vc.createComponent(AXPopoverComponent).instance;\n this.popupRef.target = this.elementRef.nativeElement;\n }\n\n ngOnInit(): void {\n this.popupRef.target = this.elementRef.nativeElement;\n this.popupRef.openOn = 'hover';\n this.popupRef.closeOn = 'leave';\n this.popupRef.placement = this.placement;\n this.popupRef.openAfter = this.openAfter;\n this.popupRef.closeAfter = this.closeAfter;\n }\n\n #contentEff = effect(() => {\n if (typeof this.content() === 'string' && this.content()) {\n this.popupRef.content = AXTooltipComponent;\n this.popupRef.context = { text: this.content() };\n } else if (this.content() instanceof TemplateRef) {\n this.popupRef.content = this.content() as TemplateRef<unknown>;\n this.popupRef.context = this.context();\n }\n });\n\n #disabledEff = effect(() => {\n this.popupRef.disabled = this.axTooltipDisabled();\n });\n\n // #dragWatchEff = effect(() => {\n // if (this.dragRef?.isMoving()) {\n // this.popupRef.close();\n // }\n // });\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXTooltipComponent } from './tooltip.component';\nimport { AXTooltipDirective } from './tooltip.directive';\n\nconst COMPONENT = [AXTooltipComponent, AXTooltipDirective];\nconst MODULES = [CommonModule, OverlayModule];\n\n@NgModule({\n imports: [...MODULES, ...COMPONENT],\n exports: [...COMPONENT],\n})\nexport class AXTooltipModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/acorex-components-tree-view.mjs CHANGED
@@ -4,9 +4,9 @@ import { AXBadgeComponent } from '@acorex/components/badge';
4
4
  import { AXButtonComponent } from '@acorex/components/button';
5
5
  import { AXCheckBoxComponent } from '@acorex/components/check-box';
6
6
  import { AXDecoratorIconComponent } from '@acorex/components/decorators';
7
+ import { AXSkeletonComponent } from '@acorex/components/skeleton';
7
8
  import { AXTooltipDirective } from '@acorex/components/tooltip';
8
9
  import { AXPlatform } from '@acorex/core/platform';
9
- import { AXTranslatorPipe } from '@acorex/core/translation';
10
10
  import * as i1 from '@angular/common';
11
11
  import { CommonModule, NgTemplateOutlet } from '@angular/common';
12
12
  import * as i0 from '@angular/core';
@@ -2271,7 +2271,7 @@ class AXTreeViewComponent {
2271
2271
  }
2272
2272
  }
2273
2273
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2274
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading indicator -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-root-loading\">\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-root-loading-spinner\"></i>\n <span class=\"ax-tree-view-root-loading-text\">{{ '@acorex:treeView.loading' | translate | async }}</span>\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-root-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.6)}.ax-tree-view-root-loading-spinner{font-size:1.25rem;color:rgba(var(--ax-sys-color-primary-500),1)}.ax-tree-view-root-loading-text{font-size:.875rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2274
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, inheritDisabled: { classPropertyName: "inheritDisabled", publicName: "inheritDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-drop-list\">\n @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n <div class=\"ax-tree-view-node\">\n <div class=\"ax-tree-view-node-content\">\n <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2275
2275
  }
2276
2276
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewComponent, decorators: [{
2277
2277
  type: Component,
@@ -2287,8 +2287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
2287
2287
  AXCheckBoxComponent,
2288
2288
  AXBadgeComponent,
2289
2289
  AXDecoratorIconComponent,
2290
+ AXSkeletonComponent,
2290
2291
  AXTooltipDirective,
2291
- AXTranslatorPipe,
2292
2292
  ], host: {
2293
2293
  class: 'ax-tree-view',
2294
2294
  role: 'tree',
@@ -2303,7 +2303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
2303
2303
  '(keydown)': 'handleKeyDown($event)',
2304
2304
  '(focus)': 'onTreeFocus($event)',
2305
2305
  '(blur)': 'onTreeBlur($event)',
2306
- }, template: "<!-- Root loading indicator -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-root-loading\">\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-root-loading-spinner\"></i>\n <span class=\"ax-tree-view-root-loading-text\">{{ '@acorex:treeView.loading' | translate | async }}</span>\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-root-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.6)}.ax-tree-view-root-loading-spinner{font-size:1.25rem;color:rgba(var(--ax-sys-color-primary-500),1)}.ax-tree-view-root-loading-text{font-size:.875rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"] }]
2306
+ }, template: "<!-- Root loading skeleton -->\n@if (isLoading()) {\n <div class=\"ax-tree-view-drop-list\">\n @for (item of [1, 2, 3, 4, 5, 6, 7]; track item) {\n <div class=\"ax-tree-view-node\">\n <div class=\"ax-tree-view-node-content\">\n <ax-skeleton class=\"ax-tree-view-skeleton-toggle\"></ax-skeleton>\n <ax-skeleton class=\"ax-tree-view-skeleton-label\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n}\n\n<!-- Root drop list -->\n<div\n axFocusTrap\n [axDropList]=\"dragBehavior() !== 'none'\"\n [sortingDisabled]=\"false\"\n [id]=\"getListId()\"\n [attr.data-node-id]=\"null\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event)\"\n class=\"ax-tree-view-drop-list\"\n [class.ax-tree-view-card]=\"look() === 'card'\"\n [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n [class.ax-tree-view-loading]=\"isLoading()\"\n role=\"group\"\n>\n @for (node of nodes(); track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(0)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n <div\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"getListId(parent)\"\n [attr.data-node-id]=\"getNodeId(parent)\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDrop($event, parent)\"\n class=\"ax-tree-view-drop-list\"\n role=\"group\"\n >\n @for (node of children; track getNodeId(node)) {\n @if (getNodeHidden(node) !== true) {\n <div\n [axDrag]=\"dragBehavior() !== 'none'\"\n [dragDisabled]=\"isNodeEffectivelyDisabled(node)\"\n [dragData]=\"node\"\n class=\"ax-tree-view-node\"\n [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n [class.ax-tree-view-node-disabled]=\"isNodeEffectivelyDisabled(node)\"\n [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n role=\"treeitem\"\n [attr.aria-level]=\"getNodeAriaLevel(level)\"\n [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n [attr.aria-disabled]=\"\n isNodeEffectivelyDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\n \"\n >\n <div\n class=\"ax-tree-view-node-content\"\n [axDropList]=\"dragBehavior() !== 'none'\"\n [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n [attr.data-node-id]=\"getNodeId(node)\"\n [attr.data-tree-node-id]=\"getNodeId(node)\"\n [attr.data-drop-type]=\"'onto-node'\"\n dropListGroup=\"ax-tree-view-nodes\"\n (dropListDropped)=\"onDropOntoNode($event, node)\"\n (click)=\"onNodeClickHandle(node, $event)\"\n (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n (focus)=\"onNodeFocus(getNodeId(node))\"\n (blur)=\"focusedNodeId.set(null)\"\n [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n >\n @if (shouldShowDragHandle()) {\n <span\n class=\"ax-tree-view-drag-handle\"\n axDragHandle\n title=\"Drag to reorder\"\n (click)=\"$event.stopPropagation()\"\n >\n \u22EE\u22EE\n </span>\n }\n <ax-button\n class=\"ax-tree-view-expand-toggle ax-sm\"\n (onClick)=\"toggleNode(node, $any($event))\"\n (click)=\"$event.stopPropagation()\"\n [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n [disabled]=\"getNodeLoading(node)\"\n [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n >\n @if (getNodeLoading(node)) {\n <ax-icon>\n <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n </ax-icon>\n } @else {\n <ax-icon>\n <i\n [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n class=\"ax-tree-view-toggle-icon\"\n ></i>\n </ax-icon>\n }\n </ax-button>\n\n @if (nodeTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate()!\"\n [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n ></ng-container>\n } @else {\n @if (shouldShowCheckboxForNode(node)) {\n <ax-check-box\n class=\"ax-tree-view-checkbox\"\n [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n [indeterminate]=\"getNodeIndeterminate(node) || false\"\n (onValueChanged)=\"toggleSelection(node, $event)\"\n ></ax-check-box>\n }\n @if (showIcons() && getNodeIcon(node)) {\n <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n }\n <span\n class=\"ax-tree-view-node-label\"\n [axTooltip]=\"getNodeTooltip(node) || ''\"\n [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ getNodeTitle(node) }}\n </span>\n @if (showChildrenBadge() && (getNodeChildrenCount(node) || getNodeChildren(node)?.length)) {\n <span class=\"ax-tree-view-node-badge\">\n <ax-badge\n class=\"ax-tree-view-children-badge\"\n [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n ></ax-badge>\n </span>\n }\n }\n </div>\n </div>\n @if (getNodeExpanded(node) && getNodeChildren(node)?.length) {\n <div class=\"ax-tree-view-children\" role=\"group\">\n <ng-container\n [ngTemplateOutlet]=\"childrenList\"\n [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n ></ng-container>\n </div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed}.ax-tree-view-node-disabled .ax-tree-view-node-content{pointer-events:none}.ax-tree-view-node-disabled .ax-tree-view-expand-toggle{pointer-events:auto;cursor:pointer}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}.ax-tree-view-skeleton-toggle{min-width:1.5rem;height:1.5rem;border-radius:.25rem}.ax-tree-view-skeleton-label{flex:1;height:1rem;border-radius:.25rem}.ax-tree-view-drop-list.ax-tree-view-loading{display:none}\n"] }]
2307
2307
  }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], hiddenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], childrenCountField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenCountField", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], inheritDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritDisabled", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onNodeDoubleClick: [{ type: i0.Output, args: ["onNodeDoubleClick"] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
2308
2308
 
2309
2309
  class AXTreeViewModule {